The digest of fresh materials from the world of the frontend for the last week №221 (July 24 - 31, 2016)

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

Web development

CSS

Javascript

Browsers

news

Web development

• Web standards podcast, Release # 26: "Chrome 52, Safari and MathML, font-display, WebP and WebM, HyperTerm, books, the frontend path."
• AMP - what it is and why mobile website acceleration is needed for SEO
• What's new in WordPress 4.6?
• Maps Google Maps - insert and design (stylize) maps to your site
• Available SVG . Translation of the article Accessible SVGs
• GIT Cheat Sheet
• Font Awesome SVGs - all Font Awsome font icons in the form of SVG
• Silo Buster - markup generator for optimizing the site URL for social networks and search results
• Progressive web apps that feel like native OS X apps (Progressive web apps running as native OS X apps)
• All about custom HTML elements (All about HTML Custom Elements)
• Why our site is faster than yours: from optimizing images, fonts and critical CSS to the nuances of server-side customization (Why our website is faster than yours)
• Measuring the impact of service workers on performance in the real world (Measuring the Real-World Performance Impact of Service Workers)
• Add offline support to any web application (Add offline support to any Web app)
• Mobile CDN - Increasing the speed of content delivery on all devices (Speeding up Content Delivery on All Devices)
• Offline support for Google Analytics using sw-offline-google-analytics (Offline Google Analytics Made Easy: Using sw-offline-google-analytics)
• Proper use of fieldset and legend elements in terms of accessibility (Using the fieldset and legend elements)
• How to choose the appropriate image format (How to select the perfect image format)
• github-widget - a widget that displays the details of a GitHub account (github-widget - a widget showing your details.)
• Spectacular web:
  
  
  • Unusual immersive effect on the site (Above & Beneath: Featured Content Layout Effect)
  • SVG slider with masking (Clipped SVG Slider)
  • The Illusion of Life: An Example of SVG Animation (The Illusion Of Life: An SVG Animation Case Study)
  
  
  

CSS

• Property background . Translation of the article The Background Properties
• Languages ​​that almost became CSS . Translation of the article Languages ​​Which Almost Became CSS
• How and why was the style guide created for the Marvel site (How did you create the Marvel Styleguide)
• Creating a page where the full-width block is enclosed in containers of limited width (Full Width Containers in Limited Width Parents)
• Style limitations using the new contain property can already be tried in Chrome 52 (CSS Containment in Chrome 52)
• Responsive lightbox without JS (Responsive CSS Lightbox with No JavaScript)
• Ways to reduce code when creating email templates (Reducing HTML Email Code)
• Manipulating colors in Sass using operators and RGB functions (RGB Functions)
• Creating an object-oriented front-end framework using BEM, SASS and OOCSS (Creating an Object Oriented Front-End Framework using BEM, SASS and OOCSS)
• About modern possibilities of creating reflection using CSS (The State of CSS Reflections)
• How to use the CSS writing-mode property (CSS Writing Mode)
• Hover is dead. Long live the hover! (Hover is dead. Long live hover.)
• Lessons from building mobile-friendly, responsive tables (Lessons from building mobile-friendly, accessible data tables)
• About writing and maintaining outdated CSS code (Are you writing legacy CSS code?)
• Angled Edges - SASS mix for creating SVG fragments for cut corners of sections (Angled Edges - a SASS mixin for creating angled edges for sections by dynamically encoding SVGs.)
• Color wheel animation using CSS (Color Wheel Animation with CSS Filters)
• Create the illusion of loading items using CSS until real content is loaded (Fake it 'til you Make it CSS)

Javascript

• Updates: Release Aurelia 1.0 , Release Ember.js 2.7 and 2.8 Beta , as well as Announcement Meteor 1.4 - with updated Node and MongoDB
• Record broadcast MoscowJS Meetup 32
• jQuery Foundation and Standards (The jQuery Foundation and Standards)
• Unicode properties in regular expressions (Unicode property escapes in JavaScript regular expressions)
• What dependencies do popular JS tools have (What Do the Popular JavaScript Tools Depend On?)
• Pragmatic module writing tips (Pragmatic Modularity)
• Automatically fix and format your javascript using ESLint (Auto-fixing & Formatting Your JavaScript with ESLint)
• Improving scrolling events with throttle (Quick Tip: How to Throttle Scroll Events)
• The life cycle of variables in JavaScript (JavaScript variables lifecycle: why why is not hoisted)
• Immutability against encapsulation (Immutability vs Encapsulation)
• ES6:
  
  
  • Introduction to promises - one of the innovations of ES6
  • Big ES6 Cheat Sheet (How's your ES6?)
  • Why is it important now for all the community to migrate to ES2015 modules (mods javascript modularization)
  
  
  
• Framework:
  
  
  • React Gotchas
  • Component Rendering Performance in React components render performance
  • How to animate elements using AngularJS (How to Animate elements using Angularjs)
  • A quick look at React and Redux DevTools (A Quick Look at the React and Redux DevTools)
  • Interpose is a tool to use native CSS variables in React components.
  • bisheng - transformation of Markdown files to a one-page site with React
  • Using Angular to create SPAs (Using Angular for Single Page Applications (SPAs))
  • react-monocle - developer tool for visualizing the hierarchy of components of React-applications (react-monocle - a developer tool to visualize a React application's component hierarchy.)
  • Use React Native to create a Face Recognition App.
  • Higher Order Components: React Application Design Patterns (Higher Order Components: A React Application Design Pattern)
  • Create React-applications without configurations (Create Apps with No Configuration)
  • Upgrade Strategies from Angular 1.x to Angular 2 (Angular 2 Upgrade Strategies from Angular 1.x)
  
  
  
• Lessons:
  
  
  • Music in javascript. Exploring Web Audio by Replicating Steve Reich and Brian Eno (JavaScript Systems Music)
  • Making Selfies with JavaScript (Take a Selfie With JavaScript)
  • Lesson: Using Redux with TypeScript and Angular 2 (Tutorial: Building Redux in TypeScript with Angular 2)
  • Creating a JavaScript Command Line Interface (CLI) with Node.js (Build a JavaScript Command Line Interface (CLI) with Node.js)
  
  
  
• Plugins:
  
  
  • IZIMODAL - another jQuery plugin for creating flexible responsive modal windows
  • MetricsGraphics.js is a D3-based library for visualizing time-related data (MetricsGraphics.js is a time-of-series data.)
  • box-js is a tool for researching JS malware (box-js is a tool for studying JavaScript malware.)
  • Typography.js is a library for generating typographic styles ( typography.js is a typing tool.)
  
  
  

Browsers

• The nightly builds of Firefox are built into the FlyWeb extension
• Firefox 49 will terminate the delivery of Hello communication client
• Firefox builds are available without mandatory digital signature verification of add-ons.
• Turn off autocomplete in Chrome using React (Turning Off Autocomplete in Chrome with React)
• CSS pseudo-class: any-link already working in FF without prefixes (Firefox Site Compatibility -: any-link CSS pseudo-class has been unprefixed)
• Top Chrome Extensions for Freelancers (The 10 Best Chrome Extensions for Freelancers)
• Search Overflow - Extension for Opera and Chrome for Stack Overflow Search w)

news

• In the plugin WooCommerce, which is used by millions of sites, found a vulnerability
• IEEE Spectrum has published a rating of programming languages
• Microsoft will fire another 2,850 employees
• OneDrive changes you need to know about
• Verizon buys Yahoo! for $ 5 billion
• Unknown Dropbox: company services for users, business and developers
• Mission to Mars will cost SpaceX $ 320 million
• Top 10 most expensive deals in the IT industry

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 .