Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Новости и занимательное |
Веб-разработка
- Подкаст Веб-стандарты, Выпуск №18: Статьи для новичков, Reset или Normalize, jQuery и Bootstrap для дилетантов и админок, атомарный CSS, программирование на CSS, сервис-воркеры в Safari.
Ещё больше комфорта в разработке фронтенда с TARS
Почему мы рады тому, что не попали на themeforest
Нейронные сети, типографика и вёрстка: Дайджест интересных материалов о создании писем и работе с email на Хабрахабре- Понимание семантики. Перевод статьи Understanding semantics
- localForage: улучшенное офлайн-хранилище
- Progressive Web Apps:
- Регрессивные веб-приложения. Перевод статьи Regressive Web Apps
Прогрессивные веб-приложения: как мигрировать на HTTPS (Progressive Web Apps: How to migrate to HTTPS)
Прогрессивные веб-приложения и наш регрессивный подход (Progressive Web Apps and our regressive approach)
- Оптимизация производительности:
Анализ производительности web-приложений в 2016 году, Илья Климов, FrontendDevConf
Что веб-разработчикам нужно знать о будущем AMP (What Web Developers Need To Know About The Future Of AMP)
Как улучшить производительность страниц и выжать максимум из вашего хостинга (How to Improve Page Performance and Make the Most of Your Hosting)
Как сделать фавиконку маленькой и закешированной (How to Make a Favicon Small and Cacheable)
Оптимизация изображений: основные ошибки и решения (Image optimization: Common mistakes and solutions)
Способы, которыми вы можете указать браузеру, как и что нужно оптимизировать (Ways You Need To Tell The Browser How To Optimize)
- Accessibility:
Чеклисты WCAG 2.0
Доступность — это не о морали, а для широкой массы пользователей (It’s Not About Morals: Accessibility is for the Masses)
Как использование Yeoman изменило наш подход к работе (How Using Yeoman Changed the Way We Work)
Документация к проекту с Hexo Static Site Generator (Project Documentation with Hexo Static Site Generator)
5 клевых технологий Mozilla, о которых вы никогда не слвшали (5 More Awesome New Mozilla Technologies You’ve Never Heard Of)
Список всего, что может быть в <head>. Но, не делайте ваш <head> слишком жирным- Эффектный веб:
Radial SVG Slider
Multi-Layer Page Reveal Effects
Подборка интересных сайтов за июнь на css-tricks- Еженедельная подборка красивых эффектов на CSS/SVG/JS #40
CSS
Flexbox методов, о которых вы должны знать- Модуль генерируемого контента CSS3 обновился спустя 13 лет
- Вставляем разрыв строки. Перевод статьи Injecting a Line Break
- Аватары с рваными краями при помощи CSS clip-path
Представление свойства CSS clip-path (Introducing the CSS clip-path Property)- БЭМ
- Как работать с CSS-препроцессорами и БЭМ
Сражаемся с БЭМ: 10 основных проблем и способы их избежания (Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them)
Я (наконец) понял БЭМ (BEM I (finally) understand)
CSS в BBC Sport (часть 1)
Подробно о межстрочном расстоянии текста в CSS (CSS Text Line Spacing Exposed!)
CSS Модули: (CSS Modules: A review from the front-end)
Коллекция простых CSS Модулей 
История происхождения стандартных браузерных стилей и файлов сброса CSS (A wordy history of default browser styles and CSS Resets)
Улучшение CSS c помощью Parker (Improving Your CSS with Parker)
Не стройте систему сеток Bootstrap на флексбоксе (Don't build a Bootstrap style grid-system with Flexbox)
Flexbox: flex-direction:column. Путаница с колонками продолжается
At</>mic Docs — генератор стилей и менеджер Sass-компонентов
Создание анимированных заставок для видео используя спрайты (Building Animated Covers for Video with Sprites)
Ускорение Sass: архитектура в Sass (Jump Start Sass: Architecture in Sass)
ClosestColor — определяет похожие цвета
JavaScript
ООП в JavaScript
RxJS: реактивное расширение для фронтенд разработки
Запросы к Rest API из JavaScript компактно и красиво- Записи докладов с KharkivJS #6 2016
Front-end Гиперполиглот — сравнение одних и тех же фич, реализованных в шести фреймворках (React, Angular 2, Angular 1, Polymer, Vue, Ember) (Front-end Hyperpolyglot)- React:
- Погружение в React: Redux
- Погружение в React: контейнеры
«Building React Applications with Idiomatic Redux». 26 уроков от создателя библиотеки Дена Абрамова
Мультипликационное руководство по производительности в React. Доклад Lin Clark на react-europe 2016 (A cartoon guide to performance in React)
Начало работы с TDD в React (Getting Started with TDD in React)
22 интересных проекта с открытым кодом на React
- Angular:
Angular Attack: мой опыт участия в хакатоне
Angular 2 несёт мир в галактику фронтенда
Быстрая настройка хостинга для Angular 2 приложения с Angular CLI и GitHub Pages (Quick Angular 2 Hosting with the Angular CLI and GitHub Pages)
Архитектура приложений на AngularJS (AngularJS Application Architecture)
Angular Universal на практике — как создать дружественное к SEO одно-страничное приложение с Angular 2 (Angular Universal In Practice — How to build SEO Friendly Single Page Apps with Angular 2)
Создание простого мобильного приложения с NativeScript и Angular 2 (Build A Simple Mobile App With NativeScript And Angular 2)
WebPack и Angular 2
18 интересных проектов с открытым кодом на Angular
Как написать ваш собственных Virtual DOM (How to write your own Virtual DOM)
Почему вы не должны бояться TypeScript (Why You Shouldn’t Be Scared of TypeScript)
Репозиторий ванильного JS. Потому что иногда вы чувствуете себя виноватым, используя jQuery.
Определение движения с помощью JS (Motion Detection with JavaScript)
Прекращаем поддержку IE8: последствия для JS (Dropping IE8 Support: Consequences for JavaScript)
Легенда об операторе равенства в JS (The legend of JavaScript equality operator)
Async и Await (Async and Await)
Три типа прототипного наследования: редакция ES6+ (3 Different Kinds of Prototypal Inheritance: ES6+ Edition)
Регулярные выражения в JavaScript (Regular Expressions in JavaScript)
Плавная прокрутка в пять строк JavaScript (Smooth Page Scroll in 5 Lines of JavaScript)
Проектирование и создание собственной JavaScript библиотеки: подсказки и приемы (Design and Build Your Own JavaScript Library: Tips & Tricks)
Бесконечные коллекции с ES6 генераторами (Infinite collections with ES6 generators)
Правильное использование Google Maps JavaScript API (Harnessing the Google Maps JavaScript API the Right Way)- Плагины:
gDoc.js — использование Google Spreadsheets как CMS (gDoc.js — Use Google Spreadsheets as your CMS)
Pixel.js — software & hardware библиотека для создания больших интерактивных дисплеев
Представление Multirange: небольшого полифила для HTML5.1 слайдера с двумя ползунками (от Lea Verou) (Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders)
microlight.js — микро-библиотека для улучшения читабельности кода с помощью стилевых выделений
barba.js — библиотека для создания плавных переходов между страницами сайта (Create badass, fluid and smooth transition between your website's pages.)
Браузеры
- Opera Max пересек отметку в 10 миллионов пользователей и рассматривает внедрение платной подписки или ненавязчивой рекламы
- Выпуск Tor Browser 6.0
Тренды браузеров Июнь 2016: неудача Microsoft (Browser Trends June 2016: Microsoft Misfortune)
Повышаем уровень: создание нового браузера (Microsoft Edge) (Level Up: Building a Brand-New Browser)
Веб должен работать для каждого: Microsoft Edge и содержательный дизайн (The Web Should Just Work for Everyone: Microsoft Edge and Inclusive Design)
Что дальше для EdgeHTML (What’s Next for EdgeHTML)
Chrome 51: Intersection Observers, Passive Event Listeners и Credential Management API
Новости и занимательное
w3.org: Finishing HTML5.1 … and starting HTML 5.2- Xiaomi купит у Microsoft 1500 патентов и будет предустанавливать Office и Skype на свои смартфоны
- Google запустила инструмент оценки пригодности сайта для мобильных устройств
- Google опубликовал план действий по проекту AMP
- Computex 2016: итоги выставки и главные новинки
- 5 самых удивительных гаджетов Computex 2016
- Подразделение Google Boston Dynamics перейдёт к Toyota
- Instagram закрыл API для сторонних сервисов, позволяющих просматривать ленту и лайкать фотографии
- Instagram начнет платить пользователям за контент
- Проект GNU представил собственную платёжную систему GNU Taler
- Почему виртуальная реальность — это круто
- 15 серьезных фильмов о хакерской культуре и изнанке индустрии
- Alibaba слезам не верит: 5 крупнейших неудач Джека Ма и как он их преодолел
- «Все ошибки Tesla были обусловлены исключительно глупостью»
- IT компании помогают геномной медицине
- Быстрее, выше, слабее: Почему перфекционизм мешает развитию
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: Zfort Group
