👍 W3Schools — простой старт для освоения веб-технологий!

Хочешь быстро понять базу по HTML, CSS, JavaScript, и др. Этот сайт отлично подойдёт как справочник и тренажёр. Материалы разбиты по небольшим блокам с примерами кода, которые можно сразу запустить в браузере, это помогает не просто читать, а реально видеть, как работает код. Идеально, когда нужно понять новую тему или быстро найти ответ на конкретный вопрос.

📌 Оставляю ссылочку: w3schools.com

📣 Code Ready | #ресурс

Отключаем тап-хайлайт (системный flash-эффект) для кнопок и ссылок!

На мобильных устройствах при тапе часто появляется серая/синяя подсветка, в кастомных UI это может выглядит как визуальный баг:

a, button {
  -webkit-tap-highlight-color: transparent;
}

Чтобы интерактивность не пропала, добавьте свой предсказуемый feedback:

a:active, button:active {
  opacity: .7; /* базовый tap-feedback, работает в продакшене для кликабельных элементов */
}

Нюансы: :active на iOS иногда капризен на нестандартных элементах, но для a и button, надёжный и простой вариант.

🔥 В итоге убираем системный flash и даём контролируемый feedback.

📣 Code Ready | #совет

👩‍💻 Пишешь на Next.js и устал каждый раз вручную набирать однотипные фрагменты?

Next JS/TS Snippets — расширение, которое даёт готовые сниппеты для самых распространённых конструкций: маршруты, API-роуты, компонентные страницы, layout, middleware и многое другое, причем сразу с TypeScript-поддержкой. Экономит время, уменьшает количество опечаток и делает разработку проекта куда быстрее и приятнее.

📣 Code Ready | #vscode

👩‍💻 Центрируйте что угодно без flex — через place-items или place-content!

Многие до сих пор центрируют так:

.box {
  display: grid;
  justify-content: center;
  align-content: center;
}

Работает, но можно короче:

.box {
  display: grid;
  place-content: center;
}

place-content: center центрирует весь контент сетки как блок по обеим осям.

Если хотите центрировать элемент внутри сетки (типичный случай для модалок и баннеров):

.box {
  display: grid;
  place-items: center;
}

А если центрируете конкретный grid-item:

.child {
  place-self: center;
}

Работает только если .child прямой наследник grid-контейнера (то есть grid-item).

🔥 Grid — для 2D-выравнивания, flex — для линейных потоков. Используй по задаче layout будет чище и предсказуемее.

📣 Code Ready | #совет

📂 Напоминалка для работы с CSS Grid!

Например, justify-items выравнивает элементы внутри ячеек по горизонтали, а align-items делает то же самое по вертикали.

На картинке — свойства и значения CSS Grid, которые действительно стоит держать под рукой.

Сохрани, чтобы не забыть!

📣 Code Ready | #ресурсы

Динамический импорт модулей в браузере (ES Modules)!

Браузеры давно поддерживают загрузку модулей в рантайме через import(). Это позволяет не грузить весь JS сразу: ленивые фичи, плагины, тяжёлые виджеты, админ-разделы SPA — всё подгружается по запросу и кэшируется как обычный ESM-модуль.

Базовый import в консоли:

import("/path/to/module.js")
  .then(m => console.log("Модуль загружен:", m))
  .catch(e => console.error("Ошибка загрузки:", e));

Импорт и сразу использование экспорта:

import("/path/to/math.js")
  .then(({ sum }) => console.log("Sum:", sum(2, 3)))
  .catch(console.error);

Ленивая загрузка по клику на конкретный элемент UI:

document.querySelector("#confettiBtn")?.addEventListener("click", () => {
  import("/path/to/confetti.js")
    .then(m => m.run())
    .catch(console.error);
});

Простая (приблизительная) проверка поддержки динамического import:

const supportsDynamicImport = (() => {
  try { new Function("import('data:text/javanoscript,')"); return true; }
  catch { return false; }
})();
console.log("Dynamic import support:", supportsDynamicImport);

Важно: import() асинхронный, UI не блокируется; ошибки обрабатываются в .catch(), модуль кэшируется браузером.

Короткий пример с обработкой ошибок:

import("/path/to/user-profile.js")
  .then(m => m.init())
  .catch(e => console.error("Ошибка загрузки модуля:", e));

🔥 Динамический импорт — простой способ держать код чистым, архитектуру ленивой, а старт страницы быстрым, используя стандартный JavaScript и нативный ESM.

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

👩‍💻 Пытаешься не потеряться среди сотен строк?

TODO Highlight — расширение, которое делает комментарии TODO, FIXME, NOTE и другие заметными прямо в файле, подсвечивая их. Помогает быстрее находить, что осталось доделать, придавая наглядность задачам.

📣 Code Ready | #vscode