14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#такое дня
Есть у меня некое предубеждение к продуктам, которые распространяются через инфлюенсеров. Как, например, браузер Arc.
А когда есть предубеждение, стараешься невольно найти подтверждение своим опасениям.
Например, у вас не возникало ощущения, что обязательное требование облачного аккаунта для использования такого продукта, как браузер, это как-то ненормально?
Или что концепция бустов, Boosts — это когда кто-то может сделать свой набор скриптов и правил для изменения поведения любого сайта — звучит как встроенный MITM?
Man in the middle, если что. Это вот: https://en.wikipedia.org/wiki/Man-in-the-middle_attack
И ведь так и оказалось! Автор xyzeva (я только знаю, что зовут её Ева) опубликовала результаты исследования безопасности Boosts и смогла воспроизвести атаку с подменой авторства буста на любое нужное ей.
Таким образом, можно установить ничего не подозревающему человеку кастомный скрипт, созданный под любой сайт.
Вот, почитайте: https://kibty.town/blog/arc/
TL;DR: они использовали Firebase максимально наивно.
Даже если не интересуетесь инфобезом, там прекрасная кошечка бегает за курсором.
Arc признали существование уязвимости, выкатили об этом пост и выплатили автору вознаграждение: https://arc.net/blog/CVE-2024-45489-incident-response
По счастью, предположительно никто не пострадал.
В общем, внимательно рассматривайте продукты, которые предлагают всё и сразу, just call my toll free number.
#security #browser
Этот фреймворк откроет дорогу к IT-гигантам
Когда разработчики слышат про Spring, то испытывают страх, ведь там бины, зависимость, ApplicationContex - во всем этом разобраться сложно.
Однако если изучить этот фреймворк, то это прямой путь к топовым вакансиям.
Специально для этого FAANG School взяли все самое важное про Spring и упаковали в простую эфир-лекцию, где помимо практических знаний вы заберете архитектуру и примеры конкретных фич для собственного проекта-портфолио.
Вы узнаете:
– что такое Spring и почему он настолько популярен среди разработчиков
– в чем разница между Spring, Spring Boot и как их использовать
– как работают Spring Beans и как не путаться в конфигурациях
– что такое Autowiring и как автоматизировать настройку зависимостей
– как работает Dependency Injection и почему это ключ к гибким и масштабируемым приложениям
Переходите, чтобы зарегистрироваться.
Самые быстрые получат бонусы - мерч, другие полезные материалы, а также грант на обучение на Java Буткемп!
#статья дня
В заметке про работу с отменой запросов в React Query я лишь косвенно упомянул такую потрясающую штуку, как Abort Controller.
Зачем он вообще нужен?
Можно перестать слушать события, отменить ненужный запрос на сервер (и даже в девтулзах он пометится как canceled), отменить транзакцию, отменить вообще всё, что отменяется, да ещё сделать это стандартным способом!
Документация на MDN крайне скудна и не описывает и половину вариантов применения. Поэтому, нужно что-то ещё.
Про отмену событий мы уже писали, про React Query я упомянул выше... так что давайте для остальных примеров возьмём свежую статью Артёма Захарченко: https://kettanaito.com/blog/dont-sleep-on-abort-controller
1. Уже ставшие классическими примеры отмены событий и запросов
2. Отмена стримов
3. AbortSignal.timeout для отработки, внезапно, таймаутов
4. AbortSignal.any для ситуаций, когда сигнал может поступить от разных контроллеров.
Учитывая, что для работы с Google AppsScript API у меня имеется самописный преобразователь коллбэков в промисы, мне и самому стоит дополнить реализацию поддержкой Abort Controller.
Так что статья как раз вовремя.
#javascript #abortcontroller
#фишка дня
Отладка в Chrome только что стала проще!
Теперь, чтобы отладить нечто появляющееся по фокусу на элементе, не надо ставить весь рендеринг на паузу, вызывая дебаггер. И не надо ставить точку останова на изменение атрибутов.
Достаточно открыть девтулзы и жмакнуть по чекбоксу Emulate focused page на вкладке Rendering или Elements.
Как-то так:
https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page
Очень уютно!
#chrome #devtools
Спасибо большое всем участникам стрима и отдельно тем, кто задавал вопросы!
Завтра утром выкачу записи. Есть и видео, и просто аудио, как кому удобно 👍
#фишка дня
Итак, во фронтенд-сообществе давно наметилась тенденция к завышенным ожиданиям разработчиков от потребителей их продукции.
Сидите вы такие в уютном месте, пьёте кофе, работаете на макбуках, с экранами высокой плотности... в итоге забывая, что клиенты-то ваши — на ThinkPad с разрешением 1366*768.
И все ваши тоненькие шрифты, иконки, полупиксельные границы начинают смотреться так себе. А уж косые градиенты... эти ступеньки мало кому понравятся.
Итак, сегодня вашему вниманию пара вариантов сглаживания градиентов.
1. Используйте нецелые значения процентов для стоп-меток. Если честно, я в механизме не до конца разобрался, но это заставляет браузер размывать линию стыка: https://codepen.io/alinaki/pen/oNrKXpM
background: linear-gradient(
176deg,
red,
red 50%,
black 50.3%
);
background: linear-gradient(
176deg,
red,
red 50%,
black calc(50% + 1px)
);
#напоминание дня
Пользуясь случаем, напоминаю, что завтра в 20:00 МСК у нас пройдёт совместный с @acceleracio стрим, на котором я расскажу, как проходили мои зарубежные собеседования, а эксперты Acceleracio поделятся секретами того, как заполучить работу за границей.
⚡️Пост с подробностями: /channel/htmlshit/3108
⚡️Бот для записи: @acceleracio_bot
Увидимся!
Часто ли у вас плывет код перед глазами? Чтобы такого не допускать, важно вовремя переключаться. Например, сменить рабочее пространство вокруг себя!
С такой идеей Яндекс открыл коворкинг в Парке Горького на крыше Музея современного искусства «Гараж», где воплощается концепция баланса между работой, искусством и технологиями.
Здесь можно покодить под открытым небом, поиграть в пинг-понг или читать книгу, а после остаться на кинопоказ или паблик-ток.
Кстати, локацию выбрали не случайно. Почти в каждом офисе компании есть обустроенные крыши и балконы — на них работают и отдыхают, обмениваются идеями, встречают дни рождения и провожают закаты.
Коворкинг открыт для всех, но бронировать место лучше заранее: слоты уходят быстро.
#инструмент дня
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: /channel/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
#фишка дня
О проблеме вертикального центрирования контента в CSS можно слагать легенды, писать статьи, делать целые сайты...
Даже грустно, что всё это подходит к концу. Ведь теперь у нас есть не только флекс и грид, но и такое простое и понятное align-content.
Да, это свойство с давних пор является базой во flex- и grid-моделях, но начиная с Chrome 123, Firefox 125 и Safari 17.4 поддерживается и в — 🎉 — блочной модели!
.container {
align-content: center;
}
Как искусственный интеллект меняет правила игры в бизнесе?
Приглашаем тебя на митап по Data Science от экспертов Газпромбанк.Тех, где ты узнаешь:
– Как мы используем нейронные сети для разбора платежных документов
– Каким образом оптимизатор позволяет максимизировать прибыль от маркетинговых коммуникаций
– Какие задачи решают квантовые технологии в мире финансов
В конце тебя ждет нетворкинг с участниками и спикерами митапа.
Регистрируйся и приходи 19 сентября к нам в гости: Москва, ул. Коровий Вал д.5, БЦ «Оазис» — https://vk.cc/cAHhly
Реклама, Банк ГПБ (АО), ИНН: 7744001497, erid: 2VtzquvrLaT
#инструмент дня
Надоело каждый раз выходить из уютной консоли и открывать caniuse.com, чтобы посмотреть, с каких браузеров поддерживаются сабгриды?
Ой, только не говорите, что я один тут верстаю вслепую.
Вашему вниманию Bramus Van Damme и его caniuse-cli: bramus/caniuse-cli" rel="nofollow">https://www.npmjs.com/package/@bramus/caniuse-cli
$ caniuse viewport-units
$ caniuse "viewport units"
$ caniuse @property
#спасение дня
Итак, поскольку компания Пежо решила уменьшить количество прекрасного в этом мире и превратила свои страницы 404 из нечто прекрасного в нечто стандартное, мы решили восстановить статус-кво.
Вот как выглядела их страница 404 до недавнего времени: https://web.archive.org/web/20240723141538/https://www.peugeot.fr/pourquoi
Я больше не хочу терять это впечатление, потому решили хотя бы сохранить скриншот.
#инструмент дня
Иногда случается ситуация, когда никак иначе, кроме как парсингом страниц, данные не собрать.
Я не говорю сейчас о рипах с сайтов конкурентов. У меня была ситуация – надо было собрать списки магазинов небольшой сети, которые просто валялись по разным региональным шаблонным ресурсам.
Тогда я воспользовался https://github.com/cheeriojs/cheerio, написав простой скрипт на node.js. Это похоже на реализацию селекторов в jQuery, но для Node.js. Разобрал данные и сохранил в JSON.
Оказывается, есть и более кондовые утилиты.
Например, https://github.com/mgdm/htmlq и https://stedolan.github.io/jq
Первый, как нетрудно догадаться, может обработать HTML, а второй — JSON. И всё из командной строки :)
Например, найти все ссылки на странице:
curl --silent https://www.rust-lang.org/ | htmlq --attribute href a
Можно и просто целые куски HTML выдирать, и селекторы использовать. А дальше — все возможности командной строки и скриптов для обработки.
Ну а jq может стать частью вашей CI/CD системы, разгребсти ответы от API GitHub, например, и выдать их в читаемом виде.
#tools #html #json #cli #бородач
#видео дня
Юлия Миоцен (сходу напоминание, что у нас всё ещё есть рубрика #автор дня) вернулась с планируемой серией видео по 3D-преобразованиям в CSS.
Вот: https://www.youtube.com/watch?v=dgEHpkm0xTI
И незамедлительно последовало видео с практикой: https://www.youtube.com/watch?v=E4Ns_ZuP6Qo
По-моему, абсолютно прекрасный материал, который не стоит воспринимать как руководство по воксель-арту :) Представленные примеры отлично развивают пространственное мышление.
Накатываем туда анимаций по скроллу и вообще будет хорошо.
#css #3d
#фишка дня
Да неужели! Да ну наконец-то!
Уже сколько нас кормят тем, что уже давно можно смело нативно валидировать формы, а нормального менеджера состояний в девтулзах так и не было. Пойди выставь что-то отличное от focus :)
Теперь же можно не только использовать тот же :user-valid, но и форсить его в девтулзах!
А ещё есть юзер-инвалид: /channel/htmlshit/2760
Начиная с Chrome 129.
Вообще, секция про девтулзы — буквально моя самая любимая в блоге разработчиков Chrome: https://developer.chrome.com/blog/new-in-devtools-129
#chrome #devtools
#статья дня
Как бы ты ни старался соблюдать гигиену кода в React, всё равно в какой-то момент получится тяжёлый для рендеринга компонент.
А что делают тяжёлые компоненты? Правильно, блокируют нам весь UI! И в этот момент мы понимаем, что же за конкурентный режим рендеринга такой, о котором постоянно твердят авторы...
Итак, чтобы вынести рендеринг в неблокирующий режим, в React имеются два хука: useTransition и useDeferredValue. И сегодня речь пойдёт о первом.
Конечно, можно просто посмотреть видеоиллюстрацию от Алекса Сидоренко, но и документация очень даже исчерпывающая: https://react.dev/reference/react/useTransition
Выглядит интересно? Не то слово! Но...
Всегда есть но :) Это же React. И господа-авторы на странице документации максимально схитрожопили (я не нашёл слова лучше), использовав мемоизацию на странице медленного компонента, и не пояснив, зачем.
А ведь без неё возврат из тяжёлого компонента на лёгкий будет происходить ровно так же медленно, как и переход на тяжёлый компонент!
Зато без блокировки. Гении, не иначе.
И по этому поводу имеется статья Нади Макаревич: https://www.developerway.com/posts/use-transition
Я очень рекомендую её прочитать и прокликать примеры. И в комментарии тоже загляните — там описаны варианты решения проблемы без мемоизации.
В интересные времена живём.
#react #concurrent
#стрим дня
Итак, запись вчерашнего стрима.
1. Мой путь к получению оффера в Финляндии, обсуждение необходимого уровня английского языка
2. Презентация @acceleracio (00:31:00)
3. Ответы на вопросы: Cover Letter, соответствие уровня занимаемой позиции, поиск работы в России (01:00:00)
Аудиоверсия будет чуть позже в комментариях. Я её забыл на ноутбуке :)
P. S. Ничего себе, в телеге распознаются таймкоды!
Открыта регистрация на международный чемпионат по программированию Yandex Cup 2024. Призовой фонд 12,5 млн рублей
В этом году впервые могут участвовать программисты-юниоры от 14 до 18 лет. Для талантливых школьников это хорошая возможность влиться в сообщество высокоуровневых разработчиков.
Для опытных разработчиков 6 направлений — фронтенд-, бэкенд- и мобильная разработка, машинное обучение, аналитика и алгоритм.
Призовые места в прошлом чемпионате завоевали участники из России, Беларуси, США, Японии, Казахстана, Кипра, Германии, Грузии, Швейцарии.
Подать заявку можно до 20 октября.
Мы на связи, заходите в эфир!
Чтобы услышать мою историю поиска работы и обсудить, как сейчас с трудоустройством за границу!
Подключиться можно ЗДЕСЬ
HTTP API или SMTP — что выбрать при настройке email на сайте?
При создании сайта клиенты часто просят подключить сервис email-рассылок. Для этого есть два способа: HTTP API или SMTP.
Для выбора важно знать все нюансы (скорость, приоритеты и др.). Ими в своей статье “HTTP API или SMTP” поделился сервис email-маркетинга DashaMail.
Для веб-разработчиков DashaMail предлагает реферальную программу. Подключи своих клиентов к сервису и получай 20% со всех их оплат за доступ к сервису в течение двух лет!
Реклама. ООО "ПИСЬМО". ИНН 7811602601.
#инструмент дня
Как сделать текст поверх картинки читаемым?
Те, кто смотрит сериалы с субтитрами, уже давно знает ответ: белый текст с темно-серой тенью.
Но в дизайне это работает не всегда. Не попадает в стиль. Тогда на помощь приходит оверлей: некий полупрозрачный слой сверху, который затеняет или осветляет изображение, выделяя текст на фоне с достаточным контрастом, соответствующим стандартам доступности WCAG.
Как подобрать цвет оверлея и прозрачность? Очень просто, воспользоваться вот этим инструментом: https://codepen.io/yaphi1/pen/oNbEqGV
По заданным цветам и изображению покажет получившийся контраст. Очень удобно.
#css #tool #a11y
#фишка дня
Концепция анимированных круговых лоадеров на SVG достаточно проста: берём две окружности, одну для фона, вторую для отображение прогресса, и анимируем значение атрибута stroke-dashoffset.
И вот этот самый сдвиг задаётся в рамках некого stroke-dasharray: массива точек (кривых, dash), которыми рисуется кривая.
С ним можно много забавного делать, но это потом.
Вот только есть проблема: все кривые у нас разной длины. И браузер рассчитывает её на основе плотности экрана и параметров кривой. И выходит, значение нужно сначала высчитать:
const circle = document.querySelector('.spinner__circle');
console.log(circle.getTotalLength());
pathLength="100"
stroke-dasharray="100"
stroke-dashoffset="0"
Бесплатный практический вебинар: Профессия «Frontend-разработчик».
⏰ Когда: 19 сентября в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.
#фишка дня
Пишешь чат или выводишь данные лога в консоль и хочешь чтобы каждое новое сообщение снизу было видимым?
Ни слова больше! Спека has us covered: https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f
Удивительное дело, конечно, видеть примеры прямо в черновике спецификации :)
Вот, кстати, пример от Брамуса Ван Дамма (опять и снова, да): https://codepen.io/bramus/pen/PorRORd
Обратите внимание, за нас подумали, что пользователь может поскроллить наверх.
Работает везде, но иногда проявляется баг с пружинящим скроллом — Chrome теряет событие и "снапит" нас назад. Впрочем, не всегда.
Ну если вы за старое доброе решение на JavaScript, вот, держите хук от Vercel.
#scroll #snap #css
#статья дня
Ну что, давайте хором назовём самый больной элемент из всего набора стандартных HTML-виджетов.
Конечно же это select.
Если вы назвали не select, уж будьте добры, напишите в комментариях, почему вы так думаете.
Тем временем, пропозал кастомного select дошёл до Stage 2 в WHATWG, а это значит, пришло время расчехлять хотелки. Иначе останемся с чем-то очередным поломанным и недоделанным.
Естественно, инициатива здесь исходит от команды Chrome, вот свежий RFC: https://developer.chrome.com/blog/rfc-customizable-select
Кто не знает, что такое RFC — это, буквально, Request For Comments, запрос комментариев. Ваших, конечно, чьих же ещё.
Надо заметить, что раньше переиспользование select не предполагалось. Рассчитывали создать новый компонент — selectmenu, переименованный потом в selectlist. Но от идеи в итоге отказались.
Чтобы попробовать новый select нужен Chrome Canary 130 с включённым флагом #experimental-web-platform-features.
На Linux это, впрочем, Chromium Dev. Canary для нас не нашлось.
Ну, какие будут впечатления?
P. S. Есть форма в Google Forms для отправки этих самых впечатлений команде.
#css #select #custom
Углубите знания в веб-разработке, получите практичные инсайты и создавайте новые крутые проекты.
Регистрируйтесь на бесплатный мини-курс: https://epic.st/Yl2qH?erid=2VtzqxkvU3X
Вы научитесь:
— Создавать веб-страницы, используя язык разметки HTML и технологию CSS
— Реализовывать серверную часть (backend) веб-приложений на языке PHP
— Работать с базой данных MySQL при помощи языка запросов SQL
— Создавать приложения на языке программирования JavaScript
— Размещать сайты в интернете
📌Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java- и веб-разработки, руководит командами разработки в разных проектах.
🎁Подарки:
— Сертификат на скидку 10 000 рублей на любой курс
— Доступ к изучению английского языка на год
— 5 полезных подборок материала
— Персональная карьерная консультация
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
#инструмент дня
Из-за моей профдеформации — работа над расширением для Google Sheets — мне очень нравятся различные виджеты таблиц.
От экселеподобных до обычных таблиц aka гридов с фильтрами и сортировкой.
И естественно, моё внимание не мог не привлечь проект с говорящим названием fast-grid: https://github.com/gabrielpetersson/fast-grid
Автор заявляет, что на рынке лучше вариантов нет, что оно может переваривать миллионы строк с максимально быстрым скроллингом и всё это плавно и красиво. Для отрисовки используется мультипоточный веб-воркер.
Ну и, в общем-то, это правда :) Даже на тринадцатилетнем ноутбуке (с 4 ядрами и 16 гигами оперативы, впрочем) мне удалось загрузить 2 миллиона строк и радоваться жизни (Chrome, Linux).
5 миллионов, впрочем, не получилось ни на нём, ни на MacBook Pro M2 с 24 гигами. На первом вкладка съела 7 гигабайт и рухнула, на втором — съела 4 и ничего не произошло. Вообще.
И тут, конечно, встаёт вопрос целесообразности всех оптимизаций. Иметь по 5-10 миллионов строк в таблице это практически норма для Google Sheets (да, если навесить туда фильтры — всё станет очень плохо, но работает же). Заявленная плавная и бесконечно умная виртуализация это хорошо, но грамотная подгрузка частями и виртуализация всё же выглядят более разумным решением.
Но если вам нужно переварить до миллиона строк — по-моему, вариант отличный.
#javascript #grid #sheets
Let’s Go now!
Tech-команда Купера (ex СберМаркет) запустила внешнюю программу для backend-разработчиков от уровня Middle+ по переходу на Golang 🤷♂️
Для участия нужен большой опыт коммерческой разработки на Python/Java/Kotlin/PHP/C++/С# и минимальное знакомство с Go, например, через изучение курсов или написание простых скриптов.
Как это будет:
🟠Ты получишь оффер в команду Купер.тех без понижения грейда.
🟠Будешь обучаться через практику на реальных продакшн-задачах Купера.
🟠Сможешь перенять опыт наставника внутри команды, который поддержит тебя в период обучения.
⚡️Осваивай Go с первого дня работы на задачах в Купер.тех — узнай больше о программе и подай заявку по ссылке.
💬 Купер.тех
Реклама. ООО «ИНСТАМАРТ СЕРВИС», ИНН: 9705118142. Ерид: LjN8KD9f4
#день дня
С Днём программиста, дамы и господа!
Уж так принято называть 256-й день в году. Жаль, не выходной 💻