Поговорим о любви к фронтенду?

15 февраля встречаемся на самой большой конференции Яндекса для frontend-сообщества — «Я 💛Фронтенд».

В программе:

💛 Большая программа докладов — эксперты индустрии поделятся своим опытом

💛 Code in the dark — вместе с Семёном Левенсоном из Яндекс Маркета поучаствуете в соревновании по вёрстке и поймете, как интеллектуальный помощник разработчика Yandex Code Assistant меняет игру

💛 CodeRun — вместе с Никитой Дубко и Сашей Шинкевич из Контеста Яндекса познакомитесь с тренажером для прокачки скилла разработчика

А ещё не забываем про движ в онлайне — следите за обновлениями сайта с 4 по 14 февраля. Cегодня стартует первый стрим с Сергеем Бережным, директором по взаимодействию с разработчиками в Яндексе.

Смотрим онлайн и регистрируемся на ивент тут.

Читать полностью…

👉 @frontendInterview

Читать полностью…

​Что такое merge и rebase, в чем отличие друг от друга?

Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.

Merge (слияние)

Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.
Предположим, у вас есть две ветки: main и feature.
В ветке feature вы сделали несколько коммитов.
Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

Rebase (перебазирование)

Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов.
Предположим, у вас есть две ветки: main и feature.
В ветке feature вы сделали несколько коммитов.
Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

Основные отличия

История коммитов
Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.
Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.

Коммиты слияния
Merge: Создает новый коммит слияния, который объединяет изменения из двух веток.
Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую.

Конфликты
Merge: Конфликты решаются один раз при слиянии.
Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.

Применение
Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.
Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.

👉 @frontendInterview

Читать полностью…

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

Без сомнения, "Устойчивый веб-дизайн" является обязательным чтением для веб-дизайнеров и front-end разработчиков во всем мире. Тут собрана история и философия веба. Раскрыты идеи веб-разработки.

👉 @frontendInterview

Читать полностью…

​Что думаешь про SSR?

Server-Side Rendering (SSR) — это метод рендеринга веб-страниц на сервере перед их отправкой в браузер клиента. В отличие от Client-Side Rendering (CSR), где основная работа по рендерингу выполняется на стороне клиента, SSR позволяет создать HTML-код страницы на сервере и отправить его уже готовым для отображения в браузере.

Преимущества

Улучшение SEO:
- Поисковые системы могут более эффективно индексировать страницы, так как они получают полностью рендеренный HTML-код.
- SSR обеспечивает лучшую видимость для поисковых роботов, что важно для сайтов, ориентированных на SEO.

Быстрое время до первого отрисовки (First Paint):
- Пользователи быстрее видят начальное содержимое страницы, так как браузер получает готовый HTML.
- Это может улучшить восприятие производительности и снизить показатель отказов.

Социальные сети и предварительный просмотр:
- SSR упрощает создание мета-тегов и содержимого для социальных сетей, что позволяет правильно отображать предварительный просмотр страниц при их шаринге.

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

Недостатки

Увеличение нагрузки на сервер:
- Сервер должен обрабатывать и рендерить каждую страницу, что может требовать больше ресурсов по сравнению с CSR.
- Это может потребовать более мощного серверного оборудования или масштабирования для обработки большого трафика.

Увеличение времени отклика сервера:
- Рендеринг страниц на сервере может занять дополнительное время, особенно для сложных страниц с большим количеством данных.
- Это может привести к увеличению времени ответа сервера.

Сложность настройки и поддержки:
- Настройка SSR требует дополнительных знаний и усилий по сравнению с CSR.
- Поддержка и отладка SSR-приложений может быть более сложной из-за необходимости управлять состоянием на сервере и клиенте.

Гибридные решения могут быть сложными:
- Комбинирование SSR с CSR для достижения оптимальной производительности и функциональности (например, использованием технологии Hydration) может усложнить архитектуру приложения.

Примеры

Next.js для React:
- Популярный фреймворк, который облегчает создание SSR-приложений на основе React.
- Поддерживает гибридные приложения с SSR для начальной загрузки и CSR для последующего взаимодействия.

Nuxt.js для Vue.js:
- Фреймворк, предоставляющий мощные возможности для SSR с использованием Vue.js.
- Упрощает создание универсальных приложений с возможностью переключения между SSR и CSR.

👉 @frontendInterview

Читать полностью…

Крупнейший университет искусственного интеллекта

Приглашаем на бесплатный однодневный интенсив по AI!

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

✨ 8 000+ студентов со всего мира

✨ 600+ AI-проектов, созданных студентами

✨ Сборная Университета — победители крупнейших AI-хакатонов России

✨ Стажировки в крупнейших компаниях России (РЖД, Ростелеком, РУДН, Совкомбанк, Самолет и другие)

