featured

15 Resources for Front-End Devs

By -

We’re well into 2015 and I’m sure you’re feeling one of two ways right about now:

  1. Really overwhelmed at how much there is to learn in this industry, or
  2. Hungry for more and can’t wait for some new ideas for what to learn next.

Okay, I suppose it might be a combination of the two – the first coming out of our personal feelings and the second out of sheer necessity.

So to help you out, I’ve compiled another list of useful documentation, info-sites, and guides related to various areas of front-end development.

1. I want to use

Based on data and features listed on Can I use, this app gives you the ability to select a number of front-end development features and get a percentage readout of the number of users worldwide that will see the features you choose.

I want to use

2. Regulex

A client-side, regular expression visualizer with a precise error indicator, should you have a syntax error in your expression. Also offers an option to embed the output anywhere, using an iframe.

Regulex

3. Mastering the :nth-child

A one-page website to help you grasp how to use the various useful but often complex nth-child based selector combinations.

Mastering the :nth-child

4. HTML5 Video Events and API

“This page demonstrates the new HTML5 video element, its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values). See the effect on the video and on the underlying events and properties.”

HTML5 Video Events and API

5. Excess XSS

This is probably a topic that all developers should be familiar with, and this might be a great place to start. It’s a comprehensive tutorial on cross-site scripting, a description of potential types attacks, along with solutions for preventing them.

Excess XSS

6. RSCSS

Meaning “Reasonable Standard for CSS Stylesheet Structure”, a work in progress to document some tips and techniques for writing Sass/CSS for very large projects.

RSCSS

7. Sass Guidelines

From the Sass master himself, Hugo Giraudel, “an opinionated styleguide for writing sane, maintainable and scalable Sass.” The guide has already been translated into 6 other languages.

Sass Guidelines

8. Flexbugs

“A community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here.” Definitely a must-bookmark for those starting to build new layouts with Flexbox.

Flexbugs

9. A Front End Engineer’s Manifesto

Nothing too in-depth, just a simple set of reminders of stuff that all front-end developers should consider incorporating into their development process and workflow.

A Front End Engineer's Manifesto

10. ECMAScript 6 equivalents in ES5

A nice reference for converting ES6 features to ES5-compatible code. Very useful considering ES5 has great support but ES6 doesn’t.

ECMAScript 6 equivalents in ES5

11. Flexbox Adventures

An in-depth, practical look at Flexbox, from Aussie-based developer Chris Wright. He’s also posted Using Flexbox Today, which tries to help you make the move to Flexbox in a logical, pragmatic manner.

Flexbox Adventures

12. Get BEM

A comprehensive site promoting and educating in the use of the popular BEM CSS methodology.

Get BEM

13. HTMLelement.info

A neat, logical, easy to use guide to get information on different HTML elements from the spec.

HTMLelement.info

14. Animations — Web Fundamentals

There’s lots of good info in Google’s Web Fundamentals documentation, but this one stands out for front-end devs in particular because of the importance of applying some good practices when animating UI elements.

Animations — Web Fundamentals

15. Favicon Cheat Sheet

“A painfully obsessive cheat sheet to favicon sizes/types.” Compiled from a number of different popular articles that discussed the ins and outs of favicons across desktop and mobile.

Favicon Cheat Sheet

Share Your Thoughts

Copyright © 2011, 2016 - BWD MEDIA
Web Design & Digital Marketing Agency
Call Now Enquire