🟢Анимация эффектов кнопок при наведении с использованием 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

⚡️ Подготовили для вас небольшой перечень годной литературки⚡️

➡️ 1-й уровень (Начинающий)

🟢 JavaScript. Полное руководство (2021) — Дэвид Флэнаган

🟢 Изучаем программирование на JavaScript (2022) — Эрик Фримен, Элизабет Робсон

🟢 JavaScript с нуля до профи (2023) — Свекис Лоренс Ларс

🟢 JavaScript с нуля (2022) — Кирупа Чиннатхамби

➡️ 2-й уровень (Средний)

🟠 Вы пока не знаете JS. Область видимости и замыкания (2022) — Кайл Симпсон

🟠 Выразительный JavaScript. Современное веб-программирование (2022) — Марейн Хавербеке

🟠 Асинхронная обработка и оптимизация — Симпсон Кайл

🟠 Рефакторинг кода на JavaScript. Улучшение проекта существующего кода (2019) — Мартин Фаулер

➡️ 3-й уровень (PRO)

🟣 JavaScript для глубокого обучения: TensorFlow.js (2021) — Франсуа Шолле, Эрик Нильсон, Стэн Байлесчи, Шэнкуинг Цэй

🟣 Тестирование JavaScript (2023) — Лукас Да Коста

Если понравилась подборка, вы знаете что делать😎
Жду от вас 🔥🔥🔥

CodeBase | Frontend

⚡️⚡️ У НАС ЕСТЬ ЧАТ ⚡️⚡️

Тут вы можете:

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

🟢 Админ всегда читает коменты) 🟢

Всем хорошего настроения и продуктивной работы!))

Присоединяйтесь к нашему сообществу!))

Ссылка на ЧАТ

CodeBase | Frontend

✅ ТОП - 5 ПЛОЩАДОК ДЛЯ ПРАКТИКИ ✅

⚡️ Разработка проектов и решение практических задач представляют собой один из наилучших способов освоения навыков программирования.

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

⚡️ Для обучения фронтенд-разработке мы подготовили список из 5 веб-сайтов, которые помогут вам улучшить свои навыки путем практики.


1. freeCodeCamp

2. Codewell

3. CSSBattle

4. Coderbyte

5. Javascript30

После прохождения практики, жду ваших отзывов)
Если понравился пост, вы знаете, что делать 🔥🔥🔥

CodeBase | Frontend

🗣 Интернет-магазин сырной продукции

🗂 Категория: Интернет-магазин
💵 Сложность: Очень сложный
📱 Адаптив: ✅
📄 Страницы макета: 17

CodeBase | Frontend

💩 ЛАЙФХАКИ ВЕРСТАЛЬЩИКА 💩

⚡️ Подготовил для вас небольшой список годных ресурсов.

➡️ How To Center in CSS – центрируйте всё

➡️ CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов

➡️ Learn Git Branching – интерактивный учебник по Git

➡️ Генератор Flexbox верстки – Конструктор Flexbox

➡️ Генератор Grid верстки – Конструктор Grid

🟢 Сохрани, чтобы не потерять 🟢

CodeBase | Frontend