CodeBase | Frontend

🗣 Модальное окно — это эмуляция диалогового окна браузера, появляющегося поверх страницы в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы. ⏺ Используется для : отображения второстепенного содержимого на странице ⏺ Подходит для: настроек, создания новых документов, заполнения компактных форм или шагов пошагового мастера. Например, модальное окно может использоваться для ввода адреса - при клике на ссылку модальное окно открывается. ⏺ Избегайте использования модального окна для больших форм. Большие формы - это формы, которые не умещаются на двух экранах монитора. Если необходимо сохранить контекст страницы при работе с такими формами, возможно стоит рассмотреть использование боковой панели (сайдпейдж). ➡️ Код прикреплю в комментарии CodeBase | Frontend

✅Иногда возникает путаница при использовании методов map(), filter() и reduce(), которые предназначены для трансформации массива или вычисления агрегатного значения. ➡️ map() преобразует каждый элемент массива с помощью заданной функции и возвращает новый массив:

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped); // [21, 22, 23, 24, 25, 26]

➡️ filter() возвращает новый массив, содержащий элементы, для которых переданная функция возвращает true:

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered); // [2, 4]

➡️ reduce() позволяет работать с элементами массива и сохранять промежуточные результаты:

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced); // 21

Если вам нравится такая подача, добавьте реакций и мы будем выпускать такое чаще!)🔥🔥🔥 CodeBase | Frontend

🟢 Rest-параметры позволяют принимать произвольное количество аргументов, объединяя их в массив.

function myFunc(...args) { console.log(args[0] + args[1]); } myFunc(1, 2, 3, 4); // 3

CodeBase | Frontend

⚡️ Деструктуризация в JavaScript - это эффективный метод извлечения данных, сохраненных в объектах.

const obj = { name: 'Joe', food: 'cake' } const { name, food } = obj; console.log(name, food); // 'Joe' 'cake'

🔵 Язык JavaScript позволяет даже сохранять свойства в переменных с другими именами.

const obj = { name: 'Joe', food: 'cake' } const { name: myName, food: myFood } = obj; console.log(myName, myFood); // 'Joe' 'cake'

🔵 Используя деструктуризацию, можно передавать параметры в функцию без опасений относительно изменений этих параметров. Данный подход распространен в React и может быть вам уже знаком.

const person = { name: 'Eddie', age: 24 } function introduce({ name, age }) { console.log(I'm ${name} and I'm ${age} years old!); } console.log(introduce(person)); // "I'm Eddie and I'm 24 years old!"

CodeBase | Frontend

🗣 Spread - это оператор в JavaScript, который позволяет развернуть выражения там, где требуется использовать несколько аргументов. ⏺ В случае с функцией Math.max(), она не может принять массив arr напрямую, потому что нет функции, которая принимает массив в качестве аргумента. Math.max() ожидает отдельные числа в качестве аргументов. Оператор spread (три точки - ...) позволяет извлечь отдельные элементы из массива и передать их как аргументы.

const arr = [4, 6, -1, 3, 10, 4]; const max = Math.max(...arr); console.log(max); // 10

CodeBase | Frontend

⚡️ Замыкание - это одно из ключевых понятий в JavaScript, которое позволяет скрыть переменные и функции от внешнего доступа. ➡️ Функция createGreeter возвращает анонимную функцию, которая сохраняет доступ к переменной greeting. Однако никто, кроме этой функции, не может больше обратиться к этой переменной.

function createGreeter(greeting) { return function(name) { console.log(greeting + ', ' + name); } } const sayHello = createGreeter('Hello'); sayHello('Joe'); // Hello, Joe

➡️ В реальной разработке замыкания могут пригодиться в API-функциях для защиты ключей.

function apiConnect(apiKey) { function get(route) { return fetch(${route}?key=${apiKey}); } function post(route, params) { return fetch(route, { method: 'POST', body: JSON.stringify(params), headers: { 'Authorization': Bearer ${apiKey} } }) } return { get, post } } const api = apiConnect('my-secret-key'); // больше нет необходимости передавать API-ключ, // он сохранен в замыкании функции api api.get('http://www.example.com/get-endpoint'); api.post('http://www.example.com/post-endpoint', { name: 'Joe' });

Если вам интересно изучить данный вопрос более подробно, добавьте огня и мы подготовим для вас еще больше годной инфы!🔥🔥🔥 CodeBase | Frontend

🗣Boxy Preloaders — градиентные прелоадеры. Реализована с помощью CSS и JavaScript 🔗 Посмотреть код #анимация #css #javascript CodeBase | Frontend

🗣JAVASCRIPT-КОНЦЕПЦИИ: ЗНАЧЕНИЯ И ССЫЛКИ Если не понять, как происходит работа с переменными в JavaScript, то будут возникать ошибки в коде, которые трудно избежать. ➡️ При присвоении примитивных типов данных (boolean, number, string) создается полная копия значения. Переменная содержит конкретное значение, которое не связано с исходным. ➡️ В случае с объектами, включая массивы и функции, они всегда передаются по ссылке. После присвоения переменной такого значения, она будет содержать ссылку на область памяти, где находится исходный объект. Таким образом, копия объекта не создается.

let variable1 = 'My string'; let variable2 = variable1;

➡️ В переменной variable2 теперь лежит примитивное строковое значение 'My string', полностью скопированное с variable1. Эти переменные равны, но независимы друг от друга. Изменение variable2 никак не повлияет на variable1.

variable2 = 'My new string'; console.log(variable1); // My string console.log(variable2); // My new string

➡️ А что там с объектами?

let variable1 = { name: 'Jim' } let variable2 = variable1;

➡️ Сейчас в variable2 лежит объект, очень похожий на variable1. На самом деле это один и тот же объект, что очень просто проверить.

variable2.name = 'John'; console.log(variable1); // { name: 'John' } console.log(variable2); // { name: 'John' }

Представьте, какие проблемы могут возникнуть из-за этого поведения, если вы не учтете его. Чаще всего сложности возникают в функциях, которые работают с объектами как аргументами и изменяют их содержимое. #JavaScript #JS CodeBase | Frontend

⚡️ МАКЕТ ДЛЯ ВЕРСТКИ: DIVESEA ⚡️ ➡️ Сложность: ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ➡️ Страницы: многостраничный ➡️ Адаптив: есть ➡️ Навыки: flex или grid, слайдеры, табы 🔗 Ссылка на макет #макет #html #css CodeBase | Frontend

💬 Parallax Drag-slider Стильный слайдер с эффектом параллакса, реализованный с помощью HTML, SCSS и JavaScript. 🔗 Посмотреть код CodeBase | Frontend

⌛ Spin preloader Анимация загрузки страницы, реализованная с помощью HTML, SCSS и JavaScript. 🔗 Посмотреть код CodeBase | Frontend

🔥 Плагин CSSREM 🔥 Быстро и легко может перевести px в rem и обратно. 🔗 Ссылка на на плагин CodeBase | Frontend

⭐️ ТОП-3 РЕДАКТОРОВ КОДА ⭐️ IDE помогает программистам создавать код, объединяя функции редактирования, создания, тестирования и упаковки ПО, упрощая творческий процесс, подобно тому, как писатели используют текстовые редакторы и бухгалтеры - электронные таблицы. 1️⃣ Visual Studio Code – это простой, но мощный редактор кода, который изначально предназначен для работы с JavaScript, TypeScript и Node.JS. С его помощью и с дополнительными расширениями можно также работать с C++, C#, Python и PHP. ➡️Одно из отличительных свойств Visual Studio Code – это умная функция автодополнения благодаря технологии IntelliSense. Она позволяет автоматически дополнять названия переменных, функций и модулей, а также предоставляет ссылки на соответствующие разделы документации. В редакторе можно выполнять отладку кода непосредственно, запускать приложения для отладки и присоединяться к уже запущенным приложениям. 2️⃣ Sublime Text - это текстовый редактор с лёгким весом, который поддерживает работу на различных платформах. ➡️В программе встроена поддержка TypeScript, JSX и TSX. Пользовательский интерфейс редактора современный, и есть возможность использовать видеокарту для рендеринга, что способствует улучшению производительности. 3️⃣ Notepad++ — свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса, разметки, а также языков описания аппаратуры VHDL и Verilog. ➡️Базируется на компоненте Scintilla, написан на C++ с использованием STL, а также Windows API, и распространяется под лицензией GNU General Public License. Базовая функциональность программы может быть расширена как за счёт плагинов, так и сторонних модулей, таких как компиляторы и препроцессоры. Поддерживает открытие более 100 форматов. CodeBase | Frontend

🔥 JavaScript (JS) 🔥 🟢 Считается одним из наиболее распространенных сценарных языков программирования. Его применение в основном связано как с фронтенд-разработкой, так и с бэкенд-разработкой. На фронтенде он используется для создания динамических элементов на веб-страницах. 🟢 Работа JavaScript заключается в увеличении уровня интерактивности веб-сайта. Этот язык позволяет создавать анимированные пользовательские интерфейсы, такие как слайдеры, всплывающие окна, расширенные меню навигации и др. JavaScript значительно расширяет возможности веб-страниц, позволяя им реагировать на действия пользователей и обновляться без перезагрузки страницы. CodeBase | Frontend

➡️ Git — это набор командной строки, который отслеживает и регистрирует изменения в файлах (как правило, это касается исходного кода программ, но вы можете применять его к любым файлам по вашему усмотрению). С его помощью можно сравнивать, анализировать, редактировать, сливать изменения и вернуться назад к предыдущим версиям. Этот процесс известен как управление версиями. ➡️ Зачем использовать Git: 🟢 Отслеживание изменений, которые произошли в проекте со временем. Это означает, что можно просмотреть, какие изменения были внесены в файлы программы на различных этапах разработки и при необходимости вернуться назад для внесения корректировок. 🔗 Шпаргалка по работе с Git CodeBase | Frontend

🔥 SASS / LESS 🔥 🟢 SASS, сокращение от Syntactically Awesome Stylesheets, является инструментом, способствующим упрощению процесса создания CSS-кода. Он представляет собой язык программирования, который преобразуется в обычный CSS с помощью специального компилятора. Браузеры не могут интерпретировать SASS напрямую, поэтому для отображения стилей необходима конвертация в стандартный CSS. Задача компилятора заключается в том, чтобы преобразить SASS в понятный для браузеров формат CSS. Использование SASS помогает упростить создание и обслуживание больших объемов CSS-кода. 🟢 SCSS, также известный как Sassy CSS, является одним из двух основных синтаксисов языка SASS. В отличие от SASS, который использует специфический синтаксис без фигурных скобок и с отступами для вложенности элементов, SCSS больше приближен к обычному CSS, что делает его более удобным для большинства разработчиков. В то же время SCSS сохраняет все преимущества SASS, такие как использование переменных, миксинов, вложенностей и наследования селекторов. ➡️ Пример использования:

scss
// Объявление переменных
$primary-color: #3498db;
$button-border-radius: 5px;

// Создание стилей кнопки
.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border-radius: $button-border-radius;
  font-size: 16px;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
  &.large {
    font-size: 20px;
    padding: 12px 24px;
  }
  &.outline {
    background-color: white;
    border: 2px solid $primary-color;
    color: $primary-color;

    &:hover {
      background-color: $primary-color;
      color: white;
    }
  }
}

➡️ Этот код SCSS объявляет переменные для основного цвета кнопки и радиуса закругления углов, а затем создает стили для кнопки с возможностью применения различных модификаторов, таких как размеры и варианты оформления. Компиляция этого кода SCSS даст на выходе стандартный CSS, который браузеры могут интерпретировать и применять к кнопке на веб-странице. CodeBase | Frontend

➡️ BEM — методология ⬅️ 🟢 БЭМ представляет собой методологию веб-разработки, которая основывается на принципе разделения интерфейса на отдельные блоки, а также включает в себя набор библиотек, фреймворков и инструментов. 🟢 Концепция «Блок, Элемент, Модификатор» описывает структуру компонентов. Через соглашение по именованию CSS-классов методология стимулирует информативность и повторное использование компонентов, что облегчает совместную работу, масштабирование и поддержку проектов. ➡️ Пример использования:

html
    <div>
        <div>Элемент</div>
        <div>Модификатор</div>
    </div>

css
.block {
    background-color: lightblue;
    padding: 20px;
}
.block__element {
    font-size: 16px;
    color: black;
}
.block__element--modifier {
    font-weight: bold;
    color: red;
}

➡️ В данном примере используется методология БЭМ для именования CSS-классов блока, элементов и модификаторов, что позволяет создавать понятную структуру и стилизацию компонентов. CodeBase | Frontend

⚡️ HTML / CSS ⚡️ ⚡️ HTML — язык гипертекстовой разметки страниц, используемый для описания структуры веб-сайтов. Он состоит из тегов, которые определяют визуальное отображение контента в браузере. ⚡️ CSS — язык описания стилей для HTML-документов. Он необходим для придания внешнего вида веб-страницам. HTML определяет структуру, а CSS отвечает за оформление страницы. 🔗 Семантические элементы в HTML 🔵 <article> определяет независимое, автономное содержимое (Статья должна иметь смысл сама по себе, ее возможно распространять независимо от остальной части веб-сайта). 🔵 <aside> определяет некоторое содержимое помимо содержимого, в котором он размещен (например, боковая панель). Контент <aside> должен быть косвенно связан с окружающим контентом. 🔵 <footer> определяет нижний колонтитул для документа или раздела. 🔵 <header> - контейнер для вводного контента или набор навигационных ссылок. 🔵 <main> определяет основное содержание документа. 🔵 <mark> определяет выделенный / подсвеченный текст. 🔵 <nav> определяет набор навигационных ссылок. 🔵 <section> определяет раздел в документе (Раздел представляет собой тематическую группу контента, обычно с заголовком). 🔵 <details> определяет дополнительные сведения, которые пользователь может просматривать или скрывать. 🔵 <summary> определяет видимый заголовок для элемента <details>. 🔵 <figure> определяет автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т. д. 🔵 <figcaption> определяет заголовок для <figure> элемента. 🔵 <time> определяет дату / время. Пользуйтесь на здоровье!) CodeBase | Frontend

⚡️ НОВОВВЕДЕНИЯ В CSS: 2024 ГОД ⚡️ 🟠 Улучшение архитектуры 🟠 Работа с цветами и шрифтами 🟠 Отзывчивый дизайн 🟠 Интерактивные анимации и стилизация нативных элементов управления 🔗 Подробнее CodeBase | Frontend

🟢 Коллекция ТОПовых мокапов в Figma. 🔗 Посмотреть CodeBase | Frontend