Frontend Советы

CSS совет 💡

Проявите креативность с текстом всего с 3 строками CSS-кода ✨

👉@frontend_sovet

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

И в новом сезоне ребята решили разобраться, какие инструменты и знания включают в роадмапы профессионального развития и насколько они применимы.

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew

Совет по использованию инструментов Chrome Dev Tools 💡

Мы должны тестировать наши сайты на медленных сетях, чтобы обеспечить лучший пользовательский интерфейс ✅.
Вы можете задаться вопросом, как это сделать во время разработки 🤔.
Посмотрите это видео, чтобы узнать, как легко смоделировать любое состояние сети в Chrome Dev Tools

👉@frontend_sovet

Два простых способа добавить разделители в CSS

@frontend_sovet

Идентичный алфавит

Напишите функцию, принимающую две строки и возвращающую true в случае если строки состоят из одинаковых букв (порядок не важен). Иначе верните false.

isEqualSymbols('кит', 'тик'); // => true
isEqualSymbols('мда', 'да я'); // => false

Решение на картинке. Для ускорения мы сразу отбрасываем вариант, когда строки не равны по длине, далее делаем из строк массивы и сортируем по символам, затем склеиваем обратно и проверяем готовые строки на равенство.

@frontend_sovet

Нахождение самого длинного слова в массиве

У нас есть массив, содержащий несколько строк. Далее мы создаём переменную, которая содержит пустую строку. А теперь, чтобы обнаружить самую длинную строку в этом массиве, нам нужно взглянуть на все элементы массива, и если длина элемента массива больше длины переменной "most_lengthy_string", то мы переназначаем переменную.

@frontend_sovet

Забудьте о конкатенации, используйте шаблонные строки (литералы)

Конкатенация строк с помощью оператора "+" – это старая школа. Более того, конкатенация строк с участием большого количества переменных (или выражений) повышает риск возникновения путаницы и ошибок.

Шаблонные строки (или литералы) позволяют встраивать выражения прямо в текст. Они обладают уникальным синтаксисом, при котором строка заключается в обратные кавычки (``). Шаблонная строка может содержать места для подстановки динамических значений. Такие места отмечаются знаком доллара и фигурными скобками. Например, ${выражение}.

@frontend_sovet

Обработка исключений и SOLID

Присоединяйтесь к нашему открытому уроку и погрузитесь в основы обработки исключений и SOLID

🚀На вебинаре вы узнаете:

1. Как реализовать обработку исключений в соответствии с принципами SOLID

2. Как избежать распространения ошибок при обработке исключений

3. Как минимизировать подверженность программного кода изменениям

Практика: На этом вебинаре мы разберём, как грамотно организовать включение исключений в программном коде, следуя принципам SOLID. Вы научитесь писать код, который не только легко поддерживается, но и который надежно обрабатывает ошибки, минимизируя их влияние на работу системы.

👉 Регистрация и подробности о курсе «Архитектура и шаблоны проектирования» https://vk.cc/cG7l8V

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Как проверить, является ли значение массивом?

Для этого следует использовать метод Array.isArray.

@frontend_sovet

Почему результатом сравнения двух похожих объектов является false?

В JS объекты и примитивы сравниваются по-разному. Примитивы сравниваются по значению. Объекты — по ссылке или адресу в памяти, где хранится переменная. Вот почему первый console.log возвращает false, а второй — true. Переменные «a» и «c» ссылаются на один объект, а переменные «a» и «b» — на разные объекты с одинаковыми свойствами и значениями.

@frontend_sovet

Как записать несколько выражений в одну строку?

Для этого мы можем использовать оператор "," (запятая). Этот оператор «двигается» слева направо и возвращает значение последнего выражения или операнда.

Если мы выведем значение x в консоль, то получим 27. Сначала мы увеличиваем значение x на единицу (x = 6). Затем вызываем функцию addFive() с параметром 6, к которому прибавляем 5 (x = 11). После этого мы умножаем значение x на 2 (x = 22). Затем вычитаем 5 (x = 17). И, наконец, прибавляем 10 (x = 27).

@frontend_sovet

Возможности для молодых людей в «Алабуге»

