Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Новости и занимательное |
Веб-разработка
Распространенные ошибки начинающего HTML-верстальщика- Почему я люблю работать с вебом. Рэми Шарп
- Frontend-разработчики должны быть в теме всего
- Подкаст Веб-стандарты, Выпуск №28: Новинки браузеров, триумф EdgeHTML 14, будущее сервис-воркеров, чистый и безопасный SVG, заливка текста и адаптивная вёрстка. Плюс расшифровка на GitHub
- Антиода фронтендерам
- Опыт масштабирования генератора статических сайтов
- Web Audio и объёмный звуковой ландшафт. Введение, Реализация
Два десятка веб-разработчиков, на которых можно подписаться в твитере (20 Web Designers and Developers You Should be Following on Twitter)- Подборка подкастов для разработчиков фронтенда (Top podcasts all front-end developers should follow)
- Крис Койер: что проносится в мой голове, когда я изучаю сайт (Chris Coyier: What Goes Through My Head When Exploring a Site)
- SVG:
- SVG-градиенты
- Новые свойства SVG 2
- «Practical SVG» — урок от Криса Койера на A List Apart
- Интервью с Nikos Andronikos, главой SVG WG
- Создание отзывчивого прогрессивного веб-приложения (Designing Responsive Progressive Web Apps)
- Руководство для новичков по отзывчивым веб-приложениям (A Beginner’s Guide To Progressive Web Apps)
- Google AMP: что это означает для мобильного SEO?
- Shadow DOM v1: автономные веб-компоненты (Shadow DOM v1: self-contained web components )
-
Я заглянул в директорию Node_Modules, и вы не поверите, что случилось дальше (I Peeked Into My Node_Modules Directory And You Won’t Believe What Happened Next) - Странный хак, позволяющий вынести курсор за пределы окна браузера
- Эффектный веб:
- Multi-Layout Slideshow
- Создание эффекта ластика с помощью HTML5 Canvas (Scratch-Off Reveal with HTML5 Canvas)
- Анимированный эффект distortion SVG/CSS/JS (Distorted SVG (animated))
- SnookSVG w/Polycleaner
- Трава в WebGL (WebGL grass)
CSS
- Взаимодействие между Javascript и CSS с помощью CSS-переменных
- Масштабирование CSS компонентов с помощью БЭМ, REMs и EMs (Scaling CSS Components with BEM, REMs, & EMs)
- Как хранить данные в списках Sass (How To Store Data In Sass Lists)
- Atomic Design – полное руководство по масштабируемому и модульному CSS (Atomic Design – Your Ultimate Guide to Scalable & Modular CSS (Sass))
- Достигаем плавной 60 FPS анимации с помощью CSS3 (Smooth as Butter: Achieving 60 FPS Animations with CSS3)
- Создание тем с помощью CSS4 Color (Building Themes with CSS4 Color Features)
- Создание анимации смайликов с реакциями в Facebook (Implementing Facebook’s Reaction Animation)
- Как использовать техники маскирования и обрезки CSS и SVG (How to use CSS and SVG clipping and masking techniques)
- Принудительное выделение текстового блока (Force Selection of Text Block)
- Руководство по стилям в Nextdoor
- CSS свойство will-change
- Предлагаемое свойство box-suppress (The proposed box-suppress property)
- Объемные интерактивные гистаграммы на CSS (3D Stat Bars in CSS)
JavaScript
- Композиция функций. Перевод статьи Function Composition: Building Blocks for Maintainable Code
- Функциональное тестирование JavaScript с помощью Nightwatch.js
- var const let: совет от Реми Шарпа
- Улучшения доступности для клавиатуры с помощью JavaScript (Keyboard accessibility improvements with JavaScript)
- Создание вашего первого приложения на Vue.js (Building Your First App With Vue.js)
- Состояние Vue (2.0 релиз кандидат) (The State of Vue)
- Оператор запятая в JS (Comma operator in JS)
- Полируем JavaScript код: избавляемся от старых хаков ES5 (Make your JavaScript code shine: knockout old ES5 hacks)
- JSON.is — документация для распространенных JSON-форматов (JSON.is — Open-source documentation for common JSON formats)
- Параллельность процессов в JS (Parallel Processing in JS)
- Анимированные многослойные гистаграммы с D3.js (Animated stacked bar charts with D3.js)
Текущее состояние Javascript — Jack Franklin (The State of Javascript — Jack Franklin | August 2016)- Cоздание собственного EventEmitter-а (Build Your Own EventEmitter)
- Фреймворки:
- Сколько дней прошло с момента релиза нового JavaScript фреймворка? (How Many Days Since the Last JavaScript Framework?)
- Angular 2 vs React — о чем разработчики часто забывают? (Angular 2 vs React – What Developers Often Forget?)
- Angular 2 релиз кандидат 5 (Angular 2 RC5 — NgModules, Lazy Loading and AoT compilation)
- Осмысление Redux (Making sense of Redux)
- Взгляд в будущее с React Native для веб (A Glimpse Into The Future With React Native For Web)
- Загрузка и манипуляции с изображениями с React (Image Upload and Manipulation with React)
- Черновик книги «React-просвящение» (React Enlightenment [DRAFT])
- Курс «Основы Angular 2» (Angular 2 Fundamentals)
- Angular 2 с примером приложения со SPQR (Angular 2 by Example)
- Изучение Ember.js с нуля: уроки, книги, и ресурсы для новичков (Learn Ember.js From Scratch: Tuts, Books, and Resources for Beginners)
- Настройка Flow с уже установленным Babel (Setting up Flow when you’ve already got Babel in place)
- Плагины:
- Scrollanim — CSS3/JavaScript библиотека для создания скролл-анимаций, работающих всюду
- Typr.js — Javascript парсер для работы со шрифтами (TTF, OTF). Альтернатива opentype.js.
- baffle.js — библиотека для шифровки и расшифровки текста в DOM элементах (baffle.js — a tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements.)
- Полифил для плавной прокрутки (smooth scroll polyfill)
Браузеры
- Тестирование Firefox 49-beta и Firefox Developer Edition 50
- Контент Flash начнет блокироваться по умолчанию в Chrome 53, который выйдет в следующем месяце
- Презентация Samsung Internet для разработчиков — нового веб-браузера для телефонов Samsung Galaxy и фаблетов
- FF Developer Edition 50: Console, Memory Tool, Net Monitor and more
- Что убрали в Chrome 53
- Chrome 53 Beta: Shadow DOM, PaymentRequest, and Android autoplay
- DevTools Digest, August 2016
- #EdgeBug: новая веб-платформа для отлова багов с помощью твиттера
- 13 из 13… Расширения для Microsoft Edge
Новости и занимательное
- Inbox от Gmail интегрировался с Google Alerts, Диском, Trello и GitHub
- MIT представил новый язык программирования
- Google развивает новую операционную систему Fuchsia
- Microsoft случайно забыла в коде режим отладки, позволяющий обойти UEFI Secure Boot
- Четверть разработчиков Сан-Франциско ищет работу за пределами Кремниевой долины — исследование Indeed
- Нейросеть научилась распознавать цензуренные изображения
- Работа мечты: в Google существует команда устраивающая внутри компании катастрофы
- Google представил целевые страницы в формате AMP
- Forbes составил очередной рейтинг из 100 самых богатых IT-деятелей мира
- От 1947 года до наших дней: куда двигается робототехника
- Смерть стартапа: Обзор самых заметных стартапов, закрывшихся в 2016 году
- Кибератаки: скрытая угроза и противодействие
- Проблемы карьерного роста в IT-компаниях
- Идеальный код
- Правила этикета для VR от Google
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
