The digest of fresh materials from the world of the frontend for the last week No. 261 (May 1 - 7, 2017)

We offer to your attention a selection with links to useful resources and interesting materials from the frontend area.

Web development

CSS

Javascript

Browsers

Entertaining

Web development

• Podcast "Front", issue number 5: Zarema Khalilov, mitapy and death jQuery
• Podcast Web Standards, Issue # 66 : From React to Sketch, from HTML to WebGL, CSS games, grids, HTML Shorts, designers and Yandex code.
• Podcast Web Standards, Release №67 : Beta Chrome 59, Safari TP 29, Samsung on the desktop, WebP cake, HTML Shorts, Normalize.css, CSS 5 levels, CSS in JS, ES modules.
• Front-end on feng shui. Part 1
• How to check availability of colors , - new release A11ycasts # 17
• “UX drives all of this.” . Chris Koyer talks about the complexity of web development lately
• Getting started with Relay “Modern” (GraphQL client library from Facebook) to create isomorphic web applications
• How ContextReplacementPlugin works in a webpack
• Updates:
  
  
  • Npm @ 5 beta came out, you can read a lot of updates
  • Autoprefixer 7 release: support for PostCSS 6 and Browserslist 2, improved performance, reduced node_modules and more
  • PostCSS 6.0 release: Node.js 0.12 support dropped, apply support and lower memory consumption
  • Presentation d3.express: an integrated environment for reactive development
  
  
• Performance:
  ')
  
  • pageweight - see how images affect the speed of your page with this online tool
  • Wait, and WebP is really worth it . Zach Leatherman understands the new image format on the web
  • Lightning fast sites thanks to various prefetching options
  • speedracer - a collection of performance metrics for your library / application
  • How to set up AMP support in WordPress
  • From AMP to PWA: Progressive Web AMPs
  
  
• SVG:
  
  
  • SVG sprite with webpack in one line
  • SVGito: Small SVG Optimizations
  • Three ways to reduce the size of SVG files using SVGO
  • How to create and edit SVG sprites
  • Visualization of brain functions in SVG
  • SVG text masking video
  • Button Button Morphing
  
  

CSS

• Regular HTML Shorts : Why set the image via background-image, if you can just write the background?
• Refer to the specs . Translation of the introductory note by the invited expert of the CSS Rachel Andrew working group to the Refer to the spec series.
• Level 5 first draft
• Is CSS-in-JS really bad for UX?
• Native form validation, part 1 . Detailed analysis from Peter-Paul Koch
• CSS rule set terminology
• Details about the backdrop-filter property that allows you to apply a filter to the content behind the element.
• CSS Animations vs Web Animations API: comparison and examples
• mini.css - minimalistic and responsive CSS framework
• iotacss is another scalable SASS framework using OOCSS principles. Introduction to iotaCSS
• Troubleshooting blocking CSS renders
• Step-by-step guide on how to create tooltips on pure CSS
• Ordered lists using unicode characters
• Sites using CSS Grid in production
• Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First . Useful media queries in the Media Query Level 4 specification
• Why Facebook is worth looking for other CSS writers
• CSS Custom Properties:
  
  
  • CSS Custom Properties and Theming
  • We win with CSS variables
  • CSS Custom Properties - Daily Use
  
  

Javascript

• Prepack is a new tool from Facebook that makes executing JavaScript code faster. Compack Prepack and Svelte , as well as a webpack plugin for prepack
• 4 videos from UralJS # 3
• JavaScript style elements . The code should be simple, not simplified.
• Python for JavaScript developers
• Glossary of modern JavaScript concepts: part 2
• Why am I moving to the web components and not looking back
• Introduction to Flow , Benjamin Reid's performance on Bristol JS
• ES2015 +:
  
  
  • Terrible import kraken - how to use ES6-modules and not go crazy
  • How is the introduction of ES6 modules in Node.js?
  • ECMAScript modules in browsers
  • A practical guide to using fetch () and reduce () to extract and format data from external APIs.
  • Asynchronous javascript with async / await . Free egghead course
  • Javascript: arrow functions for beginners
  
  
• React:
  
  
  • Five Minute React podcast # 13 - Redux Business Logic
  • Develop your first Progressive Web App with React
  • 10 famous applications using today ReactJS
  • Animated page navigation in React
  • React performance optimization using stateless components
  • react-native-masonry - react-native component for displaying a grid of images in the Mansory style with support for dynamic columns, progressive loading of images, changing the orientation of the device and click event handlers
  • SVG to JSX - SVG to Valid React SVG Converter written in Svelte
  • How to create a ToDo application with React, Redux and Webpack
  
  
• Angular:
  
  
  • Why we chose the new Angular
  • How to create a full-page website on Angular
  • Update Angular Applications
  
  
• Vue:
  
  
  • When VueJS can't help you
  • Upgrade to Vue.js 2.3
  • The concept of a minimalist blog with creative transitions to Vue.js 2
  • The transition from Angular to Vue: a spectacular adventure
  • Seven ways to set a component template in VueJS
  • vue-infinite-loading - plugin for back-scrolling under Vue.js 1.0 and Vue.js 2.0
  
  
• Libs & Plugins:
  
  
  • SmartPhoto.js is a new library for creating responsive galleries, great for mobile devices.
  • pkg - CLI project packer for Node.js to an executable file
  • Getting started with Riot.js
  • Typefont - JavaScript project for recognizing text in images.
  • spector - Easily explore and troubleshoot WebGL scenes.

Browsers

• Microsoft Edge browser and Bing search engine installed in Windows 10 S by default cannot be replaced
• Fathom, Mozilla's new JS framework, will allow browsers to “evaluate” web pages from a human perspective.
• Microsoft is testing the Edge browser's safe execution feature in a virtual machine.
• Firefox 53.0.2 and 52.1.1 update
• Samsung DeX brings new resolution to the mobile web
• Technical Details Safari Technology Preview 29
• Work with Chrome in Headless Mode

Entertaining

• Mass phishing with fake Google Docs links has a number of consequences.
• The cause of the recent phishing attack "Google Docs" was a vulnerability in OAuth, discovered 6 years ago
• Microsoft introduced Windows 10 S for education. What is this system?
• 26% of adults in developed countries do not know how to use computers.
• The first SpaceX satellites to distribute the Internet will go into orbit in 2019, now it is planned to launch almost 12 thousand vehicles
• Google and Facebook control 20% of global ad revenue.
• Microsoft has stopped investing in Windows 10 Mobile
• MP3 patents expired
• Facebook audience reached 1.9 billion users per month
• Apple is the wearable market leader
• DARPA: surprises and unpredictable
• What's the sunset of google
• Facebook, Google, Microsoft: about internships and careers in giants
• SpaceX has scheduled the launch of the first satellites to distribute the Internet for 2019

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