The digest of interesting materials from the world of web development and IT for the last week №183 (October 26 - November 1, 2015)

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

Web development

CSS

Javascript

Design

news

Entertaining

Web development

• We continue to fight the frontend-routine
• <input> I love you, but you break me off
• How I did the web version of KeePass
• Mimic is a utility for replacing similar characters, making debugging a nightmare.
• Podcast SDCast # 31 : Visiting Microsoft Strategic Technology Expert Konstantin Kichinsky
• Video from Web Standards Days conference held in Minsk this weekend: First day , Second day
• The Art of Debugging
• 13 Tips for Better Design and Building Applications (13 Tips on Designing and Building Apps More Efficiently)
• Work with images:
  
  • Why BPG will replace the GIF and not only. (Why BPG will replace GIFs and not only.)
  • A Guide to Using WebP Images Today: A Case Study (Guide To Using WebP Images Today: A Case Study)
  • How to create responsive images with srcset (How to Build Responsive Images with srcset)
  
  
• Spectacular web:
  
  • Weekly selection of beautiful effects on CSS / SVG / JS # 10
  • Spectacular ideas for animating card sets (Effect Ideas for Card Stacks)
  • Animation for the introductory section on the website page (Animated Intro Section)
  • FCC Zipline: JS Calculator : a spectacular Fallout-style JS calculator
  
  
• SVG:
  
  • Svg path builder
  • Creating complex SVG animations (Designing Complex SVG Animations)
  • How to manipulate SVG text (How To Manipulate SVG Text)
  
  
