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

​Как можно создать уникальный 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

МТС приглашает всех, кто пишет на С++, Go, Python, JS, Java, C# и других языках, на True Tech Champ — всероссийский чемпионат по программированию. Соревнование будет проходить в двух треках.

Трек 1. Алгоритмический. Индивидуальный зачет [призовой фонд 2 750 000 рублей]

Реши задачи, которые помогут прокачаться в работе с алгоритмами и структурами данных. Похожие задания встречаются на собеседованиях в МТС и других крупных компаниях. До 240 лучших участников попадут в финал и сразятся в лайв-кодинге.

Трек 2. Программирование роботов. Командный формат [призовой фонд 7 500 000 рублей]

Проведи робота по виртуальному лабиринту, затем управляй им дистанционно на офлайн-полигоне, а в финале — пройди испытания на реальной площадке и выбей соперников с платформы.

🎁 Организаторы отправят командам финалистов по одному роботу Waveshare Cobra Flex для кастомизации. После соревнований они останутся у участников в качестве подарка.

📍 Зрелищный шоу-финал с ИИ-технологиями, кодерскими челленджами и выступлениями международных и российских спикеров пройдет 21 ноября в МТС Live Холл.

Стоит участвовать, чтобы:
— Освежить знания и прокачать новые навыки.
— Заявить о себе на всю страну, получить карьерный буст и шанс лично пообщаться с HR-специалистами МТС.

⏰ Регистрация участников до 20 октября на сайте.

Поговорим про деньги в IT?

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

Пройти опрос можно здесь

👉 @frontendInterview

Разбираемся с SVG Path!

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

👉 @frontendInterview

Хватит писать «чистый» код. Пора писать понятный код

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

👉 @frontendInterview

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

Data Structures & Algorithms with JavaScript

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

👉 @frontendInterview

Find numbers with 3 divisors

Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).

Пример:

solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8

👉 @frontendInterview

👉 @frontendInterview

📕Angular SSR за час: превращаем SPA в ракету
👤Подходит разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue)

На открытом уроке 2 декабря в 20:00 мск мы освоим внедрение SSR в приложение: серверный рендеринг, SEO-метаданные, работа с API и базовое понимание hydration:

📗 На вебинаре разберем:
1. Понимание базовой архитектуры SSR в Angular.
2. Понимание поведения приложения до и после hydration.

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

👉 Регистрация на урок и подробности о курсе Angular Developer: https://otus.pw/7qDN/

Все участники открытого урока получат скидку на курс "Angular Developer" с промокодом ANGULAR12

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

​CSS cвойство margin

Margin задаёт внешние отступы вокруг элемента. Эти отступы не являются частью ширины/высоты элемента при любом значении box-sizing.

Схлопывание
Вертикальные отступы схлопываются друг с другом, горизонтальные – нет. То-есть, если два <div> расположить в колонку (один под другим) и задать каждому margin: 20px 0, то расстояние между ними будет равняться 20px, а не 40px. При этом, если бы у верхнего элемента был задан отступ в 40px, а у нижнего - в 30px, то автоматически выбрался бы больший из них - 40px. Горизонтальные отступы при этом не схлопываются, а суммируются.

Отрицательные значения
Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.

В CSS есть другой способ добиться похожего эффекта – а именно position:relative. Но между ними есть одно принципиальное различие: при сдвиге через margin соседние элементы занимают освободившееся пространство в отличие от position: relative, при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».

👉 @frontendInterview

Верстаешь?

Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:

1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке от эксперта;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ даже без опыта.

А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова.

👉 Проскочить на интенсив бесплатно

Начинаем уже завтра.

🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.

Story Points или искусство делать ставку на выдуманные числа

Сегодня я хотел бы в очередной раз поднять тему оценки задач, а конкретно оценки при помощи Story Points. Хотя мы давно применяем их в работе, оказалось, что команда по-разному трактует детали. Поэтому мы решили систематизировать и выровнять наши знания, собрать хорошие практики по работе со Story Points и попробовать улучшить процедуру оценки задач у нас.

Результатом работы стал этот материал, которым я с радостью делюсь с вами. Он не претендует на откровения, но удобно собирает терминологию, практические советы и наш опыт — возможно, это сэкономит вам пару-тройку Story Points.

👉 @frontendInterview

Приглашаем на открытый вебинар “Использование декораторов в Backend (Nest.js, TS.ed) приложениях”
📅 8 декабря в 20:00

Если вы пишете backend на Node.js и хотите понять, как устроена современная архитектура на Nest.js - этот вебинар нельзя пропускать.

Декораторы - не «магия», а мощный инструмент TypeScript, который делает backend-код чище, структуру понятнее, а разработку быстрее. На занятии разберём, как они работают внутри, какие бывают типы декораторов и как их правильно применять в Nest.js и TS.ed.

Разберём на практике:
- что такое декораторы и зачем они нужны
- классовые, методные, property- и parameter-декораторы
- декораторы в Nest.js и TS.ed
- создание собственных декораторов
- типичные ошибки и как их избежать

Вебинар проходит на основе курса «Node.js Developer» - отличная возможность познакомиться с подходом обучения и примерить курс под свои задачи.

🎓 Регистрация открыта - подключайтесь и разберите декораторы по-настоящему, без мифов и магии: https://otus.pw/Vo0y/


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