The digest of interesting materials from the world of web development and IT for the last week №196 (January 25 - 31, 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

Responsive Image Breakpoints Generator , a new online tool that makes it easy to work with adaptive images
View Security Panel in DevTools
Issue with Chromium WebViews
Jake Archibald: 2016 - the year of web streams (2016 - the year of web streams)
Alternatives to the closing service Parse (Parse alternatives)
Call me E-schmail: taming a monster whose name is HTML Email (Call Me E-schmail: Conquering the Beast that is HTML Email)
HTML5 hidden and aria-hidden attribute support in 2016 (The state of hidden content support in 2016)
Analysis of web animation on the top 30 sites from Awwwards.com (Web Animation Trends: 31 Top Websites Deconstructed)
Pull Request Tutorial Tutorial
When you know the basics, but still can not code (When You Know the Basics, But You Still Can't Code)
Aligning your front-end process (Aligning your Front End Process)
New functionality in CodePen - JS Console
Creating simple offline pages using Service Workers (Create a really, really simple page using Service Workers)
Sara Soueidan’s lesson on creating an animated SVG banner using GSAP (Supercharge SVG animations with GSAP)
A Gulp-Based External SVG Symbol Sprite Icon System by Una Kravets
Three plugins to include in each configuration of Grunt and Gulp (3 Plugins Every Gruntfile & Gulpfile Needs)
Unofficial code generator for inserting an information widget with data CanIUse (The (Unofficial) CanIUse Embed)
Productive web:
- Brad Frost’s Performance Budget Builder (Budget Performance Builder)
- Web performance experts share tips and bugs (Web Performance: 20+ Experts Share Their Advice and Mistakes)
- 18 tips on optimizing site performance (18 Tips for Website Performance Optimization)
Spectacular web

CSS

Minimally necessary fonts . Translation of the article CRITICAL WEB FONTS by the community css-live.ru
Variables as a basis for CSS architecture when working with preprocessors . Translation of the article Variables: The Backbone Of CSS Architecture on Progressor
Very simple guide to CSS3 animations from frontender.info
Display: contents and his new friends rush to the rescue
Explaining the new display: contents property with code examples (Vanishing boxes with display contents)
voxel.css - a lightweight library for rendering three-dimensional objects using CSS (GPU acceleration / CSS3 transitions) (A lightweight 3D CSS voxel library)
The structure in the style of masonry on pure CSS (Pure CSS masonry layouts)
Extending Sass with PostCSS (Extending Sass with PostCSS)
About import rule in CSS
CSS refactoring without losing your client or mind (Refactoring CSS Without Your Client Or Your Mind)
Using modern CSS to create an adaptive grid with images (Using Modern CSS to Build a Responsive Image Grid)
CSS Font Features for WebKit
A new look at the Float Label pattern, implemented using CSS (Revisiting the Float Label pattern with CSS)
Writing an awesome Sass with OOSass (Writing Kick-Ass Sass With OOSass)
Bulma - another CSS framework built on Flexbox (Bulma - a modern CSS framework based on Flexbox)
Hint.css 2.0 - a library for adding pop-up hops
Online book Learn CSS Layout: the pedantic way

Javascript

Framework:
- What would your JS framework look like if it were a cat? (Which cat is your javascript framework?)
- My reaction to React (My Reaction to React)
- React and economics of dynamic web interfaces (React and the economics of dynamic web interfaces)
- Nine things every beginner in React.js should know (9 things every React.js beginner should know)
- Creating a universal blog application on React : A Step-by-Step Guide (Building a React Universal Blog App: A Step-by-Step Guide)
- Creating a chat application in 40 minutes with React and Meteor (Building a live chat app in 40 minutes with React and Meteor)
- Angular vs. React: step by step comparison (Angular vs React: A Side-By-Side Comparison)
- Angular JS 2.0 for revolutionary UI / UX development (Angular JS 2.0 to Revolutionize UI / UX Development)
ES6:
- Features of ES2016 and ECMAScript as a standard (ES2016 Features & ECMAScript as a Living Standard)
- Simple examples to help you better understand ES6 (Simple examples to help you understand ES6)
- Creating ES6 Javascript for a browser with Gulp, Babel, and other tools (Building ES6 Javascript for the Browser with Gulp, Babel, and More)
Hardcore JS or power in 30 lines (Hardcore JavaScript or Power of 30 lines)
The complete guide to graphics in JavaScript (JavaScript charts: The definitive guide)
Understanding Transducers in JavaScript Understanding Transducers
What to expect from JS in 2016 — language improvements (Language Enhancements)
A selection of a series of You Dont / Might Not Need ...
What can we learn from jQuery, which has a symbiotic advancement of the web platform? (What can we learn from how jQuery symbiotically pushed the Web Platform forward?)
Exploring JS Native Functions and How to Use Them (Learning JavaScript Native Functions)
The heart and soul of the prototype OO: concatenative inheritance (The Heart & Soul of Prototypal OO: Concatenative Inheritance)
Why is everyone talking about isomorphic / universal javascript and what is its feature (Why is it javascript and universal javascript )
Presentation: Modern JavaScript: The Smalltalk Influence
Moving to promises for geo-location (Moving to Modularized Promises via Geolocation)
Filtering and sorting the word list (Filtering and Sorting a List of Strings)
The controversial JavaScript state of the toolkit (The Controversial State of JavaScript Tooling)
Babel Handbook - Using and Creating Plugins (Babel Handbook)
Libraries and Component Architectures (Front-end Application Libraries and Component Architectures)
Unit testing your JS with Mocha and Chai (Unit Test Your JavaScript Using Mocha and Chai)
View jCanvas: jQuery with HTML5 Canvas (Introduction to jCanvas: jQuery Meets HTML5 Canvas)
Plugins:
- A collection of plugins and tooltips for creating tooltips (73 Tooltip Plugins Made With jQuery, CSS, JavaScript or More!)
- Loud links - a library for adding sounds when interacting with the interface (Loud links - A simple tiny Javascript library to add interaction sounds to your website.)
- Viewer.js - JavaScript image viewer
- trunc-html - trimming html by a specified number of characters (trunc-html - truncate html by text length)
- vivus - a library for implementing SVG animations (vivus, bringing your SVGs to life)
- datedropper - jQuery plugin for creating date entry fields (datedropper is a jQuery plugin that provides a quick and easy way)

Browsers

Firefox 44 release , details for developers
Mozilla Firefox browser now supports pop-up notifications from websites
Making the firefox developer tools accessible
Adblock Plus ad blocker turns 10 years old
Web Push notification is implemented in Firefox 44 (Web Push Arrives in Firefox 44)
Review V8 Release 4.9 (V8 Release 4.9)
Chrome for iOS has become faster and more stable
Material design moves to Google Chrome, that 's what it looks like (Material Design is slowly coming to Google Chrome, here it looks like)
Microsoft Edge saves browsing history in InPrivate
Tor Browser 5.5 Release
Oracle will stop shipping Java browser plugin

Design

General principles in creating mobile applications for the novice UX / UI-designer
Yahoo launched a new homepage and application design
VKontakte showed the version of the redesign
Dependence of website promotion from web design
Best Kinetic Typography Examples (Some Of The Best Kinetic Typography Examples)
5 anti-principles of good design (5 Anti-Principles of Good Design)
Where to Place Icons in Your Accordion Menu Icons
Doing design for mobile application meed (Designing for mobile)
Principles of Simplicity in Design (The Design Principles of Simplicity)
Secrets of web design in the style of cards
Graphic editor:
- What's new in Sketch 3.5? (What's New in Sketch 3.5?)
- Creating Star Wars Illustrations in Sketch: A Guide for Non-Designers
- PaintCode - Sketch source control
- Sketch Image Average Color - a plugin for getting the average color of an image in Sketch
- A series of lessons Sketch (part 3 of 5): Design desktop version
- gb-sketch-segmentcircle - Sketch plugin for creating segmented circles
- Macaw team joins InVision (Macaw team joins InVision)
Why designers should reconsider the attitude towards minimalist websites (Why Designers Should Reconsider 'Minimalistic' Websites)
The science of colors and colors: the psychology of color (CHROMANTICS: the psychology of color)
How Kimoji attracts new users (How Kimoji Onboards New Users)
Issue with Dribbble (The Problem With Dribbble)
How to redesign an Email Digest (How to Redesign an Email Digest)
The future is near: a hell of a dozen design predictions for 2017 (The Future Is Near: 13 Design Predictions for 2017)
Five trendy (but useless) web components to avoid (5 Fancy (But Useless) Web Components You Should Avoid)
I'm not smart, I'm just sitting here longer than you (I'm not smart, I just sat there for longer than you)
How to make users wait pleasantly (How to Make Your Users Enjoy Waiting)
Five tools that web designers need to know in 2016 (5)
How to create retro illustrations in the style of the 50s in Adobe Illustrator (How to Create a 50s Fashion Illustration in Adobe Illustrator)
Icons In Web Design

A selection of free designer cookies

A collection of 50 registration screens for iPhone 6 in Sketch format.
Free space brushes for Adobe Photoshop
Patterns for generating icons for Photoshop, Illustrator, Sketch and Affinity Designer (Bjango App Icon Templates)
UI kits for iOS and Android (20 Free Mobile UI Kits for iOS & Android)
Abstract spherical graphics in vector format (12 Free Abstract Sphere Graphics in Vector Format)
Three dozen sets of UI elements (30 Free UI Kit Elements)
Set of vector icons dedicated to the internet (Freebie: 36 Internet Icons Vectors)
A set of contour icons dedicated to science (in AI, EPS, PSD, SVG, PNG formats) (Freebie: Science Line Icons (AI, EPS, PSD, SVG, PNG))
Gesture Icons Inspiration and Free Packages
Icons “Twelve Months” (PSD, AI, EPS, SVG, PNG) (Freebie: The Months Of The Year Icon Set (12 Icons PSD, AI, EPS, SVG, PNG))
Valentine's Day Icons (30 Valentine Icons for Free)
Set of Vector Icons: Star Wars and Marvel Comics Heroes (Free Icon Set: Star Wars and Marvel Superheros)
Serif fonts for digital designers (40 Free Serif Fonts for Digital Designers)
OVERPASS is a sans serif font inspired by Highway Gothic font (OVERPASS - an open source webfont family inspired by Highway Gothic.)

news

Entertaining

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/276285/

All Articles