Frontend Головного Мозга

@frontend_mind

Все обновления из сферы программирования можно найти на канале @umnyiprogrammist (https://t.me/+uecpYm5etgUwZWMy)

Подписывайтесь, чтобы не пропустить ничего значимого.
@frontend_mind

На этот раз не будет ни рассказов, ни теоретических объяснений. В следующих примерах показано, как создать функцию accum:

Пример:
accum("abcd") // -> "A-Bb-Ccc-Dddd"
accum("RqaEzty") // -> "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy"
accum("cwAt") // -> "C-Ww-Aaa-Tttt"
Параметр accum представляет собой строку, которая состоит только из букв a..z и A..Z.

👉
@frontend_mind

@frontend_mind

Законы UX: Использование психологии для создания лучших продуктов и услуг

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

👉
@frontend_mind

Как программисты заходят к начальнику

👉
@frontend_mind

@frontend_mind

UI/UX тренды в 2025 году: представляет ли ИИ угрозу для будущего дизайнеров и какие визуальные тенденции нас удивят?

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

👉
@frontend_mind

Как справиться с ситуацией, когда код вызывает ошибку, и при этом не повредить приложение?

Конструкция try...catch дает возможность выполнить любой код, но если в нем возникает ошибка, программа не прекращает выполнение, а переходит в блок catch, где можно обработать ошибку. В этой статье рассматриваются основные принципы работы с этой конструкцией.

👉
@frontend_mind

🔥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

@frontend_mind

👉
@frontend_mind

Бинарное сложение

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

Результат в двоичном формате должен быть строкой.

Примеры:
1, 1 // "10" (1 + 1 = 2 в десятичной системе или 10 в двоичной)
5, 9 // "1110" (5 + 9 = 14 в десятичной системе или 1110 в двоичной)

👉
@frontend_mind

Устойчивый веб-дизайн

Безусловно, "Устойчивый веб-дизайн" является необходимым материалом для веб-дизайнеров и front-end разработчиков по всему миру. В книге представлена история и философия интернета. Также обсуждаются идеи веб-разработки.

👉
@frontend_mind

@frontend_mind

Клавиатура прожжённого разраба

👉
@frontend_mind

@frontend_mind

Хочешь найти работу? Презентуй себя!

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

План понятен? Отлично! Осталась всего одна деталь!

Чтобы моя статья действительно принесла тебе пользу, представь: ты заплатил мне 100 тысяч рублей за нее, и она написана специально для тебя.

Представил? Замечательно, тогда продолжай читать внимательно, ведь деньги уже переведены.

👉
@frontend_mind

❓Хотите освоить алгоритмы, которые лежат в основе многих IT-решений? Время познакомиться с магией оптимизации!

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

Алгоритмы — это как GPS для программирования. После урока вы сможете уверенно строить маршруты в графах, прокачаете свои навыки и сделаете шаг к профессиональному уровню.

⏰ Встречаемся 3 февраля в 20:00 мск, участники получат скидку на большое обучение «Алгоритмы и структуры данных».

👉 Регистрация открыта: https://clck.ru/3G55Ax

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

Как установить начальные стили для элемента, когда он появляется на странице?

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

Чтобы указать браузеру, какие стили должны быть у элемента в его начальном состоянии, используется директива @starting-style.

Пример
.promo-block {
transition: opacity 0.4s ease-in;
opacity: 1;
}

@starting-style {
.promo-block {
opacity: 0;
}
}

Когда страница загружается, .promo-block будет невиден, так как в начальном состоянии opacity равен нулю. После загрузки страницы применяются стили из основного состояния: opacity становится равным единице, и .promo-block появляется на экране.

👉
@frontend_mind

👉
@frontend_mind

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

Примеры:
"camelCasing" => "camel Casing"
"identifier" => "identifier"
"" => ""

👉
@frontend_mind

Production Ready GraphQL

Эта книга предлагает исчерпывающее описание всех этапов создания GraphQL API: от дизайна и архитектуры до реализации и документации. Примеры в книге не привязаны к какому-либо языку программирования. Вместо этого они акцентируют внимание на концепциях и шаблонах, которые могут быть реализованы независимо от того, каким образом вы создаете сервер GraphQL.

👉
@frontend_mind

@frontend_mind

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

В React для условной отрисовки компонентов используются условные операторы JavaScript внутри JSX. Это позволяет показывать компоненты или элементы только при выполнении определённого условия. Рассмотрим несколько способов условной отрисовки компонентов в React.

Использование тернарного оператора:
Тернарный оператор ? : позволяет компактно проверять условие и отображать один из двух компонентов.

Пример:
import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
return (

{isLoggedIn ? Welcome back! : Please log in.}

);
};

