14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Как в Telegram собрать первую 1 000 подписчиков с нуля и начать получать доход?
Большинству специалистов и предпринимателей хочется свой телеграм-канал. Но непонятно, как выбрать тематику, аудиторию, разобраться в рекламе, контенте.
Решение есть — подписаться на канал Кристины Графовой и забрать бесплатный гайд «Как собрать первую 1 000 подписчиков в телеграм-канал» в закрепе.
13 страниц с 12 подробно расписанными способами привлечения подписчиков. Половина из них — бесплатные, и кроме Кристины вам о них никто не расскажет.
Вы определитесь с темой канала, аудиторией, начнёте продавать рекламу и привлечёте первых людей, которые будут покупать ваши продукты и услуги.
Вот минимум 3 причины, почему стоит следить именно за Кристиной
— Раскачала с бизнес-партнёром сетку каналов до 65 000 подписчиков и продавала рекламу «ВТБ», «Альфа-Банку», «Яндексу» и другим большим рекламодателям
— Продала сетку за 2 600 000 рублей и уехала жить в Таиланд
— 3 года помогает запускать людям каналы и делать из них источник дохода и нетворкинга
Рекомендую начать с бесплатного гайда в закрепе, получить инъекцию пользы за 0 рублей и подписаться на канал
#инструмент дня
Каждый разработчик за свою жизнь должен сделать следующее: написать музыкальный плеер, тетрис, игру Жизнь. Если ты веб-разработчик, то ещё свою CMS, PHP-фреймворк, стейт-менеджер и... и уведомления.
Если тебе 14 лет, то ещё и криптобиржу.
Короче, уведомления вообще штука раздражающая. Всегда чего-то не хватает в существующих решениях. Но в любом случае, сегодня вашему вниманию React Hot Toast: https://react-hot-toast.com/
Отличаются маленьким весом, возможностью отмены скрытия пока наведена мышь, поддержкой промисов и JSX-содержимого, стилизуются, прости господи, через Tailwind. Не думал, что внесу это в плюсы, но после UI-китов на Emotion это уже очень хорошо.
Ещё бы туда диалоги добавить, было бы уапще.
Всем тостов, котаны! За мой счет :)
#react #toast #бородач
Более того, что делать если вам нужно создать тип, параметры которого служат для передачи в функцию, которая является библиотекой и вам нужно передать все required параметры, не делайте это ручками, используйте Parameters
const createPerson = ({
firstName,
lastName
}: {
firstName: string,
lastName: string
}) => ({
firstName,
lastName
})
type CreatePersonParams = Parameters<typeof createPerson>[0];
const params: CreatePersonParams = {
firstName: 'John',
lastName: 'Doe'
};
Читать полностью…
#заметка дня
Что делать, если нужная вам библиотека не предоставила типы для всех публичных методов?
Ну вот такое вот архитектурное решение: метод экспортирован из модуля, а тип или интерфейс — нет?
Делать unknown или any? Копировать и переопределять с помощью as?
Ни в коем случае! Вам нужен простой советский... ReturnType: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype
Пример использования — на иллюстрации. Ну или ещё можно так:const createPerson = () => ({Не делайте ерунды, котаны. Читайте документацию.
firstName: 'John',
lastName: 'Doe'
})
type Person = ReturnType<typeof createPerson>
#typescript #ts #types #бородач
#фишка дня
Стопудово вы делали эффекты как на видео через три 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%;
🚁 Amphi Analytics: пока Amazon и Walmart мучаются с доставкой своих товаров дронами, в китайском Шеньчжене летательные аппараты каждый день доставляют сотни заказов.
📫 Компания Meituan выбрала довольно сложную для этого точку — густозаселенные районы мегаполиса. В этом и был весь смысл: в то время, как американский город представляет собой множество коттеджей, китайские города больше похожи на «каменные джунгли» - высотки с высокой плотностью населения. Такая бизнес модель позволила сократить главный кост - время полета. Дроны не доставляют товары прямо к двери, а делают это в специальных пунктах, где могут собираться несколько заказов одновременно — так юнит экономика легко сходится.
🔥 Автор канала Amphi Analytics пишет о новых технологиях в IT и бизнесе.
#такое дня
Сегодня на работе обновили проект до последней стабильной Node.js и была сказана немного неаккуратная фраза:
— Next on our list is Next.js 14.
И понеслась...
— I have remixed feelings about this
— You are being so reactive
— Not a good move from my vue
— Tired of this, I'll rest on my nest
— Bun intended
— I hate you all I want to underscore this. You’ve ruined everything I believe is good with humanity.
— I'll go
— This conversation is full of solid puns
Продолжим в комментариях? Или ну такое?
#инструмент дня
Полку API-клиентов прибыло! Я уже рассказывал про GUI для HTTPie, который делали Злые Марсиане, а теперь пришло время рассказать ещё об одном. Почему пришло? Ну потому что Postman борзеет просто по часам и работает отвратительно.
Итак, Bruno: https://www.usebruno.com/
Хранит все запросы и коллекции в простых текстовых файлах (разрабы придумали язык разметки Bru специально для этого). Правда, я знаю как минимум одного человека-пользователя PhpStorm, который на этом месте презрительно хмыкнул.
Как следствие, все ваши коллекции запросов хранятся просто на диске. Нужно облако — используйте Git. Вот так просто. Планов на своё облако у команды нет.
Да, есть платная версия, 12 долларов в год (двенадцать в год). В ней из интересного есть поддержка вебсокетов и массового прогона данных по коллекциям для нагрузочного тестирования.
Кажется мне, для многих профессиональных пользователей Postman основной причиной всё ещё будут скрипты, но они и в Bruno есть. Посмотрим, куда вывезет.
#api #client
#такое дня
Тут пришли сведения, что сообщение выше не поддерживается более старыми версиями Telegram, чем та, в которой оно было создано.
Я приношу свои извинения. Это не первый раз, когда команда телеги совершает подобное, и явно не в последний :(
А вы знали, что есть нейросеть, которая кодит на Java лучше 68% айтишников?
А еще есть программа, которая анализирует требования HR’ов разных компаний и оформляет ваше резюме конкретно под них. Шанс получить оффер растет в 2-3 раза.
Нейросети – это не только ChatGPT и Миджорни, и канал «ЧбЕ» вам это докажет.
Уже сейчас есть нейронки, которые кодят лучше джунов – и если не следить за этим сейчас, то через пару лет даже топовый прогер рискует остаться в wait-листе эйчаров. А здесь о таких вещах пишут заранее.
Подпишитесь, айтишникам пригодится: ЧбЕ
У меня сегодня день рождения. 36 лет.
По этому поводу уже вполне осознанно и намеренно рекомендую вам доклад Вадима Макишвили: 36.
https://youtu.be/nIFClfBXuIQ
Он о том, как не выгорать и найти смысл жизни и работы. И отделить одно от другого, что бывает сложно.
Рекомендую я его на самом деле каждый год, но сегодня, получается, официально.
Не выгорайте, котаны.
#библиотека дня
Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.
Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles
Я помню первое появление этой либы, они начинали с connected particles и были тупо везде. В итоге это настолько надоело, что я вообще выкинул их из головы.
А парни развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html
Ну и адаптеры есть буквально под все фреймворки.
Да, снег там тоже имеется.
#particles #effect
#заметка дня
Чуть выше я описывал процесс подготовки релиза из транка и мучения с черрипиками: /channel/htmlshit/2318
Но что делать, если git cherry-pick прошёл успешно, а тесты падают? В рабочем пылу можно успеть выбрать не один десяток коммитов (не надо так, к слову) и какой-нибудь окажется зависим от другого. Например, импортов нужных ещё нет.
Очень просто! Используем git revert и указываем нужный коммит. В случае конфликтов команды те же, что и у черрипиков.
Но вообще лучше аккуратно смотреть, что выбираете.
#git #release #trunk #cherrypick
Как выбрать направление и начать путь в IT? Откровенный разговор с Кириллом Мокевниным, сооснователем Хекслета.
Бесплатная онлайн-профориентация.
⏰ Когда: 31 октября 19:00 мск.
✔️ Выстроите свой алгоритм выбора профессии.
✔️ Познакомитесь с рынком IT-вакансий.
✔️ Пройдете тестирование на выбор языка.
🎁 А еще! Полезные подарки от Хекслета: всем, кто зарегистрировался — Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику — Карта компетенций Веб-разработчика и Гайд «Как выделиться среди кандидатов и найти первую работу в IT».
Реклама. ООО "ХЕКСЛЕТ РУС". ИНН 7325174845. erid: LjN8K8ofs
#фишка дня
Простите, мои дорогие, оставил вас наедине с рекламой.
А всё потому что продолбался весь день с подготовкой релиза. С cherry-pick-ами нужных коммитов. Шутки про черрипики точёны оставьте себе.
В чём же проблема?
А в том, что наша команда работает по trunk-модели. Всё сливается в мастер, мастер автоматически релизится как Latest-версия продукта и отправляется в тестирование.
Продакшен-релиз, полученный из стабильного мастера (trunk), обзывается как минорный в рамках модели семантического версионирования.
Когда нужен релиз, а транк не считается стабильным — выбираем нужные коммиты и релизим патч-релиз из своей ветки.
Очень важный момент здесь: время, когда транк считается нестабильным, должно быть сведено к минимуму. В любой момент команда должна иметь возможность релизить текущее состояние проекта.
Для этого реализуются различные feature-флаги и прочие условные условности для разделения потоков пользователей продукта по фичам.
Естественно, такое состояние удерживать не всегда просто, потому череда патч-релизов может быть очень длинной. Это не то чтобы плохо само по себе...
Плохо когда вы забыли о гигиене и смешали коммиты от двух фичей — свободной к релизу и нестабильной. Или когда не засквошили PR-коммит (мой случай).
Тогда выборка черри-пиков может быть не самым приятным занятием. А грязные черри-пики штука очень неприятная.
Так вот, про что же фишка дня? А вот про то, что в процессе я выяснил: совсем не обязательно делать checkout коммита по его хэшу, можно по сообщению! Буквально:git checkout ':/add multiselect to ui kit'
Причём, сообщение не надо вспоминать полностью!
В итоге, git выберет ближайший к вам такой коммит. Уютно!
В общем, соблюдайте гигиену репы, котаны. Не долбитесь весь день в черрипики.
#git #til #commit
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 14 ноября.
А вот в комментариях к предыдущему посту ещё полезное :)
Читать полностью…
Стань профессионалом в JavaScript!
Бесплатный интенсив для начинающих, который даст навыки разработки высококачественного кода и современных приложений.
https://in.methed.ru/md/e7a4ed84fe93b72bde0b9ef0ce74dd6f?utm_source=telegram&utm_medium=october_youtube&utm_campaign=htmlshit
- Возьмемся за разработку на JavaScript;
- Научимся взаимодействовать с сервером;
- Напишем клиентскую логику и взаимодействие с сервером
https://in.methed.ru/md/e7a4ed84fe93b72bde0b9ef0ce74dd6f?utm_source=telegram&utm_medium=october_youtube&utm_campaign=htmlshit
Регистрация займет всего несколько минут, а в результате вы получите уникальный опыт и новые знания. Не упустите свой шанс стать профессионалом в веб-разработке!
Зарегистрируйтесь на бесплатный интенсив по JavaScript уже сегодня и начните свой путь к успеху!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024. erid: LjN8KGmpt
#фишка дня
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation #бородач
#заметка дня
В чём разница между селекторами :disabled и [disabled]?
Вот вы не знали (наверное), а она есть!
Псевдокласс :disabled выберет любой элемент, находящийся в отключённом состоянии.
Селектор атрибута [disabled] выберет любой элемент, имеющий атрибут disabled.
Например, <input type="text" disabled/> подпадёт под оба селектора, вне зависимости от того, случилось это на этапе прямого рендера или через установку свойства disabled узлу.
Да не томи уже!
Короче, суть дела в том, что атрибут disabled может быть установлен на fieldset, в таком случае поля будут недоступны, но в селектор input[disabled] не попадёт ничего.
Сложно? Вот пример: https://codepen.io/alinaki/pen/VwgKOPE
Короче, аккуратнее.
#css #disabled
Присоединяйтесь к VK Kubernetes Conf — конференции для тех, кто развивает экосистему Kubernetes
16 ноября в 14:00 (мск) в офисе VK и онлайн
Поговорим о том, как обеспечить безопасность Kubernetes-проектов, рассмотрим нетривиальные способы настройки кластера для оптимизации стоимости их обслуживания. Рассмотрим кейсы с K8s от команд Тинькофф, СберМаркет, Флант, Wildberries, Luntry, VK и других компаний.
Что вас ждёт:
🔹Экскурсия по матрицам угроз для контейнеров и Kubernetes
🔹Опыт реализации платформенного подхода для безопасности K8s: от контроля доступа – до харденинга нагрузок
🔹Опыт создания инструментов для мониторинга сетевой связанности, работы с логами и мониторинга кластеров
🔹И, конечно, поговорим о том, как за 10 лет (почти) Kubernetes повлиял на индустрию и как технология будет развиваться дальше.
Регистрируйтесь на VK Kubernetes Conf
Зарегистрироваться
#инструмент дня
Итак, перед вами стоит задача сделать встраиваемый виджет. Любого рода, от плагина дашборда с показателями продаж до интерактивного баннера. Писать нужно быстро, эффективно, поддерживаемо. И чтоб размер поменьше.
Ванильный JS — мелкий размер, но поддерживаемо — вряд ли. React — один только DOM-слой займёт 40kB, Preact — 4kB, уже очень хорошо, Svelte свернётся в 1.6kB, но учить птичий язык шаблонов — это надо иметь причину...
И тут выходит VanJS со своими 0.9kB: https://vanjs.org/
Сразу пример кода:
const Hello = () => div(
p("Hello"),
ul(
li("World"),
li(a({href: "https://vanjs.org/"}, "VanJS")),
),
)
van.add(document.body, Hello())
Максимально нативно и понятно, не правда ли? И логика построения UI сохраняется. Есть управление стейтом, поддержка TS. Не нужно никакой сборки, садись пиши. Прекрасная документация, включая примеры от сообщества!
А его шаблонный движок вообще может быть использован отдельно. Назвали Mini-Van :)
#van #framework #js #бородач
#библиотека дня
Стандартный метод fetch, даром, что встроенный, представляет собой крайне удручающее зрелище, требующее огромное количество бойлерплейта — настроек — вокруг себя.
Поэтому многие до сих пор предпочитают axios, просто чтоб не связываться.
Мой друг и, какое совпадение, подписчик решил эти вопросы реализовав библиотеку extended-fetch, о которой я даже писал, с этим же введением: /channel/htmlshit/1290
Слово автору:
если очень обобщенно - это попытка вынести в абстракцию над fetch наиболее востребованный функционал axios
цели просты - максимально возможное следование спецификации, "сквозная" типизация, ноль зависимостей, изоморфный код (да, в nodejs сейчас undici как имплементация fetch)
А теперь у него нашлось немного времени, так что он обновил библиотеку чтобы можно было в дженерике передавать свой тип возвращаемых запросом данных
https://github.com/glebcha/extended-fetch/tree/master#custom-response-type
то есть чтобы можно было делать так
typescript
const api = createHttpClient();
interface Book {
id: string,
description?: string,
}
api.get<Book>('/api/books/12’)
Если не передавать ничего в дженерике и выполнять api.get('/api/books/12'), то вернется объединение типов
typescript
Promise<string | Record<string, unknown> | RequestInit | Blob | ArrayBuffer | FormData>
По-моему, хорошая альтернатива axios-у, если неохота тянуть лишнего.
#fetch #axios #pr
#инструмент дня
Я много обещал рассказать о сетапе для разработки веба, но руки не доходили. Так что приходится кусочками 🙂
Если кто общался со мной в чате, знает: первая рекомендация для работы — это Node Version Manager, nvm.
Зачем управлять версиями ноды? Oh, sweet summer child...
Ну, как минимум, проекты не всегда переводят на поддержку самых последних версий, даже всеми любимые фронтенд-утилиты. Да и legacy strikes back.
Но nvm не самое быстрое и удобное решение, она ставит ноду глобально, приходится между проектами переключаться ручками. Инициализация нового терминала может занять до нескольких секунд. Ну, мягко говоря, неудобно для работы со множеством людей и проектов.
И тут на сцену выходит Volta: https://volta.sh/
Написана на Rust, быстро инициализируется, позволяет задать нужную ноду прямо в package.json! В итоге переключился на новый проект — и у тебя уже другая версия Node.js
Настоятельно рекомендую попробовать, даже если ты индиго на острие технологий.
#js #node #nvm #volta #бородач
#такое дня
Эта картинка, с презентации NextJS 14 обошла весь твиттер и все ресурсы для разработчиков. Естественно, со скандалом.
Что тут происходит?
По нажатию на кнопку мы выполняем некий код на сервере, исполняющий SQL через шаблонный литерал в какой-то базе данных.
Почему произошёл скандал? Ну, по мнению уважаемых и разных людей это всё возвращение к PHP4 и его спагетти-шаблонам.
Ну это когда вы сначала к базе данных подключились, а потом <!DOCTYPE HTML> и поехали.
Я не совсем с этим согласен и у меня такое чувство, что все эти уважаемые люди под камнем жили последние 20 лет и пропустили Ruby On Rails, Hotwire, Turbolinks, October CMS, Drupal AHAH, интеграцию Laravel и Vue.js и далее везде.
Камон, мы целую карточную игру на October CMS писали без единой строчки JS, только на директивах и атрибутах, переданных в PHP-шаблон. Да, максимально простую, но зато минут за пять, кроме шуток. Эти вещи не вчера появились, их хотели всегда.
Да, код с картинки выглядит убого. Да, директивы "use server" и "use client" — явный костыль. Я сейчас не буду поддаваться истерии и писать о том, что там sql без валидации — откуда вы, блин, знаете? Там же буквально теговый шаблон, sql это функция, которая может делать что угодно. Ну да не суть.
Короче, если бы я до сих пор разрабатывал промо-сайты, я бы сейчас прыгал до потолка, даже несмотря на то, что NextJS я очень не очень люблю. А сейчас у меня просто иные задачи на ином стеке.
Грязь можно развести при любом подходе, если человек не понимает базовых принципов деления на компоненты, не говоря уж о SOLID вообще.
Но будем реалистами — история развивается по спирали и серверные компоненты уже с нами. Да, я прекрасно знаю, где лично я бы их применял, будь у меня такая возможность.
Вы можете воротить нос, а можете творить :)
#nextjs #react
📣 Масштабное исследование по использованию Kubernetes — накануне дня рождения оркестратора
Kubernetes, одному из самых популярных Open Source-проектов, совсем скоро исполнится 10 лет. Накануне этой даты мы в VK Cloud хотим выяснить, как оркестратор помогает решать задачи маленьких и крупных компаний и поделиться результатами исследования со всем сообществом.
Если вам не безразличен Kubernetes, вы можете внести вклад в развитие общего дела: пройдите небольшой опрос — он займёт примерно 10 минут.
Ваши ответы помогут сформировать большой аналитический отчет. Все участники опроса первыми получат результаты исследования — мы пришлем их на почту.
Приглашаем поучаствовать техлидов и тимлидов, разработчиков, тестировщиков, девопсов, админов, CTO, CIO, CDTO и всех, кто работает с K8s.
Заполнить анкету можно тут: https://bit.ly/3MeMQwZ
#фишка дня
Чтобы задать анимацию появления какого-либо элемента на экране при загрузке страницы, добавлении элемента или обновлении DOM совсем не нужно городить сложных конструкций.
Достаточно проделать следующий трюк:
@keyframes appear {
from {
…whatever
}
}
Это анимирует объект в момент его появления из положения, заданного в анимации, в то, что указано в стилях.
Пример на CodePen: https://codepen.io/alinaki/pen/XWXORzM
Попробуйте обновить страницу и поиграться со значениями.
Спасибо Twitter-банде https://twitter.com/keyframers за эту находку.
#css #keyframes #animation #бородач
#статья дня
Итак, scroll-driven анимации уже давно реальность, пусть и поддерживаются пока только в Chrome, начиная с версии 115. Но они являются прекрасным примером прогрессивного улучшения, а значит, заработают без проблем сразу, как Safari и Firefox их начнут поддерживать.
Ну и не забываем, что браузеры на базе Chromium занимают львиную долю рынка. Так что для экспериментов полно место.
Итак, сегодня на обзоре статья деврела из Google Брамуса Ван-Дамма. Он пионер CSS-анимаций по скроллу и посвятил этому уже не один год.
Ещё раз ссылка: https://www.bram.us/2023/10/23/css-scroll-detection/
Рассказывается о механиках определения направления скролла и применении разных эффектов в зависимости от, включая задержку начала анимаций.
Поскольку есть немаленькая вероятность, что вы пришли в канал по сегодняшней рекламе, вот собственно её исходник: https://codepen.io/alinaki/pen/rNPVjKG
Всё волшебство кроется в грамотном применении CSS-переменных. Кто-то может помнит, что я рассказывал о нативных миксинах в CSS, об анимациях по ключевам кадрам.
Ключевые кадры штука очень мощная и их не обязательно применять для, собственно, анимаций. Вот, например, можно отложить заполнение некой CSS-переменной: https://codepen.io/bramus/pen/YzdbdyL
В итоге, дальше дело техники: отложенная позиция скролла вычитается из текущей и получаем направление скролла!
А уж куда это знание применить — дело ваше. Рекомендую к прочтению!
#css #animation #scroll
Каналы про IT делятся на 2 типа:
1. Выучи Python, JavaScript и C++ за 0,0001 секунды просто читая наш канал…
2. Хочешь читать переписки бывшей? Хакер из канала "Взлом Жопы" рассказывает как скачать Tor…
Но среди копипастных статей и мусора есть реально годный проект айтишника, работавшего 9 лет в ИБ — Пакет Безопасности.
Внутри узнаете когда наступит эра без паролей, почему 2022 стал годом утечек персональных данных и как не оказаться жертвой новой схемы интернет-скама.
Подпишитесь, злоумышленники не дремлют: @package_security