The digest of interesting materials from the world of web development and IT for the last week №209 (April 25 - May 1, 2016)

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

Web development

CSS

Javascript

Browsers

Design

news

Web development

Perfect HTTP performance
Podcast Web Standards Release 13 : SpiderNode, VPN, CSS methodologies, Stylelint and CSSX, parallax, accessibility.
Collection of relevant English-language podcasts on web development
Detailed introduction to the BEM methodology on toptal (Introduction To BEM Methodology)
Video from Fronteers Spring Conference 2016 , divided into blocks Visual Performance , Accessible Performance and Technical performance
Video from the FrontTalks section at DUMP-2016
Productive client-side - recording of the report of Roman Paradeev
Sara Soueidan on how to switch from an icon font to a SVG (Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG)
Tools and resources for editing, converting and optimizing SVG (Tools And Resources For Editing, Converting And Optimizing SVGs)
DOM features you didn't know about (DOM Features You Didn't Know Existed)
Detailed description of the work to improve the performance of the site in Google PageSpeed (Hands On Improving Google PageSpeed)
Fifteen fundamental laws of software development (15 Fundamental Laws of Software Development)
Styleguide - Style Guide for Brands (Living Styleguide Made Easy)
Webpack boilerplate
Google's V8 JavaScript engine started to support WebAssembly , Quick tip: how to use WebAssembly in a browser today
Jam API - a service that allows you to turn any site into JSON accessible api using CSS selectors
How JPG Works (How JPG Works)
Detailed review of video standards and capabilities on the web (HTML5 Media Source Extensions: Bringing Production Video To The Web)
Spectacular web:
- Creating “The Aviator”: animating simple 3D scenes with Three.js
- About the animation "fave" on Twitter
- CSS Animated Sphere
- Creating animated markers on a Google map with CSS and JavaScript (Creating Animated Google Map Markers with CSS and JavaScript)
- Weekly selection of beautiful effects on CSS / SVG / JS # 35

CSS

Future CSS
Pure CSS games with counter-increment property . Translation of the article by Yuny Kravets Pure CSS Games with Counter-Increment by the community css-live.ru
Tiled layout on pure CSS . Translation of an article HOW TO: Pure CSS masonry layouts on prgssr.ru
Sass data types
Revised Subgrid Specification (A Revised Subgrid Specification)
Working with images in style sheets using PostCSS (Working with Images in Stylesheets with PostCSS)
Improving CSS quality with PostCSS (Improving the Quality of Your CSS with PostCSS)
Visual Regression Testing with CSS Regression Testing with CSS Blend Modes
diffee - defining visual differences using CSS blend modes
How flexbox relieves pain in some front- end development sites (How flexbox alleviates some common front end development pains)
5 Flexbox Techniques You Should Know About (5 Flexbox Techniques You Need To Know About)
An example of using CSSX - vanilla CSS in JS
Moving from HTML Grid Systems to CSS Grid Systems
Quick Tip: Using CSS Counters with Styles for Numbered Lists (Quick Tip: Using CSS Counters to Style Incremental Elements)
How to do layout for card design with Semantic UI (How to Design Rich Card-Based Layouts with Semantic UI)
Why Node Sass will break your code and SemVer (Why Node Sass broke your code and SemVer)

Javascript

Node.JS v6.0 released
V8: ES6, ES7, after them
Pitfalls in the transfer of JSON in JavaScript
ES6: reflection from inside
JavaScript transporters: what is it, why do we need them? (JavaScript Transpilers: What They Are & Why We Need Them)
A look at ES6 Maps (A Look at ES6 Maps)
Making Iframes Responsive (Making IFrames Responsive)
Let's study closures in JavaScript (Let's learn JavaScript Closures)
Effective use of JavaScript closures (Use JavaScript closures efficiently)
Tessel 2: easy integration of the Internet of Things and JavaScript (Tessel 2: Pairing JavaScript and the Internet of Things with Ease)
How to log JavaScript errors on the client side (How to Log Client-Side JavaScript Errors)
Latest Airbnb Developer Blog Post : Turbocharged JavaScript refactoring with codemods (Turbocharged JavaScript refactoring with codemods)
Being a JavaScript developer is not Candy Land (Being a JavaScript Developer is no Candy Land)
Avoiding JavaScript Monocultures (Avoiding a JavaScript Monoculture)
Prototype Object Oriented Programming with JavaScript (Prototypal Object-Oriented Programming using JavaScript)
JavaScript testing: unit tests vs functional tests vs integration tests (JavaScript Testing: Unit vs Functional vs Integration Tests)
How many npm users are there? (how many npm users are there?)
View yakbak: Record and play HTTP interactions in NodeJS (Introducing yakbak: Record and playback HTTP interactions in NodeJS)
Standardizing JavaScript styles (JavaScript Standard Style)
Framework:
- BEM React Components
- You may not need a javascript framework (you probably don’t need a javascript framework)
- Current and next JS frameworks that can be monitored in 2016 (Up-and-coming JavaScript frameworks)
- Three lighter alternatives to React: Preact, VirtualDom and Deku (3 Lightweight React Alternatives: Preact, VirtualDom & Deku)
- Why use React? (Why use React?)
- How to make a good structure React applications? (How to organize your React applications?)
- AlphaBeta - declarative split testing for React (AlphaBeta - declarative split testing for React)
- Supervised collection of React / Redux links (React / Redux Links)
- Redux Immutable Reducer
- Key concepts of Angular 2 (THE CORE CONCEPTS OF ANGULAR 2)
- Angular 2 ESNext Starter - starter package for development with ES6 / ES7, Babel (Angular 2 ESNext Starter)
- Using Cross-Platform Applications with Angular 2 (Creating Cross-Platform Apps with Angular 2)
Plugins
- algebrite - a library for solving problems in algebra, written in JavaScript (algebrite - Computer Algebra System in Javascript)
- grafi.js - JavaScript Image Processing Library
- es-search - search by code structure using CSS-like selectors (es-search - search ECMAScript structurally)
- Enumish - creating Enum-like objects

