🗣Boxy Preloaders — градиентные прелоадеры.

Реализована с помощью CSS и JavaScript

🔗 Посмотреть код

#анимация #css #javascript

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

🗣 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 - это эффективный метод извлечения данных, сохраненных в объектах.

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

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

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

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

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

⏺ Используется для : отображения второстепенного содержимого на странице

⏺ Подходит для:
настроек, создания новых документов, заполнения компактных форм или шагов пошагового мастера.

Например, модальное окно может использоваться для ввода адреса - при клике на ссылку модальное окно открывается.

⏺ Избегайте использования модального окна для больших форм. Большие формы - это формы, которые не умещаются на двух экранах монитора. Если необходимо сохранить контекст страницы при работе с такими формами, возможно стоит рассмотреть использование боковой панели (сайдпейдж).

➡️ Код прикреплю в комментарии

CodeBase | Frontend

🟢Анимация эффектов кнопок при наведении с использованием CSS

➡️ Посмотреть код

CodeBase | Frontend

⚡️ Social media icon — уникальные иконки.

➡️ Посмотреть код

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

🖥 Генераторы в JavaScript

С момента появления в JavaScript функций-генераторов прошло немало времени, но многие разработчики все еще относятся к этой звездочке (астериск) с некоторой опаской.

Функция-генератор представляет собой обычную функцию, которую можно приостановить в любой момент для получения промежуточного значения с помощью метода next().

Существует возможность, что генератор будет иметь конечное число промежуточных точек, и когда они закончатся, выполнение функции остановится, а вызов next вернет undefined.

function* greeter() {
  yield 'Hi';
  yield 'How are you?';
  yield 'Bye';
}

const greet = greeter();

console.log(greet.next().value);
// 'Hi'

console.log(greet.next().value);
// 'How are you?'

console.log(greet.next().value);
// 'Bye'

console.log(greet.next().value);
// undefined

🗣Но никто не мешает зациклить функцию для бесконечной генерации значений:

function* idCreator() {
  let i = 0;
  while (true)
    yield i++;
}

const ids = idCreator();

console.log(ids.next().value);
// 0

console.log(ids.next().value);
// 1

console.log(ids.next().value);
// 2
// etc...

👀 Обратите внимание, что при первом вызове функции происходит лишь создание объекта-генератора с методом next(), но сама функция не возвращает никакого значения.

CodeBase | Frontend

💩Coderbyte - это платформа, где доступно более 200 задач, которые вы можете решать прямо в онлайн-режиме на одном из 10 языков программирования.

CodeBase | Frontend

🖼️ React.js - это фреймворк JavaScript с открытым исходным кодом, для создания пользовательских интерфейсов.

✔️ Установка

➡️ React.js требует Node.js, поэтому начните с установки Node.js с официального сайта.

Node.js также поставляется с пакетным менеджером npm, который вам также понадобится.

➡️ Откройте терминал или командную строку и перейдите в директорию, где вы хотите создать новый проект с React.js.

➡️ Для удобства рекомендуется использовать инструмент Create-React-App, который позволяет легко создать новый проект React.

➡️ Установите Create-React-App, выполнив следующую команду в терминале:

npx create-react-app my-react-app

где my-react-app - название вашего проекта.
Дождитесь завершения установки.

➡️ Запуск приложения: После установки выполните следующие команды в терминале:

cd my-react-app
npm start

где my-react-app - название вашего проекта.
После запуска, ваше React-приложение будет доступно по адресу http://localhost:3000/.

🙂 Поздравляю, вы справились с установкой React.js!
Теперь можно приступать к созданию вашего проекта!

CodeBase | Frontend

👩‍💻 Vue.js - прогрессивный JavaScript фреймворк для создания пользовательских интерфейсов и одностраничных приложений.

➡️ Основан на компонентном подходе, подходит для разработки как небольших, так и крупных приложений.

➡️ Обладает простым синтаксисом, хорошей производительностью и поддержкой реактивности данных — лучшее решение для современных приложений.

✔️ Установка

💩 Vue.js требует Node.js для работы. Сначала убедитесь, что у вас установлена Node.js на вашем компьютере.
Скачать — Node.js

💩 Рекомендуется установить Vue CLI (интерфейс командной строки) для создания и управления проектами Vue.js.

💩 Вы можете установить Vue CLI глобально с помощью npm (Node Package Manager), выполнив следующую команду в терминале или командной строке:

   npm install -g @vue/cli

💩 После установки Vue CLI вы можете создать новый проект Vue.js с помощью команды:

   vue create ИМЯ_ПРОЕКТА

💩 Следуйте инструкциям по созданию проекта, выбирая опции по вашему усмотрению.

