Senior Frontend Developer | JavaScript, React, HTML & CSS

#вопросы_с_собеседований React Что будет, если вызвать this.setState в render методе компонента? Будут проблемы. React перерисовывает компонент, если state изменился. setState === ситуации «стейт изменился», а «React перерисовывает компонент» === render метод. Получается, что будет циклическая перерисовка.

Мигающие маяки Карта показывает маяки, запрашивая информацию из Overpass API. Написано на JS. https://github.com/geodienst/lighthousemap

Rating Experience Здесь автор стилизует input[type="range"]. Через JavaScript он задаёт классы, зависящие от значения инпута. Анимации созданы в CSS. https://codepen.io/ismailvtl/pen/abwZdrw

CSS Blossoming Flowers at Magical Night Анимированная сцена, написанная с помощью SCSS и JavaScript. Смотреть код

Scrubbing, scrolling and splitting Анимация при скролле, реализованная при помощи библиотеки gsap. https://codepen.io/BlogFire/pen/NWYRqmv

Rotating border Граница сделана из псевдоэлементов, которые анимируются в CSS. https://codepen.io/Chokcoco/pen/dypaobm

🖥 Frontend с нуля до трудоустройства Путь до Frontend-оффера — это не только обучение, но и собеседования, резюме и ATS-фильтры. И у большинства кандидатов проблемы повторяются на одних и тех же этапах. 💼 Мы собрали материалы для каждого шага: — ATS и разбор резюме — база реальных Frontend собеседований — задачи с собесов в BigTech — System Design для Frontend — инфраструктура больших приложений — сообщество фронтендеров — курсы по React, TypeScript и FSD

📍 В закрепе найдёшь материалы для каждого этапа пути до оффера.

👉 https://t.me/reactify_IT

Задача Дано натуральное число, необходимо преобразовать его в римскую запись. Римские цифры представлены семью разными символами: I - 1, V - 5, X - 10, L - 50, C - 100, D - 500, M - 1000 Справка: римские цифры обычно пишутся от наибольшего к наименьшему слева направо. Однако цифра четыре - это не IIII. Вместо этого число четыре записывается как IV. Поскольку единица стоит перед пятью, мы вычитаем ее и получаем четыре. Тот же принцип применяется к числу девять, которое записывается как IX. Вычитание используется в шести случаях: - I можно поставить перед V (5) и X (10), чтобы получилось 4 и 9. - X можно поставить перед L (50) и C (100), чтобы получилось 40 и 90. - C можно поставить перед D (500) и M (1000), чтобы получилось 400 и 900. Входные данные: n - натуральное число от 1 до 3000. Вывод: римская запись числа n. Ответ

#вопросы_с_собеседований Что такое Cross-Origin Resource Sharing (CORS)? Cross-Origin Resource Sharing (CORS) — механизм, использующий дополнительные HTTP-заголовки, чтобы дать возможность агенту пользователя получать разрешения на доступ к выбранным ресурсам с сервера на источнике (домене), отличном от того, что сайт использует в данный момент. Говорят, что агент пользователя делает запрос с другого источника (cross-origin HTTP request), если источник текущего документа отличается от запрашиваемого ресурса доменом, протоколом или портом. В целях безопасности браузеры ограничивают cross-origin запросы, инициируемые скриптами. Например, XMLHttpRequest и Fetch API следуют политике одного источника (same-origin policy). Это значит, что web-приложения, использующие такие API, могут запрашивать HTTP-ресурсы только с того домена, с которого были загружены, пока не будут использованы CORS-заголовки.

Обзор 10 приемов JavaScript для эффективного программирования 1. Объект Intl Объект Intl позволяет форматировать числа, даты и валюту с учетом разных локалей и параметров. Он предоставляется с множеством свойств, которые обеспечивают быстрое и безупречное форматирование данных. Рассмотрим пример форматирования валюты: let num = 100; let RupeeFormatter = new Intl.NumberFormat("en-IN", {style: "currency", currency: "INR"}) let RupeeFormatted = RupeeFormatter.format(num); console.log(RupeeFormatted) // ₹100 let USDFormatter = new Intl.NumberFormat("en-IN", {style: "currency", currency: "USD"}) let USDFormatted = USDFormatter.format(num) console.log(USDFormatted) // $100 2. Оператор ?? Оператор ?? присваивает переменной значение по умолчанию, если она null или undefined. Используйте данный оператор, если сомневаетесь в существовании у объекта того или иного свойства. Если свойство отсутствует, переменной присваивается значение по умолчанию. Пример: let user = {} let name = user.name ?? "Anonymous" console.log(name) // "Anonymous" 3. Object.fromEntries() Метод Object.fromEntries() преобразует массив пар “ключ-значение” в объект. Возьмем следующий массив и создадим из него объект, как показано ниже: let arr = [["name", "Alice"], ["age", 25]] let obj = Object.fromEntries(arr); console.log(obj) // {name: "Alice", age: 25} 4. Array.flat() Метод Array.flat() преобразует вложенный массив в один единственный. Поскольку вложенными массивами сложно управлять, то данный метод помогает уменьшать их вложенность. Пример: let arr = [1, [2, [3, [4]]]]; let flat = arr.flat(Infinity) console.log(flat) // [1, 2, 3, 4] 5. Оператор ? Оператор ?. обеспечивает доступ к свойствам объекта без проверки, является ли он null или undefined. Используйте его, когда не знаете, существует ли объект или нет. Пример: let user = null let age = user?.age console.log(age) // undefined 6. Array.reduce() Метод Array.reduce() применяет функцию к каждому элементу массива и суммирует результат в одно значение. Пример сложения всех чисел массива: let arr = [1, 2, 3, 4, 5] let sum = arr.reduce((a, b) => a + b) console.log(sum) // 15 7. String.repeat() Метод String.repeat() создает новую строку, повторяя заданную строку указанное количество раз. Пример: let str = "js".repeat(10) console.log(str) // 'jsjsjsjsjsjsjsjsjsjs' 8. Array.from() Метод Array.from() создает новый массив из массивоподобного или итерируемого объекта. Пример: let str = "Hello" let arr = Array.from(str) console.log(arr) // ["H", "e", "l", "l", "o"] 9. Math.hypot() Метод Math.hypot() находит квадратный корень из суммы квадратов его аргументов. Так, сумма квадратов 3 и 4 равна 25, а квадратный корень из 25 равен 5. Следовательно, Math.hypot(3, 4) возвращает 5. Пример: let hyp = Math.hypot(3, 4); console.log(hyp) // 5 10. Object.assign() Метод Object.assign() копирует значения всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект. Пример: let obj1 = {a: 1, b: 2}; let obj2 = {c: 3, d: 4}; let obj3 = Object.assign(obj1, obj2) console.log(obj3) // {a: 1, b: 2, c: 3, d: 4}

#вопросы_с_собеседований В чём разница между объектами Map и WeakMap? Эти объекты ведут себя по-разному в том случае, если переменная, содержащая ссылку на объект, являющийся ключом одной из пар ключ/значение, оказывается недоступной. После того, как завершается выполнение IIFE, у нас уже не будет доступа к объектам a и b. Поэтому сборщик мусора удаляет ключ b из weakmap и очищает память. А вот содержимое map остаётся при этом неизменным. В результате оказывается, что объекты WeakMap позволяют сборщику мусора избавляться от тех своих записей, на ключи которых нет ссылок во внешних переменных. Объекты map хранят пары ключ/значение вне зависимости от наличия или отсутствия внешних ссылок на ключи. То же самое можно сказать и о реализации структуры данных Map с использованием обычных массивов. В WeakMap используются «слабые» ссылки на ключи. Они не препятствуют работе сборщика мусора в том случае, если на объект, используемый в роли ключа, нет других ссылок.

#вопросы_с_собеседования Что выведет на экран следующий код? Ответ: 10 Пояснение: В функции b 3 аргумента, индексы которых начинаются с [0]. Таким образом, аргумент с индексом [2] — это a. В первой строке функции третьему аргументу функции присваивается значение 10.

Тестовое собеседование с руководителем Frontend-разработки в этот четверг 25 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Виталию Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

JavaScript. Что будет выведено в консоль? Ответ

JavaScript. Задача Дано игровое поле, которое задано матрицей m x n, где каждая ячейка представляет собой клетку корабля «X» или пустую клетку «.». Необходимо найти количество всех кораблей на игровом поле. Примечания: - Корабли можно размещать на игровом поле только горизонтально или вертикально - Два корабля разделяет по крайней мере 1 горизонтальная или вертикальная клетка. Входные данные: board — символьная матрица, содержащая символы ‘.’, ‘X’. Размер сторон матрицы от 1 до 100. Вывод: количество всех кораблей. Пример:

board = [
[‘X’, ‘.’, ‘.’, ‘X’],
[‘.’, ‘.’, ‘.’, ‘X’],
[‘.’, ‘.’, ‘.’, ‘X’]]

Output: 2

Ответ

Steam inspired game card hover effect Эффект блика в стиле Steam при наведении на игровую карточку, реализованный на чистом CSS. https://codepen.io/andrewhawkes/pen/RwwOJrO

День сурка frontend-разработчика Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что. Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь. И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.

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

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂 А в своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и отзывов, найти их можно в канале. Реклама, erid: 22W5zFGamjWy ИП Галактионов Тихон Витальевич, ИНН 771618975809

Работа с API сторонних сервисов в веб-приложении: Пример интеграции с OpenWeatherMap API Интеграция с API сторонних сервисов позволяет получать актуальные данные и расширять функциональность вашего веб-приложения. В данном примере мы рассмотрим интеграцию с OpenWeatherMap API, чтобы получать данные о погоде и отображать их на веб-странице. 📝 Пример кода: 1. Получение API ключа: Для работы с OpenWeatherMap API необходимо получить API ключ, который будет использоваться для авторизации запросов. Вы можете зарегистрироваться на сайте OpenWeatherMap, чтобы получить свой ключ API. 2. Создание функции для выполнения запросов к API, обработка данных и отображение на странице(Рисунок 1): 3. HTML-разметка и стили(Рисунок 2 и 3) В примере мы создали функцию fetchWeatherData, которая выполняет запрос к OpenWeatherMap API с указанием города и ключа API. Затем мы обрабатываем полученные данные и отображаем их на странице при помощи функции displayWeatherData. При нажатии кнопки "Search" происходит выполнение запроса и отображение данных о погоде для указанного города. Этот пример демонстрирует базовую интеграцию с API стороннего сервиса и может быть расширен для более сложной обработки данных или отображения.

Интерактивный кубик 3D В примере код создает интерфейс, который позволяет вращать 3D-кубик, нажимая на разные оси. Он использует CSS и Pug для создания графики и взаимодействия. CSS отвечает за стилизацию и анимацию кубика, а Pug - за генерацию HTML-кода. Pug - это шаблонизатор, который позволяет писать HTML с меньшим количеством символов и более читабельным синтаксисом. 🌐Ссылка на код