htmlshit | Unsorted

Telegram-канал htmlshit - Будни разработчика

14544

Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat

Subscribe to a channel

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

🥷🏻 Привет, я Лёша Истомин, фронтенд разработчик, который топит за производительность и доступность сайтов.

——• 📗 Что полезного на канале? 

👉🏻 7 постов, которые важно прочитать каждому, кто ищет работу *смотреть*

👉🏻 Разбор моего пути в IT, собрал все ошибки построения карьеры за тебя *читать*

👉🏻 Рассказываю куда можно развиваться программисту с опытом *читать*

👉🏻 Напоминаю как не застревать на грейдах *читать*

👉🏻 Что обязательно должен прочитать каждый уважающий себя фронтендер *смотреть*

Больше в канале

Читать полностью…

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

#статья дня

Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: /channel/htmlshit/1580

Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.

А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)

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

Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d

Ну, точнее, линейная алгебра.

Есть перевод на русский: https://habr.com/ru/articles/870462/

Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.

#svg #math #matrix #transform

Читать полностью…

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

#фишка дня

Сейчас в CSS присутствует 54 разных единицы измерения (units).

Пятьдесят четыре!

А ты до сих пор используешь одни только пиксели aka px.

Так вот, используя единицу измерения lh — привязанную к line-height — и свойство background-clip, можно, например, красиво подсветить нужное число строк в любом тексте.

Прям как тут: https://codepen.io/alinaki/pen/xxMJXaV

Поиграйтесь с настройками и шириной блока, получается очень интересно. Автор красоты — Jhey.

А чтобы не запутаться — есть прекрасный ресурс https://whatunit.com/

На нём имеется диаграмма принятия решений, когда какую единицу брать. Если всё ещё непонятно, посмотрите видео от Kevin Powell: https://www.youtube.com/watch?v=Utc_uhvTluk

Он, кстати, автор диаграммы.

В общем, просыпаемся, котаны. Будущее здесь.

#css #rem #lh #vh #measure #бородач

Читать полностью…

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

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

Лучший API — это тот, который не пришлось писать самому! Потому так популярны и фреймворки, и сервисы вроде Firebase.

Но если охота чуть больше контроля над базой данных и своими ресурсами вообще, а писать код всё ещё неохота, рекомендую взглянуть на PostgREST. Это инструмент, который превращает вашу базу данных в полноценный REST API.

Почему это круто?

Мгновенный API
Не нужно писать кучу эндпоинтов — PostgREST автоматически генерирует их на основе структуры вашей базы данных.

SQL вместо ORM Работаете напрямую с SQL-запросами, что дает максимальную гибкость и контроль над данными.

Авторизация и безопасность PostgREST использует роли PostgreSQL для управления доступом, избавляя от необходимости вручную прописывать логику авторизации. А процессы аутентификации и авторизации выстроены вокруг JWT.

Производительность Оптимизирован для работы с большими объемами данных, включая фильтрацию, пагинацию и сортировку.

Легкая интеграция
Подходит как для простых CRUD-операций, так и для сложной бизнес-логики через SQL-вьюхи или хранимые процедуры.

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

#postgres #api #service

Читать полностью…

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

Три вопроса

А бывало ли у вас такое, что обычный скрам превращался в настоящий стендап? Расскажу одну историю, чтобы поднять вам настроение.

Когда-то меня пригласили в стартап на должность CTO. К тому моменту MVP уже было запущено подрядчиком, продукт доказал свою состоятельность, и стейкхолдеры решили перенести разработку в in-house. В команде тогда уже было пять разработчиков, а руководил процессом CIO, который знал о скраме ровно одно — в 11:00 каждый день надо проводить дейли митинг и задавать три вопроса: Что делал? Что будешь делать? Что мешает?

Как-то раз, спустя пару недель после моего вступления в должность, я начал замечать странную закономерность. Две недели подряд по четвергам разные разработчики рассказывали… скажем так, про довольно странные задачи, даже прямо — несли лютую дичь. Причём никто из присутствующих, включая CIO, не замечал подвоха. В первый раз я решил, что, возможно, чего-то не понял. Во второй — стало интересно, но я всё же промолчал.

