Code Ready | Frontend

Проверяем интернет-скорость! Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет speedtest-net, который позволяет получить скорость загрузки, отдачи и пинга. Такой скрипт можно встроить в мониторинг или просто проверить сеть без браузера. Шаг 1 — импортируем:

const speedTest = require('speedtest-net');

Шаг 2 — запускаем тест:

(async () => {
  const res = await speedTest({ acceptLicense: true });
})();

Шаг 3 — форматируем и выводим результаты:

// Загрузка
console.log(`Download: ${(res.download.bandwidth / 125000).toFixed(2)} Mbps`);

// Выгрузка
console.log(`Upload: ${(res.upload.bandwidth   / 125000).toFixed(2)} Mbps`);

// Пинг
console.log(`Ping: ${res.ping.latency} ms`);

🔥 Теперь у тебя свой speedtest прямо в коде. Можно запускать вручную или добавить в cron для регулярного замера. 📣 Code Ready | #практика

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

👩‍💻 Добавляем подсказки в поля формы с помощью атрибута placeholder! Атрибут, который подсказывает пользователю, что именно нужно ввести в поле ввода (обычно это пример слова или фразы). А ещё значение атрибута исчезает, как только пользователь начинает вводить текст. Чаще всего используется с:

• <input> — для текстовых полей, поиска, email, телефона и других типов ввода; • <textarea> — для подсказок в многострочных полях.

Часто из-за дизайнерских решений placeholder используется для замены более семантического элемента метки. Однако это не означает, что текст-заполнитель может заменить <label>, поскольку это создаёт неудобства для пользователей с особыми потребностями. 📣 Code Ready | #атрибут

16 июля встречаемся с JS‑сообществом SberProfi в Сбер.Среде. AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее. 🔥 Обсудим изменения на реальных кейсах от Сбера, Cloud․ru и Mish. Очные участники увидят спецформат от блогеров и пообщаются с экспертами GigaCode и GitVerse. ⏳ Начало в 17:00, встреча очных гостей - в 16:00. Количество очных мест ограничено – успейте зарегистрироваться!

📂 Напоминалка для работы с Query Parameters! Например, get() позволяет получить значение параметра, set() обновить существующий параметр, append() добавить новый, а delete() удалить ключ вместе со всеми значениями. На картинке — основные методы URLSearchParams, примеры работы с параметрами запроса и базовые сценарии использования в современной web-разработке. Сохрани, чтобы не потерять! 📣 Code Ready | #ресурс

Как убрать лишние классы для пустых блоков? Часто в компонентах есть контейнеры для описания, ошибки, подсказки или дополнительного контента. Если данных нет — элемент остаётся пустым, но продолжает занимать место. Обычно это решают через JS или условный рендеринг.

.error {
  display: none;
}

А потом отдельно добавляют класс при появлении контента. Но CSS умеет определять пустые элементы самостоятельно.

.error:empty {
  display: none;
}

Теперь блок автоматически скрывается, если внутри ничего нет. Можно делать и обратную логику.

.card:not(:empty) {
  padding: 16px;
}

Отступы появятся только тогда, когда внутри действительно есть контент. Особенно удобно для:

error,
hint,
description,
badge

Где содержимое может появляться динамически. 🔥 :empty позволяет убрать лишние классы и часть условной логики прямо средствами CSS. 📣 Code Ready | #совет

❤️‍🔥"Это разъ*бный сетап, бро!" 😤 Так сказал мой друг из Африки, когда увидел этот стол) Не знаю уж че за сетап, меня зовут Саша и качественную необычную мебель из натурального дерева я делаю уже больше 12-ти лет, столько же занимаюсь и темой здоровья. Когда я услышал, что до 10% смертности связано с сидячим образом жизни, меня это поразило и я задался целью делать максимально функциональные и полезные рабочие пространства, ибо геморрой в 30 это конечно довольно нишево, но все же сомнительно 😂 Ну а собрать такой комплект под свои задачи и при этом сразу прикинуть цены вы можете в удобном Mini App конструкторе ➕

🤔 Awesome CSS — большая подборка ресурсов по CSS! Здесь собраны качественные статьи, инструменты, библиотеки и другие полезные ресурсы для работы со стилями. Особенно полезен тем, кто хочет лучше разобраться в современных возможностях CSS, быстрее находить решения для вёрстки и держать под рукой материалы. Хорошая база как для обучения, так и для повседневной разработки.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

