The following is a guest post by Tyler Sticka Tyler created a tool called Colorpeek. In this article, he'll introduce you to what the web app does and why, and then how the Chrome Extension works to extend that. Then tomorrow, stay tuned, as Tyler will show us how he built the Chrome Extension.

A while back I found myself engaged in a monotonous task most designers will relate to. Having carefully selected a color palette in whatever design application I favored that day, it was time to share those color values with my collaborators.

I could have dumped a bunch of hex triplets into an email and called it good. But until we all start cultivating an encyclopedic knowledge of the RGB color model, it's probably best to include some sort of image as well.

So I dutifully hauled out Photoshop and made something like this for what felt like the thousandth time:

That's better. But it's also impossible to copy text from, and tedious to update. Yet we continue to manually create these simple palette mockups over and over.

Top researchers in the field of color science estimate that roughly three zillion new color apps debut each and every year. ^{[citation needed]} A lot of them are really cool. But the rest are pretty complicated, and none do exactly what I want.

So in my spare time, I made a web app called Colorpeek.

Meet Colorpeek

Colorpeek helps you quickly see and share colors in whatever CSS notation you're already using. It supports hex, RGB(a), HSL(a), named colors and even some non-standard brand colors. They all get displayed in a simple, responsive layout.

Some examples:

• Hex: colorpeek.com/#a899f2
• RGB with alpha: colorpeek.com/#rgba(221,78,133,0.5)
• Color keyword: colorpeek.com/#lightcoral
• Multiple colors (mixed formats): colorpeek.com/#hotpink,rgb(77,196,94),hsl(212,73,67)
• Some brand colors: colorpeek.com/#facebook,twitter,youtube

If you're more of a visual thinker and your browser supports drag and drop and the file API, you can add colors by dragging images right into Colorpeek. It'll grab the most prominent colors thanks to Lokesh Dhakar's magical Color Thief script.

Once you have a Colorpeek palette, you can set its notation by tapping or clicking the button. The button lets you share the page or "export" to a handful of formats (plain text, JSON, LESS, SCSS or Stylus).

Problem Solved! (Almost…)

I launched Colorpeek in May, but soon noticed a problem. Colorpeek made sharing colors easier, but it didn't do much for receiving them. I still saw mail like this:

Here are the colors we're using:

Blue: #2b95d2
Green: #2cc96b
Red: #ed4d55
Dark Blue: #20303c

