CodeBase | Frontend

Открыть в Telegram

Все самое интересное и полезное у нас 😎 Контакт: @Filgood777 (реклама, сотрудничество)

Больше

Сеть:Ленивый вайб-программист Россия217 592 Технологии и приложения31 337

2 011

Подписчики

Нет данных24 часа

-27 дней

-1130 день

187

Просмотры поста

~ 9024 часа

~ 10548 часов

9.30%

Коэффициент вовлеченности

Нет данных

Постов в день

Ads index

beta

Архив постов

2 011

⚡️ Псевдокласс ::first-letter ⚡️ 🔥 Этот псевдокласс позволяет стилизовать первую букву текстового элемента. Он часто используется для создания инициалов или других типографических эффектов. ➡️ Принятые свойства: 🔵 color — цвет первой буквы 🔵 background-color — цвет фона 🔵 font-family — шрифт первой буквы 🔵 font-size — размер шрифта 🔵 font-weight – насыщенность шрифта 🔵 line-height — высота строки 🔵 text-decoration — текстовое оформление (подчеркивание, зачеркивание) 🔵 text-transform — преобразование текста (в верхний регистр, в нижний регистр) 🔵 margin - внешние отступы 🔵 padding - внутренние отступы 🔵 border — граница первой буквы 🔵 float — выравнивание (например, слева, справа). 🔵 text-shadow — тень текста CodeBase | Frontend

2 011

На css и js можно делать крутые отзывчивые интерфейсы Если знать, как 💥 Приручить вёрстку поможет Нестыдный код. Создавай классные эффекты в своих работах, даже если с фантазией все плохо Несколько сотен готовых решений для вдохновения и использования Личный помощник фронтендеру прямо в мессенджере!

2 011

⚡️ ВСЕГДА ИЗУЧАЙ ЧТО-ТО НОВОЕ ⚡️ ➡️ Важно не останавливаться на основных технологиях и инструментах в области Frontend-разработки. ➡️ Чтобы быть в курсе новейших трендов и методов, необходимо постоянно расширять свои знания и умения. 🟢 Два паттерна, PRPL (Push, Render, Pre-cache, Lazy-load) и RAIL (Response, Animation, Idle, Load), следует изучить для оптимизации загрузки и производительности веб-приложений. 🟢 Освоение ключевых метрик производительности веб-страниц, таких как Time to First Byte (TTFB), First Contentful Paint (FCP) и Time to Interactive (TTI), поможет в анализе и улучшении веб-сайтов. 🟢 Использование инструментов для мониторинга производительности, таких как Google Lighthouse и WebPageTest, необходимо для тестирования и контроля эффективности веб-страниц. 🟢 Углубленное изучение TypeScript для повышения масштабируемости и поддерживаемости кода, особенно в больших проектах, является важным шагом. 🟢 Расширение знаний в области серверного JavaScript с использованием Node.js позволит работать над полноценными Full-Stack проектами и понимать всю экосистему веб-разработки. 🟢 Изучение фреймворков для мобильной разработки, таких как React Native и Ionic, необходимо для создания кросс-платформенных мобильных приложений. CodeBase | Frontend

2 011

🔍 Ищешь подходящий курс или книгу?

Все платные курсы, книги и другие материалы уже давно сливаются в Telegram

2 011

⚡️ Знакомство с DOM ⚡️ 🟢Браузер рассматривает все теги в HTML-документе как объекты, где одни теги могут содержать другие теги, что делает их дочерними. Проще говоря, HTML-документ представляет собой древовидную структуру с разветвленными элементами тегов, что и составляет DOM (Document Object Model). Итак, самая простая страница:

<html>
<head>
    <title>Page title</title>
</head>
<body>
    <p>Текст</p>
    <button>Click Me</button>
</body>
</html>

➡️ Этот пример представляет собой минимальную HTML-страницу. Убедитесь, что вы сохраняете эту разметку в формате .html, чтобы браузер мог ее корректно отобразить. ➡️ Если внимательно посмотреть на приведенные в примере теги, то можно заметить, что внутри одних тегов мы чётко видим другие. 🟢 Внутри тега <html> лежат все остальные теги: <head>, <body>. Внутри же этих тегов, например, <head> лежит тег <title>. 🟢 Все, что существует внутри HTML-документа, является частью DOM-дерева. 🟢 Если честно, то различных аспектов с DOM достаточно много, но не хочется на них заострять большое внимание, потому как это будет больше теории, нежели практики. ➡️ Давайте подытожим, DOM позволяет нам крутить и вертеть всеми элементами нашего HTML-документа. Мы можем изменить положение элемента, цвет, да почти всё что угодно. CodeBase | Frontend

