|
Declan Rek shares real-world advice on boosting front-end performance from static site generation and the picture element to lazy loading CSS and caching.
CSS Tricks
How IFRAMEs are used, where they came from, and what the specs have to say.
Peter van der Zee
Using @supports, you can include a small test in your CSS for whether or not a particular CSS property or value is supported and apply styles conditionally.
Jen Simmons
Brian Holt (Netflix) introduces you to React plus surrounding ecosystem including: Redux for state management, React Router for navigation and more!
Frontend Masters
Sponsor
A handy tutorial digging into WebPageTest, a site speed test tool, its RESTful API, and how to use it to optimize your own sites.
Eduardo Bouças
Some neat tricks you can use today in CSS, from fancy CSS animations and a frosted glass effect, to using calc() for grids and aligning with position:fixed items.
Anselm Urban
Adobe Typekit’s Head of Typography shares some interesting ideas on dynamically calculating typography variables (e.g. font size or line heights) independent of media query breakpoints.
Tim Brown
A quick 2 minute video intro to a new unit in the CSS Grid Layout Module - the ‘fr’ unit which represents a fraction of the available space.
Rachel Andrew
Jobs 
-
29 Front End Developer JobsOur free front-end developer job site currently including frontend jobs from as far afield as Zurich and Malaysia to London and Silicon Valley. Cooper Press
-
Stop Applying to Jobs - Let Companies Come To YouOn Hired, engineers typically get 5+ job offers in 1 week. Find that new opportunity you've been craving and get access to 4,000+ companies instantly. Hired.com
Can't find the right job? Want companies to apply to you? Try Hired.com.
In Brief
Flash Is Dying in December: Long Live HTML5 Video Player news
“TL;DR: if you play HLS, it’s time to add MSE playback.”
Hadar Weiss
Micropub is Now a W3C Candidate Recommendation news
Aaron Parecki
Polymer Summit 2016 Arrives in London on 17-18 October 2016 news
Join the second Polymer Summit at Tobacco Dock, London for two full days of talks, codelabs, and breakout sessions from the Polymer team and major companies using Polymer and web components in production.
Google, Inc. Sponsor
Using CSS3 Counters for Figure and Table Numbering tutorial
Olivier Pieters
A Few HTML Tips tutorial
Mozilla Hacks
Bootstrapping Progressive Web Apps with amp-install-serviceworker tutorial
How to build a seamless bridge between AMP pages and Progressive Web Apps with amp-install-serviceworker.
Ruadhán O'Donoghue
How to Use the Module Pattern in your SCSS/Sass Stylesheets tutorial
Marc Mintel
`font-display` for The Masses tutorial
font-display is a new CSS property for controlling how Web fonts display.
CSS Tricks
Auditing the US Presidential Candidates Websites for Accessibility story
An accessibility audit on Hillary Clinton’s and Donald Trump’s campaign sites.
Helena Zubkow and Mike Herchel
Offline Content with Service Workers story
A look down the ‘deep rabbit hole’ of how powerful and versatile service workers are for delivering offline content.
Mike Riethmuller
Building a Web Audio Experiment: Detecting Piano Notes story demo
David Gilbertson
Headings and Semantic Structure for Accessible Web Pages video
Marcy Sutton
Getting Started with CSS Transitions (a very simple 2 minute video) video
Channel 9
Photoshop Etiquette For Responsive Web Design opinion
Dan Rose
Lightning fast SSD hosts for your HTML5 project tools
Host your HTML5 site on Linode servers - the fastest VPS hosts available. Use promo code HTML520 for $20 credit.
Linode Sponsor
Surfingkeys: Expand Your Browser with JavaScript + Keyboard tools
Write JS to do things in the browser when triggered by the keyboard.
Brook Hong
25 Essential Chrome Extensions for Web Designers tools
A good round-up of tools for devs and designers.
Paul Andrew
Push.js: JavaScript Notifications for (Almost) Every Browser code
Tyler Nickerson
Animate.js: A Tiny Script to Trigger Animations on Elements When In Viewport code
Josh Johnson
|