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

Тематика: 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

⚡️ JSLint — Инструмент, который помогает разработчикам обнаруживать ошибки и потенциальные проблемы в исходном коде JavaScript. Он проводит строгую проверку кода на соответствие определенным стандартам и правилам.

🔵Предотвращение распространенных ошибок. Эффективно выявляет распространенные ошибки и плохие практики.

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

➡️ Сайт

CodeBase | Frontend | #tool

⚡️Scroll-Driven Glow Cards — Карусель карточек с анимированной подсветкой.

Технологии: SVG, CSS, JavaScript

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Псевдоэлемент ::marker

::marker — псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.

👀 Пример

Создадим ненумерованный список <ul> и установим синий цвет точки для каждого элемента <li>:

<ul>
  <li>Цвет точек</li>
  <li>этого ненумерованного списка</li>
  <li>#2e9aff</li>
</ul>

li::marker {
  color: #2e9aff;
}

Псевдоэлемент ::marker работает только на элементах списка.

💡 Для обратной совместимости с CSS 2 браузеры позволяют писать некоторые псевдоэлементы с одним двоеточием, например: ::before, ::after, ::first-letter, ::first-line.

⚠️ Однако псевдоэлемент ::marker необходимо указывать с двумя двоеточиями.

CodeBase | Frontend | #html

⚡️ Mocha — Поддерживает асинхронное тестирование, обладает богатым набором функций для описания тестовых сценариев.

🔵Гибкость в написании тестов. Mocha позволяет разработчикам использовать любую библиотеку утверждений, что делает его гибким для различных стилей тестирования.
🔵Поддержка асинхронного тестирования. Эффективно работает с асинхронным кодом, облегчая тестирование в современных JavaScript-приложениях.
🔵Широкий функционал. Предлагает множество удобных функций для описания и группирования тестов, что облегчает организацию тестовых сценариев.

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

➡️ Сайт

CodeBase | Frontend | #tool

👩‍💻 Code Magic — легкий генератор CSS и Tailwind кода, на основе вашего выбора и вводимых данных.

🔗 Ссылка на сайт

CodeBase | Frontend | #tool

⚡️Sticky Slider — Анимированный слайдер со стилизованными карточками.

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

🔗 Ссылка

CodeBase | Frontend | #animate

👩‍💻 Тернарный оператор

Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.

Используется как компактная замена условного оператора if...else.

const num = 5
console.log(num === 5 ? 'Пять' : 'Не пять')
// Пять

➡️ Обьяснение:

(A) ? (B) : (C)

Где A — условие, B — первое выражение, C — второе выражение.

Если первый операнд A вычисляется в истинное выражение true, то оператор вернёт выражение B. Если в false — вернёт выражение C.

💡 Внутри одного тернарного оператора можно написать другой:

const num = 10
const result =  num > 10 ? 'Число больше 10' :
                num === 10 ? 'Число равно 10' : 'Число меньше 10'
console.log(result)
// 'Число равно 10'

В этом случае запись идентична использованию конструкций if...else if ... else. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее.

🗣️ Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода.

CodeBase | Frontend | #js

⚡️ Komodo IDE — IDE для веб-разработки, которая поддерживает девять языков для фронтенд- и бэкенд-разработки.

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

🔵Временами может тормозить. В особенности это заметно при автозаполнении кода в Python с множеством возможных вариантов.
🔵Порой требуется перезапуск для обновления символов. Это может быть неудобно при работе над крупными проектами.
🔵Сервис платный.

➡️ Сайт

CodeBase | Frontend | #tool

⚡️Silky smooth link effects — Набор из различных анимаций кнопок при нажатии.

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

🔗 Ссылка

CodeBase | Frontend | #animate