😎 CSS-Tricks — легендарный ресурс для фронтенд-разработчиков!

Настоящая находочка для тех, кто пишет HTML, CSS, JavaScript, интересуется новинками Web API, продуктивностью и доступностью. Здесь регулярно появляются статьи, гайды и приёмы, которые реально прокачивают ваш фронтенд-скилл.

📌 Оставляю ссылочку: css-tricks.com

📣 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 | #практика

☕️ Codedex — прокачайся в веб-разработку с нуля!

Сначала ты осваиваешь html/css. Затем завершаешь путь с react/p5.js - создаёшь динамичные приложения с использованием хуков и событий. Каждый этап сопровождается практическими заданиями, которые помогают закрепить полученные знания.

📌 Оставляю ссылочку: codedex.io

📣 Code Ready | #ресурсы

👩‍💻 Можно мгновенно прыгать из HTML к нужным CSS стилям прямо в редакторе!

CSS Peek — плагин, который позволяет просматривать стили классов прямо из HTML, не открывая отдельные файлы. Идеально, если нужно быстро понять, какие стили применяются к элементу и не искать нужное в больших проектах. Все прямо в процессе работы.

📣 Code Ready | #vscode

Создадим кастомное исключение в 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 | #практика

Проверяем интернет-скорость!

Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет 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 | #практика

👩‍💻 Аннотации и надстрочные пояснения для текста!

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

Как пишется:

• <rt> — текст подсказки (аннотация)

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

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

📣 Code Ready | #атрибут