Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Новости |
Веб-разработка
- Подкаст Веб-стандарты, Выпуск №19 : Семантика CSS и HTML, содержимое в CSS, полезное для SVG, веб и приложения.
- Что должен знать html-верстальщик?
- С какими сервисами сталкивается frontend-разработчик на фрилансе? Интервью с Антоном Немцевым
- Прогрессивные веб-приложения:
Прогрессивные веб-приложения — давайте не будем повторять ошибок, которые были в начале становления отзывчивого дизайна - PWA Discovery: вы еще ничего не видели (PWA Discovery: You Ain’t Seen Nothin Yet)
- Проблемы и задачи разработчиков при работе с PWA (Developers Surface Issues And Concerns With Progressive Web Apps)
- Не стоит безответственно использовать мета-теги iOS для ваших веб-приложений (Don’t use iOS meta tags irresponsibly in your Progressive Web Apps)
- Инструменты:
- Дополнение в Chrome для валидации ваших AMP страниц
- Отладка JavaScript с помощью Chrome DevTools Breakpoints
- Отладка потребления памяти с помощью веб-инспектора в Safari (Memory Debugging with Web Inspector)
- DevTools Digest: DevTools в 2016-м и после него
- Как Mozilla помогает разработчикам разбираться с JavaScript ошибками (Helping web developers with JavaScript errors)
- Что нового в Shadow DOM v1 (в примерах) (What's New in Shadow DOM v1)
- Bootstrap 4: визуальное руководство и обзор нововведений (Bootstrap 4: A Visual Guide)
- Автоматизируйте вашу разработку с помощью Gulp JS (Automate your Workflow with Gulp JS)
- CloudFlare представляет cf-ui — открытый UI фреймворк
- Почему онлайн-хостинг SVG так сложен и как его делать (Why Hosting SVG Online Is Hard (… and How to Do It))
- О свойствах и атрибутах в контексте задания маски с помощью SVG (More About SVG Masking — Properties And Attributes)
- MIND Patterns — книга о доступности от eBay
- Важность Code Review (The Importance of Code Reviews)
- Погружение в Git: ветки в Git-е (Jump Start Git: Branching in Git)
- Уникальные градиенты, построенные по данным для визуализаций с d3.js (Data-based and unique gradients for visualizations with d3.js)
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #41
CSS
- Новый черновик CSS-модуля псевдоэлементов 4 уровня
- Магия CSS. Глава 3. Таблицы. Перевод главы из сборника The magic of CSS
- Семантический CSS. Перевод статьи Semantic CSS Джонатана Снука
- CSS Grid Layout и позиционированные элементы. Перевод статьи CSS Grid Layout and positioned items
- Битва с БЭМ: 10 самых распространенных проблем и способы их решения (часть 1)
- Избегайте переопределения базовых стилей (Avoid Overstyling Base Styles)
- Резиновый список на Flexbox со страницы AMP Roadmap
- AOS: библиотека для реализация CSS-анимаций при скролле страницы
- Интерактивная визуализация данных: анимация viewBox (Interactive Data Visualization: Animating the viewBox)
- 4 свойства, которые меняют наш способ использования CSS (4 features transforming how we use CSS)
- Рационализация функционального CSS (Rationalizing Functional CSS)
- Как создать разметку для сайта новостей с Flexbox (How to Build a News Website Layout with Flexbox)
- Быстрый совет: как z-index и Auto Margin работают во Flexbox (Quick Tip: How z-index and Auto Margins Work in Flexbox)
- CSS специфичность (CSS Specificity)
- EQCSS — библиотека-расширение к CSS для работы с Element Queries
- Изучи Sass (курс в codeacademy) (Learn Sass)
- Sass Deprecate — Sass-миксин, который сигнализирует об устаревшем коде (Sass Deprecate)
- Китайский текст отображается с разными размерами и шрифтами: шрифтовые проблемы в Китае
JavaScript
Асинхронность в JavaScript: Пособие для тех, кто хочет разобраться- jQuery 3.0 Final Released
- Введение в функциональный JavaScript: Часть 1
-
Видео с ReactEurope 2016: Day 1 , Day 2 - 7 удивительных «свойств» JavaScript (Seven Surprising JavaScript 'Features')
- Шокирующий секрет о статических типах (The Shocking Secret About Static Types)
- TypeScript, WTF?!
- Я ошибался относительно TypeScript, и вот почему (I Was Wrong About TypeScript, Here is Why)
- Делаем ваш JavaScript чистым (Making your JavaScript Pure)
- Создание объектов в JavaScript: паттерны и лучшие практики (JavaScript Object Creation: Patterns and Best Practices)
- Web Storage: меньшее зло для токенов сессии (Web Storage: the lesser evil for session tokens)
- Создание собственной системы тэгов с нуля (Make your own tagging system from scratch)
- Зачем нужен key в default props (ReactJS)
- lernajs — инструмент для управления мульти-пакетными проектами на JavaScript
- ES6:
- Модули ES и Node.js: тяжелый выбор (ES Modules and Node.js: Hard Choices)
- Почему существуют классы ES6 (Why do ES6 Classes exist and why now?)
- 10 функций Lodash, которые могут быть заменены с помощью ES6 (10 Lodash Features You Can Replace with ES6)
- Промисы: все неверные способы (Promises: All The Wrong Ways)
- Когда не стоит использовать стрелочные функции (When 'not' to use arrow functions)
- 6 советов для более чистых js промисов (Six tips for cleaner javascript promises)
- Фреймворки:
- Как добавить ReactJS в существующее веб-приложение
- Директивы Angular и их аналоги на React (Angular Directives Mapped to React)
- Использование React Native: год спустя (Using React Native: One Year Later)
- Масштабирование React.js приложений (Scaling React.js Applications)
- trixly — универсальный стартовый пакет для Angular 2 и React, с тестами на Mocha & Chai, TSLint-валидацией и компиляцией в ES5 c Babel (trixly — Universal TypeScript starter kit for Angular 2 and React, tests in Mocha & Chai, TSLint for better code quality, transpilation to ES5 by Babel for compatibility)
- Проверочный лист для код ревью Angular-приложений (Angular Code Review Checklists)
- Всестороннее погружение в хуки Angular 1.5 lifecycle (Comprehensive dive into Angular 1.5 lifecycle hooks)
- Уроки:
- «Герой Node» — урок по юнит-тестированию Node.js (Node Hero — Node.js Unit Testing Tutorial)
- Создание Real-time приложений с Websockets и событиями отправляемыми сервером (Building Real-time Apps with Websockets & Server-Sent Events)
- Создание приложения видео чата на базе WebRTC с PeerJS (Building a WebRTC Video Chat Application with PeerJS)
- Как сделать существующий API real-time с FeathersJS (Make your existing API real-time with FeathersJS)
- Плагины:
- chillout.js — уменьшаем использование CPU JS-ом с помощью асинхронных итераций
- lodash-bound — включает функции цепочки lodash с ES bind (::) синтаксисом
- is.js — минималистичная библиотека для проверки данных
- seen.js — рендер 3D сцен в SVG или HTML5 Canvas. (Render 3D scenes into SVG or HTML5 Canvas.)
Браузеры
- Ресайз картинок в браузере. Все может стать еще хуже
- Релиз Firefox 47, Технические подробности о релизе для веб-разработчиков
- Тестирование Firefox 48-beta и Firefox Developer Edition 49
- Выпуск браузера Opera 38, Что нового в Chromium 51 и Opera 38
- В Chrome 51 наблюдаются проблемы с невозможностью использования HTTP/2
- В стабильной версии Opera 38 появился режим энергосбережения, снижающий температуру ноутбука на 3 градуса
- В Firefox запланировано включение по умолчанию многопроцессного режима
- Началось открытие исходных текстов WebGL-движка браузера Microsoft Edge
- Браузер «Яндекса» обзавёлся персональной лентой рекомендаций «Дзен»
Новости и Занимательное
- Яндекс внес изменения в обработку файла robots.txt
- Google: у рекламы на AMP-страницах более высокие показатели видимости и CTR
- Google обвиняют в манипуляциях в пользу Хиллари Клинтон
- Развиваем дизайнерское чутье
- В Индии запретили делать Street View по соображениям национальной безопасности
- «ВКонтакте» начала принудительный перевод пользователей на новый дизайн
- Какие стартапы любят европейские инвесторы: топ-20 лучших проектов на TNW Europe 2016
- Хакер, сливший данные MySpace, LinkedIn и Tumblr, продает 379 млн аккаунтов Twitter
- «Десятка» любой ценой: почему не пошла Windows 10?
- Google Play Music научился подбирать «правильную» музыку, соответствующую текущему моменту
- Весь мир — карта проблем энергетики
- Как фанат «Звездных войн» придумал языки народов «Игры престолов»
- Почему я отказался от $500 000, разозлил инвесторов и закрыл стартап
- Мы вас внимательно слушаем. Даниил Туровский — об уязвимости, позволяющей вскрыть почти любой мобильный телефон
- Вибромотор смартфона можно использовать как микрофон для прослушки пользователей
- Бессмертные спамеры: Почему «нигерийские письма» всё ещё работают
- Влюбиться в робота: как технологии меняют отношения
- Линейка для квазара. Как измеряют расстояния в космосе и почему иногда их приходится пересматривать
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