Позже, за закрытыми дверями, я выяснил, в чём секрет. Оказывается, это был командный внутряк! По четвергам ребята тянули жребий. Тот, кому «выпадала честь», должен был с максимально невозмутимым лицом залечить самую абсурдную задачу так, чтобы CIO ничего не заподозрил. Но главное правило — не рассмеяться самому.

Кстати, CIO никогда не замечал подвоха, а вот команда еле сдерживалась. После каждого такого дейлика разработчики с красными лицами пулей вылетали из кабинета под предлогом «срочных дел».

Мораль? Методология — это всегда больше, чем три вопроса. Если вы не понимаете сути инструмента, то ни о какой эффективности речи быть не может, а ваша команда обязательно найдёт способ это обойти — хоть иногда и с юмором.

#leadership #growth #creativity #story

Реклама. Логач А.В. ИНН 504809395120. erid: LjN8KadaE

Читать полностью…

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

#фишка дня

Надоело читать это: «To push the current branch and set the remote as upstream, use
git push --set-upstream origin fix/bug-1359»?

А всё потому что git на сервере не знает ничего о ветках на вашей машине. Нужно явно указать: «Хочу создать ветку на удаленном сервере с указанным названием и связать её с локальной». Названия даже могут отличаться, но чаще всего — совпадают. Ну, у меня, во всяком случае.

Поэтому, глядите чо: https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote

Ну или просто взгляните на КДПВ.

Завезли с версии 2.37.0, так что проверьте сначала. Спасибо за уточнение подписчику :)

#git #remote #бородач

Читать полностью…

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

#codepen дня

Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.

Переливающийся всеми цветами радуги светящийся текст!

Вот: https://codepen.io/thebabydino/pen/rNPOpJK

Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.

Жаль, я не знал об этой технике когда много лет назад делал сайт школе стриптиза. Там было много эффектов а-ля неоновое свечение. Фоток не будет.

#css #svg #filter #бородач

Читать полностью…

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

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

Ну что, вы уже сделали свой сервис для удаления фона с изображения?

Нет? А почему?

Даже Эдди Османи не удержался: https://bg.addy.ie/

Ведь, как мы уже писали, с помощью библиотеки Transformers.js можно с лёгкостью реализовать множество применений ИИ-моделей прямо в браузере! Да, без отправки на сервер. Пусть комп клиента старается :)

Гитхаб: https://github.com/addyosmani/bg-remove

Больше сервисов богу сервисов!

#ai #webgpu #image

Читать полностью…

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

Главная обязанность сотрудника в найме — это....

Приносить деньги бизнесу? Следовать внутренним регламентам? Соблюдать сроки по задачам? 

CEO ИТ-компании ПравоТех считает иначе. Главная обязанность наших сотрудников — получать удовольствие от работы.
 
Чтобы сотрудники успешно справлялись с обязанностью, мы изменили стратегию компании и сфокусировались на развитии уникальной корпоративной культуры.
 
Так мы отказались от строгих начальников в пользу лояльных лидеров-наставников, слушаем идеи каждого и даем возможности сотрудникам выбирать, чем они хотят заниматься в компании. 

Переходите в наш канал и узнайте, как компания помогает нам работать в удовольствие: /channel/+VcMuyvPsbzBkNTQ6

erid: LjN8KYEzh

Читать полностью…

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

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

Примерно пять раз в секунду где-то в мире очередному разработчику приходит в голову идея: «А что если я этот виджет сделаю независимо от основного приложения, на каком-нибудь миниатюрном фреймворке, чтобы было модно, молодежно переносимо?»

Когда такая идея приходила мне, я взял Preact, а потом Van. А тут недавно на собеседовании кандидат рассказал, что тоже сталкивался с подобной задачей и решил её через µhtml.

Микрохатээмэль

Сразу ссылка: https://github.com/WebReflection/uhtml

JSX там нет, вся работа через шаблонные литералы. Что, впрочем, выглядит вполне нормально:

import { render, html, signal, detach } from 'uhtml/preactive';

const count = signal(0);

