The digest of interesting materials from the world of web development and IT for the last week No. 197 (February 1 - 7, 2016)

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

Web development

CSS

Javascript

Browsers

Design

news

Entertaining

Web development

BEM methodology: how it all began and why it is all needed
Records from the Web Standards Days conference - Moscow 2015
Video from Frontend Fellows Conf
Create a blog using Jekyll and GitHub Pages
The first 8 issues of screencast on Gulp by Ilya Kantor
Performance Weekly. Issue # 0 . Last week's news digest on web performance
How to avoid errors in the technical optimization of the site . Initial Setup Guide
Detailed Grunt Guide for Beginners (A Beginner's Guide To Grunt)
How to choose a frontend framework (How To Pick a Frontend Web Framework)
Why the concept of "Mobile First" is already outdated (Why Mobile First Is Outdated)
We are starting to use Webpack Part 1: a journey to develop a frontend with Webpack, React, Redux and TDD (Let's start Webpack Part 1)
Unpacking Webpack . Detailed familiarization with the new paradigm in the process of creating projects
Tyler Sticka: Our process for creating SVG icons (Case Study: Our SVG Icon Process)
svg-icon-system-boilerplate - system for assembling svg icons into sprite
The Service Worker Cookbook - a collection of practical examples from Mozilla
Creating a Service Worker: an example . Detailed article from Lyza Danger Gardner (Making A Service Worker: A Case Study)
We master typography in HTML letters (Master HTML typography in email)
Accelerated Mobile Pages
HTML5 Elements Table (HTML5 Elements)
The Art of Commitment (The Art of the Commit)
HTML 5 game development video series (HTML 5 game development video series)
Adaptive images with smart auto-cropping (Automatically art-directed responsive images)
Spectacular web:
- Weekly selection of beautiful effects on CSS / SVG / JS # 23
- Voice Recognition (Web Speech Demo)
- Animated Drum Machine (SVG) (SVG Animated Drum Kit (Play Me!))
- A spectacular tool for previewing and demonstrating a site using CSS and JavaScript

CSS

The end of the era of global CSS
Selection of useful utilities SCSS
CSS3 Grid Layout Goldfish (Part 3)
Details on the placement of elements in the grid layout (CSS Grid Layout) . Translation of the article Deep Dive into Grid Layout Placement by the community css-live.ru
Once again about the floating mark on CSS . Translation of the article Revisiting the Float Label pattern with the CSS community css-live.ru
SVG masks
Smart Scroll Snap Points Scrolling
Detailed article about the `background-clip` property with examples . (The `background-clip` Property and Use Cases)
CSS variables: why should we think about this? (CSS Variables: Why Should You Care?)
Reload the latest version of clearfix (The very latest clearfix reloaded)
Sass: Directory Structure That Will Ease Code Maintenance (Sass: Directory Structures Your Code)
Truly responsive tables using CSS3 Flexbox . Really Responsive Tables using CSS3 Flexbox
Short note on improving usability of scrolling areas (Short note on improving usability of scrollable regions)
Flexbox and keyboard navigation off (Flexbox & the keyboard navigation disconnect)
Star rating with Flexbox
Foundation 6: New Flex Grid (Foundation 6: The New Flex Grid)
How we work with “CSS” in BigCommerce (How we “CSS” at BigCommerce)
Scale CSS refactoring in trivago (Large Scale CSS Refactoring at trivago)
Manage fonts: Google Fonts + Chrome = problem? (Control Your Type: Google Fonts + Chrome = trouble?)
TestMyCSS - an online tool for analyzing your CSS

Javascript

Chakra officially adopted by Node.js
ES6:
- ES6: symbols from the inside (Translation of ES6 Symbols in Depth )
- ES6 Arrow Functions: New Cool and Concise Syntax in JavaScript (ES6 Arrow Functions: The New Fat & Concise Syntax in JavaScript)
- Presentation of ES2015 Proxies (Introducing ES2015 Proxies)
- The cost of traspiling es2015 in 2016 (Investigating the overhead cost of compiled es2015)
- ES sentences: async functions , Object.getOwnPropertyDescriptors ()
Framework:
- Angular 2 versus Aurelia side by side
- Why I don't use MVC frameworks anymore (Why I No Longer Use MVC Frameworks)
- React:
  - About using React with the canvas element
  - 10 reasons why each developer MUST learn React (10 reasons why every developer SHOULD learn React)
  - Sasha Aickin talk on Reactjs - Speed up Server Side Rendering
  - Productive development with React (Performance Engineering with React (Part 1))
  - Creating a universal blog application on React: Building Flux (Building a React Universal Blog App: Implementing Flux)
  - Getting Started with React: Creating a Hello World demo (Getting Started with React: Building a Hello World Demo)
  - Five Steps to Learn React Application Development (5 Steps for Learning React Application Development)
  - react-designer - easy to set up, easy and editable vector graphics in your react components
- Angular:
  - Angular 1.5.0 release
  - Unit Testing AngularJS Controllers with Karma and Jasmine (Unit Testing AngularJS Controllers using Karma and Jasmine)
  - Creating multiplayer games with Angular (Building multiplayer games with Angular)
  - Angular 2 Components: Inputs and Outputs (Angular 2 Components: Inputs and Outputs)
  - From Angular 1.x ng-repeat to Angular 2 NgFor with component (From Angular 1.x ng-repeat to Angular 2 NgFor with Component)
  - Angular 2 components and providers: classes, factories and values (Angular 2 Components and Providers: Classes, Factories & Values)
- Five reasons why Meteor is perfect for startups (5 Reasons Why Meteor Is Ideal for Startups)
Writing reusable JavaScript modules of a new generation on ECMAScript 6 (Writing Next Generation Reusable JavaScript Modules in ECMAScript 6)
JavaScript AI for HTML Puzzles (JavaScript AI For An HTML Sliding Tiles Puzzle)
Examination of JavaScript by examples (JavaScript by Examples)
How to fix JS ... maybe (How to fix Javascript ... maybe)
How to write bulletproof wrap function in JS (How to write bulletproof function wrappers in JavaScript)
What to expect from JS in 2016 — Beyond the Browser (What To Expect From JavaScript In 2016)
Understanding JavaScript's async await Understanding JavaScript's async await
Record audio and video with MediaRecorder (Record audio and video with MediaRecorder)
Leveling Up Your JavaScript
Plugins:
- jQuery Select Box Components - Chosen vs. Select2 (jQuery Select Box Components - Chosen vs Select2)
- samsaraJS - a library for creating animated interactive interfaces
- Gridifier - adaptive grids with sorting (Gridifier rethinks).
- Instadate is a high-performance date library.
- Multi-Screen.js is a simple jQuery plugin that turns a page into several animated navigation screens in different directions.
- Whitestorm is a Web.Gs-based engine for Three.js (based on Three.js technology)

Browsers

Design

New interface is the lack of interface
Product Design Digest, January 2016
Complete Beginner's Guide to Content Strategy
Graphic editor:
- Photoshop, Sketch UI / UX designers toolkit: what to choose for developing interfaces?
- Sketch Lesson Series (part 4 of 5): Tablet and Mobile Design
- Sketch Tutorial Series (part 5 of 5): Design Transfer to the Developer
- Git-sketch plugin This is a Git client built right into Sketch.
- Detailed tutorial on the design of an application for iOS in Sketch: Part 1 of 3
- Switch from Photoshop to Sketch
- How to transfer your team to Sketch
- Useful Tips for Using Sketch (5 Very Special, 10 Useful Sketch Tips)
- Design with dynamic content thanks to the Craft plug-in from InVision LABS in Sketch (Holy Sh! T ~ Designing with Craft by InVision LABS in Sketch)
Uber introduced a new logo and new application icons
"We understand who we are": How to create a new corporate identity Uber
New logo and identity for Uber (New Logo and Identity for Uber done In-houseYour Identity is Arriving Now)
What is behind the redesign of Budweiser? (What's behind Budweiser's new look?)
Micro-interactions: the devil is in the details (Microinteractions: The Devil is in the Details)
Cool typography that will take your headlines to a new level (Awesome Typography That Takes to the Next Level)
How we did the design for the Dream Crew (How we are designing the Dream Crew)
How to design UI animations (How To Design User Interface Animations)
Re-thinking reading on the Web (Re-thinking reading on the Web)
Personal Branding Guide for Designers
Video gallery for inspiring user engagement with various mobile apps (A Video Gallery for Mobile Onboarding Design Inspiration)
Album Colors of the Year (ALBUM COLORS OF THE YEAR)
A love letter to freelancig
All ad sizes (ad size guide!)
International Artists: Russia (International Artist Feature: Russia)
How digital nomadism turned me into a motivated designer (How Digital Nomadism Turned Me In Highly Motivated Designer)
Industrialization of design (or why Silicon Valley no longer need UX designers)
The value of consistency in design (The value of consistent design)
Tips for UX application design, part 2 (UX design tips for your app, part 2)
Illustrator in 60 seconds: how to create and export color sets (Illustrator in 60 Seconds: How to Create and Export Color Swatches)
Pen tool vs. Live Trace: a detailed comparison (Pen Tool Vs. Live Trace: The Big Comparison)
Is this the best save icon? (Is this the perfect save icon?)
Arrival at San Francisco (Arriving at San Francisco)

A selection of free designer cookies

Valentine's Day Vector Sets
Free UI-sets
Craft - plug-ins for Sketch and Photoshop (Craft - UI design plugins for Sketch and Photoshop powered by real data)
A set of brushes for photoshop with futuristic interface elements (25 Best Tech Interface Photoshop Brushes Ever Created)
A set that includes free graphics and the font Hellena Script (Free downloads: Valentine's Day Doodles, Graphics, and Brush Script Font)
Top brushes with water paints for designers (Top Free Photoshop Watercolor Brushes for Designers)
Best Smart PSD with cool text effects (30 Free Smart PSDs to Help You Create Easy Text Effects)
Food icons in SVG format ([Freebies] Food icon)
Icon Pack for Valentine's Day (Free Valentine's Day Icon Pack + More Lovely Resources)
Logos in AI-format (Free Logo Designs For Your Projects, Added Every Tuesday)
Pacha - a decorative font (Pacha is a display typeface that is inspired and inspired by Latin America.)
Fibon Sans - thin sans serif font (Fibon Sans - Regular Weight Free)
Wonderful Brush Fonts (15 Beautifully Imperfect Free Brush Fonts)

news

Entertaining

Domain Name System is a complex technology explained in simple terms.
Gmail is the seventh Google service to overcome the billion mark.
How to interview and select the best employees?
Fleksiramika - new material for printed circuit boards
China published color photos after landing on the moon
Video of the day: an impressive demonstration of the capabilities of the Microsoft HoloLens Augmented Reality Helmet
Why the blockchain could destroy the state, but will not do it
Browser marketing: what push notifications are and how to get benefit from them
The strangest objects on Google Earth maps
Turning into Slack: The Story of the Glitch Son (Becoming Slack: The Story of the Son of a Glitch)
My bathroom mirror is smarter than yours (My Bathroom Mirror Is Smarter Than Yours)
nest-100.com - an unusual audio-visual experience for the web

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 .

Source: https://habr.com/ru/post/276753/

All Articles