Telegram Web Link
bootg.com » United States » Frontend разработчик » Telegram Web
Frontend разработчик
Совет по производительности веб-приложений 💡

Используйте изображения в формате WebP для повышения производительности ✅

👉 @frontend_1
👍4
2.7K views
Frontend разработчик
Совет по Javascript 💡

Если вы имеете дело с фреймворками, делающими ставку на неизменяемые структуры данных (*cough* React), и вам нужно изменить записи в массиве, `with` станет вашим лучшим другом!

👉 @frontend_1
👍8
2.3K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡

Пользовательский Range Slider с всплывающей подсказкой

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

https://codepen.io/t_afif/pen/vYweZQa

👉 @frontend_1
👍7
2.33K views
Frontend разработчик
Совет по Javascript 💡

Знаете ли вы, почему мы не можем создавать новые инстансы из arrow function?

👉 @frontend_1
👍5❤1
2.38K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Layout и Page получают данные параллельно в Next.js

👉 @frontend_1
👍5
2.18K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Сохраните и внедрите эти CSS loaders 🚀


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Loaders</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<div class="top-bar">
<div class="profile-wrapper">
<img
class="profile"
src="assets/profile_new.jpg"
alt="profile picture"
/>
<p>@davidm_ai</p>
</div>
</div>

<h1>CSS <span class="emph">Loaders</span></h1>
<div class="loaders">
<div class="loader-wrapper">
<div>1</div>
<div class="loader-1"></div>
</div>
<div class="loader-wrapper">
<div>2</div>
<div class="loader-2"></div>
</div>
<div class="loader-wrapper">
<div>3</div>
<div class="loader-3"></div>
</div>
<div class="loader-wrapper">
<div>4</div>
<div class="loader-4"></div>
</div>
<div class="loader-wrapper">
<div>5</div>
<div class="loader-5"></div>
</div>
<div class="loader-wrapper">
<div>6</div>
<div class="cube-wrapper">
<div class="cube">
<div class="sides">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
</div>
</div>
<p class="code-comments">
Code In The Comments 👨‍💻
</p>
<p class="bottom-bar">
<span class="modern-frontend-developer">
<span class="emph">Modern Frontend Developer</span>: <span class="emph">HTML</span> and <span class="emph">CSS</span> (55% off)
</span>
<span class="learning-link">
<img src="assets/atheros-learning.png" alt="arrow icon" />
learning.atheros.ai
</span>
</p>

</div>


</body>

</html>


https://github.com/atherosai/ui/blob/main/loaders-01/index.html

👉 @frontend_1
👍6
2.31K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡

:user-invalid

👉 @frontend_1
👍8
2.24K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по улучшению UX адреса электронной почты

👉 @frontend_1
👍13
2.29K viewsedited  
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Создание загрузки файлов с помощью HTML, CSS и JavaScript 🚀

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

👉 @frontend_1
👍6
2.27K views
Frontend разработчик
Совет по CSS 💡

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

👉 @frontend_1
👍5
2.09K views
Frontend разработчик
Насколько быстр Javascript? Симулируем 20 миллионов частиц

Я бросил себе вызов: симулировать 1000000 (миллион) частиц на чистом Javascript на телефоне, используя только CPU и добившись 60 FPS.

Поехали.

Задача не особо сложна, если выполнять всю работу на GPU, но правило гласит, что нужно пользоваться только CPU, при этом работая на JS, так что никакого WASM.

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

Возможно, что-то типа такого?

const count = 1_000_000;
const particles = new Array(count).fill().map(() => ({
//информация частиц
});

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


👉 @frontend_1
❤3👍3🔥2
2.1K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Создание панели инструментов с помощью HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/toolbar-03

👉 @frontend_1
👍4❤1
2.15K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Генерация изображения opengraph в Next.js

👉 @frontend_1
👍4
1.95K views
Frontend разработчик
Совет по JavaScript 💡

Используйте параметр rest вместо объекта arguments для приема переменного количества аргументов ✅

👉 @frontend_1
👍7
1.79K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Улучшение CSS: синтаксис относительных цветов теперь поддерживается во всех браузерах.

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

https://www.stefanjudis.com/notes/new-in-css-relative-colors/

👉 @frontend_1
🔥5👍3
2.15K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Я увидел эту замечательную технику CSS Video Masking на сайте iPad.

Довольно аккуратное использование CSS - не то, что я ожидал!

👉 @frontend_1
🔥9👍3
2.43K views
Frontend разработчик
Совет по CSS 💡

Легко создайте полосатый прогресс-бар без использования сторонних библиотек 🤩

👉 @frontend_1
👍6
2.66K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Как получить доступ к IP-адресу клиента в Next.js на Vercel

👉 @frontend_1
👍3😁2
2.47K views
Frontend разработчик
This media is not supported in your browser
VIEW IN TELEGRAM
Node получил возможность запускать файлы TypeScript напрямую!


👉 @frontend_1
❤5👍3🔥1
2.22K views
Frontend разработчик
🚀Совет по JavaScript

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

👉 @frontend_1
👎4👍3✍1❤1🔥1
2.24K views
2025/07/08 13:39:04
Back to Top
HTML Embed Code: