Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Пятиминутка Angular» #8 — Retrospection, AngularKiev, RxJs lettable operators, Ng 5.2/6.0
•
Подкаст «Frontend Weekend» #37 – Захар День о том, как и где научиться кодингу
•
Подкаст «Веб-стандарты» Выпуск №105: Новинки браузеров, Bootstrap 4, WebStorm и CSS, БЭМ для начинающих, ненужный атрибут title, выражения от контейнера, Веб-стандарты на Литресе, миру мир.
•
Подкаст «Фронтенд Юность (18+)»: #35 Веб-стандарты на максималках
•
Подкаст «devschacht»: Ночной фронтенд #19?—?Промисы и таймауты, immutable.js
•
«ALL YOUR HTML» #33: «Анимация косых фонов на PIXI.js и clip:rect»
•
3 видео с MinskJS Meetup #3 (25 января 2018)
•
Чему мы научились, делая приложения с Веб Компонентами
• Вы освоили азы JavaScript. Но что дальше?
•
Психические заболевания в веб индустрии
•
Часть 2: как остановить меня от собирания номеров кредитных карт с ваших сайтов
•
Интерактивные письма с помощью SVG и SMIL
•
Анимация градиентной топографии
•
Соглашения по именованию CSS-сущностей и экономия времени
• Fun Frontend: мониторим страницу без JS
• Снова о CSS Box Alignment (свойствах для выравнивания всего): простая шпаргалка
•
Использование CSS Clip Path для создания интерактивных эффектов
•
Презентация CSS Gridish: опенсорсный инструмент, который поможет вашей команде использовать CSS Grid уже сегодня
•
В защиту Utility-First CSS
•
Объяснение CSS Grid за 7 минут (с диаграммами и кодом)
•
CSS Scroll Snap: что это? Нужно ли нам это?
•
Анимационный эффект расходящихся волн на CSS3
•
Может ли в JavaScript конструкция (a==1 && a==2 && a==3) оказаться равной true?
•
JavaScript в 2018 – что изучать?
•
Топ 10 ошибок JavaScript из 1000+ проектов (и как их избежать)
•
Быстрое введение в Styled Components с интерактивными примерами
•
The WHY behind the WAT: объяснение странной системы типов JavaScript
•
Ещё большее ускорение WebAssembly: новый потоковый и многоуровневый компилятор в Firefox
•
Релиз Firefox 58, технические подробности от Марата Таналина
•
Firefox 58 получил очередной прирост производительности и поддержку Progressive Web Apps для Android-версии
•
Выпуск web-браузера Chrome 64
•
Google предлагает экспериментальную функцию по добавлению 3D объектов дополненной реальности в браузеры
•
Браузер Google Chrome научился навсегда отключать звук на сайтах с автоматически включающимися видеороликами
•
Adblock Plus: Встроенный в Google Chrome блокировщик будет блокировать только 16% рекламы
•
Техничекие подробности Safari Technology Preview 48
•
SEO для Google в 2018: хорошо забытое новое
• Как блокчейн изменит способы хранения документов об образовании
• GitHub объявил о поддержке создания нескольких шаблонов Issue и Pull request
• Adobe выпустила новую версию Photoshop с поддержкой ИИ
• Главные технологические тренды в 2018 году
• Microsoft покажет пользователям, какую информацию собирает о них Windows 10
• Разработчик-ветеран Google обвинил компанию в подражании конкурентам и объявил об уходе
• Спасибо, Twitch: как зарабатывать сотни тысяч долларов, играя в видеоигры
• Мошенники смогли разместить на YouTube рекламу с кодом для майнинга криптовалюты
• Facebook открыл код платформы Detectron для распознавания объектов на фотографиях
• Facebook изобрела новую единицу времени — «щелчок»
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
Веб-разработка
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
• Вы освоили азы JavaScript. Но что дальше?
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- AMP/PWA:
•PWAs приходит в iOS 11.3: Купертино, у нас проблема
•Улучшит ли AMP ваши рейтинги? Как организовать тестирование AMP
•Новые примеры успешного использования AMP
•Процессинг форм на страницах AMP с помощью Amazon API Gateway и AWS Lambda
- Инструменты:
•Релиз Parcel v1.5.0: Source Maps, WebAssembly, Rust и многое другое
•Релиз webpack 4 beta?—?попробуй его сегодня!
•webpack 2017: обзор случившегося за год
•Multiple routes, бандлинг и lazy-loading с помощью webpack
•Руководство по Webpack 4: все, что вам нужно знать, с 0 Conf до Production Mode
•karmatic — простое автоматическое (headless) браузерное тестирование на Karma, Webpack & Jasmine.
- Accessibility:
•Доступность писем в действии
•Понимание WCAG 2.1 – обзор критериев и условий для мобильных устройств
•Практические примеры улучшения доступности
•Радикально доступные интернет-приложения — доклад Marcy Sutton на btconfMUC2018
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Fun Frontend: мониторим страницу без JS
• Снова о CSS Box Alignment (свойствах для выравнивания всего): простая шпаргалка
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- ES2015+:
•Регулярные выражения ECMAScript становятся лучше!
•Интересные предложения для ECMAScript 2017, которые не были приняты
•Шаблонизаторы с ванильными литералами шаблонов JavaScript ES2015
•Советы и трюки ES6, которые сделают ваш код чище, короче и проще в чтении
•5 советов и размышлений насчёт Async / Await функций
•ECMAScript 2018: финальный набор функций. Чего ожидать от ECMAScript 2018: Object Rest/Spread Properties, Promise.prototype.finally(), Asynchronous Iteration, Template Literal Revision, RegExp features: named capture groups, Unicode Property Escapes, lookbehind Assertions, — s (dotAll) flag
VueJS:
•Программное создание экземпляров компонентов Vue.js
•Nuxt аутентификация с нуля
•Routing и Route Protection в рендерящемся на сервере Vue приложении с помощью Nuxt.js
•4 основные функции ES2015 для разработки на Vue.js
React:
•Частые трудности работы с React.js
•Советы по стилю. Как написать читаемый React-код
• Как воткнуть Реакт в существующий сайт
•Как конвертировать Angular приложение в React приложение —?по одному компоненту за раз
•Как создать ваш собственный React бойлерплейт
•Введение в React Easy State
Angular:
•Реактивные формы (reactive forms) Angular 5 (2+). Часть 2
• Руководство для начинающих по Angular 4:Сервисы, роутинг, компоненты
•Клиент Apollo для Angular – используем GraphQL
- Libs & Plugins:
•d3-discovery — Все плагины для d3.js в одном месте
•greenlet — перемещение async функции в собственный поток
•Toast UI Editor — опенсорсный Markdown WYSIWYG редактор
•jsnes — JavaScript NES эмулятор
Браузеры
•
![Firefox](https://habrastorage.org/web/658/e68/375/658e68375138497db4e8be50a3c603e8.png)
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![Firefox](https://habrastorage.org/web/658/e68/375/658e68375138497db4e8be50a3c603e8.png)
•
![Firefox](https://habrastorage.org/web/658/e68/375/658e68375138497db4e8be50a3c603e8.png)
•
![Chrome](https://habrastorage.org/web/7a5/e0c/2da/7a5e0c2da5a6439eafd2f18a6be6c55f.png)
•
![Chrome](https://habrastorage.org/web/7a5/e0c/2da/7a5e0c2da5a6439eafd2f18a6be6c55f.png)
•
![Chrome](https://habrastorage.org/web/7a5/e0c/2da/7a5e0c2da5a6439eafd2f18a6be6c55f.png)
•
![Chrome](https://habrastorage.org/web/7a5/e0c/2da/7a5e0c2da5a6439eafd2f18a6be6c55f.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Занимательное
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Как блокчейн изменит способы хранения документов об образовании
• GitHub объявил о поддержке создания нескольких шаблонов Issue и Pull request
• Adobe выпустила новую версию Photoshop с поддержкой ИИ
• Главные технологические тренды в 2018 году
• Microsoft покажет пользователям, какую информацию собирает о них Windows 10
• Разработчик-ветеран Google обвинил компанию в подражании конкурентам и объявил об уходе
• Спасибо, Twitch: как зарабатывать сотни тысяч долларов, играя в видеоигры
• Мошенники смогли разместить на YouTube рекламу с кодом для майнинга криптовалюты
• Facebook открыл код платформы Detectron для распознавания объектов на фотографиях
• Facebook изобрела новую единицу времени — «щелчок»
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (7)
Harrix
29.01.2018 10:13Хм… А подобное поведение свойства
text-decoration: underline
(разрывы около букв р, g и т.д.) в Chrome появилось давно или это что-то новенькое?
Zigzag
Здравствуйте, уже опубликовано видео с MinskJS #3 https://www.youtube.com/playlist?list=PL-whh3wS8xsIYbyxR513W3NXU-VJIxxFq
alexzfort Автор
Спасибо, добавил