forwebdev | Technologies

Telegram-канал forwebdev - For Web — фронтенд, дизайн, программирование

15078

Годнота для фронтендеров и дизайнеров https://forweb.dev

Subscribe to a channel

For Web — фронтенд, дизайн, программирование

MemLab, инструмент для поиска утечек памяти в браузерах и в Node.js, разработанный и используемый в Meta → https://facebook.github.io/memlab/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как разбить строку на предложения, слова или графемы: Штефан Юдис знакомит с API Intl.Segmenter → https://www.stefanjudis.com/today-i-learned/how-to-split-javascript-strings-with-intl-segmenter/

Одно из потенциальных применений — более умное обрезание текста, о котором была прошлая публикация.

Читать полностью…

For Web — фронтенд, дизайн, программирование

Рефакторинг на максималках: книга Саши Беспоясова о том, как эффективно и без боли рефакторить код → https://refactor-like-a-superhero.vercel.app/ru

Читать полностью…

For Web — фронтенд, дизайн, программирование

Новый синтаксис для диапазонов значений в медиавыражениях: обзор нововведения в спецификации медиавыражений, существенно упрощающего чтение стилей → https://css-tricks.com/the-new-css-media-query-range-syntax/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Вышла Lerna v6: инструмент для управления NPM-пакетами в монорепозиториях получил вторую жизнь под крылом компании Nrwl. Подробности и обзор новых возможностей → https://blog.nrwl.io/lerna-reborn-whats-new-in-v6-10aec6e9091c

Читать полностью…

For Web — фронтенд, дизайн, программирование

Более быстрый YouTube в вебе: подробный рассказ инженеров YouTube о проделанной работе по ускорению веб-версии сервиса и улучшению Core Web Vitals → https://web.dev/better-youtube-web-part1/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как определить, что старые стили нигде не используются? Гарри Робертс предлагает ставить на фон прозрачную картинку и следить за её скачиваниями — https://csswizardry.com/2018/01/finding-dead-css/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Data Literacy Lessons, коллекция небольших уроков статистики для избежания распространённых ошибок при работе с данными — https://data-literacy.geckoboard.com/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Cафия Абдалла читает исходники Node.js и описывает интересные части кода стандартных модулей: querystring, os, EventEmitter, fs, child process, Buffer, console, path и другие — https://blog.safia.rocks/search/node-module-deep-dive

Читать полностью…

For Web — фронтенд, дизайн, программирование

Шпаргалка по выравниванию в CSS в разных режимах компоновки, от обычных блоков до гридов — http://patrickbrosset.com/lab/2018-01-10-css-alignment-cheatsheet/

Читать полностью…

For Web — фронтенд, дизайн, программирование

25 бесплатных скринкастов по CSS-гридам от Уэса Боса при поддержке Mozilla Firefox — https://cssgrid.io/

Читать полностью…

For Web — фронтенд, дизайн, программирование

«Фронтенд-юность» №34: программисты — зажравшиеся мажоры современности, какие бывают компании, лицо и жопки фронтенда, воровство пользовательских данных через NPM-пакет, PWA Tinder — https://soundcloud.com/frontend_u/e34

Читать полностью…

For Web — фронтенд, дизайн, программирование

На собеседованиях иногда просят назвать способы отправки запроса на сервер. Помимо очевидных fetch/XMLHttpRequest и прочих джаваскриптовых штук есть более экзотические способы вроде <img src="...">.

Вчера узнал о ещё более экзотическом и извращённом способе отправки запроса на сервер с помощью CSS:


body::after {
content: url('...');
}


Этот способ может использоваться для аналитики и трекинга пользователей, у которых отключен JS. Можно отследить клики по ссылкам, ввод текста в инпуты, клики по чекбоксам, длительность ховера на каком-либо элементе; также можно приблизительно определить браузер и операционную систему пользователя. Подробности — https://github.com/jbtronics/CrookedStyleSheets

Защититься от этого можно только отключив CSS. Параноикам пора переходить на текстовые браузеры :–)

Читать полностью…

For Web — фронтенд, дизайн, программирование

Paper Programs, система для выполнения JavaScript-программ, распечатанных на листах бумаги — https://paperprograms.org/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Вышел долгожданный Bootstrap 4: проект почти полностью переписан, всё на флексах, отказались от IE9-, добавили поддержку CSS-переменных, подробности и полный список изменений — http://blog.getbootstrap.com/2018/01/18/bootstrap-4/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Геометрия DOM: обширный обзор существующих методов и свойств для работы с размерами и отступами DOM-элементов и документа в JS → https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как нормально обрезать текст: Илья Бирман рассказывает о простых правилах, которые позволяют избежать казусов и улучшить UX → https://ilyabirman.ru/meanwhile/all/how-to-cut-text/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как понять режимы наложения раз и навсегда: иллюстрированное объяснение принципов работы различных режимов наложения → https://awdee.ru/blending-modes/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Vercel анонсировала Turbopack, преемник Webpack на Rust, разрабатываемый создателем Webpack Тобиасом Копперсом → https://vercel.com/blog/turbopack

Релиз пока очень ранний и не для продакшена, но выглядит многообещающе, поэтому следим за новостями.

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как команда Wix улучшила тысячи плохо сформулированных сообщений об ошибках и как они изменили процессы, чтобы не допустить появления плохих текстов ошибок в будущем → https://scribe.rip/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f

Читать полностью…

For Web — фронтенд, дизайн, программирование

Почему Реакта и Редакса недостаточно при разработке крупных приложений и как конечные автоматы могут помочь разработчикам интерфейсов, Красимир Цонев на Smashing Magazine — https://www.smashingmagazine.com/2018/01/rise-state-machines/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Основы React.js, вводный курс из 12 видео от Романа Якобчука и Ильи Кантора — http://learn.javascript.ru/screencast/react

Читать полностью…

For Web — фронтенд, дизайн, программирование

Подборка малоизвестных браузерных API и возможностей JS: операторы pipeline/void/запятая, атомики, i18n, dataset, лейблы для блоков кода — https://air.ghost.io/js-things-i-never-knew-existed/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как сверстать аналог графа активности на Гитхабе с помощью CSS-гридов, руководство Ире Адеринокун — https://bitsofco.de/github-contribution-graph-css-grid/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Подробный разбор и сравнение преимуществ и недостатков JavaScript-фреймворков, от самых популярных до экзотических — https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/

Читать полностью…

For Web — фронтенд, дизайн, программирование

«Веб-стандарты» №104: уточнение про селектор matches, гриды для бизнеса, нейровёрстка (или как машины вас не заменят), согласие по main, общие JS-модули, шортики и уважение — https://soundcloud.com/web-standards/episode-104

Читать полностью…

For Web — фронтенд, дизайн, программирование

Frontend Weekend №36, в гостях Людмила Мжачих из Mail.ru: про MoscowCSS, Coding Girls и Лию Веру — https://soundcloud.com/frontend-weekend/fw-36

Читать полностью…

For Web — фронтенд, дизайн, программирование

Adele, коллекция опенсорсных дизайн-систем разных компаний и даже государств — https://adele.uxpin.com/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Чем отличается механизм вывода типов в Typescript, Flow и Reason, исследование Хавьера Чаварри — https://medium.com/p/edef2f4cf2d3

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как делать доступные проекты, даже если вы работаете на потоке в креативном агентстве или веб-студии, опыт компании Viget — https://goo.gl/16zQUA (часть 1) и https://goo.gl/3b4VgN (часть 2)

Читать полностью…
Subscribe to a channel