export default MyComponent;

Логическое И (&&)
Можно применять логический оператор && для отображения компонента только в том случае, если условие истинно.

Пример:
import React from 'react';
const MyComponent = ({ showDetails }) => {
return (

Item
{showDetails && Here are the details...}

);
};
export default MyComponent;

Условный рендеринг с if...else
Для более сложной логики условного рендеринга можно использовать обычные операторы if...else внутри функции компонента.

Пример:
import React from 'react';
const MyComponent = ({ status }) => {
if (status === 'loading') {
return Loading...;
} else if (status === 'error') {
return Error occurred!;
} else if (status === 'success') {
return Data loaded successfully!;
} else {
return null; // Возвращаем null, чтобы ничего не отображать
}
};
export default MyComponent;

Условный рендеринг с помощью функций
Можно вынести условную логику рендеринга в отдельную функцию для лучшей читаемости и повторного использования.

Пример:
import React from 'react';
const renderContent = (status) => {
switch (status) {
case 'loading':
return Loading...;
case 'error':
return Error occurred!;
case 'success':
return Data loaded successfully!;
default:
return null;
}
};
const MyComponent = ({ status }) => {
return (

{renderContent(status)}

);
};
export default MyComponent;

Использование IIFE (немедленно вызываемые функциональные выражения)
Можно использовать IIFE (Immediately Invoked Function Expression) для выполнения более сложной логики рендеринга внутри JSX.

Пример:
import React from 'react';
const MyComponent = ({ isLoggedIn, userName }) => {
return (

{(() => {
if (isLoggedIn) {
return Welcome back, {userName}!;
} else {
return Please log in.;
}
})()}

);
};
export default MyComponent;

👉
@frontend_mind

В интернете появился замечательный совет о том, как сделать свой месячный отпуск двухмесячным.👉
@frontend_mind

@frontend_mind

📌 Существует всего два способа стать Senior JavaScript разработчиком:

1. Провести много времени, просматривая видео на YouTube, изучая документацию и решая сложные задачи, при этом так и не добиться заметного прогресса.