2 011

⚡️ Маскирование в CSS при помощи свойства mask ⚡️ 🔘 Это метод, который позволяет установить изображение в качестве маски для элемента. ➡️ Для этого свойства можно указать параметры, например:

mask: url("../shape.png"); 
mask-repeat: no-repeat; 
mask-size: cover; 
mask-position: center;

➡️ или записать все в одну строку:

mask: url("../img/shape.png") center/cover no-repeat;

CodeBase | Frontend

2 011

Хочешь щёлкать задачи по фронтенду как орешки? Канал Frontend Tests & Tasks научит! Это не очередной канал с задачами. Здесь придется думать. Убедись сам 👉 @Frontend_Task

2 011

⚡️Анимация перехода от дня к ночи ⚡️ Крутое решение для вашего проекта. Красиво, удобно, лаконично. Пользуйтесь на здоровье!) 🔵Технологии: SVG, SCSS и JavaScript. 🔗 Ссылка CodeBase | Frontend

2 011

👩‍💻 Хук useState в React useState — это хук, который позволяет добавлять состояние в функциональные компоненты. Это проще, чем управлять состоянием в классовых компонентах, и делает код более чистым и понятным. ⚙️ Как использовать useState? Для начала нужно импортировать хук из библиотеки React:

import React, { useState } from 'react';

Затем можно объявить состояние внутри вашего компонента:

function Counter() {
  // Инициализация состояния с начальным значением 0
  const [count, setCount] = useState(0);

  // Функция для увеличения счётчика
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={increment}>Нажми меня</button>
    </div>
  );
}

💬 Что здесь происходит? 🟢 Инициализация состояния: useState(0) возвращает массив из двух элементов: текущего значения состояния (count) и функции для его обновления (setCount). 🟢 Обновление состояния: setCount(count + 1) устанавливает новое значение для count, и компонент перерисовывается с обновленным состоянием. Состояний может быть несколько. Вы можете использовать несколько хуков useState в одном компоненте для управления различными состояниями.

Если пост вам понравился и хотите больше подобного контента с примерами, оставляйте ваши реакции 🔥

CodeBase | Frontend

2 011

⚡️Попробуйте свои силы в разработке на React, создав ипотечный калькулятор. ⚡️ 🟢 В процессе работы над проектом вы познакомитесь с функциональными компонентами, Material UI, передачей пропсов и другими интересными аспектами React разработки. 🔗 Ссылка CodeBase | Frontend

2 011

⚡️ Перебор массива элементов ⚡️ 1️⃣ Рекомендуется использовать цикл forEach:

const elements = document.querySelectorAll('.my-element');

elements.forEach((el) => {
  console.log(el);
  // Выполнение действий...
});

2️⃣ То же самое, но с использованием spread-оператора:

[...elements].forEach((el) => {
  // Выполнение действий...
});

3️⃣ Использование метода массива для NodeList:

Array.from(elements).forEach((el) => {
  // Выполнение действий...
});

// Или


[].forEach.call(elements, (el) => {
  // Выполнение действий...
});

// Или


[].slice.call(elements, 0).forEach((el) => {
  // Выполнение действий...
});

Здесь метод массива .forEach передается псевдомассиву NodeList (который ранее не имел метода forEach) с помощью метода call. 4️⃣ Использование более быстрого цикла for:


```javascript
for (let i = 0; i < elements.length; i++) {
  // Выполнение действий с elements[i]
}

Если понравился формат, жду 🔥🔥🔥

CodeBase | Frontend

2 011

🖼️ React: Инструменты 🖼️ ➡️ По умолчанию в производственной сборке (когда process.env.NODE_ENV === 'production') инструменты разработчика не включены. ➡️ Существует два способа добавления инструментов в приложение: плавающий (floating) и встроенный (inline). 🔵 Плавающий режим:

import { ReactQueryDevtools } from 'react-query/devtools'

const App = () => (
    {/* Другие компоненты */}
)

Настройки: 🟢 initialIsOpen - при установке в значение true, панель инструментов по умолчанию будет открыта. 🟢 panelProps - применяется для добавления свойств к панели, таких как className, style и другие. 🟢 closeButtonProps - служит для добавления свойств к кнопке закрытия панели. 🟢 toggleButtonProps - используется для добавления свойств к кнопке переключения. 🟢 position: "top-left" | "top-right" | "bottom-left" | "bottom-right" - указывает положение логотипа React Query для открытия/закрытия панели. 🔵 Встроенный режим:

import { ReactQueryDevtoolsPanel } from 'react-query/devtools'

const App = () => (
    {/* Другие компоненты */}
)

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend

2 011

⚡️ Крутой концепт прелоадера страницы ⚡️ ➡️ Технологии: CSS 🟢 Геометрические фигуры в стиле тетриса непрерывно формируются в правильной последовательности — представляет собой оригинальное решение. 🟢 Возможно, будет благоприятно сказываться на показателях конверсии. 🔗 Ссылка CodeBase | Frontend

2 011

Ребят, в начале или середине своего пути вам часто нужно смотреть на примеры кода и реализацию разных возможностей ⚠️ Это повышает вашу насмотренность, понимание кода, да и вы всегда можете сохранить заготовки себе на будущие проекты Раньше я публиковал множество сайтов. Но теперь есть специальный канал для этого: @code_ready У вас будет все под рукой, с оформленным кодом, примерами, шпаргалками и без занудства ➡️ Так что подписываемся

2 011

⚡️ Использование свойства white-space с параметром nowrap ⚡️ 🟢 Свойство white-space с параметром nowrap предотвращает автоматический перенос текста на новую строку внутри элемента, даже если текст не помещается в доступной ширине контейнера. CodeBase | Frontend

2 011

⚡️ Макет сайта: 𝗚𝗥𝗘𝗘𝗡 𝗘𝗡𝗘𝗥𝗚𝗬 ⚡️ Чудесный макет сайта "зеленая" энергия. Прокачает ваши навыки! 🟢 Сложность: ⭐️⭐️⭐️⭐️⭐️ 🟢 Технологии: HTML/CSS, JS и др. 🔗 Ссылка CodeBase | Frontend

2 011

⚡️ GitHub: Терминология ⚡️ Пора обогатить ваш словарь Git перед тем, как мы сделаем первый запрос на слияние (Pull Request). 🟣 Хранилище (repository) — это каталог проекта, который контролируется Git. Внутри этого каталога содержится проект, история изменений и метаинформация проекта (хранится в скрытом каталоге .git). 🟣 Индекс — это место, где записаны имена файлов и их изменения, которые должны быть включены в следующий коммит. С точки зрения фактического хранения, индекс представляет собой просто файл. Файлы не попадают автоматически в индекс, их нужно добавлять явно с помощью команды git add. 🟣 Фиксация (commit) — это сохранение изменений в истории проекта (изменения, внесенные в индекс). Фиксация содержит измененные файлы, имя автора фиксации и время ее создания. Каждая фиксация обладает уникальным идентификатором, который позволяет в любое время вернуться к этой точке. Коммит можно рассматривать как точку сохранения. 🟣 Ветка (branch) — это последовательность фиксаций. По сути, это ссылка на последнюю фиксацию в данной ветке. Ветки не зависят друг от друга — изменения в одной ветке не затрагивают другую (если вы явно этого не попросите). Обычно вы начинаете работу с одной ветки — main, об этом чуть позже. 🟣 Форк (Fork) — это ваше собственное ответвление другого проекта. Это означает, что GitHub создает копию проекта в вашем пространстве имён, и вы можете легко вносить изменения, отправляя их (push) обратно. 🟣 Запрос на слияние (Pull Request) — предложение внести изменения в чужой репозиторий. Например, если вы скопировали чей-то репозиторий, сделали изменения и хотите, чтобы они были включены в оригинальный репозиторий, то вы создаете запрос на слияние с просьбой добавить ваши изменения. CodeBase | Frontend

2 011

⚡️ React Range Sliders ⚡️ 🔵 Коллекция стильных слайдеров для React 🔗 Ссылка CodeBase | Frontend

2 011

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal

2 011

✅ Макет сайта: High Pro ✅ ☄️ Крутой макет личного кабинета. 👀 Технологии: HTML/CSS, JS 🔗 Ссылка CodeBase | Frontend