Совет по CSS 💡

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

https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers

👉 @frontend_1

Веб-разработка Frontend: подробный учебник по проекту (HTML, CSS, JavaScript, TypeScript, React)

⌨️ (0:00:00) Introduction, resources, and prerequisites
⌨️ (0:07:50) Project setup and VSCode extensions
⌨️ (0:19:29) Build the UI with HTML and CSS
⌨️ (1:14:20) Add JavaScript interactivity to the project
⌨️ (3:01:19) Introduction to the MVC pattern
⌨️ (5:51:56) Refactoring app with TypeScript
⌨️ (5:54:46) Setting up TypeScript from scratch, what are benefits?
⌨️ (6:35:56) Start of refactor from Vanilla JavaScript to TypeScript
⌨️ (7:52:25) Why should you refactor your app to React?
⌨️ (8:01:37) The many ways to set up a React app
⌨️ (8:06:52) Setting up React from scratch
⌨️ (8:51:45) Initializing TypeScript in a React app from scratch
⌨️ (9:00:56) Refactoring vanilla app to React app

https://www.youtube.com/watch?v=MsnQ5uepIaE

👉 @frontend_1

Server Actions создают публичные конечные точки, поэтому не забудьте защитить их, как и маршруты API.

👉 @frontend_1

Обработка ошибок в Angular: Полное руководство

Откройте мощь надежной обработки ошибок в Angular. От управления исключениями в синхронном и асинхронном коде до обработки HTTP-ошибок — это руководство поможет вам улучшить ваши Angular приложения на профессиональном уровне.

https://yon.fun/angular-error-handle/

👉 @frontend_1

Создаем CSS Scroll-driven текст с помощью SVG-фильтра 🥊

