For Web — фронтенд, дизайн, программирование
14.6K subscribers
5.47K photos
7 videos
5 files
1.74K links
Новости и полезности для фронтендеров.
Поддержать, чтобы в канале не было рекламы:
https://patreon.com/forweb
https://boosty.to/forweb
Download Telegram
Как корректно реализовать поиск и сортировку по тексту с диакритическими знаками? Пол Спрингет о реализации новых поисковых фильтров в Thread → https://thread.engineering/45afef20e7f2
🎧
Свежие подкасты

«Фронтенд-юность», в гостях Андрей Мелихов, Алексей Чернов и другие спонтанные гости: что отличает мидла от сеньёра и лида и как научиться расслабляться → https://soundcloud.com/frontend_u/techtrain

«Фронтенд-юность» №63: Web Standards Days, Styled Components 4.0, TypeScript 3, элита и подкасты → https://soundcloud.com/frontend_u/e63

«Пятиминутка React» №47, в гостях Алексей Пирогов: Elm 0.19, тенденции в развитии языка, его недостатки и ниша в веб-разработке, сравнение с другими ФП-языками для веба; отдельно про Reason, ООП, Go 2 и generics, вероятность появления Elm 2 → https://5minreact.ru/47-elm-019/

Frontend Weekend №70, в гостях Глеб Михеев: о развитии собственного production-агентства и подготовке Frontend Conf → https://soundcloud.com/frontend-weekend/fw-70

«Веб-стандарты» №138, в гостях Алекс Канунников: 10 лет Chrome, кому нужен URL, что такое каскад, курсор на кнопках, микробенчмаркинг, DOM в воркерах, JS 2018 → https://medium.com/p/75cc55f014a6

«Девшахта» №50, в гостях Дмитрий Назаров: как и зачем погружаться в Python → https://medium.com/p/b7f1bf058e40

«Недельный Vue» №4: обзор свежих новостей, публикаций и докладов → https://soundcloud.com/dmitry-zlygin/weekly-vue-4

«Новости 512» от CSSSR №21: обзор новостей, релизов и интересных публикаций → https://soundcloud.com/csssr/novosti-512-vypusk-21-1009-1609
Houdini Spellbook, интерактивное введение во все основные понятия CSS Houdini от Сэма Ричарда: ворклеты, Typed OM, кастомные свойства, Paint/Animation/Layout API → https://houdini.glitch.me/
Как разработать дизайн-систему с нуля, серия статей от команды CodyHouse:

Типографика → https://medium.com/p/7c630d9092bd
Сетка и раскладка → https://medium.com/p/aa961d59b8d6
Цвета → https://medium.com/p/798e4729921f
Отступы → https://medium.com/p/895c9213e2b9
Иконки → https://medium.com/p/594f39cfb1b
Кнопки → https://medium.com/p/58e2eda2173e
На iOS обнаружена невиданная интеграция веба с нативной функциональностью, о которой пользователям Android остаётся только мечтать: с помощью HTML и CSS можно принудительно перезагрузить телефон/планшет → https://twitter.com/pwnsdx/status/1040944750973595649
Как кастомизировать внешний вид радиокнопок, не повредив доступности? Хуэй Цзин Чэнь на примере одного из рабочих проектов → https://www.chenhuijing.com/blog/customise-radios-without-compromising-accessibility
Рекурсия для реакт-программистов: Максон Вислогуров подробно объясняет одну из фундаментальных концепций программирования в блоге CSSSR → https://blog.csssr.ru/2018/09/06/recursion
[Вакансия, Москва/Минск]
Команда JS API Яндекс.Карт ищет разработчика → https://yandex.ru/jobs/vacancies/dev/intdev_api_maps/?_openstat=dGc7ZnJvbnQ7dGc7dGc

У нас появилось большое количество интересных задач. Нашему будущему коллеге не придётся заниматься поддержкой легаси-кода и верстать.

Зато ему предстоит:
— разрабатывать удобные API;
— много работать над перформансом кода;
— разбираться с технологиями рендеринга карты, в том числе с WebGL;
— писать на TypeScript.

Вакансия мечты для тех, кто устал от классического фронтенда и хочет необычного.
Вышел Framer X, самый продвинутый на сегодня инструмент для дизайна: интеграция с Реактом, интерактивные прототипы, анимации, магазин компонентов и многое другое → https://framer.com/
URL.createObjectURL вместо FileReader.readAsDataURL

Если вам нужно отобразить картинку, которая изначально представлена в виде файла или блоба, не используйте для этого асинхронный FileReader.readAsDataURL. Лучше применить синхронный URL.createObjectURL — он моментально создаст для блоба временный URL, который можно использовать как угодно, например, в качестве src для <img />. После завершения использования временного URL не забудьте освободить память с помощью вызова URL.revokeObjectURL.

Больше советов → https://github.com/forwebdev/ui-developer-tips
Предложить совет или трюк → https://github.com/forwebdev/ui-developer-tips/issues/new
Зачем нужны интерфейсы и как использовать их эффективно, Янош Паштор с объяснением и практическими примерами → https://pasztor.at/blog/why-interfaces
For Web — фронтенд, дизайн, программирование
URL.createObjectURL вместо FileReader.readAsDataURL Если вам нужно отобразить картинку, которая изначально представлена в виде файла или блоба, не используйте для этого асинхронный FileReader.readAsDataURL. Лучше применить синхронный URL.createObjectURL —…
У нескольких человек возник резонный вопрос: чем конкретно URL.createObjectURL лучше FileReader.readAsDataURL, не заблокирует ли синхронный URL.createObjectURL поток, если передать ему жирные данные?

Начнём объяснение с того, чем плох FileReader.readAsDataURL: хоть он и работает асинхронно и не блокирует поток, он требует значительных ресурсов для чтения содержимого блоба и его конвертации в data URL.

URL.createObjectURL лучше тем, что он не требует чтения содержимого блоба, а значит расходует гораздо меньше ресурсов; он синхронный, а значит максимально простой в использовании. Генерируемый URL основан на UUID, а не на содержимом блоба, а связываются URL с блобом через специальную специальную хеш-таблицу blob URL store. Пока блоб входит в эту хеш-таблицу, сборщик мусора не может удалить его из памяти, поэтому по завершении использования URL его и нужно отзывать через URL.revokeObjectURL.

Подробно вся механика описана в спецификации.
Google отказывается от монополии на принятие решений в AMP и создаёт для управления проектом комитет, в который войдут эксперты и компании → https://amphtml.wordpress.com/2018/09/18/governance/
agadoo, простая утилита от Рича Харриса для проверки корректной поддержки тришейкинга в разрабатываемых JS-библиотеках → https://github.com/Rich-Harris/agadoo
Вложенные ссылки без вложенных ссылок: Сара Суайдан с обзором техник реализации и способом, который она применила в работе над Smashing Magazine → https://www.sarasoueidan.com/blog/nested-links/
Методологии разработки на примере сборки автомобиля: waterfall, kanban, agile, scrum и lean. Инфографика от Toggl → https://toggl.com/developer-methods-infographic/