2. Подписаться на канал «JavaScript Senior (https://t.me/+RhBN-mWpUxUzNGNi)» и сэкономить 70% времени на подготовку к собеседованиям и улучшение своих навыков!

Получай полезные сниппеты, актуальные вопросы с собеседований и будь в курсе последних новинок – подпишись @JavaScriptSenior (https://t.me/+RhBN-mWpUxUzNGNi)!
@frontend_mind

Оптимизация приложений на React

Современные веб-приложения требуют всё большей интерактивности, отзывчивости и скорости. В ответ на это команда React постоянно улучшает инструменты, которые позволяют нам точно управлять рендерингом и пользовательским опытом. Если вы использовали только традиционные методы оптимизации, такие как useMemo, useCallback, мемоизацию компонентов через React.memo и другие известные техники, вам могут быть интересны следующие хуки:

useTransition - устанавливает приоритеты рендеринга, разделяя обновления на критические и фоновые.

useDeferredValue - откладывает обновление тяжёлых значений, чтобы интерфейс не зависал при вводе данных.

useOptimistic - помогает реализовать оптимистичные обновления "из коробки".

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

👉
@frontend_mind

Дан одномерный массив, содержащий элементы различных типов, таких как undefined, null, boolean, string и number.

const array = [5, undefined, 0, false, '', null, true, 1]

Массив может быть разрежённым, то есть содержать незаполненные элементы.

Например, если мы добавим к массиву array элемент с индексом 15:
array[15] = 'новый элемент'
console.log(array)
// [ 5, undefined, 0, false, '', null, true, 1, , 'новый элемент']

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

В JavaScript массивы не являются отдельным типом данных, а представляют собой объекты. Заполненные слоты массива имеют числовые ключи, а пустые слоты отсутствуют.

В консоли Chrome Dev Tools пустые слоты отображаются как empty, а в Node.js — как empty items. Это лишь абстрактное представление ситуации, когда длина массива .length не соответствует ожидаемым заполненным слотам.

Чтобы проверить наличие значения по ключу, можно использовать оператор in или метод .hasOwnProperty():
const test = new Array(5)
test[2] = 42

2 in test // true
test.hasOwnProperty(2) // true

0 in test // false
test.hasOwnProperty(0) // false

Таким образом, мы можем пройтись по массиву от 0 до длины и проверить отсутствие текущего индекса в качестве ключа. Однако есть более простой способ: итераторы массивов и методы, основанные на них, используют только существующие ключи:
const test = new Array(5)
test[2] = 42

test.forEach((value, key) => console.log(значение по ключу ${key}: ${value}))
// значение по ключу 2: 42

// консоль выводит значение только один раз

Таким образом, чтобы узнать количество пустых слотов, достаточно от длины массива отнять количество заполненных значений:
const calcEmpty = items => items.reduce(amount => --amount, items.length)

const test = new Array(5)

test[2] = 42
calcEmpty(test) // 4

test[10] = 2
calcEmpty(test) // 9
@frontend_mind

https://doka.guide/js/arrays/#dan-odnomernyy-massiv.-ego-elementami-mogut-byt-znacheniya-raznyh-tipov-vklyuchaya-undefined-null-boolean-string-number

@frontend_mind

👉
@frontend_mind

Готовишься к собеседованию?

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

Выбирай направление:

👩‍💻 Frontend
🖥 Backend
👩‍💻 JS
👩‍💻 Python
👩‍💻 Go
👩‍💻 Java
👩‍💻 C/C++
👩‍💻 C#
👩‍💻 PHP
👩‍💻 QA
📊 SQL
👩‍💻 Git
@frontend_mind

Офер в Яндекс для опытных фронтендеров за два дня

15–16 февраля приглашаем фронтендеров с опытом работы от пяти лет получить офер в Яндекс через multitrack за 2 дня. Достаточно пройти несколько технических секций 15 февраля, чтобы уже 16-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться.

Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать.

Узнать подробности и зарегистрироваться.

Напишите функцию, которая принимает строку на английском языке и возвращает количество согласных букв в ней. Согласные буквы – это все буквы английского алфавита, кроме гласных a, e, i, o, u.

Пример:
consonantCount('') => 0
consonantCount('aaaaa') => 0
consonantCount('XaeiouX') => 2

👉
@frontend_mind

@frontend_mind

Ум программиста. Как понять и осмыслить любой код

Книга рассматривает практические аспекты когнитивистики для программистов. Основные темы включают осмысление и развитие как чужого, так и собственного кода, изучение новых языков программирования, мнемонические приемы для программистов, а также поддержание кода в читаемом состоянии. В книге объясняется, как уменьшить когнитивную нагрузку во время работы программиста и как сделать код логичным и понятным для себя и коллег.

👉
@frontend_mind

Дешёвую рабочую силу теряет

👉
@frontend_mind

@frontend_mind

Почему у новичков возникают трудности с асинхронным кодом и как научиться с ним работать

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

В этой статье мы рассмотрим причины путаницы, ключевые концепции асинхронности и как к ним адаптироваться, чтобы научиться эффективно писать, отлаживать и поддерживать асинхронный код.
@frontend_mind

Как создать градиентную рамку для кнопки?

В данной статье обсуждается CSS-свойство background-clip и его значение border-area, с помощью которого можно формировать оригинальные границы блоков.

👉
@frontend_mind

👉
@frontend_mind

@frontend_mind

‍Паттерны проектирования в JavaScript

Автор предоставляет полное представление о паттернах проектирования в современном JavaScript (ES6+) и делится практическими примерами их применения. Сначала вы ознакомитесь с порождающими, структурными и поведенческими паттернами проектирования, представленными в привычном для JavaScript стиле, а затем перейдете к архитектурным паттернам и паттернам пользовательского интерфейса. Вы узнаете, как использовать паттерны, характерные для таких библиотек, как React, и адаптировать их для фронтенда и микрофронтенда.

В последней части книги описаны и проиллюстрированы паттерны, направленные на улучшение производительности и безопасности, включая обмен сообщениями, события и стратегии загрузки ресурсов, а также паттерны для высокопроизводительных асинхронных вычислений. В издании представлены примеры использования React и Next.js, а также JavaScript и Web API. Эти примеры помогут вам выбрать и внедрить проверенные паттерны проектирования в различных веб-экосистемах и изменить ваш подход к разработке.

👉
@frontend_mind

Напишите функцию, которая принимает одну непустую строку, состоящую только из строчных и заглавных букв латинского алфавита, и возвращает отсортированный список с индексами всех заглавных букв в этой строке.

Пример (вход --> выход):
"CodEWaRs" --> [0, 3, 4, 6]

👉
@frontend_mind

Поднимаем мотивацию

👉
@frontend_mind

@frontend_mind

Интеграция CSS-фреймворков в Angular: советы, которые могут быть вам полезны

Вы создали новое приложение на Angular и подключили популярный CSS-фреймворк, но вместо ожидаемого эффекта столкнулись с трудностями. Стили выглядят не так, как вам хотелось, валидация форм работает некорректно, а некоторые элементы не реагируют на изменения состояния. Знакомо? Это распространенная проблема, когда CSS-фреймворки интегрируются без учета особенностей Angular.

Эта статья поможет вам понять, почему возникают такие сложности, и покажет, как правильно интегрировать CSS-фреймворки в Angular. Мы обсудим основные проблемы, предложим их решения и создадим стильное, реактивное поле ввода, используя лучшие практики Angular.

👉
@frontend_mind

@frontend_mind

👉
@frontend_mind

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

Вот отсортированная база с большим количеством материалов, которая будет постепенно обновляться:

БАЗА (4687 видео/книг):

(363 видео, 87 книг) — Python
(415 видео, 68 книг) — Frontend
(143 видео, 33 книги) — Информационная безопасность/Хакинг
(352 видео, 89 книг) — С/С++
(343 видео, 87 книг) — Java
(176 видео, 32 книги) — Git
(293 видео, 63 книги) — C#
(174 видео, 91 книги) — DevOps
(167 видео, 53 книги) — PHP
(227 видео, 83 книги) — SQL/Базы данных
(163 видео, 29 книг) — Linux
(107 видео, 43 книги) — Системный анализ
(181 видео, 32 книги) — Go
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(137 видео, 93 книги) — Машинное обучение/Научные исследования данных
(113 видео, 82 книги) — Разработка игр
(183 видео, 37 книг) — Дизайн пользовательского интерфейса/Пользовательский опыт
(129 видео, 73 книги) — Тестирование качества
(213 видео, 63 книги) — Rust
(121 видео, 24 книги) — Ruby (https://t.me/+lDX8vfF-7gIwYTY6)
(https://t.me/+ui4KorXT0so2ODZi)
Скачивать ничего не нужно — все материалы доступны в Telegram.
@frontend_mind

Напишите функцию, которая принимает массив слов и объединяет их в одно предложение. Это предложение должно возвращаться без лишних пробелов в начале и конце, а между словами должны быть пробелы. Например, если входные данные: ['hello', 'world', 'this', 'is', 'great'], то результатом должно быть 'hello world this is great'. 👉
@frontend_mind

Безопасность веб-приложений. Разведка, защита, нападение, 2 изд.

Три основных аспекта безопасности приложений — это разведка, нападение и защита. Во втором издании Эндрю Хоффман обсуждает множество связанных тем, включая новейшие виды атак и методы защиты, а также моделирование угроз, жизненный цикл безопасной разработки программного обеспечения (SSDL/SDLC) и архитектуру нулевого доверия. Вы получите детальную информацию об эксплойтах и методах защиты от атак с использованием GraphQL, облачных технологий и доставки контента (CDN). В главы, посвященные атакам и их предотвращению, добавлены материалы для более опытных читателей.

👉
@frontend_mind

@frontend_mind

Обычный рабочий день фронтендера

👉
@frontend_mind

@frontend_mind

Как мы переходим с JQuery на React

Вокруг многие обсуждают серверные компоненты React, серверный рендеринг и различные новшества в области фронтенда. Кажется, что JQuery внезапно исчез, но на самом деле он всё ещё остаётся самой популярной библиотекой.

Сегодня я расскажу, как мы постепенно переходим с JQuery на React.

👉
@frontend_mind

Как и зачем нужно писать тесты?

Существует мнение, что тесты — это лишняя работа и что их написание не обязательно. В данной статье мы постараемся опровергнуть этот миф, рассмотрев преимущества тестирования и недостатки его отсутствия.

Тесты делают код более надежным и устойчивым. Кроме того, они служат отличной документацией, которая всегда актуальна. Тесты также можно использовать как инструмент для разработки программного обеспечения.

Действительно, на написание тестов необходимо выделять больше времени на этапе разработки. Однако время, затраченное на это в начале проекта, впоследствии оправдает себя.

👉
@frontend_mind

👉
@frontend_mind

@frontend_mind

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

Пример:
["Telescopes", "Glasses", "Eyes", "Monocles"] // ["Eyes", "Glasses", "Monocles", "Telescopes"]

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

👉
@frontend_mind

JavaScript для новичков

Начните изучать JavaScript и создайте свой собственный красивый и функциональный сайт прямо сейчас! С этим ярким пошаговым руководством вы легко освоите все основные функции JavaScript и сможете сразу же использовать свои знания на практике. Множество иллюстраций, полезных советов и предупреждений в книге помогут вам сэкономить время и избежать ошибок в процессе обучения.

👉
@frontend_mind

@frontend_mind

Начальник пытается заставить тебя работать в офис в выходные. 👉
@frontend_mind

🔒 Частное облако SpaceWeb — полный контроль и безопасность для вашего бизнеса

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

💼 Ваши данные — под надежной защитой, доступ к ним — в любое время, в любой точке мира.

Хотите узнать больше? Подпишитесь на канал SpaceWeb и будьте в курсе всех новинок в мире облачных технологий!

Реклама.ООО "СпейсВэб". ИНН: 7813376370 erid:2VtzqwB4TZ3

⚡️ Открытый урок «Эффективная работа с Next.js и TypeScript»

🗓 25 ноября в 20:00 МСК
🆓 Бесплатно. Урок в рамках старта курса «Практический курс по TypeScript» от Otus.

На вебинаре:

✔️разберем, как создавать масштабируемые и производительные приложения с помощью Next.js и TypeScript;
✔️ поговорим об использовании статической и серверной генерации, работе с маршрутизацией и оптимизации производительности;
✔️обсудим типизацию компонентов и интеграцию с внешними API для создания надежных приложений.

🔗 Ссылка на регистрацию: https://clck.ru/3EgDMd

🎁 Только в "Черную пятницу", скидки на курс до 15%! Подробности у менеджеров.

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

🦾 Ты круто кодишь на JavaScript? Всегда есть куда расти.

Пришло время освоить TypeScript и выйти на новый уровень!

Приходи повышать грейд на хардовый курс «Практический курс по TypeScript» от OTUS.

Что ты получишь на курсе:

✔️ Актуальные теоретические знания TypeScript;
✔️ Практика на реальных кейсах написанию кода;
✔️ Понимание как Typescript работает с различными фреймворками;
✔️ Изучение преимуществ и особенностей работы Typescript на back/front сторонах.

🔗 Узнать подробнее о курсе: https://clck.ru/3EctQ2

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

⚡️ Открытый урок «Создание мощных GraphQL серверов с TypeScript и NestJS»

🗓 6 ноября в 19:00 МСК
🆓 Бесплатно. Урок в рамках старта курса «Практический курс по TypeScript» от Otus.

На вебинаре разберем:

✔️ как с нуля построить высокопроизводительный GraphQL сервер, используя TypeScript и фреймворк NestJS;
✔️ как проектировать архитектуру серверной части для обеспечения масштабируемости и безопасности;
✔️ а также, обсудим основные принципы GraphQL, настройку схем, резолверов и интеграцию с базой данных.

🔗 Ссылка на регистрацию: https://clck.ru/3EHdvi

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

useEffect

Выполняет побочные эффекты в функциональных компонентах, такие как загрузка данных или изменение DOM.

import React, { useEffect, useState } from 'react';

function DataFetchingComponent() {
const [data, setData] = useState([]);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);

return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}

useContext

Используется для доступа к контексту из функциональных компонентов.

import React, { useContext, createContext } from 'react';

const MyContext = createContext();

function ContextComponent() {
const value = useContext(MyContext);

return <div>{value}</div>;
}

function App() {
return (
<MyContext.Provider value="Hello, world!">
<ContextComponent />
</MyContext.Provider>
);
}

useCallback

Возвращает мемоизированную версию коллбека, который изменяется только если изменяются зависимости.

import React, { useCallback, useState } from 'react';

function CallbackComponent() {
const [count, setCount] = useState(0);

const memoizedCallback = useCallback(() => {
console.log(count);
}, [count]);

return <button onClick={memoizedCallback}>Log Count</button>;
}

useState

Используется для добавления состояния в функциональные компоненты.

Пример:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Вы нажали {count} раз</p>
<button onClick={() => setCount(count + 1)}>Нажми меня</button>
</div>
);
}

useMemo

Возвращает мемоизированное значение. Он используется для оптимизации производительности, предотвращая повторные вычисления значений, которые зависят от входных данных.

Пример:

import React, { useMemo } from 'react';

function ExpensiveComponent({ a, b }) {
const result = useMemo(() => {
// Дорогая вычислительная операция
return a + b;
}, [a, b]);

return <div>{result}</div>;
}

Hook ( хуки )

Хуки (hooks) — это функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Хуки были введены в React версии 16.8. Основные хуки включают:

Основные хуки включают:

useState
useEffect
useContext
useReducer
useMemo
useCallback
useRef

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

Пример:

// Функция высшего порядка, принимающая функцию в качестве аргумента
function higherOrderFunction(callback) {
const result = callback(5);
console.log(result);
}

// Функция, передаваемая в качестве аргумента
function multiplyByTwo(num) {
return num * 2;
}

// Вызов функции высшего порядка
higherOrderFunction(multiplyByTwo); // Выведет: 10

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

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

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

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

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


https://clck.ru/3DqKxf


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

🎊Как эффективно скалировать Node.js-серверы и улучшить производительность приложений?

Узнайте на открытом вебинаре 2 октября в 20:00 мск, где мы разберем:

- встроенные способы скалирования в Node.js;
- как использовать Docker-контейнеры для скалирования;
- примеры облачных решений и Kubernetes для Node.js.

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

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

➡️➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://clck.ru/3Db9SQ

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

👀Создаем Color Picker на Vue 3 с использованием Context API и Composables

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

- как создать простой color picker с использованием Context API и Composables;
- как передавать состояние родительского компонента к дочерним компонентам;
- как переиспользовать код с помощью создания своих Composables и использования готовых из коллекции VueUse.

Урок для разработчиков, желающих улучшить понимание внутренних механизмов Vue 3, создавать свои компоненты и контролы, а также повысить эффективность разработки за счет переиспользования кода.

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

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

➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://clck.ru/3DWxT7

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

⭐️21 сентября Альфа-Банк проведёт A?.Frontend Day — конференцию, которую вы не захотите пропустить.

📆Когда: 21 сентября с 10:00 до 19:00
📍Где: офлайн в Москве и онлайн

На конференции выступят крутые эксперты, каждый из которых готов поделиться своим опытом и сообщить о новейших разработках:

🧷Вадим Царегородцев из Ostrovok.ru расскажет о Valibot — инструменте, который помогает сделать валидацию данных в JavaScript гибкой и безопасной.
🧷Сергей Попов из Skillbox сообщит о проблемах внедрения изменений в компаниях и предложит способы их решения.
🧷Никита Мамизеров объяснит, как внедряли BDUI в Альфа-Банк, с какими сложностями столкнулись и что в итоге получилось.
🧷Никита Ульшин из Т-банка расскажет о паттернах отказоустойчивости, которые помогут минимизировать риски и обеспечить стабильную работу вашего приложения.

Мы подготовили программу на весь день, на A?.Frontend Day вас ждут: онлайн и офлайн-активности, подарки для участников и, конечно же, афтепати, на котором можно расслабиться после насыщенного дня🍸

Регистрация
Ещё больше полезного в Alfa Frontend Community

Frontend Головного Мозга

Как можно каскадно объединить CSS с личным листом пользователя?
Свойства могут быть установлены в рекомендуемых местах, а документ изменен с помощью CSS для смешивания с личным листом пользователя.

Эти вопросы на собеседовании также помогут вам в устной речи. В каждой отрасли использование веб-сайтов и веб-приложений растет с каждым днем, и CSS является важной частью создания привлекательных веб-сайтов. Таким образом, существует огромный спрос на UI/UX и веб-дизайнеров, хорошо знающих CSS и HTML.
Frontend Головного Мозга

Личный ИИ ассистент знаний

Мик Вайсман запустил бета версию нового проекта Wise.Ai — персонального агента знаний.

🎁 БОТ ДОСТУПЕН ДЛЯ БЕТА-ТЕСТА.

Отправляйте Wise.Ai текст, ссылку на сайт либо ссылку на youtube, и он сделает из них summary в виде текста и в виде аудио, а так же сохранит в вашу личную базу знаний.

Также Wise.Ai позволяет с помощью ИИ находить информацию в личной базе знаний и отвечать на уточняющие вопросы на ее основе.

🎁 Чтобы получить БЕСПЛАТНЫЙ доступ к Wise.Ai:

✅ Подпишитесь на канал wisemantalks
✅ Поставьте «+» в комментариях под последним постом.

В следующих версиях будет добавлено:

⚜️ возможность сгенерировать подкаст из нескольких текстов;
⚜️ дать выбирать голос для сгенерированного подкаста;
⚜️ продвинутуые фильтры и поиск;
⚜️ web версию, чтобы просматривать свою базу знаний.

Подписывайтесь на канал и забирайте доступ к боту.

Что такое правило?
Правило, применимое ко всему листу, а не частично, называется правилом at. Ему предшествует @, за которым следует AZ, az или 0-9.
Frontend Головного Мозга

❗️Создайте свое приложение для прогноза погоды всего за 1 час

❓Хотите научиться создавать полезные приложения и работать со сторонними веб-сервисами?

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

- как работать с API сторонних веб-сервисов на примере создания приложения для прогноза погоды;
- основные принципы работы с API и их интеграции в проекты;
- как расширить функционал приложения и использовать больше браузерных инструментов.

🔥 Урок идеально подходит для тех, кто знает основы JavaScript (циклы, условия, функции, базовая работа с DOM).

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

👉Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://clck.ru/3Cy6JJ

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

Frontend Головного Мозга

Обязательны ли кавычки в URL-адресах?
Кавычки в URL-адресах необязательны и могут быть одинарными или двойными.
Frontend Головного Мозга

Что такое альтернативная таблица стилей?
Альтернативные таблицы стилей позволяют пользователю выбирать стиль отображения страницы с помощью меню «Вид»> «Стиль страницы». С помощью альтернативной таблицы стилей пользователь может увидеть несколько версий страницы в соответствии со своими потребностями и предпочтениями.
Frontend Головного Мозга

Frontend Головного Мозга

Определить селектор атрибутов?
Оно определяется набором элементов, величиной и ее частями.
Frontend Головного Мозга

🚀 Вебинар для frontend и JavaScript разработчиков! 🚀
👉 Узнайте, какими задачами проверяют ваше знание JavaScript на интервью.

Мы разберем типы задач, которые могут дать прямо во время собеседования, и обсудим, как к ним подготовиться.

Этот вебинар поможет вам лучше понять тонкости разработки, анализировать задачи и эффективно готовиться к интервью. Примеры задач, их анализ и способы подготовки – все это и многое другое!

📅 Дата: 22.08.2024 в 20:00
🔗 Присоединяйтесь и улучшите свои навыки JavaScript!
Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!

👉 Для участия и получения записи зарегистрируйтесь: https://clck.ru/3Cggyi

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

Как можно добавлять комментарии в CSS?
Комментарии в CSS можно добавлять с помощью /* и */.
Frontend Головного Мозга

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

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

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

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

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

👉 Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://clck.ru/3CezMx

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