14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#инструмент дня
Я много обещал рассказать о сетапе для разработки веба, но руки не доходили. Так что приходится кусочками 🙂
Если кто общался со мной в чате, знает: первая рекомендация для работы — это Node Version Manager, nvm.
Зачем управлять версиями ноды? Oh, sweet summer child...
Ну, как минимум, проекты не всегда переводят на поддержку самых последних версий, даже всеми любимые фронтенд-утилиты. Да и legacy strikes back.
Но nvm не самое быстрое и удобное решение, она ставит ноду глобально, приходится между проектами переключаться ручками. Инициализация нового терминала может занять до нескольких секунд. Ну, мягко говоря, неудобно для работы со множеством людей и проектов.
И тут на сцену выходит Volta: https://volta.sh/
Написана на Rust, быстро инициализируется, позволяет задать нужную ноду прямо в package.json! В итоге переключился на новый проект — и у тебя уже другая версия Node.js
Настоятельно рекомендую попробовать, даже если ты индиго на острие технологий.
#js #node #nvm #volta
Любите котиков так же, как их любим мы? Тогда просто посмотрите на это — ребята из AvitoTech сделали очень крутой лендос и на примере объявления о поиске дома для кота рассказали, как всё выглядит изнутри.
Если вы так же, как мы, думали, что Авито — это просто доска объявлений, то ребята точно вас переубедят. Вы не поверите, насколько сложные процессы там происходят.
Скроллинг в виде клубка ниток — наша отдельная любовь. В общем, переходите на сайт и читайте про работу ребят — это реально очень интересно!
Реклама. ООО «Авито Тех». LdtCKAHMX
#заметка дня
Есть такой элемент — template. Название говорит само за себя: это шаблон.
Пишете в него некий HTML/SVG код, потом клонируете и вставляете куда вам надо.
На этом месте апологеты фреймворков ухмыльнулись, но вы же не одни на свете, да?
const content = template.content. firstElementChild.cloneNode(true);
div или — привет из прошлого — script type="text/template"?dd храните там, хоть tdtemplate и точно не индексируют. А с div hidden всё не так однозначно.
#хорошее дня
Если ваше ретро не похоже на это, даже не пытайтесь меня приглашать в свою компанию!
Результат в комментариях. Ребята из Ugears, конечно, делают вещи :)
#work
Недавно в Авито открыли две классные позиции для бэкендеров разного уровня.
➡️ Бэкенд-разработчик в Автохаб
Вы:
- Имеете опыт коммерческой разработки на Go или PHP;
- Знаете SQL, работали с реляционными БД;
- Знаете базовые принципы построения архитектуры;
- Умеете писать поддерживаемый и тестируемый код.
➡️ Старший бэкенд-разработчик в команду внутренних проектов
Вы:
- Имеете опыт коммерческой разработки на Go от 2 лет;
- Разрабатывали многопоточные приложения;
- Знакомы с Linux и умеете работать с командной строкой;
- Знаете SQL, работали с реляционными БД;
- Любите и умеете писать тесты;
- Имеете опыт проектирования систем с нуля;
- Умеете проводить код-ревью.
ЗП обсуждается с кандидатами лично, но вот что предлагают прямо сейчас:
- Талантливая команда и возможность реализовать свои идеи в проекте с многомиллионной аудиторией;
- Мощное железо, дополнительные мониторы и всё что нужно для комфортной работы;
- Прозрачная система премий;
- Личный бюджет на обучение, который можно тратить на книги, курсы и конференции;
- ДМС со стоматологией с первого дня;
- Удалёнка.
Если нашли для себя что-то интересное, советуем не откладывать и сразу переходить по ссылкам.
#инструмент дня
Не так давно Ахмад Шадид (Ahmad Shadeed) выпустил статью и проект с названием DefensiveCSS: https://defensivecss.dev/
Название проекта — "защитный" CSS — будет точнее переводить по смыслу как "устойчивый". Это набор простых практик, как сделать вашу вёрстку чуть-чуть умнее, чуть-чуть гибче, чуть-чуть предсказуемее.
И это "чуть", применённое на всём проекте, превращается в раскладку, которую довольно сложно сломать неверным контентом или экраном странного разрешения.
Я это всегда называл гигиеной кода, но не догадался свести воедино 🙂
Так вот, вспомнил я о нём потому что мой бывший коллега Даниэль Ющик (
Daniel Yuschick) выкатил плагин для Stylelint, проверяющий ваш CSS на наличие defensive-практик.
Собственно: https://github.com/yuschick/stylelint-plugin-defensive-css
Если у вас на проекте нет линтера стилей — ну не страшно, ознакомьтесь с проектом DefensiveCSS и не совершайте глупых ошибок.
#css #stylelint
#такое дня
Я как-то под новостью о том, что браузеры начали внедрять очередной виджет форм (selectmenu) написал, что браузеры ни один элемент форм не сделали нормально. Собеседник обиделся.
Но даже такой простой элемент как текстовое поле (input type="text") не обошёлся без проблем. Мы уже знаем, что size="1" неправильно работает в Firefox потому что IE. А теперь ещё интересного: атрибуту maxlength нельзя слепо доверять.
Что делает maxlength? Не даёт ввести в поле символов больше, чем указано. Если вставите — браузер обрежет (уже звоночек).
Дальше веселее.
Эмодзи во всех браузерах считаются по глифам, и только Safari — считает за 1 символ. Ссылка на баг: https://bugs.webkit.org/show_bug.cgi?id=252900
Поведение Safari верно с точки зрения человека, но... браузеры пишут инженеры.
Ещё из проблем — скринридеры никак не оповещают о том, что длина превышена. Сплошное веселье.
В любом случае, не забывайте, что ничему приходящему со стороны браузера в принципе доверять нельзя.
#html #maxlength #bug
#инструмент дня
Кто слышал о Modernizr? Поднимите руки 🙋
В общем, этот инструмент тестирует возможности браузеров на поддержку каких-либо фишек HTML5/CSS3 и далее и позволяет, например, условно подключать полифиллы или применять какие-нибудь иные методы обхода. Особенно удобно когда `@supports`-правила могут не работать или — сюрприз — не поддерживаться вообще.
Ну и одной из фишек является добавление классов со списком поддерживаемых фич. Вроде js flexbox flexboxlegacy canvas canvastext webgl и так далее.
На рынке он давно, потому интересно, какие же есть альтернативы.
И вот свежий проект SupportsCSS. Сфера его работы в целом такая же, как у модернайзера, но ориентирован уже на современные селекторы CSS. Так сказать, стряхнуть лишнее.
Как всегда, следует помнить, что оба инструмента не полифиллы, но подсказка.
#css #supports #modernizr
#игра дня
Ну что, обучающие игры у нас уже были: тарелки на флексах, лягушки на флексах, огород на гридах, tower defence на флексах, ну и сборники всего и сразу.
Давайте бахнем хардкором: https://css-challenges.com/
Ваша задача – повторить изображённое на экране минимальным числом правил. Есть обучающий блок. Все задачи поделены на уровни. Встречаются и крайне упоротые 👀
Коллекция пополняется, в том числе и сообществом. Есть прекрасный раздел Tips&Tricks в котором полно неочевидных фишек и сниппетов.
Дерзайте 🔥
P. S. было бы глупо не упомянуть заодно о https://cssbattle.dev/
Там, кстати, небезызвестный Илья Стрельцын в лидерах :)
#css #game #бородач
#статья дня
Каким-то образом View Transition API ещё ни разу не освещался на канале. Пришло время это исправить! Особенно учитывая, что соответствующая статья разработчиков Chrome как раз недавно обновилась: https://developer.chrome.com/docs/web-platform/view-transitions/
Итак, что такое View Transitions API?
Это, собственно, то, что раньше называли page transition: анимации перехода между страницами сайта. Реализовывалось по разному в разных системах, помните PJAX? Хорошая была штука.
Ну да ладно, в общем, суть в том, что теперь можно браузеру объяснить, как конкретно применять изменения к DOM, какой элемент за каким закреплять и что делать с остальными.
В статье огромное число примеров, от простейших патчей дерева до анимирования нескольких элементов разом.
Бебебе анимации замедляют работу! Да, но замедляют, отвлекая пользователя. Об этом, впрочем, будет выложен видосик.
Ну и ещё пример анимации грида: https://codepen.io/bramus/pen/VwEXmqd
Никаких плагинов! Будущее здесь 🙂
#css #view #transition
#фишка дня
It's hardcore time! Prepare to abandon the channel 🤪
Является ли CSS языком программирования?
Тьюринг-полным — нет. Но CSS — де-факто — это декларативный язык описания интерфейсов, и развитие его идёт в этом направлении довольно чётко.
Впрочем, fizzbuzz на CSS решается даже слишком элегантно: https://codepen.io/SachaG/pen/nwazRo
Так вот, к чему это я. Вы вообще в курсе, что в CSS есть типы? А они есть. И на их основе можно реализовать некоторые математические функции.
Тригонометрические вон завезли недавно, а математические пока только в Safari.
Давайте попробуем исправить это недоразумение и реализуем abs, floor, round, ceil, mod и rem на CSS и его типах. Начнём с модуля:--abs: max(var(--a), -1*var(--a));
Поняли, что тут произошло? Выбрали максимальное между a и -a. Очевидно, что положительное всегда будет максимальным, его и берём.
Теперь к сути дела. Давайте реализуем round:@property --round {;
syntax: '<integer>';
initial-value: 0;
inherits: false
}--round: var(--a);
Вот щас может стать немножечко больно: мы объявили переменную (custom property, для зануд) --round и указали CSS, что её тип — целое число. Теперь браузер возьмёт и... и округлит значение математически при присваивании (опять для зануд: да, это де-факто присваивание).
А как сделать floor — округление вниз? Как-как:--floor: calc(var(--a) - .5);
А ceil — округление вверх? --ceil: calc(var(--a) + .5);
Естественно, перед этим надо объявить переменные --floor и --ceil как целые числа.
Кажется, уже стало немного больно, поэтому получение знака числа и двух разных остатков по делению реализуем потом.
Пока можете подумать, где это применить 😉
#css #types
#ссылка дня
Я не особо люблю монстров вроде Next.js. В особенности, он и ему подобные фреймворки вводятся как дефолт, но, надо признать, для индустрии они делают достаточно много.
Итак, все же любят примеры, верно? Давайте взглянем на подборку и статью от Адди Османи. Что же в ней такого?
А тем, что тут и Next.js-роутер и Server Components, с пылу с жару от Next.js 13: https://addyosmani.com/blog/react-server-components-app-router/
Пора осваивать гибридный подход, господа! :)
#react #nextjs #servercomponents
На проектную работу требуется web-разработчик с опытом работы с Three.js или a-frame.Проект связан с задачей компьютерного зрения. Необходима помощь в генерации небольшого тестового датасета изображений для ml-специалиста и потом интеграция результатов его работы в уже существующее опенсорсное решение.
Мы - компания https://metadreamteam.io/
Мы амбициозная команда XR разработчиков и 3Д артистов, которая делает проекты для всего мира! От Екомерс до real estate. От внедрения лучших решений на рынке до создания своих разработок с нуля.
В 2025 году мы хотим стать #1 компанией в сфере XR. А для этого мы всегда в поиске талантов и самых сильных игроков на рынке!
Если ты хочешь работать с лучшими в индустрии, делать амбициозные проекты и зарабатывать в валюте - тогда заполняй эту форму, чтобы присоединиться к нам!https://forms.gle/s9drt7WR4UP7KfoL9
#codepen дня
May the Fourth be with you!
https://codepen.io/jh3y/pen/abzvyXG
#фишка дня
Селекторы атрибутов штука довольно удобная если правильно их использовать. Особенно хорошо они раскрываются с aria-атрибутами вроде aria-hidden, aria-pressed и так далее.
Да даже элементарные кнопки соцсетей весьма неплохо выглядят в виде data-social=“twitter”, чтобы не замусоривать пространство классов. Или вообще a[href*=“twitter.com”], если собрались на символах экономить.
В React строить API компонента на data-атрибутах тоже выходит весьма и весьма элегантно.
Вот только есть нюанс: селекторы атрибутов — регистрозависимы. Чтобы сделать их независимыми — стоит добавить модификатор i, то есть:
[data-social=“twitter” i]
Свалидирует
<div data-social=“Twitter”>
<div data-social=“twitter”>
<div data-social=“TWITTER”>
…ну и если хотите ровно наоборот — есть модификатор s. Но оно совсем новое и для частных случаев, которые по-умолчанию и так регистронезависимы (вроде type, checked, disabled).
#attribute #css #case #бородач
#ссылка дня
По какому принципу разделяются позиции Junior, Middle, Senior, Lead, Principle?
Что отличает Engineering Manager от Lead Developer?
Почему часто отказываются от именований, что я представил выше, используя старые добрые слесарь шестого разряда?
На все эти вопросы даёт ответ т. н. матрица компетенций. Суть — таблица, где прописаны желаемые знания и умения по каждому из уровней, в нашем случае, инженеров. Иногда с чёткими примерами (тесты пиши, да).
Я не могу поделиться матрицей компетенций нашей компании (разрешения не спрашивал), но наткнулся на весьма интересную и достаточно полную от некой австралийской консалтинговой компании.
Собственно, вот: http://eng-skills-matrix.expert360.com/
По подобной матрице проходят performance review и решения о повышении зарплаты или вертикальном/горизонтальном переводе сотрудников.
Ну и как роадмап вполне можно использовать (хотя ссылки на отдельные роадмапы тоже есть).
Развивайтесь, котаны!
#matrix #work #competence
#инструмент дня
Вы, конечно, все в курсе, что порядок подключения ресурсов сильно влияет на скорость отображения страницы, на TTI — время от начала загрузки до возможности работы со страницей. Но как конкретно? Как точно выяснить, в каком порядке и что загружать?
И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js
Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javascript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.
А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана: https://youtu.be/uqLl-Yew2o8
#css #js #performance
#фишка дня
У каждого уважающего себя веб-разработчика помимо всех используемых клиентами браузеров имеются их Nightly или Canary-версии. Ну или Technology Preview для самых умных.
Зачем это надо? Чтобы пробовать новые фишечки, конечно же!
Итак, некоторое время назад я писал о том, что совсем скоро в CSS можно будет описывать scroll-зависимые анимации. И вот это время неумолимо надвигается!
Берём Chrome Canary 115 и заходим сюда: https://scroll-driven-animations.style/
Это набор демок от самого Ван Дамма. Правда, Брамуса 🙂 Он деврел в Google (сколько их у гугла развелось...)
Брамус давно занимается CSS scroll-анимациями и помогает сформировать спецификацию.
Настоятельно рекомендую попробовать! Полифиллы имеются, если что.
#css #scroll #animation
#инструмент дня
Миграции с JavaScript на TypeScript часто заходят не туда. Или не заканчиваются. Или откатываются. Зачастую в лучшем случае весь новый код начинает писаться на TypeScript и всё на этом.
Да, ещё не факт, что оно вам надо вообще, но это тема иной беседы.
Итак, с чего же начать вашу миграцию если автоматизированные средства, расставляющие везде any, вам не подходят, а //@ts-nocheck — для быдла?
Начните с модулей с наибольшим числом зависимостей, говорит нам Matt Pocock, а он в общем-то в курсе, о чём утверждает, он учит людей тайпскрипту фулл-тайм :)
А как найти эти самые модули? Очень просто, возьмите построитель диаграмм зависимостей. Madge вполне подойдёт: https://github.com/pahen/madge
Ну и никто не мешает весь новый код писать сразу на TS.
#typescript #javascript #ts #js #diagram #deps
Как мы сделали незаметную капчу?
Как сделать так, чтобы капча работала и отсеивала ботов, а пользователям не приходилось вводить текст с картинки? На этот вопрос отвечают разработчики Yandex SmartCaptcha — в статье они делятся историей создания сервиса, рассказывают про изменение кода, рефакторинг архитектуры, невидимую для пользователя проверку и заботу о людях.
Читайте статью в новом блоге Yandex Cloud и Yandex Infrastructure на Хабре, и не забудьте подписаться, чтобы не пропустить истории о том, как мы строим инфраструктуру Яндекса и делаем публичную облачную платформу.
Это — Антон Резник, у него более 12 лет опыта во фронтенд-разработке. Кто, если не он, научит вас делать серьёзный фронтенд?
Антон с нуля создал веб-версию Telegram на базе собственной реализации реактивного UI-фреймворка. А ещё однажды он написал систему «Умный дом» для своей квартиры на чистом JavaScript!
Сейчас Антон тимлид в команде рекламы ВКонтакте, где создаётся frontend нового рекламного кабинета. Его работа состоит из сложных архитектурных решений, задач производительности и интеграций с другими командами.
Вместе со своими коллегами с не менее классным опытом, Антон собрал весь свой опыт воедино на курсе Frontend. По секрету расскажем, что там действительно много практики и инсайтов индустрии.
Так что если вы junior+ или middle фронтендер и хотите научиться работать над масштабными проектами, вам сюда!
Новый поток стартует 18 мая, а по промокоду HTMLSHIT20 вы получите скидку 5%.
[Начать обучение]
#реклама
#фишка дня
Многие (к сожалению, не все) кто хоть раз разрабатывал формы, сталкивались с элементом label (лейбл, ярлык, как вам угодно). И знают, что при правильном его использовании пользователю не приходится целиться мышью в галочку или радиокнопку.
Кто-то добавит при этом, что скринридеры могут ассоциировать лейбл с элементом ввода и пользователи с нарушением зрения могут легко сориентироваться в вашей форме.
Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ
Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!
Но в лейбл можно добавить дополнительную информацию, которая будет однозначно и семантично связана с кнопкой и поможет, например, скринридерам или при создании тултипа.
Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.
А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.
#html #button #label #бородач
Нашли кое-что действительно интересное для тех, кто хочет создавать тренды в мире технологий.
⚡️ South HUB — кэмп для руководителей в ИТ, который пройдет с 12 по 16 июня в Сочи.
400 настоящих и будущих CTO соберутся на Курорте Красная Поляна, чтобы обменяться знаниями, опытом и найти партнеров. Нетворкинг начинается ещё до кэмпа: все CTO уже собрались здесь.
Кэмп про профессиональное развитие с акцентом на work-life-balance. Программа включает в себя обширную конференц-часть, отдельный день спорта, серию вечеринок и детскую научно-исследовательскую конференцию.
Где встречаемся?
На высоте 960 всесезонного горного Курорта Красная Поляна⛰
Вся информация тут.
#баг дня
Один браузер для всех это же так прекрасно, не правда ли?
И... нет. К сожалению, этот мир не будет прекрасным. И характеризуется такое положение некоторыми багами, которые разработчики Google Chrome отказываются решать годами.
Например, этот: https://bugs.chromium.org/p/chromium/issues/detail?id=914451
TL;DR: такое количество боли в комментариях мало где найти можно. Причина? С 2014 года игнорируется атрибут autocomplete="off" на формах.
К чему это приводит? К сломанным виджетам выбора с автоподстановкой (autocomplete, combo-box), сломанным интерфейсам выбора даты, к ошибочным заказам в интернет-магазинах... Да просто почитайте поток ненависти 🙂
Зачем это было сделано? Ну им нужно было продвигать свои фичи для логина, управления паролями, адресной книги.
Количество предложенных хаков для исправления огромно, от contenteditable вместо полей ввода до рандомных строк в autocomplete.
Дискуссия ещё и перегибает палку там и очень часто. Потрясающее чтение, рекомендую.
#chrome #google #evil
#ссылка дня
"The journey of the React Component" — "Путь компонента в React", буквально — вот так незамысловато называется интерактивный проект Алекса Сидоренко: https://alexsidorenko.com/react-journey
Его цель — провести вас по всем основным процессам, происходящим во время рендера компонента, включая хуки. На данный момент рассмотрен только useState, но начинание уже очень крутое. Кому-то, возможно, будет понятнее, чем чтение статей и исходников React.
Правда, я не сразу понял, что где-то можно кликать, а где-то нет... 😅️️️️️️ Но то такое.
#react #render #tutorial
Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен.
С 10 по 16 мая проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения.
За эти 7 дней обучения ты:
1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Узнаешь сколько можно зарабатывать и как работать;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов.
👉 Проскочить на интенсив бесплатно
#книга дня
Я уже писал года два назад о книге
Web Browser Engineering, описывающей разработку простого браузера с нуля: https://browser.engineering/
Но они же не останавливались, и последняя на данный момент часть — про встраиваемые элементы — вышла в марте.
Описываются все сложности, преследующие разработчиков на каждом этапе разработки. Естественно, свой Chrome написать после прочтения не выйдет, но лучше понять, как работают браузеры — вполне.
Но в любом случае, чтение достаточно хардкорное :)
#python #dev #browser
#фишка дня
Полтора года назад я разгонял тему про реализацию виджета аккордеона. Ну или collapsible, иначе говоря: /channel/htmlshit/591
Суть проблемы в том, что браузеру неизвестна высота внутренностей аккордеона до его раскрытия, потому любой схлопывающийся элемент — это набор хаков.
Но тут такое дело... в Firefox уже достаточно давно можно было анимировать высоту ячейки грида через grid-template-rows: /channel/htmlshit/834
И вот теперь, наконец, можно и в Chrome и в Safari! Ура, дамы и господа!
Codepen c примером: https://codepen.io/chriscoyier/pen/wvxwgae
Счастье есть, короче говоря.
#css #accordion #collapsible #бородач
Добавили сканер уязвимостей в Yandex Container Registry
Платформа Yandex Cloud открыла общий доступ к сканеру, который до этого был доступен только в режиме превью.
С помощью него вы можете:
— проводить анализ контейнерных образов на предмет уязвимостей;
— использовать крупнейшую базу уязвимостей;
— сканировать образы при непрерывном развёртывании приложений;
— создавать CI-сценарии для проверки безопасности.
Из нового — теперь можно сканировать контейнерные образы автоматически при загрузке.
Сканер уязвимостей работает только с образами из Container Registry.
Подробнее о сканере уязвимостей ➡️