Король веб-графиков обновился

Только что вышел Apache ECharts 6

✓ Поддержка тёмного режима
✓ Улучшения в стандартной теме
✓ Новые кастомные типы графиков
✓ Смена темы без перезапуска UI

npm install echarts

@WebDev_Plus

Чтобы научиться программировать, нужно ПРАКТИКОВАТЬСЯ

Практические проекты на JavaScript с нуля

✓ Бесплатно
✓ Открытый исходный код
✓ Без зависимостей и фреймворков

https://www.javascript100.dev/

@WebDev_Plus

Это расширение для VS Code реально полезное

Оно позволяет сгенерировать структуру файлов вашего проекта в разных форматах — JSON, SVG, Markdown или ASCII, с иконками или без них

@WebDev_Plus

JavaScript-библиотеки, без которых тяжко

zod — валидация схем

day.js — работа с датами

tanstack-table — создание таблиц

auth.js — аутентификация пользователей

motion — анимации на JavaScript

fontsource — загрузка веб-шрифтов

chart.js — доступные HTML5-графики

zustand — глобальное управление состоянием

formkit-drag-and-drop — drag-and-drop

hotkeys-js — горячие клавиши

@WebDev_Plus

CSS-трюк для адаптивного iframe

Суть в том, что теперь не нужно извращаться с обёртками и padding-top для сохранения пропорций.

Достаточно прописать

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Что это даёт

До : высота iframe не меняется при изменении ширины, и видео обрезается или остаются пустые полосы

После : высота динамически подстраивается под заданное соотношение сторон при изменении ширины контейнера

aspect-ratio работает во всех современных браузерах и упрощает верстку адаптивных видео, картинок, карт и любых встраиваемых блоков.

@WebDev_Plus

Функции в CSS! Уже доступны в Chrome 139

/* Функции в CSS */

/* Возвращает полупрозрачный цвет */
@function --opacity(--color, --opacity) {
  result: rgb(from var(--color) r g b / var(--opacity));
}

/* Используем нашу функцию --opacity */
div {
  background: --opacity(blue, 80%);
}

/* Также можно использовать с кастомными свойствами */
.article {
  border-color: --opacity(
    var(--color-primary),
    var(--semi-transparent)
  );
}

Теперь можно создавать собственные функции прямо в CSS, передавать в них параметры и использовать вместе с custom properties

@WebDev_Plus

Новая библиотека графиков для React

✓ Компоненты в стиле copy-paste
✓ Работают на 100% на сервере
✓ Поддержка Tailwind 4

→ http://rosencharts.com

@WebDev_Plus

Доменные имена и что они реально значат

Расширение домена — это не просто случайное окончание. Оно формирует идентичность сайта, влияет на доверие и даже играет роль в SEO. Краткий гайд, чтобы выбирать осознанно

.com → коммерция, самое популярное и надёжное

.net → сети и тех-бизнес

.edu → образовательные учреждения

.org → некоммерческие организации

.mil → сайты армии

.gov → госструктуры

.info → информационные порталы

.arpa → интернет-инфраструктура

.int → международные организации

.mobi → сайты для мобилок

.travel → туризм и путешествия

.jobs → работа и карьера

.ca → Канада

.coop → кооперативы и объединения

Совет: правильный домен повышает доверие, улучшает позиции в поиске и сразу даёт понять пользователям, о чём твой сайт.

@WebDev_Plus

5 слоёв, из которых состоит софт

Неважно, пишешь ли ты веб-приложение, мобильную аппу, игру или встраиваемую систему
Обычно во всех системах встречаются одни и те же слои

① Интерфейс пользователя
Слой презентации, точка взаимодействия юзера с системой. Это может быть веб-страница (HTML, CSS, React), мобильное приложение (Swift, Kotlin, Flutter), десктопная программа (Electron, Qt) или даже консольный интерфейс.

② API (Application Programming Interface)
Открывает логику приложения и задаёт способ, как другие модули или сервисы будут с ним работать. Сюда относятся REST, GraphQL, gRPC, SOAP или WebSockets, а также локальные интерфейсы вроде библиотек, драйверов или SDK.

③ Бизнес-логика
Хранит правила и основную функциональность. Может быть реализована на Python, Java, C#, C++ или Go и разбита на дополнительные уровни (сервисы, контроллеры, use cases). Именно этот слой придаёт смысл приложению.

④ База данных
Отвечает за хранение данных. Это не только реляционные базы (MySQL, PostgreSQL) или NoSQL (MongoDB, CouchDB), но и in-memory хранилища (Redis), файлы, очереди сообщений или даже физические сенсоры во встраиваемых системах.

⑤ Инфраструктура
Слой исполнения. Это может быть облачный сервер (AWS, Azure, GCP), кластер Docker/Kubernetes, мэйнфрейм on-premise, мобильное устройство или специализированное железо. Здесь определяется масштабируемость, отказоустойчивость и доступность софта.

Иногда какие-то части могут отсутствовать, но чаще всего именно так выглядит структура.

Понимание этих слоёв помогает проектировать системы, которые будут надёжными и поддерживаемыми, будь то веб-приложение, видеоигра, ERP или прошивка для IoT-девайса.

@WebDev_Plus

Супер библиотека JavaScript для создания дашбордов

Панели можно таскать и менять размер

✓ Работает с React, Angular, Vue и чистым JavaScript
✓ Адаптивная и заточена под мобильные

> npm install gridstack

@WebDev_Plus

Ресурс для программистов, позволяющий создавать изометрические диаграммы вашей инфраструктуры или программного обеспечения.

Открытый исходный код: https://github.com/stan-smith/FossFLOW

@WebDev_Plus

Красивейший сайт. Анимации на высшем уровне.

http://makingsoftware.com

@WebDev_Plus

Хочешь рассылать массовые письма с сайта или приложения?
Этот сервер open source и полностью бесплатный.

✓ Отправка без лимитов и без оплаты
✓ Статистика открытий, кликов и возвратов
✓ Работает с AWS SES, Mailgun и другими SMTP

→ http://github.com/aaPanel/BillionMail

@WebDev_Plus

Лучший ресурс по паттернам проектирования в JavaScript.

С кейсами для React, Vue, Angular, TypeScript

Бесплатно, с упражнениями и пошаговыми примерами: https://www.patterns.dev/

@WebDev_Plus

Отличный ресурс для дизайнеров и разработчиков: больше 6000 бесплатных 3D-иконок, доступных для личного и коммерческого использования > https://www.thiings.co/things

@WebDev_Plus

Шпаргалка по основам CSS

@WebDev_Plus

Отличный каталог UI компонентов. Основан на shadcn, но не требует React.

Подходит для любого стека. Angular, Vue, React, Astro. Настраивается через Tailwind.

npm install basecoat-css

@WebDev_Plus

Дорожная карта JavaScript

Вы можете найти все туторы здесь - https://learnify.shefali.dev/tutorials/category/javascript

@WebDev_Plus