Как переносить «висячие» слова с помощью JavaScript

Тексты, в которых на новой строке одиноко торчит «в», «на» или «и», сразу теряют в читаемости. В этой статье — короткий, но полезный приём: как с помощью JavaScript автоматически заменять пробелы после коротких слов на неразрывные и избавляться от висячих слов. Работает и для HTML-содержимого, и для Markdown. Минимум кода — максимум пользы для интерфейса и редактурной чистоты.

#фронтенд #javascript #ux

Естественно, Liquid Glass

Нашел интересный CodePen-проект: Apple со своим обновлением заставили сообщество переосмыслять Liquid Glass, не без этого. Автор реализовал такое с помощью пользовательского шейдера (shaderMaterial) на WebGL с помощью three.js.

Посмотреть код можно здесь: https://codepen.io/supah/pen/dPodbrX

#codepen #css #javascript
@tproger_web

Cloudflare призналась, что не может вернуть нормальную скорость работы в РФ

С начала июня сайты на Cloudflare начали открываться через раз или вообще не грузятся. Сегодня сама компания подтвердила: трафик в России упал на ~30%, страницы «обрезаются» после 16 КБ, а сделать с этим ничего нельзя...

По версии Cloudflare, трафик режут крупные провайдеры. Почему — неизвестно. Официальных писем от госструктур не было.

Так и живем.

@your_tech

Деплоим свой React-сайт, или что делать на сервере

Когда ваш первый сайт готов, и VPS арендован, появляются закономерные вопросы: как развернуть проект на домене? Пост подойдет новичкам, которые впервые привязывают что-то свое к домену.


Шаг 1. Стягиваем код

Сначала клонируем репозиторий проекта на VPS:

git clone https://github.com/username/repo-name.git
cd repo-name/

Если для запуска понадобится Node.js определенной версии, установим через официальный скрипт:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

После этого установим зависимости проекта (их указываем в package.json):

npm install

Если на сервере маловато оперативной памяти (например, минималка на 1-2 ГБ RAM) — может помочь добавление swap-файла:

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

Шаг 2. Настраиваем переменные окружения

Создаем файл .env в корне проекта. Админ использует условно бесплатную БД Supabase, потому шаблон состоит из таких средовых переменных:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

Обратите внимание на префикс NEXT_PUBLIC_ — он необходим, чтобы переменные стали доступны на клиенте в приложениях, построенных на Next.js.


Шаг 3. Собираем проект

Для деплоя нужна готовая сборка с оптимизированными файлами в папке build/

npm run build

Шаг 4. Автоматический запуск с PM2

pm2 — удобный менеджер процессов для Node.js, с его помощью каждый новый коммит будет «усвоен» автоматически. Устанавливаем глобально:

sudo apt install -y curl
sudo npm install -g pm2

Запускаем приложение через конфигурационный файл:

pm2 start ecosystem.config.js
pm2 save
pm2 startup

Последняя команда создаст автозапуск после перезагрузки сервера.


Шаг 5. Установка и настройка Nginx

nginx будет выступать обратным прокси и обеспечит работу по доменному имени. Устанавливаем:

sudo apt update
sudo apt install -y nginx

Создаём конфигурацию сайта:

sudo vim /etc/nginx/sites-available/helenkapatsa

Это стартовая версия конфиги. Адаптировать ее под свои нужды помогут документация и нейронки:

