Извлечение компонентов 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

Cовет💡

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

👉 @frontend_1

Адаптивные SVG

SVG может быть сложной темой. Если вы разработчик, вам, возможно, придется проявить интерес к дизайну, чтобы глубже погрузиться в работу с SVG. А если вы дизайнер, то вам потребуется немного знаний о кодинге, чтобы делать больше, чем просто экспортировать файлы из таких инструментов, как Figma. Возможно, именно поэтому мы редко видим кастомные адаптивные SVG, хотя они невероятно полезны и универсальны. В этом посте я проведу вас через основы создания адаптивного SVG.

Меня вновь напомнили о потенциале адаптивных SVG, когда я посмотрел приложение Threads. В приложении есть интересный элемент дизайна — маленькая закрученная линия, соединяющая аватар ответа с аватаром оригинального сообщения.

https://12daysofweb.dev/2023/responsive-svgs/

👉 @frontend_1

Поговорим про деньги в IT?

Приглашаем опытных IT-специалистов пройти небольшой опрос про зарплаты и бенефиты в технологических компаниях. Это займёт не более 7 минут — а ваше мнение поможет одному крупному российскому работодателю делать актуальные оферы.

Пройти опрос можно здесь

Совет по HTML 💡

Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?

👉 @frontend_1

Совет по JavaScript 💡

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

👉 @frontend_1

Улучшаем типизацию роутинга в Next.js

Неработающие ссылки, неправильно сформатированные строки запросов и отсутствующие параметры маршрута — всё это легко решаемо с помощью типизированной системы, такой как TypeScript.

К сожалению, большинство современных решений для маршрутизации, включая Next.js, не включают этого, оставляя нас одних в холодной, тёмной ночи.

В Next.js есть экспериментальная функция с возможностью подключения для статически типизированных ссылок. Чтобы её включить, активируйте experimental.typedRoutes в вашем файле next.config.js следующим образом:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
}
 
module.exports = nextConfig

https://www.flightcontrol.dev/blog/fix-nextjs-routing-to-have-full-type-safety


👉 @frontend_1

33 Концепта

33 концепции JavaScript, которые должен знать каждый разработчик.

Данный репозиторий был создал с целью помочь разработчикам лучше разобраться в концептах JavaScript. Это не требование, а руководство для будущих исследований. Он основан на статье, написанной Стивеном Кертисом, и вы можете прочитать ее здесь.

https://github.com/gumennii/33-js-concepts

👉 @frontend_1

Создаем drag and drop, используя HTML, CSS и Javascript 👨‍💻

https://github.com/atherosai/ui/tree/main/drag-and-drop-04


👉 @frontend_1