✨ Трудоустраиваем выпускников в крупнейшие компании (Яндекс, ВТБ, Сбербанк, Роскосмос и другие)

Будем рады видеть тебя в наших рядах!

Узнать больше

#реклама 16+
neural-university.ru
О рекламодателе

Читать полностью…

Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа.

⏰ Когда: 30 января в 19:00 по мск.

Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮

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

Какие JS фреймворки учить: Vue, React, а может, Angular?

Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.

🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»

Читать полностью…

Колледж + ВУЗ дистанционно в рассрочку от 40 000 в год

Поступи в Колледж «Синергия»!

— Учись в московском колледже, не выходя из дома.
— Полностью дистанционный онлайн-формат.
— Обучайся дома, на работе, в путешествии.
— Поступление круглый год.
— Диплом государственного образца.
— Программа «колледж + вуз» без ЕГЭ.

Рассрочка 0% на весь срок обучения.

Перейти на сайт

#реклама 16+
synergy.ru
О рекламодателе

Читать полностью…

Что должен знать каждый frontend-разработчик?

Центр непрерывного образования факультета компьютерных наук НИУ ВШЭ приглашает на бесплатный вебинар, который поможет вам получить ответы на все возможные вопросы о старте карьеры в области frontend-разработки.

На вебинаре обсудим:
〰️〰️〰️〰️
- Фронтенд-разработка: базовые концепции и перспективы индустрии
- HTML и CSS: разметка и стилизация интерфейсов, принципы вёрстки и оформления веб-страниц
- JavaScript: ключевые возможности для фронтенда
- Минимальный набор знаний для стажёра и junior-разработчика: о чём вас спросят на собеседовании
- Инструменты разработки: библиотеки и фреймворки, с которыми предстоит работать
- Практика и ресурсы для обучения: где решать задачи и проходить контесты для оттачивания навыков

Спикер: Семён Гурин, разработчик интерфейсов и бизнес-логики в Кинопоиске
Когда: 30 января в 19:30

Зарегистрироваться на вебинар

Реклама: НИУ ВШЭ ИНН 7714030726
Erid:2SDnjcX3ZLg

Читать полностью…

Break camelCase

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

Пример

"camelCasing"  =>  "camel Casing"
"identifier"   =>  "identifier"
""             =>  ""

👉 @frontendInterview

Читать полностью…

Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля

Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰
Научись ей бесплатно!

- Бесплатный доступ
- Разбор ДЗ от наставника
- Мощные кейсы в портфолио

Узнать больше

#реклама 16+
yudaevschool24.online
О рекламодателе

Читать полностью…

В сети поделились гениальным лайфхаком, как превратить свой месячный отпуск в двухмесячный

👉 @frontendInterview

Читать полностью…

📌Есть только 2 способа стать JavaScript Senior:

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

2. Следить за каналом «JavaScript Senior» и сократить 70% времени на подготовку к собеседованиям и улучшение навыков!

Получай полезные сниппеты, актуальные вопросы с собеседований и будь в курсе последних новинок – подпишись @JavaScriptSenior!

Читать полностью…

Дан одномерный массив. Его элементами могут быть значения разных типов, включая: undefined, null, boolean, string, number.

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

Массив может быть разрежённым (sparse array), то есть включать незаполненные элементы (empty slots).

Например, добавим к массиву array элемент с индексом 15:

array[15] = 'новый элемент'
console.log(array)
// [ 5, undefined, 0, false, '', null, true, 1, <7 empty items>, 'новый элемент']

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

В 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 до length и проверить отсутвие текущего индекса в качестве ключа. Однако есть способ ещё проще: итератор массива и методы, поверх него, используют только существующие ключи:

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

👉 @frontendInterview

Читать полностью…

👉 @frontendInterview

Читать полностью…

Будь на шаг впереди на собеседовании!

Если ты начинающий системный аналитик или только мечтаешь им стать, то наш канал - это именно то, что тебе нужно. Здесь мы делимся реальным опытом, практическими советами и всем, что поможет уверенно стартовать в профессии.

А чтобы твоя подготовка к первому собеседованию была максимально продуктивной, в закрепе тебя уже ждёт гайд "ТОП - 50 самых популярных вопросов на собеседовании системного аналитика".

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

Подписаться

#реклама 16+
О рекламодателе

Читать полностью…

🔥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

Промокод сообщества
react_crew_2_oMGfq4 даёт скидку в 500 руб 🥳

Читать полностью…

Binary Addition

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

Возвращаемое двоичное число должно быть строкой

Пример:

1, 1  //  "10" (1 + 1 = 2 in decimal or 10 in binary)
5, 9  //  "1110" (5 + 9 = 14 in decimal or 1110 in binary)

👉 @frontendInterview

Читать полностью…

