The digest of interesting materials from the world of web development and IT for the last week №198 (February 7 - 14, 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

• Full BEM Technology Stack - Report by Alexander Braumgertner with PiterJS # 6
• Cheerful console . Overview of the useful and non-obvious browser console features from Julia Bukhvalova
• SVG:
  
  • SVG-files from the inside and the output of vector images on the canvas "manually" (Part 1)
  • Methods for generating SVG sprites using the svg-sprite library as an example
  • Expert work with `feColorMatrix` (Finessing` feColorMatrix`)
  • Using SVG on the web (Start simple: using SVGs on web)
  • Bash script to create a SVG sprite from a folder with SVG files
  • FontReaper - node script that breaks icon fonts into CSS classes with background SVG images while preserving the original syntax
  
  
• Web performance:
  
  • Performance Weekly. Issue # 1
  • How HTTP / 2 Changes the Web: Web Performance Best Practices (How HTTP / 2 Is Changing Web Performance Best Practices)
  • Web Productivity: More than twenty experts share their tips and mistakes (Web Performance: 20+ Experts Share Their Advice and Mistakes)
  • Web Performance Top 50 World Blogs (Web Performance of the World's Top 50 Blogs)
  
  
• Google AMP will support paid access to content.
• Introduction to AMP (Accelerated Mobile Pages)
• HTML5-supported video formats now dominate the web (HTML5 Supported Video Formats Now Dominate The Web)
• Why npm Scripts?
• Reflections on databases from a front-end development perspective
• How to write an extension for syntax highlighting in Atom (How to Write a Syntax Highlighting Package for Atom)
• How to use ARIA effectively with HTML5 (How to Use ARIA Effectively with HTML5)
• Webpack Beginner Tutorial (Beginner Webpack Tutorial Part 1 - Introduction To Webpack)
• HTML5 Validator - command line utility for checking the validity of static HTML5 files (HTML5 Validator)
• Short note on the attributes alt = "" and title (Short note on the use of alt = "" and the title attribute)
• Up and down the Web stack (Running up and down the Web stack)
• How to contribute to an open source project on GitHub (How to Contribute to an Open Source Project on GitHub)
• GitHub's access system is not perfect (GitHub's Permission System is Flawed)
• git-blame-someone-else - substitute the author of a commit
• I’m a web developer and I’m stuck with the simplest application of the last 10 days (I'm a web developer and I've been stuck with the app for the last 10 days)
• Spectacular web:
  
  • Weekly selection of beautiful effects on CSS / SVG / JS # 24
  • The best UI concepts implemented on CodePen (Can you Code this UI Concept? Vol. 2)
  • Pure CSS TV Show Widget
  
  

CSS

• Working with CSS Variables with JS
• Flex box editor
• How do I use Sass with Polymer?
• Orna4Node - a tool for creating Atomic CSS architecture based on NW.JS
• How to improve CSS on bet365 (Improving CSS at bet365)
• Why DockYard switched to PostCSS (Why DockYard transitioned to PostCSS)
• Fab Four technique for creating responsive emails without Media Queries (The Fab Four technique to create Responsive Emails without Media Queries)
• Why I love to write CSS in Visual Studio Code (Why I love Visual Studio Code for CSS)
• Subgrids thinking out loud : A summary of thoughts about the subgrids property of the CSS Grid Layout specification
• PostCSS - official site
• Sass: The @extend Directive
• Is Sass Right For Your CSS ?
• Async CSS w / link [rel = preload]
• The future of loading CSS (The future of loading CSS)
• How I Test CSS (How I Test CSS)
• Introduction to PostCSS (An Introduction to PostCSS)
• Self-styled CSS Lessons (16 CSS Lessons via Post-it® Notes)
• Pixel Art to CSS (Pixel Art to CSS)

Javascript

• Babel v6.5.0 release
• Grunt 1.0.0 rc1 release
• jQuery Mobile v1.5 | Still alive (jQuery Mobile 1.5 | It's alive)
• ES6:
  
  • ES6: WeakMap, Set and WeakSet objects from the inside . Translation of the article ES6 WeakMaps, Sets, and WeakSets in Depth by the community css-live.ru
  • ES6: Map object methods from the inside . Translation of ES6 Maps in Depth article
  • ES6 in detail: symbols
  • Fallback actions in ES6 Promise
  • Use ECMAScript 6 NOW (Use ECMAScript 6 NOW)
  • ES6 Math Functions You Can Use Today (ES6 Math Functions You Can Use Today)
  
  
• Framework:
  
  • Angular 1.5: Components
  • First the basics, then the frameworks (Fundamentals Then Frameworks)
  • I learned how to work productively with React for a week, and you too can (I learn how to be, Too)
  • A Lazy Isomorphic React Experiment
  • Introduction to Ember for Angular Developers (Anonymous to Ember for Angular Developers)
  • Avoid partial binding of methods in React components (Avoid partial application in React components)
  • Detailed consideration of the AngularJS ngMessages module (A Closer Look at Angular's ngMessages Module)
  • LineChart - Graphics for Angular 2.0
  • angular2-autosize - directive for Angular2 automatically changing the height depending on the content
  • Why Java developers will take Angular 2 and TypeScript (Why Java Developers Will Embrace Angular 2 and TypeScript)
  
  
• Object Oriented JavaScript: some practice
• Choosing Vanilla JavaScript in 2016 (Choosing Vanilla JavaScript in 2016)
• JavaScript tiredness fatigue (JavaScript fatigue fatigue)
• The interaction of JavaScript with hardware (Hardware Hacking With JavaScript)
• ECMAScript String Padding
• Polite Introduction to Functional Javascript (A Gentle Introduction to Functional JavaScript)
• Java requestAnimationFrame () for smooth animation
• Advanced Javascript Properties (Advanced Javascript Properties)
• Make a multidimensional flat array (Flattening multidimensional Arrays in JavaScript)
• Quick Tip: Manage closures by overriding them (Quick Tip: Master Closures by Reimplementing Them from Scratch)
• How to create a simple loader with JavaScript Promises (Create a Basic Loader with JavaScript Promises)
• Using Webworkers to React Faster (Using Webworkers to make React faster)
• The appeal of Scala.js (The allure of Scala.js)
• beautify-text - auto quotes and punctuation marks
• Lazy- loading images using the Igaro JavaScript framework (Lazy Loading Images with the Igaro App JavaScript Framework)
• An app that gives javascript advice every day (An app that gives you a javascript tip a day!)

Browsers

• Chrome will soon stop supporting SPDY
• Chrome change breaks the visual viewport
• Update Web Audio in Chrome 49 (Web Audio Updates in Chrome 49)
• New DevTools (DevTools go dark, @keyframe editing and smarter autocomplete)
• Smooth scrolling in Firefox 46 with APZ (Smoother scrolling in Firefox 46 with APZ)
• Firefox Update 44.0.1. Mozilla representative joins Internet Architecture Board
• Chrome for Android received support for the "physical network"

Sites with interesting design and functionality

• The service of generating excuses
• Updated brand Uber
• zfort.com is a new company website with conceptual design and rich animations.
• HTML-909 - drum synthesizer
• beatboxacademy.ca - a site with the implementation of an interactive beatbox
• macroinvertebrates.org - an interactive site for insect lovers
• gabrielfaucon.com - stylish website with cute hover effects
• Why do Chinese sites look so full? (Why do Chinese websites look so busy?)
• A site with a good use of SVG animation
• Valentines generator from Spotify with unusual background behavior
• patrik-huebner.com - creative site designer portfolio
• A funny example of a trash animation site.

Design

• Why desktop interface is still better than tablets - opinion
• Craft - design with real-time data
• Detailed iOS app design lesson in Sketch: Part 2 of 3
• The history and evolution of logo design (THE HISTORY & EVOLUTION OF LOGO DESIGN)
• Good UX designers must be fighters, because compromise design is not good design (Good UX designers must be fighters, because compromised designs are not good designs.)
• Sketch tutorial for iOS developers
• Improving productivity by better organizing folders in Photoshop (Improve Productivity by Properly Organizing Your Folders in Photoshop)
• Animation for beginners: how to animate the process of running a character (Animation for Beginners: How to animate a character )
• The process of creating the design of the logo Arriva (The design process of the Arriva logo)
• Design, Process, and Collaboration in Stripe (Design, Process, and Collaboration at Stripe)
• How we tried to make the design of the cover of our book (and how Jessica Hische saved the situation) (Jessica Hische Saved the Day)
• How designers work in 2015 (How designers worked in 2015)
• Whitening Social Media (Social Media Whitewash)
• Cave Story (The Careful Design of Cave Story) game design
• As I tried to get a job at Blablacar, (I applied for a job at Blablacar,)
• The First Title-Pages
• New Year, New Hopper (New Year, New Hopper)
• Defining Principles to Drive Design Decisions
• Using Psychology to Improve Your Conversions in 2016 (Using Psychology to Boost Your Conversions in 2016)
• IPad Pro Review by UX Designer (A UX Designer's Review of iPad Pro)
• First look at Adobe Animate CC (First look at Adobe's Animate CC)
• Magic tricks in Photoshop (Magic tricks)
• How to age a photo in Adobe Photoshop (How to Age a Photo in Adobe Photoshop)
• How to create an effect of antique metallic text in Adobe Photoshop (How to Create a 3D Antique Metal Text Effect in Adobe Photoshop)
• Character creation tutorials (60+ Outstanding Character Design Design Tutorials)
• Great restaurant logos for inspiration (25 Stunning restaurant logos for your inspiration)
• New logo and identity for VSCO (New Logo and Identity for VSCO done In-houseApp of the Rings)
• A growing number of heart-shaped logos (Heart Rate Rising)
• Multiple Stroke Text Effect in Adobe Photoshop
• Wooden effect for text in Adobe Illustrator

A selection of free designer cookies

• Sketch segmentcircle - creating pie charts and graphs
• Sketch Replace Color Plugin
• Best in 2015: fonts for designers (Best of 2015: 100 Free Fonts for Designers)
• Sketch Plugins
• Food photo collection
• Chat - mini UI set
• Five dozen brushes for photoshop (50 Free Photoshop Brushes Sets For Amazing Photoshop Work)
• Set UI Elton (Elton UI Kit)
• Icons for Valentine's Day (SVG) ([Freebies] Valentine Day icon)
• Icon set dedicated to home and real estate (AI, CSH, EPS, SVG, Webfont, Sketch) (Freebie: Home Appliance And Real Estate Icons (72 Icons, AI, CSH, EPS, SVG, Webfont, Sketch))
• ANURATI - stylish decorative header font (ANURATI - Free font)
• Hadron Sans - decorative font (Hadron Sans FREE font)
• Font Collection (Collection of Free Fonts and Typefaces)
• Fonts with Personality (Free Fonts With Personality)
• Mockup design files for drinks
• Free vector on the transport theme
• Free fonts in your collection

news

• Rumors confirmed - Opera Software is sold to China
• Google allowed to edit the knowledge network.
• Google will refuse advertising banners in flash format
• Google announced the imminent closure of Picasa photoservice
• Google is working on a self-contained virtual reality helmet that does not require additional equipment in the form of a smartphone or PC
• The absolute record of data transfer rate is set: 1.125 Tbit / s
• Twitter has changed the algorithm for displaying messages in the tape, contrary to the statements of Jack Dorsey
• YouTube Red subscribers got access to the first exclusive YouTube films and TV shows. Red Originals
• The publisher of magazines Fortune and People bought the social network Myspace
• In the US, the control system of robil mobile decided to consider the driver
• Microsoft has released an application to determine the breed of dogs on the photo
• China hosts the most extensive Turing test
• Firefox OS is dead (Firefox OS is DEAD, Says Mozilla)

Entertaining

• Let's talk about Gmail: How did the popular mail service evolve
• Video of the day: animated map of the "underwater Internet"
• "It seems the Medium team got drunk again." Journalist The Verge Casey Newton drew attention to the unusual descriptions of updates of the application Medium on the App Store
• DARPA: “stentrod” implant for prosthetic control implanted into the brain through veins
• Dead programmers do not write code
• Created brain implant to control exoskeleton
• The ocean of the Internet: the underwater cables that keep the world online have been struck on an interactive map
• Internet Archive has launched a museum of DOS viruses
• Scientists have proved the existence of gravitational waves 100 years after the prediction of Einstein
• IT and Mining: how to optimize all processes with one system

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 .