Code Ready | Frontend

👩‍💻 Можно мгновенно прыгать из HTML к нужным CSS стилям прямо в редакторе! CSS Peek — плагин, который позволяет просматривать стили классов прямо из HTML, не открывая отдельные файлы. Идеально, если нужно быстро понять, какие стили применяются к элементу и не искать нужное в больших проектах. Все прямо в процессе работы. 📣 Code Ready | #vscode

📱 Сегодня рассматриваем ошибки! Шпаргалка по ключевым приёмам обработки ошибок: try, catch, finally, создание кастомных ошибок, логирование и работа с промисами. Подойдёт для надежного кода, валидации данных и отладки сложных сценариев. 📣 Code Ready | #шпора

Освой сети и командную строку с лучшими обучающими каналами 🤩 Network Admin - обучающий канал по сетевым технологиям 🤩 Network Admin | Guides - канал, где рассказывают полезную информацию про Windows/Linux 📱 BashTex - обучение работе с командной строкой

☕️ Codedex — прокачайся в веб-разработку с нуля! Сначала ты осваиваешь html/css. Затем завершаешь путь с react/p5.js - создаёшь динамичные приложения с использованием хуков и событий. Каждый этап сопровождается практическими заданиями, которые помогают закрепить полученные знания. 📌 Оставляю ссылочку: codedex.io 📣 Code Ready | #ресурсы

Простой парсер погоды с выводом текущей температуры! Напишем скрипт, который берет данные о погоде в вашем городе и выводит их в удобном виде. Задаем функцию, которая получает данные с API Open-Meteo:

async function getWeather(lat, lon) {
    const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`;
    const res = await fetch(url);
    return (await res.json()).current_weather;
}

Координаты вашего города (например, Москва):

const moscowCoords = [55.45, 37.37];

Выведем температуру и скорость ветра:

getWeather(...moscowCoords).then(weather => {
    console.log(`Температура: ${weather.temperature}°C, Ветер: ${weather.windspeed} км/ч`);
});

🔥 Получаем свежие данные о погоде — полезно для проектов или ботов! 📣 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 ГБ — Дизайн Материалы в закрепе, постоянно пополняются👆🏻

😎 CSS-Tricks — легендарный ресурс для фронтенд-разработчиков! Настоящая находочка для тех, кто пишет HTML, CSS, JavaScript, интересуется новинками Web API, продуктивностью и доступностью. Здесь регулярно появляются статьи, гайды и приёмы, которые реально прокачивают ваш фронтенд-скилл. 📌 Оставляю ссылочку: css-tricks.com 📣 Code Ready | #ресурсы

📱 Контекстное меню с кастомным поведением! Привет! В этом гайде создадим меню, которое появляется по правому клику мыши с кастомным дизайном. Ключевые моменты:

• HTML: контейнер и список элементов меню. • CSS: стиль меню и hover эффекты. • JS: обработка события contextmenu и позиционирование под курсором.

Подходит для интерактивных панелей управления, редакторов и UI с кастомной логикой. 📣 Code Ready | #гайд

👩‍💻 Мини-трюк с CSS — флип-карточки! В этом посте - эффектный приём, который позволяет переворачивать карточку при наведении только средствами html/css. Идеально подходит для подсказок или скрытого превью. Как работает:

• Используем контейнер с перспективой, чтобы задать 3D эффект. • Cоздаём «внутреннюю» обёртку, которая вращается. • Стороны карточки располагаем в одной плоскости и скрываем заднюю. • При наведении карточка поворачивается, открывая обратную сторону.

Приём легко кастомизируется: можно добавить текст, иконки или даже интерактивный контент. 📣 Code Ready | #фишка

📱 Осваиваем регулярные выражения! Эта шпаргалка по ключевым приёмам работы с RegExp: квантификаторы, группы, классы символов, флаги и проверки начала или конца строки. Подойдёт для валидации данных, парсинга текста и оптимизации поиска. 📣 Code Ready | #шпора

Кому-то сегодня в школу... ☕️

📱 Звёздный рейтинг с анимацией! Привет! В этом гайде создаём звёздный рейтинг, где каждая звезда — интерактивная кнопка, а подпись оценки меняется динамически. Ключевые моменты:

• HTML: кнопки <button> с data-value и aria-label. • CSS: hover-анимация, подсветка и масштабирование. • JS: подсветка, фиксация оценки и динамическая подпись.

Подходит для отзывов, профилей пользователей и интерактивных интерфейсов. 📣 Code Ready | #гайд

👩‍💻 Как сделать так, чтобы пользователь видел, на какие ссылки он уже кликал? Псевдокласс :visited добавляется ссылкам, по которым уже переходил пользователь. Возможные значения:

• color — можно задать отдельный цвет для посещённых ссылок. • background-color, outline, border-color — тоже разрешены.

Браузер отслеживает, по каким ссылкам на странице кликнул пользователь, и подставляет фантомный класс :visited тем из них, по которым был совершён переход на другую страницу. 📣 Code Ready | #свойство

👩‍💻 Мини-трюк — подсказка (tooltip) без JS! В этом посте разберем способ добавить аккуратную всплывающую подсказку к кнопке или иконке полностью на html/css. Пользователь получает мгновенный визуальный отклик при наведении. Как этой работает:

• Скрытый блок .tip появляется при наведении на .tooltip через селектор :hover. • Используем transform: scale() и opacity для плавного проявления подсказки. • Легко вставляется в формы, таблицы, интерфейсы и кнопки действий.

Такой приём улучшает UX без лишнего кода! 📣 Code Ready | #фишка

⚡️Бесплатное обучение фронтенд-разработке с нуля с личной поддержкой от наставника На канале Интенсивный JavaScript разрботчик и действующий тимлид помогает изучить фронтенд на практике Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду С 30 августа по 2 сентября он проводит бесплатный интенсив, где поможет разобраться во фронтенде с нуля Что получите на интенсиве ✅ Напишете свой проект на JS: сайт с аниме ✅ Узнаете, как вам сейчас попасть в сферу, каких ошибок избегать ✅ Что делать с ИИ: стоит ли заходить в ИТ, или уже поздно, и нас всех заменят ✅ и получите пошаговый план изучения фронтенда с нуля до трудоустройства или стабильных 50 тысяч на фрилансе Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка Подписывайтесь, осталось 27 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 📌 Если вы уже пробовали изучать фронтенд, но каждый шаг — это гуглинг, страдание и тысяча вкладок, — приходите на интенсив. Увидите путь от вёрстки до Angular и сможете продолжать изучать фронтенд без хаоса в голове. 👉Участвовать бесплатно 🔥Первый урок уже доступен

☕️ Нашёл годную статью на Хабре, в которой автор делится опытом создания кастомной альтернативы Google Таблицам и Excel В этой статье: • Реализована поддержка формул с использованием библиотеки HyperFormula; • Добавлено условное форматирование с учётом строгой типизации столбцов; • Интегрирован функционал построения графиков с использованием Chart.js; • Рассмотрены возможности кастомной интеграции в другие приложения и расширения функционала.

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

📣 Code Ready | #статья

👩‍💻 Добавляет заголовок полям ввода, сгруппированным при помощи <fieldset> Тег <legend> добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку. Особенности:

• Обычно отображается в начале рамки <fieldset> • Может содержать текст, HTML-форматирование или вложенные элементы. • Улучшает семантику и восприятие формы.

Так пользователи и вспомогательные технологии сразу видят, что поля относятся к одной группе. 📣 Code Ready | #атрибут

ЧЕБУРНЕТУ БЫТЬ!🤭

Медный купол по-немногу накрывает, а ты даже не знаешь как действовать?

Ниже даю список каналов спецов из сферы кибербеза, которые уже придумали все за тебя: HACK WARRIOR. – парни уже давно сели на измену и активно постируют контент на тему защиты своих личных данных в интернете, чтобы не сел ты. SecureSnake – канал безопасника однажды сильно пострадавшего от халатного отношения к своей интернет-гигиене. Собственно, поэтому и стал безопасником... INFOSEC LIZARD – твой личный криптонит от любых кибер-угроз в сети. Я бы не хотел, чтобы в будущем ты пожалел о том, что пролистал этот пост. Оставайся в безопасности.

☕️ CSS Layout Generator — реальная находочка для фронтенда! Быстрый и наглядный способ собрать Grid или Flexbox-layout: выбирай схему, настраивай параметры и сразу получай готовый CSS-код. Подходит для прототипов, адаптивных макетов и production-верстки. 📌 Ловите ссылочку: layout.bradwoods.io 📣 Code Ready | #ресурсы

📱 Сегодня разберем коллекции! Шпаргалка по ключевым методам Map, Set, WeakMap и WeakSet: создание, добавление, чтение, проверка и управление уникальными значениями. Подойдёт для эффективного хранения данных, приватных полей объектов и оптимизации структуры сложных приложений. 📣 Code Ready | #шпора