Медиа | Веб-разработка | CSS | Javascript | Браузеры
Медиа
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/getpro/habr/post_images/b6e/55f/402/b6e55f40242ee8968746fa6f656dece4.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
![<3](https://habrastorage.org/webt/c8/p3/yd/c8p3ydmu-5gklasqgcygbfbwiyg.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)
•
![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)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Краткий план по изучению фронтенда, или #100ДнейКода
•
![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)
- Производительность:
• Улучшаем производительность веб-шрифтов на реальном примере
•Приоритезация ресурсов — используем помощь браузеров
•Предварительная загрузка шрифтов и загадки приоритетов
•Пример производительности DOM
•third-party-web — подборка с краткой информацией о степени влияния третьесторонних скриптов на сайты в вебе
- Инструменты:
•Собираем бандл мечты с помощью Webpack
•Встречайте: pika/pack — новый способ управления npm пакетами
•Что нового в DevTools (Chrome 73)
•Puppeteer — мой новый сервер для разработки
- Accessibility:
•Uncanny A11y
•Советы по обеспечению доступности интерактивных элементов на мобильных устройствах
•Проектирование интерфейсов будущего: инлайновый SVG
- Эффектный веб:
•Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer
•Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer
•SVG Filter Effects: согласование текста с текстурой поверхности с помощью <feDisplacementMap>
•Эффект сеточного заполнения фона с помощью Anime.js
• Water and Lemons — детализированная картина на чистом CSS
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)
•
![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)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Теория:
• Все?, что нужно знать об async/await. Циклы, контроль потоков, ограничения
•Управление состоянием. Серия лекций, состоящих из пяти видео, от Ильи Климова
•Визуальное руководство по определениям и областям применения переменных JavaScript
•Основы определения и всплытия переменных в JavaScript
•Изучите чистые функции с помощью JavaScript
- TypeScript:
•clean-code-typescript — концепты Clean Code, адаптированные под TypeScript
•ReasonML vs TypeScript: сравнение их системы типизации
•Как использовать Typescript с React и Redux
React:
•Почему React Hooks так взволновали меня?
•Создание компонента автозаполнения React с нуля
•Анимация в React
•Магия многошаговых форм на React
•Все, что вам нужно для создания пользовательского React Hook
•Как достигнуть поддержки доступности в React приложениях
•Что я почерпнула, изучив React за две ночи, после нескольких лет работы с Angular
Angular:
• Angular Universal: всё, что нужно знать SEO-специалисту
•Управление брейкпоинтами изображений с помощью Angular
•Тур по Angular Console
•Создания тултипа на Angular CDK
VueJS:
•VueJS 3.0: Революция?. Мнение Ильи Климова
•Создание SPA на Vue.js для продажи футболок
•Превращение статических SVG рисунков в интерактивные виджеты и инфографику с Vue.js
Браузеры
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Представлен новый интерфейс браузера Opera
• Браузер Samsung Internet Browser преодолел рубеж в 1 млрд загрузок в Google Play Store
• Сотрудник Microsoft: не используйте Internet Explorer по умолчанию
• В Chrome появится поддержка ссылок на отдельные слова и фразы в тексте
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (10)
dom1n1k
18.02.2019 18:57+1Статья «Улучшаем производительность веб-шрифтов на реальном примере» — это какая-то вакханалия. Автор некомпетентен, но при этом считает себя самым хитрым — ай как ловко заменил два «лишних» начертания парой css-свойств! Ну и плюс шрифты у него там подозрительные, похоже что поломаны кривым конвертером.
Но почитать полезно — для кругозора, какие умники встречаются в индустрии :)t_kanstantsin
18.02.2019 23:05А если поконкретнее?
Например, display: swap/fallback — рекомендуется сервисом google page speed; preload — тоже интереный вариант.
Про различные начертания: я и раньше слышал, что italic в большом количестве шрифтов не нужен — font-style: italic даст тот же результат. А здесь показано, что в некоторых случаях и от bold начертания можно избавиться (не во всех, конечно).
Так что не так?dom1n1k
18.02.2019 23:21я и раньше слышал, что italic в большом количестве шрифтов не нужен — font-style: italic даст тот же результат.
Вот примерно настолько тот же результатt_kanstantsin
19.02.2019 00:53Ну всё, затралил, молодец. Второй коммент, а по существу ничего.
dom1n1k
19.02.2019 15:19Ну что говорить по существу?
Начертание light != regular, regular != demibold.
regular + font-style: italic != нативный italic
light + font-weight: bold != нативный bold
Это факты. И в дизайнер, вероятно, добавил несколько начертаний на сайт не просто так, они используются для каких-то целей (иерархия информации, оптические компенсации и вот это всё).
Да, я знаю, что некоторые люди не видят разницы. Но это не значит, что её нет. Некоторые люди, знаете ли, пьют «пиво» балтика и едят «шоколад» альпен гольд и тоже не видят разницы — ну так это их проблемы.
И да, я знаю, что дизайнеры иногда перегибают палку с весом ресурсов. Но это надо разговаривать с ними и приходить к совместному адекватному решению, а не твоить какую-то хню под девизом «я без понятия что это и зачем — ну и выкину нафиг».
sazareks
Всё круто, спасибо большое, но пожалуйста, сделайте иконки RU EN побольше. Глаз сломаешь пока разглядишь.
Sersoftin
А зачем из разглядывать?) Иконок для RU нет вообще, в для EN надпись сама не обязательная. Я, например, просто вижу что-то красненькое и сразу понятно)
AngReload
Мне более интересно, почему эта иконка в гиф? Не анимация же. Иконка подкаста в png например.
alexzfort Автор
Так исторически сложилось, своего рода древний артефакт :) В скором времени изменю.
Хотя, регулярно поступают предложения вообще не переводить заголовки англоязычных статей, т.к. текст в них все равно в оригинале. В этом случае иконка будет не нужна в принципе
AngReload
Ну, мне приятно читать переведённые заголовки.