The digest of interesting materials from the world of web development and IT for the last week No. 177 (September 14 - 20, 2015)

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

• Web performance:
  
  
  • Adaptive design alone is not enough: we need adaptive performance.
  • Save traffic using images correctly (Saving Bandwidth by Using Images the Smart Way)
  • Detailed analysis of the performance of web fonts (Analyzing Web Font Performance)
  • Making web pages fast (Making web pages go fast)
  • A complete list of properties and methods that lead to reflow pages (What forces layout / reflow)
  
  
  
• Web animation:
  
  
  • The css-live.ru community began translating a series of articles about Web Animations API: Let's talk about Web Animations API , Part 1: creating basic animation , Part 2: AnimationPlayer and managing the timeline
  • Creating an animation with a hand-draw effect using SVG (Creating Cel Animations With SVG)
  • Basics of modern animation from Google Developers
  • A fresh report on Ada Rose Edwards’s Animation performance on the web with the London Web Standards.
  • Ana Tudor about how she created her most popular 3D demo (How I Live-Coded My Most-Hearted Pen)
  
  
  
• Spectacular web:
  
  
  • Weekly selection of beautiful effects on CSS / SVG / JS # 4
  • 9 cool demo on CodePen by David Walsh
  • Creating ripples in Material Design style with JS and SVG (Creating Material Design Ripple Effects with SVG)
  • High-tech UI Elements with SVG and Border-Image
  • Creating an Apple TV Poster Effect with Parallax Effect on CSS3 & jQuery (Create an Apple TV Poster Parallax Effect in CSS3 & jQuery)
  
  
  
• Conferences:
  
  
  • 10 fresh videos from London Web Standards
  • Video from OdessaJS Conference , held on August 22
  • Broadcast of the conference FrontTalks 2015 , held on September 19 in Yekaterinburg
  
  
  
• Anachronical Beard: a new methodology for developing sites for any devices and platforms (Translation of the article by Bruce Lawson Anachronistic Beard: a new methodology )
• Web Field Manual - moderated links to significant projects and articles on web development (design and frontend)
• Bosonic - a supervised collection of web components for everyday use (A practical collection of everyday Web Components)
• Video: getting started with Grunt
• Download Grunt and ... guidelines for using npm as a build tool (Give Grunt the Boot! A Guide to Using npm as a Build Tool)
• About why important code sequence in terms of availability (Source Order Matters)
• Use only one <main> per page
• How to use Chrome DevTools professionally (How to use Chrome DevTools like a Pro)
• How to be a cool front-end developer (How to be a bad-ass Front-end Developer)

---

CSS

• Using CSS4 features today with cssnext
• Back to basics . Translation of the article Back to the: roots by simurai
• HTML5 customization customization element
• Styling and customizing the File Input element in an intelligent way.
• A simple way to lay out the grid with the alignment of elements in width, and in the last line - on the left edge
• Final CSS and SVG comparison on Adobe developer blog
• Sync CSS animations with HTML5 audio . Lesson on creating heartbeat animation (Syncing CSS Animations with HTML5 Audio)
• Make high-resolution background images using CSS (webkit-min-device-pixel-ratio and min-resolution)
• Validating these impurities and Sass functions (Validating Input in Sass Mixins and Functions)
• Use Flexbox with Modernizr
• Recreating the effect of Apple TV icons using JS and CSS (Recreating the Apple TV icons in JavaScript and CSS)
• Detailed article on how Chris Pearce lived for two months with CSS modules (Elephants, The Three Code Ilities, & Two Months With CSS Modules)
• Creating multiple- step animation using multiple classes with transitions (Using multiple class-based CSS transitions to create staged animations)
• Creating Enterprise CSS Framework
• CSSSteal is an extension for Chrome that extracts CSS from the necessary classes.

---

Javascript

