The digest of fresh materials from the world of the frontend for the last week №312 (April 23 - 29, 2018)

We offer you a selection with links to new materials from the front-end area and around it.

Media | Web Development | CSS | Javascript | Browsers | Entertaining

---

Media

• Podcast «Frontend Weekend» # 50 - Alexey Simonenko about the history of creating HTML Academy and the features of pitercss_conf
• Podcast “Web Standards”, Issue No. 118: Node.js 10 and npm 6, Google Fonts and HTTPS, folbek for grids, OP or OOP, Habr in English, headlines for SPA and the worst SPA on the Internet
• CSSSR Podcast: News 512 - Issue # 3 (April 23 - April 29)
• “ALL YOUR HTML” # 46: “Layout on vue.js”

Web development

• Frontend like my mom's son's friend
• Metalsmith static site generator
• I created PWA and published it in 3 app stores. And that's what I learned
• About the global attribute `hidden` in HTML5
')

• Performance:
  • Measuring sites with Mobile-First optimization tools
  • GTmetrix Bookmarklet - start testing right from your bookmarks bar
  • Case study: Walmart site performance analysis
  • Perfume.js - JS library for measuring short and long scripts, FP / FCP, TTI, CFM, as well as their annotations in the DevTools timeline and publishing the results in Google Analytics.
  

• Instruments:
  • Release Node.js 10 and NPM 6
  • Microsoft Edge DevTools toolkit is presented as a Windows application
  • What's new in Node 10
  • 6 tools are needed to release, version and support your npm modules
  • webpack 4 configurator - creating personalized and optimized webpack.config.js
  

• Accessibility:
  • WCAG 2.1: what awaits us in the new guide to accessibility
  • More accessible markup with display: contents
  • A note on the work on the accessibility of the reddit site
  • HTML Email and Accessibility
  • Inspect the availability of letters in Firefox
  • How to create memes correctly considering accessibility
  • Infinite Scroll & Accessibility! Is this generally normal? (Spoiler - no)
  

• Animation:
  • Creative effect for the buttons, allowing to decompose them into small particles
  • Animation to navigate through the pages, which feels native
  • Interactive Mario Kart on "pure" CSS
  

CSS

• Why do we need custom properties?
• Linkedin Developer Style Optimization: Open Source CSS Blocks for Style Components and OptiCSS for Optimization
• GridtoFlex is a project from Yuny Kravets, which includes Flexbox fallbacks for popular interface solutions using CSS Grid.
• 7 Tricks to Improve CSS Performance
• Styling and animation element Progress
• Radial Gradient Recipes
• 3 ways that CSSinJS scavenges from your web development process
• A note on productive animation and hidden issues will-change
• Why we decided to abandon LESS in favor of SCSS

Javascript

• "Heroes of Might and Magic" in the browser: long, difficult and unbearably interesting
• How JS Works: Animation with CSS and JavaScript
• Want to learn ES6 +? Try this free course of 23 pieces and become a JavaScript Ninja
• VS Code extensions that make it easier for developers to write JS code and make them happier
• A brief history of JavaScript, video from Brendan Eich (creator of JavaScript)
• Demystifying 'new' in javascript

• VueJS:
  • Questions for interview on Vue.js
  • VuePress vs Nuxt.js
  • Creating Responsive Vue Components with ResizeObserver
  • Application on Vue.js using Axios with Vuex
  

• React:
  • Test Strategies for React and Redux
  • Top 5 Architectural Practices of React
  

• Angular:
  • Accelerating Angular Applications
  • New opportunities for developing applications on AngularJS - Part 1: Component Architecture , Part 2: Creating an Application
  • Launch AngularJS 1.6 in Angular 5 (side by side)
  

• Libs & Plugins:
  • tui.calendar - a calendar with everything you need
  • DayJs - Immunability Fast Library, an alternative to Moment.js, with a similar modern API
  • Dinero.js is a library for working with monetary values ​​in JavaScript.
  

Browsers

• Can I trust my Chrome and Firefox synchronization passwords?
• Firefox 60 will protect against CSRF attacks
• Instant search and synchronization by QR-code: Opera browser has received an update
• The new version of the browser Google Chrome Canary demonstrates the upcoming design update in the style of Material Design 2
• Inspector Styles Sidebar Improvements
• Using Chrome as a local web server

Entertaining

• habrahabr.ru → habr.com
• Google released a separate mobile application for managing tasks Google Tasks
• Introduced DeepCode utility for finding and correcting errors in the code
• Mozilla has opened access to Hubs: a social network in virtual reality
• GIMP graphic editor updated for the first time in 6 years.
• Compliance with the GDPR requirements for WordPress users
Go

We apologize for any typos or broken / duplicate links. If you notice a problem - please write in a personal, we are trying to fix them quickly.

← Digest last week
Material prepared by dersmoll and alekskorovin