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

Знаете ли вы, что с помощью функции Network throttling в Chrome Dev Tools можно легко протестировать наш сайт в различных сетевых условиях?

👉 @frontend_1

Совет по CSS 💡

Знаете ли вы, что мы можем получить доступ к значению HTML-атрибута как к строке в CSS? ✨

👉 @frontend_1

Используйте свойство columns, чтобы разделить статью на отзывчивые колонки 🚀.

👉 @frontend_1

Совет по Javascript 💡

Знаете ли вы об этом кратчайшем способе добавления условного свойства к объекту?

👉 @frontend_1

Webpack: заменить нельзя оставить
Евгений Кувшинов

Есть ли среди ваших знакомых хоть один фронтендер, ни разу не запускавший сборку проекта вебпаком? У меня таких нет. Развитая экосистема, сообщество и решения на все случаи жизни привлекают и подкупают. Тем не менее новые игроки на рынке бандлеров заявляют, что у Webpack есть огромный недостаток — скорость сборки. Они задают новые стандарты скорости, обгоняя вебпак в десятки раз! ESBuild и SWC, созданные на непривычных для фронтенда Go и Rust, расшатывают положение лидера. Насколько это всерьез? Я перевел продукт с шестилетней историей разработки и миллионом пользователей на современный бандлер. Муки выбора, проблемы переезда и что из этого получилось — в докладе!

источник

👉 @frontend_1

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

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

👉 @frontend_1

В плену JavaScript: как веб-разработка стала заложницей одного языка

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

00:00 Введение.
00:30 JS способствует или вредит развитию индустрии?
5:20 Для каких технологий JS стал триггером?
7:00 Есть язык программирования, готовый конкурировать с JS?
10:00 Правда, что JS "душит" развитие других языков?
18:40 У JS множество недостатков. Почему "ёжики продолжают есть кактус"? Плюсы и минусы языка.
51:00 Заменяем JS или нет?
1:03:50 Что станет с JS разработчиками, когда исчезнут браузеры?
1:06:00 Насколько тяжело убедить заказчика перейти на новую технологию?
1:07:35 Есть шанс, что браузеры выйдут из пользования?
1:10:00 Насколько безопасно использовать JS в финансовых разработках?
1:12:00 Что с однородностью реализации кода в разных браузерах?
1:18:30 Есть проблемы с использованием библиотек JS?
1:25:50 Стоит ли сегодня учиться на JS разработчика?

https://habr.com/ru/companies/lanit/articles/787616/

👉 @frontend_1

🚀Создаем панель навигации с анимированным индикатором с помощью 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