👩‍💻 Готовые шаблоны регулярных выражений!

Regex Snippets — расширение, которое добавляет набор готовых шаблонов регулярных выражений: проверка email, поиск чисел, валидация пароля, извлечение групп, работа с пробелами, датами, URL и др. Пишешь короткий префикс и получаешь готовый рабочий паттерн.

📣 Code Ready | #vscode

Как избавиться от подмен в типографике?

Когда кастомный шрифт не успевает загрузиться, браузер подставляет свой стандартный generic sans-serif. Это может испортить вид интерфейса:

body {
  font-family: "PT Sans", sans-serif;
}

Но ещё хуже, когда fallback вообще не задан, тогда интерфейс может внезапно превратиться в дефолтный serif (на Windows это часто Times New Roman):

body {
  font-family: "PT Sans";
}

Современный CSS даёт более аккуратный и предсказуемый вариант, используй system-ui, чтобы браузер подставил нативный системный шрифт ОС:

body {
  font-family: "PT Sans", system-ui;
}

🔥 Так даже если кастомный шрифт не загрузился, пользователь увидит чистую системную типографику - ту же, что в интерфейсе его устройства.

📣 Code Ready | #совет

Отменяем старые fetch-запросы — оставляем только актуальные данные!

В поиске, автокомплите и живых фильтрах ответы от сервера могут приходить не по порядку, из-за чего показывается не самый свежий результат. Один из простых и надёжных способов избежать этого — отменять предыдущий запрос через AbortController.

Проверяем поддержку:

console.log("AbortController" in window);

Делаем контроллер и отправляем запрос:

let controller;

function load(url) {
  if (controller) controller.abort();

  controller = new AbortController();
  return fetch(url, { signal: controller.signal });
}

Используем при вводе:

field.addEventListener("input", () => {
  load("/api/search?q=" + field.value)
    .then(r => r.json())
    .then(data => console.log("Актуальный ответ:", data))
    .catch(e => e.name === "AbortError" || console.error(e));
});

🔥 Такой приём устраняет гонки запросов, экономит сеть и гарантирует, что отображаются только последние данные — критично для поисковых полей и real-time UI.

📣 Code Ready | #практика

👩‍💻 Удобная работа с API внутри VS Code!

REST Client - расширение, которое превращает редактор в удобный инструмент для работы с HTTP-запросами. Можно тут же получать ответ от сервера. Плагин поддерживает переменные и окружения, так что можно хранить токены, URL или параметры для разных проектов и легко подставлять их в запросы.

📣 Code Ready | #vscode

🔥 Фронтенд будущего: ИИ-инструменты и Docs-as-Code в ЮMoney

Фронтендеры из ЮMoney поделятся опытом 6 декабря, онлайн, на бесплатной IT-конференции ЮMoneyDay, который помогает делать быстрее и качественнее:

🟣 Вайб-кодинг в финтехе: как мы используем ИИ-инструменты в ежедневных задачах, ускоряем проверку гипотез и возвращаем в работу творчество.

🟣 Docs-as-Code на фронтенде: почему выбрали Markdoc и как мы решаем практические задачи с помощью этого инструмента.

Подробнее о программе и регистрации — на сайте конференции ™️

Нативная проверка, находится ли элемент в зоне видимости!

Когда нужно показать подсказку только если элемент действительно в зоне просмотра, подсветить активный пункт меню, автоплейнуть видео или зафиксировать секцию — можно использовать нативный getBoundingClientRect().

Проверяем частичную вертикальную видимость элемента в зоне просмотра:

function isVisible(el) {
  const r = el.getBoundingClientRect();
  return r.top < window.innerHeight && r.bottom > 0;
}

Использование:

const box = document.querySelector(".box");
console.log("Виден:", isVisible(box));

Наблюдение за видимостью при скролле:

window.addEventListener("scroll", () => {
  if (isVisible(box)) {
    console.log("Элемент в зоне просмотра");
  }
});

Мини-вариант для группы элементов:

document.querySelectorAll(".item").forEach(el => {
  if (isVisible(el)) {
    el.classList.add("active");
  }
});

🔥 Подходит для ленивых анимаций, подсветки активных блоков и аналитики скролла. А если нужен более точный и энергоэффективный вариант — используйте IntersectionObserver.

📣 Code Ready | #практика

Нужны ChatGPT, Cursor, но дорого?

😎 Lama Agent — топовые модели (GPT-5, Claude, Gemini) внедряются прямо в IDE и пишут код за вас!
- 150 запросов в день(4500 в месяц)
- Всего за ₽699
- Доступен в ✴️ VS Code, 👩‍💻 JetBrains, ✴️ Claude Code, PyCharm

😲 Lama Bot — тг-бот с лучшими нейросетями!
- 150 запросов в день
- Всего за ₽499 в месяц (есть и бесплатные модели)
- Бери и пользуйся — быстро и без рекламы

😱 Lama AI — узнавай самым первым о последних новостях из мира AI, IT и гик индустрии. Цена — бесценно.

👩‍💻 Удобный способ унаследовать цвет текста родительского элемента!

currentColor — ключевое слово, которое берёт текущий color элемента и позволяет использовать его в других свойствах, например в рамке, тени или заливке.

Примеры использования:

• border: 2px solid currentColor; — рамка того же цвета, что и текст;

• box-shadow: 0 0 10px currentColor; — тень с цветом текста;

• fill: currentColor; — окрашивает SVG в цвет шрифта;

• outline-color: currentColor; — обводка совпадает с текстом.

Это полезно для упрощения стилей: если изменить color, все зависящие элементы автоматически обновят свой цвет.

📣 Code Ready | #свойство

👩‍💻 Стартовый экран на мобильных устройствах может занимать всё пространство без проблем!

На мобильных 100vh считает и адресную строку, поэтому блок получается выше видимой области, появляется лишний скролл:

.hero {
min-height: 100vh;
}

Современные браузеры дают точную единицу измерения — dvh:

.hero {
min-height: 100dvh;
}

🔥 В отличие от vh, 100dvh учитывает реальную доступную высоту без вмешательства UI браузера. Поддержка уже широкая, а где нужно, можно оставить vh как fallback.

📣 Code Ready | #совет

⚡️Слита База из 1000+ топовых курсов и материалов для айтишников

Отсортировали их для вашего удобства и выложили в телеграм-каналы по категориям:

🖥 Python — 1558+ материалов

👩‍💻 Frontend — 1241+ материалов

👩‍💻 Backend — 1095+ материалов

📊 SQL & Data — 978+ материалов

🤖 Нейросети – 855+ материалов

🎨 Веб-дизайн — 824+ материалов

📚 Книги по IT — 779+ материалов

Всё лучшее про IT бесплатно — уже на Базе 🚀