The digest of fresh materials from the world of the frontend for the last week No. 213 (May 23 - 29, 2016)

We offer you a selection with links to useful resources, interesting materials and IT-news

Web development

CSS

Javascript

Browsers

News and entertaining

Web development

• Autofill: what web developers don't know, although they should know
• Git: a safety net for your projects
• Wintersmith - Node.js static site generator
• Google has improved the functionality of AMP-pages, adding new features .
• About jQuery and Bootstrap: dot the i's
• From Zero to the Front End Hero: Part 1 , Part 2
• Media:
  
  • Web Standards Podcast, Issue 17 : Semantics and BEM, CSS for beginners, clients for Git, Edge JS modules, Google I / O.
  • AMP + progressive web applications (AMP + Progressive Web Apps: Start fast, stay engaged - Google I / O 2016)
  • Houdini: demystifying the future of CSS (Houdini: Demystifying the Future of CSS - Google I / O 2016)
  • Instant download: create offline-first progressive web applications (Instant Loading: Building offline-first Progressive Web Apps - Google I / O 2016)
  • Frontend Party, Peter, April 29, 2016
  
  
• MIND Patterns - Accessible Patterns for the Web from ebay (Accessibility Patterns for the Web)
• Almost complete Gulp 4 transition guide (The Complete-Ish Guide to Upgrading to Gulp 4)
• Progressive web applications - what the hell is this? (WTF are Progressive Web Apps?)
• Regressive Web Apps
• How to conduct a simple site accessibility audit, Part 2 (Part 2: How to Conduct Basic Accessibility Audit on Your Site)
• Understanding semantics
• placeholder.pics - an easy way to connect placeholder images that are optimized SVG
• How to start working with content security policy (How to Get Started with a Content Security Policy)
• Front End Development after Internet Explorer (Front End Development after Internet Explorer)
• Service Workers 101 - Infographics with the most important parts of the Service Workers API (Service Workers 101 - An infographic to summarize the most important parts of the Service Workers' API)
• The importance of URLs (The importance of URLs)
• How to transfer Google fonts to your CDN (How to Migrate Google Fonts CDN to Your Own CDN)
• google-webfonts-helper - an easy way to use google web fonts on your hosting
• SVG:
  
  • New free course "Introduction to SVG" on HTML Academy.
  • “SVG beyond simple forms” - a report by Nadieh Bremer with OpenVis Conf (SVG Beyond Mere Shapes - Nadieh Bremer)
  • SVG Path Masking Examples - Using Paths and Text (SVG Clipping Path Examples - Using Paths And Text)
  • Creating an adaptive brand logo using SVG (Make an Adaptive Branding Module with SVG)
  • Create responsive graphics and infographics on SVG
  
  
• Spectacular web:
  
  • Weekly selection of beautiful effects on CSS / SVG / JS # 39
  • Creating a vertical timeline with a drop of javascript
  • Spectacular image transformation demo (to see the effect you need to scroll the mouse scroll wheel) (Displacementmap image transition)
  • Three-dimensional isometric grid (Isometric and 3D Grids)
  • Create analog clocks using Web Animation API (Make an Analog Clock with the Web Animation API)
  
  

CSS

• CSS magic. Chapter 2. Layout
• Lint CSS using stylelint
• CSS Inspection and Combing
• CSS debugging . Translation of the article Debugging CSS
• Stylelint: the style validator we have always dreamed of (Stylelint: The Style Sheet Linter We've Always Wanted)
• Chromatic Web Fonts (Chromatic Web Fonts, Redux)
• Inserting a line break in CSS (Injecting a Line Break)
• inStyle (modifying the current `&` in Sass) (Modifying the Current Selector `&` in Sass)
• Interesting suggestion to add when / else rules to css
• Jonathan Snook understands cascade and specificity (Dealing with the Cascade and Specificity)
• His thoughts on component design (Considerations in Component Design)
• Considerations for styling the pre tag (Considerations for styling the pre tag)
• The box-shadow property (The box-shadow Property)
• Family.scss - useful Sass impurities for working with: nth-child elements
• Five ways to create a sticky footer (Sticky Footer, Five Ways)
• Atomic CSS Modules (Atomic CSS Modules)
• Attribute System for Flexbox Markup (Flex Layout Attribute)
• Designing frontend styles (Architecting Front-end Styles)
• Starability.css - available star rating with animation
• CSS Jokes (28 CSS Puns to Brighten Your Day)

Javascript

• Using JavaScript to attack via clipboard manipulation
• Javascript-only: homogeneous web project architecture
• Detailed explanation of the 'this' keyword in JavaScript (Gentle explanation of 'this' keyword in JavaScript)
• Upgrade the IE8 trash code using modern buns (Upgrading junky IE8 code with current goodies)
• Compilation in JavaScript: 4 alternatives for JS (Compile to JavaScript: The 4 best alternatives to JavaScript)
• Long Live jQuery (Long Live jQuery)
• Quick Tip: Keeping the checkbox state after reloading the page (Quick Tip: Persist Checkbox Checked State after Page Reload)
• Create a simple JavaScript slideshow without jQuery (Make a Simple JavaScript Slideshow without jQuery)
• Animated gradient to simulate flow using d3.js (Animating a gradient to imitate a flow using d3.js)
• Algorithm Visualization (Algorithm Visualizer)
• Framework:
  
  • React:
    
    • React dive: router
    • HTML to React - a utility for splitting HTML into React-components
    • Your timeline for learning React (Your Timeline for Learning React)
    • CSS Modules and React
    • Creating React Templates in WebStorm
    • Taming the React Setup (Taming the React Setup)
    • Clone Yelp with React (React Tutorial: Cloning Yelp)
    • React and Firebase together (React and Firebase, sittin 'in a tree)
    
    
  • Angular:
    
    • 10 main reasons why developers should use AngularJS (Top 10 Reasons: Why Web Developers should use AngularJS)
    • AngularDoc - documentation for Angular 2 projects
    • Migrating from vanilla JavaScript to Angular 2 in NativeScript (Moving from Vanilla JavaScript to Angular 2 in NativeScript)
    • Angular and Webpack for modular applications (Angular and Webpack for Modular Applications)
    • Create Angular 2 demos with System.js and TypeScript (Building Angular 2 Demos With System.js And TypeScript)
    
    
  • Creating a game with Ember (Make a game with Ember by mattmckenna)
  • Do not scold the framework: my experience with AngularJS and ReactJS (my experience with AngularJS and ReactJS)
  
  
• Plugins:
  
  • WebGazer.js - tracking the direction of view through a webcam in the browser
  • ally.js - a library that makes application accessibility simpler
  • Tourist.js - to create a route through the functionalities of your page
  • Bideo.js - library for adding background video (Bideo.js)
  • Target.js! - adds functionality to DOM elements using data attributes
  
  

Browsers

• How to install Chrome extensions in Firefox
• Launch Chrome 51 Web Browser
• Measuring elements and distances in Firefox DevTools (Measuring elements and distances in Firefox DevTools)
• Support your WAAPI Browser (WAAPI Browser Support Test)
• Creating Extensions for Microsoft Edge (Building Extensions for Microsoft Edge)
• F12 Edge Developer Tools
• Technology has appeared for displaying ads in web browsers to bypass blocking
• Opera has a personalized news feed.

News and entertaining

• Facebook Announcement: "New Response Graph for Live Content"
• Facebook and Microsoft lay fiber optic cable across the Atlantic
• Google processes over 2 trillion searches per year.
• Google Photos 13.7 petabyte photos and video
• The Verge: Microsoft lost $ 8 billion on Nokia affiliate
• France banned sending emails to employees after work hours
• Why Google won over Yahoo - by the example of solving one problem
• Five-year run: how Yandex has changed since the IPO
• Google has created a quest in Paris in reality, which can only be completed using the company's products
• Internet holey things
• “A sad career is when they go to work on Facebook or Yandex.”
• What is the knowledge of Klingon and the reading of Shakespeare?
• High expectations: what is stored in time capsules
• How a student achieved a dream internship using the Snapchat filter
• How “frivolous” “Hrombuki” paved Google the way to the PC market
• Why you need to know what Scrum is
• The history of the Ukrainian hacker, who became the best weapon of the FBI and his worst nightmare (Translation of the publication in Wired )
• How typography can save your life
• Google IO 16 - the story of two Google (Google IO 16 - A tale of two Googles)
• How Mediachain Works (How Mediachain Works)

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 .