14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#статья дня
Думали, научились отличать overflow: scroll от overflow: auto и всё на этом?
Не, так не пойдёт. И дело даже не в том, что у нас есть ещё visible и hidden. Дело в том, что у нас есть clip! И вот тут-то и начинается самое интересное.
Когда придумывали hidden, задача была простая: скрыть всё, что не помещается в контейнер, чтобы посетителю не пришлось скроллить. Вообще.
Но тут у нас появились усложнения процесса скролла: position: sticky и ScrollAnimation API. И с обоими есть проблемы.
Видите ли, согласно спецификации overflow: hidden создаёт инстанс скролла (контейнер), который буквально перехватывает взаимозействие пользователя с ним, но при этом — позволяет обратиться скриптом к модели и подвинуть контейнер куда надо. Подробнее есть у Брамуса: тык.
А что это значит для нас, как пользователей? Что ни sticky, ни таймлайн-анимации, определённые в CSS, работать не будут, потому что hidden сломает механизм поиска ближайшего доступного скролла.
А ещё, браузер буквально не даст вам адекватно настроить индивидуальное скрытие по осям, он всегда выставит auto на вторую ось, что приведёт к скроллу.
И тут на помощь приходит clip! Он не создаст скролл-контейнер и позволит браузеру правильно обрезать и анимировать элемент, а пользователю — с ним провзаимодействовать.
Вообще, описывать это словами довольно сложно. Потому я очень рекомендую почитать интерактивную статью Ахмада Шадида: https://ishadeed.com/article/overflow-clip/
Самый говорящий пример из неё вынесен в иллюстрацию к посту.
P. S. Мы участвуем в общей папке с другими каналами по фронтенду и IT-митапам: /channel/addlist/Ujk-XuYhGsszM2Qy
Папки в Телеграм — это лучший способ поделиться похожими каналами и помочь нам всем развиваться. Надеюсь, вы сегодня найдете для себя что-то интересное.
#ссылка дня
А ссылок будет много! Ведь на дворе декабрь, а значит — время рождественских календарей! Aka advent calendar.
Да, я в курсе, что сегодня второе число. Представьте, что я, например, гамбургский рождественский рынок. Который — естественно — не работает по воскресеньям.
1. Итак, нестареющая классика — Advent of Code. 24 задачи, решать которые можно на любом доступном языке программирования и любыми методами: https://adventofcode.com/
Есть у меня товарищи, которые в прошлом году чуть ли не лидировали в общем зачёте.
При этом, производительность не важна. Это вам не Литкод.
2. Advent of TypeScript: https://www.adventofts.com/
Не хватает типов на своей тырпрайзной работе? Вот напиши ещё!
3. Advent of CSS: https://www.adventofcss.com/
Поверстаем? :)
4. Advent of QA: https://www.rusau.net/qa-advent
Тестировщикам тоже досталось! Первый и единственный в подборке календарь, рассчитанный до 31 декабря :) Так что, если предыдущих вам было мало...
Добавляйте свои календари, я бы хотел, например, найти адвент для продактов!
Стоит отметить, конечно, что почти все эти календари рассчитаны до 24 числа. Так что придумайте себе развлечение на оставшуюся неделю — в российской и пост-советской традиции календари если и прижились, то до Нового года, а не Рождества :)
#advent #calendar
#библиотека дня
Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.
Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles
Я помню первое появление этой либы, они начинали с connected particles и были тупо везде. В итоге это настолько надоело, что я вообще выкинул их из головы.
А ребята развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html
Ну и адаптеры есть буквально под все фреймворки.
Да, снег там тоже имеется.
#particles #effect #бородач
Вы познакомитесь с лучшими практиками и решениями из разных технологических стеков и узнаете, как создавать сложную архитектуру для программного обеспечения.
Эксперты смогут предостеречь от распространённых ошибок, расскажут, как преодолевать кризисы. Эти знания пригодятся и тем, кто в своём проекте столкнулся с архитектурными задачами, но не понимает, как их решать.
Присоединяйтесь, чтобы вместе с экспертами рассмотреть на практике работу архитекторов ПО и понять, как развиваться в этом направлении.
🗣 Бесплатно, 29 ноября в 18:00 мск
#такое дня
Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»
Ну… как бы… мне даже добавить нечего: mizinov/area-comparison" rel="nofollow">https://observablehq.com/@mizinov/area-comparison (на русском)
#optical #illusion #perception #design #бородач
#ссылка дня
Сегодня день такой, про SVG-фильтры.
Когда я в какой-то очередной раз писал дифирамбы шейдерам, мой коллега справедливо заметил, что так-то SVG-фильтры прекрасно с этим справляются и незаслуженно обделены вниманием.
Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.
Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо не HTML-элемент и он как работал, так и будет работать!
Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).
Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders
Она позволяет с лёгкостью или нагенерировать нужных фильтров, или вообще принять идею для своих проектов.
Повторю: HTML-элементы продолжают работать как работали и это в разы проще, чем спользовать решения на Three.js.
Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: /channel/htmlshit/1416
#svg #filters #html #shaders
Найти работу фронтендера трудно? Ты просто не там ищешь!
@job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно
Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑💻
Появился новый сервис для создания собственных AI-ассистентов — AI-Assistant API
Я сам юзаю AI-ассистентов для планирования поездок и поиска оптимальных маршрутов. Вещь перспективная, поэтому неудивительно, что помощников теперь адаптируют под бизнес-сценарии для создания персонализированного клиентского сервиса или автоматизации рутины.
Разработка позволяет создать своего AI-ассистента с помощью Yandex Cloud ML SDK или реализуя запросы к API на языке программирования. Помогает в этом AI Assistant API, который объединяет языковую модель YandexGPT и подход Retrieval Augmented Generation. Последний позволяет наделять ассистента новыми знаниями, подгружая нужные документы или статьи (до 128 МБ). Так, модель будет отвечать на вопросы с юзеров с минимальными ошибками.
Еще одно важное преимущество: SDA-библиотека, где реализованы все нужные взаимодействия на уровне модели, инфраструктуры и внешних функций. То есть создать цифрового помощника смогут даже компании без ML-команд или экспертов в области Data Science. По словам разработчиков, AI Assistant API может в среднем на 30% ускорить внедрение LLM в процессы.
Всем привет!
Хотите узнавать небанальное об интервью на английском? Получить оффер в валюте на удаленке или даже переехать?
Тогда приглашаем вас, дорогие и уважаемые, в наш маленький канал! Мы очень стараемся постить всякие интересности регулярно, и, если поскроллить, то уже можно почитать бомбические советы по составлению резюме, байки про работу в айти и даже попрактиковаться в ответах на типичные вопросы собеседования.
Будем очень рады вашей подписке, но еще больше - вашим вопросам и мнениям.
Ваши Аня и Любовь
из @acceleracio
#такое дня
Раньше говорили, что каждый программист должен написать свои Жизнь и Тетрис.
Но каждый писал свой музыкальный плеер. А в чате я постоянно рекомендую начинающим веб-разработчикам написать свои Инстаграм и Твиттер. Ну, до какого-то уровня, конечно.
А какие мнения слышали вы?
#фишка дня
Это дежурное напоминание о том, что если объявить независимые и чистые функции вне контекста компонента, они не будут пересоздаваться на каждый рендер и, соответственно, вам не нужны будут ни useEffect, ни useCallback ни прочие трюки.
То есть:
const scroller = (node: HTMLDivElement | null) => {
node?.scrollIntoView({ behavior: "smooth" });
};
const ChatWindow = () => {
return (
<>
{Array.from(Array(100).keys()).map((e) => (
<div key={e}>Chat message: {e}</div>
))}
<div ref={scroller} />
</>
);
};
💡 Хакатон «Норникеля» «Интеллектуальные горизонты»: стартуем на поиски инноваций!
Погружайся в кейсы от «Норникеля» и решай задачу по одному из трех треков: от анализа данных до автоматизации, от экологического мониторинга до создания алгоритмов, которые могут изменить правила игры в индустрии.
Когда: 6 - 8 декабря.
Формат: онлайн.
Призовой фонд: 1 500 000 рублей.
🧑💻 Разработчики, аналитики, инженеры и любители новаторских решений смогут применить свои знания, чтобы придумать решения для реальных задач в промышленности.
Хакатон «Норникеля» «Интеллектуальные горизонты» — это отличный шанс показать свои идеи, повлиять на промышленность и найти новых единомышленников.
Если нет команды — поможем её собрать!
➡️ Регистрация открыта! Успей зарегистрироваться до 2 декабря, 23:59 МСК по ссылке.
#статья дня
Chrome опять выходит на связь!
Я скучаю по временам, когда можно было делать проекты под киоски :) Вообще ничего не парило, берёшь последний Chromium и кладёшь на все стандарты.
Возможно, кому-то и сейчас так везёт...
Короче, я к чему. Нет, я не про новости, согласно которым Google хотят заставить продать Chrome (при этом уважаемые эксперты кругом уже начали хоронить веб, как будто других движков у нас нет).
Я про то, что Chrome в очередной раз ломает искусственные барьеры!
Когда-то мы с вами уже обсуждали ситуацию с несчастной комбинацией элементов fieldset+legend и что они не могли быть flex-элементами. Ну, так исторически сложилось (они были виджетами ОС).
Оказывается, похожая ситуация имеется и с элементами details+summary!
Им до Chrome 131 нельзя было задать никакой display, кроме block. Эффекта бы не было.
Надеюсь, глядя на видео вы уже поняли, что там происходит :) А происходит комбинация display: flex на details и анимация до auto через interpolate-size.
Статья на тему: https://developer.chrome.com/blog/styling-details
А теперь, чтобы пресечь инсинуации: в Firefox и Safari всё прекрасно выглядит! Не работает лишь анимация. Ограничений на display у details нет, всё работает как и надо.
Я пока всё ещё считаю использование details для аккордеона натяжкой, но направление задано, что не может не радовать.
#css #ui #details
#заметка дня
Ну что, будем долбиться в холст и аналитическую геометрию?
Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.
В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: /channel/htmlshit/3279
Как я уже писал, основным откровением стало понимание, что мне не нужно пять разных фигур, описывающих виджеты. В данном случае мне повезло и граница между элементами не должна была быть прозрачной. Иначе, пришлось бы решать иными методами.
Заодно мы получили бесконечно возможное число секторов.
Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?
Для зануд: мы тут в декартовых координатах работаем.
1️⃣Определяем, не ткнули ли мы в центральную кнопку.
Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.
Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.
2️⃣ Если попали не в центр, то уже однозначно, в какой-то из секторов.
Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.
Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.
И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.
Радианы — просто всё умножается на π.
Ну и всё, перерисовали с учётом нового цвета.
Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010
Что делаем в следующий раз, анимируем?
#canvas #javascript #remote
Почта на прокачку: как повысить защиту Microsoft Exchange и не слить чувствительные данные в сеть
⏰ Когда: 27 ноября, 11:00 по Москве
📍 Регистрируйтесь на вебинар!
SuperHardio time*! Чтобы узнать, как захардкорить самое ценное и построить настоящий лабиринт для хакера, присоединяйтесь к нашему новому образовательному проекту от ИТ-экспертов Positive Technologies.
В программе:
- Что не так с типовой настройкой Microsoft Exchange 2019
- Топ-3 сценария уязвимостей
- Как ИТ-специалисту справиться с бременем ответственности за корректную работу почтового сервиса.
- Поговорим про харденинг Microsoft Exchange 2019 и особенности подхода к повышению киберустойчивости
Вебинар будет полезен архитекторам, CIO, СТО, DevOps-экспертам и техническим специалистам разных профилей. Присоединяйтесь!
*Это как "Марио тайм", время героев-экспертов харденинга
5 декабря пройдет онлайн-митап для java-разработчиков от Naumen. Спикеры поделятся опытом в промышленной java-разработке, реальными кейсами и рекомендациями.
В программе три доклада:
🔸 Как приручить JSON — Максим Осипов, руководитель группы разработки Naumen SMP
🔸 Прагматика микросервисов: строим большую систему с помощью пачки монолитов — Дмитрий Черкасов, DevRel Jmix
🔸 Бэкэнд изображений в ОК — Руслан Измайлов, ведущий java-разработчик в ОК, VK
Старт митапа 5 декабря в 16:00 мск | 18:00 екб.
Участие как всегда бесплатное, нужна только регистрация.
→ Зарегистрироваться на митап.
Реклама, АО «Нау-сервис», ИНН 6671116364
https://www.naumen.ru/
erid: 2VtzqvtsKYL
#фишка дня
Помните, обсуждали фишку в Git — bisect? Ну, буквально, двоичный поиск косяка в коммитах: /channel/htmlshit/3061
Суть в том, что ты приближаешься к проблемному коммиту с двух сторон.
А где ещё у нас могут быть проблемы, потому что мы сделали или установили что-то не то?
Да везде, буквально.
И сегодня речь пойдёт о похожей фишке в редакторе Visual Studio Code. Спряталась она в трёхточечном меню в панели расширений.
Вот обновили вы редактор, или открыли что-то, что до этого не открывали. Или куча расширений обновились разом и началось какое-то неопределённое поведение — жамкаем на Start Extension Bisect.
Редактор отключит все расширения и перезагрузится, спросив о проблеме — видна или нет. Какждый раз вам нужно будет подтвердить её наличие, или опровергнуть. И так несколько раз.
А потом предложит отправить отчёт об ошибке, ну или просто отключить ломающее всё расширение.
Как вам идея, котаны?
#vscode #extension #bisect
#заметка дня
Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»
И, вроде, очевидный ответ: ставь таймаут да отменяй его:
Осторожно, псевдокод jQuery
let r = null;
$button.on("mousedown", function(e) {
e.preventDefault();
e.stopPropagation();
r = window.setTimeout(function() {
$button.html('Clicked');
}, 3000);
});
$button.on("mouseup", function() {
$button.html('Hold me');
window.clearTimeout(r);
});
function forward() {
tween.stop().to({
value: 2000
}, 3000).startFromCurrentValues();
}
function reverse() {
tween.stop().to({
value: 1000
}, 3000).startFromCurrentValues();
}
#инструмент дня
Не, ну вы только посмотрите, что происходит!
Исторически, библиотеки в Storybook собирались или с помощью webpack (5 версии сейчас), или vite. Но на днях автор Parcel выложил и свою интеграцию!
GitHub: https://github.com/parcel-bundler/storybook?tab=readme-ov-file
Основная фишка проекта продемонстрирована прямо на видео: благодаря поддержке React Fast Refresh, можно обновлять компоненты или целые стори без потери состояния! 🤯
Конечно, если пропсы или аргументы стори поменялись — стейт не сохранится, но тем не менее это очень круто, что появилось больше вариантов бандлинга для Storybook.
#react #storybook #parcel
Забирай пошаговую roadmap по JAVA
FAANG School в течение 24 часов отдают бесплатно свою библиотеку знаний. Вы можете получить доступ:
– Redis - 5 улучшений для твоего пет-проекта
– Пошаговая RoadMap по Java
– Мануал по Docker. Основные команды и концепции
– Микросервисы. Вопросы с собеседований
– Шпаргалка с горячими клавишами JetBrains IDE. Ускоришь работу в 10 раз
– Desk setup. Подборка аксессуаров для комфортной работы
– Шпаргалка по Kafka
– Инструкция по работе с Git
– Подробный гайд, как найти работу в IT без опыта
– Подборка платформ с вакансиями для java-разработчиков
Последнее пополнение - Шпаргалка по Spring, в которой подробно разобрали, что такое паттерн Наблюдатель, и как его реализовать в Java. А также познакомитесь с событиями и научитесь работать с ними в Spring Boot!
Библиотека знаний обновляется постоянно, но бесплатный доступ длится всего сутки. Чтобы получить полезные материалы, переходи по ссылке и жми на оранжевую кнопку.
#фишка дня
Ана Тюдор выложила уморительный SVG-фильтр, который позволяет превратить картинку в её контуры.
Выглядит он прям максимально просто:
<filter id="outline">
<feGaussianBlur stdDeviation='3'/>
<feComponentTransfer>
<feFuncA type= "table" tableValues="-3 4 -3"/>
</feComponentTransfer>
</filter>
#заметка дня
Сегодня немного о том, как же хорошо иметь отклик аудитории в соцсетях.
Некто Бен Дикен (ну как, некто, его статью по B-деревьям и индексам в базах данных мы недавно читали) решил хайпануть на теме производительности разных языков и сред. Ну, на синтетических тестах, если уж совсем точно.
И выкатил видео, на котором тупо визуализировал результат выполнения 1 миллиарда итераций вложенных циклов: https://benjdd.com/loops/
Ну, условно, вот такой код:
let array = new Array(10000);
for (let i = 0; i < 10000; i++) {
for (let j = 0; j < 100000; j++) {
array[i] = array[i] + j;
}
}
new Int32Array(10000), например).
#расширение дня
А что, если история гита может быть представлена не в виде вертикального списка?
А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?
А что, если можно не открывать интерфейс git blame на каждый чих?
Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.
Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
Всем git, котаны!
P. S. вы же в курсе, что устанавливать расширения можно из консоли?
Как-то так:
code --install-extension pomber.git-file-history
code недоступна, решение тут.
#инструмент дня
Итак, помните пример современного глитч-искусства на примере Твиттера?
Ну я про React Scan, который показывает число ререндеров на странице, вот: /channel/htmlshit/3285
Парни выпустили CLI-утилиту, чтобы можно было просканировать любой сайт! Да-да, они обещали расширение для браузера, но пока так:
npx react-scan@latest <URL>
Готовишься к Frontend или Backend собеседованию?
Разбираем для тебя самые актуальные вопросы для подготовки
Выбирай свое направление:
👩💻 Frontend
👩💻 Python
👩💻 Go
👩💻 Java
👩💻 C/C++
👩💻 C#
👩💻 PHP
Уточнение! Не "картинка сохранится на сервере", а "картинка останется в форме, даже если форма ещё не была отправлена".
Читать полностью…
#статья дня
Я устал сидеть с покерфейсом на собеседованиях фуллстак- и бакенд-лидов, когда коллега начинает спрашивать про работу индексов в системах баз данных и их оптимизации.
Поэтому я решил найти хоть что-то визуальоное, чтобы начать вхождение в тему.
И, не поверите, таки нашёл!
Итак, встречайте. Деревья поиска aka B-деревья и их использование в индексах баз данных: https://planetscale.com/blog/btrees-and-database-indexes
Насыщена интерактивными примерами, можно собственноручно подобавлять ключи и увидеть, как именно принимается решение в какую ветку полетит та или иная пара ключ-значение.
Объясняются принципы работы деревьев, принципы их хранения на диске и алгоритмы поиска, например, упорядоченных значений.
Это для многих (включая меня) немножко хард-левел, поэтому на данный момент пост на правах закладки и читаю я его параллельно с Виртом и Википедией.
Но как же красиво, ну.
#algorithms #db #index
В сложных распределённых IT-системах разные компоненты постоянно обмениваются сообщениями. Брокеры сообщений нужны, чтобы контролировать этот обмен, — и Apache Kafka один из них.
Apache Kafka — это распределённая система, предназначенная для обработки потоков данных в режиме реального времени. Её можно сравнить с почтой — одни сервисы передают туда сообщения-письма, а другие — получают.
На курсе «Apache Kafka для разработки и архитектуры» от Яндекс Практикума за 3 месяца вы освоите навыки, которые помогут работать с более сложными продуктами и сможете повысить свой уровень, как специалист. Наш курс не про базу работы с Apache Kafka, а про комплексное погружение в инструмент.
Cамое главное никаких давно снятых видео и длинных лекций. Теория и практика проходят в интерактивном учебнике в удобном темпе без жёстких дедлайнов! А воркшопы с опытными разработчиками, рассказывающих о лучших практиках и разбирающих сложные кейсы, можно смотреть в записи, если вы не успеваете их посетить.
Начните учиться уже сейчас!
Пройдите бесплатный тест и поймите, подходит ли вам курс.
#срочно дня
У меня через 20 минут собеседование человека на сеньора-фронтенда.
Раз вам так не понравился вопрос с Array.sort, накидайте ваших любимых.
Только срочно, я знаю, вы у меня лучшие по вопросам, вы можете 🤩
#такое дня
Меня очень забавляет как медленно, но верно, в блочную модель CSS протекают абстракции из inline, flex и grid-модели.
То есть, по факту, грани настолько стираются, что скоро можно будет просто верстать.
Ну, например, те же align-content: center,margin-inline, margin-block, margin-inline-start...
А теперь ещё потихоньку начинает просачиваться концепция stretch, растяжения элемента, как во флекс-модели. Это когда элемент растягивается на всю доступную ширину, исключая поля.
Пример явно дан на иллюстрации. Более близким к реальности на момент конца 2024 года будет что-то такое:
width: -webkit-fill-available;
width: -moz-available;
width: stretch;