🔥 Знакомство с CSS-свойством inset 🔥

🔵 Оно является сокращением для знакомых вам свойств top, left, right и bottom.

🔵 Подобно краткому синтаксису для margin или padding, с помощью inset можно задать все смещения элемента одной строкой.

div {
  position: absolute;
  inset: 0;
}

🔵 Использование краткого синтаксиса полезно для сокращения объема CSS-файла и улучшения читаемости кода.

🔵 Однако стоит помнить, что inset — это логическое свойство, которое учитывает направление письма.

🔵 Если на вашем сайте используется язык с направлением текста справа налево (RTL), стороны могут поменяться местами: лево станет право, и наоборот.

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

CodeBase | Frontend | #css

⚡️ Свойство mask ⚡️

➡️ Настройка маски в CSS позволяет установить изображение в качестве маски для элемента с использованием свойства mask.

При этом можно указать:

⏺ mask-clip — область распространения маски;

⏺ mask-size — размер маски;

⏺ mask-position — позиционирование маски относительно элемента;

⏺ mask-repeat — повторение маски;

⏺ mask-composite — операцию композиции для маски и других слоев;

⏺ mask-mode — ссылку на маску;

⏺ mask-origin — начало координат маски.

CodeBase | Frontend | #css

🔥 Space Journey - это космическое путешествие, созданное с помощью CSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #js #animate

⚡️CAPTCHA генератор ⚡️

Система автоматической генерации случайных CAPTCHA с проверкой корректности введенного кода.

Технологии: HTML, CSS, JS

🔗 Ссылка

CodeBase | Frontend | #js

⚡️ React-animations ⚡️

React-animations — это библиотека, основанная на анимациях из animate.css. Она легко осваивается и предлагает большое количество анимаций.

React-animations совместима с любыми inline-style библиотеками, которые поддерживают определение ключевых кадров анимации через объекты, такими как Radium, Aphrodite или styled-components.

Теперь давайте разберём, как это работает на примере анимации подпрыгивания.

➡️ Для начала необходимо импортировать нужную анимацию из react-animations.

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

➡️ После создания компонента нужно обернуть любой HTML-код или компонент для применения анимации.

<Bounce><h1>Hello Animation Bounce</h1></Bounce>

➡️ Пример:

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

export default class ReactAnimations extends Component {
    render() {
        return (
            <Bounce><h1>Hello Animation Bounce</h1></Bounce>
        );
    }
}

Анимация успешно работает, она проста и легко настраивается.

Для использования анимации при прокрутке можно воспользоваться отличным решением — библиотекой react-animate-on-scroll.

CodeBase | Frontend | #react

⚡️ BLUEFISH IDE ⚡️

Bluefish — это многофункциональный редактор кода.

Обладает рядом полезных функций:

🔵 проверка орфографии с учётом специфики языков программирования

🔵 автодополнение кода

🔵 поддержка сниппетов

🔵 управление проектами

🔵 автоматическое сохранение.

💡 Этот редактор идеально подходит для веб-разработчиков, но не удовлетворит потребности дизайнеров, которым необходим веб-ориентированный или WYSIWYG-редактор.

CodeBase | Frontend | #ide

👩‍💻 Макеты для практики

Начинающие фронтендеры всегда ищут дизайны для отработки своих навыков работы. Мы нашли несколько удивительных бесплатных дизайнов пользовательского интерфейса от талантливых и потрясающих дизайнеров из сообщества Figma.

✍️ Подборка:

1. Красивые разделы целевой страницы для стартап-приложения
2. Минималистичный дизайн портфолио
3. Дизайн приложения для доставки еды
4. Лендинг VPN-сервиса
5. Сайт архитекторов

Если было полезно, сохраняй и оставляй реакции 🔥

CodeBase | Frontend | #templates

⚡️ Анимация ввода - эффект анимации текстового поля для добавления задачи в список, выполненный с использованием CSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Псевдокласс :has()

