The digest of interesting materials from the world of web development and IT for the last week №202 (March 6 - 13, 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

• FLIF - free image compression format
• Crisis obesity sites
• What's new in WordPress 4.5?
• SVG:
  
  • Spoiler: Insert SVG icons in one single way.
  • How to create an icon system using SVG symbols (How to create an icon system using SVG symbols)
  • SVG text cloud with jagged edges (Staggered and Fainting Text with SVG)
  • SVG Fundamentals: XML and Versioning
  • Parallax Burns: Transforming Flat Photos into Bulk with SVG (Parallax Burns: Converting Photographs from 2D to 3D with SVG)
  
  
• SEO technical guide (A technical guide to SEO)
• 5 SEO trends that you should know about in 2016 (SEO Trends of 2016: 5 Trends You Must Know This Year)
• Creating Bixa Color, color font for the web (Building Bixa Color, a color font for the web)
• Debugging Service Workers and Push with Firefox DevTools
• Service Workers: Save user information using Save-Data Header (Service Workers: Save your User's Data using the Save-Data Header)
• Performance Audit m.imgur.com ([m.imgur.com] page load performance # 1)
• Google's AMP: A Fun and User-friendly Guide to Accelerated Mobile Pages
• Sandbox Components Style Guide (A Style Guide Component Playground)
• Right click on the logo to display the file download dialog (Right Click Logo to Show Logo Download Options)
• Design in a Sea of ​​Engineering
• Media:
  
  • Podcast Web Standards, Issue # 6: flexbox, typography, speed, Bluetooth and BEM criticism
  • Video reports from Ya.Subbotnika 2016
  • Videos from mitapa Girls Not Bombs # 6
  
  
• Spectacular web:
  
  • Weekly selection of beautiful effects on CSS / SVG / JS # 28
  • Instagram style filters using HTML5 Canvas (Instagram-style filters in HTML5 Canvas)
  • Medium site image loading blur effect (Medium site like Image loading blur blur)
  • Regular creative loaders with Rebound and Canvas (Spring Loaders with Rebound and Canvas)
  • Adaptive pixel art
  
  

CSS

• How to create animations and transitions using Motion UI
• Sass: transfer of code blocks with impurities and the choice between mixin and extend
• We fix broken text with box-decoration-break (Fixing Broken Text with box-decoration-break)
• Using `rem` to set global dimensions; `em` - for specifying local (Use` rem` for Global Sizing; Use `em` for Local Sizing)
• People do not change the default value to 16px for the font in their browser (People size change font size in their browser).
• Advanced CSS selectors that you never knew about (Advanced CSS Selectors you knew about)
• We improvise with responsive images waiting for browser support (Waiting for browser support: makeshift responsive images)
• How to make a pyramid structure using CSS (How to create a pyramid layout with CSS)
• Quick Tip: Fix a font-weight problem in hover state (Quick Tip: Fixing the font-weight Problem on Hover States)
• We clean the CSS-code (Cleaning Up a CSS Codebase)
• Add styles for broken images (Styling Broken Images)
• Typography based on relative size units of the visible area (Viewport Unit Based Typography)
• Tools And Resources For Creating More Meaningful Web Typography (Tools And Resources For A More Meaningful Web Typography)
• “Living” style guide - Pattern-Lab (The “Living” Style Guide - Pattern-Lab)
• balloon.css - simple tooltips made of pure CSS simple tooltips
• Read the book 'Enduring CSS' online at ecss.io

Javascript

• JS testing. Karmic webpack
• Google has updated recommendations for indexing sites in JavaScript
• Advanced use of the reduce method
• 5 Tips for Writing More Supported JS Code (5 Tips For Writing More Maintainable JavaScript Code)
• Exploring JS Native Functions and How to Use Them (Learning JavaScript Native Functions)
• Simple Node.js Website - 2016 Edition
• JavaScript creator Brendan Eich: WebAssembly changes the rules of the game (JavaScript founder Brendan Eich: WebAssembly is a game-changer)
• Framework:
  
  • It took me only a week to master React, and how are you worse? . How to be Produced in Reacting a Week and You Can, Too Community css-live.ru
  • React v15.0 RC released (React v15.0 Release Candidate)
  • Quick tip: creating a React component of a video player (Quick Tip: Build a Video Player Component in React)
  • enclave - easier compilation of React applications
  • Hot Reload in React (Hot Reloading in React)
  • The end of the magic of Meteor (The end of the magic of Meteor)
  • Creating a UI for an Ember Application (Building a UI Around an Ember Data App)
  • Angular is a design pattern (Angular is a Design Pattern)
  • Authentication in Angular 2 (Authentication in Angular 2)
  • madewithangular - a collection of sites made using AngularJS
  • react-mt-svg-lines - component for linear animation with stroke in SVG
  • react-key-handler - React component for handling keyboard events (React component to handle key events)
  
  
• ES6 / ES2015:
  
  • ES6 in detail: switch functions
  • The most useful features of ES6 / ES2015 (The most useful features of ES6 / ES2015)
  • Five Tips to Improve Your JS with ES6 (5 Tips to Improve Your JS with ES6 - Crater Conf Talk)
  
  
• Maybe we should lower the JavaScript level (Maybe we could tone down the JavaScript)
• JavaScript in 2016: beyond harmony (JavaScript in 2016: Beyond Harmony)
• In defense of JavaScript classes (In Defense of JavaScript Classes)
• How to pass variable values ​​from SCSS to JavaScript (How To Pass Variables from SCSS to JavaScript)
• Creating a 3D engine with JavaScript (Building a 3D Engine with JavaScript)
• Nervousness from JavaScript Toolkit - Help at Hand (JavaScript Tooling Anxiety - Help Is at Hand)
• JavaScript Unit Testing Performance
• JS Bits - conceptual javascript snippets
• freezeframe.js - pause script for animated GIFs
• babylon - javascript parser

Browsers

• The release of Firefox 45 , details for developers in the blog of Marat Tanalin
• The nightly builds of Firefox support speech synthesis.
• Opera has released a preview version of the browser with a built-in ad blocker.
• Microsoft has added a banner about updating to Windows 10 in the security update for Internet Explorer
• Chrome 49: Custom CSS properties, background sync and save-data client hint

Sites with interesting design and functionality

• Haruki Murakami Creative Website
• tse-foundation.org - site with a change in color when scrolling
• aaronporter.co - creative portfolio site designer with non-standard transitions
• Publicis90 - a site with a wonderful smooth scroll animation.
• 12dishes.com - culinary site with custom navigation and nice effects.
• 56.digital - vertical scrolling site with a three-dimensional background element and effects during scrolling
• Best interactive sites for 2016
• Weather Effects Website
• I / O 16 coming
• New better portfolio sites, March 2016 (The best new portfolio sites, March 2016)

Design

• Product Design Digest February 2016
• Interface states: first screen, load indicator, and error messages
• The influence of the interface on the growth of the service: analysis of the Telegram iOS application
• Using Sympli to interact with developers
• Design with meaningful data
• Graphic editor:
  
  • Plugin for easy conversion of artboards to PDF
  • animatemate - a plugin for creating animation in Sketch
  • Basics of a video layer in Photoshop (Photoshop Video Layer Essentials)
  • Five Tips for Saving SVG for the Web in Illustrator (5 Tips for Saving SVG for the Web with Illustrator)
  • Illustrator in 60 seconds: how to use clipping masks (Illustrator in 60 Seconds: How to Use Clipping Masks)
  
  
• Is there a visible border on the web? (Is there a fold on the web?)
• The future of dialog UI belongs to hybrid interfaces (The Future of Conversational UI Belongs to Hybrid Interfaces)
• Myths of UX design / grocery design / or whatever they call it this week (The Myths of UX Design / Product Design / Whatever
• Less is More - Minimalist and Simple Web Design - Minimalist and Simple Web Design
• Seven best strategies for using photos in web interfaces (The Seven Best Strategies For Using Photos in Web Interfaces)
• How easy it is to cope with shadows with transition modes of one color or shade to another (How to Shade Easily With Layer Blend Modes)
• Top Mobile Design Trends for 2016 (Top 5 Breakout Mobile Design Trends for 2016)
• LIQUID BRANDS - styling famous brands
• Instant Logo Search (Instant Logo Search)
• Highly Fidelity Collaboration and Design Philosophy at Intercom
• Dashboard in Stripe (Stripe Dashboard)
• Details typography favorite sites for February 2016 from Typewolf (The Typographic Details Behind Typewolf's Favorite Sites of February 2016)
• Impressive Material Design Concepts (Distilling 5 Incredible Material Design Concepts)
• An Introduction To Material Design
• Excellent combinations of fonts (Great font combinations)
• Illustrations of patterns of various Arab countries (18 Free Various Illustration Patterns of Arab Countries)
• Inspirational Quality Wireframes Inspiration

A selection of free designer cookies

• Free lightning photos for photo manipulations
• Free ink and paint textures
• St. Patrick's Day flyer and poster templates (Freebie: 5 Free Flyer & Poster Templates for St. Patrick's Day)
• Apple Watch Mockups (20 Free Apple Watch Mock-up Templates)
• Elegant mock-ups to demonstrate logo design (PSD, AI, EPS) (Elegant Logo Mockup Templates - Free PSD, AI, EPS Download)
• A set of environmental icons (AI, SVG, PNG) (Freebie: Environmental Icons (AI, SVG, PNG))
• Set of outline arrow icons (Line Arrow Icons)
• Icons for getting transport and travel (Icons for getting around)
• http://open-foundry.com/ - service with free web fonts
• Font Collection (Collection of Free Fonts and Typefaces)
• Romantic Olesia Collectic Font (Free Download: Olesia Font)
• The font collection for February 2016 (Discover 36 free fonts From February 2016)

news

• MIT development allows you to speed up the loading of web pages by 34%
• Google launched Google Destinations mobile travel planning service.
• The founder of the anonymous forum 4chan got a job at Google to work on streaming and photo services
• FBI against Apple: President of the United States opposed the absolute protection of smartphones from hacking
• AI Google finally conquered go, scoring a third victory over Sedol. The next target is StarCraft
• Google launches Chrome Music Lab project to create music experiments right in the browser
• The new world map will tell you about the number of registrations in national domains.
• The first release of the Eclipse Che integrated development environment , Microsoft has joined the Eclipse Foundation
• In the issuance of Google you can hear the voices of 19 animals
• Google fights Zika virus in several ways
• Google transfers its blogs to a new domain

Entertaining

• Facebook poor . What do Chinese peasants and Chilean miners do in social networks?
• How is the interview in Medium
• How Atlases Evolve
• Sergey Murashov (Slack): “Our capitalization may be overestimated, but not much”
• World map of domains, turns everything upside down
• How does it feel to be fired from Facebook
• Why leaving Microsoft for a low-paying job was a breath of fresh air for me
• IT giants united in the fight against US presidential candidate Donald Trump
• How quickly the most popular programs in the world recruited 1 billion users - infographics
• The most comprehensive overview of the new features of Android N
• 10 browser games that can be played while the boss has gone somewhere
• The never ending story of ad blockers (A Never-Ending Story On Ad-Blockers)
• Chrome Music Lab - how music is born

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 .