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

#рекомендация дня

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

Есть ребята из компании 53xapps, занимаются созданием сайтов и автоматизацией бизнеса. Ну и вот они решили запилить свой собственный курс по Frontend разработке.

Конкретно: введение в алгоритмы, HTML/CSS, JavaScript и Vue.js.

Разработка курса заняла около полугода. Большое количество видео и практики.

Подход к обучению немного отличается от других курсов: сперва несколько уроков вас учат понимать алгоритмы и рисовать блок-схемы. После этого обучение становится более осмысленным.

Курс довольно плотный, тестовые студенты проходили его по 15-20 часов в неделю 4 месяца, но сейчас есть возможность проходить курс в спокойном собственном темпе. Все для вас 🙂

Освоите JavaScript, HTML/CSS, Vue.js. Познакомитесь с несколькими популярными библиотеками. Для старта во фронте вполне достаточно.

Есть несколько бесплатных уроков, можно попробовать и пощупать.

Итак, цена. 5000 рублей. А подписчикам канала промокод HTMLSHIT даст 1000 рублей скидки.

Программа курса и бесплатные уроки доступны по ссылке.

#frontend #HTML #CSS #JavaScript

#фишка дня

А заодно поддерживающая #статья.

Итак, анимация height до auto-значений!

Я не могу написать «я джва года ждал», потому что лично я ждал больше 12 лет!

Да, у нас была анимация min-height (максимально мерзко выглядящая). Да, год назад нам дали анимацию гридов, что скрашивало существование, но заставляло добавлять лишние обёртки.

И вот оно, свершилось! В Google Chrome 129 появилось свойство interpolate-size: allow-keywords, дающее возможность, полностью сохраняя обратную совместимость, включать интерполяцию контентозависимых свойств узлов до auto!

В них входят: width, height, min-content, max-content, fit-content и так далее.

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

Кодпен с иллюстрации к посту: https://codepen.io/alinaki/pen/abezWpO

Только посмотрите, как просто:

:root {
  interpolate-size: allow-keywords;
}

p {
  transition: 1s;
  overflow: hidden;
}

p:not(:hover) {
  height: 5lh;
}

Да, мне ещё очень нравится единица измерения lh aka line-height. Ну просто красота.

И обещанная статья из блога разработчиков: https://developer.chrome.com/docs/css-ui/animate-to-height-auto

Будущее здесь, котаны!

#css #height #animation #auto

#статья дня

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

Вот только этот некто сегодня — Джош Комо, а это значит, его блог полон интерактивных примеров по вёрстке и фронтенду вообще, различных сниппетов кода, забавных анимаций и даже realtime пасхалок, для которых нужно некое хранилище данных.

Да и вообще, интересно последить за ходом мысли при выборе технологий, поэтому, вот: https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/

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

Очень крутая работа, на самом деле.

#react #next #blog

#такое дня

Есть у меня некое предубеждение к продуктам, которые распространяются через инфлюенсеров. Как, например, браузер Arc.

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

Например, у вас не возникало ощущения, что обязательное требование облачного аккаунта для использования такого продукта, как браузер, это как-то ненормально?

Или что концепция бустов, Boosts — это когда кто-то может сделать свой набор скриптов и правил для изменения поведения любого сайта — звучит как встроенный MITM?

Man in the middle, если что. Это вот: https://en.wikipedia.org/wiki/Man-in-the-middle_attack

И ведь так и оказалось! Автор xyzeva (я только знаю, что зовут её Ева) опубликовала результаты исследования безопасности Boosts и смогла воспроизвести атаку с подменой авторства буста на любое нужное ей.

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

Вот, почитайте: https://kibty.town/blog/arc/

TL;DR: они использовали Firebase максимально наивно.

Даже если не интересуетесь инфобезом, там прекрасная кошечка бегает за курсором.

Arc признали существование уязвимости, выкатили об этом пост и выплатили автору вознаграждение: https://arc.net/blog/CVE-2024-45489-incident-response

По счастью, предположительно никто не пострадал.

В общем, внимательно рассматривайте продукты, которые предлагают всё и сразу, just call my toll free number.

#security #browser

#фишка дня

Да неужели! Да ну наконец-то!

Уже сколько нас кормят тем, что уже давно можно смело нативно валидировать формы, а нормального менеджера состояний в девтулзах так и не было. Пойди выставь что-то отличное от focus :)

Теперь же можно не только использовать тот же :user-valid, но и форсить его в девтулзах!

А ещё есть юзер-инвалид: https://t.me/htmlshit/2760

Начиная с Chrome 129.

Вообще, секция про девтулзы — буквально моя самая любимая в блоге разработчиков Chrome: https://developer.chrome.com/blog/new-in-devtools-129

#chrome #devtools

#статья дня

Как бы ты ни старался соблюдать гигиену кода в React, всё равно в какой-то момент получится тяжёлый для рендеринга компонент.

А что делают тяжёлые компоненты? Правильно, блокируют нам весь UI! И в этот момент мы понимаем, что же за конкурентный режим рендеринга такой, о котором постоянно твердят авторы...

Итак, чтобы вынести рендеринг в неблокирующий режим, в React имеются два хука: useTransition и useDeferredValue. И сегодня речь пойдёт о первом.

Конечно, можно просто посмотреть видеоиллюстрацию от Алекса Сидоренко, но и документация очень даже исчерпывающая: https://react.dev/reference/react/useTransition

Выглядит интересно? Не то слово! Но...

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

А ведь без неё возврат из тяжёлого компонента на лёгкий будет происходить ровно так же медленно, как и переход на тяжёлый компонент!

