htmlshit | Unsorted

Telegram-канал htmlshit - Будни разработчика

14544

Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat

Subscribe to a channel

Будни разработчика

Итак, котаны, розыгрыш билета на конференцию Podlodka Crew! Описание и тематика конференции выше. Отмечаемся!

Читать полностью…

Будни разработчика

#codepen дня

Тут нужно краткое предисловие.

Где-то с неделю назад, Google опубликовали исходный код операционной системы умных часов Pebble.

Вы, наверное, вряд ли помните о них, но это, собственно, были первые умные часы. Они и проложили дорогу всем остальным, начавшись просто как проект на Kickstarter.

ericmigi/why-pebble-failed-d7be937c6232">Судьба компании довольно трагична, но мы не о ней.

Дело в том, что их основатель и уговорил Google открыть исходный код, чтобы возродить те самые часы. Мотивация проста: писать софт — долго и сложно, дайте хоть что-то.

И он сделал забавный сайт — https://repebble.com/ — на котором изложил свою философию.

А меня, в свою очередь, чуток порвало с анимации выключения телевизора, которая происходит при нажатии на No. Порвало настолько, что я решил для вас её повторить 📺

Она простая и при этом очень крутая, никаких шейдеров и прочего: https://codepen.io/alinaki/pen/vEBoZOz?editors=0110

Заодно, пусть будет дежурным напоминанием: вам не нужны таймауты, чтобы управлять событиями по завершению анимаций. Для этого есть прекрасное событие animationend.

Хорошей пятницы, котаны!

#css #animation #animationend

Читать полностью…

Будни разработчика

#статья дня

Мой товарищ, а по совместительству автор библиотеки extended-fetch, принёс довольно интересную тему для обсуждения.

Fetch API давно стал стандартным способом работы с HTTP-запросами в JavaScript, но его реализация в разных рантаймах может отличаться.

Особенно это заметно, когда речь заходит о поддержке HTTP/2: этот протокол позволяет улучшить производительность за счет мультиплексирования запросов.

Когда пишешь код в браузере, fetch воспринимается как что-то само собой разумеющееся. Он просто работает, поддерживает полный спектр HTTP, и никаких проблем не возникает.

Рассмотрим, как обстоят дела с HTTP/2 в популярных JavaScript-рантаймах: Node.js, Deno и Bun.

Спойлер: речь о поддержке HTTP/2 и экзотическом случае, при котором доступно общение с сервером без фоллбэка на HTTP/1.1.


🦕 Победитель — Deno. Этот рантайм обеспечивает полноценную поддержку HTTP/2 в fetch без дополнительных манипуляций.

🩼 Костыльный победитель — Node.js. Здесь fetch основан на библиотеке undici, которая изначально не поддерживает HTTP/2. Однако, можно воспользоваться самим undici, минуя стандартный fetch, и получить желаемый результат.

🌚Проигравший — Bun. В этом рантайме более года открыто issue о поддержке HTTP/2, но пока что полноценной реализации нет.

Подытожим

Если вам нужна полноценная поддержка HTTP/2 в fetch, лучший выбор — Deno. В Node.js придется использовать обходные пути, а в Bun — просто подождать, пока разработчики добавят эту функциональность.

В общем, даже стандартные API могут работать по-разному в разных окружениях, поэтому всегда стоит проверять их поддержку перед использованием в продакшене.

Собственно, вот и статья: https://blog.disintegrator.dev/posts/http2-support-in-js-runtimes/

Там есть все примеры кода и клиента, и сервера.

Мнения?

#fetch #node #deno #bun

Читать полностью…

Будни разработчика

#фишка дня

Эмодзи вместо курсора? Нет ничего проще! Смотрим КДПВ и, конечно, пример: https://codepen.io/alinaki/pen/oNPpQrQ

Конечно, через SVG можно и более интересные курсоры создавать, только придётся через base64 кодирование прогонять: https://yoksel.github.io/url-encoder/

Ну а конкретно для эмодзи-курсоров имеется целый инструмент: https://www.emojicursor.app/

Всем 😜🙈🤡🤖, котаны!

#css #svg #cursor #emoji #бородач

Читать полностью…

Будни разработчика