render(document.body, () => html`
<button onclick=${() => { count.value++ }}>
Clicks: ${count.value}
</button>
`);

// stop reacting to signals in the future
setTimeout(() => {
detach(document.body);
}, 10000);


И да, ваши глаза вас не обманывают: сигналы! И SSR.

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

А ваши варианты, котаны?

#uhtml #js #framework

Читать полностью…

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

#ссылка дня

Всеобъемлющее руководство по созданию приложения адресной книги от создателей React Router: https://reactrouter.com/tutorials/address-book

Клиентский и серверный рендеринг, фильтрация данных, добавление. И даже немного о кодах ответов.

Для полноценного приложения останется добавить только работу с базой данных :) Но... не здесь.

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

#react #router #ssr #tutorial

Читать полностью…

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

Бесплатный курс Cloud DevSecOps — ваш шаг к безопасной разработке

Каждая строка кода — это потенциальная уязвимость. Если вы DevOps-инженер или разработчик, который хочет не просто писать код, а создавать защищенные приложения, этот курс для вас.

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

Что вас ждет:
— 10 уроков, которые помогут разобраться с DevSecOps.
— Практика с примерами кода на Java и разбором ошибок.
— Поддержка экспертов и активное комьюнити.

Учитесь бесплатно и в удобном для вас ритме — записывайтесь на курс Cloud DevSecOps по ссылке.

Реклама ПАО «ВымпелКом», beeline.ru
erid: LjN8K58hJ

Читать полностью…

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

Как с комфортом проводить ревью кода?

В современном IT сообществе стандартным инструментом становятся платформы для разработки, включающие в себя возможность версионировать код, собирать, тестировать, развертывать, проводить ревью. Однако большая их часть исключает, что код – это не текст и с ним можно работать более интеллектуально, как это умеет IDE.

Компания Яндекс анонсировала, что в 2025 году запустит платформу SourceCraft, в которой удобству разработчиков уделяется особое внимание. Теперь при ревью пул-реквестов нет необходимости переходить в IDE, чтобы разобраться в коде, инструменты навигации по коду доступны прямо на платформе.

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

Читать полностью…

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

Как ускорить работу с базами данных и структурировать их? Освоить SQL! Обрабатывайте данные, анализируйте поведение пользователей, принимайте решения самостоятельно. Волшебство продуктивной работы с базами данных теперь доступно всем на бесплатном мини-курсе по программированию.

Зарегистрируйтесь прямо сейчас и сразу получите первый из 5 полезных материалов: https://goo.su/Z3nz1Os?erid=2VtzqwzhGAB

Что будем делать:
— Писать запросы на языке SQL
— Проводить аналитику для бизнеса
— Разрабатывать автоматизированную отчётность в Excel
— Обрабатывать данные в Power Query
— Визуализировать показатели в Excel: создавать красивые графики, диаграммы и отчёты
— Применять инструменты Excel для анализа данных

Спикер — Мкртич Пудеян, специалист по анализу данных в «Газпромбанке». Сертифицированный SQL-разработчик от Microsoft.

🎉 Всех участников ждут подарки: персональная карьерная консультация, на которой мы определим ваши сильные стороны и поможем выбрать направление в разработке, 5 полезных статей по SQL и Excel, а также год бесплатного изучения английского языка.

А ещё, скидки в Skillbox сияют ярче гирлянд — весь декабрь до 60% на всё и 3 курса в подарок!

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

Читать полностью…

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

#игра дня

Тут Google выкатил свой адвент-календарь в виде новой игры каждый день: https://santatracker.google.com/

