11622
Авторский блог Senior JavaScript-разработчика из Хельсинки По рекламе: https://t.me/it_adv https://telega.in/channels/htmlshit/card?r=GLOiHluU Чат канала: https://t.me/htmlshitchat Автор: @bekharsky
Прокачай свои скилы с Алексеем Рыбаком! 🚀
Надоели скучные задачи по программированию? 💻
Время перейти на новый уровень!
🎖Приглашаем бекендеров и инженеров инфраструктуры на уникальный трехмесячный курс по системному дизайну и архитектуре высоконагруженных систем от Алексея Рыбака, главы разработки Bumble/Badoo с 20-летним опытом в highload проектировании.
В чем ценность этого курса?
✅ Огненная практика с первых дней обучения на реальных кейсах и собственной инфраструктуре
✅ Погружение «под капот» хайлоад систем, изучение паттернов и приемов масштабирования
✅ Топовые фишки и знания по архитектуре проектов и системному дизайну больших проектов (1-100M DAU)
✅ Живые сессии, брейнштормы, проектирование “у доски”
На выходе у вас появится опыт:
✅ Проектирования сложных систем
✅ Нагрузочного тестирования своей инфраструктуры (выжмете 100К запросов)
✅ Планирования ресурсов для проектов с большим количеством пользователей
✅ Масштабирования IT-проектов
✅ Практический опыт работы с кластерами Redis, CockroachDB и шардированными PostgreSQL/MySQL
✅ И многое другое!
➡️ Регистрируйся и погружайся в нескучный хайлоад
Реклама ИП Рыбак А. А. ИНН 771407709607
#инструмент дня
К посту про вырезание углов из элементов, забыл напомнить, что у автора имеется целый ресурс с различными фигурами, эксплуатирующими CSS mask.
Вот, например, плавный полукруглый "кусь", подобный тому, что описан в статье: https://css-shape.com/inner-curve/
При этом, кстати, вырезание круга с "острыми краями" происходит сильно, сильно проще: https://css-shape.com/circle-cut/
Крутейший инструмент.
#css #mask
#такое дня
Я не плачу, это дождь.
И ref в пропсах.
Запись в блоге разработчиков React: https://react.dev/blog/2024/04/25/react-19#ref-as-a-prop
Кодмод, пока нет официального: https://codemod.com/registry/react-19-remove-forward-ref
Яндекс продолжает «делиться» культурой и вайбом компании, запуская нестандартные ивенты для специалистов.
Недавно прошел «Код-пленэр» — ивент на природе, где разработчики общались, слушали лекции про творчество в IT и «рисовали» кодом цифровой лес.
Это далеко не первое мероприятие, помогающее разработчикам перезагрузиться и сменить привычную обстановку. До этого компания уже провела IT-стендап, «код-хоппинг» и открыла зимний коворкинг в горах Сочи и на крыше музея современного искусства.
В общем, в будущем ждем новых пространств, где можно вдохновиться и понетворкать.
#codepen дня
К посту про interpolate-size: allow-keywords и о том, что теперь можно анимировать высоту, отлично подойдёт сегодняшний кодпен от Адама Аргайла.
Демо: https://codepen.io/argyleink/pen/BaXyJRL
Этот же кодпен является прекрасной иллюстрацией, что ничего не случится, если анимации не будет (а не будет её в Safari и Firefox).
Кстати, там же можно увидеть применение селектора :user-valid, а именно, концепции грязных полей: чтобы показать поле пароля в первый раз, надо сойти с поля ввода имени, blur; но после этого поле считается грязным и ввод пароля появляется моментально.
Грязное — потому что пользователь потрогал. И наверняка, немытыми руками.
Ну чо вы начинаете, это известный концепт почти во всех библиотеках работы с формами. Вот в React Hook Form, например.
Если кто-то не понял, что происходит в кодпене, есть поддерживающая статья: https://nerdy.dev/interpolate-size
#css #animate #height
#фишка дня
А заодно поддерживающая #статья.
Итак, анимация height до auto-значений!
Я не могу написать «я джва года ждал», потому что лично я ждал больше 12 лет!
Да, у нас была анимация min-height (максимально мерзко выглядящая). Да, год назад нам дали анимацию гридов, что скрашивало существование, но заставляло добавлять лишние обёртки.
И вот оно, свершилось! В Google Chrome 129 появилось свойство interpolate-size: allow-keywords, дающее возможность, полностью сохраняя обратную совместимость, включать интерполяцию контентозависимых свойств узлов до auto!
В них входят: width, height, min-content, max-content, fit-content и так далее.
Да, в остальных браузерах речи о поддержке пока не идёт, но это не та вещь, за которую стоит воевать. Ну не будет анимации и не будет, не страшно.
Кодпен с иллюстрации к посту: https://codepen.io/alinaki/pen/abezWpO
Только посмотрите, как просто:
:root {
interpolate-size: allow-keywords;
}
p {
transition: 1s;
overflow: hidden;
}
p:not(:hover) {
height: 5lh;
}
lh aka line-height. Ну просто красота.
#статья дня
Строго говоря, мало кому интересно читать о том, как некий разработчик в очередной раз переписал свой блог на очередной набор современных и даже, возможно, крутых технологий.
Вот только этот некто сегодня — Джош Комо, а это значит, его блог полон интерактивных примеров по вёрстке и фронтенду вообще, различных сниппетов кода, забавных анимаций и даже realtime пасхалок, для которых нужно некое хранилище данных.
Да и вообще, интересно последить за ходом мысли при выборе технологий, поэтому, вот: https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/
Из забавного, исходный код блога недоступен на гитхабе, но Джош намеренно оставил сорсмапы, поэтому можно прямо там посмотреть как сделан тот или иной компонент. Довольно интересное решение, поскольку непосредственно исходный код содержит в себе черновики, а публиковать их Джош не хочет.
Очень крутая работа, на самом деле.
#react #next #blog
#такое дня
Есть у меня некое предубеждение к продуктам, которые распространяются через инфлюенсеров. Как, например, браузер 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
Увидимся!
Часто ли у вас плывет код перед глазами? Чтобы такого не допускать, важно вовремя переключаться. Например, сменить рабочее пространство вокруг себя!
С такой идеей Яндекс открыл коворкинг в Парке Горького на крыше Музея современного искусства «Гараж», где воплощается концепция баланса между работой, искусством и технологиями.
Здесь можно покодить под открытым небом, поиграть в пинг-понг или читать книгу, а после остаться на кинопоказ или паблик-ток.
Кстати, локацию выбрали не случайно. Почти в каждом офисе компании есть обустроенные крыши и балконы — на них работают и отдыхают, обмениваются идеями, встречают дни рождения и провожают закаты.
Коворкинг открыт для всех, но бронировать место лучше заранее: слоты уходят быстро.
#ссылка дня
Немного неожиданного контента. Скорее, для личного пользования, но вдруг кому зайдёт.
Мне сегодня понадобилось имитировать звук... помпы на заправке. На детской площадке была игрушечная заправочная станция для беговелов. Дочке было надо.
И тут я вспомнил, что не кто иные как BBC выложили на днях свою библиотеку звуков в свободный доступ: https://sound-effects.bbcrewind.co.uk/search?cat=Machines
Какое-то невероятное количество просто.
Если вам вдруг нужно озвучить презентацию, открытый проект или игру — милое дело. Отлично заходит на дейли, кстати.
Но для коммерческого использования придётся договариваться.
Я честно не знаю, зачем и в какой ещё момент это может понадобиться лично мне — но звук падающей в слот монетки поставлю на оценку задач на backlog refinement :)
#sound #content
Интернет вещей, блокчейн, цифровые двойники и экосистемы — если это для тебя не просто слова, то не упусти свой шанс стать частью команды столицы! До 20 октября подавай заявку на оплачиваемую стажировку в Правительстве Москвы.
Ты учишься на последнем курсе или недавно стал выпускником? Хочешь работать над масштабными цифровыми проектами? Тогда эта программа точно для тебя, ведь за полгода ты сможешь:
✔️принять участие развитии столичных цифровых проектов: mos.ru, Цифровой двойник города, ЕМИАС, МЭШ и многие другие
✔️освоить ключевые навыки для эффективного управления проектами, тестирования, бизнес- и дата-аналитики, разработки, UX/UI-дизайна, технической поддержки или информационной безопасности
✔️выбрать удобный формат работы, совмещать стажировку с учебой и получать конкурентную зарплату
✔️показать свой потенциал и получить приглашение на постоянную работу в Департамент информационных технологий Москвы
ИТ-стажировка в Правительстве Москвы — это обучение самым востребованным навыкам, шесть месяцев работы в амбициозной команде и реальный шанс дать мощный старт своей ИТ-карьере!
Присоединяйся к команде лучших!
Реклама. МГУУ им Ю.М. Лужкова ИНН:7729026306
#фишка дня
Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.
Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.
Но есть решение! Правило display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.
Демо: https://codepen.io/alinaki/pen/abeOjKw
Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/
Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.
Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.
Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents
Спасибо Весу Босу за напоминание об этом.
#css #display #contents
#статья дня
На картинке — не вырезка из учебника геометрии за 8 класс, а иллюстрация к описанию методики расчёта вырезания углов из ваших дивов и прочих секшенов.
И взято оно из очередной статьи Темани Афифа, посвящённой созданию различных фигур. У нас уже были звёзды, сердца, ленточки, треугольники.
И теперь пришёл черёд углов: https://verpex.com/blog/website-tips/how-to-create-shapes-with-inner-curves-using-css-mask
И реализовано всё на CSS Mask: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
Описываете маску, накладываете на фигуру — красота.
.shape {
--r: 25px; /* the radius */
--s: 40px; /* the size of the cut */
--_m:/calc(2*var(--r)) calc(2*var(--r))
radial-gradient(#000 70%,#0000 72%) no-repeat;
mask:
right calc(var(--s) + var(--r)) top 0 var(--_m),
right calc(var(--s) + var(--r)) var(--_m),
radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%)
calc(-1*var(--r)) var(--r) no-repeat,
conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0);
}
#рекомендация дня
Не так часто, как хотелось бы, приношу вам что то действительное годное от моих знакомых, но тут могу порекомендовать.
Есть ребята из компании 53xapps, занимаются созданием сайтов и автоматизацией бизнеса. Ну и вот они решили запилить свой собственный курс по Frontend разработке.
Конкретно: введение в алгоритмы, HTML/CSS, JavaScript и Vue.js.
Разработка курса заняла около полугода. Большое количество видео и практики.
Подход к обучению немного отличается от других курсов: сперва несколько уроков вас учат понимать алгоритмы и рисовать блок-схемы. После этого обучение становится более осмысленным.
Курс довольно плотный, тестовые студенты проходили его по 15-20 часов в неделю 4 месяца, но сейчас есть возможность проходить курс в спокойном собственном темпе. Все для вас 🙂
Освоите JavaScript, HTML/CSS, Vue.js. Познакомитесь с несколькими популярными библиотеками. Для старта во фронте вполне достаточно.
Есть несколько бесплатных уроков, можно попробовать и пощупать.
Итак, цена. 5000 рублей. А подписчикам канала промокод HTMLSHIT даст 1000 рублей скидки.
Программа курса и бесплатные уроки доступны по ссылке.
#frontend #HTML #CSS #JavaScript
Хочешь щёлкать задачи по фронтенду как орешки?
Канал Frontend tests & tasks научит!
Это не очередной канал с задачами. Здесь придется думать.
Убедись сам 👉 @Frontend_tasks
🚀 ИТМО назвал компании, которые активно развивают Open Source в России
Участники оценивались по количеству опенсорс-проектов в сфере ML/Data, их популярности, качеству репозиториев и активности контрибьюторов.
Лидером рейтинга с лучшими результатами стал Яндекс. Среди наиболее популярных решений:
CatBoost — библиотека для градиентного бустинга на деревьях решений, используемая для ускорения работы алгоритмов.
YTsaurus — мощная платформа для хранения и обработки больших данных, востребованная в различных отраслях.
YDB — отказоустойчивая распределённая SQL база данных, обеспечивающая высокую доступность и масштабируемость.
Также в топ вошли Сбер и Т-Банк, а в академической среде ИТМО, ВШЭ, МФТИ и Сколтех.
Подробности исследования на Хабре.
#фишка дня
Да неужели! Да ну наконец-то!
Уже сколько нас кормят тем, что уже давно можно смело нативно валидировать формы, а нормального менеджера состояний в девтулзах так и не было. Пойди выставь что-то отличное от 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"