14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Спасибо большое всем участникам стрима и отдельно тем, кто задавал вопросы!
Завтра утром выкачу записи. Есть и видео, и просто аудио, как кому удобно 👍
#фишка дня
Итак, во фронтенд-сообществе давно наметилась тенденция к завышенным ожиданиям разработчиков от потребителей их продукции.
Сидите вы такие в уютном месте, пьёте кофе, работаете на макбуках, с экранами высокой плотности... в итоге забывая, что клиенты-то ваши — на 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
#баг дня
Одна из моих любимых фишек инструментов разработчика Google Chrome (aka девтулзов) — это возможность сделать скриншот ноды.
Нужен длинный скриншот страницы? Бахаешь на body или html и сидишь довольный.
Нужен лишь кусочек? Не вопрос, выдели нужную ноду мышкой и скриншоть себе на здоровье.
Но не обошлось без проблем. Ну честное слово, вот же вся страница, на экране. Бери да превращай в картинку. Нет...
Если в вашей ноде есть картинки, добавленные через тег img с атрибутом decoding="async" — они потеряются :(
Вот так вот неожиданно. Видимо кто-то где-то промис не разресолвил :)
Решается проблема удалением атрибута, прямо в девтулзах, и повторным скриншотом. Иногда достаточно и просто убедиться, что все картинки загружены — я пока паттерна не понял.
Но неприятный осадок всё-таки остался.
Сейчас ищу формальное описание бага в багтрекере. Если не найду — придётся заводить.
Демо: https://10web.io/blog/how-to-create-a-blog-on-wordpress/
Просто попробуйте сделать скриншот body, не скролля заранее.
Проверено на Chrome 128.0.6613.120.
В итоге, часть картинок может появиться, а часть — нет.
Вообще, я откровенно не люблю ленивую загрузку картинок и контента. Да, помогает на медленном интернете, но абсолютно мерзко и неудобно на нестабильном соединении. Например, в поезде.
#chrome #bug #async
#фишка дня
Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?
Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/
Там div, не fieldset.
Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:
Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)
К счастью, это изменилось и использовать fieldset можно ровно так же как и другие элементы.
Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!
Вот так: https://codepen.io/alinaki/pen/NWLOPqy
Где это может пригодиться?
Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.
Ну или всю форму, при желании.
P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr
#fieldset #disabled #бородач
#игра дня
Я нечасто делюсь играми, в которых не предполагается написать код или стили, но эта — довольна забавная.
Особенно в свете последних событий на работе, когда команды объединили и поделили.
Итак, тренажёр менеджера проектов!
http://thatpmgame.com/
Визуально — диаграмма Ганта. Раунды короткие, несколько минут. Цель — уложиться в сроки и бюджет, располагая целым спектром сотрудников.
От ленивых до очень ленивых.
Назначаешь людей на задачи, кто-то подороже, кто-то — побыстрее. И поехали. В любой момент игру можно поставить на паузу и перетасовать людей и задачи.
Забавно, что персы там могут выгорать, если им не хватает работы. Скучают!
Да, во многих конторах прожект-менеджер — это, скорее, переходящий титул, нежели выделенная профессия, поэтому в роли может оказаться кто угодно.
Ну, кто закончит в зелёной зоне? :)
#pm #project #planning
При создании продукта разработчикам часто приходится выполнять непрофильные задачи. К примеру, разрабатывать и настраивать сервисы для нотификаций: уведомления об изменении статуса заказа, о входе в аккаунт и многое другое.
Чтобы разработчикам не приходилось делать это самостоятельно, Yandex Cloud предоставляет готовые решения: Yandex Cloud Postbox — для отправки email-сообщений и Yandex Cloud Notification Service — для мобильных push-уведомлений.
В карточках рассказываем почему стоит воспользоваться готовым решением 👉
Мы на связи, заходите в эфир!
Чтобы услышать мою историю поиска работы и обсудить, как сейчас с трудоустройством за границу!
Подключиться можно ЗДЕСЬ
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-й день в году. Жаль, не выходной 💻
Ровно пять лет назад я сел на поезд Аллегро и приехал из Санкт-Петербурга в Хельсинки на два собеседования подряд, на одном из которых я настоял.
Потому что "а чо они".
И сейчас в компании, на собеседовании в которую настоял, я и работаю.
Услышать историю моего трудоустройства в финскую компанию можно будет на стриме 19 сентября в 20:00 по мск.
Это будет четверг, если что.
Я расскажу о том, как прошли мои зарубежные собеседования. В этом мне помогут девчонки из @acceleracio, которые поделятся секретами того, как заполучить работу за границей.
Что будем обсуждать?
Подготовку к поиску работы за рубежом:
🔹 как готовился и проходил собеседование я,
🔹 текущее состояние рынка и тренды,
🔹 примеры стратегий поиска, которые работают и не работают,
🔹 инструменты для эффективного поиска работы,
🔹 и ответим на ваши вопросы — конечно, с огромным удовольствием!
Кто будет со мной в компании?
✅ Анна Решетова — интервью-коуч и преподавательница английского для айти-специалистов.
✅ Любовь Татарова — фронтенд-разработчица с большим опытом прохождения интервью в зарубежных компаниях.
Задание со звездочкой перед вебинаром — подготовиться и прочитать посты:
👉 Про нетворкинг,
👉 Об откликах и том, как их оставлять еще эффективнее,
👉 Про то, как надо верить в себя и никогда не опускать руки,
👉 Ну и, конечно же, приготовить свои вопросы!
Записаться можно через бота: @acceleracio_bot⚡️
Добавляйте в календари и приходите: это отличная возможность распланировать осенний сезон найма!
ОБУЧИМ ПРОГРАММИРОВАНИЮ И ГАРАНТИРУЕМ, ЧТО ТРУДОУСТРОИМ ПОСЛЕ УЧЕБЫ
Zerocoder. Мы обучили программированию более 8 000 человек и сделали наше IT-образование еще более надежным — теперь мы поможем найти тебе высокооплачиваемую работу мечты и гарантируем будущее трудоустройство.
Курс рассчитан на новичков, поэтому даже если ты никогда не программировал и не работал в IT, у тебя получится освоить перспективную профессию, работать в престижных IT-компаниях, купить квартиру по льготной ипотеке под 6% и получить отсрочку от армии.
Во время прохождения курса ты освоишь самый популярный язык программирования Python и основные фреймворки, сделаешь 18 PET-проектов, создашь портфолио и резюме, получишь свою первую работу.
Кликай на ссылку и узнавай подробности, заявки принимаются только до конца этой недели.
#статья дня
Один мой товарищ любил прыгать с вышки использует светлую тему в редакторе.
Да вообще, если подумать, много кто на работе в IDE работает со светлой темой. Я вот её использую только когда нужен повышенный контраст: на ярком солнечном свете.
Но темные темы системы в целом вообще стали модными лишь несколько лет назад, сначала на телефонах, потом и сайтах и десктопах. Мне откровенно не нравится.
Некоторые владельцы маков с чёлкой перешли на темные темы лишь бы скрыть чёлку 🤡
Так к чему это я. Действительно ли темные темы так хороши или так плохи для глаз? Что за ними стоит и почему черный цвет в них не используется? Отвечает вот эта статья: https://habr.com/ru/company/timeweb/blog/675526/
Со ссылками, с литературой, с примерами. Сплошное удовольствие читать.
#dark #theme #бородач
#инструмент дня
Ну и третья альтернатива — https://fakeimg.pl/
Этот сервис уже ставит не фотографии, но классические плейсхолдеры заданного размера. При желании — с вашим текстом. Замена покинувшим нас placehold.it и PlaceIMG.
Пробуем, отмечаемся.