FRONT-END WEEKLY DIGEST (August 5 - August 11, 2019)

Make sure to check the most recent selection of the frontend industry news and updates! Let's explore the differences between the PWA loyalty program and a mobile app, insight on the design principles for developers, a guide on setting up a Vue development environment and a lot more!

Web-development

• Let Mavo Shine in Building Interactive Web Applications
• A Simple Introduction to Web Workers in JavaScript
• Creating Interactive, Highly Optimized Emails with Google’s AMP Framework
• Why is modern web development so complicated? A long yet hasty explanation: Part 1!
• Which Is Best: A Loyalty Program PWA Or Mobile App?
• A Contact Picker for the Web
• Now Live: Your SmashingConf Toronto Playlist

• Performance:

  • Largest Contentful Paint. Making it easier to know when a page's important content has loaded.
  • Time to First Byte: What It Is and Why It Matters
  • Native lazy-loading for the web
  • Native Lazy-Loading Launched on Chrome 76!
  • Establish network connections early to improve perceived page speed

• Tools:

  • 💻The guide to Visual Studio Code shortcuts, higher productivity and 30 of my favourite shortcuts you need to learn
  • SVG Gobbler - a simple browser extension that finds SVG content in your current window, highlights unique attributes including size and lets you download or copy to clipboard

• Accessibility:

  • Web Accessibility vs. Usability
  • Unexpected accessibility tips

• Animations:

  • Image Trail Effects
  • Inspirational Websites Roundup #7
  • How to Create Web Animations with Anime.js

CSS

• Writing Modes And CSS Layout
• Learning CSS by reading specs
• Client-side JS Redirects: Can Googlebot Detect Them? #AskGoogleWebmasters
• Handling Unused CSS In SASS To Improve Performance
• CSS :empty Selector
• Weekly Platform News: CSS font-style: oblique, webhin browser extension, CSS Modules V1
• Design Principles for Developers: Processes and CSS Tips for Better Web Design
• Moving Text on a Curved Path
• 5 Super CSS Grid Generators for Your Layouts
• Sub-pixel rendering and borders

JavaScript

• How to Drag & Drop HTML Elements and Files using Javascript
• Building My First Svelte App: Thoughts and Impressions
• Working With ECMAScript 2019 Asynchronous Iteration Using “for-of”
• Intl.NumberFormat
• Interesting use cases for JavaScript bitwise operators
• JavaScript Promise combinators: .all(), .race(), .allSettled()

• VueJS:

  • How to Set Up a Vue Development Environment
  • Modifying component data with event emitters in Vue.js

• React:

  • React v16.9.0 and the Roadmap Update
  • What's New in React v16.9
  • How Does the Development Mode Work?
  • Building Mobile Apps With Ionic And React
  • useEffect vs. useLayoutEffect in plain, approachable language
  • Using Immer for React State Management

• Angular:

  • Using async-await feature in Angular
  • Asynchronous modules and components in Angular Ivy
  • On the way to Angular 9: Three bugfixes in Angular 9
  • How to Share Angular Components Between Projects and Apps

• Libs & Plugins:

  • sharec - a new minimalistic tool for boilerplating and configuration versioning, which can copy, merge and delete files.
  • Frosted Panel is a cross-browser compatible library written in pure Javascript to achieve a responsive "Frosted Glass" effect.
  • murphyjs: a simple way to implement scroll based reveal animations in your components.