Developer Toolkit - Essentials

I've made a post before about developer toolkits and stuff to add to them, but I haven't really mentioned the essentials.  In today's post, I'm going to go over items that I use almost on a daily basis.  Sometimes, I don't even realize I am using them because they are part of my boilerplate.  Let's get started:

1. HTML5 Boilerplate

This is basically an HTML5 ready template to get started with your projects.  It includes a lot of stuff that I'm going to go over, but I have just started using this boilerplate. Before, I had to download everything separately.

2. Normalize.css / Reset.css

These stylesheets reset CSS so that your document is pretty much clean from styling.  It's a great way to start projects because you don't have to tackle with any predefined CSS styles.  These stylesheets are also great for browser compatibility.  For example, a line height might look different across several computers.

3. HTML5 Shiv

This makes older versions of IE understand HTML5 tags.  Very useful, but it looks like the days of supporting XP are numbered.

4. jQuery

Download the full or minified versions and slap them on your <head> tag. This is the most popular Javascript library out there.

5. Modernizr

Another Javascript library.  This one checks to see if your browser has certain features.

6. Adobe Kuler

This tool is more for a designer, but I have really grown to enjoy the application.  It comes in both a desktop and mobile version.  It basically helps you choose color palettes.  You can also take pictures with your phone and it will auto detect the color palette of the picture.

That's about it for my toolkit.  Again, these are my most-used tools.  There are plenty of tools out there and I ocassionally I will use them, but these are a must-have.

Take care and stay tuned for more updates!

Developer Toolkit: Web-safe Font Generator

Fonts are incredible tools for designers.  A font is just like every other visual tool out there in that it has the capacity to: spark an emotion, carry a message, or be so well emerged with its surroundings that its aesthetics are easily overlooked.  There are literally thousands of fonts for a designer to choose from, but it is believed there is only one true font to fit a specific need within a project.  Picking that font can be a huge task, especially if you’re lost in the sea of downloaded fonts, but implementing that font on the web should be hassle free.

If you’re a developer, I’m sure you have already discovered that a custom font coded via the @font-face tag doesn’t always work across every browser.  The problem is that each browser supports different fonts.  For example, Internet Explorer and Mozilla Firefox do not support SVG fonts.  And mobile support is a different story.

To combat this problem, it is as simple as referencing every font file type for the font you want to use.  However, getting every file type is not so easy.

Have no fear; Font Squirrel’s Webfont Generator is here!

Font Squirrel’s tool takes away the painful task of finding every file type for a font by converting one file type into four.  To use the tool, the user must own the font they want to use and make sure that it is legal for the font to be used on a personal level.  Sites like Font Squirrel or dafont provide fonts to download and they usually provide the license and rights information.  Once you have cleared your font for use, you may upload the font and Font Squirrel will convert the font to four formats: .eot (Embedded OpenType), .svg (Scalable Vector Graphic), .ttf (TrueType), and .woff (Web Open Font Format).

The process is very nifty, but don’t go writing code just yet.  Font Squirrel also provides the lengthy bit of code to use in order to get the fonts to show up on the web.

Font Squirrel’s Webfont Generator provides an incredible service at no cost.  That’s right: it’s free. So go ahead and give it a try. This tool really excels when you have several fonts that you want to use across your project; it saves a lot of time.  I recently used the tool for one of my projects and it couldn't have been easier.

Resource Roundup - Keep Your Skills Up To Date With These Five Resources

Coding is similar to every other profession in that one needs to keep up to date with their knowledge and skill sets so that they don't fall behind.  This is possibly true for coding more so than any other profession because the technology changes so rapidly.  If you fall behind, you might fall out of your job.

Luckily, the coding community is an active bunch of bloggers, writers, and networkers.

In this week’s blog post, I’ll share some of my favorite resources that I have been following since my venture into front end development.

For Beginners:

CodeCademy

If you have never coded a single line of text in your life, then CodeCademy is a great stepping-stone towards front end development.  It has detailed, interactive tutorials on multiple languages including HTML, CSS, PHP, JavaScript, jQuery, Python, and Ruby.

For Everybody:

Hey, designer!

Hey, designer! is a great resource for both developers and designers.  A small portion of my blog is dedicated to web design, so why not share a resource that has both subjects underneath one website?  Hey, designer! is basically a resource gathering board; all of the links lead to external sites.  Posts range from educational blurbs about design to in depth JavaScript library tutorials. The best part of the site is the trending section, which shows which articles have been clicked on the most for the day, week, or month.

HTML5 / Javascript Weekly

If you’re looking for a once a week update that comes as one newsletter, these resources are great.  Once a week, an email will be sent in a newsletter format with the latest news surrounding each subject.  Each newsletter features a featured section, code and tools, watch, read, and a job openings section (ding ding!).  I recommend signing up for both.

Here’s an example issue for HTML5:

http://html5weekly.com/issues/125

Codepen.io

Like art, checking out other people’s work is a part of being an artist.  It keeps you on your toes, culturally up to date, and it might spark some inspiration.  Codepen.io is a great resource if you want to see what other people are doing.  Projects are hosted on Codepen with all of their code available for the world to see.  Most creations are on the brink of falling apart, but these people are trying to push the boundaries of coding.  However, when something works well and you want to use it on your site, you are able to by just copying and pasting the code.  Everything is shared.  After all, everything is stolen from somewhere nowadays.  You just have to steal correctly.

THE Front End Development Resource

I saved the best for last.  Yes, I meant to capitalize the; this resource is the resource to end all resources. I’m not sure who this person is, but they have combined every front end development resource out there into one, easy to navigate document.  Everything is split up into categories, so it’s easy to digest.  It might take you a year to go through it all, but it is definitely worth playing with.  And look, it’s hosted on GitHub.  This could be a project that a lot people have worked on.

Tool Review: Sublime Text 2- make the switch to a better text editor

For developers, the debate over which text editor to use is along the lines of every other product comparison feud; each product has its positives and negatives for people.  However, there seems to be a text editor that is standing out more than others: Sublime Text 2.  Sublime Text is marketed as a code, markup, and prose editor.  It’s fast, available on all platforms, and has a few tricks up its sleeves.

One of the first things that sticks out about Sublime Text is the overall look.  The colorful text really contrasts the black background.  You really feel like you’re in one of those movies that has some guy coding on a black screen with green text all night.

On the right, another scrollable frame exists that shows your entire project zoomed out.  Sublime Text calls this the Minimap.  This is really useful for when you are working in a large project and need to quickly scroll through the text.

Most code editors can be visually altered, so looks aren’t everything.  So what else makes Sublime Text special?

Navigating documents and Sublime Text is very fast.  One of their features, Goto Anything, allows users to open a document with ⌘P and then they can begin typing the name of the document. Once the document is open, they can type @ to quickly jump to symbols, lines, or words.

Sublime Text 2 in action

You can also be at several places in the document at once. Multiple Selections allows users to type on multiple lines at once.  Instead of making ten changes across the document, you can change all of those lines at once.  This is especially useful for when you need to rename variables or make batch edits.

You can also quickly change the syntax of documents.  If you're working in a CSS documents and it hasn't automatically changed the syntax to CSS, you can do so.  This syntax has special color coded tags that allows for easier editing and navigation within documents.

Another appeal is that it is the same across all platforms.  Currently, Sublime Text 2 is $70, but your purchase extends your license across all platforms.

With that said, Sublime Text 2 is highly customizable.  This is probably the most important feature and why Sublime Text is so popular.  There is a huge library of plugins, which allow for further customization.  In a future blog post, I will discuss some further enhancements you can make to get the most out of this text editor.