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

Data Structures & Algorithms with JavaScript Хорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику. 👉 @frontendInterview

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 IT Новости — t.me/it_ready 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🐞 QA-тестирование — t.me/qa_ready 🖥 Data Science — t.me/data_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

​Что делает babel? Babel – это транспилер для JavaScript, который преобразует современный код (ES6+ и JSX) в старый, совместимый с более старыми браузерами. Поддержка старых браузеров Некоторые браузеры (например, Internet Explorer) не поддерживают новые фичи JavaScript. Babel переводит код на более старый стандарт, чтобы он работал везде. Поддержка современных стандартов (ES6, ES7, ES8...) Позволяет использовать новые возможности JavaScript, даже если браузер их пока не поддерживает. Компиляция JSX Babel преобразует JSX (используется в React) в обычный JavaScript. Оптимизация и эксперименты Можно использовать нестандартные предложения для JavaScript, такие как плагины для новых фич. Как это работает? Babel делает три шага: Парсинг – разбор кода в абстрактное синтаксическое дерево (AST). Трансформация – изменение AST (например, замена const на var). Генерация – создание нового кода из изменённого AST. Пример работы Babel Современный JavaScript (ES6+)

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Alice"));

После транспиляции Babel (ES5)

"use strict";

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Alice"));

👉 @frontendInterview

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Хватит писать «чистый» код. Пора писать понятный код Да, это очередная статья по чистому коду. Но по разным источникам, соотношение времени, затрачиваемого на чтение и написание кода, может достигать 7 к 1 и даже больше. Когда вы исправляете ошибку, добавляете новую функциональность или проводите рефакторинг, вы сначала погружаетесь в логику, написанную другими людьми (или вами же, но несколько месяцев назад). Именно поэтому читаемость кода становится более важным фактором, чем скорость его первоначального написания. Нечитаемый код — это технический долг, который замедляет всю команду и увеличивает стоимость разработки в долгосрочной перспективе. 👉 @frontendInterview

Разбираемся с SVG Path! SVG <path> — мощный, но сложный инструмент для создания кривых и фигур. Статья объясняет основы: как работает атрибут d, команды M (перемещение) и L (линия), и как они связываются в цепочку инструкций, словно рисование пером. Погрузитесь в интерактивное руководство и начните творить! 👉 @frontendInterview

👉 @frontendInterview

Поговорим про деньги в IT? Приглашаем опытных IT-специалистов пройти небольшой опрос про зарплаты и бенефиты в технологических компаниях. Это займёт не более 7 минут — а ваше мнение поможет одному крупному российскому работодателю делать актуальные оферы. Пройти опрос можно здесь

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

МТС приглашает всех, кто пишет на С++, Go, Python, JS, Java, C# и других языках, на True Tech Champ — всероссийский чемпионат по программированию. Соревнование будет проходить в двух треках. Трек 1. Алгоритмический. Индивидуальный зачет [призовой фонд 2 750 000 рублей] Реши задачи, которые помогут прокачаться в работе с алгоритмами и структурами данных. Похожие задания встречаются на собеседованиях в МТС и других крупных компаниях. До 240 лучших участников попадут в финал и сразятся в лайв-кодинге. Трек 2. Программирование роботов. Командный формат [призовой фонд 7 500 000 рублей] Проведи робота по виртуальному лабиринту, затем управляй им дистанционно на офлайн-полигоне, а в финале — пройди испытания на реальной площадке и выбей соперников с платформы. 🎁 Организаторы отправят командам финалистов по одному роботу Waveshare Cobra Flex для кастомизации. После соревнований они останутся у участников в качестве подарка. 📍 Зрелищный шоу-финал с ИИ-технологиями, кодерскими челленджами и выступлениями международных и российских спикеров пройдет 21 ноября в МТС Live Холл. Стоит участвовать, чтобы: — Освежить знания и прокачать новые навыки. — Заявить о себе на всю страну, получить карьерный буст и шанс лично пообщаться с HR-специалистами МТС. ⏰ Регистрация участников до 20 октября на сайте.

​Как можно создать уникальный ID? В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований: Генерация UUID UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx. Генерация с помощью crypto.randomUUID() (современный способ)

const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid

import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

Хеш-функции (SHA, MD5) Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции. SHA-256 через crypto.subtle

