Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда
Веб-разработка |
CSS |
Javascript |
Браузеры |
Новости и занимательное |
Веб-разработка
Я заглянул в папку node_modules, и вы не поверите, что произошло
- Подкаст Веб-стандарты, Выпуск №29: Похороны Flash, Samsung Internet, книга «Секреты CSS», цветовые функции, SVG, курсор для кнопки. В гостях — Роман Комаров
- Ревью верстки: 10 полезных замечаний и советов
- Вышел в свет WordPress 4.6 “Pepper” с оптимизированным управлением плагинами и темами
10k Apart — конкурс на создание полноценных сайтов или веб-приложений, ограниченных размером в 10Kb и функционирующих без JS. Работы оценивают Sara Soueidan, Rachel Andrew и другие
Нужно писать меньше чертова кода, советует нам фрилансер Heydon Pickering (Writing Less Damn Code)
Средняя веб-страница (результат анализа 8 миллионов веб-сайтов) (The Average Web Page (Data from Analyzing 8 Million Websites))
Как предотвратить повторяющиеся атаки на Ваш сайт (How to Prevent Replay Attacks on Your Website)
Скрытая сила компонентов шаблонов Handlebars (The hidden power of Handlebars partials)
Обрезка миниатюрных изображений с помощью SVG (Cropping Image Thumbnails with SVG)
Вещи, которые я выучил об отзывчивом дизайн шаблонов писем (Things I've Learned About Responsive Email Design)
- API:
- Мониторинг веб-приложений
Оффлайн хранилище для прогрессивных веб-приложений (Offline Storage for Progressive Web Apps)
Что такое API на человеческом языке (What is an API? In English, please.)
Что нового в Web Audio? (What’s new in Web Audio?)
Улучшаем пользовательский интерфейс с web audio (Jazz up your user interface with web audio)
- Доступность:
Делаем доступность великой опять: аудит сайтов кандидатов в президенты США на доступность (Making Web Accessibility Great Again: Auditing the US Presidential Candidates Websites for Accessibility)
Начни создавать доступные веб-приложения сегодня. Серия бесплатных уроков на egghead (Start Building Accessible Web Applications Today)
- Производительность:
Практический пример по ускорению клиентской производительности (A Case Study on Boosting Front-End Performance)
HTTP/2 делает загрузку медиа файлов на мобильных устройствах в 3-15 раз быстрее (HTTP/2 makes media loading 3–15 times faster on mobile)
- Анимация:
- Мыльные пузыри на SVG
Сравнение различных техник веб-анимации на примере прыгающего мячика (Comparing web animation techniques by showing how to bounce a ball with each one)
Когда использовать Web Animations API (When to Use the Web Animations API)
Анимация олимпийских колец с gsap (Olympic Rings)
Забавная интерактивная форма отзыва покупателя (для магазина животных)
Презентация нового типа анимации в Isotope — Staggering Animations
- Генераторы:
Staticman — приложение на Node.js, загружающее пользовательский контент в репозиторий GitHub. На практике это позволяет вам иметь динамический контент, типа комментариев под постом в блоге, как часть статического сайта на Jekyll
Настройка живого руководства по стилю в Jekyll (Setting up a Living Styleguide in Jekyll)
nucleus — генератор стилей на nodejs. Приложение парсит SCSS файлы и берет информацию из аннотаций DocBlock
CSS
Как по маслу, или анимируем со скоростью 60 FPS на CSS 3
Трёхпозиционный checkbox (aka tristate) без скриптов и смс
- Полезные соображения насчет курсоров по умолчанию
Готов ли уже Houdini? (Is Houdini ready yet‽)
Bootstrap vs Foundation – топ 2 CSS фреймворка
Использование Feature Queries (supports) в CSS (Using Feature Queries in CSS)
Вы можете изобрести свой собственный странный язык с помощью атрибутов и их селекторов (You can kinda invent your own weird design language with attributes and attribute selectors)
Предложенное свойство box-suppress (The proposed box-suppress property)
Свойство `font-display` для масс (`font-display` for the Masses)
Анимация увеличения фоновых изображений (Zooming Background Images)
Новая техника для гибкой типографики, позволяющая манипулировать размерами в заданном промежутке (Flexible typography with CSS lock)
Как создать макет с CSS Grid Layouts (How to create a simple layout with CSS Grid Layouts)
Тридцать один способ сокращения времени на ручное кросс-браузерное тестирование (31 Ways to Spend Less Time on Manual Cross–Browser Testing)
Шпаргалка по стилями для React Native (React Native Styling Cheat Sheet)
UnCSS Online! — сервис убирающий неиспользуемый CSS-код (UnCSS Online!)
Harry Roberts | CSS для программистов и для CSS разработчиков | CSS Day 2016 (Harry Roberts | CSS for Software Engineers for CSS Developers | CSS Day 2016)
JavaScript
Прогрессивная загрузка web-приложения с помощью разделения кода
JavaScript: где мы сейчас и куда двигаться
JavaScript выходит за пределы Web в 2015 году
Зачем нам jQuery?
Да, вы должны изучить ванильный JavaScript перед тем, как иметь дело с js фреймворками (Yes, You Should Learn Vanilla JavaScript Before Fancy JS Frameworks)
Полируем JavaScript код: избавляемся от старых хаков ES5 (часть 2) (Make your JavaScript code shine: knockout old ES5 hacks (Part 2))
Живой урок погружения в ES2015 (A Live Lesson in Diving into ES2015, with Darin Haener)
Быстрый совет: что такое factory функции в JavaScript (Quick Tip: What Are Factory Functions in JavaScript)
Загадочная и таинственная монада Maybe в JavaScript (The Marvellously Mysterious JavaScript Maybe Monad)
Скорость загрузки и выполнения маленьких модулей (The cost of small modules)
Укрощение цепочек промисов с глубоким вложением (Untangling Deeply-Nested Promise Chains)
100+ эмуляторов, написанных на JavaScript (100+ Emulators Written in JavaScript)
Демо с распознаванием нарисованных цифр, использующее GPU и нейронную сеть (GPU Deep Learning Demo)
Введение в Service Workers (An Introduction to Service Workers — JS Monthly London)
Уходим в оффлайн с Service Workers (Emanuel Kluge: Go Offline with Service Workers — JSUnconf 2016)
JavaScript электроника на Pi Zero (JavaScript Electronics on the Pi Zero — Async Brighton)
- Фреймворки:
- Работа с Redux: введение
Aurelia 1.0: как создать простое приложение с авторизацией (Aurelia 1.0: How to build a simple secured application)
Пишем JavaScript фреймворк — оценка кода песочницы (Writing a JavaScript framework — Sandboxed code evaluation)
Восход функционального программирования и закат Angular 2.0 (The rise of functional programming & the decline of Angular 2.0)
Remy Sharp: что такое React?
React для дизайнеров (React for designers)
react-roadmap — дорожная карта изучения React (react-roadmap — a curated list of free resources to master React Development)
Представление React Native Ubuntu (Introducing React Native Ubuntu)
Архитектура React Fiber (React Fiber Architecture)
Десять обязательных для изучения функций RxJS с примерами (10 Need-to-Know RxJS Functions with Examples)
Все о $q и промисах в Angular (All about $q and Promises in Angular)
От ng-controller к классам компонентов (From ng-controller to Component Classes)
- Плагины и библиотеки:
WAUD.JS — библиотека для работы с Web Audio с фоллбеком до HTML5 аудио
hy-phen — библиотека для выставления дефиса при переносе слов
Papa Parse — мощный парсер CSV (Papa Parse — the powerful, in-browser CSV parser for big boys and girls)
react-dates — доступная, готовая к переводам, оптимизированная под мобильные библиотека для выбора дат в React-приложениях
Recharts — библиотека для построения компонуемых графиков для React (Recharts — a composable charting library built on React components)
Браузеры
- Спасти рядового Edge: новый план Microsoft
- Mozilla экспериментирует с добавлением в Firefox средства для обмена скриншотами
- Из Firefox 47+ удалена поддержка colspan=0
- В Google Chrome для Android появятся рекомендации
- Баг в Chrome и Firefox позволял подменить URL, используя арабские символы
- Почему я так и не смог начать пользоваться Microsoft Edge
WebVR 1.0 появилась в Firefox Nightly (WebVR 1.0 available in Firefox Nightly)
Странные браузеры @ Webworker NRW — презентация Niels Leenheer о мире существующих браузеров
Google и Microsoft повышают ставки на HTML5 в браузерах (Google and Microsoft beefing up HTML5 bet for browsers)
Новости и занимательное
- Facebook выложил в открытый доступ исследования в области искусственного интеллекта
- Презентация высокопроизводительной микроархитектуры Zen, или как AMD испортила праздник на улице Intel
- Вред соперникам и пользователям: Антивирус Касперского обманывал конкурентов, «заражая» безопасные файлы: Reuters
- Веб-разработка: поезд ушел, а пассажиры остались? Обширное исследование рынка веб-разработки в 2016 году от Рейтинга Рунета & CMS Magazine.
- Лучшее с Gamescom 2016: косплей
- Мнение Дурова о редизайне ВКонтакте и ответ разработчиков
- Intel анонсировала шлем, который совмещает виртуальную и дополненную реальность
- Пять лет без Джобса: глава Apple Тим Кук говорит о будущем и проблемах компании
- Почему Windows так и не стала лидирующей мобильной платформой
- Как полностью исчезнуть из интернета (инфографика)
- Стажировка в Facebook: зарплата, льготы, бесплатное жилье и доступ к любому проекту
Вот твоя жизнь в Силиконовой долине (This is Your Life in Silicon Valley)
Mozilla занимается ребрендингом (Mozilla Open Design branding without walls)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: Zfort Group