И вчера там было кодирование на системе, подобной языку Scratch... а сегодня простой сокобан :(

И я сначала расстроился, но потом догадался поскроллить вниз! Это, кстати, с первого экрана совсем не очевидно. И нашёл даже простую версию The Impossible Machine! Олды меня поймут.

В итоге там хватает и кодинга, и головоломок, и простых аркад. Идеально, чтобы провести время с семьёй и, возможно, познакомить ребёнка со Scratch, если ещё нет.

Не совсем про программирование пост сегодня, но надо же и отдыхать, ну.

#google #doodle #scratch

Читать полностью…

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

#codepen дня

Что-то у меня чувство, что я с линейной алгеброй да на 29 декабря малость переборщил...

Давайте я вам две новогодние ёлочки, а вы мне всё простите?

🎄 Ксения Кондрашова подарила нам интерактивную ёлку на Three.js, вынесена в иллюстрацию: https://codepen.io/ksenia-k/pen/yyBYVyd

🎄 А Ана Тюдор — на чистом CSS: https://codepen.io/thebabydino/pen/bGwYVOm

На стороне какой ёлки вы?

#3d #threejs

Читать полностью…

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

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

Особенно тех, кто посты читает

С наступающим Новым годом! Больше постов совсем скоро :)

К слову, вот тот самый популярный пост: /channel/htmlshit/3049

Читать полностью…

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

Го залетать сразу на мидла от 1500$ в месяц 🚀

✅ Где взять опыт в резюме

✅ Как учиться сразу на фреймворке с нуля и не терять время

✅ Как пройти собес и показать себя опытным программистом

✅ Как оформить резюме грамотно и пройти фильтры рекрутеров

✅ Как выбрать стек где нет конкуренции и залететь за пару собесов

Меня зовут Ильнур Ряжапов, я за два года стал SENIOR FRONTEND DEVELOPER (моя история)

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

50 человек уже работают, вот отзывы

Консультация по трудоустройству по ссылке👇🏻

https://ngx-university.com/interview

P.S. Халявные плюшки:

🎁 Первое занятие моего менторинга где учим с нуля сразу на фреймворке и список вопросов на собеседовании (получите после консультации)

🎁 Бесплатную консультацию с экспертом по трудоустройству в IT-компанию

🎁 Запись прямого эфира "Пошаговый план трудоустройства в IT-компанию"

Регистрируйтесь по ссылке ниже 👇

https://ngx-university.com/interview

Читать полностью…

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

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

Помните, как на Новый год нужно было срочно найти подарок для младшего брата, и вы отдали ему пылившийся на полке DVD с фильмом, который вы даже не смотрели?

Возможно, он до сих пор это помнит... А вы с тех пор понимаете, что такое повторное использование.

А вот ребята из Material UI aka MUI решили переработать подход к таким ситуациям.
Они только что выпустили публичную альфу Base UI 1.0 — библиотеку нестилизованных React-компонентов, выделенных из большого пакета Material UI и доступных теперь как отдельный продукт.

Помимо готовых компонентов в ней есть и низкоуровневые хуки, дающие всю мощь Material UI, но без необходимости реализовывать Material Design в приложении.

Полная свобода в стилях
Base UI не навязывает собственное решение для CSS. Вы сами выбираете, как работать: Tailwind, CSS-in-JS или любой другой способ.

Доступность (A11Y) по умолчанию
Компоненты соблюдают лучшие практики доступности. Это значит, что ваш проект будет удобен для всех, и никто не скажет, что вы плохой человек (кроме младшего брата).

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

Base UI сохраняет лучшие части Material UI, не привязывая вас к "гугловскому" дизайну.

Вот это переиспользование, за которое не стыдно, котаны. Можно и младшему брату оставить.

Лучший подарок на Новый год!

#react #mui #ui #widgets

Читать полностью…

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

#баг дня

Если вы тут утром решили развернуть новый проект на Vite, и у вас ничего не вышло, это нормально.

esuild, на котором Vite и основана, в версии 0.24.1 принёс ломающее конфиги изменение.

И на данный момент лучшее решение — запинить зависимость esbuild на 0.24.0: https://github.com/vitejs/vite/issues/19018

Ну или использовать пятую ветку Vite.

Повторяется на всех пакетных менеджерах: и npm, и pnpm и bun и, прости господи, yarn.

Осторожнее там, котаны :)

#vite #esbuild #bug

Читать полностью…

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

Base Virtualization — бесплатный курс для тех, кто хочет погрузиться в облачные технологии