Зато без блокировки. Гении, не иначе.

И по этому поводу имеется статья Нади Макаревич: https://www.developerway.com/posts/use-transition

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

В интересные времена живём.

#react #concurrent

#статья дня

В заметке про работу с отменой запросов в React Query я лишь косвенно упомянул такую потрясающую штуку, как Abort Controller.

Зачем он вообще нужен?

Можно перестать слушать события, отменить ненужный запрос на сервер (и даже в девтулзах он пометится как canceled), отменить транзакцию, отменить вообще всё, что отменяется, да ещё сделать это стандартным способом!

Документация на MDN крайне скудна и не описывает и половину вариантов применения. Поэтому, нужно что-то ещё.

Про отмену событий мы уже писали, про React Query я упомянул выше... так что давайте для остальных примеров возьмём свежую статью Артёма Захарченко: https://kettanaito.com/blog/dont-sleep-on-abort-controller

1. Уже ставшие классическими примеры отмены событий и запросов
2. Отмена чего угодно вообще
3. AbortSignal.timeout для отработки, внезапно, таймаутов
4. AbortSignal.any для ситуаций, когда сигнал может поступить от разных контроллеров.

Учитывая, что для работы с Google AppsScript API у меня имеется самописный преобразователь коллбэков в промисы, мне и самому стоит дополнить реализацию поддержкой Abort Controller.

Так что статья как раз вовремя.

#javascript #abortcontroller

#стрим дня

Итак, запись вчерашнего стрима.

1. Мой путь к получению оффера в Финляндии, обсуждение необходимого уровня английского языка
2. Презентация @acceleracio (00:31:00)
3. Ответы на вопросы: Cover Letter, соответствие уровня занимаемой позиции, поиск работы в России (01:00:00)

Аудиоверсия и слайды в комментариях.

P. S. Ничего себе, в телеге распознаются таймкоды!

#фишка дня

Отладка в Chrome только что стала проще, а вы и не знали!

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

Достаточно открыть девтулзы и жмакнуть по чекбоксу Emulate focused page на вкладке Rendering или Elements.

Как-то так:
https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page

Очень уютно!

#chrome #devtools

Спасибо большое всем участникам стрима и отдельно тем, кто задавал вопросы!

Завтра выкачу записи. Есть и видео, и просто аудио, как кому удобно 👍

Live stream finished (1 hour)

Мы на связи, заходите в эфир!

Чтобы услышать мою историю поиска работы и обсудить, как сейчас с трудоустройством за границу!

Подключиться можно ЗДЕСЬ

Live stream started

Live stream scheduled for Sep 19, 2024 at 17:00

#фишка дня

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

Сидите вы такие в уютном месте, пьёте кофе, работаете на макбуках, с экранами высокой плотности... в итоге забывая, что клиенты-то ваши — на ThinkPad с разрешением 1366*768.

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

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

1. Используйте нецелые значения процентов для стоп-меток. Если честно, я в механизме не до конца разобрался, но это заставляет браузер размывать линию стыка: https://codepen.io/alinaki/pen/oNrKXpM

  background: linear-gradient(
    176deg,
    red,
    red 50%,
    black 50.3%
  );

2. Похожее решение — прибавить пиксель к стоп-метке: https://codepen.io/alinaki/pen/xxovGyz

  background: linear-gradient(
    176deg,
    red,
    red 50%,
    black calc(50% + 1px)
  );

Второе решение даёт больший контроль над качеством размытия, потому что под разные плотности экранов можно давать разные значения. Например, если плотность экрана x2.5, делим наш несчастный пиксель на 2.5 и получаем ещё более красивую картинку на экранах высокой плотности (хотя мне не очень уже ясно, зачем).

P. S. естественно, Telegram зашакалил картинку на 10 шакалов из 10. Так что ползите смотреть кодпены, дамы и господа.

#css #trick #gradient #smooth

Будни разработчика pinned «#напоминание дня Пользуясь случаем, напоминаю, что завтра, 19 августа в 20:00 МСК у нас пройдёт совместный с @acceleracio стрим, на котором я расскажу, как проходили мои зарубежные собеседования, а эксперты Acceleracio поделятся секретами того, как заполучить…»

#напоминание дня

Пользуясь случаем, напоминаю, что завтра, 19 августа в 20:00 МСК у нас пройдёт совместный с @acceleracio стрим, на котором я расскажу, как проходили мои зарубежные собеседования, а эксперты Acceleracio поделятся секретами того, как заполучить работу за границей.

⚡️Пост с подробностями: https://t.me/htmlshit/3108

⚡️Бот для записи: @acceleracio_bot

Увидимся!

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

Как сделать текст поверх картинки читаемым?

Те, кто смотрит сериалы с субтитрами, уже давно знает ответ: белый текст с темно-серой тенью.

Но в дизайне это работает не всегда. Не попадает в стиль. Тогда на помощь приходит оверлей: некий полупрозрачный слой сверху, который затеняет или осветляет изображение, выделяя текст на фоне с достаточным контрастом, соответствующим стандартам доступности 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"

И за это отвечает именно атрибут pathLength. Дальше же для простоты работы определяем dasharray и dashoffset круглыми значениями.

Ну и демо, конечно: https://codepen.io/alinaki/pen/oNXjEzz

Теперь, внимание, вопрос: почему часть атрибутов записывается через дефис, в kebab-case, а часть — в camelCase?

#svg #length #loader

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

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://t.me/htmlshit/2516

Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.

#input #attribute #mobile #tool #бородач