(Apologies to the unnamed real-life friend I'm passive-aggressively shaming in public for this message. You should have known better.)

My first instinct was to use Cerebro to telepathically insure Colorpeek's ubiquity in the minds of all present and future collaborators. My lack of telepathic ability coupled with the devastating realization that the X-Men are fictional quickly derailed those plans.

So I made a Chrome extension instead.

Once installed, you can:

• Create palettes from text selections (like the previous email example);
• See every CSS color on a webpage;
• and grab the most prominent colors from images embedded in a page.

The extension is free and available now in the Chrome Web Store. Here's a quick video demo if you'd like to see it in action:

What's Next

I made Colorpeek for myself. I kept its scope small so I could use it quickly. In that sense, the project is "complete." But I'm a tinkerer with no shortage of ideas. If the audience is there, I'd love to make color sharing and collaboration even easier.

You can follow @Colorpeek on Twitter if you'd like to know what the future holds.

Colorpeek: A Simple Way to See and Share CSS Colors is a post from CSS-Tricks

One of the most common questions I’m asked by Treehouse students is, “Which text editor should I use?” That’s a really great question with no simple answer. However, I can understand why it’s confusing. Wikipedia’s comparison of text editors is ridiculously lengthy and feels beyond human scale. Yet it makes sense that there’s an abundance of variety, because a text editor is a programmer’s most important tool and it mostly comes down to personal preference.

What is a text editor?

A text editor is a computer program that allows you to create and edit files that contain plain text. This is very different than a robust word processing program like Microsoft Word, Apple Pages, or Google Docs, because they add special formatting that’s hidden to the user. When you’re writing computer code, you don’t need or want any special formatting. In fact, your code probably won’t work at all unless it was written and saved in a plain text environment.

Text editors are commonly used by web designers and developers because it provides maximum flexibility to create just about anything. This is where professionals “hand code” HTML, CSS, JavaScript, Ruby, PHP, and many other languages.

For completeness, I should also point out that a text editor is not the same thing as an IDE (integrated development environment). While almost every IDE has the capability of creating and editing plain text documents, they also include a wealth of other features and powerful capabilities. Some people do prefer these power tools, but they can sometimes come at the expense of other factors like flexibility, ease of use, or code that is both lean and performant. IDEs also tend to take up more screen space for all of their various panels and widgets, which can factor in to the decision for some people. A more everyday text editor lacks these capabilities in exchange for maximum flexibility.

Which text editor should I use?

Imagine that you’re in a restaurant and you ask, “What kind of wine should I get?” The server might recommend some reds and whites, but you may ultimately want them to make the decision for you. There’s too many to choose from, so if you’re inexperienced, you’re naturally inclined to draw upon the experience of another.

Text editors are a similar beast. The text editor you use depends on a couple of factors, but primarily it comes down to personal preference. While there’s no simple answer to “Which text editor should I use?” there’s one simple rule that can guide you in making the choice:

You should use the text editor that makes you the most efficient.

If you’re comfortable with your tool, it (hopefully) means that you’re also able to get work done quickly. The tool should disappear and allow your ideas to fly. Most text editors aspire to this vague goal, but it’s a moving target because everyone has slightly unique preferences and needs. Now, let’s get a bit more practical and take a look at a few of the most popular text editors that the pros use.

Sublime Text

Price: $70 USD, free trial
Platform: Windows, Mac, and Linux
Website: http://www.sublimetext.com/
When choosing a text editor, you should try out a few to see which ones you like. However, if you just want a great all around text editor, then download Sublime Text. Currently in its 2nd version with version 3 on the way, this is a popular choice amongst web professionals because of its simplicity and low learning curve. It works on Windows, Mac, and Linux, it has great syntax highlighting, nice default themes, and a few built-in power features. We use Sublime Text 2 in most Treehouse videos and it works great for us.

VIM

Price: Free
Platform: Windows, Mac, and Linux
Website: http://www.vim.org/
Vim is notorious for being difficult to learn, but rewarding. It has a high learning curve and isn’t really suitable for beginners. If you’re just starting to program, you’ll have enough to learn as it is, so you might not want to pile on additional difficulty. However, if you’ve been coding for several years and you’re ready for more powerful tools, vim might be for you. Its power is in its extensive customization and keyboard macros. Even after learning the basics of vim, many programmers feel they’re able to code more efficiently.

TextMate

Price: $54 USD
Platform: Mac only
Website: http://macromates.com/
TextMate is a text editor for Mac OS X that has been around for quite some time. This is very similar to Sublime Text, but with the addition of source control and other file navigation features. Feature overlap is perfectly fine though, because as I mentioned earlier, a lot of choosing a text editor comes down to personal preference. After 6 years of work and lots of anticipation, the source code to the 2.0 version was released to the public. Even though the product is open source, its creator likens this to DRM-free music in that it allows you to do more with it. You can download TextMate for free, but future versions may require a license, so it’s best to purchase one.

Coda

Price: $75 USD, free trial
Platform: Mac only
Website: http://panic.com/Coda/
Coda leans a lot more towards an IDE than other text editors I’ve listed. The reason I’m including it in this list is because it’s primarily targeted at web development, which makes it slightly unique. Most other text editors are intended to be general purpose and should work with any plain text file. Coda is absolutely packed with features, so if you’re coming from another programming environment with a more robust IDE (like Xcode) then Coda might be a good transitional program for you. In addition to a text editor, Coda includes an FTP client, MySQL management, and more.

Notepad++

Price: Free
Platform: Windows only
Website: http://notepad-plus-plus.org/
Many web professionals get their start with Notepad, the text editor that’s included with Windows. This makes sense, because Windows is a popular operating system and the included text editor is easy to access. If you’re comfortable with Notepad but you’re ready to step things up a bit, you might enjoy Notepad++. It includes syntax highlighting, tabbed files, and lots of other features that feel more like an enhancement to Notepad rather than a separate program.

As I mentioned previously, there’s no shortage of variety when it comes to text editors. If you have others you’d like to recommend, please mention them in the comments!

The post Which Text Editor Should I Use? appeared first on Treehouse Blog.

Project: IMHOTEP is an eleven-week internship (May 19, 2014 – August 1, 2014) designed to increase the knowledge and skills of student trainees in biostatistics, epidemiology, and occupational safety and health. The program begins with two weeks of intense educational training. The purpose of this training is to equip interns with the academic coursework and information necessary to complete the program. During the following eight weeks, interns conduct public health research with experts at the CDC, NIMR, Academic Institutions, State Agencies, and various other public health agencies and community based organizations. Interns also receive a $3,500 stipend, lodging, and travel to and from their site location and city of origin.

Applications are due January 31, 2014 by 11:59PM and can be found at the link below. The following items must be submitted by the application deadline.

by Janet McGlynn

From Engineers without Borders working to generate clean drinking water in Kenya to the Making Words Count lab advancing our knowledge of women’s struggles, UMBC students conduct original mentored work that makes a difference in our community and our world. My responsibility for campus-wide undergraduate research programs at UMBC allows me to work with these and other engaged students as they develop and carry out independent research, scholarship, and creative work. These last days of the fall semester are a key time for students thinking about applying for university funding to support their research/creative work ... (continue reading)

We are all dressed up for the holidays! Come up to the 3rd floor and visit us / grab some free stuff.

We used to have an awesome series called "Recently in Web Development" which listed out cool happenings around the web development industry. It touched on interesting frameworks, tools, articles and tutorials, helping to organize information in a quick and easy-to-read format.

Based on feedback, we've decided to bring it back and hope that it helps you, our faithful readers, stay on top of the news and announcements of this fast-changing industry.

So without further ado…

News and Releases

Let's get caught up with relevant news and releases from around the web development community.

Rails 4.0.1 Is Out

The Rails framework continues chugging away with its newest update to version four. The big update in this version is a change to the way Active Record handles order calls and the subsequent prepending of an SQL ORDER BY clause. It was primarily done for backward compatibility but worth checking out to ensure your apps behave as expected.

Read more

Google Octane v2.0

Google updated their Octane JavaScript benchmark to include some new tests to simulate complex data structures and memory-intensive applications by measuring (interestingly enough) how fast Microsoft's TypeScript compiler can compile itself. There are also a number of fixes to existing tests to help improve the reliability of measurements. If you're a JS developer, it's definitely worth checking this out.

Read more

AWS SDK for JavaScript

Looks like Amazon wants to get into the "no backend" world for client-side developers. We've seen services like Firebase offer managed back-end services like this making it easier for client-side developers with no backend experience to get up and running quickly. Seems Amazon likes this too since they launched a developer preview AWS SDK for JavaScript.

Read more

Missed the Chrome Developer Summit?

If you missed the Chrome Developer Summit, be sure to at least grab the speaker decks which are chock full of great information on performance, Chrome packaged apps, and the Chrome Developer Tools.

Get the decks

And While You're At It…

Check out Addy Osmani's deck, "Rendering Performance Case Studies", which he used for a talk at VelocityConf. It should go nicely with the decks from the Chrome Summit.

Addy's slides

The Node.js Knockout Contest Announces Its Winners

Node Knockout is a yearly event which always produces some impressive results. This year's winners are no-less impressive with everything from multi-player games to embeddable JavaScript to mine bitcoins.

Read more

Firefox 29 Alpha

This is the nightly version of Firefox which will have the new Australis UI, the first big interface update to Firefox in years.

Read more

New and Notable

Here's a glance at some new resources that might pique your interest. We'll run the gamut from frameworks to books trying to call out new things that look pretty cool and might make your development easier.

RedditKit.rb

RedditKit.rb is a reddit API wrapper, written in Ruby. RedditKit.rb is structured closely to the wonderful Octokit.rb and Twitter gems. If you're familiar with either of those, you'll feel right at home here.

Read more

Ember-Autosuggest

This component will auto-complete or auto-suggest completed search queries for you as you type. There is very basic keyboard navigation using the up and down keys to scroll up and down the results and enter adds the selection, while hitting escape hides the autocomplete menu.
This is a work in progress.

Read more

Book: Node.js In Action

Node.js in Action is an example-driven tutorial that starts at square one and guides you through all the features, techniques, and concepts you'll need to build production-quality Node applications.

Read more

INIT Front-End Framework

INIT aims to provide you with a decent workflow and structure within your sophisticated web project. INIT is based upon HTML5 Boilerplate and adds more structure for SCSS files, JavaScripts, includes build tasks and a whole lot more.

Read more

Grunt-Ec2

grunt-ec2 abstracts away aws-cli allowing you to easily launch, terminate, and deploy to AWS EC2 instances.

Read more

jQuery Evergreen

jQuery Evergreen works with modern browsers. It has the same familiar API as jQuery, and is lean and mean with the following, optional modules: selector, class, DOM, event, attr and html.

Read more

Suggested Reading and Off-Topic

Tutorials are cool but sometimes we just want to read the esoteric and unique. That's what this section is for. Somewhat technical but not necessarily tutorial-based content.

Converting Print Books Into eBooks Using Radically Smart Templates

If you've ever been curious about the technical process of bringing books to a readable form on the web, then this post by Brad Neuberg of Inkling is a must-read.

Read more

4 Golden Rules for Asking Questions on Forums

It may seem obvious to many but knowing how to post for help properly will go a long way to getting you the answer you need.

Read more

How Ready Are the 5 Top US Online Retailers for Black Friday?

The team at Zoompf tested out Amazon, Walmart, Target, eBay and Best Buy to see if they're ready for Black Friday. Check out what they found in their survey.

Read more

Civic Information API: Now Connecting US Users With Their Representatives

Google released their new Civic Information API "that lets developers connect constituents to their federal, state, county and municipal elected officials—right down to the city council district".

Read more

EtchMark Under the Hood: Building a Website That Handles Touch, Mouse, and Pen – and Device Shakes

If you haven't yet seen Microsoft's EtchMark Etch-A-Sketch drawing toy demo, go check it out because it's pretty cool. Then read up on how they built it.

Read more

So Much More…

There's so much going on in the industry and hopefully this will be enough to satisfy your information appetite for now. We'll continue to search out cool, interesting and unique tidbits and bubble them up to you. We'll be back soon with more great information to share.

With the release of iOS7, Apple made the most significant changes to their application design guidelines to date. iOS7’s design language emphasizes a light, almost minimalist aesthetic approach to interface controls, including all the iconography used to label actions and views within an app.

While this change certainly modernized and simplified Apple’s operating system, it also impacted how people understand and use it. As some argue, this was not necessarily a change for the better.

In particular, the move to outlined (vs. solid) icons in Apple’s design guidelines has spurred significant debate. These symbols are used extensively in mobile apps to explain what’s possible and how to get things done. They need to communicate quickly and clearly. But do they?

Software designer Aubrey Johnson wrote an article arguing that they don’t and stated simply: “Hollow icons are more work for your users.” Audrey’s argument boils down to the idea that complex (outlined) shapes are harder to parse and understand than simple solid shapes that contain less visual elements. Less visual elements, means faster parsing, and thereby faster understanding. From a Gestalt perspective, Aubrey’s argument seems to make sense but not everyone agrees.

Bobby Solomon, for instance, wrote a counter article stating: “You’ve probably stored hundreds if not thousands of symbols in your head, so I’m not sure how a few ‘hollow icons’ are going to completely confound you” 

Bobby points out that written language is essentially a set of “hollow icons” and that we readily process and understand them while reading every day. Fair enough, but context may play a critical role as language is a set of symbols we interpret the same way every day many times a day. A set of icons within an app is never going to get that kind of exposure. In an interface, iconography needs to communicate — whether we’re familiar with it or not.

Caesar Wong chimed in to the debate as well on Quora by highlighting several sources that detail how images are processed by our eyes. Caesar’s personal conclusion was that the whole debate is more about art than science. 

So what do you think? Which icons are easier to understand at first glance: outlined (hollow) icons or their solid (filled in) icons?

How did you vote? Should icon design take its lead from its context, or does legibility supercede context? Let us know your thoughts in the comments.

Featured image/thumbnail, uses hollow icon set image via Shutterstock.

Create Panoramic Shots with Teorex’s PhotoStitcher – only $9.97!

The Internet Architecture Board and W3C just announced a Workshop, Strengthening the Internet Against Pervasive Monitoring, 28 February – 01 March 2014, in London (UK). The event is co-located with the 89th IETF Conference that will take place from 02 – 07 March at the Hilton Metropole in central London (UK).

The Vancouver IETF plenary concluded that pervasive monitoring represents an attack on the Internet. Pervasive monitoring targets protocol data that we also need for network manageability and security. This data is captured and correlated with other data. There is an open problem as to how to enhance protocols so as to maintain network manageability and security but still limit data capture and correlation.

The overall goal of the workshop is to steer IETF and W3C work so as to be able to improve or strengthen the Internet in the face of pervasive monitoring. A workshop report in the form of an IAB RFC will be produced after the event.

Participants are required to submit a position paper or an Internet Draft by 15 January 2014.