Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Новости и занимательное |
Веб-разработка
Собираем ваш первый WebAssembly-компонент
Важные аспекты работы браузера для разработчиков. Часть 1- Подкаст Веб-стандарты, Выпуск №22. Покупка Joyent, Element Queries, React в Mail.Ru, стандарты и семантика, собеседования, как верстальщику стать замтехдира c Андреем Суминым из Mail.Ru.
- Путь наставника. Статья Максима Усачева с развернутыми комментариями Алены Батицкой
- Создание интерактивного видео на HTML5
- Лучшие практики кэширования. Перевод статьи Caching best practices & max-age gotchas Джейка Арчибальда
AMP HTML, обзор
Как стать великим фронтенд {вставьте баззворд}? (How to be a great Front-End {insert buzzword}?)
Как инспектировать и модифицировать анимацию с помощью Chrome DevTools Animation Inspector.
Методы создания доступных интерфейсов (Ways to Make a UI Accessible — Part I)
В поисках времени для улучшения своих навыков разработчика (Finding Time to Become a Better Developer)
Dreamweaver возвращается для нас, кодеров. (Dreamweaver is back for us, coders.)
Website Grader — тестирование сайтов на предмет оптимизации (How strongis your website?)
Предзагрузка веб-шрифтов для игр на HTML5 (Web Font preloading for HTML5 games)
Имитация относительного позиционирования внутри SVG с вложенными SVG (Mimic Relative Positioning Inside an SVG with Nested SVGs)
Запись стрима с Web Rebels 2016: День 1, День 2 - Эффектный веб:
Стрелочные SVG-часы (SVG Working Clock)
Трансформирующиеся тетраэдры от Anna Tudor (tetrahedron truncation sequence)
Эффект заката с помощью прокрутки с JS и SVG (A Scrolling SVG Sunset)
SVG-анимация для появляющихся на странице элементов (Item Reveal Animations with SVG)
Эффектные концептуальные анимации для различных элементов интерфейса (How To Use Code As Your Primary Design Tool)- Еженедельная подборка красивых эффектов на CSS/SVG/JS #44
CSS
- Магия CSS. Глава 6: Переходы. Все, что вам нужно знать о переходах в CSS
Языки, которые могли бы стать CSS-ом (The Languages Which Almost Became CSS)
Битва архитектур. Взгляд на два популярных метода написания CSS, и объяснение, почему они не достаточно хороши (Battle of the architectures)
Взаимодействие между JavaScript и CSS c помощью нативных CSS переменных (Communicating Between JavaScript and CSS Using CSS Variables)
Демонстранция 16-ти эффектов смешивания средствами CSS
PostCSS — трансформация вашего CSS с помощью JS (PostCSS – Transforming Your CSS with JavaScript)
Переход в будущее CSS с PostCSS (Jump into the future of CSS with PostCSS)
Работа с критическим CSS с помощью плагина на PostCSS (Manage your Critical CSS with this PostCSS plugin)
Все типы данных в CSS (All the Generic CSS Data Types)
Представление CSS-свойства text-align-last (Introducing the CSS text-align-last Property)
История техник замены изображений с помощью CSS (A History of CSS Image Replacement)
Michelangelo Styleguide — живое руководство по стилям, базирующиеся на комментариях в коде
CSS-изображения, реализованные одним div-ом (A Single Div:)
Nth-child Sass Mixins
progress-tracker — гибкий SASS компонент для создания пошагового процесса заполнения форм, опросов, таймлайнов и т.п.
JavaScript
Нейронные сети на Javascript
D3.js. Визуализация графов- Все, что нужно знать о теге script
- Введение в функциональный JavaScript: Часть 3
- Новая игра для программистов появилась в Steam: управление виртуальным миром с помощью JavaScript
Автоматическое улучшение качества фронтенд проектов, ч.3 — JavaScript и Accessibility (Improving the Quality of Front End Projects, Automatically!)
Юнит-тестирование JavaScript для начинающих (JavaScript Unit Testing For Beginners)
Интеграция и сравнение ES6 (Integration and Comparison for ES6)
ES5 Objects vs. ES6 Maps – разница и сходство
Введение в асинхронный JavaScript (Introduction to asynchronous JavaScript)
Что необходимо знать, чтобы пройти собеседование по JavaScript, как ас? (What Do I Need to Know to Ace a JavaScript Interview?)
JavaScript паттерны: синглтон (JavaScript Design Patterns: The Singleton)
Создание массивов в JavaScript (Power up the array creation in JavaScript)
Реальные примеры использования Mutation Observer (Three Real-World Uses for Mutation Observer)
Что необходимо знать (и потенциально опасно) о сторонних скриптах (Things to Know (and Potential Dangers) with Third-Party Scripts)
Подсказки при наборе JS кода (Type Hinting in JavaScript)
DOMContentLoaded vs jQuery.ready vs onload, или как выбрать, когда ваш код должен выполниться- Фреймворки:
Введение в Redux (An Introduction To Redux)
Анимация интерфейсов с помощью React — правильный путь (UI Animations with React — The Right Way)
Библиотеки React UI (React UI Libraries)
Проектируем, используя концепции React (Thinking in React)
Использование JSX и React (Using JSX and React)
Назад в будущее, или получение данных в React.js (Forward to the Past or data fetching in React.js)
[ReactRouter] в чем разница между HashHistory и BrowserHistory? ([ReactRouter] BrowserHistory in Production)
react-modal-box — модальные окна для приложений (react-modal-box is a simple dependency free and customizable React Component to display Modals on your application)
NativeBase — мощное дополнение к React Native (NativeBase — the missing piece of React Native)
Урок по Angular 2: как создать CRUD приложение с 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 — неизменяемые объекты и массивы (crio — immutable objects and arrays in a natural way)
Браузеры
Никогда не сдавайся: как Netscape вел неравную борьбу с Internet Explorer- Браузер Chrome для Android получит поддержку виртуальной реальности
- В Firefox появились контейнеры
Браузерные тренды июля 2016
Улучшенная загрузка шрифтов в WebKit (Improved Font Loading)
Новости и занимательное
- Выпущен неофициальный консольный клиент для Stack Overflow
- Google запустила открытую hardware-платформу для обучения детей программированию
- Facebook запустил возможность публиковать посты на 45 языках одновременно
- Картографические сервисы Google обновились: качество снимков увеличилось
- Масштабная чистка аккаунтов в YouTube лишила блогеров сотен тысяч подписчиков
- Каждый пятый компьютер работает на Windows 10
- «Пять законов робототехники»: Google изложила свое видение безопасного ИИ
- «Со смертью кодинга инженеры повернутся лицом к остальной части человечества». Разработчик компании AnyPerks Лорен Мендоза написала на Medium заметку о том, что написание кода и профессия программиста переоценены и в будущем необходимость в них снизится.
- Стартапы, которые покупает Google: обзор сделок корпорации за последние 15 лет
- 9 новых технологий, которые вы можете освоить за лето и стать ценнее на рынке труда
- День, когда Evernote умер для меня и что теперь делать?
- Сотрудники Microsoft назвали главные преимущества и недостатки работы в компании
- Давид Хомак: Лекция про интернеты
- Диджитал джоинт: зачем Microsoft и остальные связываются с продажей марихуаны
- 10 названий технологических брендов, которые вы наверняка произносите неправильно
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: Zfort Group