Яндекс запустил рекламную кампанию «Пробовать — создавать», в которой показали, как создаются ключевые технологии компании: от Поиска, возможностей Умного дома до маршрутизации и прогноза пеплопада.

И всё это — с горой пасхалок к IT: я нашел отсылки к VIM, культовому шутеру DOOM и халату Цукерберга из фильма “Социальная сеть”. Остальные спойлерить не буду: некоторые лучше увидеть самим.

Читать полностью…

Будни разработчика

Если ты работаешь в IT, то скорее всего тебе знакомо:

📌Постоянная усталость, даже после выходных.
📌Просыпаешься ночью и больше не можешь заснуть.
📌Ощущение, что ты недостаточно хорош, даже если проект выстрелил.
📌Чувство тревоги из-за бесконечных дедлайнов, она сменяется апатией, мотивация падает.

Все это не «норма». Это выгорание, стресс и тревога, которые можно и нужно решить.
Екатерина Мельникова — профессиональный психолог, который помогает найти баланс между работой, личной жизнью и спокойствием.
На ее канале практические советы и пошаговые техники для улучшения сна и восстановления.

Ты уже успешно настраиваешь систему, сделай то же самое со своим внутренним кодом. Прокачай свою психологическую устойчивость и войди в 2025 году с энергией, ясной головой и уверенностью в себе.

👉 Подписывайся: @lovepsylife . Это может быть самым продуктивным шагом для вашего развития.

Читать полностью…

Будни разработчика

#фишка дня

Как заполнить фон целым количеством, например, кружочков или цветков?

Ну, вдруг, вы работаете в Маримекко

Очень просто! Используем background-repeat: space.

Работает аналогично флексовому space-between

И пример от Аны Тюдор: https://codepen.io/thebabydino/pen/RwXvryZ

#css #background #fill #бородач

Читать полностью…

Будни разработчика

#фишка дня

Новое — это хорошо забытое старое.

Многие любят это повторять, но не всегда — демонстрировать. И уж тем более — на ярких примерах.

Вот как вы сейчас делаете скруглённые углы на элементах?

Наверное, просто прописываете border-radius и всё, да? Даже не задумываясь, что годах так в 2006-2012 это правило не то чтобы не работало кроссбраузерно, а его и не было вообще.

Как же делали углы? А очень просто, CSS-спрайтом. Нарезали картинку скруглённого прямоугольника на 4-9 частей в зависимости от задачи и распихивали в нужные места. Пруф: https://bavotasan.com/2009/simple-rounded-corners-with-a-css-sprite/

При всей своей... забавности, метод позволял не обходиться простым радиусом. Он давал возможность делать и скошенные углы, и внутренние радиусы, и перфорацию, и градиентные границы... В общем, надо ли говорить, что до конца идея не умерла?

И я сейчас даже не про вёрстку писем

Правда, сейчас всё чаще для этой цели используются SVG- и контурные маски вообще.

Ладно, к чему это я такое большое введение выдал?

Тут по соцсетям в очередной раз прокатилась ода скруглённым углам на технике Apple. Как они все сочетаются и так далее. И что у них даже название своё есть: squircle.

Гусары, молчать

Вот, мы обсуждали тут: /channel/htmlshit/1258

И да, простое скругление на фоне сглаженного смотрится... грубовато.

Итак, вашему вниманию столь хорошо забытое старое: плагин сглаженных углов для Tailwind!

Вот: https://github.com/gtokman/corner-smoothing

Если зайти в код плагина, который на самом деле ни что иное, как просто описание CSS-класса, а значит, может быть использован кем угодно, мы найдём там тот самый спрайт, маску, если угодно, на SVG: https://github.com/gtokman/corner-smoothing/blob/main/masks/squircle.svg

Как-то так:


.continuous-corners {
mask-border: url("./mask@1x.svg") 49% fill / 75px;
}


А чтобы не гадать, каков результат работы плагина, можно посмотреть оригинальный пример: https://github.com/robb/Continuous-Corners-CSS

Или описание спецификации на mask-border на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border

В общем, забавно выходит. Столько боролись за нативную поддержку скруглений, а хочется больше и больше...

#css #squircle

Читать полностью…

Будни разработчика

#инструмент дня