Почему чтение offsetHeight иногда тормозит интерфейс? На первый взгляд кажется, что получить высоту элемента — это самая обычная операция. Ты просто читаешь свойство и получаешь число. Но внутри браузера всё немного интереснее. Например:

const box = document.querySelector('.box');

box.style.width = '500px';

console.log(box.offsetHeight);

Кажется, что мы просто изменили ширину и прочитали высоту. Но есть нюанс. После изменения DOM или CSS браузер не обязан сразу пересчитывать размеры элементов. Наоборот, современные движки стараются откладывать такие вычисления, чтобы не делать лишнюю работу после каждого изменения. Упрощённо это выглядит так:

box.style.width = '500px';

// браузер пока просто запомнил изменение

console.log(box.offsetHeight);

// здесь уже нужны реальные размеры,
// поэтому приходится пересчитать layout

Именно поэтому чтение некоторых свойств может заставить браузер синхронно обновить style и layout, если после изменений они ещё не актуальны. Например:

element.offsetWidth;
element.offsetHeight;
element.clientWidth;
element.clientHeight;
element.scrollHeight;

element.getBoundingClientRect();

Но важно понимать: сами по себе эти свойства не медленные. Если layout уже актуален, браузер просто вернёт готовое значение. Проблемы обычно начинаются, когда чтение размеров смешивают с изменением стилей внутри цикла:

const items = document.querySelectorAll('.item');

items.forEach(item => {
  item.style.height = '100px';

  console.log(item.offsetHeight);
});

На десяти элементах ты, скорее всего, ничего не заметишь. Но если их сотни или тысячи, можно получить forced synchronous layout — ситуацию, когда JavaScript заставляет браузер выполнять дорогие вычисления прямо во время выполнения скрипта. Особенно неприятно это становится в анимациях:

function animate(elements) {
  elements.forEach(element => {
    element.style.width = '200px';

    const height = element.offsetHeight;

    element.style.height = `${height}px`;
  });
}

Если такой код выполняется каждый кадр, браузеру приходится постоянно переключаться между изменением стилей и пересчётом layout. В результате главный поток занят вычислениями, а пользователь начинает замечать рывки и пропуски кадров. Поэтому один из самых простых приёмов — разделять запись и чтение. Вот так плохо:

items.forEach(item => {
  item.style.width = '200px';
  console.log(item.offsetHeight);
});

Лучше будет так:

items.forEach(item => {
  item.style.width = '200px';
});

items.forEach(item => {
  console.log(item.offsetHeight);
});

Так браузер сможет объединить изменения и выполнить один пересчёт вместо множества лишних. Для визуальных изменений также часто используют requestAnimationFrame, потому что он запускает код перед следующим циклом отрисовки браузера. Но сам по себе requestAnimationFrame не избавляет от layout thrashing. Если внутри его callback продолжать чередовать изменения DOM и чтение размеров, синхронные перерасчёты всё равно останутся. 🔥 Если коротко: проблема не в offsetHeight, а в том, когда ты его читаешь. После изменений DOM или CSS он может заставить браузер синхронно пересчитать layout. Именно чередование записей и чтений чаще всего становится причиной лишних тормозов. 📣 Code Ready | #практика

0nix — Новая экосистема для профи. Здесь не просто форум. Это готовая биржа, где заказчики находят исполнителей, а исполнители — живые деньги. 🛡Для кибербезопасников: Threat Intelligence, Осинтеров , Геоинтеров, Red Team, разработчиков инструментов. Ваша аудитория ждет ваши услуги. 💻 Для разработчиков и дизайнеров: Отдельные разделы с заказами на разработку, дизайн и графику. Портфолио — в топ! Условия для первых участников: Минимальные комиссии на сделки, быстрый арбитраж и модерация. Регистрируйся и забирай свою скидку на привилегии уже сегодня → 0nix.cc , 0nix.top

Генерируем UUID без библиотек! Очень частая задача: создать уникальный id для пользователя, заказа, файла или любой сущности. Раньше для этого почти всегда тянули библиотеки типа uuid.

import { v4 as uuid } from 'uuid';

Хотя в современном JavaScript это уже есть нативно.

crypto.randomUUID()

Метод сразу возвращает криптографически стойкий UUID v4.

const id = crypto.randomUUID();

