Code Ready | Frontend

📂 Напоминалка по работе с числами! Например, .value у input всегда возвращает строку, из-за чего выражение вроде value + 1 превращается в конкатенацию. А parseInt() может неожиданно обрезать значение. На картинке — наглядное сравнение способов приведения к числу (parseInt, Number, +) и более удобного варианта через valueAsNumber, который сразу возвращает число. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы

☕️ Наткнулся на отличную статью на Хабре — создание форм входа и регистрации без единой строчки JavaScript! В статье: • Как с помощью HTML5 и CSS3 сделать переключение между формами через :target. • Стильные анимации и иконки через data-атрибуты. • Продвинутые стили форм и плавные переходы с использованием CSS3.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

Почему прыгает layout при открытии модалки? Когда появляется вертикальный скролл, браузер добавляет scrollbar — из-за этого меняется ширина viewport и интерфейс смещается. Особенно заметно при модалках и переходах.

body {
  overflow: hidden;
}

Убираешь скролл и layout резко сдвигается, потому что исчезает scrollbar. Есть нативное решение без JS:

html {
  scrollbar-gutter: stable;
}

Браузер резервирует место под скролл, даже если его нет (актуально для классического scrollbar):

html {
  scrollbar-gutter: stable both-edges;
}

Можно зафиксировать пространство с двух сторон, центрирование остается ровным. Работает в большинстве современных браузеров и сценариев (при overlay scrollbar эффект может быть незаметен). 🔥 В итоге layout больше не прыгает, интерфейс ощущается стабильнее и аккуратнее. 📣 Code Ready | #совет

🔥Стажировки и вакансии для IT специалистов - Вакансии которых нет на джоб-агрегаторах - Только прямые контакты HR в Telegram 🤖 ML & DS 👩‍💻 DevOps 👨‍✈️ ИБ & OSINT 👣 Go 👩‍💻 Mobile 👩‍💻 C# 👩‍💻 Node.js 👩‍💻 Python 🔎 QA 👩‍💻 Java 👩‍💻 UX/UI 👩‍💻 Frontend 🖼️ PHP 📋 Analyst 💼 1C 🖥 SQL 👩‍💻 IT HR Пока другие листают джоб-сайты — ты уже пишешь HR в Telegram.

👩‍💻 Нужно открыть PDF, не выходя из редактора? vscode-pdf — позволяет просматривать PDF-файлы прямо в VS Code: без сторонних приложений и переключений между окнами. Можно быстро открыть документацию, спецификации или инструкции и держать всё в одном рабочем пространстве. Удобно, когда работаешь с проектами, где часто приходится обращаться к PDF. 📣 Code Ready | #vscode

👩‍💻 Hover-превью без перерасчёта layout! В интерфейсах часто нужно показать дополнительную информацию при наведении. Проблема в том, что обычное раскрытие ломает layout и вызывает скачки элементов. Как работает:

• дополнительный слой размещается поверх через position: absolute; • основной контент остаётся на месте и не участвует в перерасчёте; • opacity и transform создают плавное появление; • взаимодействие не влияет на соседние элементы.

Такой подход используют в карточках, таблицах и dashboard-интерфейсах, где важно сохранить стабильность layout. 📣 Code Ready | #фишка

😳 С 500р я сделала 50.000 рублей за один день! Как? Чего? А я также смогу? Если приложите 2 часа свободного времени и желания учиться, то сделаете даже больше. 👍👍👍👍👍 И это не шутки. Анастасия — инвестор, которая создала свой приватный-канал, с помощью которого уже сегодня вы можете заработать целую зп за 1 день ❤️❤️❤️❤️❤️ От вас не нужно сверх способностей, она всем поможет и подскажет. Это полностью законный заработок и главное — стабильный Подписывайтесь, доступ даем ровно 24 часа, дальше удаляем. Один клик и обеспечь себе стабильный заработок на всю жизнь! 👇🏻

❤️ Design Resources for Developers — огромная база бесплатных ресурсов для UI и дизайна! В репозитории собраны сотни инструментов и материалов, которые помогают в дизайне: иконки, шрифты, цветовые палитры, иллюстрации, UI-киты, шаблоны, стоковые фото, генераторы, онлайн-инструменты и многое другое. Всё разбито по категориям, можно сразу найти нужный ресурс.

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

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

Почему 1fr ведёт себя не так, как ожидается? Многие думают, что 1fr — это занять всё доступное пространство. На практике трек с 1fr часто упирается в минимальный размер контента (min-content) и не сжимается как ожидается.

.grid {
grid-template-columns: 1fr auto;
}

Если в первой колонке длинный текст или input, она может не сжаться и вытолкнуть вторую колонку. Решение — явно разрешить колонке сжиматься:

.grid {
grid-template-columns: minmax(0, 1fr) auto;
}

minmax(0, 1fr) говорит браузеру: колонка может уменьшаться до 0, а не держаться за размер контента. Теперь ellipsis, overflow и адаптив работают корректно.

.title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Это особенно важно для layout с заголовками, таблицами, карточками и input-полями. 🔥 Если используешь 1fr, в большинстве случаев безопаснее писать minmax(0, 1fr) — это избавляет от скрытых багов в grid. 📣 Code Ready | #совет

