🚀Создаем панель навигации с анимированным индикатором с помощью HTML, CSS и JavaScript

https://github.com/atherosai/ui/tree/main/navigation-bar-02

👉 @frontend_1

🎲 Создание ролика для игры в кости с помощью Three.js и Cannon-es

В этом руководстве мы проведем вас через процесс создания интерактивного 3D-роллера с использованием JavaScript-библиотек Three.js для создания 3D-графики и cannon-es для добавления взаимодействия. Мы начнем с создания кубиков с помощью модифицированной BoxGeometry, без использования текстур, шейдеров или внешних 3D-моделей. Затем с помощью cannon-es мы включим физику, смоделируем бросок кубика и определим сторону приземления.

https://tympanus.net/codrops/2023/01/25/crafting-a-dice-roller-with-three-js-and-cannon-es/

Demo https://tympanus.net/Tutorials/DiceRoller/

GitHub https://github.com/uuuulala/Threejs-rolling-dice-tutorial/

👉 @frontend_1

Совет по CSS 💡

Возможно, вы не знали, но мы можем реализовать базовую анимацию для bullet/number в HTML-списке

👉 @frontend_1

Шпаргалка по HTML

👉 @frontend_1

Ускоряем загрузку сайтов

Для повышения производительности загрузки страниц "отложите" выполнение некритичных файлов javascript ✅

👉 @frontend_1

Taiga UI: больше чем UI kit

Taiga UI — огромная библиотека UI-компонентов для Angular, на которую стоит взглянуть. Но она только вершина айсберга. Мы разрабатывали ее более пяти лет, начав еще на Angular 4. И, будучи любителями декомпозиции, мы создали несколько отдельных независимых проектов, которые помогают нам писать крутые Angular-приложения.

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

https://habr.com/ru/companies/tinkoff/articles/760276/

👉 @frontend_1

🚀Совет по JavaScript

Преобразование массивов в формат CSV упрощает экспорт и обмен данными, делая структурированные данные более доступными и универсальными.📊🔁

👉 @frontend_1

Совет по CSS 💡

Иногда мы показываем кнопки действий при наведении на карточку. Но это затрудняет взаимодействие с кнопками действий для пользователей, использующих только клавиатуру или сенсорные экраны!

Узнайте, как обеспечить лучший UX для таких кнопок действия при наведении ✨.

https://www.codewithshripal.com/playground/css/provide-better-ux-for-hover-based-action-buttons

👉 @frontend_1

Манипулирование данными JPEG и EXIF в Javascript

Exchangeable Image File Format (EXIF) - это стандарт, определяющий форматы изображений и звуков. Он хранит технические детали через метаданные - данные, описывающие другие данные, такие как марка и модель камеры, дата и время съемки.

Изначально EXIF использовался для двух форматов изображений - JPEG и TIFF. Но сегодня другие форматы файлов, такие как PNG, WEBP или HEIC, также поддерживают EXIF для метаданных.

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

https://getaround.tech/exif-data-manipulation-javascript/

👉 @frontend_1

CSS Grid

👉 @frontend_1

Математика, лежащая в основе формирования закругленных углов

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

Но я быстро столкнулся с проблемой. Когда я вложил элемент с закругленными углами внутрь закругленного контейнера, это выглядело как-то не так:

https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/

👉 @frontend_1

Создаем отзывчивую форму входа в систему с помощью HTML и CSS 🚀

GitHub https://github.com/atherosai/ui/tree/main/login-05

👉 @frontend_1

Совет по Javascript 💡

Знаете ли вы об этом способе поиска элемента из конца массива в javascript?

👉 @frontend_1

Создание дропзоны загрузки файлов с помощью HTML, CSS и JavaScript 🚀

GitHub https://github.com/atherosai/ui/tree/main/dropzone-02

👉 @frontend_1

Убедитесь, что вы используете семантические элементы HTML 5 в своей разметке 🚀

👉 @frontend_1

Создаем виджет банковских аккаунтов, вдохновленный Wise, используя HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/scrolling-02

👉 @frontend_1

Не стоит недооценивать HTML

«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.

И очень часто они вызывали у меня грусть.

Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…

В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.

https://habr.com/ru/companies/ruvds/articles/793906/

👉 @frontend_1

Event Loop в деталях

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

JS был спроектирован как однопоточный язык программирования. Это значит, что он может выполнять только одну операцию одновременно. Тем не менее у JavaScript есть такой механизм как Event Loop, который как раз и позволяет выполнять "асинхронные" операции. Почему "асинхронные" в кавычках? Да просто потому что JavaScript тоже выполняет их синхронно, асинхронности в самом JavaScript как таковой нет. Вперед под кат, будем разбираться)

https://habr.com/ru/articles/762618/

👉 @frontend_1

Используйте сокращение CSS flex flow, чтобы объединить свойства flex direction и flex wrap 👨‍💻🚀.

👉 @frontend_1

Совет по использованию инструментов Chrome Dev Tools 💡

Знаете ли вы, что в Chrome Dev Tools можно легко фильтровать запросы по временным рамкам? ✨

👉 @frontend_1

Sugar High

Суперлегкая подсветка синтаксиса для JSX, 1 КБ после минификации и gizpped.

https://sugar-high.vercel.app/

👉 @frontend_1