Выбор элементов на основе их содержимого с использованием псевдокласса :has() открывает возможности изменения стилей элементов в зависимости от наличия определенных дочерних элементов или других условий в их содержимом.

👀 Параметры, которые принимает данный псевдокласс:

🔵 :has(selector) — применяет стили к элементу, если он содержит дочерние элементы, соответствующие селектору.

🔵 :has(:not(selector)) — применяет стили к элементу, если у него нет дочерних элементов, соответствующих селектору.

CodeBase | Frontend | #css

⚡️ Многостраничный сайт - Веб музыка

Тематика: IT, музыка
Страницы: многостраничный

🔗 Ссылка

CodeBase | Frontend | #figma

🔥 Event Loop 🔥

⚡️ Event Loop (Цикл событий) - это важный аспект асинхронного программирования, который позволяет выполнение JavaScript кода в однопоточном режиме, не блокируя другие операции. Event Loop проверяет наличие задач для выполнения и обрабатывает их поочередно.

🟢 JavaScript работает в одном потоке, что означает выполнение одной операции за раз. Однако благодаря Event Loop, JavaScript способен обрабатывать асинхронные задачи, такие как запросы к серверу или обработка событий интерфейса, не блокируя основной поток выполнения.

➡️ Механизм работы Event Loop:

😊 Стек вызовов (Call Stack): Хранит текущее выполнение функций. Функция добавляется в стек при вызове и удаляется после завершения выполнения.

😊 Очередь обратных вызовов (Callback Queue): Когда асинхронная операция завершена, ее обратный вызов помещается в очередь.

😊 Цикл событий (Event Loop): Проверяет стек вызовов на наличие функций для выполнения. Если стек пуст, Event Loop выбирает обратный вызов из очереди и добавляет его в стек для выполнения.

🟢 Это позволяет JavaScript выполнять долгосрочные операции, такие как загрузка данных, не блокируя основной поток выполнения и обеспечивая отзывчивость приложения.

➡️ Пример кода:

