Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Новости |
Веб-разработка
- Подкаст Веб-стандарты, Выпуск №26: «Chrome 52, Safari и MathML, font-display, WebP и WebM, HyperTerm, книги, путь фронтендера.»
- AMP — что это и почему ускорение сайтов для мобильных нужно для SEO
- Что нового в WordPress 4.6?
- Карты Google Maps — вставка и оформление (стилизация) карт на свой сайт
- Доступные SVG. Перевод статьи Accessible SVGs
- Шпаргалка по GIT
Font Awesome SVGs — все иконки шрифта Font Awsome в виде SVG
Silo Buster — генератор разметки для оптимизации URL сайта под социальные сети и поисковую выдачу
Прогрессивные веб-приложения, которые ощущаются, как нативные приложения OS X (Progressive web apps running as native OS X apps)
Все о кастомных элементах HTML (All about HTML Custom Elements)
Почему наш сайт быстрее вашего: от оптимизации изображений, шрифтов и критического CSS до нюансов серверной настройки (Why our website is faster than yours)
Измерения влияния сервис-воркеров на производительность в реальном мире (Measuring the Real-world Performance Impact of Service Workers)
Добавьте оффлайн поддержку любому веб-приложению (Add offline support to any Web app)
Mobile CDN – повышение скорости доставки контента на всех устройствах (Speeding up Content Delivery on All Devices)
Оффлайн поддержка для Google Analytics с помощью sw-offline-google-analytics (Offline Google Analytics Made Easy: Using sw-offline-google-analytics)
Правильное использование элементов fieldset и legend с точки зрения доступности (Using the fieldset and legend elements)
Как выбрать подходящий формат изображений (How to select the perfect image format)
github-widget — виджет, отображающий детали GitHub аккаунта (github-widget — a widget showing your github details that you can easily embed in your portfolio website.)- Эффектный веб:
Необычный эффект погружения на сайте (Above & Beneath: Featured Content Layout Effect)
SVG слайдер с маскированием (Clipped SVG Slider)
Иллюзия жизни: пример SVG-анимации (The Illusion Of Life: An SVG Animation Case Study)
CSS
- Свойство background. Перевод статьи The Background Properties
- Языки, чуть было не ставшие CSS. Перевод статьи The Languages Which Almost Became CSS
Как и почему был создан стайлгайд для сайта Marvel (How and why we created the Marvel Styleguide)
Создание странцы, где полноширинный блок заключен в контейней ограниченной ширины (Full Width Containers in Limited Width Parents)
Ограничения стилей с помощью нового свойства contain можно уже попробовать в Хроме 52 (CSS Containment in Chrome 52)
Отзывчивый лайтбокс без использования JS (Responsive CSS Lightbox with No JavaScript)
Способы уменьшения кода при создании шаблонов писем (Reducing HTML Email Code)
Манипуляция цветами в Sass с помощью операторов и RGB функций (Manipulating Sass Colors With Operators And RGB Functions)
Создание объектно-ориентированного фронтенд-фреймворка с помощью BEM, SASS и OOCSS (Creating an Object Oriented front-end framework using BEM, SASS and OOCSS)
О современных возможностях создания отражения с помощью CSS (The State of CSS Reflections)
О способах использования свойства CSS writing-mode (CSS Writing Mode)
Ховер умер. Да здравствует ховер! (Hover is dead. Long live hover.)
Уроки, которые были получены из создания дружественных к мобильным устройствам отзывчивых таблиц (Lessons from building mobile-friendly, accessible data tables)
О написании и поддержке устаревшего CSS кода(Are you writing legacy CSS code?)
Angled Edges — SASS-примесь для создания SVG-фрагментов для срезанных углов секций (Angled Edges — a SASS mixin for creating angled edges on sections by dynamically encoding SVGs.)
Анимация цветового круга с помощью CSS (Color Wheel Animation with CSS Filters)
Создайте иллюзию загрузки элементов с помощью CSS, пока не подгрузится настоящий контент (Fake it 'til you Make it CSS)
JavaScript
Обновления: Релиз Aurelia 1.0, Релиз Ember.js 2.7 и 2.8 Beta, а также Анонс Meteor 1.4 — c обновленными Node и MongoDB- Запись трансляции MoscowJS Meetup 32
jQuery Foundation и стандарты (The jQuery Foundation and Standards)
Экранирование некоторых символов Unicode в регулярных выражениях (Unicode property escapes in JavaScript regular expressions)
Какие зависимости есть у популярных JS инструментов (What Do the Popular JavaScript Tools Depend On?)
Прагматичные советы по написанию модулей (Pragmatic Modularity)
Автоматическое исправление и форматирование вашего JavaScript с помощью ESLint (Auto-fixing & Formatting Your JavaScript with ESLint )
Улучшаем события скроллинга с помощью throttle (Quick Tip: How to Throttle Scroll Events)
Жизненный цикл переменных в JavaScript (JavaScript variables lifecycle: why let is not hoisted)
Неизменяемость против инкапсуляции (Immutability vs Encapsulation)- ES6:
- Знакомство с promises — одним из нововведений ES6
Большая шпаргалка по ES6 (How's your ES6?)
Почему важно сейчас всем комьюнити мигрировать на ES2015 модули (Why choose ES2015 modules, based on the state of the art of JavaScript modularization)
- Фреймворки:
React Gotchas
Производительность рендера компонентов в React (Component Rendering Performance in React)
Как анимировать элементы с помощью AngularJS (How to Animate elements using Angularjs)
Быстрый взгляд на React и Redux DevTools (A Quick Look at the React and Redux DevTools)
Interpose — инструмент, позволяющий использовать нативные переменные CSS в компонентах React 
bisheng — трансформация Markdown файлов в одностраничный сайт с React
Использование Angular для создания SPA (Using Angular for Single Page Applications (SPAs))
react-monocle — инструмент разработчика для визуализации иерархии компонентов React-приложений (react-monocle — a developer tool to visualize a React application's component hierarchy.)
Использование React Native для создания приложения для распознавания лиц (Use React Native to a Create a Face Recognition App)
Компоненты высшего порядка: паттерны проектирования React приложений (Higher Order Components: A React Application Design Pattern)
Создание React-приложений без конфигураций (Create Apps with No Configuration)
Стратегии обновления с Angular 1.x на Angular 2 (Angular 2 Upgrade Strategies from Angular 1.x)
- Уроки:
Музыка в JavaScript. Изучение Web Audio путем воспроизведения работ Steve Reich и Brian Eno (JavaScript Systems Music)
Делаем селфи с помощью JavaScript (Take a Selfie With JavaScript)
Урок: использование Redux с TypeScript и Angular 2 (Tutorial: Building Redux in TypeScript with Angular 2)
Создание JavaScript интерфейса командной строки (CLI) с Node.js (Build a JavaScript Command Line Interface (CLI) with Node.js)
- Плагины:
IZIMODAL — очередной jQuery-плагин для создания гибких отзывчивых модальных окон
MetricsGraphics.js — библиотека на базе D3 для визуализации данных, относящихся ко времени (MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data.)
box-js — инструмент для исследования вредоносных JS программ (box-js — a tool for studying JavaScript malware.)
Typography.js — библиотека для генерации типографических стилей (Typography.js — a powerful toolkit for building websites with beautiful typography.)
Браузеры
- В ночные сборки Firefox встроено дополнение FlyWeb
- В Firefox 49 будет прекращена поставка коммуникационного клиента Hello
- Доступны сборки Firefox без обязательной проверки цифровой подписи дополнений
Отключение автозаполнения в Chrome с помощью React (Turning Off Autocomplete in Chrome with React)
Псевдо-класс CSS :any-link уже работает в FF без префиксов (Firefox Site Compatibility — :any-link CSS pseudo-class has been unprefixed)
Лучшие расширения для Chrome для фрилансеров (The 10 Best Chrome Extensions for Freelancers)
Search Overflow — Расширение для Opera и Chrome для поиска по Stack Overfloww)
Новости
- В плагине WooCommerce, который используют миллионы сайтов, найдена уязвимость
- IEEE Spectrum опубликовал рейтинг языков программирования
- Microsoft уволит еще 2850 сотрудников
- Изменения в OneDrive, о которых вам нужно знать
- Verizon покупает Yahoo! за $5 млрд
- Неизвестный Dropbox: сервисы компании для пользователей, бизнеса и разработчиков
- Миссия на Марс обойдется компании SpaceX в $320 миллионов
- Топ-10 самых дорогих сделок в IT-индустрии
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: Zfort Group
