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

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

#фронтенд #javascript #ux
Вы пользуетесь v0.dev?
Anonymous Poll
8%
Да
42%
Нет
50%
Хочу увидеть результат
This media is not supported in your browser
VIEW IN TELEGRAM
Естественно, 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
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Команда Google Chrome выпустила бесплатный учебник по веб-разработке

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

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

#курс
Media is too big
VIEW IN TELEGRAM
Сайт-портфолио нового уровня

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

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

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

#фронтенд #webgl #threejs #портфолио
This media is not supported in your browser
VIEW IN TELEGRAM
Наглядный совет, как создавать простые анимации с помощью CSS

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

#совет #css
Коллеги, записываем и применяем в работе
Не понимаю, как я это упустил: Microsoft раскатила расширение, которое превращает VS Code в полноценную IDE для работы с PostgreSQL, без переключений между тулзами 👍

Внутри всё, что нужно:
• Визуализация схемы базы прямо в IDE.
• IntelliSense с автокомплитом и подсветкой и форматированием SQL-запросов.
• Запуск PostgreSQL в Docker.
• Быстрое подключение к любой базе (локально, в облаке).
• История запросов для быстрого повторного запуска.
• Просмотр и управление объектами БД.
• История запросов и запуск psql прямо из VS Code.
• Интеграция с GitHub Copilot — AI пишет и объясняет SQL

Поставить можно тут
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Для амбициозных бакалавров и молодых специалистов

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

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

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

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

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

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

Реклама. АНО ВО "Центральный университет", ИНН 7743418023, erid:2Ranymrgjuj
Упрощаем работу с регулярками в JavaScript

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

#фронтенд #javascript #regexp
2025/07/06 03:54:09
Back to Top
HTML Embed Code: