Crafty Resources for the Front End Developer

Hello! At Delphic we live on the web. Everyday my colleagues and I share information on how to improve upon current practices as well as share links to websites that can enhance our daily workflow. Today we will look at a handful of these front end developer resources and how they can help us be more efficient in our craft.

HTML5 Please

HTML5 Please provides a way to search for features in HTML5 and CSS3 and to find out if they are ready to be used. Not only does it give a description of what the feature does, it also provides recommended fallbacks and polyfills. Each feature has a link to view its browser share on caniuse.com, which is another fantastic resource.

StackOverflow

Stack Overflow is a magical place full of developers like yourself who are there to either ask a question or answer a question or perhaps do both. Whether I’m dealing with a specific legacy browser bug or I have an SVG question, this is one of the best places to find an answer to your issue. Nine times out of ten someone has already asked the same question on Stack Overflow that you are pondering and there is already an in-depth solution and explanation. I can’t recommend this website enough.

Litmus

Working as a web developer, we are all familiar with coding websites that not only need to work on modern browsers but also legacy browsers because they still maintain a significant market share. HTML emails present a similar challenge but instead of testing on a handful of browsers, we have to test on 15 to 20 different email clients. It’s crucial that we test and optimize our code because each email client has its own quirks and limitations. Luckily there is a wonderful online tool called Litmus where you can preview and test your code on over 30 email clients all at the same time. When coding html emails we throw Zeldman’s Web Standards book out the window and go back in time to code in table layouts from 2002. To triumph over these challenges Litmus can be an invaluable tool. Note: this is a paid subscription service, but it is well worth the investment.

SpriteCow

Creating sprites can be a tedious endeavour. SpriteCow can make CSS sprites easier to manage and update. We can upload a sprite and get the CSS width, height, and background-position values for every image within our sprite. You can also change from pixel values to percentages and turn on scaling for retina displays!

I hope that you can find as much value in these resources as I have. Is there anything that you’ve found you can’t live without in your daily toolset? Please sound off below in the comments. Thanks for tuning in!

« Prev Article
Next Article »