Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Это захватывающая 2D рогалик, аркадный шутер и динамичная игра. Исследуйте уникальные уровни, уничтожайте врагов, собирайте монеты и прокачивайте своего персонажа.

Подземелье дизлайков

Экшены, Аркады, Шутер

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Верстка + Программирование

С этим тегом используют

HTML CSS IT Дизайн Сайт Frontend Программист IT юмор Разработка Python Картинка с текстом Юмор Все
104 поста сначала свежее
3
user10424664
user10424664
13 дней назад

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

Как переносить «висячие» слова на новую строку с помощью JavaScript Разработка, Программирование, Javascript, Типографика, Uxui, Ui, Ux, Frontend, Верстка, IT, Программист, Telegram (ссылка), Длиннопост

изображение сгенерировано в ChatGPT

В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.

Решение проблемы с помощью JavaScript

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

// Перенос висячих слов

document.addEventListener('DOMContentLoaded', function () {

// 1. Находим все текстовые элементы, которые нужно обработать

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

// 2. Список предлогов и союзов, которые нельзя переносить

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

// 3. Функция для обработки каждого элемента

textElements.forEach(element => {

// Получаем все текстовые узлы внутри элемента

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

const textNodes = [];

while (walker.nextNode()) {

textNodes.push(walker.currentNode);

}

// Обрабатываем каждый текстовый узел

textNodes.forEach(textNode => {

let text = textNode.nodeValue;

// Заменяем пробелы после коротких слов на неразрывные пробелы

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

// Проверяем, есть ли слово в списке предлогов

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

return match;

});

// Обновляем содержимое текстового узла

textNode.nodeValue = text;

});

});

});


Разбор кода по частям


1. Инициализация скрипта

document.addEventListener('DOMContentLoaded', function () {

Код выполняется после полной загрузки DOM-дерева страницы. Это гарантирует, что все элементы будут доступны для обработки.


2. Поиск текстовых элементов

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

Скрипт находит все основные текстовые элементы на странице: параграфы, заголовки, элементы списков и другие. Вы можете расширить этот список, добавив другие селекторы.


3. Список коротких слов

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

Массив содержит наиболее распространённые предлоги, союзы и другие служебные слова русского языка, после которых нежелательны переносы.


4. Обход текстовых узлов

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

TreeWalker позволяет пройти по всем текстовым узлам внутри элемента, включая вложенные теги. Это важно, так как текст может содержать форматирование (, и т.д.).


5. Регулярное выражение для замены

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

Регулярное выражение ищет:
· (^|\s) — начало строки или пробел (группа 1);
· ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2);
· \s — пробел после слова;
· Флаги gi означают глобальный поиск без учёта регистра.


6. Условная замена

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

Если найденное короткое слово есть в списке предлогов, обычный пробел заменяется на неразрывный пробел (\u00A0). Это предотвращает разрыв строки между предлогом и следующим словом.


Результат работы

После выполнения скрипта текст “Я иду в магазин” не будет разорван на строки как “Я иду в” и “магазин”. Предлог “в” всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.

Настройка скрипта

Вы можете легко адаптировать скрипт под свои нужды:
· Добавить новые селекторы в querySelectorAll() для обработки других элементов;
· Расширить список слов в массиве prepositions;
· Изменить длину слов в регулярном выражении с {1,2} на другое значение;
· Добавить обработку других языков, изменив диапазон символов в регулярном выражении.

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

P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.


Разработчики, а как вы решаете вопрос переноса «висячих» слов?

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

Показать полностью 1
Разработка Программирование Javascript Типографика Uxui Ui Ux Frontend Верстка IT Программист Telegram (ссылка) Длиннопост
13
VibeCoder
VibeCoder
1 месяц назад

Вайб-кодинг: как это работает⁠⁠

Привет, кодеры и продукт-манагеры 👋

Решил показать короткое видео как работает вайб-колинг, на примере написания и верстки 5 статей 👇

Хронометраж оригинала видео - 5 минут.

Цена написания и верстки 5 статей, по 5к символов каждая - менее 10 рублей. Это просто пушка-бомба 💣

Показать полностью
ChatGPT DeepSeek Искусственный интеллект Программирование Код Верстка Видео Без звука
0
13
user10748526
1 месяц назад

Профессиональные риски у верстальщиков⁠⁠

Профессиональные риски у верстальщиков

Когда хочешь узнать почему нет новостей о проекте.

[моё] Программирование Верстка Алкоголизм Проект Капельница Работа Увы Неожиданно Удаленная работа Коллеги Витамины
2
Партнёрский материал Реклама
specials
specials

Считаете себя киноманом 80 LVL?⁠⁠

Залетайте проверить память и сообразительность → Будет интересно

Киногерои Тест Текст
2
mars.frontier
mars.frontier
1 месяц назад

Как мы делали мини-игру про ровер на Марсе внутри Telegram WebApp⁠⁠

«Хочется сделать простую карту, чтобы листать её в Telegram». С этого всё и началось. А закончилось — изометрическим движком, авторизацией по WebApp, системой энергии, покупкой участков и боевым ровером с шестью колёсами.

1/3

🚀 С чего всё началось?

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

В целом, даже эта идея была вполне рабочей и первые 300 пользователей с разных источников легко собрались. Мы даже провели на 9 мая конкурс "найди звезду победы" и выплатили победителю небольшой приз :)