Уже используете облака, только планируете переезд или просто хотите разобраться в терминологии? Что такое IaaS, SaaS, PaaS? В чем разница между частным, публичным и гибридным облаками? Что такое миграция и как организовать бесшовный переезд в облако? Об этом и о многом другом узнаете в новом курсе.

Что вас ждет:

— 10 уроков о виртуализации и облачной инфраструктуре.
— Доступ к материалам курса без ограничений.
— Поддержка и общение с экспертами в Telegram-сообществе.

Зарегистрируйтесь на курс по ссылке и начните погружение в виртуализацию прямо сейчас.

Реклама ПАО «ВымпелКом», beeline.ru

Читать полностью…

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

Хочешь зарабатывать в евро, но не знаешь, как получить оффер на международке 🌏

Поиск работы за границей — это как квест на «хардкоре». Непонятно, с чего начать: где искать вакансии, как на них откликаться и как правильно упаковать свое резюме, чтобы его заметили. 

Тут на помощь придут ребята из AgileFluent — эксперты с двумя полезными каналами:

AgileFluent – про все этапы поиска работы, от поиска вакансий до оффера. Всё в формате советов, лайфхаков, чек-листов и пошаговых гайдов. А в этом посте ребята собрали полезные материалы: 50+ джоб-бордов, шаблон для учёта откликов и примеры писем для напоминания HR.

AFsolutely — для тех, кто хочет прокачивать английский для работы. Прямо сейчас там проходит бесплатный марафон по бизнес-английскому, успей попасть на него.

Подписывайся, чтобы узнать свои слабые места и быстрее дойти до международного оффера! 🚀

Читать полностью…

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

#видео дня

Раз уж я позаимствовал сегодняшнюю фишку дня у Веса Боса (хотя давайте честно, у него была ненастоящая демонстрация), придётся уважить.

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

И говорю я о ByteDance, авторах TikTok, CapCut, Mars (альтернативы Cursot) и Lark (альтернатива Google Workspace).

Почему мне так интересно? Потому что я люблю позалипать в ТикТоке. Шутка. Потому что я пользуюсь бандлером RSPack с первых дней выхода. Пруф: /channel/htmlshit/1868

А Зак Джексон как раз его ментейнер :) И автор идеи Module Federation.

И, собственно, беседа о нём в том числе и пойдёт, а ещё о микрофронтендах и Module Federation.

К слову, когда автор React Scan начал свой спам видео с ререндерами всего и вся, именно ребята из ByteDance наиболее адекватно среагировали на проблему, а не стали орать: «Да кому это интересно, господи!»

В общем, хоть я и не фанат подкастов, моя дикая рекомендация: https://www.youtube.com/watch?v=aFhysuTUoQY

#podcast #rspack #bytedance

Читать полностью…

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

#фишка дня

Продолжим тему ответов на ваши вопросы на собеседованиях.

Почему ваши? Ну потому что вы их предлагали! Вот тут: /channel/htmlshit/3290

Итак, вопрос: как показать спиннер загрузки прямо в кнопке, сохранив размер кнопки и её доступность?

То есть, не делать такое:


‹button>{ isLoading ? <LoadingSpinner/> : "Save" }</button>


Очевидный ответ: абсолютом спиннер сверху навернуть. Но мы же не в 2009 году, в самом деле!

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

Когда-то давно мы сделали табло, в котором меняли строки на разных языках: /channel/htmlshit/2814

И там как раз применили такую фишку CSS Grid, как стек. Т. е. накладывание блоков друг на друга без изменения их позиционной модели.

Самое время это применить и тут!

Только на сей раз мы воспользуемся именованными зонами грида, вместо grid-area: 1/1 как в прошлом примере.

Итого:

.button {
display: grid;
grid-template-areas: "stack";

.spinner,
.text {
grid-area: stack;
justify-self: center;
}
}


Ну и как-то так вышло: https://codepen.io/alinaki/pen/ogvBMLv

#css #grid

Читать полностью…

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

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

Особо зацепил Yandex Code Assistant для разработчиков. Он помогает писать и ревьюить код, а ещё участвует в создании цифровых продуктов. Пишут, им уже в тестовом режиме пользуются 4 тысячи разработчиков. Обещают со временем открыть для всех. Я пробовал альтернатиы в работе, для помощи с тестами и рутиной, так что интересно сравнить.

