The digest of interesting materials from the world of web development and IT for the last week No. 155 (April 6 - 12, 2015)

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

Web development

Motion Blur Effect with SVG
How to stop worrying and start living without Flash
Little non-obviousness in SVG patterns: in the wake of transformation-invisibility
Old SEO vs. new SEO: how the approach to search promotion has changed (infographics)
# DAMP, #FrontTalks section, video reports.
Developer Survey 2015 results on StackOverflow
Changes in the Google algorithm that determines the mobile site friendliness (Google Mobile Friendly Algorithm Change)
Grid - modern tools for working on content and design from Look at Media Modern
Coding carousel (Keeping it simple: coding a carousel)
HTML semantics for web content (Semantic HTML for Web Content)
Do not learn frameworks. Learn Architecture (Do Not Learn Frameworks. Learn the Architecture)
Ten Years of Git: Interview with Git Linus Torvalds (10 Years of Git: An Interview with Git Creator Linus Torvalds)
Fresh drafts of new web standards HTML5 Web Messaging , SVG2
Development of adaptive interfaces with test support (Visual Test-Driven Development For Responsive Interface Design)
Reducing the size of translucent images using Canvas (Reduce the size of transparent images through Canvas)
How to make an extension for Chrome in 10 minutes (How to Create a Chrome Extension in 10 Minutes Flat)
Adding a timeline to your Google Charts website (Add a Timeline to Your Website with Google Charts)
WebGL Basics (WebGL Fundamentals)
WebGL GLSL Shader Editor - addition to chrome for editing shaders
Spectacular web:
- A page divided in half by slide panels and having 3d opening effects. Created using Stylus and vanilla JavaScript.
- 3D Bold Navigation is an interesting concept of navigation that replaces one slide with another with the effect of distancing deep into
- Sara Soueidan's favorite works on CodePen (Sara Soueidan's Favorite CodePen Demos)

Web performance

The Path to Performance - a new podcast about site performance (with presenters Tim Kadlec and Katie Kovalcin)
Font Loading Techniques (Font Loading Techniques)
Improved performance when using non-standard fonts with Subsetting and Local Storage (Improved Font Performance with Subsetting and Local Storage)
Font loading with Font Events (Faster Font Events with Font Events)
More optimization techniques to improve site speed

CSS