server {
    listen 80;
    server_name example.com www.example.com;

    location / {
        proxy_pass http://localhost:3000; # порт вашего React-приложения или PM2 процесса
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Активируем сайт и проверяем конфигурацию:

sudo ln -s /etc/nginx/sites-available/domain/etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Шаг 6. Получаем SSL-сертификат Let's Encrypt

Для безопасной работы сайта нужен сертификат. Установим certbot:

sudo apt install -y certbot python3-certbot-nginx

Добавим в доменном регистраторе (например, reg.ru) ресурсные записи:
A - @ - [IP-адрес сервера без портов]
А - www - [IP-адрес сервера без портов]

«Усвоение» записей обычно занимает не больше получаса.

Запустим получение сертификата:

sudo certbot --nginx -d example.com -d www.example.com

Certbot автоматически настроит Nginx на использование HTTPS. Его, правда, придется перегенерировать раз в 4 месяца. Но можно настроить и автообновление.

Бывает, что, несмотря на отсутствие правил файервола, блокирующих порты 80 и 443, генерация SSL-сертификата через Let's Encrypt падает. Это может быть связано с политиками хостинг-провайдера, NAT, или другими непрозрачными ограничениями.

Если столкнулись с такой проблемой, попробуйте сменить хостинг-провайдера — чаще всего это решает вопрос с выдачей сертификата.

Это последний шаг, теперь ваш сайт на домене, и у вас в копилке новая ачивка :)

#бэкенд #react
@tproger_web

Mobile‑first или Desktop‑first? Как выбрать с чего начать вёрстку

При запуске проекта важно определить: что приоритетнее — мобильный или десктопный интерфейс? Эта статья объясняет:

— Почему mobile‑first = UX для пальцев: удобство планшетов и смартфонов, индексирование Google.
— Когда desktop‑first выигрывает: дашборды, CRM, интерфейсы с насыщенным взаимодействием.
— Простые примеры медиазапросов (@media (min-width) vs max-width) и практические советы по написанию адаптивного CSS.

С чего обычно начинаете вы?

#фронтенд #css #адаптивность

SSE vs WebSocket: разобрались, что где лучше работает

В вебе есть множество способов обмена данными. Но наиболее популярные из них сегодня — SSE и WebSocket. При этом у них есть кардинальные различия. Например, SSE это односторонняя технология для общения сервера с клиентом, в то время как WebSocket позволяет взаимодействовать им в двухстороннем режиме.

Это и другие различия определяют цели, для которых технологии используются. Подробнее об этом и много другом можно прочитать в новой статье.

#sse #websocket

Совет для тех, кто любит сглаживать углы

Речь о вёрстке, разумеется. Если у вас есть элемент с внешним и внутренним радиусом углов, то они будут выглядеть лучше, если на внешний радиус поставить сумму внутреннего + размер отступа.

На картинке наглядно это показано.

#советы

Внимание, пересчёт пожилых программистов.

🫡 — мне 25+
🗿 — мне меньше 25, но я не готов стареть так рано

#простымисловами: Что такое srcset и зачем он нужен

Обычный атрибут src в теге <img> указывает одну-единственную картинку. Но что делать, если пользователи заходят с телефонов, ретина-экранов и 4K мониторов? Показывать одну и ту же версию — значит терять в качестве или перегружать страницу.

Вот тут и приходит на помощь srcset. С его помощью можно указать несколько вариантов одного изображения, а браузер сам выберет нужное под конкретный экран.

<img 
  src="image-400.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Пример адаптивного изображения">

🔍 Что здесь происходит:

— src — запасной вариант на случай, если браузер не поддерживает srcset.
— srcset — список изображений с их шириной.
— sizes — помогает браузеру понять, сколько пикселей реально нужно на экране.

В результате:

📱 На телефоне загрузится лёгкое изображение.

💻 На ноутбуке — среднее.

🖥 А на 4K-мониторе — чёткое и большое.

❗️ Важно: src обязателен, так как в браузере пользователя может отсутствовать поддержка srcset.

#фронтенд #html

Команда Google Chrome выпустила бесплатный учебник по веб-разработке

В нём собраны курсы по разным темам, нужным любому веб-разработчику: HTML, CSS, JS, PWA, Формы, тестирование и так далее. Главное, что платить ни за что не нужно.

Переходите по ссылке и стартуйте с любого курса: https://web.dev/learn?hl=ru

#курс

Сайт-портфолио нового уровня

Следите за мыслью. Что будет, если сделать интерактивный 3D-офис, в котором стоит с ЭЛТ-монитором, в который встроено нечто напоминающее Windows 95, в которой есть игры и браузер, в который встроен реальный сайт с портфолио? А получится проект Генри Хеффернана, созданный с использованием React, Three.js и WebGL.

Это не просто демонстрация возможностей разработчика, но и явная любовь и уважение к технологиям прошлого — тут воссозданы мерцание монитора, дрожание изображения и даже отпечатки пальцев на экране.

Заценить и оценить можно тут: https://henryheffernan.com

#фронтенд #webgl #threejs #портфолио

Наглядный совет, как создавать простые анимации с помощью CSS

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

#совет #css

Коллеги, записываем и применяем в работе

Для амбициозных бакалавров и молодых специалистов

Хочешь развиваться осознанно и расти в профессии и доходе? Выбирай высшее образование у сильных экспертов.

Центральный университет ведет набор на пять программ магистратуры по популярным ИТ-направлениям. Обучение с фокусом на практике: студенты используют актуальный софт и решают реальные задачи от бизнес-заказчиков.

Партнеры — ведущие компании на рынке РФ: ВТБ, Сбер, Т-Банк, Яндекс, Avito, Ozon, Х5 Tech и другие. 62% магистрантов ЦУ находят новую работу с ростом зарплаты в 1,6 раза уже на первом курсе. Средняя зарплата — 195 тысяч рублей.

Обучение можно совмещать с работой, а поступить — уже с третьего курса.

Выбери свое направление:
— Онлайн-магистратура по ML.
— Продуктовая аналитика.
— Машинное обучение.
— Продуктовый менеджмент.
— Backend-разработка.

И подавай заявку на поступление уже сейчас.

Реклама. АНО ВО "Центральный университет", ИНН 7743418023, erid:2Ranymrgjuj

Упрощаем работу с регулярками в JavaScript

RegExp может выглядеть как набор символов и скобок, но правильный подход — это чистый, понятный и протестированный код. Здесь собраны техники, которые помогут вам улучшить ваши навыки работы с регулярками и упростить их использование.

#фронтенд #javascript #regexp