AI-парсинг (скрейпинг, скраппинг) сайтов набирает обороты, но классические утилиты никто не отменял.

И среди таких утилит очень выделяется pipet: https://github.com/bjesus/pipet

Создаем pipet-файл:
curl https://news.ycombinator.com/
.title .titleline
span > a
.sitebit a


Ну и запускаем:
pipet hackernews.pipet

Красота? Не то слово. Более того, утилита умеет рендерить сразу в шаблоны, напоминающие Mustache:

<ul>
{{range $index, $item := index (index . 0) 0}}
<li>{{index $item 0}} ({{index $item 1}})</li>
{{end}}
</ul>

Ясное дело, никто не отменяет и ИИ прикрутить, если так надо :) Ну а вообще, поддерживаются пайпы, потому результат любой строки конфигурации можно пропустить через что угодно вообще. Да и запуск возможен не только curl-ом, но и Playwright.

В общем, я впечатлен. Надо брать.

#go #parser #scraping

Читать полностью…

Будни разработчика

#заметка дня

Автор прекрасной борды tldraw.com выложил вопрос-демонстрацию: «Как же отличить мышь от тачпада?» Ведь они, по мнению браузера, вроде как одно устройство ввода.

И на видео чётко видно, что на тачпаде скроллить во всех направлениях получается точнее, сильно точнее, чем мышью.

И ответ-то на самом деле кроется в вопросе: тачпад действительно отдаёт браузеру гораздо меньшее значение дельты (разницу в скролле между двумя опросами состояния), чем мышь.

И ему вроде даже дали ответ на StackOverflow: https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript

Приложу сюда кратчайший сниппет:


var isTrackpad = false;
if (e.wheelDeltaY) {
if (e.wheelDeltaY === (e.deltaY * -3)) {
isTrackpad = true;
}
}
else if (e.deltaMode === 0) {
isTrackpad = true;
}
console.log(isTrackpad ? "Trackpad detected" : "Mousewheel detected");
}

document.addEventListener("mousewheel", detectTrackPad, false);
document.addEventListener("DOMMouseScroll", detectTrackPad, false);


И пример: https://jsfiddle.net/ucLe3hLa/

Вот только из мышей у меня имеется Logitech MX Master 3 и её колёсико... слишком плавное. Даже в дискретном режим. Браузер опять же определяет её как тачпад :)

В общем, счастья нет. Действительно рабочего способа отличить мышь от тачпада — не существует.

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

#mouse #touchpad #event

Читать полностью…

Будни разработчика

Живете в Европе, а работаете на компанию из России удалённо? Тогда вам уже знакомы две самые частые проблемы при выводе денежных выплат:

1️⃣Как заключить контракт с заказчиком без упоминания РФ? За привязку к России в Европе сегодня не похвалят.
2️⃣Как правильно платить налоги, в России или в стране проживания? Можно потерять значительные суммы, если отсутствует соглашение о двойном налогообложении.

Для всего этого есть одно удобное решение — сервис Stape. Оформляем контракт с юрлицом из США — никаких опасных связей с РФ в официальных документах.

А также Stape помогает быстро, а главное — легально переводить деньги, отправленные из стран со сложностями с классическими банковскими переводами, на свой счёт в банке или криптокошелёк. Вы сможете:
📍свободно распоряжаться заработанными средствами,
📍выгодно платить налоги,
📍закрывать операции официальными документами.
📍Все функции сервиса доступны онлайн.

Переходите в Телеграм-канал сервиса, чтобы узнать больше о Stape — максимум пользы для тех, кто работает с зарубежными заказчиками.

Читать полностью…

Будни разработчика

Крутые комментарии надо выносить наружу!

Читать полностью…

Будни разработчика

#инструмент дня

Типичная айтишная история: кто-то на митинге шарит сверхширокий экран. Или вроде бы шарит окно, но забывается и растягивает его до невообразимого размера.

А коллеги с ноутбуками и телефонами страдают! Всё мелко, картинка сыпется.

Конечно, можно шарить с ноутбука, но я могу понять неудобство.

Есть сумасшедшие, кто с десктопа вообще сидит!

Поэтому, предлагаю решение! Виртуальный монитор, буквально.

