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

Google отказывается от монополии на принятие решений в AMP и создаёт для управления проектом комитет, в который войдут эксперты и компании → https://amphtml.wordpress.com/2018/09/18/governance/

У нескольких человек возник резонный вопрос: чем конкретно URL.createObjectURL лучше FileReader.readAsDataURL, не заблокирует ли синхронный URL.createObjectURL поток, если передать ему жирные данные?

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

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

Подробно вся механика описана в спецификации.

Зачем нужны интерфейсы и как использовать их эффективно, Янош Паштор с объяснением и практическими примерами → https://pasztor.at/blog/why-interfaces

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

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

[Вакансия, Москва/Минск]
Команда JS API Яндекс.Карт ищет разработчика → https://yandex.ru/jobs/vacancies/dev/intdev_api_maps/?_openstat=dGc7ZnJvbnQ7dGc7dGc

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

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

Вакансия мечты для тех, кто устал от классического фронтенда и хочет необычного.

Рекурсия для реакт-программистов: Максон Вислогуров подробно объясняет одну из фундаментальных концепций программирования в блоге CSSSR → http://blog.csssr.ru/2018/09/06/recursion

Как кастомизировать внешний вид радиокнопок, не повредив доступности? Хуэй Цзин Чэнь на примере одного из рабочих проектов → https://www.chenhuijing.com/blog/customise-radios-without-compromising-accessibility

На iOS обнаружена невиданная интеграция веба с нативной функциональностью, о которой пользователям Android остаётся только мечтать: с помощью HTML и CSS можно принудительно перезагрузить телефон/планшет → https://twitter.com/pwnsdx/status/1040944750973595649

Как разработать дизайн-систему с нуля, серия статей от команды 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

Houdini Spellbook, интерактивное введение во все основные понятия CSS Houdini от Сэма Ричарда: ворклеты, Typed OM, кастомные свойства, Paint/Animation/Layout API → http://houdini.glitch.me/

🎧
Свежие подкасты

«Фронтенд-юность», в гостях Андрей Мелихов, Алексей Чернов и другие спонтанные гости: что отличает мидла от сеньёра и лида и как научиться расслабляться → 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

Как корректно реализовать поиск и сортировку по тексту с диакритическими знаками? Пол Спрингет о реализации новых поисковых фильтров в Thread → https://thread.engineering/45afef20e7f2

Как доступно разметить аккордеон? Сара Суайдан с обзором способов от h3/div до details/summary по мотивам опроса в Твитере → https://www.sarasoueidan.com/blog/accordion-markup/

6 трюков VS Code за 60 секунд от Пола Льюиса → https://youtu.be/h_jWotbLUEA

Select Star SQL, бесплатный интерактивный учебник по основам SQL → https://selectstarsql.com/