BUZZKILL Front End Developer Pitfalls

BUZZKILL: Maximize Your Coding Skills by Avoiding Shiny New Distractions

The depth and breadth of front end coding options seems to grow exponentially. Every time I turn around it feels like there is some new trend touted as a giant-killer. Whether it is a new language set to revolutionize the HTML landscape or a better more efficient library to cut hours off your development, they all have one thing in common. Hype.

MYTH: I have to learn the latest trend to stay relevant

Inundated by the glorious press and rave reviews by people you may or may not know, coverage of new trends is hard to ignore. With it being relatively easy to get information published on the internet, the presses never turn off and are hungry to discover that diamond in the rough. Do not spend unnecessary energy chasing these fads. Yes, some may pan out long term, but most of them will have only core niche fanatics who keep the tenders smoldering long after the fire has gone out.

If you have the time to invest in learning these new skills, and you should always be learning, there is an alternate approach. Stay true to the basics. Almost all these ‘new’ ideas are based off of the core assets any front-end developer needs to know: HTML, CSS and JavaScript. My suspicion is even being familiar with these you can still go deeper. Why spend your time getting a surface understanding of something new when you can develop a deeper and richer understanding of these base languages?

Tip: If you really want to see an example of how hard it is to know it all, check out this wonderfully thorough list of links for front-end developers.

HTML

This is the absolute core of a web page. Without this, not a whole heck of a lot can take place in your browser. While the mark-up code comprising HTML is not too difficult, the new additions to HTML5 are a departure from the old ways. The idea being that now you can further define and refine what your code represents to make it more semantic. This give meaning to your content. As a step further, HTML5 tries to pull away from plug-ins by offering core abilities. Perhaps invest some of your free time exploring video.

CSS

If you want your page to look good without posting image only designs, you have to learn this language. While much more to tackle than HTML, it is worth the time investment. Once you get a sense of how the language is implemented and how semantics work, it is not too hard to become comfortable. CSS3 adds so much depth and value to your user’s visual experience. If you are hankering for something new, instead of chasing a car you might want to sink your teeth into CSS animations. It is important to note, while not fully ready for prime time due to browsers not getting with the program quick enough, this is where things are headed. Getting in line early puts you in front of the pack.

JavaScript

While CSS can add interaction to your site, you really need JavaScript to make your site an interactive wonder. Flash used to hold a lock on this spot, but with mobile (you are addressing mobile, right?) taking center stage for visitors you can no longer fall to this technology. JavaScript is the way to go. This is a full-blown language which is super robust and extremely deep. I feel pretty confident that while you might know all the HTML5 and CSS3 you possibly can, you do not know everything about JavaScript. Spend time making your own widgets to really immerse yourself in the language.

Tip: It is always easier to learn from a working example. Try diving into JavaScript with a library like jQuery.

If that it too daunting, start with jQuery, which is a library of code already written. It is a very robust, well groomed and maintained code base for people wanting to use JavaScript but not needing to always reinvent the wheel. There are other JavaScript libraries out there, but I feel this one is a safe place for people to start as the documentation and user base is vast.

Remember to use JavaScript wisely. It is tempting to put elements in your page simply because you can. That is a potentially huge mistake. Not only does it add weight to the page and slow down the load, it very likely will be annoying to the end user. Many effects can be interesting on the first couple visits, but do you really need that opening animation to greet your visitor every time they arrive on your page?

Rookie Mistake: Do it because you can.

The one thing all three of these require more than anything else is understanding. If you are exclusively a copy and paste coder, please consider another line of work. There are times you want to copy and paste because you just need to get a certain widget or effect to happen right now. I get it. If you are not 90%+ aware of what every line of code in your site provides, that is a problem. Should you not have at least that level of understanding, you just found out why you need to avoid the shinny new bobble and focus intently on your prime technologies. Understanding the core elements to the front-end of a website not only strengthens your abilities as a coder, it allows you to best service your clients. Happy clients keep you in business.

What do you think? Did I miss something you find an absolute must for a front end developer? Not quirky, specific items like GZIP but rather fundamental skills. Drop us a line and share your thoughts.

Image: Yobord