14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#фишка дня
Не только лишь все знают, что одному элементу можно задавать несколько фонов.
Ну, буквально:
.myclass {
background:
background1,
background2,
/* …, */ backgroundN;
}
Вы уже работаете с JavaScript?
А вы сможете пройти тест для PRO?
https://otus.pw/rzgFV/
📚Получите актуальные навыки на практике,
используя привычные подходы.
— Node.js, Angular, React.js и Vue.js уже ждут вас на онлайн-курсе «JavaScript Developer. Professional» от OTUS.
🔥Пройдите тестирование, чтобы:
- Оценить свои навыки
- Получить курс по специальной цене после успешного прохождения теста
- Получить доступ к бесплатным урокам курса от OTUS
👉Ссылка на тест: https://otus.pw/rzgFV/
#реклама
О рекламодателе
20 000 рублей Алексей Т. заработал за первый заказ, и со следующих заказов ещё +34 000 руб. пришло на карту.
Привет! Я Fullstack-разработчик Роман Чернов с опытом более 10 лет.
Я помогаю желающим работать в IT с обучением, практикой и выходом на фриланс.
Сейчас стартует мой бесплатный курс по фронтенд-разработке, где за 7 дней ты:
1. Сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
Подходит для всех уровней и не требует опыта в программировании.
👉 Забрать обучение бесплатно
#ссылка дня
Очень коротенькое дополнение в коллекцию адвент-календарей, которую мы собрали вчера: /channel/htmlshit/3317
Правда, на сей раз без задачек :)
Календарь статей по производительности веба!
Web Performance Calendar: https://calendar.perfplanet.com/2024/
Каждый день на протяжении декабря будет появляться по статье, посвящённой тому или иному аспекту производительности.
Темой первого декабря был Закон Гудхарта: «Когда мера становится целью, она перестает быть хорошей мерой», очень хорошая вводная статья о том, что не надо бездумно гнаться за показателями.
Темой вчера стал общий обзор терминов.
А сегодня — а пока не знаю, ждём открытия окошка!
#advent #calendar #webperf #performance
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
Уточнение! Не "картинка сохранится на сервере", а "картинка останется в форме, даже если форма ещё не была отправлена".
Читать полностью…
#новость дня
Ой, а что это у нас такое на картинке? А это, товарищи мои, кусок документации React из 2013 года.
Да, если вы не верите своим глазам или не поняли — в то время на полном серьёзе предлагалось использовать jQuery для создания AJAX-запроса данных. А что делать, что делать...
А нынче на дворе уже React 19, который вот только-только вышел, я опоздал с новостью на пару дней: https://react.dev/blog/2024/12/05/react-19
После стольких скандалов и задержек, после стольких криков о том, что React умер (нет) и не нужен (тоже нет).
Помните, я упоминал о том, что они замедлили дерево рендера в Suspense и не отрисовывали дочерние ноды, пока не разресолвится материнская? Что ж, они эту ситуацию даже отдельно вынесли, дав ссылку в самом верху, снабдив прекрасными схемами: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense
Конечно же многострадальный React Compiler тоже здесь. И передача ref как простого пропа. И улучшенная обработка ошибок (это, кстати, ломающее изменение, читайте руководство по обновлению).
Почему я вспомнил про использование jQuery для AJAX? Ну, потому что асинхронные функции уже давно не ограничиваются одной только передачей данных по сети, и для работы со статусом их обработки появился новый API — Actions и, соответственно, новые хуки: useActionState и useTransition.
Для работы с формами предложен новый хук useFormStatus, для обращения к форме из её компонента больше не нужен контекст!
Ну об API use не писал только ленивый — считывать состояние промисов никогда не было так просто.
Там ещё много интересного. И пока одни ноют о том, что бандл стал чуть больше, я планирую убрать лишние обработчики загрузки и работы с формой. Где-то я, возможно, даже откажусь от react-hook-form и react-query, просто потому что мне нужны все их возможности.
В общем, мне нравится. А вам как?
#react #release #changelog
#фишка и #статья дня
Надоело проигрывать битву z-index? Используй BFG от CSS: infinity.
Ладно, кроме шуток (хотя я и не шутил). С помощью infinity можно гарантировать верно скруглённые углы на прямоугольниках, мы с вами уже рассматривали алгоритм для веба и Flutter: /channel/htmlshit/1565
Вместо
border-radius: 9999px;
border-radius: calc(infinity * 1px);
calc(infinity) = calc(1 / 0)
calc(1px / 0) = calc(infinity * 1px)
#новость дня
Котаны, языку JavaScript сегодня исполнилось 29 лет!
4 декабря 1995 года после фееричных 10 дней разработки Брендан Эйх представил компании Netscape язык LiveScript, предназначавшийся для встраивания в их всё ещё свежий и самый популярный в мире браузер.
Но яйцеголовые маркетологи были уже тогда, потому язык быстренько обозвали JavaScript и выкинули на рынок как есть. Да, история немного сложнее и они реально собирались создать упрощённый вариант Java и JVM, но уж получилось как получилось.
Продавать это всё равно решили как простое решение для добавления интерактива на веб-страницы используя ваши существующие ресурсы в виде программистов на Java.
В итоге, JavaScript прошёл все круги издевательств, особенно от Microsoft. Был стандартизирован как EcmaScript, а году так в 2008 его даже называли СНЯП: Самый Недооценённый Язык Программирования.
Ну в 2024 году мы с вами точно можем сказать, что если кого и недооценили — то это точно не JS.
В общем, дальнейшего джаваскрипту развития, котаны! Всё только начинается.
#js #jscript #ecmascript #бородач
#статья дня
Думали, научились отличать 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 МСК по ссылке.