Code Ready | Frontend

Озвучка текста на странице! Нативный JavaScript умеет читать вслух любой текст на странице, это часть Web Speech API. Начнём с базового: озвучим строку с помощью SpeechSynthesisUtterance.

const msg = new SpeechSynthesisUtterance("Привет, мир");
speechSynthesis.speak(msg);

Добавим функцию, чтобы переиспользовать и задавать любой текст:

function speak(text) {
  const msg = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(msg);
}

Теперь можно вызывать так:

speak("Текущая температура: 22 градуса и ясно");

Далее прикрутим к горячей клавише. Пусть Ctrl + R озвучит рандомный совет:

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "r") {
    speak("Не забывай пить воду и делать перерывы");
  }
});

🔥 Голосовой ассистент в одну строчку готов. Можно подключать к уведомлениям, ботам, виджетам — или просто добавить в пасхалку на сайте. 📣 Code Ready | #практика

«О безопасности подумаем позже» — так рассуждают многие специалисты в погоне за быстрым релизом. Но такая спешка создает слабые места в коде, которые рано или поздно приводят к инцидентам. 18 сентября на техническом вебинаре «Когда разработчику нужно задуматься об ИБ? Observability безопасности» обсудим: 🛡 Ред флаги в работе программистов.  🛡 Обеспечение безопасности на каждом этапе SDLC. 🛡 План действий для непосредственного первого звена в цикле разработки. Также покажем, как платформа GMonit позволяет выстроить непрерывный процесс мониторинга приложений и находить уязвимости. ⏰ Время встречи: 17:00–18:00 (Мск) 🔗 Регистрация по ссылке!

😎 YeaHub — база знаний по всем IT-направлениям! Здесь собрана огромная база реальных вопросов по бэкенду, DevOps, Data Science и другим направлениям. Всё структурировано по темам и приближено к формату собеседований в компаниях. Это именно тот ресурс, который нужно держать под рукой! 📌 Оставляю ссылочку: yeahub.ru 📣 Code Ready | #ресурсы

☕️ Чуть не забыл, знали, что каждый 256-й день в году отмечается День программиста? И как раз сегодня — этот самый день! Кстати, 256 не с проста:

Это 2 в степени 8, то есть максимальное количество значений, которые может хранить один байт — основа работы компьютеров. В невисокосный год праздник выпадает на 13 сентября, а в високосный — на 12-е.

Так что, поздравляю всех программистов! ❤️

📱 Разберём ключевые методы работы с датами! В этой шпаргалке собраны основные приёмы для получения текущего времени, создания и форматирования дат, извлечения года, месяца, дня, а также локализованного отображения. Они применяются при построении UI, работе с временными метками и форматировании данных для пользователей. 📣 Code Ready | #шпора

Программисты из Telegram создали сильнейшие IT- каналы 🐍 Ghostly Python - автоматизируй всё, что можешь. Боты, скрипты, парсеры, утилиты - делаем Python простым и полезным. Уверенный старт для новичков и не только. ☕️ Easy Java - Java без боли. От основ до фреймворков. Просто, понятно и по делу. Если хочешь реально понять язык - тебе сюда. 😎 IT Syndicate - главный хаб для тех, кто живёт IT. GameDev, InfoSec, Frontend, DevOps, AI и многое другое. Готовь мозг, тут будет жарко. 🧡 Ghostly Frontend - фронтенд без лишнего шума. HTML, CSS, JavaScript, React, Vue — всё, что нужно, чтобы создавать быстрые и красивые интерфейсы.

Меняем громкость системы в Node.js Иногда нужно программно изменить громкость на устройстве, поставить 100%, выключить звук или приглушить. Это можно сделать через вызов системных команд. Пример кода (для Windows):

const { exec } = require("child_process");

exec("nircmd.exe setsysvolume 65535"); // 100% громкости

Для Linux:

exec("amixer sset Master 50%"); // 50% громкости

Для macOS:

exec("osascript -e 'set volume output volume 30'"); // 30% громкости

🔥 Эти команды можно встроить в оповещение, автонастройку при запуске или управление медиа. 📣 Code Ready | #практика

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

• 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