Без опыта вы не найдёте работу в Москве на HeadHunter

Но есть выход: перспективную и престижную работу легко найти в канале «Москва: работа, вакансии, удаленка». Там собраны вакансии для молодых специалистов и тех, кто хочет совмещать учебу с работой.

Вы найдёте лучшие предложения от Яндекса, Сбера, Т-Банка и других крупных компаний, у которых офис в Москва-сити.

Уже нашли вакансию для тебя:
/channel/+FC6cg-3KYF43ZTRi

Подписаться

#реклама
О рекламодателе

Читать полностью…

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

👉 @frontendInterview

Читать полностью…

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

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

План понятен? Хорошо. Осталась всего одна деталь!

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

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

👉 @frontendInterview

Читать полностью…

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

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

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

Пример

.promo-block {
  transition: opacity 0.4s ease-in;
  opacity: 1;
}

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

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

👉 @frontendInterview

Читать полностью…

👉 @frontendInterview

Читать полностью…

​Какие методы http запросов знаешь ?

HTTP (HyperText Transfer Protocol) поддерживает множество методов запросов, каждый из которых предназначен для выполнения определенных действий на сервере. Вот основные методы HTTP-запросов, которые широко используются:

GET
Запрашивает данные с сервера.
- Не изменяет состояние сервера (идемпотентный).
- Параметры запроса передаются в URL.
- Кэшируется.
- Можно сохранить в закладках браузера.

GET /api/users?id=123 HTTP/1.1
Host: www.example.com

POST
Отправляет данные на сервер для создания ресурса или выполнения действия.
- Изменяет состояние сервера.
- Данные передаются в теле запроса.
- Не кэшируется по умолчанию.

POST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john.doe@example.com"
}

PUT
Отправляет данные на сервер для создания или замены ресурса.
- Идемпотентный.
- Данные передаются в теле запроса.

PUT /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john.doe@example.com"
}

DELETE
Удаляет ресурс на сервере.
- Идемпотентный.

DELETE /api/users/123 HTTP/1.1
Host: www.example.com

PATCH
Частично обновляет ресурс на сервере.
- Не является идемпотентным, хотя в некоторых случаях может быть.
- Данные передаются в теле запроса.

PATCH /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
  "email": "new.email@example.com"
}

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

HEAD /api/users/123 HTTP/1.1
Host: www.example.com

OPTIONS
Запрашивает поддерживаемые сервером методы для указанного ресурса.
- Идемпотентный.
- Используется для CORS-запросов, чтобы определить разрешенные методы и заголовки.

OPTIONS /api/users HTTP/1.1
Host: www.example.com

CONNECT
Устанавливает туннель к серверу, обычно используется для прокси-серверов.
- Не используется в обычных RESTful API.

CONNECT www.example.com:443 HTTP/1.1
Host: www.example.com

👉 @frontendInterview

Читать полностью…

Production Ready GraphQL

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

👉 @frontendInterview

Читать полностью…

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

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

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

Пример:

import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
        </div>
    );
};

export default MyComponent;

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

Пример:

import React from 'react';
const MyComponent = ({ showDetails }) => {
    return (
        <div>
            <h1>Item</h1>
            {showDetails && <p>Here are the details...</p>}
        </div>
    );
};
export default MyComponent;

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

Пример:

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

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

Пример:

import React from 'react';
const renderContent = (status) => {
    switch (status) {
        case 'loading':
            return <p>Loading...</p>;
        case 'error':
            return <p>Error occurred!</p>;
        case 'success':
            return <p>Data loaded successfully!</p>;
        default:
            return null;
    }
};
const MyComponent = ({ status }) => {
    return (
        <div>
            {renderContent(status)}
        </div>
    );
};
export default MyComponent;

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

Пример:

import React from 'react';
const MyComponent = ({ isLoggedIn, userName }) => {
    return (
        <div>
            {(() => {
                if (isLoggedIn) {
                    return <p>Welcome back, {userName}!</p>;
                } else {
                    return <p>Please log in.</p>;
                }
            })()}
        </div>
    );
};
export default MyComponent;

👉 @frontendInterview

Читать полностью…

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

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

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

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

Реклама. ООО "Яндекс". ИНН 7736207543

Читать полностью…

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

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

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

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

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

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

👉 @frontendInterview

Читать полностью…

Цифровизация бизнеса: советы из первых уст

Хотите идти в ногу с цифровыми трендами? В канале «Цифровизируй это» команда российского вендора корпоративного ПО VK Tech делится опытом и рассказывает, как технологии помогают бизнесу работать эффективнее.

Подписывайтесь, чтобы:

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

Будьте в курсе того, что движет бизнес вперед.

Подписаться

#реклама
О рекламодателе

Читать полностью…

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

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

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

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

Читать полностью…