🌅 На берегу Онежского озера в Карелии — бутик-отель «Заонежье» Здания из северного дерева и лемеха гармонично вписаны в ландшафт Русского Севера. Для гостей созданы 13 видовых номеров и 4 гостевых дома с каминами, ресторан «Руна» с локальной кухней, пирс, панорамный зал и экотропы. Любители активного отдыха могут отправиться на Кижи, порыбачить, выйти на каяке или катере, прокатиться на велосипеде по окрестностям или покорить местные пейзажи на квадроцикле. 🏆 Проект отмечен премиями LIV Hospitality Design Awards, Archiwood, ADD Awards и Rethinking The Future Awards. Первозданная природа и настоящий комфорт в одном месте. 🔗 zaonezhie.com · Telegram

👩‍💻 Хочешь показать кусок кода так, чтобы он выглядел аккуратно? Polacode — делает скриншоты кода прямо из VS Code: с подсветкой синтаксиса, темой редактора и оформлением. Просто выделяешь код и получаешь готовое изображение для поста, документации или презентации. 📣 Code Ready | #vscode

👩‍💻 Индикатор прокрутки страницы без JS! В длинных страницах важно давать пользователю понимание прогресса. Это снижает фрустрацию и делает чтение более предсказуемым. Как работает:

• animation-timeline: scroll() связывает анимацию с прокруткой; • transform: scaleX используется как процент прогресса; • transform-origin: left фиксирует точку роста; • вся логика реализуется декларативно, без событий scroll.

Это хороший способ заменить JS-обработчики нативными возможностями CSS. 📣 Code Ready | #фишка

Как frontend-разработчику получить оффер в Big Tech? Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные. Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK... Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.

В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️60 вопросов, которые точно помогут тебе на собеседовании ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid: 2W5zFG65hvH ИП Галактионов Тихон Витальевич, ИНН 771618975809

doka guide — сайт, на котором собраны шпаргалки по HTML, CSS, JS. На каждую тему есть подробный разбор с полезными советами по применению. 📌 Ссылочка: doka.guide 📣 Code Ready | #сайт

Доступ к вложенным свойствам по строке! Иногда путь к данным приходит динамически: из конфигурации, формы или API. Писать доступ вручную в таких случаях невозможно. Если ключ хранится строкой, можно превратить его в универсальный доступ через split + reduce:

path.split('.').reduce((o, k) => o?.[k], obj);

Каждый шаг берёт текущее значение и читает следующий ключ из пути:

'profile.name'.split('.') 
// ['profile', 'name']

А reduce проходит по этому пути и безопасно читает значения:

(o, k) => o?.[k]

Если на каком-то уровне свойства нет, optional chaining вернёт undefined без ошибки. Подход работает для простых путей через точку (a.b.c). 🔥 Это пригодится для dynamic access, form builders, JSON-парсеров, таблиц, конфигов и любых систем, где путь к данным неизвестен заранее. 📣 JS Ready | #совет

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. IT стажировки и волонтерства 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ

🐱 HTMLCheatSheet — интерактивная шпаргалка по JavaScript! Здесь собраны основные конструкции JS с готовыми примерами кода. Переменные, циклы, условия, массивы, строки, события, работа с датами и даже регулярные выражения. Главная фишка — это интерактивность: можно сразу копировать код, скрывать комментарии и использовать сайт как быстрый справочник во время работы. 📌 Оставляю ссылочку: htmlcheatsheet.com 📣 Code Ready | #сайт

Последовательные async-операции без лишней вложенности! Когда несколько асинхронных действий зависят друг от друга, часто пишут вложенные .then():

fetch('/data').then(r => {
  r.json().then(data => {
    fetch(`/more/${data.id}`).then(r2 => {
      r2.json().then(console.log);
    });
  });
});

Такой код быстро превращается в избыточную вложенность обработчиков. Решение — возвращать следующий Promise из .then():

fetch('/data')
  .then(r => r.json())
  .then(data => fetch(`/more/${data.id}`))

Каждый .then() получает результат предыдущего и передаёт дальше по цепочке, потому что возвращает Promise:

.then(r => r.json())
.then(console.log)

Ошибки ловятся централизованно в .catch(), если они произошли в цепочке или внутри .then():

.catch(console.error);

Важно: fetch не кидает ошибку на HTTP 4xx/5xx — в реальном коде проверяйте r.ok. 🔥 Такой паттерн делает асинхронный код линейным, убирает лишнюю вложенность и упрощает поддержку. 📣 JS Ready | #совет

Канал про ML в крупном бизнесе от Миши Евдокимова - предпринимателя, который делает AI-решения для Сибура, Ленты, Bayer и других крупнейших корпораций России ❤️ Про путь от Data Scientist’а до CEO: — Миша начинал как ML-разработчик в Сбере и VK, где создавал NLP и рекомендательные системы для аудитории в 60+ млн пользователей. — Затем был Data Scientist в РайффайзенБанке и дорос до Head of Data Science в крупной компании. — Сейчас СЕО AI-компании с командой 25+ человек, которая работает с российским крупным бизнесом. И реальные проекты и работу в сфере DS/ML: • Как вырасти с миддла до сеньора или почему крепкие миддлы сидят на месте по 5 лет • Как мы работаем с доверием к ИИ - проектам у компаний с оборотом $2+ млрд • Разбор российского рынка заказной ML - разработки - куда идет спрос и какие существуют тенденции Коротко и по делу. 👉🏻Подписывайтесь — Миша Евдокимов | Insight AI

📂 Напоминалка по иммутабельным методам! Например, array.push() изменяет исходный массив, а [...array, item] — создаёт новый без мутации. То же самое с sort(), reverse() и другими — у них есть безопасные аналоги вроде toSorted() и toReversed(). На картинке — 9 мутирующих методов и их иммутабельные альтернативы, которые стоит держать под рукой при работе с массивами. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы