14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Хочешь начать свой путь в хакатонах?! Хакатоны.рус запускает ЛЕТС ХАК — первый в России образовательный интенсив и хакатон для начинающих хакатонщиков!
Регистрация и подробная информация: https://www.хакатоны.рус/letshack
Интесив рассчитан на раскрытие тем об устройстве хакатонов, о том как правильно подходить к решениям задач, организовывать работу, а также, секретам успеха на подобных соревнованиях.
ЛЕТС ХАК пройдет в два этапа:
Теоретическую часть — образовательный интенсив — серия онлайн уроков от IT-специалистов, организаторов хакатонов, участников и победителей, которые расскажут о всех тонкостях участия и рецептах успеха в IT-соревнованиях
Практическая часть — продуктовый хакатон — вы сможете отточить полученные знания и побороться за призовой фонд.
Формат мероприятия: онлайн.
Что дает участие?
Слушатели образовательного интенсива получат знания об устройстве всех видов IT-соревнованиях. Также, участники, прошедшие курс получат сертификаты. Участники хакатона получат денежные призы и обратную связь от экспертов.
Таймлайн:
18-23 мая — образовательный интенсив. Подробная информация: https://www.хакатоны.рус/letshackintensive
24-27 мая — продуктовый хакатон. Подробная информация: https://www.хакатоны.рус/letshackhack
Узнай как побеждать на хакатонах, знакомься, объединяйся в команды и получи опыт участия в хакатоне!
Успей зарегистрироваться до 23 мая 2024 года: https://www.хакатоны.рус/letshack
Проект реализуется при поддержке Росмолодежь.Гранты
#хакатон #hackathon #хакатонырус #hackathonsrus #Росмолодежь #РосмолодежьГранты
#фишка дня
Стопудово вы делали эффекты как на видео через три div-а или span-а. Ну просто потому что трансформации на SVG это абсолютная боль.
Типа такого: https://codepen.io/alinaki/pen/abXpvyQ
Да, пример очень простой, но даже это на SVG бывает проблемно санимировать.
Хотя, казалось бы, для этого и предназначено.
А вся проблема в том, что для SVG определение координат для преобразований происходит немного иначе, нежели чем для элементов. Выходов из ситуации есть несколько.
Первый, от Аны Тюдор: исправить viewBox, поставив вместо 0, 0 (левый верхний угол) — -width/2,-height/2, соответственно, исправив остальные координаты.
Второй, интереснее, от Джея: указать следующие правила в CSS:
transform-box: fill-box;
transform-origin: 50% 50%;
Информационные технологии развиваются стремительно, ускоряя темп жизни и внося кардинальные изменения.
📎 Как не отстать от меняющегося мира?
📎 Как быть в курсе новинок?
📎 Как предугадать будущее технологий?
Вам поможет канал IT news
🎯 Только актуальная и правдивая информация
🎯 Непрерывное обновление ленты новостей
🎯 Полезные ссылки на информативные источники
Подписывайтесь!
Привет! Если ты амбициозный frontend developer, который неравнодушен к анимациям и эстетическому дизайну, умеешь в React — эта вакансия для тебя! Нам нужен специалист, который будет работать над интересными креативными проектами, расти и развиваться, помогать всей команде добиваться новых выдающихся результатов! Присылай резюме и примеры работ (желательно сайты с анимациями) на почту hr@chipsa.ru и получи возможность попасть к нам в команду! Предполагаемый и обсуждаемый разбег по з/п: 80-90К. Полный текст вакансии тут: http://chipsa.ru/career/frontend
Читать полностью…
#ссылка дня
Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!
Во всяком случае, так считает автор блога Comicss: https://comicss.art/
Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.
Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.
Максимально забавный подход.
#css #art #бородач
#фишка дня
Если ваш конфиг ESLint до сих пор заставляет писать rel="noopener noreferrer" в каждой targer="_blank" ссылке, вы живёте в прошлом.
Потому что писать noopener не надо.
Этот атрибут запрещает установку свойства window.opener на открытое окно, таким образом, запрещая доступ открытого окна к открывающему.
Это уже 4 года как дефолтное поведение всех (нормальных) браузеров.
Ну а ставить ли noreferrer — чтобы узнать URL, откуда пришёл пользователь — дело ваше.
#eslint #security #anchor
Фантастические новости для всех, кто мечтает овладеть JavaScript и стать настоящим профессионалом в этой области!
Если ты когда-то задумывался о том, как начать свой путь в программировании, то сейчас самое время действовать!
Если ты уже опытный разработчик, приходи и прокачай свои скилы!
Новый бесплатный интенсив от METHED создан специально для того, чтобы дать тебе возможность окунуться в мир JavaScript без лишних затрат времени и денег.
Что ждёт тебя на нашем интенсиве?
Узнаешь по ссылке тут 👉🏻 https://tglink.io/b24b15431871
Не упускай свой шанс стать экспертом в области JavaScript! Зарегистрируйся на нашем интенсиве прямо сейчас и начни свой путь к новым профессиональным высотам!
#инструмент дня
Всё ещё испытываете проблемы с ветками в Git?
Not anymore!
Только сейчас открывая ссылку https://learngitbranching.js.org/ на вашем компьютере, вы получаете уникальную возможность научиться ветвлениям и слияниям в любимой системе контроля кода.
Или вы любите Mercurial? 🤔
#git #education #бородач
#интерактив дня
А поделитесь своими самыми странными, стрёмными или вообще — просто запомнившимися собеседованиями.
Моё, конечно же, собеседование в компанию, где я сейчас работаю. Несколько лет назад я не знал, что в Финляндии июль — мертвый месяц и все в отпусках. Отправил тестовое и ждал.
На тот момент компания была маленькой и процессы были медленные. Кончилось тем, что меня пригласила на собеседование в Хельсинки другая компания, и нынешней я написал: «Так может уже познакомимся уже?». Отсылку поймут не все.
Ну и вместо трех этапов получился один, не считая скрининг. Правда, собеседовали 8 человек разом, включая CEO.
Ну и по ходу пьесы я просил перевод пары терминов у русскоязычных собеседующих…
А в ту компанию, которая, собственно, пригласила я не попал. Недостаточно senior оказался.
Давайте свои прохладные былины.
#фишка дня
Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.
Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.
Например, скролл в любом плавающем или просто переполненном элементе очень даже протекает наружу, в итоге скроллите вы колесом (или пальцем) textarea, доходите до конца — и начинает прокручиваться остальной документ.
Я устал придумывать синонимы слову скроллить.
Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
Демо: https://mdn.github.io/css-examples/overscroll-behavior/
Наиболее популярный и, для кого-то, раздражающий эффект окончания прокрутки — это пружинка. Именно поэтому я записываю демо из Safari, чтобы сразу стало понятно, о чём речь.
Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.
В любом случае, свойство очень удобное, пользуемся.
#css #scroll #overscroll #бородач
#статья дня
Плохо ли патчить глобальные методы? Казалось, что ещё со времён PrototypeJS и MooTools было понятно, что да.
Из-за них у нас String.prototype.includes() вместо String.prototype.contains().
Но так вышло, что аж три крупных проекта решили, что им-то всё можно :) И это React.js, Next.js и Bun.
Next.js и React.js оба патчили fetch. Причём, React по факту сделал это ради поддержки React Server Components, которые — сюрприз — на момент внедрения тоже были только в Next.
А Bun всё в тот же несчастный fetch добавил конфиг proxy.
Не будем углубляться в бизнес-решения, стоящие за этим, но React в итоге отказался от патчинга и ни в один релиз это так и не дошло.
Итак, статья по теме: https://kettanaito.com/blog/why-patching-globals-is-harmful
Выдержки:
1. Страдает поддержка
2. Теряется предсказуемость работы (особенно с тем, как это пытались сделать в React)
3. Предложенные API — они про решение бизнес-задач здесь и сейчас, но никак не про будущие процессы и обучение разработчиков.
4. Подобные решения — это лок на поставщика. Используете proxy в Bun — на ноду не слезете.
5. Если подобное внезапно наберёт популярность — как в случае с Prototype.js и MooTools, то уже спеку придётся подгонять под вендора.
В статье, естественно, даются примеры, как подобного избежать и немного больше исторического контекста.
#js #patch #fetch #react
27 июня Яндекс проведет Young Con — фестиваль для студентов и молодых специалистов, вдохновленный технологиями будущего
Young Con — это 6000 участников, 10+ часов нетворкинга и приключений, а также множество карьерных и развлекательных активностей: экспресс-собеседования, знакомство с технологиями компании, выступления хедлайнеров, конкурс косплея и многое другое. Основной темой ивента станет «Вселенная Яндекса». Она будет состоять из 9 тематических «миров» — интерактивных стендов, где гости смогут общаться с разработчиками и руководителями сервисов, перенимать их практический опыт и узнавать о карьерных возможностях, которые доступны стажерам компании.
На фестивале также пройдет финал турнира по спортивному программированию среди студентов «Баттл вузов. Кубок Y&&Y», где участники команды-победителя станут обладателями 1 млн рублей. А в завершение дня выступят группы The Hatters и Хлеб.
Мероприятие пройдет 27 июня на Live Arena. Принять участие в нем можно очно или онлайн — для этого необходимо заполнить форму на сайте. Начинающим айтишникам, которые хотят попасть на экспресс-собеседование, помимо заявки нужно также прикрепить резюме.
Регистрация уже открыта.
Как IT-специалисту прокачать словарный запас и вывести английский на более продвинутый уровень?
Записаться в Speaking club for IT-specialists к Марине, где участники обсуждают актуальные темы, ломают языковой барьер и общаются со своими коллегами на английском.
👩💻Марина работает со специалистами таких компаний, как Wargaming, ВТБ, Helix, МТС.
🗓14 мая стартует новая группа:
Темы этого месяца:
📌AI Search vs Googling
📌Soft Skills for IT-specialists
📌Doomsday
До конца мая действует старая цена на клуб - 3000 рублей (3 встречи).
Подписывайтесь на канал и сразу же забирайте список полезных фраз для собеседования на английском в подарок за подписку.
#инструмент дня
Товарищ прислал невероятное признание: он перешёл с комбинации ESLint и Prettier на... Biome!
Вот на этот вот: https://biomejs.dev/
Для тех кто не в курсе, Biome это реинкарнация самого амбициозного в истории тулчейнов проекта, Rome.js, целью которого было всё и сразу.
Затея Rome увенчалась своеобразным успехом: ребята собрали инвестиций и... всё. Почитайте, там очень интересно.
Так вот, давайте перейдём к Biome. Сразу слово моему товарищу, вы его уже знаете по проекту extended-fetch. Мои комментарии, как всегда, курсивом.
«Преимущества Biome:
- нет таких серьезных ломающих изменений как в ESLint (например сейчас, чтобы перейти на 9-ю версию с 8-й нужно проверить работу всех используемых плагинов и перенести вручную конфигурацию на новый формат)
Я не согласен, что это преимущество. Невозможно развивать ESLint без того, чтобы не разбить пару яиц. Никто не заставляет лезть сразу на 9.
- существенно выше производительность
Предстоит узнать, какой ценой.
- форматирование и проверка кода в одном инструменте (выигрыш как в производительности, так и в поддержке одного инструмента вместо двух)
- нет необходимости использовать другой инструмент для проверки только измененных файлов, Biome сам умеет определять с флагом
- Лучшая поддержка сообщества
Как у Rome? :)
- JSON схема для описания конфигурации (не нужно лезть в документацию и изучать доступные параметры или их измененное именование)
Меня пока устраивает скорость, единый тулинг, простая миграция с еслинта и преттира, жисон схема для конфига».
Ваши мысли, котаны?
P. S. сегодня мы попали в список, вручную отобранный Виталием Зюзиным по критерию авторской подачи: /channel/addlist/Z6Efi4jXwe9lODcy
Всем новоприбывшим привет, располагайтесь поудобнее.
Я знаю кучу IT-управленцев, которые хотят внедрить Data Warehouse, но
❌ Не хватает экспертизы по инструментам и архитектуре DWH
❌ Не проработаны требования бизнес-подразделений по витринам для BI
❌ Сложно объяснить пользу DWH бизнесу, для которого это «очередной IT-проект»
Что делать?
8 мая эксперт KT.Тeam (ТОП 30 агентств России в Highload-разработке по версии RUWARD 2021) проведёт бесплатный вебинар
На нём вы получите:
💻 Пошаговый план проектирования Data Warehouse
💻 Разбор 3-х уровней архитектуры хранилища
💻 Решение для бизнеса: как тестировать гипотезы быстрее и точнее
🎁 Бонус: таблица сравнения популярных OpenSource инструментов для DWH
ЗАРЕГИСТРИРОВАТЬСЯ БЕСПЛАТНО
#игра дня
Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?
Вы по адресу!
Интерактивное руководство: https://bezier.method.ac/
Я, правда, так ничего и не понял. Ничего не получилось. 🙁
#vector #bezier #tool #learn #бородач
#молния дня
Доступен react-compiler. Только что представили на конференции ReactConf. Кто не понял, тот поймёт: https://react.dev/learn/react-compiler
Исходники: https://github.com/facebook/react/tree/main/compiler
#инструмент дня
А приходилось ли вам, котаны, писать код, который должен был немного по-разноме реагировать на разные условия существования?
Не просто десктоп-мобила, а наличие, отсутствие и скорость сети, число процессоров, объём памяти, поддержку видеокодеков... далее — везде.
Так вот, если не приходилось — то обязательно придётся. И на помощь в этом придёт набор хуков от Google Labs под общим названием React Adaptive Loading Hooks & Utilities: https://github.com/GoogleChromeLabs/react-adaptive-hooks
Естественно, все эти хуки умеют определять, запущены они в SSR или нет.
Куча демок в наличии.
К слову, следует напомнить, что определение сети — штука не самая надёжная. Наш ультимейт фейл с React Query это только подтверждает: /channel/htmlshit/2347
#react #hooks
#фишка дня
И #тред дня, и #статья дня... Сегодня всё и сразу от Джоша Комо.
И речь пойдёт о недооценённом хуке в React: useDeferredValue.
Итак, некоторое время назад Джош выпустил свой инструмент для создания красиво выглядящих теней (да-да, drop-shadow просто уже недостаточно). И одной из проблем инструмента стала... дёрганая реакция на движение ползунков. Как будто мало FPS.
Начав разбирать проблему, Джош понял, что событие onChange происходит очень часто, за это время надо успеть сгенерировать тень, потом отрисовать её, потом вставить код в редактор для копирования. А редактор, естественно, ещё пытается этот самый код подсветить.
Но что нам нужно? Нам ведь сначала нужен результат, а уже потом — код. Так почему бы не заполнить код чуть позже, не нагружая систему?
И именно для этого и нужен хук useDeferredValue. Данные молучим только когда основной процесс рендеринга завершится. Буквально ленивое выполнение.
Собственно, тред и статья если кто предпочитает подробности. Там, как всегда, шикарно.
Будьте разумно ленивыми, котаны!
#react #hook
Хочешь освоить или улучшить свои навыки во фронтенде?
Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое
👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!
#фишка дня
Как заставить элемент изменять свою ширину... ступенчато?
Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.
И сегодня у нас аж несколько вариантов, как этого добиться.
1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq
Используем функцию модуля:
width: calc(95vmin + -1*mod(95vmin, 15px));
min-width: round(95vmin,15px);
grid-template-columns: repeat(auto-fill, 15px);
#статья дня
Музыканты тут? Хотите нотную запись на гридах?
Нет? А я принёс! Сходу: https://cruncher.ch/blog/printing-music-with-css-grid/
В общем, предыстория такая. Разработчик по имени Стивен Бэнд несколько лет назад реализовал генерацию нотного стана в SVG из JSON записи, но осознал, что правильный рендеринг этого дела слишком сложен, и отложил.
И тут до него дошло: раз всё равно всё делать в браузере, почему бы не сделать гридами?
Ну и пошло-поехало:
grid-template-rows:
[A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em
[D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em
[G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em
[C4] 0.25em ;
0 chord D maj 4
0 F#5 0.2 4
0 A4 0.2 4
0 D4 0.2 4
💡 Готовишься к собеседованиям?
Здесь собраны актуальные вопросы к собеседованиям на позицию Frontend Разработчика. В каждом посте:
✔ Короткий и полный ответы
✔ Ссылки на ресурсы для изучения темы
✔ Уровень сложности вопроса
Канал ведут опытные Frontend Разработчики, которые будут еженедельно проводить публичные собеседования среди подписчиков.
Подпишись на Frontend | Собеседования
#фишка дня
Валидация форм в HTML, мягко говоря, раздражает. Я даже не буду начинать о том, что все встроенные способы валидации или выглядят уродливо, или имеют странную логику.
Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.
Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Например, required.
Я сел на книгу с каламбурами, простите.
Казалось бы, вот оно, счастье! Пишем что-то такое:
input:invalid ~ .invalid-message {
display: block;
}:invalid в том, что пустое, не тронутое пользователем поле, изначально не удовлетворяет заданным условиям! И сообщение будет висеть сразу, раздражая всех.
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 14 мая.
Реклама. ИП Чернова О. А., ИНН:771399721044
#баг дня
Кастомные скроллбары — штука прекрасная, хоть за 20 лет так и не нашедшая свой путь в стандарты. До сих пор полноценная стилизация возможна только в Blink aka Chromium и WebKit aka Safari.
В Firefox как не работало, так и не работает.
К слову, хорошая статья Ахмада Шадида на тему: https://ishadeed.com/article/custom-scrollbars-css/
Короче, суть бага: если вы решились таки стилизовать скроллбар, то не рассчитывайте, что Safari правильно применит стили по наведению мыши :)
Я, правда, не знаю, кому может прийти в голову менять стили скроллбара по hover.
Раз сработает, два сработает, а на третий — всё, нет. Смотрим видео, собственно.
Решение от Брамуса Ван-Дамма довольно забавное: нужно стриггерить инвалидацию стилей, для чего можно рандомной CSS-переменной присвоить неопределённое значение. Вот так:
.section:hover {
--force-rerender: ;
}
#инструмент дня
Важной частью процесса разработки является сканирование уязвимостей в коде и зависимостях. А ещё более важной — слежение за ними.
И этот процесс было бы неплохо автоматизировать.
Да, в какой-то мере справляется dependabot, но не во всех компаний используется GitHub и хотелось бы получать сводки в любой момент. Ну а npm audit такая себе игрушка.
И тут у нас имеются прекрасные инструменты. Для начала, конечно же, база уязвимостей для Open Source библиотек: https://ossindex.sonatype.org/
Обратите внимание, речь не только про JS aka npm, в каталоге присутствуют практически все мыслимые среды и пакетные менеджеры.
Второй момент это тулинг. И тут от тех же Sonatype имеется пакет AuditJS: https://github.com/sonatype-nexus-community/auditjs
И расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=SonatypeCommunity.vscode-iq-plugin
Всем безопасной разработки, котаны!
#security #vulnerability #scan #audit #бородач
#фишка дня
Лет так 15-20 назад, когда Интернет ещё был про документы и будущее веб-приложений только начинало формироваться, все кругом были озабочены темой типографики. Если ты не использовал один из множества инструментов-типографов — ты и не верстальщиком был вовсе.
Не то, чтобы сейчас на неё как-то совсем забили, но ажиотаж уже не тот. Выровняли вертикальный ритм, заменили кавычки с тире и поехали.
И одной из модных тем, над которыми любили заморачиваться, была висячая пунктуация (вики и ководство). Она придавала, да и придаёт, текстам некий шарм.
И уровень детализации может быть разный, от кавычек до точек и запятых. Кавычки, впрочем, очень сильно заметны. История висячей пунктуации, кстати, своими корнями идёт глубже, чем даже первая печатная книга, но мы пока углубляться в это не будем.
А вот куда будем — так это в способы реализации.
Первый и очевидный, которым пользовались много лет назад и по сей день — это реализация на JavaScript: https://codepen.io/alinaki/pen/BaeBOBr
Рассчитываем положение строк, смотрим, нужно ли подвесить ту же кавычку и подвешиваем.
Второй способ — для выделения цитат или набоков-стайл прямой речи — это text-indent, идеально подходит, просто свешиваем первую строку на ширину символа: https://codepen.io/alinaki/pen/vYwBzBm
И самый современный вариант — это использование CSS-правила hanging-punctuation. Которое, к сожалению, поддерживается пока только в Safari (смотрим предыдущий пример, секцию supports).
Правда, Safari не будь Safari если бы не накосячили в текстовых полях, поэтому, если применяете правило глобально — отключайте его на формах.
Ну и, конечно, не стоит забывать о том, что висячая пунктуация на самом деле не очень прижилась в советской и пост-советской типографской среде, и сместилась в сторону оптического выравнивания. В таком случае, text-indent или JS-решение вполне себе ваш выбор.
#css #typography
#видео дня
Вдогонку к посту про алгоритмы работы движка Flex-раскладки, позволю себе обнаглеть и приложить ещё и это видео: https://www.youtube.com/watch?v=RVnARGhhs9w
Называется буквально "How to render in WebKit".
Да, ему 10 лет, но 10 лет назад Flex уже был сформирован и даже прошли споры по первой версии Grid. Там определённо есть что почерпнуть.
На правах закладки, ага :)
#render #webkit
#статья дня
Из разряда прекрасного!
Чтобы понять как работает движок Flex в браузере можно попробовать его... написать :)
Не, кроме шуток. Я не знаю, как проходит сейчас обучение в школах, но у нас был Turbo Pascal и многим так и осталось более понятным рисование на холсте, нежели вёрстка.
Такие люди называются бакендеры.
Потому, давайте взглянем на пример реализации: https://tchayen.com/how-to-write-a-flexbox-layout-engine
Кстати, я объяснял своей жене недавно принципы работы Flexbox как раз практически картинкой с иллюстрации :)
Как бусы нанизать на нитку.
#flex