Senior Frontend Developer | JavaScript, React, HTML & CSS
Kanalga Telegram’da o‘tish
Изучаем Frontend. По вопросам сотрудничества: @adv_and_pr Канал на бирже: https://telega.in/c/senior_front https://gosuslugi.ru/snet/67a461dcdc130259d5a631b8
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Senior Frontend Developer | JavaScript, React, HTML & CSS analitikasi
Senior Frontend Developer | JavaScript, React, HTML & CSS (@senior_front) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 19 988 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 6 629-o'rinni va Rossiya mintaqasida 33 485-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 19 988 obunachiga ega bo‘ldi.
08 Iyul, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -204 ga, so‘nggi 24 soatda esa -11 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 6.79% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 3.31% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 357 marta ko‘riladi; birinchi sutkada odatda 661 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 0 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent javascript, api, css, firebase, строка kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Изучаем Frontend.
По вопросам сотрудничества: @adv_and_pr
Канал на бирже: https://telega.in/c/senior_front
https://gosuslugi.ru/snet/67a461dcdc130259d5a631b8”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 09 Iyul, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
19 988
Obunachilar
-1124 soatlar
-567 kunlar
-20430 kunlar
Postlar arxiv
#вопросы_с_собеседований 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 используются «слабые» ссылки на ключи. Они не препятствуют работе сборщика мусора в том случае, если на объект, используемый в роли ключа, нет других ссылок.
JavaScript. Что будет выведено в консоль?
Ответ
#вопросы_с_собеседования
Что выведет на экран следующий код?
Ответ:
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
+2
Работа с 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 с меньшим количеством символов и более читабельным синтаксисом.
🌐Ссылка на код
