Front-End Performance Guide

There are a lot of guides on performance optimization for front-end developers, but this one is really the definitive front-end performance guide. Includes guides and examples on best practices for HTML, CSS, JavaScript, jQuery, Images and Server. There are also links for useful tools about front-end performance.

http://browserdiet.com/

My Ultimate Technique to Inject Javascript

With every larger Project I’ve developed and architected I’ve tried something new to improve things I’ve coded before. Reflecting and never being satisfied whit things done before has helped me become a better front end developer and architect. Now I’m arrived at a point where I dare to say that I have found the ultimate technique to insert JavaScript into an application.

Continue reading “My Ultimate Technique to Inject Javascript”

Learn CSS Layout

This link teaches all the CSS fundamentals that you should know when dealing with CSS layouts.

It is the most comprehensive tutorial on this topic containing short descriptions, code examples and further links for display, box-sizing, position, float, clear, CSS3 column, flex-box and media queries.

http://learnlayout.com/

CSS performance at GitHub

Detailed slideshow about GitHubs CSS performance. With examples of low performance CSS selectors and tips on how to remove unnecessary HTML tags to reduce HTML DOM matches. Includes also slides about teamwork and layout performance monitoring tools.

Even though leaner CSS is always good for performance and maintenance this article focuses mainly on pages with heavy HTML DOM.

https://speakerdeck.com/jonrohan/githubs-css-performance