💩 После создания проекта перейдите в его директорию и запустите его с помощью команды:

   cd ИМЯ_ПРОЕКТА
   npm run serve

💩 Проект будет доступен по адресу, указанному в выводе команды.

Поздравляю! Вы успешно установили и запустили свой проект на Vue.js.

CodeBase | Frontend

💡 Идея пет-проекта: таймер обратного отсчета на JS

Сложность: 🌟⭐️⭐️⭐️⭐️

⚡️ Для улучшения ваших навыков в работе с JavaScript важно изучить разнообразные концепции и функции языка с помощью практических проектов.

⚡️ Создание целевых проектов позволит вам применить полученные знания на практике, освоить основные элементы и овладеть конкретными концепциями, прежде чем приступать к более сложным задачам.

⚡️ Вы можете играть с внешним видом по своему вкусу. С помощью этого проекта вы познакомитесь и сможете использовать различные функции времени в JavaScript.

💻 Технологии:

- HTML/CSS
- JavaScript

🔗 Исходный код

CodeBase | Frontend

Макет сайта "Aperture"

Сложность: ⭐️⭐️⭐️⭐️⭐️

Красивый макет сайта фото студии. Простенький макет, но очень красивый.

🔗 Ссылка на макет

CodeBase | Frontend

🖥 Node.js - это среда выполнения JavaScript, которая позволяет запускать JavaScript на стороне сервера. Она базируется на движке V8 от Google и обеспечивает возможность создания высокопроизводительных веб-приложений.

✔️ Установка

➡️ Перейдите на официальный сайт Node.js
➡️ Скачайте установочный файл Node.js для вашей операционной системы (Windows, macOS, Linux).
➡️ Запустите установочный файл и следуйте инструкциям мастера установки.
➡️ После установки можно проверить, что Node.js установлен корректно, открыв терминал (командную строку) и введя команду node -v.

⚡️ Если у вас появится версия Node.js, значит установка прошла успешно.

🟢 После установки Node.js можно использовать его для выполнения JavaScript на сервере, создания веб-серверов, API и многих других задач.

Если вам понравился пост, добавьте 🔥🔥🔥.
Вам не сложно — админу приятно 🙂

CodeBase | Frontend

⚡️ Vertical TimeLine — универсальный элемент вашего проекта.
Реализован с помощью HTML & CSS.

Сложность: ⭐️⭐️⭐️⭐️⭐️

🔗 Ссылка на код

CodeBase | Frontend

🖥 CSS3 Flexbox - это новая технология, внедренная в последнюю версию CSS, которая позволяет гибко управлять раскладкой блоков внутри контейнера-родителя.

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

🔵 Благодаря CSS Flexbox, блоки легко выравниваются по горизонтали и вертикали.

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

➡️ display: flex; — для блокового отображения;

➡️ display: inline-flex; — для инлайнового отображения.

➡️ Выравниваем горизонтально justify-content

➡️ justify-content

🟢 flex-start Выравнивает по левой кромке. Дефолтное значение

🟢 flex-end Выравнивает по правой кромке.

🟢 center Выравнивает по середине.

🟢 space-between Элементы равномерно распределены по ширине контейнера-родителя, при этом первый и последний элементы выровнены соответственно по левому и правому краю без отступов, а остальные элементы размещены между ними с одинаковыми интервалами.

🟢 space-around По всей ширине так, что между каждыми двумя блоками будет одинаковый отступ, а по края его половина.

🟢 initial Задание дефолтного значения.

🟢 inherit Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

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

CodeBase | Frontend

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

💩 Это делает сайт более удобным для пользователей, независимо от устройства и позволяет эффективно управлять отображением элементов.
💩 Подходы Mobile First и Desktop First имеют свои особенности и могут быть применены в зависимости от проекта.
💩 Пользование логических операторов позволяет создавать более сложные и адаптивные стили, что улучшает пользовательский опыт и SEO-оптимизацию сайта.
💩 Внедряйте адаптивный дизайн осознанно, делая ваш сайт доступным и удобным для всех пользователей.

🔗 Читать подробнее

CodeBase | Frontend

👩‍💻 If...else — это условный оператор JavaScript.

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

let phrase = prompt('Скажи слово друг и заходи')

if (phrase === 'Друг') {
alert('Привет')
} else {
alert('Я тебя не знаю')
}

➡️ Если пользователь вошёл в систему, то показать содержание почтового ящика.

➡️ В противном случае — форму логина;
если сумма покупки больше 2 000 ₽, то посчитать скидку 10%;

➡️ Если покупка оплачена, то показать экран успеха. В противном случае — экран с ошибкой.

Пример ниже выведет на печать слово «Привет», если во всплывающее окно ввести «Друг», и «Я тебя не знаю» в противном случае:

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

CodeBase | Frontend