Но само собой, что бот - не предел мечтаний, нужно было пилить полноценный мини-апп.

На боте лишь проверили гипотезу, отладили механики, типа уменьшения энергии, подзарядки аккумулятора в течении времени, пока не заходишь в игру.

Первый шаг в сторону мини-аппки - сделали вебстраничку, где можно было листать мышкой или пальцем — просто ради визуализации. Прямоугольная сетка, тайлы, немного стилей. Telegram WebApp проглатывал HTML5 на ура. Тогда не было никакой логики, просто подгрузка текстур и картинка под пальцем.

Вот как это выглядело:

  • Пользователь заходил и видел карту Марса.

  • Никакого взаимодействия — только “глянуть”.

🎮 А потом захотелось интерактивности

Следующим шагом стало добавление изометрии — чтобы выглядело как псевдо-3D. Самое интересное, что даже не потребовалось изменять текстуры. Серьезно :) Они по-прежнему те же самые, квадратные, 64 х 64. И не используется никакой 3д - движок.

вот краткое и понятное объяснение, как строится изометрическая карта из квадратных тайлов:


🧠 Основная идея:

Каждый квадратный тайл поворачивается на 45° и масштабируется по вертикали, чтобы получился ромб (изометрическая проекция). Вместо привычной сетки (x, y) мы рассчитываем экранные координаты (left, top) по формуле:


📐 Формулы для отображения:

При размере одного тайла T:

  • W = T * sqrt(2) — изометрическая ширина (диагональ квадрата).

  • H = W / 2 — изометрическая высота (высота ромба).

  • WX2 = W / 2, HX2 = H / 2 — половинки для смещения от центра.

Переход от логических координат (dx, dy) к пиксельным:

isoX = (dx - dy) * WX2 + centerX; isoY = (dx + dy) * HX2 + centerY;


🧩 Что это даёт:

  • (dx - dy) — смещает тайл по горизонтали.

  • (dx + dy) — смещает тайл по вертикали.

  • centerX, centerY — центр экрана, чтобы карта строилась относительно игрока.


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

  • Из обычной квадратной сетки (x, y) формируется ромбовидная карта, где видны и горизонтальные, и вертикальные соседние тайлы.

  • Центральная клетка (текущий игрок) — всегда по центру, а остальные располагаются вокруг.

    Ну а дальше уже дело техники - придумали алгоритм перемещения в 8 направлениях: вверх, вниз, влево, вправо, плюс диагонали.

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

    Задали запреты на воду, скалы и занятую клетку, чтобы не было “читов”.

🔐 Само собой - авторизация

Чтобы пользователь не “прыгал” по чужим роверам и участкам, мы внедрили Telegram WebApp InitData (это такая строка с хешем, которую фронт передает нам в бэк, а мы - уже на сервере телеграм с токеном бота валидируем подпись. Если сошлась - то пользователь зашел к нам через телегу. Если нет - скорее всего он просто открыл веб-страницу как сайт, или что-то пытается поломать, подделать :)