Ещё представили AI Studio — это единая платформа для всех ML-инструментов компании. Она упрощает разработку и ускоряет запуск сложных ИИ-приложений, например ассистентов, которые работают и с текстом, и с голосом. Похоже, удобно для тех, кто работает с машинным обучением, хотя самому это направление пока не доводилось трогать плотно.

В общем, Яндекс продолжает активно экспериментировать с инструментами для работы и автоматизации. Если будет возможность, точно протестирую ассистента в деле.

Читать полностью…

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

#такое дня

Прежде чем волноваться о плохо пройденном собесе, помни: некий разработчик Facebook прошёл алгоритмы, лайвкодинг, калча фит... и всё ради того, чтобы при каждом нажатии клавиши в поле ввода поста прогонять регулярку на поиск ссылок по всему тексту.

Да, вы не ослышались. В итоге, на сообщение в 10000 символов задержка может составить две-три секунды.

Не надо так, котаны.

Ссылка на тред: тут. В треде народ развлекается разным профайлингом, очень интересно: React Scan, Chrome Profile, немного реверс-инжиниринга...

Как же решать такую задачу? Ну, например, debounce или throttle, зависит от условий. Или предсказание.

#js #react

Читать полностью…

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

#статья дня

Вы (да и я) могли раньше не обращать внимания, но 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 #бородач

Читать полностью…

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

#ссылка дня

Сегодня на повестке довольно упоротый проект. И упоротый он не только из-за названия — Modalzmodalzmodalz. Впрочем, сейчас сами поймёте. Ссылка: https://modalzmodalzmodalz.com/

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

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

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

Что предлагают авторы?

Сайдбары, тосты, врезки, новые страницы в конце-концов и старый добрый Undo вместо подтверждения действия.

Ну и, конечно, дают советы о правильных модалках.

Хороший проект. Ещё бы чуть менее с дизайном упоролись... виральность зашла слишком далеко.

#ui #ux #modal

Читать полностью…

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

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

Когда я недавно вас спросил, какие бы вы посоветовали вопросы для собеседования, были, ожидаемо, предложения поспрашивать про Event Loop и microtask queue.

Я, честно, редко вижу людей, которые на подобные вопросы отвечают с лёгкостью. Но это не значит, что проблемы не существует и знать процесс не надо :)

Слишком много частиц не

К счастью, есть инструменты, которые помогают легче понять происходящее! И вот один из них буквально так и называется: Event Loop Explorer.

https://vault-developer.github.io/event-loop-explorer/

Кстати, там в примере как раз то задание, что так любят спрашивать на собеседованиях :)

Вообще, подобных инструментов уже столько, что можно собрать коллекцию...

#javascript #eventloop #tool

Читать полностью…

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

Приятно наблюдать за тем, как IT-компании инициируют форматы, которые позволяют разработчикам проявить себя. В этом плане особенно выделяется спортивное программирование, в котором можно проверить свои навыки, обменяться опытом, и в конце-концов получить вознаграждение.

Одно из таких соревнований прошло на прошлой неделе в Ташкенте — там провели финал международного чемпионата Yandex Cup 2024. За призовой фонд в 16 млн рублей сражались 200 разработчиков из 90 стран. Победу одержали ребята из России, Беларуси, Японии, США, Великобритании и Португалии. Отдельное внимание уделили ML-направлению: количество финалистов в этом треке увеличилось с 6 до 22, а к призовому фонду добавилось 3,5 млн рублей.

Ключевой темой финала стала «цифровая цивилизация», которая объединяет современный IT и культуру древних народов. Следуя концепции, организаторы создали «Музей Айтичности», где можно было узнать, как бы выглядели современные объекты IT-культуры в виде артефактов прошлого. А еще у зрителей и кодеров была возможность посетить экспозицию, посвященную трудам Аль-Хорезми — математику, благодаря которому появились термины «алгоритм» и «алгебра».

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

Читать полностью…
Subscribe to a channel