section { filter: url(#​knockout); }
section h1 { animation: shrink; }
@​keyframes shrink { 0% { scale: 36; }}

- Анимация изменения масштаба текста на видео-оверлее ✅
- Выбивание текста с использованием SVG-фильтра ✅
- Управление прокруткой ✅

👉 @frontend_1

Основные принципы хорошего нейминга

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

А чтобы это сделать, неоходимо возвести те понятия, которыми я собираюсь оперировать, в высокую степень абстракции. Поэтому было принято решение разделить эти понятия на две категории: переменные и функции.

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


👉 @frontend_1

CSS Grid

👉 @frontend_1

Как восстановиться после ошибки серверного компонента в Next.js

👉 @frontend_1

Извлечение компонентов React с помощью Cursor Composer

👉 @frontend_1

Узнайте о позиционировании CSS с помощью следующей шпаргалки 🚀

👉 @frontend_1

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

Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?

👉 @frontend_1

Совет по CSS 💡

Легко сделать раскрывающееся меню удобным для клавиатуры с помощью CSS 🤩

👉 @frontend_1

Расширенные функции JavaScript для повышения качества кода

В этой статье я расскажу, как использовать некоторые встроенные возможности для создания наиболее мощных функций, которые повышают производительность и делают код более красивым. Я расскажу о функциях Debounce, Throttle, Once, Memoize, Curry, Partial, Pipe, Compose, Pick, Omit и Zip, которые можно сохранить в служебном файле/классе, чтобы оптимизировать качество кода как разработчика JavaScript.

Хотя функции объясняются на языке JavaScript, они могут быть легко реализованы в любом языке программирования. Как только концепция различных функций будет понята, их можно будет применять повсеместно.

https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/

👉 @frontend_1

Краткая шпаргалка по CSS. Часть 1

1. Базовая структура CSS

селектор {
  свойство: значение;
}

Пример:

p {
  color: blue;
  font-size: 16px;
}

2. Типы селекторов

#### Селекторы тегов
Применяются к определенным HTML-тегам.

h1 {
  color: red;
}

#### Классы
Используются для применения стилей к элементам с атрибутом class. Класс можно использовать для множества элементов.

.class-name {
  color: green;
}

Применение в HTML:

<p class="class-name">Текст</p>

#### Идентификаторы (ID)
Применяются к элементам с уникальным атрибутом id.

#id-name {
  background-color: yellow;
}

Применение в HTML:

<div id="id-name">Контент</div>

#### Группировка селекторов
Селекторы можно группировать для одинаковых стилей.

h1, h2, p {
  color: blue;
}

#### Селекторы потомков
Применяют стили к элементам, находящимся внутри других элементов.

div p {
  color: orange;
}

Применяется только к p, находящимся внутри div.

3. Псевдоклассы

#### Стилизация ссылок

a:link { color: blue; }  /* Непосещенная ссылка */
a:visited { color: purple; }  /* Посещенная ссылка */
a:hover { color: red; }  /* Наведение мыши */
a:active { color: green; }  /* Активная ссылка */

#### Псевдоклассы для элементов

p:first-child { color: green; }  /* Первый дочерний элемент */
li:nth-child(odd) { background-color: #f0f0f0; }  /* Нечетные элементы списка */

4. Псевдоэлементы

#### Псевдоэлементы для создания контента

p::before { content: "Привет, "; }  /* Добавляет текст перед содержимым */
p::after { content: "!" }  /* Добавляет текст после содержимого */

#### Стилизация первых букв и строк

p::first-letter {
  font-size: 200%;
  color: red;
}

5. Модели отображения (Box Model)

Каждый элемент состоит из:
- content (содержимое),
- padding (внутренние отступы),
- border (граница),
- margin (внешние отступы).

Пример:

div {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
}

6. Размеры и единицы измерения

- px — пиксели.
- % — проценты от родительского элемента.
- em — относительный размер шрифта от родительского элемента.
- rem — относительный размер шрифта от корневого элемента (`html`).
- vw и vh — проценты от ширины и высоты окна браузера.

Пример:

p {
  width: 50%;  /* 50% ширины родителя */
  font-size: 1.5em;  /* 150% от родительского шрифта */
}

👉 @frontend_1

Краткая шпаргалка по CSS. Часть 2

7. Цвета

- Цвета по названию: red, blue, green.
- HEX: #ff0000 — красный цвет.
- RGB: rgb(255, 0, 0) — красный цвет.
- RGBA: rgba(255, 0, 0, 0.5) — красный цвет с 50% прозрачностью.

Пример:

body {
  background-color: #f0f0f0;
  color: rgb(0, 128, 0);
}

8. Шрифты и текст

#### Шрифты

body {
  font-family: 'Arial', sans-serif;
}

#### Размер шрифта

p {
  font-size: 16px;
}

#### Жирный и курсив

strong {
  font-weight: bold;
}
em {
  font-style: italic;
}

#### Высота строки и выравнивание текста

p {
  line-height: 1.5;
  text-align: center;
}

9. Фоновые изображения и цвета

body {
  background-color: #e0e0e0;  /* Цвет фона */
  background-image: url('image.jpg');  /* Изображение фона */
  background-repeat: no-repeat;  /* Изображение не повторяется */
  background-size: cover;  /* Изображение растягивается по всему фону */
}

10. Flexbox (модель для выравнивания элементов)

#### Основные свойства контейнера:

.container {
  display: flex;
  justify-content: center;  /* Выравнивание по горизонтали */
  align-items: center;  /* Выравнивание по вертикали */
}

#### Основные свойства для элементов внутри Flexbox:

.item {
  flex-grow: 1;  /* Элемент занимает все доступное пространство */
  flex-shrink: 0;  /* Элемент не сжимается */
  flex-basis: 200px;  /* Начальный размер элемента */
}

11. Grid (сетка)

#### Определение контейнера Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* Три колонки одинаковой ширины */
  grid-gap: 10px;  /* Отступы между элементами */
}

#### Расположение элементов Grid

.item {
  grid-column: 1 / span 2;  /* Элемент занимает две колонки */
  grid-row: 1 / 2;  /* Элемент на первой строке */
}

12. Переходы и анимации

#### Переходы

a {
  transition: color 0.3s ease;
}
a:hover {
  color: red;
}

#### Анимации

@keyframes example {
  0% { background-color: red; }
  100% { background-color: yellow; }
}
div {
  animation: example 5s infinite;
}

👉 @frontend_1

Анимированный SVG-логотип

Впервые я увидел такую анимацию штрихов в SVG в Material Line Icons Вячеслава Трушкина. Это было круто, но я никогда не задумывался о том, чтобы сделать что-то свое, пока не увидел баннер Му-Ан Чиоу на ее сайте. Я вдруг почувствовал, что тоже хочу быть крутым парнем!

https://antfu.me/posts/animated-svg-logo

👉 @frontend_1

Совет по Javascript 💡

Возможно вы не знаете об этом простом способе сортировки без учета регистра.

👉 @frontend_1

Красивый и последовательный набор иконок, созданный сообществом.

Проект с открытым исходным кодом и форк Feather Icons.
Мы расширяем набор иконок настолько, насколько это возможно, сохраняя при этом приятный внешний вид - присоединяйтесь к нам!

https://lucide.dev/

https://github.com/lucide-icons/lucide

👉 @frontend_1