11622
Авторский блог Senior JavaScript-разработчика из Хельсинки По рекламе: https://t.me/it_adv https://telega.in/channels/htmlshit/card?r=GLOiHluU Чат канала: https://t.me/htmlshitchat Автор: @bekharsky
#ссылка дня
Подробное руководство по выгоранию входу во фронтенд в 2024 году.
Прекрасно оформленное и проиллюстрированое.
От базы сетей до популярных фреймворков и подготовки резюме. Все баззворды и их пояснение в одном месте.
Пользуемся:
https://frontendmasters.com/guides/front-end-handbook/2024/
#guide #frontend
#статья дня
Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.
Т. е. имея такую анимацию: box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}
и animation-timing-function равный cubic-bezier(.55, -0.64, .42, 1.63) мы получим результат, изображённый на иллюстрации. Т. е. функция анимации будет применена на каждый временной отрезок, а не на всё время проигрывания. Думайте об этом как о color-stop в градиентах.
Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm
#css #animation #keyframes
Программирование сейчас - один из немногих социальных лифтов, доступных всем!
Лучший способ начать свой путь в IT - изучать Python. Этот язык не такой сложный для изучения, однако на нем создают сайты, чат-боты и даже искусственный интеллект. Например, Netflix, YouTube и Google написаны на этом языке.
С нуля стать опытным разработчиком со средней зарплатой в 180 000 рублей можно в онлайн-школе Product Star на курсе “Профессия: Python-разработчик”. Курс создан специалистами из топовых компаний с реальным опытом в индустрии, благодаря чему в процессе обучения вы будете погружаться в реальные кейсы.
После обучения ваше портфолио пополнится проектами, которые будет не стыдно показать любому работодателю. И самое главное: Product Star гарантируют трудоустройство, а если в процессе поймете, что специальность не для вас, вам вернут деньги.
Станьте Python-разработчиком вместе с ProductStar. Скидка до 57% и техническое собеседование с топовым разработчиком в подарок - https://tglink.io/021390a35303
Реклама. ООО "ТРИВИУМ". ИНН 7806297293.
#video дня
Видео с прошедщего ReactConf ещё только предостоит посмотреть, не получилось сделить за лайвом, но плюс-минус параллельно с ReactConf шёл же ещё Google I/O 2024! Меня, правда, там больше интересовала ситуация с Flutter, но тем не менее, новинки веба тоже были.
И одна из них — плавные/анимированные переходы скоро будут (да и уже) возможны не только между экранами одного приложения, но и между разными страницами и даже доменами! Т. н. Cross-document view transitions.
Видео с анонсом: https://www.youtube.com/watch?v=eY6C_-aDdTo
Документация: https://developer.chrome.com/docs/web-platform/view-transitions
Пример: https://view-transitions.netlify.app/stack-navigator/mpa-prerender/ (Chrome Canary)
Как всегда, в выигрыше разработчики ПО для киосков :) Им-то обновить движок легче всего.
#css #view #transition
Хочешь начать свой путь в хакатонах?! Хакатоны.рус запускает ЛЕТС ХАК — первый в России образовательный интенсив и хакатон для начинающих хакатонщиков!
Регистрация и подробная информация: 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
Давно работаете стажером и никак не можете найти постоянное место работы?
Устали от тысячи собеседований, где десяток человек пытается пробиться на ЗП в 50 тысяч.
Надоело что от джунов требуют 10-летний опыт и навыки сеньора?
Вы всегда можете быстро стать разработчиком 1С. Приходите на вебинар 29 мая в 19:00 и мы расскажем об этой профессии.
Почему именно 1С?
🔸Большинство компаний в РФ “сидят” на 1С. А благодаря новым законам еще больше компаний переходит на 1С сейчас
🔸1С ежегодно обновляет свою продукцию, поэтому у разработчиков всегда есть работа.
На вебинаре 29 мая в 19:00 мы расскажем:
- Чем отличается встроенный язык 1С от остальных языков программирования?
- Какие знания из других языков программирования вам понадобятся на старте?
- Как быстро переквалифицироваться в 1С разработчика и начать получать заказы?
А еще мы разберем вакансии и посмотрим тестовые задания для разработчиков 1С, обсудим карьерный путь и ЗП.
Записывайтесь на вебинар сейчас и приходите в среду в 19:00.
P.S.
Всем, кто зарегистрируется мы вышлем словарь 1С разработчика для ознакомления.
#фишка дня
Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.
Давайте сделаем свою. Для любого сайта.
Секунд за пять.
1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11
Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW
Предупреждение от автора способа: «Важно отметить, что такой хак форсирует вынос блока в отдельный слой рендеринга. Так что если внутри используется абсолютное позиционирование с огромными координатами, то такой слой может не влезть лимиты по памяти, и, как следствие, не дорендериться до конца».
Впрочем, он же пишет, что повторить подобное поведение ему не удалось.
Я у себя включил этот сниппет в браузерное расширение, позволяющее применить любой CSS к любому сайту. И иногда включаю, по настроению.
#css #darktheme #filter #бородач
#такое дня
Парень с блеском справляется с тестовым заданием, но два раза подряд не появляется на техническом собеседовании.
Первый раз — часовые пояса, ок. Договорились, переназначили. И снова не пришёл.
Ну, думаю, нам не очень нужен кандидат, не умеющий в часовые пояса.
К слову, если ты считаешь себя лид-фронтом или добротным фуллстеком — нам очень надо 🙂
#баг дня
Один браузер для всех это же так прекрасно, не правда ли?
И... нет. К сожалению, этот мир не будет прекрасным. И характеризуется такое положение некоторыми багами, которые разработчики 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 #бородач
#игра дня
Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент 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: ;
}