The digest of fresh materials from the world of the frontend for the last week №326 (August 6 - 12, 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
•
Web Standards podcast, Release №133: New Chrome 69, reading semantics, CSS without cascade and Houdini, API for accessibility, burnout.
•Frontend Weekend podcast # 65 - Igor Sheko on how to become a leading team leader from a serial start-up
• CSSSR podcast News 512 - Issue # 18 (August 6 - August 12)
•Devshakhta podcast: # 45 - When the front-endender becomes devops
• Frontend Youth (18+) podcast # 60: Sergey Berezhnoy: Fractal life , # 59: Let's talk about Java script
•
Use AMP as a general purpose library for creating fast dynamic sites.
•
Icon Fonts vs SVGs - which one should I use in 2018?
•“SVG Filters: The Crash Course” - intensive from Sara Soueidan
•Google AMP - loss of 70% of our conversion
•How to create a small beautiful npm package and publish it
•webhint: a tool for a comprehensive analysis of the site with suggestions for improving it (former sonarwhal )
• Fresh updates of CSS drafts: level 3 overflow, level 3 lowercase layout, level 2 grids
•Line-height Crop - a simple CSS formula for eliminating upper indent in text
•Awareness of initial values in your CSS
•Automatic change of text color for different backgrounds using CSS variables
•Hiding techniques in CSS
•Creating an “ideal” CSS system
•CSS Grid layout: multiply and conquer - or how to actually work with grids
•Changes in CSS Grid Layout in percent and undefined height
•Do not write CSS - customize it using tailwind
• Thiskeyword in JavaScript for beginners
•How JS works: custom elements
•Comparison of React and Vue on a practical example
•[bookmarked] 23 recommendations for protecting Node.js applications
• 7 recommendations for decorating JavaScript code
•How to deal with dirty side effects in your pure functional javascript
•Fix problems with the scope of a variable in ECMAScript 6
•Chris Koyer on creating sticky page tracking navigation
•A practical guide to regular expressions (RegEx) in JavaScript
•Divide and rule! Lazy loading for your SPA
• Firefox started testing content recommendation system based on user activity
• Opera integrates a cryptographic client into the desktop version of its browser
• New Mozilla experiment: Firefox Advance extension that analyzes network activity history to select potentially interesting sites and articles
•Chrome 69 Beta: many CSS improvements and much more
• How to choose a font for the media
• "Way back - no": In Android 9.0 Pie, Google has deprived users of the ability to return to older versions of the OS
• Dart 2.0 language update has been released, alternatives to JavaScript from Google
• Neural network learned how to create a portrait of a person using text description
• How a generation grew up in China that did not know Google, Facebook and Twitter
• Funny and scary things. We recall the most spectacular hacks IoT over the past few years
← Digest last week
Material prepared dersmoll and alekskorovin
Media | Web Development | CSS | Javascript | Browsers | Entertaining
Media
•
Web Standards podcast, Release №133: New Chrome 69, reading semantics, CSS without cascade and Houdini, API for accessibility, burnout. •
Frontend Weekend podcast # 65 - Igor Sheko on how to become a leading team leader from a serial start-up• CSSSR
podcast News 512 - Issue # 18 (August 6 - August 12)•
Devshakhta podcast: # 45 - When the front-endender becomes devops• Frontend
Youth (18+) podcast # 60: Sergey Berezhnoy: Fractal life , # 59: Let's talk about Java script
Web development
•
Use AMP as a general purpose library for creating fast dynamic sites.•
Icon Fonts vs SVGs - which one should I use in 2018? •
“SVG Filters: The Crash Course” - intensive from Sara Soueidan •
Google AMP - loss of 70% of our conversion•
How to create a small beautiful npm package and publish it•
webhint: a tool for a comprehensive analysis of the site with suggestions for improving it (former sonarwhal )- Performance:
•Reduced JavaScript load using code separation
•Custom performance reports using the CrUX panel
• Browserrendering of the page and web performance reflections
- Accessibility:
•Care for web accessibility
•Two-dimensional accessibility for maps and web navigation systems
•Providing ubiquitous access to websites makes them less accessible
- Animation:
•Dot Menu Animations
•Westworld Slider
CSS
• Fresh updates of CSS drafts: level 3 overflow, level 3 lowercase layout, level 2 grids
•
Line-height Crop - a simple CSS formula for eliminating upper indent in text•
Awareness of initial values in your CSS•
Automatic change of text color for different backgrounds using CSS variables•
Hiding techniques in CSS•
Creating an “ideal” CSS system•
CSS Grid layout: multiply and conquer - or how to actually work with grids•
Changes in CSS Grid Layout in percent and undefined height•
Do not write CSS - customize it using tailwind
Javascript
• This
keyword in JavaScript for beginners•
How JS works: custom elements•
Comparison of React and Vue on a practical example•
[bookmarked] 23 recommendations for protecting Node.js applications• 7 recommendations for decorating JavaScript code
•
How to deal with dirty side effects in your pure functional javascript•
Fix problems with the scope of a variable in ECMAScript 6•
Chris Koyer on creating sticky page tracking navigation•
A practical guide to regular expressions (RegEx) in JavaScript•
Divide and rule! Lazy loading for your SPA
Angular:
• Angular CLI Reference
•Angular 6 - creating a Webpack configuration from scratch
•PRPL template for progressive web applications with Angular 6+
•Animation of dynamic components in Angular
•Creating reusable animations in Angular
•15 Angular performance tricks and tips
•Angular Console - user interface for the Angular CLI
•10 useful features of Angular, which you may not have heard
VueJS:
•Vue CLI 3.0 is here!
•Acceleration via prototyping to Vue development
•Establishment of a long press directive in Vue
React:
•Retrieving data in Redux applications - 100% correct approach
•mauerwerk - grid layout in masonry style to react
•React's Render Props Pattern - descendant as a function
- Libs & Plugins:
•Pts - typescript / javascript library for visualization and creative coding
•lazyestload.js - loads images only if it appears in the viewport, only 350 bytes of js code
•SuperSlide.js - a flexible, smooth slide menu for your next PWA
•Splitting - microbibliography JavaScript with a collection of small plug-ins designed to separate lines into smaller entities - words, symbols and other options.
Browsers
• Firefox started testing content recommendation system based on user activity
• Opera integrates a cryptographic client into the desktop version of its browser
• New Mozilla experiment: Firefox Advance extension that analyzes network activity history to select potentially interesting sites and articles
•
Chrome 69 Beta: many CSS improvements and much more
Entertaining
• How to choose a font for the media
• "Way back - no": In Android 9.0 Pie, Google has deprived users of the ability to return to older versions of the OS
• Dart 2.0 language update has been released, alternatives to JavaScript from Google
• Neural network learned how to create a portrait of a person using text description
• How a generation grew up in China that did not know Google, Facebook and Twitter
• Funny and scary things. We recall the most spectacular hacks IoT over the past few years
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 dersmoll and alekskorovin