Результат выглядит так: 36b8f84d-df4e-4d49-b662-bcde71a8764f Подходит для случаев, где нужен уникальный идентификатор: id сущностей, ключи записей, request/session id, временные идентификаторы. Для секретных токенов (reset password, API tokens) лучше использовать crypto.getRandomValues() или crypto.randomBytes(). В браузере работает в secure context — HTTPS или localhost. 🔥 crypto.randomUUID() — простой способ получать уникальные id. 📣 JS Ready | #совет

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.

В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.

И у тебя тоже получится 😎 У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме Подписывайся: https://t.me/+sgJCNZlkZtg4MzZi Реклама, erid: 2W5zFJSTc97 ИП Галактионов Тихон Витальевич, ИНН 771618975809

📱 Раскрывающийся блок FAQ без библиотек! Привет! В этом гайде соберём аккордеон для часто задаваемых вопросов — лёгкий и доступный. Ключевые моменты:

• HTML: семантическая разметка и aria-атрибуты для доступности. • CSS: плавное открытие/закрытие блоков без прыжков. • JavaScript: простой toggle и синхронизация с aria-expanded.

Полезный UI-паттерн, который улучшает читаемость и делает интерфейс чище. 📣 Code Ready | #гайд

Как сегодня оплачивают ChatGPT, Claude, Cursor и другие зарубежные сервисы из РФ? Через мутных ботов, ребят с Авито или сайты-прокладки. В итоге вы: — Переплачиваете 20–30% сверху при каждой оплате. — Отдаёте свои логины и пароли незнакомым людям. — Рискуете получить бан аккаунта из-за чужой карты. Картон убирает посредников. Теперь вы сами контролируете свои оплаты: • Выпускаете виртуальную карту прямо в Telegram за 3 минуты. • Пополняете криптой (USDT) или рублями через СБП. • Оплачивайте любые сервисы за 5 минут. Вы сами оплачиваете нейросети, хостинги, отели и любые подписки. Без левых комиссий. Apple Pay работает везде, где есть бесконтактная оплата. Пополнение и вывод рублей - бесплатно. Пополнение криптой - 2%. Карта — ваша, платите сами. Хватит кормить «помогаторов» и переплачивать за каждую подписку. Забирайте карту здесь: 👉 Открыть Картон 👉 Открыть Картон 👉 Открыть Картон Чтобы выпустить карту, надо перейти в канал и посмотреть закреп.

Почему innerHTML += иногда ведёт себя не так, как ожидаешь? На первый взгляд это выглядит как самый простой способ что-то добавить в DOM — вроде бы просто дописал кусок HTML и всё. Но внутри браузер работает не так, и из-за этого появляются странные эффекты, когда вроде ничего особенного не сделал, а поведение страницы меняется.

const list = document.querySelector('.list');

list.innerHTML += `
  <li>Новый элемент</li>
`;

По ощущениям просто добавили один li, но на деле браузер не дописывает HTML внутрь DOM. Он делает иначе: берёт текущее содержимое, сериализует его в строку, добавляет новый кусок и затем заново парсит HTML, пересоздавая DOM-узлы внутри контейнера. Упрощённо это примерно вот так:

list.innerHTML = list.innerHTML + `
  <li>Новый элемент</li>
`;

И уже отсюда становится понятно, почему начинают вылезать побочные эффекты. Допустим, у тебя есть кнопка с обработчиком:

button.addEventListener('click', () => {
  console.log('click');
});

container.innerHTML += `
  <div>Новый блок</div>
`;

После такого обновления DOM-поддерево контейнера заменяется новым. Визуально ты видишь тот же интерфейс, но старые узлы уничтожаются и создаются заново. Поэтому все обработчики событий, навешанные через addEventListener, на этих элементах теряются. Та же история с ссылками на элементы:

const item = document.querySelector('.item');

container.innerHTML += `
  <div>Новый блок</div>
`;

console.log(item.isConnected); // false

item остаётся в переменной, но к текущему DOM он уже не привязан. Он существует как объект, но находится вне дерева документа, потому что был заменён старый поддерево контейнера. И это особенно хорошо видно, когда начинаешь делать такие вещи в цикле:

for (let i = 0; i < 1000; i++) {
  list.innerHTML += `<li>${i}</li>`;
}

Каждый раз браузер берёт текущее содержимое, сериализует его, парсит заново и пересоздаёт DOM внутри контейнера. На маленьких объёмах это почти незаметно, но когда элементов становится много — начинает сильно тормозить, потому что ты постоянно пересоздаёшь одно и то же дерево. Поэтому в реальной практике так обычно не делают и используют более прямые DOM-методы.

