Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Веб-стандарты», Выпуск №123: YaC и WWDC, новинки Chrome, Edge и Firefox, вложенность, calc и CSS-хакеры, как писать код быстро, вариативные шрифты, await и ES-модули, есть ли зверь фулстек, Яндекс Лэндинги.
•
Подкаст «Frontend Weekend» #55 – Никита Прокопов про ClojureScript, ведение блогов и создание собственного шрифта
•
Подкаст «devschacht»: Ночной фронтенд #35 — РИТ++
•
Подкаст «Фронтенд Юность (18+)» #50 Мифы о zero configuration
•
Подкаст CSSSR: Новости 512 — Выпуск №8 (28.05 — 03.06)
•
«ALL YOUR HTML» #51: «Соединённые частицы в 3д»
•
Новые релизы: GSAP 2.0, WordPress 15, анонс Lighthouse 3.0, выход Material-UI v1, Jest 23, анонс TypeScript 2.9
•
Почему разработка фронтенда такая нестабильная?
•
Культ сложности. Критическая заметка Джефри Зельдмана о текущем состоянии веб-разработки
•
Создание отзывчивого изображения. Как создать логотип, который соответствует соотношению его сторон
•
9 удивительных секретов PWA
•
Доступные индикаторы фокуса: то, на чем стоит сфокусироваться
• Алгебра в calc(), новая специфичность селекторов 4 уровня и другие майские новинки CSS
• Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого
• Объясняем Z-index: как позиционировать элементы с помощью CSS
•
Решение жизненных проблем с помощью CSS
•
critters — Webpack плагин для инлайнинга критического CSS и ленивой загрузки для остального
•
Как работает CSS: понимание каскада
•
Состояние изменения градиентов с помощью CSS-переходов и анимаций
•
HSL() / HSLa() отлично подходят для программного контроля цвета
• Полезные методы массивов и объектов в JavaScript
•
#SmooshGate FAQ
•
Свойства современного JavaScript, которые вы должны использовать каждый день для улучшения разработки и какие проблемы они решают
•
Лучшие практики для использования современого синтаксиса JavaScript
•
Захват и отчет по JavaScript ошибкам с помощью window.onerror
• Релиз web-браузера Chrome 67
• В Firefox 63 будет представлен блокировщик скриптов майнинга криптовалют
• Уязвимость в Chrome и Firefox в течение года позволяла получать данные о Facebook-профилях
• В Google Chrome появилась поддержка беспарольной аутентификации на сайтах по стандарту WebAuthn
• Возвращение Geektimes на Хабр
• Архитектор Big Data Tesla: наш автопилот — это SkyNet из «Терминатора»
• Какие шрифты лучше использовать для оформления сложных данных
• Как научить ребёнка программировать
• Действительно ли QWERTY — плохая раскладка и почему мы не сможем от нее отказаться
• Microsoft ведёт переговоры о покупке GitHub
?
Дайджест за прошлую неделю.
Материал подготовили 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)
Веб-разработка
•
![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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Производительность:
•prerender-loader! — универсальный пре-рендеринг для Webpack. Улучшает first paint, часто даже без изменения кода
•Что такое Client Hints и стоит ли их использовать
•Уменьшение размера изображений с помощью цветовой дискретизации
- Tools:
•На Yarn и обратно (на npm) опять
•Chrome 67 — что нового в DevTools
•Три шага для развёртывания Webpack приложений на Heroku
CSS
• Алгебра в calc(), новая специфичность селекторов 4 уровня и другие майские новинки CSS
• Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого
• Объясняем Z-index: как позиционировать элементы с помощью CSS
•
![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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
• Полезные методы массивов и объектов в 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)
- ES2015+:
•Что нового в ES2017: функции Async, улучшенные объекты и остальное
•ES6 (ES2015) и после него: понимание версионирования JavaScript
•ES6 в действии: улучшенные литералы объектов
•Контроль потока в современном JS: Callbacks to Promises to Async/Await
VueJS:
•Создание современных приложений с помощью Django и Vue.js
•Создание графиков в реальном времени с помощью Vue.js
•Лучшие ресурсы для изучения Vue.js в 2018
•От VanillaJS к Vue.js: история рефакторинга
React:
•Давайте влюбимся в React Fiber
•Reach Router — новый роутер с акцентом на доступность. Быстрый обзор свойств и особенностей использования
•Руководство по Next.js: SEO-Friendly React E-Commerce SPA
•react-ideal-image — почти идеальный React компонент для изображений
•Самые важные уроки, которые я вынес после года работы с React
•Понимание Redux: самое простое руководство в мире по для начинающих
•Управление состоянием приложения в React с Unstated
Angular:
•NgRx?—?лучшие практики для Enterprise приложений на Angular
•Angular + Redux?—?урок, который мы для вас выучили
•44 быстрых совета для тонкой настройки производительности в Angular
- Libs & Plugins:
•proppyjs — Небольшая JS библиотека для функциональной композиции props. Поддерживает ReactJS, VueJS, PreactJS и ReactiveX
•11 библиотек Javascript, которые вы должны знать в 2018
•minipack — упрощённый пример современных модульных сборщиков, написанных на JS
Браузеры
• Релиз web-браузера Chrome 67
• В Firefox 63 будет представлен блокировщик скриптов майнинга криптовалют
• Уязвимость в Chrome и Firefox в течение года позволяла получать данные о Facebook-профилях
• В Google Chrome появилась поддержка беспарольной аутентификации на сайтах по стандарту WebAuthn
Занимательное
• Возвращение Geektimes на Хабр
• Архитектор Big Data Tesla: наш автопилот — это SkyNet из «Терминатора»
• Какие шрифты лучше использовать для оформления сложных данных
• Как научить ребёнка программировать
• Действительно ли QWERTY — плохая раскладка и почему мы не сможем от нее отказаться
• Microsoft ведёт переговоры о покупке GitHub
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (4)
ht-pro
04.06.2018 18:23+1Спасибо.
Линк по методам массивов\объектов можно использовать как шпаргалку.
AngReload
BigInt подъехал в новом хроме)
![](https://habrastorage.org/webt/xd/dw/xf/xddwxfu1y0m7yuk7hcjauegeeei.png)
alexzfort Автор
Огонь!
findoff
1n << 1000000n
вот настоящий огонь (консоль виснет).