Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Занимательное
•
Подкаст «Веб-стандарты», Выпуск №117: Sketch в Avocode, новые операторы в ES, флоаты, флексы и гриды, кастомные элементы форм, стиль кода в React, трюки с прокруткой.
•
Подкаст «Frontend Weekend» #49 – Алексей Куреев про React Native, жизнь в Амстердаме и собеседование в Facebook
•
Подкаст «Frontend Weekend» #48 – Вова Барсуков о переезде в Берлин и о том, как перейти из frontend-разработки в консалтинг
•
Подкаст «Девшахта», Ночной фронтенд #31: Новая книга Дяди Боба
•
Подкаст «Фронтенд Юность (18+)»: Выпуск на колёсах: Реакт для тупых
•
Подкаст «Фронтенд Юность (18+)»: From Amsterdam with love: Javascript — основа программирования
•
Подкаст «CSSSR», Выпуск 1: Второй пилот новостного подкаста.
•
«ALL YOUR HTML» #45: «Полосатые объекты на кривых и шейдерах»
•
Moscow SPA Meetup #4, 4 видео
•
Render Conf 2018, 15 видео
•
JSConf AU 2018cd h, 15 видео
• Поисковая оптимизация сайтов, использующих SPA-приложения
• Хочу стать frontend разработчиком: базовые знания и план обучения
•
Design Checklist для креативных веб-дизайнеров и упорных фронтенд-разработчиков
•
Когда следует игнорировать 'mobile-first'
•
Выбираем отзывчивый фреймворк для верстки писем:?MJML vs. Foundation for Emails
•
Замена анимированных GIFs на Video
•
Создание эффекта панорамирования для SVG
•
packagephobia — узнай цену добавления каждой новой зависимости в проект
• Фокусы со стилями для фокуса
•
Взгляд на единицы вьюпорта в CSS
•
Руководство по CSS переменным
•
Хей хей `font-display`
•
Лучшие практики для CSS Grid Layout
•
Почему не использование CSS каскада является проблемой?
•
Свайп вьюпорта с помощью CSS Snap Points: создание эффективной мобильной навигации
•
1 HTML элемент + 5 CSS свойств = Магия!
•
Создание плавной последовательной анимации с помощью Sass
• Ошибка в JavaScript-классе привела к генерации уязвимых ключей для криптокошельков
• Grasshopper – бесплатное ПО от разработчиков Google, обучающее основам программирования на JavaScript через мини-игры
•
Побег из ада async/await
•
SvelteJS: Релиз второй версии
•
Чего ожидать от Node.js 10
•
Проектирование очень больших (JS) приложений
•
Как компоненты выиграли “войну фреймворков”. React vs Angular vs Vue: почему это не имеет значения
•
Точка зрения: Angular обречен, React OK?—?вы заслуживаете лучшего
• Релиз web-браузера Chrome 66
• Amazon выпустил свой мобильный браузер
• На GitHub появились новые инструменты для разработчиков open source проектов
• Intel предлагает использовать GPU для защиты от малвари
• Google закрыла возможность использовать свой домен в качестве прокси
• Google замораживает Allo и делает ставку на Chat
• Переводчик Microsoft с ИИ научился работать без Интернета
?
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Занимательное
Медиа
•

•

•

•

•

•

•

•

•

•


•


Веб-разработка
• Поисковая оптимизация сайтов, использующих SPA-приложения
• Хочу стать frontend разработчиком: базовые знания и план обучения
•

•

•

•

•

•

- Производительность:
•Mission Critical: оптимизация CSS для CDN
•<link rel=”prefetch/preload”> в webpack
•Оптимизация производительности JS: обзор
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #76
•Исследование солнечной системы на CSS
•Креативный слайдер в научном стиле
•Погружение в матрицу
CSS
• Фокусы со стилями для фокуса
•

•

•

•

•

•

•

•

JavaScript
• Ошибка в JavaScript-классе привела к генерации уязвимых ключей для криптокошельков
• Grasshopper – бесплатное ПО от разработчиков Google, обучающее основам программирования на JavaScript через мини-игры
•

•

•

•

•

•

- Руководства:
•Простое руководство по ES6 итераторам в JavaScript с примерами
•JS декораторы: что это и когда их использовать
•Десять функциональностей Lodash которые можно заменить используя ES6
•Быстрый старт ESLint — ищем ошибки автоматически
VueJS:
•Добавление индикаторов загрузки в приложение на Vue.js
•Создание превью продукта в стили Amazon на Vue.js
•Создание собственного Vue.js роутера, руководство в четырех частях
React:
•9 советов по улучшению качества кода React-приложений
•React Lazy Images — компоненты и утилиты для ленивой загрузки изображений в React.
•Что такое компоненты высшего порядка в React?
•React SPA с модулями React-Router и React-Transition-Group
Angular:
•Angular — Все доклады с ng-conf 2018
•Универсальный стартовый набор для Angular 6, основанный на @angular/cli с SSR и HMR
•Введение в роутинг в Angular 5
- Libs & Plugins:
•PicoJs — нахождение лица в видео
•Slugify — преобразователь строки (URL, имени файла и т.д.) в строку, разделённую тире
•Маска для полей ввода для React, Angular, Ember, Vue, и ванильного JavaScript
Занимательное
• Релиз web-браузера Chrome 66
• Amazon выпустил свой мобильный браузер
• На GitHub появились новые инструменты для разработчиков open source проектов
• Intel предлагает использовать GPU для защиты от малвари
• Google закрыла возможность использовать свой домен в качестве прокси
• Google замораживает Allo и делает ставку на Chat
• Переводчик Microsoft с ИИ научился работать без Интернета
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (8)
slavanchikus
23.04.2018 10:59Огромное спасибо за подборку!
Специально зарегался дабы оставить комменатрий :)
JSmitty
23.04.2018 12:23Ребята, вы потеряли смысл в переводе «Точка зрения: Angular обречен, React OK?—?вы заслуживаете лучшего» — так как статья называется «Point of Vue: Angular is doomed, React is OK?—?We deserve better» (Vue.js — третий фреймворк в рамках статьи).
alexzfort
23.04.2018 13:43Да, это было сделано умышленно. Был вариант либо так, либо вообще не переводить, либо пояснения в скобочках :) Мы пошли по пути наименьшего сопротивления, но готовы заменить текст на любой адекватный альтернативный вариант
ht-pro
Спасибо за подборку.
alexzfort
Спасибо, что читаете