Code Ready | Frontend

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

• HTML: минимальная структура с контейнером и анимируемым объектом. • CSS: градиентный фон, плавные переходы и современный дизайн. • JS: отслеживание wheel событий и применение CSS transform для вращения.

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

⏹️Новая специализация, о которой почти никто не знает: проще вход, ниже конкуренция, выше чеки В архитектурной сфере катастрофически не хватает разработчиков. Проектировщики и инженеры нуждаются в плагинах для софта, а программистов, которые умеют их писать, — единицы. Конкуренция минимальна, спрос растет, а чеки за проекты выше, чем в классическом аутсорсе. ▶️Освоив Revit API, вы сможете быстро войти в нишу, где каждый навык напрямую конвертируется в деньги. На курсе «Программирование в Autodesk Revit» от EdTech-платформы STEMPS вы научитесь: ➡️Писать плагины и инструменты на C# для инженеров ➡️Автоматизировать рутинные процессы и проверки моделей ➡️Создавать востребованный софт для архитектурных и проектных бюро 👤Автор курса — Дмитрий Смирнов, CTO DynamicLabs, STEMPS, Atomtech, Plancy. Разрабатывал системы автоматизации и SaaS-системы для компаний на 700+ сотрудников. 🗓 Старт курса — 23 сентября. 📍Студенты получат документ о повышении квалификации. 🔥Успейте записаться на курс со скидкой 10%: https://stemps.ru/

👩‍💻 Аннотации и надстрочные пояснения для текста! Тег <ruby> используется для аннотации иероглифов или других символов краткими пояснениями - чаще всего это чтение слов в азиатских языках. Внутри тега размещается основной текст и пояснение к нему. Как пишется:

• <rt> — текст подсказки (аннотация) • <rp> — дополнительный текст для браузеров, не поддерживающих <ruby> (чаще всего, круглые скобки)

Поэтому, используйте <ruby> только для небольших фраз или слов. 📣 Code Ready | #атрибут

⚡️ Бесплатное обучение фронтенд-разработке с нуля до Vue, Angular, React — с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 13 сентября стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать три фреймворка — Vue, Angular и React Вот план обучения: 💡 с 13 сентября напишете фронтенд для сервиса доставки 💡 с 18 сентября свой киносайт 💡 а с 24 сентября свою доску объявлений Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способами посика клиентов с поомщью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать, осталось 56 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 🟠Участвовать бесплатно

Проверяем интернет-скорость! Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет speedtest-net, который позволяет получить скорость загрузки, отдачи и пинга. Такой скрипт можно встроить в мониторинг или просто проверить сеть без браузера. Шаг 1 — импортируем:

const speedTest = require('speedtest-net');

Шаг 2 — запускаем тест:

(async () => {
  const res = await speedTest({ acceptLicense: true });
})();

Шаг 3 — форматируем и выводим результаты:

// Загрузка
console.log(`Download: ${(res.download.bandwidth / 125000).toFixed(2)} Mbps`);

// Выгрузка
console.log(`Upload: ${(res.upload.bandwidth   / 125000).toFixed(2)} Mbps`);

// Пинг
console.log(`Ping: ${res.ping.latency} ms`);

🔥 Теперь у тебя свой speedtest прямо в коде. Можно запускать вручную или добавить в cron для регулярного замера. 📣 Code Ready | #практика

👩‍💻 CSS-фишка: текст по окружности! Хотите, чтобы абзац не просто стоял рядом с картинкой, а огибал её по кругу? Это легко осуществить с помощью чистого CSS! Как работает:

• shape-outside: circle(); задаёт форму, вокруг которой обтекает текст. • clip-path: circle(); обрезает сам элемент, чтобы он выглядел круглым. • В итоге текст плавно повторяет форму круга, а не прямоугольника.

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

🤔 Слишком поздно заходить в IT в 2025? Врать не буду, скорее да, чем нет: за последние пять лет порог вхождения сильно поднялся, и теперь нередко от джуна требуют навыки грейдом выше. Что делать в такой ситуации? Учиться эффективнее остальных и знать, как подать себя на рынке других. Разобраться со всем этим вам поможет База Знаний — место, где за вас уже отобрали лучшие материалы по самым востребованным вакансиям: 🖥 Python Dev – 1558+ материалов 👩‍💻 Frontend Dev – 1241+ материалов 👩‍💻 Backend Dev – 1095+ материалов 📊 Data Scientist – 978+ материалов 🎨 UX/UI Designer – 885+ материалов 🤖 Нейросети – 824+ материалов 📖 Книги по IT – 779+ материалов Советую перейти и начать учиться уже сейчас — так уже через пару месяцев сможете претендовать на вакансию c хорошим окладом 👍

Создадим кастомное исключение в JS! Давайте напишем исключение, которое будет отрабатывать при передаче в функцию изменяемый тип данных (Array или Object): Делаем класс кастомного исключения:

class MutableError extends Error {
  constructor(functionName, argumentName) {
    super(`"${functionName}" использует изменяемый тип данных для аргумента "${argumentName}"`);
    this.name = 'MutableError';
  }
}

Реализуем функцию с проверкой типа данных:

function immutableCheckFunc(data) {
  if (Array.isArray(data) || (data !== null && typeof data === 'object')) {
    throw new MutableError(immutableCheckFunc.name, 'data');
  }
  // можно добавить любую логику
}

Проверяем работу кастомного исключения:

try {
  immutableCheckFunc([1, 2, 3]);
} catch (e) {
  console.error(e.message);
}

Результат:

"immutableCheckFunc" использует изменяемый тип данных для аргумента "data"

🔥 Теперь вы знаете, как реализовывать кастомные исключения в JS для защиты функций и данных! 📣 Code Ready | #практика

Он тимлид в российском бигтехе! Но ещё с универа мечтает о переезде в Лондон! Он отправил уже несколько тысяч откликов на вакансии! Позади — сотни собеседований и столько же отказов 😳 Какое-то время он даже жил в лесу, чтобы ничего не отвлекало его от подготовки к интервью. Он 14 лет в ИТ: писал сервисы, менеджерил команды, ломал монолиты и собирал новые 😅 Он видел всё — и даже то, чего не стоило бы видеть. Весь свой опыт, знания и советы он публикует в своём канале, говорит простым и понятным языком. Подпишись на его канал @artur_speaking Узнай первым о том, что тебя ждёт впереди, чтобы оставить конкурентов далеко позади, добраться до самых вершин карьеры — и наказать своих врагов и завистников 💀

👩‍💻 Можно мгновенно прыгать из 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 | #гайд