Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
< Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Занимательное |
Веб-разработка
- Подкаст Веб-стандарты, Выпуск №53: Релизы Safari, Chrome и Firefox, HTTPS и формы, новый клиарфикс, импорты в CSS, сервис-воркеры, история JS и фронтенд Сбертеха.
Front-End Developer Handbook 2017- 14 важных метрик производительности сайта, которые вы должны анализировать
- Каковы ваши мысли по поводу Accelerated Mobile Pages (AMP)? Разработчики делятся опытом
- Руководство для начинающих по Webpack 2 и сборке модулей
- Как мы создали свой собственный фронтенд фреймворк MarsMan (и зачем)
- Ответственное использоание HTTP/2: адаптация для пользователей
- Безопасность и доступность при открытии ссылок в новом окне
- Введение в световые фильтры SVG и источники света
- Основные команды скринридеров для тестирования доступности
- Filament Group: поддержка доступности в отзывчивом мире
- Инструменты для работы с вебом, созданные в Mozilla
- История редизайна Smashing Magazine от Sara Soueidan
MageConf 2016: «Web accessibility: код, способный сделать мир лучше», «WebVR: текущее состояние и обзор»
CSS
- Опубликовано новое официальное определение CSS (CSS-2017)
- Варианты «clearfix-хака» и его замен: сводная таблица
- Как работает Flexbox — объясняем на больших, красочных GIF’ках
- Сила цветовой CSS-функции rgba()
- CSS Grid Layout:
- CSS Grid включены по умолчанию в Chrome M57
- developers.google.com: CSS Grid – табличная разметка возвращается. Be there and be square.
- developer.mozilla.org: Что такое grid layout?
- Отладка гридов стандартными средствами Firefox Dev Tools
- Как работает calc()
- Коллекция направляющих для популярных CSS сеток
- Как создать эффект наведения, зависящего от направления
- Создание доступных чекбоксов и радиокнопок на чистом CSS
- Более читаемый CSS с помощью кастомных свойств CSS
- Карманный справочник по графике и анимации на CSS
- CSS псевдо-классы: :not() и :target
- Runway — онлайн-генератор стайлгайдов по CSS
- Tuesday.css — «самая горячая» библиотека для CSS анимации на текущий момент
- CSSRooster — бот, который пишет классы CSS для HTML с помощью Deep Learning
JavaScript
Пятничный JS: как вдохновиться Smalltalk'ом и попасть в ад- Обратные вызовы на примере списка домашних дел
- 17 нововведений jQuery 3 и советы по их использованию
- Получил навыки по Node.js? Скоро появится официальная служба сертификации.
- Нативные модули ECMAScript: новые свойства и отличия от модулей Webpack
- Краткая история JavaScript: часть 1, часть 2, часть 3
- Руководство для начинающих по переменным и типам данных в JavaScript
- Отступ — это враг: пиши более простой JavaScript
- ES2015+:
- Обещание бутербродной вечеринки (альтернативное введение в JavaScript promise)
- Книга Exploring ES2016 and ES2017
- Новинки ES7 и ES8
- async/await с ES6 генераторами и промисами
- Видеоурок «ES6 стрелочные функции с тремя упражнениями»
- В JavaScript наконец будет правильное асинхронное программирование
- Vue:
- 5 идей Vue.js, которые вы полюбите (даже если React вас полностью устраивает)
- OpenLecture #2017.1 — Let's Vue!. Запись лекции Ильи Климова на канале Javascript.Ninja
- Серия статей «Intro to Vue.js» на css-tricks:
Rendering, Directives, and Events, Components, Props, and Slots , Vue-cli and Lifecycle Hooks , Vuex , Animations - Keen UI — легковесная колекция основных UI компонентов, написанных на Vue.js и вдохновленных Material Design
- avoriaz — утилита для тестирования Vue.js
- Angular:
- Следующая версия Angular — это Angular v4
- Классы Angular 2+ с NgClass и NgStyle
- Angular в реальном мире: часть 1: это не TODO список!, часть 2: это мир Material!
- React:
- Настройка окружения React с помощью webpack и Babel
- Как создавать, тестировать и деплоить React приложения в 2017
- Что происходит, когда используется RxJS в React?
- Когда вам нужна библиотека Flux? Объяснение на примере с машиной
- CRAFT: создать React App From Template
- react-redux-grid — React таблично/древовидный компонент, написанный с помощью паттерна Redux
- Libs & plugins:
- Mithril 1.0.0 — еще одна современная библиотека для создания SPA
- gotoem — копирование в буфер обмена для современных браузеров (меньше 1Кб)
- sixflix — определяет поддержку ES6 в среде c помощью алгоритма Netflix
- vanilla-tilt.js — версия Tilt.js без jQuery
- json-to-js конвертор
Браузеры
- Microsoft теряет позиции на рынке настольных браузеров, а Chrome продолжает исполнять свой победный марш
- Специалисты Google рассказали об оптимизации рендеринга в Chrome
- Одноклассники и Mozilla выпустили спецверсию Firefox
- Microsoft демонстрирует новые возможности браузера Edge в обновлении Windows 10 Creators Update
- Google открыл Chrome для iOS и планирует открыть Google Earth Enterprise
- Chrome лишился средств для отключения модуля с поддержкой DRM
Занимательное
- sudo rm -rf, или Хроника инцидента с базой данных GitLab.com от 2017/01/31
- Компания Microsoft представила виртуальную файловую систему для Git
- Игровой режим в Windows 10 – что это и зачем он нужен
- ZDNet: В 2017 году Microsoft выпустит «облегчённую» Windows 10 для конкуренции с Chrome OS
- Google открыл API теста на дружественность мобайлу
- Пять IT-компаний, которые больше не требуют диплом от кандидатов на работу
- У Apple рекордная выручка и новый рекорд продаж iPhone, но Несмотря на финансовые успехи, стоимость бренда Apple упала на $38 млрд
- Рынок планшетов сокращается девятый квартал кряду
- Илон Маск, Стивен Хокинг и сотни других экспертов подписали список из 23 принципов развития ИИ
- Mozilla закрыла проект Firefox OS и уволила разработчиков системы
- Как IT-компании пиарились на указе Трампа об иммигрантах
- «Я тестирую устройства в своём воображении, тратить на это деньги просто глупо»
- Искусственный интеллект надругался над лучшими в мире игроками в покер
- Работа за компьютером в старости снизила риск «умеренной деменции»
- «iPhone не займет значительную долю рынка»: худшие предсказания о техническом прогрессе
- Доля обращений по HTTPS среди пользователей Firefox превысила 50%
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
< Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
Поделиться с друзьями
Комментарии (10)
ksgr
06.02.2017 10:00Ну вот, опять на неделю чтива! Как всегда огромное спасибо. И вообще мне кажется что за последние месяцы стало больше интересных статей по фронтенду — у людей появилось больше понимание, больше новых мыслей о том как «должно быть».
vetash
07.02.2017 00:39+1>Mozilla закрыла проект Firefox OS и уволила разработчиков системы
>Одноклассники и Mozilla выпустили спецверсию Firefox
:(
ht-pro
07.02.2017 10:19Отличный дайджест!
Все сразу осилить — времени не хватит, но в течении недели это исправляется.
ТС молодец)
ipavlenko
Касательно ссылки 5 идей Vue.js, которые ..., по ссылке сказано, что Vue предлагает style, template и script для компонента держать в одном файле. На самом деле не так. Никто не мешает у этих тегов написать src и указать правильное место. vue-loader достаточно умный, чтобы разобраться. Кроме этого, можно адресовать несколько стилей отдельными тегами style.
omfg
Так я и написал «рекомендует», никто не спорит, что это можно делать другими способами :)
ipavlenko
Честно говоря, я не вижу в документации такой рекомендации.
В документации есть «If you prefer splitting ...» относительно src.
Вам спасибо за статью!
Популяризация Vue очень хорошо!
Честно говоря, потому и поправляю.
Без src в тех тегах Vue выглядит как игрушка.
А уже с ними — годится для промышленной разработки.