The digest of fresh materials from the world of the frontend for the last week №232 (October 10 - 16, 2016)

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

Web development

CSS

Javascript

News and entertaining

Web development

• How an HTML coder to raise his level
• Yarn:
  
  
  • Facebook and Google have released Yarn, a new JavaScript package manager.
  • Yarn review: all you need to know about the new package manager for JS from Facebook (Yarn Roundup: Facebook's new JS Package Manager)
  • NPM vs Yarn Cheat Sheet
  • Npm blog: Hello, Yarn!
  • Yehuda Katz: Why I work with Yarn (Why I'm Working on Yarn)
  • Yarn Package Manager: improvements over npm (An Improvement over npm)
  • 5 things you can do with Yarn (5 things you can do with Yarn)
  • Testing yarn, fast npm for javascript (Testing yarn, a fast npm for javascript)
  
  
  
• Debunking ten myths about AMP (Debunked: 10 Misconceptions about AMP)
• Debunking Six SEO Myths (6 SEO Myths Debunked)
• Optimize Web Images in Photoshop (Optimizing Web Images in Photoshop)
• “Offline First” technique with service workers (“Offline First” with Service Worker (Building a PWA, Part 1))
• The current state of HTML5 input elements (The State of HTML5 Input Elements)
• You don't need Gulp / Grunt / Webpack (You don't need Gulp / Grunt / Webpack)
• Note to help with ARIA (A (not so) short note on ARIA to the rescue)
• The annoying problem of double clicking on mobile devices (The Annoying Mobile Double-Tap Link Issue)
• Reskin for SVG Symbols: How to make them (and why) (SVG Symbols: How to Make Them (..and Why))
• Accessibility note on developers.google.com based on the Udacity Accessibility course
• You will not be comfortable in web development (You Can't Get Comfortable in Web Development)
• Has MVC died for the frontend? (Is MVC dead for the frontend?)
• Progressive improvement is not dead, but already with the smell (Progressive enhancement isn’t dead, but it smells funny)
• Visual primitives for the era of components. Use better parts from ES6 and CSS to style your React applications (Visual primitives for the component age)
• Dropdown animation with morph effect
• Line Maker: Animated Decorative Lines
• Happy Birthday Foundation: the first five years of the first adaptive framework (Happy Birthday Foundation: Five Years of Firsts)
• excel-bootstrap - Excel's bootstrap site generator (excel-bootstrap - Generate Bootstrap websites from Microsoft Excel)
• Guide to writing quality README files (Learn the quality of writing quality READMEs.)

Media

• Web standards podcast, Issue # 37 : Do not offend CSS, flexs, JS in 2016, PWA and React, life is not the same without javascript, do not block the viewport.
• RadioJS podcast, Release 41 : Typing 2.0, typing in commands, server code, conferences
• Video of reports from MoscowJS mitap in Badoo
• Video from LvivJS Conference
• Videos from KharkivCSS 2016
• Video with PiterCSS №6
• Lea Verou - CSS Variables: var (- subtitle);
• Chrome DevTools Masterclass

CSS

• Ways to underline in CSS , translation of the article Styling Underlines on the Web
• Visual regression testing with PhantomCSS
• You might not need javascript (you might not need javascript)
• Pragmatic, practical and progressive themes using native CSS variables (Pragmatic, Practical, and Progressive Theming with Custom Properties)
• Thoughtful CSS Architecture
• Special requests in CSS:
  
  
  • Quantity Queries: Quantity Queries and Flexbox (Quantity queries and Flexbox)
  • Media Queries: SVG & media queries
  • Mod Queries: Using CSS Query with Range Selectors (Using CSS Mod Queries with Range Selectors)
  • Feature Queries: How to use Feature Queries ( Feature Queries)
  • Feature Queries: Add a warning “property X is not supported” for your CSS demos using @supports (Adding “feature X is unsupported” warnings in your CSS Demos with supports)
  
  
  
• Typography:
  
  
  • Future of Web Fonts (The Future of Web Fonts)
  • 32 secure web fonts for CSS (32 Gorgeous Web Safe Fonts to Use with CSS)
  • Understanding the loading of web fonts (Getting started with CSS Font Loading)
  
  
  
• Grid Layout Summertime . Summary of changes that were introduced last summer for the CSS Grid Layout standard
• Amazing Women of CSS (The Amazing Women of CSS)
• How to make tabs using only CSS (How to make tabs using only CSS)
• Pure CSS Content Filter
• Creating a scalable and supported CSS codebase with ITCSS (Building a Maintainable and Scalable CSS Codebase with ITCSS)
• Pure CSS minesweeper Minesweeper

Javascript

• Theory:
  
  
  • Infographics explaining why JS development looks so complicated (This Infographic Explains Why JS Dev Seems So Complicated)
  • Why do I think that Elm is the future of front-end development?
  • Do you need service workers in your web application? (Do you need Service Worker in your web app?)
  • Is jQuery still appropriate (Is jQuery Still Relevant?)
  • You may need JavaScript (You Might Need JavaScript)
  • We need javascript to fix the web (We need javascript to fix the web)
  • Javascript fatigue from a noob point of view (Fatigue Javascript. From a noob perspective)
  • Framework vs Library - web development difference (Framework vs Library - differences in web development)
  
  
  
• Practice:
  
  
  • Object Oriented JavaScript . A quick introduction to OOP in JavaScript (Object-Oriented JavaScript)
  • Validation of forms as a high order component part 1 (Form Validation As A Higher Order Component Pt.1)
  • How to be a compiler - create a compiler using JavaScript (How to be a compiler - make a compiler with JavaScript)
  • ResizeObserver: this is like document.onresize for elements (ResizeObserver: It's Like document.onresize for Elements)
  • Improving the form of comments: from fundamentals to custom error messages using BackgroundSync ( Background : Synchronization)
  • Pure versus impure functions
  • Clipboard Access with JavaScript (Quick Tip: Accessing The Clipboard With JavaScript)
  
  
  
• ES6:
  
  
  • Promises 101 . Basic techniques for creating and managing promises.
  • Using ES6 generators using the example of koa.js
  • Recursion in JavaScript with ES6, destructuring and rest / spread (Recursion in JavaScript with ES6, destructuring and rest / spread)
  • Stupid ES6 Tricks (Stupid ES6 tricks)
  
  
  
• Framework:
  
  
  • Fresh releases: Angular 2.1.0 , Marionette v3.1.0 Release
  • The best way to learn AngularJS (The best way to learn AngularJS)
  • Angular 2 Patterns for Angular 1.x Applications (Angular 2 Patterns for Angular 1.x Apps)
  • Angular router: preloading modules (Angular Router: Preloading Modules)
  • Angular 2 - Dynamic View and Components
  • Bilateral data binding in Angular 2 (Two-way Data Binding in Angular 2)
  • Create an application with Material Design with Angular 2 (Build a Material Design app with Angular 2)
  • Getting Started with Angular 2 End To End Testing (Getting Started with Angular 2 End To End Testing)
  • We understand the data of the router in Angular 2 (Resolving route data in Angular 2)
  • How are we doing in China with React.js? (What we have in China about React.js)
  • react-day-picker - calendar for React
  • desklamp - clean container for routing and state in react (clean routing and state container for react)
  • Official integration of Semantic-UI-React
  • react-router-server - rendering on the server side for React Router v4 (react-router-server - Server Side Rendering library for React Router v4.)
  
  
  
• gDoc.js - use Google Spreadsheets for your CMS (Use gDoc.js for your CMS)
• CerebralJS is a state controller with its own debugger. Suitable for complex applications (A state controller with its own debugger)
• Tesseract JavaScript image recognition engine port (Tesseract.js is a pure Javascript port of the Tesseract OCR engine.)

News and entertaining

• Chrome Web Browser Edition 54
• Google will reduce memory consumption by 1.5 times Chrome browser
• Google has launched a new tool to check AMP
• noto - a new Google font for all languages ​​and adverbs
• Who “planted a bomb” in Samsung smartphones?
• Samsung sent out refractory boxes to return Galaxy Note 7 , what happened to the Samsung Galaxy Note 7 and why it burns
• Facebook officially launched the corporate social network Workplace
• Skype added support for Russian language for simultaneous interpretation of speech during voice and video calls
• How serious are the problems of Elon Mask
• How does it feel to work for Apple?
• "Just shut up and let the developers concentrate on the tasks," says Joel Spolsky, co-founder of Stack Overflow
• "Samsung, you're not alone"
• Big Neural War: What Google is really up to
• What Pavel Durov understood in the process of creating "VKontakte"
• Algorithm of reading books on programming
• A variety of neural networks. Part two. Advanced Configurations
• How huskies and bots will shape the journalism of the future
• New masters of the mind: how search engines influence elections
• Will sex robots be able to pass the Turing test?
• How is the phone interview in Google: a first-hand story from a candidate for the position of technical director
• MIT engineers created Photoshop for 3D printing
• Amazing story of emoji (The surprising history of emojis)

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 .