Frontend performance in 2019

#373 — January 9, 2019 Read on the Web Frontend Focus Front-End Performance Checklist 2019 — This popular frontend performance checklist has been updated for the year ahead. Smashing Magazine The Most Liked CodePen Examples in 2018 — CodePen is a popular online frontend development tool that’s packed with interesting demos and experiments, so you’ll be sure to find something neat here. 100 are listed, so if you’re short of time, you might want to just see the top 10. CodePen Learn Angular: The “Batteries Included” Framework 🔋🔋 — Build a full app from scratch in this new Angular 7.x course. We will start from ground up and use the Angular CLI to quickstart our app, then build components, templates, routes, forms, and use ajax to build out a full master-detail web app. Frontend Masters sponsor 'It’s 2019 and I Still Make Web Sites with my Bare Hands' — An opinionated write-up on doing things the ‘simple’ way, without frameworks or libraries as one cure for technical debt. Matt Holt Reader Mode: The Button to Beat — Some browsers (such as Safari and Firefox) come with special modes that strip away page elements other than content to improve the reading experience, but what can you do to stop readers having to resort to that? Eric Bailey How To Learn CSS — Covers the fundamentals of layout, flow and more. A good refresher or one to share with those starting out. Rachel Andrew Mozilla Announces Deal to Bring Firefox Reality to HTC VIVE Devices — Firefox Reality is a browser designed from the ground up to work on virtual reality headsets. The Mozilla Blog 💻 Jobs Front End Developer✌️ in Beautiful Norway 🎉 — Passion for React and GraphQL? Join our fast growing GraphQL e-commerce service Crystallize. Crystallize Find A Job Through Vettery — Vettery matches top tech talent with growing companies. Create your profile to get started. Vettery 📘 Articles & Tutorials ▶  Variable Fonts and the Future of Web Design — Runs through how variable fonts can play a key role in design, performance, accessibility & usability. Mandy Michael New Bootstrap v5 Forms — A quick look at some of the major changes coming to form controls in Bootstrap 5. Mark Otto A Look Back At Frontend in 2018 — A review of key changes, including new browser features, CSS additions, framework updates and more. Kaelan Cooter Checking If An Input Is Empty with CSS — An experimental look at how to validate a form using only pure CSS. Zell Liew How to Do Functional Programming with JavaScript? Progress Kendo UI sponsor HTML5 SVG Fill Animation with CSS3 and Vanilla JavaScript Marina Ferreira Using SVG Instead of srcset for Responsive Images — A brief look at how using SVG (if possible) as an alternative to srcset can save you from exporting multiple resolutions and avoid extraneous build processes. Thomas Yip Chrome DevTools: The Five Most Popular DevTools Tips From 2018 — Umar regularly shares handy developer tips for when working in Chrome. Here, he shares some highlights from last year. Umar Hansa Speed Up Next-page Navigations with Prefetching — A quick look at how to improve next-page navigation speed using prefetching. Addy Osmani How to Create a Multi-Line Inline Gradient Chris Coyier Best Practices for Improving Page Load Speed Whitepaper. Download Now Cloudinary sponsor ▶  Making Future Interfaces: Algorithmic Layouts — Creating CSS layouts that are self-governing, using both Flexbox and Grid. Heydon Pickering The Practical Value of Semantic HTML — “Firstly, let’s reach a definition of ‘good’ HTML..” Bruce Lawson 🔧 Code and Tools Level Up Your GitHub Experience with These Chrome Extensions — And, if you missed it, GitHub now lets you have unlimited private repos for free. Dave Brock Blobmaker: Create Organic SVG Shapes z creative labs It Is 2019. Update Your Website Footer — A little New Year PSA: Here’s a couple of snippets to change your static timestamp over to an automatically updating one. Build Real-Time Web Experiences with a Simple but Powerful Serverless Backend Microsoft sponsor Magic Grid: A Simple Library for Dynamic Grid Layouts — Has a slightly different use case than CSS Grid, but may be useful as explained in here. Emmanuel Olaojo Vue Glide: A Vue Component for the Glide.js Slider/Carousel Anton Reshetov Normalize.css: A Modern Alternative to CSS Resets — Not a new project but has been seeing some resurgence in popularity recently. Nicolas Gallagher

by via Frontend Focus