Frontend Interview - JS HTML CSS

Что делает 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

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

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

👉 @frontendInterview

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

МТС приглашает всех, кто пишет на С++, 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

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