Для macOS, например, это будет DeskPad: https://github.com/Stengo/DeskPad

Как работает? Создаёт окошко, которое будет работать как виртуальный монитор заранее заданного разрешения. Туда просто перетаскивается нужное приложение и шарится.

Для других ОС наверняка есть аналогичные решения. Если кто-то знает — накидайте в комментариях, я попозже и сам принесу.

Пошарил — и никаких проблем, работай как работается. И коллегам приятно.

#macos #display #remote

Читать полностью…

Будни разработчика

Ваша карьера в Frontend-разработке начинается в Авито 😎

Приходите на оплачиваемую стажировку в Авито. Здесь вы будете работать с продуктами, которыми пользуются миллионы.

Профессионально развиваться и расти вам помогут:
наставник — научит, как найти лучшее решение, и поможет разобраться в инструментах и технологиях
комьюнити стажёров — поделятся опытом и поддержат
доступ к базам знаний, библиотекам и корпоративным курсам — даст возможность нарастить экспертизу.

Стажировка открыта в пяти направлениях, вы можете выбрать два — основное и запасное. Если попасть на первое не удастся, сможете пройти отбор на второе при наличии мест.

Условия:
• длительность программы — 6 месяцев
• работа от 25 часов в неделю, после завершения стажировки — возможность остаться в компании на полную занятость
• зарплата и корпоративный ноутбук
• можно работать из офиса, удалённо или в гибридном формате.

Более 80% стажёров продолжают карьеру в Авито. Присоединяйтесь к команде и растите вместе с нами! Регистрация открыта до 5 февраля.

Читать полностью…

Будни разработчика

Программист - самая востребованная профессия в 2025!

Тогда почему ты опять не получил оффер?

Пока ты боишься говорить о деньгах и мямлишь про свой опыт, кто-то другой занял твое место. Чтобы HR выстраивались в очередь, приходи на лекцию от команды FAANG School.

Отдаем бесплатно то, что продают за бешенные деньги на карьерных консультациях.

- увидишь, как HR собеседует программиста в прямом эфире
- поймешь, как отвечать на неудобные вопросы про зарплату
- разберешь частые ошибки начинающих на собесах
- научишься представлять предыдущий опыт
- узнаешь, как говорить о своих сильных сторонах без пафоса
- поймешь, что нужно спросить у HR, чтобы понять уровень компании

Заберешь пошаговый план прохождения всех этапов интервью, с которым у тебя больше не будет отказов.

Приходи на эфир, чтобы выделяться среди конкурентов и самому выбирать офферы.

Читать полностью…

Будни разработчика

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

И в новом сезоне ребята решили разобраться, какие инструменты и знания включают в роадмапы профессионального развития и насколько они применимы.

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew

Промокод сообщества
react_crew_2_1XtXlU даёт скидку в 500 руб 🥳

Для моих подписчиков я завтра разыграю бесплатный билет на конфу. Делитесь новостью с друзьями :)

Читать полностью…

Будни разработчика

#немогумолчать дня

Котаны, такое дело. Сегодня у моего самого старого подписчика @dimovski день рождения.

Человек прошел путь от моего вопроса лет семь назад: «Накой тебе сдался битрикс? Не ломай себе жизнь!» до тимлида. И стоял у истоков канала и всячески поддерживает до сих пор.

Накидайте ему сердечек там штоле ☺️ Будет мой ему такой подарок 💝

Читать полностью…

Будни разработчика

Как живет айтишник, который зарабатывает 5000$ в мес?

Живет хорошо! За глубокие знания и умение решать самые сложные задачи его ценят в любой команде: от стартапа до крупной корпорации. А он умеет продавать себя, получать лучшие предложения на работу и эффективно распределять время.

Для этого нужно всего 5 минут в день читать канал айтишника.

Здесь вы найдёте практические советы, инсайды и секреты от разработчика с 11+ лет опыта, о которых не рассказывают на курсах.

5 минут на канале заменят месяцы самостоятельного изучения. Подписывайтесь: /channel/+O4flBVzd3Is4YWEy

Читать полностью…

Будни разработчика

#инструмент дня

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

Я, честно, не считаю вручную акцентированный градиент настолько лучше автоматически созданного по контрасту, но для основных, идейных изображений, наверняка кому-то пригодится.

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh #бородач

Читать полностью…

Будни разработчика

Когда в последний раз вы трогали свои сиксели?

Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.

Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.

📌 Что это такое?

Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.

Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.

Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!

🖼 Как смотреть картинки в терминале?

👉 Самый простой способ — lsix, это ls, но для миниатюр:

brew install lsix # macOS
sudo apt install lsix # Debian/Ubuntu Linux


А дальше просто запускаем:

lsix

и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.

🔄 Конвертация изображений

Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:

brew install libsixel
img2sixel myimage.png


А если у вас установлен ImageMagick, можно делать так:

convert myimage.png sixel:- #

Конвертирует и сразу выводит в терминал.

Если уже есть картинка в формате sixel, можно вывести её простым cat.

❓ Поддержка в эмуляторах терминала

Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/

Сразу скажу, что стандартный терминал в macOS — не умеет.

Очевидно, формат прекрасно подходит для разгого рода диаграмм и дашбордов.

В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄

#console #images

Читать полностью…

Будни разработчика

#инструмент дня

Не так давно мы с вами использовали 3D-преобразования в CSS для эффектного выбора персонажа: /channel/htmlshit/2969

Тогда получилось неожиданно хорошо. Но пришло время для настоящих 3D-моделей!

Сходу демо: https://codepen.io/RAFA3L/pen/raBJjgO

Тут используется веб-компонент <model-viewer>: https://modelviewer.dev/

Атрибуты компонента схожи с тегом video, а JS API максимально простой, да и чаще всего нужна работа с «орбитальной» камерой, как в кодпене выше.

Есть поддержка VR и XR, но я, если честно, от этого совсем далёк :) Поддерживается смена текстур, освещения и теней, установка сцены.

Норм? По-моему, норм :)

#3d #component #webgl

Читать полностью…

Будни разработчика

Хотите узнать, как QA-инженеры влияют на успех ИТ-продуктов?
Слушайте подкаст «QAk-QAk — и в продакшен»: эксперты из Т-Банка и других компаний обсуждают проблемы и делятся опытом, как обеспечивать крутое качество продуктов и строить карьеру в QA.

Если вы разработчик — подкаст будет полезен с точки зрения опыта взаимодействия с инженерами по качеству в разных компаниях.

Включайте новые выпуски где удобно

Читать полностью…

Будни разработчика

#такое дня

Как выбесить коллег одной строкой?

А сейчас я покажу вам...

Автор

Читать полностью…

Будни разработчика

Интегрируете CRM, создаете магазины на CMS?

Пользуйтесь готовыми интеграциями с CRM и CMS-системами для своих клиентов и получайте 20% с оплат за доступ к DashaMail.

Dashamail — российский email-сервис с простым интерфейсом, готовыми шаблонами и ИИ для генерации текстов и картинок. И, что важно вам, широкими возможностями автоматизации.

Что вы получите, кроме лояльности?
20% от всех оплат сервиса клиентами еще два года — даже когда завершили проект и получили оплату.

20% — много это или мало? При оплате одним клиентом годового тарифа с базой в 30 000 подписчиков (~89 000 р.), вы получаете ~20 000 руб. — и так в течение двух лет.

Регистрируйтесь в DashaMail и зарабатывайте с реферальной программой

Читать полностью…

Будни разработчика

#инструмент дня

Что-то я насмотрелся на мучения семьи и коллег в отношении составления резюме, и решил поискать, а нет ли готовых бесплатных решений?

Кроме экспорта из линкедина, конечно.

Кругом какие-то скрытые подписки, ограниченные платные скачивания, дурацкие шаблоны...

С одной стороны, можно и Google Docs обойтись. С другой, процесс оттачивания резюме в процессе поиска работы может, мягко говоря, раздражать. HR'ы нынче капризные, хотят опыт и баззворды только под нужную вакансию, а больше ничего не хотят.

И такой инструмент нашёлся! Reactive Resume: https://github.com/AmruthPillai/Reactive-Resume

Открытый проект на React и Nest.js на бакенде. Можно запустить локально, можно захостить. А можно воспользоваться и сайтом: https://rxresu.me/

Сайт работает на донатах, потому, возможно, запустить локально будет более разумным решением.