• Om, dear Om: (high?)? functional frontend design with ClojureScript and React
• RadioJS podcast: Release 30 . Interviews with the team of Protein, Node 4.0, styles in JS and Falcor, BEM tools and libraries, and more.
• New releases:
  
  
  • Node v4.1.0 (Stable) , ESLint v1.4.0
  • TypeScript 1.6 released with React.js support and several other JS news (TypeScript 1.6 Launches with React.js Support, Plus Some Other JavaScript News)
  
  
  
• ES6:
  
  
  • ES6 in detail: proxy
  • ES5, ES6, ES2016, ES.Next: what happens with javascript versioning? (ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning?)
  • Nicolas Bevacqua's series of interesting articles on ES6: ES6 Reflection , ES6 Proxy (ES6 Proxies in Depth), More about proxies , Improvements on working with numbers in ES6 (ES6 Number Improvements in Depth), as well as ES6 WeakMaps, Sets, and WeakSets (ES6 WeakMaps, Sets, and WeakSets in Depth)
  • ECMAScript 6: Void Arrays (ECMAScript 6: holes in Arrays)
  • __proto__ to ECMAScript 6 (__proto__ in ECMAScript 6)
  • Top ES2015 Features in 15 Minutes
  
  
  
• Framework:
  
  
  • Creating Angular 2 Style Components on Angular 1 (Part I) (Creating Angular 2 Style Components Using Angular 1)
  • Why we moved from Angular to React (Why We Moved From Angular to React)
  • What I learned from creating a React Native application. (What I learned from building a React Native app)
  • Creating a real-time application running on ReactJS using web sockets (Making ReactJS Realtime With Websockets)
  
  
  
• Plugins and libraries:
  
  
  • lrStickyHeader - a library without dependencies to create a sticky table header
  • OpenSeadragon - high-resolution image viewer on pure JS with mobile support
  • HashMap.js - lightweight library (<500 byte) for working with HashMaps
  
  
  
• Video:
  
  
  • Screencast Functional JavaScript: Partial Application
  • Adaptive images from Picturefill.js (Watch: Responsive Images with Picturefill.js)
  • Video from Devday.pl: Video Quo vadis, javascript?
  • Several videos from The Polymer Summit 2015: Evaluating the performance of your application on Polymer , Using ES6 with the Polymer library
  
  
  
• SpeckJS - Comment Driven Development. npm module, which parses the JavaScript and receives unit tests
• Demystifying JS Ecosystem (The JavaScript Ecosystem Demystified)
• Hail, Babel! The transpiling overlord
• Creating a face detection application using Node.js and OpenCV (Build a Face Detection Using Node.js and OpenCV)
• How to make a full screen video with animation

---

Browsers

• Microsoft will add VP9 codec support to Edge
• Mozilla launches Suggested Tiles in Firefox
• Firefox 41 earns Javascript clipboard without using Flash
• Mozilla is working on a lower battery consumption browser Firefox
• Yandex browser provided data protection technology
• Yandex Browser has become the second most popular Internet browser in Russia
• How to transfer browser cookies from one computer to another
• Details for developers in Opera 32 and Chrome 45 releases on the Dev.Opera blog.
• Technical details about the new Safari in iOS 9: 3D Touch, new responsive design, native integration and HTML5 API
• A note about the station in changing the font size in mobile Chrome
• Detox is an extension to Chrome and FF that will replace your Facebook feed with news from Hacker News, Designer News, Dribbble, etc.

---

Design

• Timelines in web design
• Portrait from text in Adobe Photoshop
• Minimalistic icons on the theme of food in Adobe Illustrator
• The right design at the right time.
• The Psychology of Design Numbers (The Psychology of Numbers in Design)
• Exploring the long scrolling web design trend
• 4 UX mistakes that kill your product (4 UX mistakes your product (and how to fix them))
• A set of tools that designers use today (The Tools Designers Are Using Today)
• Explanation of the main trends of 2015 in design of layouts (Top Web Design Layout Trends of 2015 Explained)
• Comparison of three more prototyping tools (Principle, Flinto (Mac), Tumult Hype) (Three more prototyping tools compared, Principle, Flinto for Mac, and Tumult Hype)
• Visualization of world knowledge (Visualizing theWorld's Knowledge)
• Should designers ...? (Should designers like to be coddled?)
• Should you use the custom scrollbar indicator? The results of the study using Eye-Tracking (Should You Use a Custom Scroll Indicator? A Study with Eye-Tracking)
• Creative exercises for creative teams (A list of creative exercises for creative teams)
• Ask anything from Tobias van Schneider, designer and developer (AMA: Tobias van Schneider, Designer & Maker)
• Ten examples of handwritten designs (10 Examples of Hand-Lettering Design Work)
• More than two dozen applications with the best design for 2015 (The 21 Best Designed Apps of 2015)
• Inspirational Design Concepts (Searching For UI Design Inspiration? Here Are A Few Concepts)
• Blacks in Design (Black In Design)
• The Evolution of Album Cover Design
• Creating a design for Airborne (Designing Airborne)
• Let's fix the user icon (Let's fix the “user” icon)
• An Introduction to Adobe Edge Web Fonts (An Intro to Adobe Edge Web Fonts)
• Consideration of the details of the Obsidian font from Hoefler & Co. (Inside Obsidian by Hoefler & Co.)

A selection of free designer cookies

• Free PSD website templates
• Free sweets in vector format
• Vintage Vector Image (30 Vintage Vector Freebies Download Roundup)
• PSD Website Templates (25 Downloadable Freebie PSD Website Layout Mockups)
• Vector Vintage Badges (Freebie: Vector Vintage Badges (AI & EPS))
• This Week's UI Sets (FREE UI KITS OF THE WEEK)
• UI “Land.io” + Landing Page Design (Sketch) (Freebie: “Land.io” UI Kit + Landing Page Design (Sketch))
• Illustricons: a set of 36 icons (Illustricons: 36 Free Icons)
• Icons dedicated to SEO (36 free seo icons)
• This week's collection of free fonts: from ATZUR to Athene (WEEKLY COLLECTION OF FREE FONTS)
• Barbaro - retro serif font (Barbaro Font)
• Retro font Banthers (Banthers Free Font)

---

news

• The number of sites with Flash elements dropped from 50% to 22% in four years
• Google ends SSLv3 and RC4 support and increases HTTPS requirements
• Google: HTTPS gives an advantage when choosing between two equal search results
• The Next Web: Facebook implements an analogue of the button Dislike using emoji
• Facebook will launch Facebook at Work by the end of the year.
• Wikimedia Foundation is testing its own map service
• Google's Loon project balloon fell in the courtyard of a residential building
• Google declares war on Ad Injectors
• Ex-head of Hyundai will lead Google autoproject
• Google found guilty of a dispute with "Yandex"
• Apple promises to beat iPhone sales record
• IPad Pro resolution compared with displays of other Apple devices
• Eric Schmidt criticized streaming with curators
• Canon is working on its own virtual reality device.
• NASA will launch a TV channel in 4K

---

Entertaining

• Microsoft Virtual Academy: a selection of online programming courses for beginners
• Amazon budget tablets are sold in packs of 6
• How many hashtags to add in different social networks (infographics)
• Amazon CEO to launch reusable launch vehicles at Cape Canaveral
• Digital Etiquette: Links instead of Email Attachments
• How to set up Facebook so as not to enrage?
• Why Facebook needs the Dislike button
• Porn - the engine of progress or How adult video has changed the world
• The twentieth anniversary of “Hackers”: how the film predicted the future as stereotypes
• How to cope with the flow of information on the Internet and not go crazy
• I am learning to program: 5 gaming code approaches
• How eSports conquers the world and why they invest money in it: investor report from the eSports Conference
• What you can learn from Airbnb, BuzzFeed, LinkedIn and YouTube early presentations
• Video: It looks like the iPhone 6s glare page created using WebGL (Realtime Reflections on the iPhone 6s Product Page)

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 .