Добавляем питомцев прямо в редактор кода

Они не только бегают по экрану, но и могут указывать на ошибки в коде. А ещё поднимут настроение, если проект никак не хочет билдиться.

Устанавливается просто, как обычный плагин. Инструкция тут: https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

#vscode #плагины

Как искать работу в IT в 2025, не вызывая подозрений у санитаров

В отборе в IT страсти кипят не меньше, чем в хайлоаде. Вместе с Proglib мы провели исследование и спросили сотни айтишников: что реально выводит из себя в найме?

Собрали всё в удобный чек-лист:
– HR узнают, как не отпугивать сильных кандидатов.
– Айтишники поймут, где сразу маячат ред флаги и можно не терять время.

Надеемся, материал хоть и немного, но изменит процессы найма к лучшему. Поэтому сохраняйте, делитесь и прожимайте ❤️

Адаптивные изображения и подписи на CSS: сила container-queries и :has()

Теперь не обязательно «гадать», подгоняя стили картинок и подписей под медиазапросы — CSS получил мощные инструменты. В статье показано, как с помощью container-queries и :has() адаптировать изображения к размеру блока и менять расположение и стили элементов в зависимости от размеров экрана или блока. Примеры кода и пояснения помогут освоить эти новые фишки CSS уже сегодня.

#фронтенд #css #адаптивность

Есть тут криптаны?

Зачем нужна ARIA и как она помогает сделать веб-стайт более доступным

ARIA, или Accessible Rich Internet Applications — это спецификация, которая позволяет сделать веб-контент и сайты доступными для людей с ограниченными возможностями. В этой видео вы на простых примерах разберётесь с aria-ролями и aria-атрибутами:

https://youtu.be/oS5tmH8HtFw

#видео #aria

Когда сперва сделал десктопную версию и смотришь, как сайт открывается на мобилке:

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

#совет #css

Agile в сторону! Доверьте планирование своей жизни IT-колоде

Тем более что наши арканы уже приготовили для вас послание. Переходите по ссылке, вытаскивайте карту и узнавайте, что вас ждёт сегодня, завтра и в другие дни спринта: https://tprg.ru/JQef

Реклама

Смена секций по скроллу

Вы наверняка видели сайты, где при скролле происходит не плавная прокрутка, а замена секций сайта. Они либо наплывают друг на друга, либо трансформируются и так далее.

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

#видео #фронтенд

#простымисловами: Как устроен и зачем нужен async/await

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

async/await решает эту проблему. Это синтаксис, который позволяет писать асинхронный код в привычной пошаговой форме, но под капотом он остаётся неблокирующим.

Как это работает

Чтобы использовать async/await, достаточно объявить функцию с ключевым словом async. Это значит, что она всегда вернёт промис. Внутри такой функции можно применять await, чтобы дождаться завершения промиса перед выполнением следующей инструкции.

Пример:

async function fetchData() {
  const response = await fetch('/data.json');
  const data = await response.json();
  console.log(data);
}

Такой код легко читать и поддерживать — он идёт по шагам и не содержит вложенных .then() и .catch().

Преимущества по сравнению с коллбэками и промисами:

— Нет вложенных функций и «пирамид ада» из коллбэков.
— Ошибки можно обрабатывать привычным try/catch, как в синхронном коде.
— Логика программы остаётся линейной и предсказуемой.

Коллбэки и промисы по‑прежнему работают и подходят для некоторых случаев, но async/await значительно облегчает написание и поддержку асинхронного кода.

Если вы всё ещё используете цепочки .then() или длинные коллбэки — попробуйте переписать их с async/await. Код станет чище, а ошибки — легче отлавливать.

#javascript

Честный ресёрч найма в IT прямо с рынка

Вместе с Proglib мы разобрали, почему айтишники реально уходят с работы, по каким признакам вычислить токсичный коллектив и какие HR-трюки бесят разработчиков больше всего. Если ещё не читали — советуем это исправить❤️

Бонусом мы подготовили ещё два полезных лонгрида из этого исследования:
— Где искать работу в IT: лайфхаки и топ-площадки
— Каких разработчиков переизбыток и кому сейчас сложнее найти вакансию

Сохраняйте и кидайте коллегам!

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

Когда нужно показать локальный проект клиенту или протестировать вебхук от стороннего сервиса, поднимать полноценный сервер в интернете — избыточно. Ngrok решает эту задачу: за секунды пробрасывает туннель из интернета к вашему локальному серверу, выдавая публичный URL. Поддерживает HTTPS, защищённые токены, инспекцию трафика и работает на всех популярных ОС.

Так, вы можете безо всякого труда прямо в VS Code расшарить свой localhost, чтобы похвастаться другу или обсудить детали с клиентом.

#бэкенд #инструменты

Решаем судоку на JavaScript: хэш‑карты + рекурсия

Как заставить JavaScript разгадывать судоку? В статье показан простой и понятный подход: доска представляется в виде двумерного массива, а для проверки допустимости ходов используются хэш‑карты. Решатель построен на рекурсивном переборе возможных значений с откатом, пока не найдётся правильное заполнение всей сетки.

#javascript #алгоритмы

6 технологий для хранения данных в браузере

Данные пользователя можно хранить не только на сервере. В статье разобраны 6 актуальных способов сохранить информацию прямо в браузере: от привычных cookies и localStorage до более продвинутых IndexedDB, OPFS и WASM SQLite.

Плюсы, минусы и рекомендации для каждого варианта помогут выбрать подходящий инструмент для вашего проекта.

#фронтенд #браузер

Когда решил быстро навайбкодить что-нибудь

Как сделать кастомный Semi Donut Chart с помощью SVG

Semi Donut Chart — одна из форм представления отчётов в виде полукруглой диаграммы. Используется в том случае, когда важна не математическая точность, а наглядность.

Если вы хотите сделать интересный Semi Donut Chart без использования библиотек по типу Chart.js, то этот туториал для вас.

#vue #html #charts