Если кратко:

  • Telegram сам отдаёт токен с подписью.

  • Мы проверяем подпись на бэке по HMAC SHA256.

  • Получаем ID пользователя, сохраняем его в сессии.

Теперь всё честно: ровер – только твой, кристаллы – только твои.

🪐 Стало красивее: добавили кристаллы и рамки

Потом появились:

  • Кристаллы на клетках — можно собирать.

  • Подсветка клеток: белая рамка — твоя, красная — чужая.

  • Имена владельцев, чтобы было видно, кто что захватил.

    В планах: Покупка участков за кристаллы. Это было в текстовом боте. И ползая по карте, даже видны купленные тобой (белым) и оппонентами (красным) участки.

⚡️ Оптимизация и загрузка ассетов

Мы поняли, что каждая картинка может тормозить игру на слабом устройстве, и:

  • Добавили прелоадер, который подгружает PNG-шки перед игрой.

  • Сделали показ спиннера на любом действии (движение, загрузка).

  • Кэшируем тайлы и обновляем только при движении.

🤖 Как выглядит сейчас

Игрок:

  • Заходит в Telegram Mini App.

  • Авторизуется за доли секунды.

  • Видит изометрическую карту с ровером, кристаллами, участками, рекламными баннерами.

  • Может двигаться по клеткам, собирать кристаллы (в будущем - бурить и находить ресурсы, торговать ими, покупать землю).

А мы — всё это рисуем прямо в DOM.
Никаких Canvas, WebGL, или тяжелых движков. Только HTML, CSS и немного магии на JS.


💬 Если интересно — покажу, как это выглядит вживую.
Тестить можно тут. А если зайдёт — добавим NFT, фермы и квесты на выживание 😄

Показать полностью 3
[моё] Gamedev Разработка Программирование Telegram Javascript Python Unity Frontend Backend Web Web-программирование Ton HTML CSS Верстка Длиннопост
9
0
msqrdBoy23
msqrdBoy23
4 месяца назад

Нейросеть, которая лучше самых хайповых⁠⁠

Привет

В последнее время я замечаю любопытную тенденцию: люди скачут от одной нейросети к другой, чтобы добиться чуть более впечатляющих результатов, но при этом игнорируют инструменты, уже ставшие незаменимыми для сотен тысяч пользователей. Один из таких недооценённых — Claude, запущенный в марте 2023 года командой бывших разработчиков OpenAI.

Почему стоит обратить на него внимание?

Claude не страдает провалами в памяти: он запоминает контекст беседы от первого до последнего сообщения. В отличие от GPT, который «забывал» пользователя после десятка реплик.

Во-вторых, эта модель отлично подходит для веб-разработки. Она разбирается в нужном стеке — будь то HTML + JS + Tailwind, React или что-то иное — и способна предложить грамотную структуру кода.

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

Поделюсь личным опытом: я создавал AI-помощника для хостинга и решил протестировать Claude. Взял пару примеров подобных ботов с дизайнерских площадок, показал их модели — и буквально за десять сообщений у меня получился почти готовый прототип.

Еще два пример и потраченных 10 минут.

Кстати, не могу не оставить отличный хостинг для ваших Pet и не только проектов: u1host.com (реф), тариф за 149 рублей подойдет для всего.

Показать полностью 2
[моё] IT Инструкция Программирование Чат-бот ChatGPT Лайфхак Верстка Видео Без звука Вертикальное видео Короткие видео Длиннопост
0
Puwi
Puwi
8 месяцев назад

А ты в теме? Сколько нас...⁠⁠

А ты в теме? Сколько нас...
HTML Верстка Код Программирование Верстальщик Frontend Программист Создание сайта
19
69
briGits
1 год назад

Продолжение поста «Сбер - сапожник без сапог»⁠⁠1

Погорячился, обновив пост. Верстку-то поправили, зато остальное сломали😂

Сбербанк IT IT юмор Верстка Программирование Web-программирование Fail Длиннопост Видео Без звука Вертикальное видео Ответ на пост
8
Блог компании Партнёрский материал Реклама
practicum.yandex
practicum.yandex
21 день назад

