AVAILABLE NOW: Front-End Developer Handbook 2017
Learn Web Browsers
A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems.
The most commonly used browsers (on any device) are:
- Chrome (engine: Blink + V8)
- Firefox (engine: Gecko + SpiderMonkey)
- Internet Explorer (engine: Trident + Chakra)
- Safari (engine: Webkit + SquirrelFish)
Image source: http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly-201501-201601-bar
Evolution of Browsers & Web Technologies (i.e., APIs)
- evolutionoftheweb.com [read]
- Timeline of web browsers [read]
The Most Commonly Used Headless Browser Are:
- PhantomJS (engine: Webkit + SquirrelFish)
- SlimerJS (engine: Gecko + SpiderMonkey)
- TrifleJS (engine: Trident + Chakra)
How Browsers Work
- 20 Things I Learned About Browsers and the Web [read]
- Fast CSS: How Browsers Lay Out Web Pages [read]
- How Browsers Work: Behind the scenes of modern web browsers [read]
- So How Does the Browser Actually Render a Website [watch]
- What Every Frontend Developer Should Know About Webpage Rendering [read]
Image source: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Optimizing for Browsers:
- Browser Rendering Optimization [watch]
- Website Performance Optimization [watch]
Browser Security
- Browser Security Handbook [read]
- Frontend Security [watch]
- HTML5 Security Cheatsheet [read]
- Security for Web Developers: Using JavaScript, HTML, and CSS [read][$]
- The Tangled Web: A Guide to Securing Modern Web Applications read
Comparing Browsers
- Comparison of Web Browsers [read]
Developing for Browsers
In the past, a front-end developer spent a lot of time making code work in several different browsers. This was once a bigger issue than it is today, unless you have to write code for older browsers (i.e., <IE8). This still remains an issue today, just not one that demands so much of the front-end developers time and brain cycles. The fact of the matter is modern abstractions (e.g., jQuery, pre-processors, transpilers) have done away with a lot of browser inconsistency issues.
Evergreen Browsers
The latest versions of browsers are considered evergreen browsers. That is, in theory they are suppose to automatically update themselves silently without prompting the user. This move towards self updating browsers has been in reaction to the slow process of eliminating older browsers. Older browsers are complicated to develop for given their deviations from the commonalities between modern browsers (i.e., new specifications and this rate of change).
Picking a Browser
As of today, most front-end developers use Chrome and the tools available to a developer, "Chrome Dev Tools". However, all of the browsers offer a flavor of developer tools. Picking one to use for development is a subjective matter. The more important issue is knowing which browsers you have to support and testing in each as you develop. Select whichever browser makes sense to your brain and gets the job done. I suggest using Chrome simply because the developer tools are consistently improving and at this time contain the most robust features.
Browser Hacks
- browserhacks.com [read]