Фронтенд Гайд

7 дней бесплатного обучения frontend-разработке! 🔥 Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью и куратором. За 7 дней ты: - Сверстаешь веб-сайт на HTML + CSS; - Реализуешь функционал на JavaScript; - Используешь фронтенд-фреймворк Angular; - Подключишь Backend и загрузишь сайт на хостинг. В итоге ты разработаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов. Ухватить бесплатно такой ценный материал можешь по ссылке 👉 Frontend Start После подтверждения участия получишь в подарок чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.

🤔 Какие преимущества Redux? Redux — это библиотека для управления состоянием приложений, часто используемая с React, но она также может быть использована с другими библиотеками или фреймворками JavaScript. Redux предлагает централизованное хранилище (store) для состояния приложения, что делает управление состоянием более предсказуемым и удобным. Рассмотрим основные преимущества использования Redux: 🚩Преимущества 🟠Централизованное управление состоянием: Все состояние приложения хранится в одном централизованном месте, называемом хранилищем (store). Это упрощает управление состоянием и его доступность из любой части приложения. 🟠Предсказуемость и детерминизм: Redux использует чистые функции (редюсеры) для обработки изменений состояния. Это делает поведение приложения предсказуемым и детерминированным. 🟠Легкость отладки: Redux предоставляет мощные инструменты для отладки, такие как Redux DevTools, которые позволяют разработчикам просматривать состояние приложения, действия и изменения состояния в реальном времени. 🟠Тестируемость: Благодаря использованию чистых функций и явных действий, компоненты состояния и логика изменения состояния в Redux легко тестируются. 🟠Улучшенная поддержка и масштабируемость: Поскольку состояние и логика изменения состояния централизованы, легче добавлять новые функции и модули в приложение. 🟠Управление сложными состояниями: Redux позволяет эффективно управлять сложными состояниями, включая вложенные структуры данных и зависимости между различными частями состояния. 🟠Совместимость с серверным рендерингом (SSR): Redux хорошо подходит для серверного рендеринга, так как состояние приложения может быть предварительно заполнено на сервере и передано клиенту для инициализации. Для начала установим необходимые пакеты:

npm install redux react-redux

Создание действий (actions)

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

Создание редюсера (reducer)

// reducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default counterReducer;

🖥 Интересный codepen-проект Интересная идея; можно сделать что-то похожее — и будет, что показать на собесе. Solar system — анимация описания планет солнечной системы. Проект реализован с помощью CSS и JavaScript.

🖥 Изящные карточки с эффектом 3D-подъёма.

Что такое falsy значения ? "falsy" (ложные) значения — это значения, которые при приведении к логическому типу (Boolean) дают false. Эти значения часто используются в условиях (например, в if выражениях) для проверки истинности или ложности. Основные значения: 1️⃣false: Само значение false является ложным.

  if (false) {
     console.log('Это не выполнится');
   }
   

2️⃣0 и -0: Нулевые значения считаются ложными.

if (0) {
     console.log('Это не выполнится');
   }

if (-0) {
     console.log('Это тоже не выполнится');
   }

3️⃣"" (пустая строка): Пустая строка считается ложной.

if ("") {
     console.log('Это не выполнится');
   }

4️⃣null: Значение null также является ложным.

if (null) {
     console.log('Это не выполнится');
   }

5️⃣undefined: Значение undefined является ложным.

if (undefined) {
     console.log('Это не выполнится');
   }

6️⃣NaN (Not-a-Number): Специальное значение NaN, которое обозначает нечисловое значение, считается ложным.

if (NaN) {
     console.log('Это не выполнится');
   }

Примеры 1️⃣Условные операторы:

const value = 0;

   if (!value) {
     console.log('value является falsy'); // Это выполнится
   }

2️⃣Логические операторы: Логические операторы могут быть использованы для проверки на "falsy" значения.

const value = null;
   const result = value || 'Значение по умолчанию';
   console.log(result); // 'Значение по умолчанию'

3️⃣Функции с параметрами по умолчанию: Функции могут использовать "falsy" значения для предоставления параметров по умолчанию.

function greet(name) {
     name = name || 'гость';
     console.log('Привет, ' + name);
   }

   greet(); // Привет, гость
   greet('Алиса'); // Привет, Алиса

"Falsy" значения — это значения, которые приводятся к false в логическом контексте. Основные "falsy" значения: false, 0, -0, "", null, undefined, NaN. Эти значения часто используются в условиях для проверки их истинности или ложности.

Прими участие в «Хакатоне по кибериммунной разработке 3.0» от «Лаборатории Касперского» с призовым фондом 1 000 000 рублей! Регистрация на хакатон открыта до 15 ноября Приглашаем разработчиков, аналитиков, архитекторов ПО, экспертов по информационной безопасности и студентов программирования и кибербезопасности. Участвуй индивидуально или в команде до 5 человек. Тебе предстоит разработать систему удалённого управления автомобилем для каршеринга, устойчивую к кибератакам. Специальных знаний в автомобильной отрасли не требуется — задача будет понятна всем, независимо от опыта. Это твой шанс прокачать навыки в кибербезопасности и пообщаться с экспертами «Лаборатории Касперского». Ключевые даты: • 15 октября – 15 ноября – регистрация участников • 8 ноября – митап с экспертами и игра «Огнеборец» • 15 ноября – старт хакатона • 17 ноября – дедлайн загрузки решений • 22 ноября – подведение итогов и объявление победителей Регистрируйся, прояви себя и внеси вклад в безопасность каршеринговых сервисов

🌟 Animated Star Rating Каждая звезда - это радио кнопка, при нажатии на которую задействуются свои CSS-стили.

💻 Ты еще не в курсе последних IT-трендов? 🤯 Скорее всего, твои конкуренты уже внедряют новые фишки в проекты! 🚀 Эксклюзив в мире фронтенда, инсайды из мира технологий, лайфхаки для разработчиков – всё это уже ждёт тебя в моём блоге. Не пропусти – будь впереди всех! 👀 🌐 Подписывайся прямо сейчас и прокачай свои навыки быстрее, чем другие напишут console.log('hello world')! ➡️ Перейти в канал ⬅️