This media is not supported in your browser
VIEW IN TELEGRAM
Сохраните и внедрите эти CSS loaders 🚀
https://github.com/atherosai/ui/blob/main/loaders-01/index.html
👉 @frontend_1
<!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
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
https://github.com/atherosai/ui/tree/main/dropzone-04
👉 @frontend_1
👍6
Совет по CSS 💡
Полезный сниппет, позволяющий скрыть содержимое, но сохранить его доступным для пользователей программ для чтения
👉 @frontend_1
Полезный сниппет, позволяющий скрыть содержимое, но сохранить его доступным для пользователей программ для чтения
👉 @frontend_1
👍5
Насколько быстр Javascript? Симулируем 20 миллионов частиц
Я бросил себе вызов: симулировать 1000000 (миллион) частиц на чистом Javascript на телефоне, используя только CPU и добившись 60 FPS.
Поехали.
Задача не особо сложна, если выполнять всю работу на GPU, но правило гласит, что нужно пользоваться только CPU, при этом работая на JS, так что никакого WASM.
Я знаю, о чём вы подумали: это не особо сложно, достаточно создать массив и засунуть в него миллион объектов.
Возможно, что-то типа такого?
https://habr.com/ru/articles/829220/
👉 @frontend_1
Я бросил себе вызов: симулировать 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
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
https://github.com/atherosai/ui/tree/main/toolbar-03
👉 @frontend_1
👍4❤1
Совет по JavaScript 💡
Используйте параметр
👉 @frontend_1
Используйте параметр
rest вместо объекта arguments для приема переменного количества аргументов ✅👉 @frontend_1
👍7
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
Последним браузером, присоединившимся к списку, стал Firefox, выпустивший на прошлой неделе версию 128.
https://www.stefanjudis.com/notes/new-in-css-relative-colors/
👉 @frontend_1
🔥5👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Я увидел эту замечательную технику CSS Video Masking на сайте iPad.
Довольно аккуратное использование CSS - не то, что я ожидал!
👉 @frontend_1
Довольно аккуратное использование CSS - не то, что я ожидал!
👉 @frontend_1
🔥9👍3
Совет по CSS 💡
Легко создайте полосатый прогресс-бар без использования сторонних библиотек 🤩
👉 @frontend_1
Легко создайте полосатый прогресс-бар без использования сторонних библиотек 🤩
👉 @frontend_1
👍6
🚀Совет по JavaScript
Преобразование массивов в формат CSV упрощает экспорт и обмен данными, делая структурированные данные более доступными и универсальными.📊🔁
👉 @frontend_1
Преобразование массивов в формат CSV упрощает экспорт и обмен данными, делая структурированные данные более доступными и универсальными.📊🔁
👉 @frontend_1
👎4👍3✍1❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Создание макета с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/layout-04
👉 @frontend_1
https://github.com/atherosai/ui/tree/main/layout-04
👉 @frontend_1
👍3👎1
Знаете ли вы, что можно изменить метод формы в HTML-форме, указав атрибут
👉 @frontend_1
formMethod на кнопке?👉 @frontend_1
👍8
This media is not supported in your browser
VIEW IN TELEGRAM
Советы по HTML 💡
Знаете ли вы, что с помощью элемента HTML <dialog> можно легко создать модал?
👉 @frontend_1
Знаете ли вы, что с помощью элемента HTML <dialog> можно легко создать модал?
👉 @frontend_1
👍8😁1