Browsers

Sites with interesting design and functionality

julie poignot is a cute designer portfolio site
sugar.vision is a nice site with conceptual design and scrolling animation.
misplaced.design - a site with organized chaos in design
Cool sites with horizontal scrolling
Beautiful website designs for churches (40 Beautiful Church Website Designs)
gameandfishfacts.com - cute website with background video and flip animation
madebyfew.com - page with successful use of parallax
Lookbook 2016 - vertical scrolling site with parallax, interesting effects and animation
bizpoint.com is a new social network with an unobtrusive design and claims for Yelp laurels (so far only within Turkey)

Design

Web sites continue to use “dark patterns”: interfaces designed to deceive
Yandex Font - Yandex Sans
More details about the creation of Yandex Sans in the blog of one of the authors
Ya.Subbotnik for designers - broadcast recording
Why Facebook design is exactly the same and how decisions are made within the company
5 UX ways to get your design right.
Indicators of progress in mobile UX-design
Buttons in design systems: 12 tips Buttons in Design Systems
Friendly Guide to Colors in Information Visualization (Your Friendly Guide to Colors in Data Visualization)
This interface is a (good) joke (This Interface is A (Good) Joke!)
10 recent innovations in web design for your inspiration (10 Recent Innovative Web Designs For Your Inspiration)
Analysis of the effectiveness of the hamburger menu in web design (Analyzing the Effectiveness of the Hamburger Menus in Web Design)
Expert Opinions: Does Flat Web Design Make It Boring? (Experts Weigh In: Is Flat Design Making The Web Boring?)
Can a design be “right”?
125 tips to optimize your site's usability (125 Easy Tweaks to Optimize Your Website)
How to develop an effective login form design (How to design effective login forms with great UX)
Five ways to improve design presentations (5 ways to improve your design presentations)
Why tooltips are terrible and why they should be used for products (Why tooltips are terrible ? )
Five mistakes to avoid when creating a user interaction design (5 Mistakes to Avoid When Designing Micro-interactions)
Design debugging
Facebook Camera Application Concept (Facebook Camera)
April Update Adobe Experience Design CC (April Update of Adobe Experience Design CC)
Designers: don't give the chance to make mistakes too easy (Designers: Don't make it too easy to mess up)
Prototyping of the load indicator using Principle (mac) (Prototyping a circular closer indicator using using Principle for mac)
Coca-Cola unveiled new packaging design (Coca-Cola Unveils New Global Packaging)
How to make the best design apps for notes (Designing a Better Notes App)
Authorization Form Design Process (Designing UX Login Form and Process)
Web designers, can you speak the web language? (Web designers, can you speak web?)
April search for resources: how about adding Fedora to your CV? (Sourcehunt Design April: How About Fedora to Your CV?)
How to animate portrait photos using Photoshop Actions (How to Relight Portraits With These 6 Dramatic Photoshop Actions)
New logo for Guinness by Design Bridge (New Logo for Guinness by Design Bridge. Putting the Harp in Sharp)
Color Lisa - color palettes of the best artists

A selection of free designer cookies

Vector clipart dedicated to work
Free textures presented to us by nature
Wyre: many templates for creating site maps (Wyre: Web Layout Flowcharts)
Set UI in PSD format Chat App UI Kit (Free Chat App UI Design Kit PSD)
Avital: a set of UI for mobile iOS applications (Avital: Free UI Kit For Mobile Apps)
Mockups for design demonstration (10+ Free High Quality PSD Mockups)
A set of icons with a flat design on the theme of design (Download 36 flat graphic design icons — free!)
Icons set on hotels and spa theme (Freebie: Hotel And Spa Icon Set (55 Icons PNG, SVG))
Montano - a handwritten font (Montano was a font for the skillshare class, which later turned into a digital font.)
Romantic handwritten font Mightype (Mightype Hand Lettering Font - Free Download)
Quish - a handwritten hand font (Quish is a handwritten display typeface)
FONTEA - a plug-in for using seven hundred Google-fonts in Photoshop

News and 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/282836/

All Articles