6 трюков VS Code за 60 секунд от Пола Льюиса → https://youtu.be/h_jWotbLUEA
Как доступно разметить аккордеон? Сара Суайдан с обзором способов от
h3/div
до details/summary
по мотивам опроса в Твитере → https://www.sarasoueidan.com/blog/accordion-markup/Как корректно реализовать поиск и сортировку по тексту с диакритическими знаками? Пол Спрингет о реализации новых поисковых фильтров в 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
Свежие подкасты
«Фронтенд-юность», в гостях Андрей Мелихов, Алексей Чернов и другие спонтанные гости: что отличает мидла от сеньёра и лида и как научиться расслабляться → 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
Типографика → 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.
Вакансия мечты для тех, кто устал от классического фронтенда и хочет необычного.
Команда 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
Если вам нужно отобразить картинку, которая изначально представлена в виде файла или блоба, не используйте для этого асинхронный
Больше советов → https://github.com/forwebdev/ui-developer-tips
Предложить совет или трюк → https://github.com/forwebdev/ui-developer-tips/issues/new
Если вам нужно отобразить картинку, которая изначально представлена в виде файла или блоба, не используйте для этого асинхронный
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