console.log('Первое сообщение');
setTimeout(() => {
console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');

➡️ В этом примере, несмотря на нулевую задержку в setTimeout, сообщения будут выведены в порядке:

Первое сообщение
Второе сообщение
Сообщение из setTimeout

🟢 Это происходит потому, что обратный вызов setTimeout помещается в очередь и будет выполнен после завершения текущего кода в стеке вызовов. Event Loop позволяет выполнять асинхронные операции, сохраняя отзывчивость и эффективность веб-приложений.

Если понравился пост, обязательно добавь 🔥🔥🔥

CodeBase | Frontend

👩‍💻 ТОП-3 JavaScript ТРЮКА С МАССИВАМИ 👩‍💻

➡️ Фильтрация уникальных значений

🟢 С появлением нового типа объектов Set в стандарте ES6 и его комбинацией со спред-оператором (...), можно быстро создать новый массив из старого, содержащий только уникальные значения.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // [1, 2, 3, 5]

➡️ Кэширование длины в цикле

🟢 При изучении JavaScript, мы всегда встречаем стандартный цикл for в учебных материалах:

for (let i = 0; i < array.length; i++){
console.log(i);
}

🟢 Этот шаблон следует использовать, верно? Однако, он не является оптимальным. На каждой итерации будет пересчитываться длина массива array. И хотя иногда это может быть полезно, чаще всего более эффективным будет кэшировать ее после первого расчета. Для этого мы создаем переменную length вместе с определением счетчика цикла в первой части условия:

for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}

🟢 Такой код остается лаконичным, но при работе с большими массивами будет немного более эффективным.

➡️ Укорачивание

🟢 Один из широко известных JavaScript-трюков - сокращение массива, который всегда полезно вспомнить.

🟢 Для удаления нескольких значений с конца массива не обязательно использовать методы slice(), splice() или pop(). Просто присвойте новое значение свойству length массива:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // [0, 1, 2, 3]

🟢 Этот подход работает только с массивами, так как с Set, например, данный трюк не сработает.

Если понравился пост, добавь 🔥 🔥 🔥
И, мы обязательно разберем данный вопрос подробнее!

CodeBase | Frontend |#js

⚡️Панелька с анимированными иконками — Панель навигации с анимированными иконками при нажатии.

Технологии: HTML, SCSS, TS

🔗 Ссылка

CodeBase | Frontend | #animate

⚡️ WebStorm — Среда разработки веб-приложений на JavaScript, CSS и HTML. Обеспечивает быстрое программирование благодаря функциям анализа кода и автодополнения.

🔵 Широкий функционал. WebStorm предлагает широкий спектр инструментов и возможностей, включая поддержку необходимых фронтенд-разработчику языков и фреймворков.
🔵 Встроенная проверка орфографии. Сокращает время на поиск и исправление мелких ошибок.
🔵 Удобное меню настроек с горячими клавишами. Облегчает и ускоряет процесс программирования.
🔵 Умное автозаполнение кода. Ускоряет процесс разработки и снижает вероятность ошибок.

🔵 Сайт

CodeBase | Frontend | #ide

⚡️Neumorphic Rocker Switch — Стильный переключатель отображения температуры, выполненный в стиле неоморфизма.

Технологии: HTML, SCSS, TS

🔗 Ссылка

CodeBase | Frontend | #animate

🟢 Stylus — плюсы и минусы 🟢

⚡️ Stylus запустили в 2010 году как универсальный CSS-препроцессор с гибкой синтаксической структурой.

➕Плюсы

🟢Гибкий синтаксис. Позволяет опускать двоеточия, точки с запятой и фигурные скобки. Код получается более лаконичным и читаемым.
🟢Использование отступов для организации кода. Отступы для блоков улучшают структуру и визуальное восприятие кода.
🟢Расширенный функционал. Переменные, миксины и вложенные селекторы.

➖Минусы

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

CodeBase | Frontend | #Stylus

⚡️Radios With Sliding Focus — Анимированный переключатель с эффектом при наведении.

Технологии: HTML, CSS

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Псевдокласс :empty

Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков и текста.

👀 Объясню на пальцах

➡️ Не будет пустым следующее содержимое:

🟢другие теги;
🟢текст, включая пробельные элементы (пробел, невидимый пробел, табуляция, переносы строк).

➡️ Будет пустым следующее содержимое:

🟢HTML-комментарии;
🟢текст, указанный с помощью CSS-атрибута content;
🟢псевдоэлементы.

🗣 В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента.

CodeBase | Frontend | #css

⚡️ Grunt — Инструмент веб-разработки, который используют для автоматизации повторяющихся задач: сжатие изображений, компиляция CSS и JavaScript, а также линтинг кода.

🔵Множество плагинов. Обширная экосистема плагинов обеспечивает гибкость в настройке.
🔵Простая интеграция. Легко интегрируется с другими инструментами и системами разработки, что делает его универсальным софтом.

🔵Сложная настройка. Настройка может вызвать затруднение у новичков из-за конфигурационного подхода.
🔵Производительность. Медленнее по сравнению с другими инструментами автоматизации.

➡️ Сайт

CodeBase | Frontend | #tool

⚡️Developer or Designer? — Стилизованный переключатель с плавной анимацией.

Технологии: SVG, SCSS, TypeScript

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Обёртка String

String — это обёртка над примитивным строковым типом, которая содержит дополнительные методы работы со строками:

🟡поиска по строке;
🟡строковых преобразований;
🟡получения отдельных символов.

🟡 Строки автоматически оборачиваются в обёртку String при вызове методов над ними.

➡️ Обернуть строку в String можно вручную, вызвав конструктор new String():

const primitive = 'приветики'
const str = new String('приветики')

🗣️ При работе с формами и вводом значений следует очищать поля ввода от замыкающих пробелов вызовом метода trim()

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

CodeBase | Frontend | #js