The digest of fresh materials from the world of the frontend for the last week №307 (March 19 - 25, 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" # 45 - Evgeny Fomin about Vue.js and why developers leave backend to frontend
• Podcast "Web Standards", Release №113: New browsers and clipboard, design for web designers, Vue.js recipes and JS-courses, what AMP is
• Five Minute React podcast # 19 - TypeScript 20/80
• Devschacht podcast: Night Frontend # 27 - And again about static typing in JS
• Podcast "Frontend Youth (18+)" # 42 How to win a woman's heart using HTML
• Podcast "Frontend Youth (18+)" "How to leave IT"
• "ALL YOUR HTML" # 41: "ASCII Animation"
• Video "MinskCSS Meetup # 4 - March 22, 2018"

Web development

• Page size and SEO - is there a link?
• Aggregator of materials and the latest information on Progressive Web Apps
• A complete guide to background images in letter templates
• WAI-ARIA: the dark side of accessibility
')

• Performance:
  • How to reduce website load time to two seconds using Google Chrome
  • How fast is Amp really?
  • How WebP Format Will Help Improve Your Web Performance
  

• Tools:
  • Reduce Lodash bundles using Webpack and Babel
  • imaging-heap is a tool to measure the effectiveness of responsive images at various screen sizes and ratios
  • In the articles on MDN, we added visual interactive examples.
  • Useful tips and tricks for Chrome DevTools
  

• Animation:
  • Weekly selection of beautiful effects on CSS / SVG / JS # 74
  • Additive animation using Web Animations API
  • Creating a PathSlider - Carousel with SVG Elements using JavaScript (Part 2)
  • Create a fluid effect using WebGL
  

CSS

• You will begin to impose on the Grid Layout today. I bet you?
• How Gmail came to an end to support for CSS animation
• Super Mario World, created using some CSS gradients - without JS, embedded images / data URIs and external images (plus quite a bit of HTML markup)
• graphql-css - a fast CSS-in-GQL library that converts GraphQL queries into styles for your components
• CSS: bad points (and how to avoid them)

Javascript

• Front-end debugging: Console
• Fucking rant about a fucking const vs let the fucking
• Graphic Accelerated Neural Networks
• Defining Emotions in JavaScript with Neural Networks
• Machine Learning-Driven Bundling. Future JavaScript Toolkit
• 5 key learning concepts d3.js
• I’m definitely probably suffering from the Stockholm Javascript-related syndrome.
• A complete guide to Apollo, GraphQL Toolkit
• Lazy loading of JavaScript modules with ConditionerJS

• Theory:
  • How JS works: web page rendering engines and tips for optimizing their performance
  • History of ES6 Modules
  • Elegant patterns of modern javascript: Ice Factory
  • Asynchronous Patterns in JavaScript
  

• VueJS:
  • Vue.js Moscow Meetup # 1 video recording
  • Vue.js Cookbook - a new section of official Vue documentation with recipes and examples of solutions to specific problems
  • 4 main functions of ES2015 for development with Vue.js
  • Vue CLI 3: a turning point for the development of the frontend
  • GraphQL basics and practical examples with Vue
  • Renderless components in Vue.js
  • 7 Vue secret patterns that consultants don't want you to know about - report by Chris Fritz
  

• React:
  • Comparison of the main JS animation libraries for use in React applications
  • Add context with React
  • React status from scratch
  • react-testing-library is a simple test utility React DOM that includes best testing practices.
  

• Angular:
  • Angular application architecture. We use NgModules
  • Introduction to Angular Modules - Root Module
  • Introduction to Angular: what it is and why you need to use it
  • All Things Angular: diving into key Angular concepts and hot topics: Angular Labs, Angular Elements, Progressive Web Apps, Service Workers, AoT Compilation, UI Libraries and more
  

• Libs & Plugins:
  • ScrollBooster is a nice library for drag-to-scroll functionality.
  

Browsers

• Firefox functionality development plan for 2018
• Opera 52 web browser available
• Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet
• Chrome 66 will be improved mechanism to block automatic video playback
• Technical details of the release of Safari Technology Preview 52

Entertaining

• How to get into Google: preparation instructions
• Symantec: In the fourth quarter of 2017, the number of cyber attacks using the resources of cryptocurrency mining systems increased 85 times
• Google Assistant learned how to make and request money transfers.
• Netflix has developed its own font
• 4 million vulnerabilities found in public repositories of GitHub users
• “Trust is broken, we have to fix it.” Zuckerberg commented on the data leak of 50 million users and spoke about new protective measures.
• OK Google: how the search engine decided to defeat Amazon
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 from last week .
Material prepared dersmoll and alekskorovin .