Cовет💡

Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.

👉 @frontend_1

Atomic CSS Deep Dive

Здравствуйте, товарищи! Меня зовут Валик и сегодня мы поговорим про подход Atomic CSS в верстке, разработку инструментов и смежные темы.

Кратко вспомним базу - почему Atomic CSS. Рассмотрим популярные решения для работы в этом подходе и сравним их с моим изобретением - mlut. Разберем проблемы известных инструментов и посмотрим, как я решил их в своем. Будут интересные архитектурные решения, технические детали и немного хардкора.

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

Это расшифровка моего доклада с HolyJS Spring 2024. Можете глянуть запись, а можете почитать эту статью с некоторыми дополнениями и более выверенными формулировками.

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


👉 @frontend_1

Синхронизация React с API браузера

👉 @frontend_1

Создаем форму входа, используя HTML и CSS 🚀

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

👉 @frontend_1

Как скрыть классы Tailwind в VS Code

👉 @frontend_1

Серверные действия в Next.js выполняются последовательно.

👉 @frontend_1

Навигация между Pages и App router в приложении Next.js

👉 @frontend_1

Fundamentals

Добро пожаловать в Долину Кода. Ваше путешествие в мир веб-разработки начинается здесь. В разделе «Основы» вы узнаете об основных строительных блоках Интернета, Веба и о том, как работает его основной протокол (HTTP).

https://thevalleyofcode.com/

👉 @frontend_1

Проект для начинающих на JavaScript – Урок по созданию игры Змейка

В этом уроке программирования для начинающих вы научитесь создавать ретро-игру "Змейка", вдохновленную культовой игрой на Nokia, с использованием чистых HTML, CSS и JavaScript! С помощью JavaScript вы научитесь рисовать игровое поле, создавать змейку и случайно генерируемую еду, заставлять змейку двигаться, увеличивать её размер при поедании еды и ускорять её движение. Вы также научитесь вести счёт, отслеживать столкновения змейки и отображать ваш рекорд.

⌨️ (00:00) What we are building / Finished snake game
⌨️ (01:57) Setting up our HTML
⌨️ (10:25) Styling with CSS
⌨️ (27:05) Creating the snake game logic with JavaScript

источник

👉 @frontend_1

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

👉 @frontend_1

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

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

👉 @frontend_1

Путешествие в шейдеры

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

Шейдеры уже несколько лет вызывают у меня восхищение, но каждый раз, когда я пытался углубиться в эту тему, я чувствовал себя так, будто заново учусь читать и писать — это было ошеломляюще. Когда я перевел этот сайт на Svelte, я увидел возможность заменить простую CSS-анимацию на главной странице анимацией на основе шейдеров. Оригинальная CSS-анимация изменяла свойство border-radius, создавая спокойную и минималистичную анимацию, как показано выше.

https://www.mayerowitz.io/blog/a-journey-into-shaders

👉 @frontend_1

3D логотип React с использованием React Three Fiber

👉 @frontend_1

Как сделать так, чтобы Next Image всегда вписывалось в родительский контейнер, оставаясь полностью видимым

👉 @frontend_1

День рождения онлайн-школы METHED 🥳

Прокачай свои навыки за 3 дня – присоединяйся к интенсиву!  

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

Что вас ждёт на интенсиве?
- Разработка серверной части с использованием Node.js и Express
- Клиентская часть на JavaScript
- Интеграция WebSocket и развертывание на хостинг

Стартуем уже скоро, регистрируйся: https://tglink.io/ee978ef612ee

Совет по CSS 💡

Знаете ли вы, что свойство gap можно использовать и для макета flexbox? ✨

👉 @frontend_1

Как работает SVG ViewBox

Данная статья с интерактивными примерами поясняет, как применять атрибут viewBox в SVG.

Raster vs. Vector
Render Image
Inline SVG
Coordinates
View Box
Pan & Zoom
Zoom to Square
Animate
React Spring
Scaling Stroke
Use Case

https://svg.bradwoods.io/lessons/viewbox

👉 @frontend_1

Создаем меню профиля с использованием HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/dropdown-menu-09

👉 @frontend_1

VS Code (Copilot) против Cursor (Claude-3.5-Sonnet) для Next.js App Router

👉 @frontend_1