const li = document.createElement('li');

li.textContent = 'Новый элемент';

list.append(li);

Тут уже всё проще: создаёшь узел и просто добавляешь его в DOM, без пересборки контейнера. Есть ещё вариант со строками, но без пересоздания всего содержимого:

list.insertAdjacentHTML(
  'beforeend',
  '<li>Новый элемент</li>'
);

Он вставляет кусок точечно в DOM, не пересоздавая существующие узлы, поэтому поведение стабильнее. Если нужно добавить много элементов сразу, обычно используют DocumentFragment, чтобы не дёргать DOM по сто раз:

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  fragment.appendChild(li);
}

list.appendChild(fragment);

Тут всё собирается в памяти и вставляется одной операцией, без промежуточных пересборок и перерисовок. 🔥 Коротко, суть в том, что innerHTML += — это не добавить элемент, как это выглядит интуитивно. Это скорее пересобери мне весь контейнер заново через HTML-строку и вставь результат. Поэтому в живых интерфейсах он иногда ведёт себя неожиданно и может неприятно влиять и на логику, и на производительность. 📣 Code Ready | #практика

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

👩‍💻 Можно ли вывести видео поверх всех окон на странице или даже за пределы браузера? Псевдокласс :picture-in-picture в CSS применяется к видео, которое находится в режиме «картинка в картинке». Он позволяет стилизовать элемент <video>, когда пользователь вынес его в плавающее окно поверх других приложений или вкладок. Как это используется:

• изменение оформления видео в PiP-режиме; • визуальная индикация активного режима воспроизведения; • адаптация интерфейса под плавающее окно.

Комбинируйте с соседними селекторами (~, +) и :has(), чтобы менять другие элементы интерфейса, пока видео в PiP. 📣 Code Ready | #свойство

⚡️ Айтишник из «VISION» скупил курсы айти школ и выложил гигабайты материалов к себе Каждый найдет что-то по душе: 1202 ГБ — Python 1811 ГБ — Frontend 1100 ГБ — C / C++ / C# 804 ГБ — Java 411 ГБ — SQL & БД 309 ГБ — DevOps 998 ГБ — ИБ & Хакинг 773 ГБ — Kotlin / Swift 189 ГБ — PHP 201 ГБ — GoLang 170 ГБ — Rust 167 ГБ — QA / Тестирование 310 ГБ — 1C + Лицензии 495 ГБ — Машинное обучение 704 ГБ — Аналитика Данных 991 ГБ — Дизайн Материалы в закрепе, постоянно пополняются👆🏻

Почему textarea часто ломает layout? По умолчанию textarea можно тянуть во все стороны. Пользователь легко может растянуть её по ширине и сломать grid, flex или весь form-layout. Обычно никто это не контролирует.

textarea {
  resize: both;
}

Из-за этого форма начинает разъезжаться, особенно в боковых панелях, модальных окнах и узких контейнерах. Лучше сразу ограничить направление resize.

textarea {
  resize: vertical;
}

Теперь пользователь может увеличить высоту, но ширина layout остаётся стабильной. Если resize вообще не нужен:

textarea {
  resize: none;
}

Это особенно полезно для сложных форм.

.modal textarea,
.sidebar textarea {
  resize: vertical;
}

🔥 Контроль resize убирает неприятные layout-баги в формах и делает UI заметно стабильнее. 📣 Code Ready | #совет

Надоело долбить LeetCode в пустоту? 🎮 Девстанция — это не очередной список задач. Это RPG для программиста: 🕸 Паутина вместо списка. Каждая задача — узел на графе. Открываешь одни — открываешь путь к другим. Панорамируешь, зумишь, видишь прогресс физически. Skill Tree в мире кодинга. 🏆 Сезоны. 180 дней на прохождение паутины. В конце — нагрды и подведение итогов. Каждый сезон — перерождение. Никто не стартует с форой. 🔥 Геймификация. Стрики, ежедневные челленджи, достижения, рейтинги за сегодня/вчера/неделю/сезон, графики активности — ощути прилив азарта. 👥 Лента событий. Видишь, кто только что решил задачу, кто взял золото дня, кто выбил ачивку. Ты не один в тёмной комнате. Первый сезон уже идёт. Заходи в паутину 🕸 👉 Решай задачи на dev-station.ru