• Firebug & DevTools Integration
• Five Things Age Programmers Should Remember (Five Things Old Programmers Should Remember)
• Please do not commit the commented out code (Please, don't commit commented out code)
• 4 Expert Tips for Getting More from Google Fonts (4 Expert Tips for Google)
• Tips for Improving Site Performance
• Correct markup for recording measurements in HTML5 (Marking Up Measurements Correctly in HTML5)
• 12 of the worst nightmares of developers on All Saints Day (12 of the Scariest Developer Fears at Halloween)

CSS

• All about spaces
• The work of CSS-selectors explained in the pictures with cats
• What to avoid when writing CSS (Things To Avoid When Writing CSS)
• How z-index works (How z-index Works)
• The State of Web Type
• Less: the most misunderstood CSS preprocessor (Less: The World's Most Misunderstood CSS Pre-processor)
• Practical CSS Parallax
• CSS Haiku
• Breaking Myths About Flexbox (Flexbox Myth Busting)
• Apply Flexbox to video player (Applying Flexbox to the Video Player)
• An article on how to make effective blocks with non-standard geometry as a site background (Background Image Shapes)
• The next edition of Totally Tooling Tips from Google: Critical Path CSS (S2 Mini Tip # 1)
• Experts share their favorite CSS tricks (Expert’s Weigh In: What's Your Favorite CSS Trick?)
• Learn the Bootstrap Grid in 15 minutes
• 4 Ways to Create Accordions in Pure CSS (4 Ways to Create Awesome CSS-Only Accordions)
• PostCSS:
  
  • PostCSS Quick Start Guide: Configuring Grunt
  • Using PostCSS with BEM and SUIT Methodologies (Using PostCSS with BEM and SUIT Methodologies)
  • Using PostCSS with Sass, Stylus, or LESS (Using PostCSS Together with Sass, Stylus, or LESS)
  • PostCSS Time Machine - will help to correct mistakes made when creating CSS, and described in CSSWG.
  • mdcss - a PostCSS plugin that allows you to create and maintain styled gages using CSS and Markdown comments
  
  
• CSS in JS:
  
  • BackstopJS - CSS regression testing
  • CSS in JS: it's a trap! (CSS In JS: It's a Trap!)
  • Why you shouldn’t add lower-case styles using JavaScript in React components (Why You Shouldn't Style React Components With JavaScript)
  
  

Javascript

• We have problems with promises
• New releases:
  
  • Launch of server-side JavaScript platform Node.js 5.0
  • Babel 6.0.0 release
  • Quick tip on updating Babel 5.x -> 6.x
  
  
• ES6:
  
  • Subtleties of ES6: Inheritance (Part 1)
  • Simplify asynchronous JavaScript code using asynchronous functions from ES2016
  • ES6 in details: Destructuring
  • ECMAScript 6 (ES6): What's new in the new version of JavaScript (ECMAScript 6 (ES6): What's New In The Next Version Of JavaScript)
  • Quiz: Do you understand object oriented JS with ES6?
  
  
• Pigeon is a HTML preprocessor written in Javascript.
• How is Javascript used in the Spotify desktop app? (How is the Javascript used within the Spotify desktop application?)
• JavaScript with the ability to debug in production with Source Maps (Debuggable JavaScript in production with Source Maps)
• ServiceWorker and Progressive Networking
• Cache isolated HTTP requests with Service Worker (Cache sandboxed HTTP requests with Service Worker)
• Keep pushing, with W3C Push API (Keep pushing it, with the W3C Push API)
• Reading and copying selected text to the clipboard using JS (Reading and copying selected text to clipboard using JavaScript)
• Introduction to the concept of functional programming in JS (An Intro to Functional Programming Concepts in JavaScript)
• Choosing JavaScript Build Tool - Babel, Browserify, Webpack, Grunt and Gulp
• A JS module manager that fits into a tweet (A JavaScript Modules Manager)
• Framework:
  
  • From 0 to 1. We understand with Redux
  • Cheat Sheet by React v0.14.1
  • YouTube channel "ReactRally"
  • Upgrading applications from Angular 1 to Angular 2 using ngUpgrade (Upgrading apps to Angular 2 using ngUpgrade)
  • ngclipboard - a directive for clipboard.js (Angularjs directive for clipboard.js)
  
  
• Lessons:
  
  • Lesson: Using React with a Webpack (Using React with Webpack Tutorial)
  • Creating a simple demo with Three.js (Building up a basic demo with Three.js)
  • Create a Tabbed Browser with Node-Webkit and AngularJS (Create a Tabbed Browser Using Node-Webkit and AngularJS)
  • Create a real-time photo update application using the Instagram API (Build a Real-Time Photo Update App with the Instagram API)
  • Creating and publishing your own Grunt plugin (Build and Publish Your Own Grunt Plugin)
  • Getting started with Emscripten: C / C ++ to JavaScript / HTML5 conversion (Getting Started with Emscripten: Transpiling C / C ++ to JavaScript / HTML5)
  • Creating SCRUD systems using jQuery, JSON and DataTables (Creating a SCRUD System Using jQuery, JSON and DataTables)
  
  
• Plugins:
  
  • Protip - another jQuery plugin for displaying tooltips (Yet another jQuery tooltip plugin for almost ANY SITUATION!)
  • Quill - rich text editor (IE9 +)
  • canvid.js - library for playing videos in HTML5 canvas element
  • Segment - a small JS (without dependencies) for drawing and animating SVG path strokes
  
  

Sites with interesting design and functionality

• Sites Made in Japan
• 22 modern sites with horizontal layouts
• 25 sites with custom navigation
• Examples of modern website design (Website Showcase Of Modern Design - 39 Examples)
• ginventory.co - site with cool scroll effects
• frightgeist.withgoogle.com - multimedia website from the series of Google experiments
• georgeleonardo.com - a site with nice transitions between pages and preload effects
• deuxhuithuit.com - site non-standard effects in the design
• Bond Interactive Fleet
• whatisburningman.org - site with a diamond structure
• jwt.amsterdam - quality promo site with background videos
• andreo.li - a site with parallax and scrolling animation
• merixstudio.com/frontend - an interactive multimedia site in the style of Back to the Future

Design

• Trello designer. How we solved the problem with icons using automation
• Casual design: comfortable measuring spoon
• Fascinating illustrations in packaging design
• 300 Million Button (The $ 300 Million Button)
• 12 Mobile Web Design Tips for Present and Future (12 Mobile Web Design Tips for the Present and the Future)
• Essential tips for converting a desktop site, to mobile
• Visualization of two types of people (2 Kinds Of People)
• What makes a good user experience? (What makes a good user experience?)
• UI design books that you should read (UI design books you should read)
• What's on your bookshelf? part 2 (What's on your bookshelf? Part 2)
• Video: logo design - rules of thumb that you shouldn't forget (Watch: Logo Design Rules of Thumb You Shouldn't Forget)
• Direct slash: a story about how Massimo Guzmán turned a simple logo into a brand of opportunities (Forward slash: The story of how Massimo Guzmán turned our logo into a brand of possibility.)
• Fonts In Use - photo collection with examples of using fonts
• Complete Beginner's Guide to Interaction Design for Beginners
• 5 times UX matters in everyday life (5 Ways UX Matters in Everyday Life)
• 10 mobile UX nightmares to avoid (10 mobile UX nightmares to avoid)
• Working with writers: what designers need to know (Working with writers: what designers need to know)
• Redesign:
  
  • Studio showed new branding Netflix
  • GoodReads redesign concept (goodreads bibliophilic design approach)
  • Branding Netflix (Netflix Branding)
  • New York City Subway Map Redesign (The New York City Subway Map Redesigned)
  
  
• Graphic editor:
  
  • Exporting Sketch Sources to Zeplin
  • Create elegant (but simple) animations using Sketch and Atomic.io
  • Bugs in Adobe Illustrator: Disappearing View of the Pencil Tool
  • Can you use photoshop for narration? (Can You Use Photoshop to Tell a Story?)
  • Visualize Sketch 3.4 New Features (Visualize Sketch 3.4 New Features)
  • 15 top Sketch plugins
  
  
• Interview:
  
  • How do Google UX designers work?
  • Interview with designer Jean-Marc Denis (Google, who worked in the Inbox, Gmail and Sparrow) (AMA: Jean-Marc Denis)
  
  
• Lessons:
  
  • Create an illustration of an evil witch in Adobe Illustrator (Create the Wicked Witch of the West in Adobe Illustrator)
  • How to create a vintage typographic illustration-poster in Adobe Illustrator (How to Create a Vintage Typographic Illustration Poster in Adobe Illustrator)
  • Connecting the dots: how we added a smile to the Basecamp logo (Connecting the dots: How we put a smile on the Basecamp logo.)
  • The process of creating a design for the site CarenZorgt (The design process of the CarenZorgt web site)
  
  

A selection of free designer cookies

• Vector clipart on SEO themes
• Stylish frames for your design.
• The best actions for retouching (Top 80 Photoshop Actions To Download Your Photo Retouching Work)
• Packing with cookies from SmartyBundles (Free download: design bundle from SmartyBundles)
• Mockups for T-shirts design demonstration (15 Free High-Resolution T-Shirt Mockup Templates)
• A set of cookies from AlienValley (Freebie Bundle from AlienValley)
• Hand-selected micro icons (PSD) (200 Handcrafted Free Micro Icons (PSD))
• Creaticons - vector food and beverage icons (AI, EPS, SVG, PNG) (Creaticons Free - Food & Beverages Vector Icons (AI, EPS, SVG, PNG))
• SVG icons of popular brands (Free Download: 134 SVG Icons for Popular Brands)
• Set of weather icons for mobile and web applications (Freebie: Weather App Icon Set For Mobile and Web)
• bitIcon is an icon font with logos of popular languages ​​and programming technologies
• More than a hundred of the best fonts, autumn 2015 (101 best free fonts, fall 2015)

news

• Launch of Opera 33 browser
• EU abandoned network neutrality and mobile roaming
• The turnover of e-sports in 2015 rose to $ 747 million
• Windows 10 installed on 120 million devices, plans - 1 billion
• Microsoft changed the distribution terms of Windows 10
• Twitter's organic search traffic grew 20% after Google deal
• The cost of Twitter shares fell by 13% against the background of the financial report for the III quarter of 2015
• Chrome OS will cease to exist in 2017
• In 2016, Google will test Project Loon in Indonesia
• Yandex's net profit in the third quarter of 2015 amounted to 4.3 billion rubles
• Bill Gates is 60 years old
• Record sales of computers provided Apple with the biggest earnings for the year.

Entertaining

• Rating: 26 US IT companies with an average salary above $ 120 thousand
• MIT scientists have learned to see through walls using Wi-Fi
• How cognitive computers can change our future
• Ten opinions: which programming language to learn first
• Big Data for Digital Humanism
• Mal, yes removed . Interesting stories of young entrepreneurs who are changing the world at an age when the majority do not even think about it.
• The founder of Megaupload, Kim Dotcom, spoke about the alternative Internet project based on smartphones.
• (Almost) robokar: Tesla Motors autopilot adventures
• What is a code? Translation of the article by journalist and programmer Paul Ford “What is Code?”, Published on Bloomberg Businessweek
• Grandma programming . Margaret Hamilton is considered the progenitor of modern programming, and thanks to the code she wrote, the Americans flew to the moon.
• How math helps people to live
• How Pornhub, Google, Uber, Mail.ru Group and other brands reacted to Halloween
• Other Internet or hidden networks of the virtual world
• Virtual Tour of the Crater of Mars
• Ignore everyone (Ignore Everybody)
• NASA is looking for a programmer who will program in 60-year old languages ​​to work with Voyager

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 .