Frontend Interview - собеседования по Javascript / Html / Css

Хочешь найти работу? Продай себя! Я написала трилогию из статей по поиску работы, в которых покажу, что надо делать, чтобы компании наняли именно тебя. В этой статье я дам тебе новый взгляд на найм и обучу инструментам, с которыми ты выделишься среди конкурентов. Во второй укажу на ошибки в твоём резюме и мы вместе их исправим, чтобы игнорировать и фильтровать тебя компаниям стало невозможно. В третьей расскажу всё, что знаю про продающую самопрезентацию, благодаря которой ты сможешь получить работу с хорошей зарплатой. План понятен? Хорошо. Осталась всего одна деталь! Чтобы моя статья действительно дала тебе пользу, представь: ты заплатил мне за неё 100 тысяч рублей и она написана специально по твоему заказу. Представил? Отлично, тогда продолжай читать внимательно, ведь деньги ты уже перевел. 👉 @frontendInterview

Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа. ⏰ Когда: 30 января в 19:00 по мск. Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»

Как задать начальные стили для элемента в момент его появления на странице? При вёрстке сайтов бывает нужно привлечь внимание пользователя к появлению элемента на странице. Например, плавно сменить цвет фона блока в момент загрузки сайта. Или сделать открытие диалога плавным и аккуратным. То есть необходимо осуществить переход из начального состояния элемента в основное. При этом сделать это нужно один раз и именно в момент появления элемента на экране. Чтобы сообщить браузеру, какие должны быть стили у элемента в его начальном состоянии, используется директива @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

Колледж + ВУЗ дистанционно в рассрочку от 40 000 в год Поступи в Колледж «Синергия»! — Учись в московском колледже, не выходя из дома. — Полностью дистанционный онлайн-формат. — Обучайся дома, на работе, в путешествии. — Поступление круглый год. — Диплом государственного образца. — Программа «колледж + вуз» без ЕГЭ. Рассрочка 0% на весь срок обучения. Перейти на сайт #реклама 16+ synergy.ru О рекламодателе

👉 @frontendInterview

Что должен знать каждый frontend-разработчик? Центр непрерывного образования факультета компьютерных наук НИУ ВШЭ приглашает на бесплатный вебинар, который поможет вам получить ответы на все возможные вопросы о старте карьеры в области frontend-разработки. На вебинаре обсудим: 〰️〰️〰️〰️ - Фронтенд-разработка: базовые концепции и перспективы индустрии - HTML и CSS: разметка и стилизация интерфейсов, принципы вёрстки и оформления веб-страниц - JavaScript: ключевые возможности для фронтенда - Минимальный набор знаний для стажёра и junior-разработчика: о чём вас спросят на собеседовании - Инструменты разработки: библиотеки и фреймворки, с которыми предстоит работать - Практика и ресурсы для обучения: где решать задачи и проходить контесты для оттачивания навыков Спикер: Семён Гурин, разработчик интерфейсов и бизнес-логики в Кинопоиске Когда: 30 января в 19:30 Зарегистрироваться на вебинар Реклама: НИУ ВШЭ ИНН 7714030726 Erid:2SDnjcX3ZLg

​Какие методы 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

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

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

👉 @frontendInterview

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

Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Как отрисовать компонент по условию? В 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

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

Офер в Яндекс для опытных фронтендеров за два дня 15–16 февраля приглашаем фронтендеров с опытом работы от пяти лет получить офер в Яндекс через multitrack за 2 дня. Достаточно пройти несколько технических секций 15 февраля, чтобы уже 16-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться. Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать. Узнать подробности и зарегистрироваться. Реклама. ООО "Яндекс". ИНН 7736207543

📌Есть только 2 способа стать JavaScript Senior: 1. Часами просматривать видео на YouTube, документацию и решать сложные задачи, так и не достигнув ощутимого прогресса. 2. Следить за каналом «JavaScript Senior» и сократить 70% времени на подготовку к собеседованиям и улучшение навыков! Получай полезные сниппеты, актуальные вопросы с собеседований и будь в курсе последних новинок – подпишись @JavaScriptSenior!

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

Дан одномерный массив. Его элементами могут быть значения разных типов, включая: 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

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