July 3, 2016 at 22:51The digest of fresh materials from the world of the front-end for the last week No. 218 (July 27 - 3, 2016)
We bring to your attention a selection with links to useful resources and interesting materials from the frontend area
We apologize for any typos or broken / duplicated links. If you notice a problem - please write in a personal email, we try to quickly fix them.
Last week's digest .
Material prepared dersmoll and alekskorovin .
| Web development |
| CSS |
| Javascript |
| Browsers |
| News and entertaining |
Web development
Build your first WebAssembly component- Important aspects of the browser for developers. Part 1
- Podcast Web Standards, Issue No. 22 . Buying Joyent, Element Queries, React at Mail.Ru, standards and semantics, interviews, how to make up a layout designer with Andrey Sumin from Mail.Ru.
- Mentor's Way . An article by Maxim Usachev with detailed comments by Alena Batitskaya
- Create HTML5 Interactive Video
- It’s not a matter of moral principles: everyone needs accessibility . Translation of the article It's Not About Morals: Accessibility is for the Masses community css-live.ru
- Best caching practices . Caching best practices & max-age gotchas Jake Archibald article translation
AMP HTML Review- How to become a great frontend {insert buzzword}? (How to be a great Front-End {insert buzzword}?)
- How to inspect and modify animations using the Chrome DevTools Animation Inspector.
- Methods for Creating Accessible Interfaces (Ways to Make a UI Accessible - Part I)
- Finding the time to improve your skills Developer (Finding Time to Become a Better Developer )
- Dreamweaver is back for us coders. (Dreamweaver is back for us, coders.)
- Website Grader - website optimization testing (How strong is your website?)
- Preloading web fonts for games on the HTML5 (the Web preloading the Font for the HTML5 games)
- Simulated relative positioning within nested SVG SVG (Mimic Relative Positioning Inside an SVG with Nested SVGs)
Web Rebels 2016 Stream Recording: Day 1 , Day 2- Spectacular web:
- Turnout SVG-hours (SVG Working Clock)
- Transforming tetrahedrons from Anna Tudor (tetrahedron truncation sequence)
- Scrolling sunset effect with JS and SVG (A Scrolling SVG Sunset)
- SVG animation for items appearing on the page (Item Reveal Animations with SVG)
- Spectacular conceptual animations for various interface elements (How To Use Code As Your Primary Design Tool)
- Weekly compilation of beautiful effects on CSS / SVG / JS # 44
CSS
- CSS magic. Chapter 6: Transitions . All you need to know about CSS transitions
- Languages That Could Be CSS (The Languages Which Almost Became CSS)
- The battle of architectures. A look at two popular CSS spelling techniques, and an explanation of why they're not good enough (Battle of the architectures)
- Interaction between JavaScript and CSS c using native CSS variables (Communicating Between JavaScript and CSS Using CSS Variables)
- Demonstration of 16 CSS blending effects
- PostCSS - Transforming Your CSS with JavaScript
- The transition to the future with CSS PostCSS (Jump Into the future of CSS with PostCSS)
- Working with critical CSS with the PostCSS plugin (Manage your Critical CSS with this PostCSS plugin)
- All data types in CSS (All the Generic CSS Data Types)
- Presentation of CSS-properties-the align-text for last (the Introducing the CSS text-the align for last-the Property)
- The history of image replacement techniques using the CSS (A History of the CSS Image Replacement)
- Michelangelo Styleguide - A live style guide based on code comments
- CSS images implemented by a single div (A Single Div :)
- Nth-child sass mixins
- progress-tracker - a flexible SASS component for creating a step-by-step process of filling out forms, surveys, timelines, etc.
Javascript
- Javascript Neural Networks
- D3.js. Graph visualization
- Everything you need to know about the script tag
- Introduction to Functional JavaScript: Part 3
- A new game for programmers appeared on Steam: managing the virtual world using JavaScript
- Automatic improvement of the quality of front-end projects, part 3 - JavaScript and Accessibility (Improving the Quality of Front End Projects, Automatically!)
- Unit testing JavaScript for beginners (JavaScript Unit Testing For Beginners)
- Integrating and comparison ES6 (Integration and ES6 for Comparison)
- ES5 Objects vs. ES6 Maps - Differences and Similarities
- Introduction to the Asynchronous JavaScript (Introduction to asynchronous JavaScript)
- What you need to know in order to pass an interview in JavaScript, as an ace? (What Do I Need to Know to Ace a JavaScript Interview?)
- JavaScript Design Patterns: The Singleton
- Creating arrays in JavaScript (Power up the array creation in JavaScript)
- Real-world use cases of Mutation Observer (Three Real-World Uses for Mutation Observer)
- Necessary knowledge and potential dangers associated with third-party scripts (Things to Know (and Potential Dangers) with Third-Party Scripts)
- Tips for typing JS code (Type Hinting in JavaScript)
- DOMContentLoaded vs jQuery.ready vs onload, or how to choose when your code should execute
- Frameworks
- Introduction to Redux (An Introduction To Redux)
- Animating Interfaces with React - The Right Way (UI Animations with React - The Right Way)
- The UI library the React (the React the UI the Libraries)
- Designing using React concepts (Thinking in React)
- Using JSX and React (Using JSX and React)
- Back to the future, or getting data in React.js (Forward to the Past or data fetching in React.js)
- [ReactRouter] what is the difference between HashHistory and BrowserHistory? ([ReactRouter] BrowserHistory in Production)
- react-modal-box - modal windows for applications (react-modal-box is a simple dependency free and customizable React Component to display Modals on your application)
- NativeBase - a powerful addition to React Native (NativeBase - the missing piece of React Native)
- Angular 2 tutorial : how to create a CRUD app with Angular CLI (Angular 2 Tutorial: Create a CRUD app with Angular CLI)
- Angular 2 – лучшие практики повышения своего уровня (Angular 2 – Best Practises to Level Up)
- Быстрая кросс-платформенная разработка с Angular 2 CLI (Rapid Cross-Platform Development with the Angular 2 CLI)
- Подготовка Angular 2 приложения для продакшена (Building an Angular 2 Application for Production)
- Плагины:
- Введение в разработку jQuery плагинов (Introduction to Developing jQuery Plugins)
- anime-js — новая библиотека для анимации, которая работает с CSS, индивидуальными трансформациями, SVG, атрибутами DOM и объектами JS
- Vidage — решение для полноэкранного видео и изображения (Vidage — your solution to full-screen background video & image combined)
- crio - immutable objects and arrays in a natural way)
Browsers
- Never give up: how Netscape waged an unequal battle with Internet Explorer
- Chrome browser for Android will receive support for virtual reality
- Containers appeared in Firefox
- Browser Trends July 2016
- Improved font loading in WebKit (Improved Font Loading)
News and entertaining
- Unofficial console client for Stack Overflow released
- Google launched an open hardware platform for teaching children programming
- Facebook launched the ability to publish posts in 45 languages simultaneously
- Google map services updated: image quality increased
- Large-scale cleaning of accounts on YouTube deprived bloggers of hundreds of thousands of subscribers
- Every fifth computer runs on Windows 10
- «Пять законов робототехники»: Google изложила свое видение безопасного ИИ
- «Со смертью кодинга инженеры повернутся лицом к остальной части человечества». Разработчик компании AnyPerks Лорен Мендоза написала на Medium заметку о том, что написание кода и профессия программиста переоценены и в будущем необходимость в них снизится.
- Стартапы, которые покупает Google: обзор сделок корпорации за последние 15 лет
- 9 новых технологий, которые вы можете освоить за лето и стать ценнее на рынке труда
- День, когда Evernote умер для меня и что теперь делать?
- Сотрудники Microsoft назвали главные преимущества и недостатки работы в компании
- Давид Хомак: Лекция про интернеты
- Диджитал джоинт: зачем Microsoft и остальные связываются с продажей марихуаны
- 10 названий технологических брендов, которые вы наверняка произносите неправильно
We apologize for any typos or broken / duplicated links. If you notice a problem - please write in a personal email, we try to quickly fix them.
Last week's digest .
Material prepared dersmoll and alekskorovin .