В особой экономической зоне «Алабуга» активно развивается лидерская программа «100 Лидеров». В ней могут поучаствовать молодые специалисты от 19 до 29 лет.

У участников есть возможность познакомиться с топ-менеджерами компании, поиграть в бизнес-игры, пройти собеседования с реальным шансом трудоустройства в компанию «Алабуга».

Питание и проживание за счет компании.

Работа в «Алабуге» - это зарплата от 78 до 200 тысяч рублей и участие в реализации проектов мирового уровня.

Следующий поток - с 28 по 31 октября!
Заявку можно подать на сайте.

Узнаем время выполнения кода

Чтобы измерить время в микросекундах (не миллисекундах) надо воспользоваться стандартной функцией performance.now(). Она возвращает вещественное число (время от начала выполнения процесса) в милисекундах, а дробная часть есть соответсвенно микросекунды.

@frontend_sovet

Преобразование в другую систему счисления

Fun fact: перевести число из десятичной системы в другую можно с помощью метода toString, указав желаемое основание системы (от 2 до 36). Для обратного преобразования можно использовать метод parseInt.

@frontend_sovet

Хотите освоить прогрессивный фреймворк для создания веб-приложений на JS?

➡️Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем:

✔️архитектурные принципы Nest.Js, включая внедрение зависимостей и модульность;
✔️как создавать маршруты, контроллеры и использовать middleware;
✔️как работать с базами данных, включая MongoDB, PostgreSQL и MySQL;
✔️методы тестирования и отладки приложений Nest.Js.

Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.

Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cCkRCk

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Как сделать размытие изображения в css?

Сделать размытие изображения в CSS можно следующим образом:

<head>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="путь к картинке" />
</body>

@frontend_sovet

Метод indexOf

Возвращает индекс первого найденного вхождения указанного значения. Поиск ведётся от начала до конца строки. Если совпадений нет, возвращает -1. Вторым параметром можно передать позицию, с которой следует начать поиск.

@frontend_sovet

Университет Сириус объявляет набор на программу «Современные методы робототехники и теории управления»

На нашей программе ты изучишь:
• современные подходы и методы исследования актуальных проблем механики, робототехники и теории управления;
• познакомишься с постановками актуальных тематических задач в приложениях;
• приобретешь навыки по использованию современных аналитических и численных методов их решения.

Кроме того, это отличная возможность стать частью комьюнити, которое разделяет твою страсть к робототехнике!

Сроки проведения: 11-16 ноября 2024.
Успей подать заявку до 13 октября 2024.

Если ты задался вопросами: «А как я поеду в Сириус?  Где я буду там жить?» 
У нас есть ответ:
Проживание, проезд/перелет по территории РФ и питание для участников программы осуществляется за счет средств партнера ГК «Росатом».  
Плата за обучение на программе не взимается.

Более подробная информация: https://siriusuniversity.ru/admission/educational-modules-and-activities/informatsionnie-tehnologii-i-iskusstvennii-intellekt/sovremennye-metody-robototekhniki-i-teorii-upravleniya/

Spread

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

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

@frontend_sovet

Ваши автотесты сложно поддерживать и они не всегда надежны? Хотите узнать, как улучшить процесс автоматизации тестирования и повысить качество результатов? 👀

Всего за пару часов вы изучите паттерн Page Object, чтобы сделать тесты структурированными, легко читаемыми и поддерживаемыми. Вы узнаете, как оптимизировать автоматизированные тесты в JavaScript, что повышает их производительность и надежность.

➡️Присоединяйтесь к открытому вебинару 17 сентября в 20:00 мск!

Спикер Татьяна Березенцева — Senior Automation QA в зарубежной компании Multilogin.

Встречаемся в преддверии старта курса «JavaScript QA Engineer».

Все участники вебинара получат специальную цену на обучение!
➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cAPNrh

Spread

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

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

@frontend_sovet

Когда-нибудь путали align-items и justify-content в CSS Flexbox?

justify-content: выравнивает элементы вдоль направления flex (главная ось).
align-items: в противоположном направлении (перекрестная ось).

@frontend_sovet

Как создавать код, который легко модифицировать и поддерживать?

Узнайте на открытом вебинаре «Практическое руководство по применению SOLID-принципов» 16 сентября в 20:00 мск, где мы разберем:

- основы и значение каждого из SOLID-принципов;
- пошаговый алгоритм применения SOLID для разработки расширяемого и поддерживаемого кода;
- примеры применения SOLID-принципов для решения реальных задач:
- как минимизировать затраты на изменение требований к ПО, следуя SOLID.

Урок для backend и fullstack-разработчиков, архитекторов ПО и начинающих программистов.

Встречаемся в преддверии старта курса «Архитектура и шаблоны проектирования». Все участники вебинара получат специальную цену на обучение!

Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие https://vk.cc/cANvep.

Знаешь ли вы о атрибуте loading="lazy" в HTML?

Он позволяет откладывать загрузку ресурсов, не видимых на экране.

@frontend_sovet

Наглядная иллюстрация разницы между space-between, space-around и space-evenly (justify-content) в CSS Flexbox.

@frontend_sovet

Какие возможности и преимущества предлагают Node.js и Deno? Хотите узнать, какая из этих сред лучше подходит для ваших проектов?

Всего за пару часов вы научитесь уверенно использовать Node.js и Deno для создания эффективных и современных приложений. Вы узнаете, какие паттерны и инструменты применять в зависимости от задач.

Присоединяйтесь к открытому вебинару 2 сентября в 20:00 мск.

Урок предназначен для разработчиков, которые хотят использовать среды Node.js и Deno в своей работе.

Встречаемся в преддверии старта курса «JavaScript Developer. Professional». Все участники вебинара получат специальную цену на обучение! Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/czErJk

Остаточные параметры (Rest параметры)

Rest параметры дают возможность передать произвольное количество аргументов в функцию, приняв их в массив.

@frontend_sovet

Как можно клонировать объект?

Можно использовать оператор остатка ....
Можно использовать Object.assign(newObj, oldObj)
Но эти подходы не позволяют выполнить глубокое клонирование. Поэтому если нам нужно клонировать объект со вложенными объектами, мы можем использовать либо метод какой-либо библиотеки (lodash), либо сделать это средствами встроенного объекта JSON.

JSON.parse(JSON.stringify(objectToClone))

@frontend_sovet

❓Хотите узнать, как эффективно управлять состоянием в React.js с помощью хуков useState и useReducer?

Ждем вас на открытом вебинаре 20 августа в 19:00 мск, где мы разберём:

- основы управления состоянием в React.js с помощью хуков useState и useReducer;
- различия и преимущества использования useState и useReducer;
- практические примеры применения хуков для управления состоянием в реальных приложениях.

Урок будет полезен как новичкам, знакомым с базовыми концепциями React, так и опытным разработчикам, которые хотят улучшить свои навыки управления состоянием.

Встречаемся в преддверии старта курса «React.js Developer». Все участники вебинара получат специальную цену на обучение!

👉 Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/czyfju

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Прототипное наследование

Каждый объект имеет свойство prototype, в котором хранится ссылка на его прототип – своего рода хранилище методов и свойств. У прототипа в свою очередь есть свой прототип, к которому объект также имеет доступ "по цепочке".

@frontend_sovet

Что такое статический метод класса (static)?

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

class Repo {
static getName() {
return "Repo name is modern-js-cheatsheet"
}
}

// нам не нужно создавать объект класса Repo
console.log(Repo.getName()) // "Repo name is modern-js-cheatsheet"

let r = new Repo();
console.log(r.getName()) // необработанная ошибка TypeError: r.getName не является функцией

Cтатические методы вызываются через имя класса. Вызывать статические методы через имя объекта запрещено. Статические методы часто используются для создания вспомогательных функций приложения.

@frontend_sovet

Задача

Напишите функцию persistence, которая принимает положительный параметр num и возвращает его мультипликативную величину (сколько раз нужно перемножить цифры num, пока не получите одну цифру).

Пример:
39 --> 3
(3*9 = 27, 2*7 = 14, 1*4 = 4 .
4 состоит из одной цифры. Чтобы дойти до четвёрки, мы сделали 3 итерации. )


Ответ

const persistence = (num) => {
var times = 0;

num = num.toString();

while (num.length > 1) {
times++;
num = num
.split('')
.map(Number)
.reduce((a, b) => a * b)
.toString();
}

return times;
};

@frontend_sovet