async function generateHash(input) {
    const encoder = new TextEncoder();
    const data = encoder.encode(input);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

Генерация случайного идентификатора Если нужна просто случайная строка, можно использовать Math.random(). Базовая генерация ID

const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()

function generateRandomId(length = 16) {
    const array = new Uint8Array(length);
    crypto.getRandomValues(array);
    return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

Инкрементальные ID Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик

let counter = 0;
function generateIncrementalId() {
    return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

Хеширование строки (например, объекта) Можно создать ID, основываясь на JSON-объекте.

function hashObject(obj) {
    return JSON.stringify(obj)
        .split("")
        .reduce((hash, char) => {
            return ((hash << 5) - hash) + char.charCodeAt(0);
        }, 0)
        .toString(16);
}

console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"

👉 @frontendInterview

Google Meet перестал работать в России: что дальше? 📞🏃‍♂️ Сперва в Telegram и WhatsApp заблокировали звонки, а теперь и Google Meet сбоит. Видеозвонки не проходят ни с телефонов, ни с ПК. Для бизнеса это означает: - сорванные онлайн-совещания и встречи с клиентами; - срыв собеседований и переговоров с подрядчиками; - потерю времени и простои в коммуникациях команд; - срочный поиск альтернативы для видеозвонков и онлайн-летучек. Что делать бизнесу, когда зарубежные сервисы один за другим перестают работать в России? ✅ В МТС Линк: видеозвонки, чаты, онлайн-доски и совещания без сбоев и ограничений 40 минут; дата-центры в России, соответствие 152-ФЗ и 149-ФЗ; готовые интеграции; русскоязычная техподдержка 24/7. Проверьте, подходит ли МТС Линк вашей компании Узнать больше #реклама 16+ mts-link.ru О рекламодателе

Loneliest character Создайте функцию, которая принимает строку из букв и пробелов. Верните букву, справа и слева от которой наибольшее число пробелов. Примеры:

 "a b  c"                        -->  ["b"]
 "a bcs           d k"           -->  ["d"]
 "    a b  sc     p     t   k"   -->  ["p"]
 "a  b  c  de"                   -->  ["b", "c"]
 "     a  b  c de        "       -->  ["b"]
 "abc"                           -->  ["a", "b", "c"]

👉 @frontendInterview

Mastering Reactive JavaScript Эта книга предназначена для опытных JavaScript разработчиков, ищущие новые инструменты и подходы к программированию, и рассказывает про основы реактивного программирования. В двух словах, реактивное программирование - это программирование на асинхронных потоках данных. Вы познакомитесь с основами данного программирования, паттернами и примерами реальных приложений. 👉 @frontendInterview

Аналитика без IT с Loginom: внедрение, кейсы, выгода Внедрять аналитику — это не обязательно сложно, дорого и с участием целого IT-отдела. Loginom позволяет запускать аналитические процессы силами бизнес-команд — быстро, без кода и долгих согласований. В нашем канале: ✅ Реальные кейсы компаний, которые справились без разработчиков ✅ Как автоматизировать отчётность, расчёт показателей и обработку данных в визуальном интерфейсе ✅ Пошаговые инструкции и готовые сценарии Loginom ✅ Чек-листы и материалы по быстрой настройке Loginom ✅ Только рабочие решения — без воды Подпишитесь, чтобы упростить аналитику и ускорить внедрение Подписаться #реклама 16+ О рекламодателе

Как реализуется ООП в JavaScript? JavaScript поддерживает объектно-ориентированное программирование, и многие из его функций и методов основаны на этом принципе. ООП в JavaScript основан на прототипах, а не на классах. Каждый объект имеет прототип, который является ссылкой на другой объект. Когда вы обращаетесь к свойству или методу объекта, JS ищет его в самом объекте, а затем в его прототипе, и так далее, пока не найдет нужный элемент или не достигнет конца цепочки прототипов. Наследование осуществляется также через прототипы. Когда вы создаете новый объект, вы можете указать его прототип, который будет использоваться для наследования свойств и методов. Вы также можете создавать новые объекты на основе существующих объектов с помощью метода Object.create(). JavaScript также поддерживает конструкторы, которые позволяют создавать объекты с помощью функций-конструкторов. Конструкторы могут использоваться для создания объектов с определенными свойствами и методами. 👉 @frontendInterview

POV: Увлёкся работой 👉 @frontendInterview