#349 — July 18, 2018 |
Frontend Focus |
▶ The 9 Biggest Mistakes when using CSS Grid — A fast-paced 14 minute video (ideal for a lunch break!) that runs through things like overusing CSS Grid, reaching for frameworks too quickly, or worrying about IE11 too much. Jen Simmons |
Chrome's 'Site Isolation' for Web Developers — Chrome’s new Site Isolation feature ensures pages from different sites run in a sandbox to improve security and prevent cross-site data sniffing techniques. This introduces some possibly unexpected considerations for Web developers, as covered here. Mathias Bynens |
Choosing the Right JavaScript Framework: Whitepaper — How do you choose one JavaScript framework over another for your next web application? Learn about the current state of Angular, React and Vue and how they compare against a comprehensive set of criteria. Download now. Progress Kendo UI sponsor |
The Holy Grail of Reusable Components: Custom Elements, Shadow DOM, and NPM — A look at augmenting HTML with components that have built-in functionality and styles as well as reusing them across projects via npm. Oliver Williams |
Building the Google Photos Web UI — It’s always fantastic to get a detailed look under the hood of how some of the web’s most heavily used apps are built. Antin Harasymiv (Google Design) |
Is It Worth Using IE's Version of Grid Layout? — Last week, we ran an item about coding CSS grid to work in IE 11 too but Rachel Andrew suspects it’s not necessarily worth the compromises. Rachel Andrew |
▶ CSS in JavaScript: FTW or WTF? — 10-15 years ago there was a heavy push in the webdev world to keep HTML, CSS, and JavaScript far apart but this is increasingly changing in modern webapps. This talk reflects on the concepts, pros and cons involved. Bruce Lawson |
💻 Jobs |
Sr. Front-End Engineer, OTT - New York City — Vimeo is a place where all stories can be beautifully told. Build the future with us. Vimeo |
Senior Developer, New York or Remote — We're looking for a Sr Dev to join our team to help build, deliver and produce quality products for our growing customer base. Apartment Therapy Media |
Find A FrontEnd Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create your profile to get started. Vettery |
📘 Tutorials & Articles |
How to Build an Animated Slider Component Eder Diaz |
❄️ ColdFront and a Holistic Future Outlook at the Front-End Landscape ColdFront Conf sponsor |
What Are Service Workers and How They Help Improve Performance — Service workers run in the background of a user’s browser and help provide various extended features. Cody Arsenault |
CSS Quick Tip: The Valid Characters in a Custom CSS Selector — Ultimately, though, don’t try to be too clever. Adam Laki |
An Experiment in Delivering WordPress in 7KB Jack Lenox |
▶ The Friction of Web Standards — Why does it take a long time to ship some new Web standards and what are the challenges implementors and spec authors face? Eric Meyer |
Which Podcasts Should Web Designers And Developers Be Listening To? — A shortlist of current podcasts for web designers and developers. Smashing Magazine |
🔧 Code and Tools |
PWACompat: The Web App Manifest for All Browsers — Use the PWACompat library to easily bring your Web App Manifest to all browsers, even non-compliant ones. Google Developers |
Pinpointer: A Firefox Addon to Link to Specific Elements on Pages Firefox Addons |
Popbox.js: Stackable Modals for Web Pages — If you need a modal on top of your modal.. popbox.js |
SlickMap CSS: A Stylesheet to Turn HTML Lists into Elegant Sitemaps — Demo here. Astuteo |
Phenomenon: A 2KB Low-Level WebGL Library — Provides the essentials to deliver high performance visuals easily. Several neat demos with code including throwing 10000 cubes around. Colin van Eenige |
Recurss: Recursive CSS Experiments — Take a big pile of nested DIVs, apply a style, what happens? Matt Bierner |
An Interesting 'Scrolling Gradient' Effect in Pure CSS — Overlaying two gradients leads to an interesting effect here. CodePen |