Pure CSS3 Calculator
Spring CSS Working Group News
Beginner's Guide to Positioning the Background in CSS - Translation of an article “A Primer To Background Positioning In CSS” by the community css-live.ru
What no one tells you about "will-change" - Translation of the article "What nobody tells you about" will-change "" by the community css-live.ru
Flexbox CSS3 video tutorials: 1. FlexBox in practice , 2. FlexBox in practice 3. FlexBox properties , 4. Manage block sizes
Pure CSS adaptive tables (Responsive Tables in Pure CSS)
Sass Basics: Control Directives and Expressions (Sass Basics: Control Directives and Expressions)
Aesthetic Sass: Colors and Palettes (Aesthetic Sass: Colors and Palettes)
Moving and scaling SVG graphics using the viewBox attribute (Move And Scale SVG Graphics With The viewBox Attribute)
Canceling Native Gmail Mail Style Optimization (Override Gmail's Mobile Optimized Emails)
CSS3 Keyframes Animation Generator
Making media query mixes more flexible (Making our Media Query Mixins More Flexible)
CSS Font Sizing
MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes
Hampton Catlin - The Future of SASS (video podcast)

Javascript

Exploring JavaScript Symbols. Symbol - new data type in javascript , using symbols
The first version of the Matreshka.js framework has been released , 10 reasons to try Matryoshka , Matreshka.js: From simple to simple
Ionic framework. Ecosystem overview
Drawing an ellipse at an arbitrary canvas angle on javascript
RadioJS, Release 21 :: When io.js devoured joyent
Fighting asynchronous JavaScript. Promise and asynchronous programming templates. (Vladimir Dashukevich)
Interactive 8-bit JavaScript (demo with #fdconf)
ItemSlide.js - the next touch carousel
cta.js - cta (“Call to Animation”) - a small library for animating “action-to-effect” paths
Original jQuery code with annotations from its creator John Resig (The original jQuery source code, released Jan 14th, 2006 at BarCamp NYC)
Numerical analysis in Javascript
Deploying ES6 (Deploying ECMAScript 6)
ES5 code converter to ES6 (Upgrade your ES5 code to ES6)
Simplifying Asynchronous Coding with ES7 Async Functions Async Coding with Async in ES7
The mind-boggling universe of JavaScript Module strategies stunning universe of strategies for working with modules
Getting started with Node.js and Mocha (Getting started with Node.js and Mocha)
Straightening the Backbone-architecture: Lesson in event-driven UI development: Straightening our Backbone: A lesson in event-driven UI
Accelerate JS development with CoffeeScript (Accelerate Your JavaScript Development with CoffeeScript)
AngularJS-Boilerplate
Angular2 - First Impressions (Angular2 - First Impressions)
Ten JS libraries for drawing your own diagrams (including two paid ones) (10 JavaScript libraries to draw your own diagrams)
Detection of Minified JS Code (Detecting Minified JavaScript Code)
Practical development on TypeScript using Gulp (Practical TypeScript Development with Gulp and Sublime Text 3)
Autocompeter - a plugin for implementing a field with auto-prompts without dependencies (A really fast AJAX autocomplete service and widget)
Markdownify - Markdown editor in a browser with support for uploading images to the cloud
space.js - 3D scrolling effects using HTML attributes
black-hole.js - creating a black hole effect for an image
"Defender" by Keith Clark - 1023 bytes from JS1k2015

Browsers

Sites with interesting design and functionality

The main developer of the presidential site Kremlin.ru on the work on the resource
http://bonhommeparis.com/en/ - scroll effect
Apple Watch Review
twofold.com - automotive website with nice animation effects
Sites saturated with animation on the main page
20 sites with built-in modular grid
fabrica.it is a website with unusual use of background video and nice animation.
mirumagency.com is another example of a modern website.

Design

Understanding Web Design Trends
Product design: 20 most important materials per month
Apple Watch interface template, Bystronovsky's lecture, Material Design icons and 6 more design news.
Designer chose good fonts for interfaces.
4 more translated sections of the Material Design specification from Google: Reliable movement , Responsive interaction , Meaningful transitions , Pleasant little things . Translation from the community css-live.ru
A collection of true gifs about the work of designers and UX-specialists
Designers checklist advices - lists with the principles of work and the advice of designers
Resist the Redesign
Interview with Facebook product designer Kristina Varshavskaya (AMA with Facebook Product Designer, Kristina Varshavskaya)
Adobe Character Animator allows you to animate characters using your own face (Adobe Character Animator Lets You Animate With Your Face)
InVision offers rapid prototyping for mobile devices (Mobile prototyping for iOS and Android is now instant, and awesome)
Dear web designer, let's stop breaking the scrolling capabilities (Dear web designer, let's break the affordance of scrolling)
Five Things You Should Know When Designing For Apple Watch (5 Things You Need To Know)
Design of the Tower app for Yosemite (App Design on Yosemite)
Not suitable for printing: when a good design becomes bad (Not fit to print: When good design goes bad)
Fourteen rules for creating working CTA buttons (14 Rules for Creating CTA Buttons That Work)
How Grid Automates Web Design Without Killing The Designer
How to captivate an audience movement (How to Captivate Your Audiences with Motion)
Collection of design ideas about the expected speed of the interface (Collection of design insights is not perceived speed.)
Fall of the designer part 1: Fall of the Designer Part I: Fashionable Nonsense
Positioning the gradient in Photoshop (Photoshop's gradient positioning)
How to create custom brushes with mud stains in Photoshop (How to Create Custom Dirt and Decay Brushes in Adobe Photoshop)
Create a carnival effect on the text using the Appearance panel in the Illustrator (Create a Carnival Text Effect).
Quick Tip: Using Effects in Adobe InDesign (Quick Tip: Using Effects in Adobe InDesign)
Beautiful illustrations dedicated to the Game of Thrones by Ivan Belikov (Amazing Game Of Thrones Illustrations By Ivan Belikov)
Beauty and deformity in typography design (The Beauty and Ugliness in Type Design)
The best font families in the UI show up unnoticed (The best UI typeface goes unnoticed)
Font creation: Maximal - part 1 , part 2 (Making a Font: Maximal - Part I, Part II)

A selection of free designer cookies

Websites with free video (Free stock video websites)
Blurry Background Packs (25+ Awesome Blurred Background Packs For Designer)
Glitters - patterns and styles for photoshop (8 Free Glitter Effect Patterns & Styles for Photoshop)
Mockups for demonstrating logo design (55+ Free Logo Mockup PSD Templates For Designer)
Apple Watch Mokap Collection PSD (38+ Apple Watch Mockup PSD Templates Free Collection)
Fresh mock-ups for demonstration of business cards design (April 2015) (22 Fresh Free Business Card Mock-ups PSD Templates - April 2015 Edition)
Mockups of the latest Android and Windows devices for demonstrating application interface designs (99+ Latest Android and Windows Mockup PSD Templates)
UI Kit with Material Design (Freebie: Material Design UI Kit (PSD))
Ghost Ship Mobile UI Kit Free
Collection of vector and raster resources (Handy Graphic & Vector Freebies From 1001FreeDownloads)
Minimalistic everyday icons (minimalistic everyday icons)
Ego Icons with Personality (Ego. Icons With Personality)
Icons for Illustrator and Sketch on the theme of weekends and hobbies (Free Icons for Illustrator and Sketch App (SVG, AI, EPS, SKETCH))
Fifteen vector sets on various subjects (15 Free Vector Design Resources for Designers)
Four dozen fonts for April 2015: from Fabfelt Script to ORDNUNG (40 Amazing Free Fonts For Commercial Use - April 2015 Edition)
FAKEDES - decorative rounded outline font (FAKEDES - Free Font)
Hamster Script - italic font imitating brush-drawn poster font (Hamster Script (Free Font))
ATHENA - a decorative and geometric font family in a post-modern style (ATHENA - Post-modern Typeface)

news

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/255599/

All Articles