В общем, счастье соискателя — вот оно, рядом. Да и к контрибушенам проект открыт :)

#nestjs #react #resume

Читать полностью…

Будни разработчика

Важно дополнить, что не стоит использовать contents на интерактивных элементах: кнопки и пр. Т.к. их банально не будет видно, в фокус не поймаешь, табом не поймаешь, ридеры тоже, скорее всего, не прочитают.

Также не стоит вешать на элемент с таким свойством что-то, что определяет его позицию для каких-либо действий (например, Intersection Observer) - тоже не сработает

Читать полностью…

Будни разработчика

#фишка дня

Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.

Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.

Но есть решение! Правило 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 #бородач

Читать полностью…

Будни разработчика

#инструмент дня

Не понимаешь гриды? Не проблема!

Ведь есть конструкторы. Например, https://cssgridgenerator.io/

Задал начальные условия, поперетаскивал мышкой блоки — и готово! Забирай CSS.

А для любителей Tailwind — присутствует аналогичный проект https://www.tailwindgen.com/, он просто распихает нужные классы по блокам. Ноль забот.

Кстати, о Tailwind. На днях вышла его четвёртая версия. Ещё меньше конфигурации (ну, буквально не нужна для старта), новые утилиты для работы с transform, поддержка контейнерных запросов и интеграция с Vite.

#css #grid #tailwind

Читать полностью…

Будни разработчика

#расширение дня

Что-то, как вы видите, тяжело мне январь даётся. Но не сдаёмся!

Писать e2e-тесты — важная часть разработки. Но иногда кажется, что бакенд специально делает все, чтобы их невозможно было подготовить:

😡 спека меняется на лету
🤬 методы недописаны
👿 половина API не работает или вообще отсутствует.

В итоге время тратится не на разработку, а на попытки договориться с сервером.

Чтобы не зависеть от нестабильного бекенда и вообще спокойно продолжать разработку, можно использовать такие инструменты, как Requestly.

Это расширение для браузера, которое позволяет подменять запросы и ответы, редактировать заголовки или даже подгружать локальные данные вместо серверных.

Например, можно настроить подмену API-ответов на заранее подготовленные JSON’ы. Это помогает проверить логику приложения и писать тесты, даже если реальный сервер недоступен или работает нестабильно.

Обратите внимание, что расширение работает на подмене ответа уже после выполнения запроса, поэтому во вкладке Network структура останется неизменной.

Инструмент полезен не только для тестирования, но и в повседневной разработке — особенно когда работаешь с командой, где бакенд часто не успевает за фронтом.

А какие у вас способы справляться с подобными проблемами?

#api #extention #chrome

Читать полностью…

Будни разработчика

#инструмент дня

Вы знаете мою любовь к странным браузерам. Мы с вами запускали и Midori, чтобы отлаживать баги Safari/WebKit в Linux и Windows, и Ladybird, и Servo.

И если последние два сравнительно современные проекты, которые заодно ещё и получают мощное финансирование со стороны разных организаций, хотелось бы напомнить, что есть ещё смелые люди.

Например — браузер Dillo, которому недавно исполнилось 25 лет. Наверное, за 25 лет его научили всем трюкам?

Ну, вообще, нет. Да и цели такой не стояло. Пишется он по большей части для развлечения и некого... гуманитарного аспекта. Чтобы люди со слабыми машинами и соединением могли ту же википедию почитать. Ну или в виртуалке запустить документацию, в условиях ограниченных ресурсов.

Тем не менее, в честь 25 летия автор выпустил обновление — Dillo 3.2, в котором браузер научили поддержке webp, SVG, MathML, зуму через Ctrl+. И даже CSS-единицам вроде ch, rem, vw, vh, vmin, vmax.

С одной стороны, конечно, возникает логичный вопрос: «Кому это нужно-то вообще?», с другой — какое-то сообщество вокруг браузера сфомировано, люди пробуют свои силы в чём-то новом. Патч в Chrome вряд ли просто так зашлёшь, а в Dillo или Ladybird — почему бы и нет. Отличный дипломный проект, в том числе.

Ваши мнения, котаны?

#browser #engine #dillo

Читать полностью…
Subscribe to a channel