От основ математики до Python: 4 бесплатных курса для тех, кто хочет в анализ данных⁠⁠

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

От основ математики до Python: 4 бесплатных курса для тех, кто хочет в анализ данных Обучение, IT, Аналитика, Халява, Курсы, Онлайн-курсы, Бесплатное обучение, Учебные курсы, Длиннопост, Блоги компаний

Основы анализа данных и Python

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

Что узнаете: из трех модулей первый посвящен знакомству с концепцией Data Science, второй — решению реальных кейсов. В рамках третьего студент изучит азы Python и библиотеки pandas, научится строить графики и верно их трактовать.

Учиться бесплатно >>


Основы математики для цифровых профессий

Для кого: начинающих аналитиков, разработчиков, маркетологов.

Что узнаете: в курсе шесть модулей, три основных и столько же дополнительных. Первые включают обучение множествам, логике, комбинаторике и теории вероятностей. Остальные посвящены числам, дробям и алгебре.

Учиться бесплатно >>


Основы статистики и A/B-тестирования

Для кого: тех, кто уже работает с данными или хочет начать, маркетологов, разработчиков.

Что узнаете: курс состоит из четырех модулей. Первый посвящен знакомству с основами статистики, второй — статистическим тестам, третий — практике A/B-тестов. Последний модуль — симулятор. Студент примерит роль аналитика, что определить целевую аудиторию нового продукта и подготовить A/B-тест.

Учиться бесплатно >>


Основы работы с базами данных и SQL

Для кого: маркетологов, менеджеров проектов, продуктов и всех интересующихся.

Что узнаете: первый модуль — введение в базы данных, второй — работа с выборками, фильтрациями и декомпозиция задач. Третий блок посвящен более сложным инструментам: группировкам и агрегациям. Четвертый — отработка навыков в симуляторе.

Учиться бесплатно >>


Если хотите глубже погрузиться в анализ данных, начните изучать профессию сразу. У нас есть онлайн-курс «Аналитик данных» — дадим все нужные знания для старта карьеры за 7 месяцев. Вас ждет много практики: 4 больших проекта и 11 практических работ. Поддержим в ходе обучения, поможем составить сильное портфолио и подготовиться к собеседованиям.

У нас есть курсы и в других направлениях анализа — определяйтесь с профессией и стартуйте в IT!

Реклама ООО «Яндекс», ИНН: 7736207543

Показать полностью
Обучение IT Аналитика Халява Курсы Онлайн-курсы Бесплатное обучение Учебные курсы Длиннопост Блоги компаний
12
1712
briGits
1 год назад

Сбер - сапожник без сапог⁠⁠1

UPD:

Пост не прошел незамеченным, на следующий день всё исправили. Думаю, кто-то явно получил люлей из-за этого, сорян :)

Услышал о курсе "Управление IT-командой" от университета сбера, решил ради интереса глянуть, что это за зверь, который стоит 260к за 2.5 месяца.

Зайдя на сайт, первое, что увидел - кнопка призыва к действию, на которой наложились две надписи друг на друга. “А вы точно умеете управлять хотя бы своей IT командой?" - подумал я.

Но пролистав сайт дальше, я всё понял и так))) Скрины ниже:

Сбер - сапожник без сапог Сбербанк, IT, IT юмор, Верстка, Программирование, Web-программирование, Fail, Длиннопост
Сбер - сапожник без сапог Сбербанк, IT, IT юмор, Верстка, Программирование, Web-программирование, Fail, Длиннопост
Сбер - сапожник без сапог Сбербанк, IT, IT юмор, Верстка, Программирование, Web-программирование, Fail, Длиннопост
Сбер - сапожник без сапог Сбербанк, IT, IT юмор, Верстка, Программирование, Web-программирование, Fail, Длиннопост
Сбер - сапожник без сапог Сбербанк, IT, IT юмор, Верстка, Программирование, Web-программирование, Fail, Длиннопост
Сбер - сапожник без сапог Сбербанк, IT, IT юмор, Верстка, Программирование, Web-программирование, Fail, Длиннопост
Показать полностью 6
Сбербанк IT IT юмор Верстка Программирование Web-программирование Fail Длиннопост
143
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии