Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Frontend Weekend» #44 – Константин Буркалев о создании SDCast и RadioJS и о том, как начать свой подкаст с нуля
•
Подкаст «Веб-стандарты», Выпуск №112: Новинки Firefox 59, SEO для JS, Webpack без SPA, Гудини для CSS, сортировка DOM, шрифты без лишнего.
•
Подкаст «Пятиминутка React» #42 — Джейк Арчибальд: В петле (JSConf.Asia 2018)
•
Подкаст «devschacht»: Ночной фронтенд #26 — Дебаты о статической типизации
•
Подкаст «Фронтенд Юность (18+)» Лёха в гостях у uWebDesign
•
Подкаст «Drinkcast» от SPB Frontend, «Грустный», о выгорании на работе
•
«ALL YOUR HTML» #40: «Decompiled animation from murmure.me website»
•
Простой статический сайт на Webpack 4
• CloudFlare представила стабильный релиз Workers для облачного администрирования веб-приложений на JavaScript
•
Изучаем Bootstrap 4 за 5 минут
•
Опрос Stack Overflow 2018: ИИ, этика и сексуальная ориентация
•
Font (ещё более) Awesome — знаковое изобретение
• Анимация без стереотипов
•
CSS в эпоху React: как мы променяли каскад на согласованность
•
CSS Grid Application Layout на продакшене
•
В блоге разработчиков Microsoft анонсировали скорую поддержку вариативных шрифтов в Microsoft Edge
•
Ресурс для поиска и тестирования вариативных шрифтов
•
Темизация с помощью переменных, глобальных и локальных
•
Магия ванильного CSS с помощью пользовательских свойств
•
Руководство по SEO JavaScript-сайтов: Часть 1. Интернет глазами Google, Часть 2. Проблемы, эксперименты и рекомендации
•
Подводные камни Service Workers
• Как сделать Drag-and-Drop загрузчик файлов на чистом JavaScript
• Три года с Angular и не жалею: обзор возможностей фреймворка
•
Сравнение главных JavaScript фронтенд фреймворков по состоянию на 2018
•
JavaScript vs. TypeScript vs. ReasonML
•
SmooshGate: продолжающаяся борьба между прогрессом и стабильностью в JavaScript
•
17 советов для написания производительного кода в JavaScript / node.js чтобы сделать ваши приложения быстрее
•
Вы можете создать нейронную сеть на JavaScript даже если вы на самом деле не понимаете нейросети
•
Подборка полезных советов и хитростей из ECMAScript 2015 (ES6)
•
MobX 4: лучше, проще, быстрее, меньше
• Релиз Firefox 59, подробности для разработчиков в блоге Марата Таналина
• В Google Chrome появится экспорт паролей
• В Firefox начнут бороться со всплывающими элементами страниц
• «Яндекс» выпустил «Яндекс.Браузер» со встроенной «Алисой»
• Когда появится следующий большой язык программирования с точки зрения Дарвина
• Каково это — работать в IT, если вам за 50
• Google начнёт блокировать рекламу криптовалют и ICO
• Скрытые майнеры распространяют через форки различных проектов на GitHub
• 23 сайта для практики хакинга
• Почему полезно читать любые отзывы пользователей
• Почему в Google сложно получить повышение и иногда проще уволиться
• Google открыла Google Maps API для игровых разработчиков
• Крупные американские компании больше не нуждаются в собственных дата-центрах и продают их Microsoft, Google и Amazon
• Голосовая помощница «Алиса» научилась управлять компьютером на Windows
?
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•

•

•

•

•

•

•

Веб-разработка
•

• CloudFlare представила стабильный релиз Workers для облачного администрирования веб-приложений на JavaScript
•

•

- Производительность:
•4 полезные подсказки по оптимизации изображений
•Почему производительность имеет значение. Заметка Jeremy Wagner в блоге разработчиков Google
•Как тестировать кастомную скорость соединения с помощью GTmetrix
•Улучшение производительности в 10 раз: оптимизация статического сайта
•Accelerated Mobile Pages: повышаем уровень конверсии
•Как интерактивный контент BBC работает в AMP, приложениях и вебе
- Инструменты:
•Ускорение сборки JavaScript-кода с использованием webpack 2–3
•Если вы когда-либо конфигурировали Webpack, Parcel снесет вам крышу!
•Continuous Development без нажатия Ctrl + R с помощью webpack 4
•emma-cli — вспомогательный терминал для нахождения и установки node пакетов.
- Accessibility:
•Как вы можете сделать ваш сайт более доступным
•Одностраничные приложения не доступны
•Подробный план по работе с веб-доступностью
•Полезные ресурсы на тему доступности
•Labels Required. Обстоятельная статья на filamentgroup о том, почему так важно использовать label
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #73
•Слайдшоу с глитч-эффектом
•Необычный концепт анимации ссылок
CSS
•

• Анимация без стереотипов
•

•

•

•

•

•

JavaScript
•

•

• Как сделать Drag-and-Drop загрузчик файлов на чистом JavaScript
• Три года с Angular и не жалею: обзор возможностей фреймворка
•

•

•

•

•

•

•

- Теория:
•Как работает JS: отслеживание изменений в DOM с помощью MutationObserver
• Как заменить все одинаковые подстроки в строке на JavaScript
• Приведение типов в JS. Магия или простые правила?
•Элегантные шаблоны в современном JavaScript: Ice Factory
VueJS:
•Хуки жизненного цикла Vue.js
•4 клевые вещи, которые вы можете делать с Vue.js CLI
•Использование JSX с Vue и почему вас должно это волновать
•Boiler — javascript фреймворк, использующий Vue и Sass
•vue-promise-btn — минималистичный, но мощный плагин для блокировки кнопок при выполнении асинхронных действий со встроенным спиннером
React:
•React Tutorial: подробное руководство по изучению React.js в 2018
• Reselect — библиотека селекторов для Redux
•Серверный рендеринг с помощью React и React Router
•Как GraphQL заменяет Redux
•Как не делать React: популярные антипаттерны и находки в React
•React Authentication в деталях
•Почему разработчики на React должны модулизировать их приложения?
- Libs & Plugins:
•Rough.js — создание графики со скетч-эффектом в канвасе
•driver.js — легкий движок без зависимостей для привлечения внимания пользователя при взаимодействиях со страницей
•filepond — продвинутая библиотека для выгрузки разных типов файлов
Браузеры
• Релиз Firefox 59, подробности для разработчиков в блоге Марата Таналина
• В Google Chrome появится экспорт паролей
• В Firefox начнут бороться со всплывающими элементами страниц
• «Яндекс» выпустил «Яндекс.Браузер» со встроенной «Алисой»
Занимательное
• Когда появится следующий большой язык программирования с точки зрения Дарвина
• Каково это — работать в IT, если вам за 50
• Google начнёт блокировать рекламу криптовалют и ICO
• Скрытые майнеры распространяют через форки различных проектов на GitHub
• 23 сайта для практики хакинга
• Почему полезно читать любые отзывы пользователей
• Почему в Google сложно получить повышение и иногда проще уволиться
• Google открыла Google Maps API для игровых разработчиков
• Крупные американские компании больше не нуждаются в собственных дата-центрах и продают их Microsoft, Google и Amazon
• Голосовая помощница «Алиса» научилась управлять компьютером на Windows
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
webschik
Спасибо за подборку!
Советую всем обратить внимание на статью о SmooshGate.