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

Cards out!

Карточные, Ролевые, Стратегии

Играть

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

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

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

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

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

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

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

Frontend + Telegram (ссылка)

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

IT Программирование Javascript IT юмор Веб-разработка Web Программист Вертикальное видео Юмор Картинка с текстом Короткие видео Девушки Эротика Кот Все
23 поста сначала свежее
3
user10424664
user10424664
16 дней назад

Как переносить «висячие» слова на новую строку с помощью 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
8
cherkalexander
cherkalexander
2 месяца назад

ИИ для прототипирования интерфейсов⁠⁠

ИИ для прототипирования интерфейсов

До недавнего времени я использовал ChatGPT исключительно как помощника для генерации кода — вбросить запрос, получить сниппет, внести правки. Но все вокруг только и говорят об AI-агентах, курсоре, v0 и так я наткнулся на сервисы для онлайн генерации прототипов на основе ИИ.

Вот несколько подобных сервисов:
- BoltNew
- v0 by Vercel
- lovable

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

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

А теперь немного про мой опыт 👇.

1️⃣ Первый опыт

Первый раз, когда я наткнулся на v0, я попросил его сгенерировать интерфейс Айфона по скриншоту (тут демка). Когда я увидел результат, то в восторге побежал показывать жене. А потом понял, что шутки про замену фронтендеров на ИИ перестали быть шутками 😅.

2️⃣ Опыт использования в работе

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

У библиотеки, есть большой набор демок, но то, что требовалось мне — отсутствовало. И тут я вспомнил про v0 и решил сам сгенерировать маленькие прототипы на каждую новую фичу.

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

P.S. итоговую оценку всё же стоило умножить на 2 😅.

3️⃣ Ещё пример

Также мы рассматривали вариант, сменить GoJS на @xyflow/react и тут мне снова помог V0. Примеры для @xyflow/react v0 генерировал намного лучше. За пару дней я набросал небольшой прототип, который точно писал бы неделю. Я сделал скриншот дизайна в фигме, и попросил v0 сгенерировать его с использованием библиотеки.

🛑 Минусы

Тут конечно, важно сказать, что часто эти сервисы:
- генерируют нерабочий код
- генерируют не совсем то, что вам нужно
- могут сломать весь проект после очередных изменений
- имеют ограниченное количество бесплатных запросов в день

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

#Frontend #Ai

ИИ для прототипирования интерфейсов Кросспостинг, Pikabu Publish Bot, Frontend, Искусственный интеллект, Telegram (ссылка)
ИИ для прототипирования интерфейсов Кросспостинг, Pikabu Publish Bot, Frontend, Искусственный интеллект, Telegram (ссылка)
ИИ для прототипирования интерфейсов Кросспостинг, Pikabu Publish Bot, Frontend, Искусственный интеллект, Telegram (ссылка)
Показать полностью 3
Кросспостинг Pikabu Publish Bot Frontend Искусственный интеллект Telegram (ссылка)
0
10
zhizait
zhizait
5 месяцев назад

Как мы открывали вакансию для фронтендеров без опыта работы⁠⁠

Как мы открывали вакансию для фронтендеров без опыта работы IT, Работа, Frontend, Тимлид, Собеседование, Истории из жизни, Вакансии, Telegram (ссылка), Длиннопост
Как мы открывали вакансию для фронтендеров без опыта работы IT, Работа, Frontend, Тимлид, Собеседование, Истории из жизни, Вакансии, Telegram (ссылка), Длиннопост
Как мы открывали вакансию для фронтендеров без опыта работы IT, Работа, Frontend, Тимлид, Собеседование, Истории из жизни, Вакансии, Telegram (ссылка), Длиннопост

Источник: «Жиза ИТ руководителя»

Показать полностью 3
IT Работа Frontend Тимлид Собеседование Истории из жизни Вакансии Telegram (ссылка) Длиннопост
6
Партнёрский материал Реклама
specials
specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст
1
Divatoz
Divatoz
8 месяцев назад

17.марта.2022:⁠⁠

Упростил задачу по решению JS задачек.
В условие остались просмотра сериальчика и пиццы.
Продуктивность зашкаливает.

День 107 (продолжение)

17.марта.2022: Программирование, Frontend, IT, Программист, IT юмор, Telegram (ссылка), 100daychallenge

Pixel art retro style illustration, person watching TV series and eating pizza on a couch, laptop nearby, pastel color palette (light blue, pink, yellow, green), 8 bit style, --ar 16:9 --v 6.1

Программирование Frontend IT Программист IT юмор Telegram (ссылка) 100daychallenge
0
Divatoz
Divatoz
8 месяцев назад

17.марта.2022:⁠⁠

Решил решать задачки JS.
Но сначала нужно встать с кровати.
Последнее условие усложняет весь алгоритм.

День 107

17.марта.2022: IT, Программирование, Программист, Frontend, Разработка, IT юмор, Telegram (ссылка)

Pixel Art аллегория на усталость

IT Программирование Программист Frontend Разработка IT юмор Telegram (ссылка)
0
SaimorL
SaimorL
10 месяцев назад

Нейросеть упрощает Frontend⁠⁠

Всем привет, хочу поделиться с вами очень крутым новым сервисом, Frontend ai, который упростит вашу frontend разработку.

Коротко о том как пользоваться и какие возможности дает данный сервис:

Функции Frontend AI:

  1. Генерация кода: Автоматически генерирует HTML, CSS и JavaScript код на основе вашего описания или загруженного изображения.

  2. Предварительный просмотр компонентов: Позволяет предварительно просмотреть созданные компоненты перед их использованием.

  3. Интеграция с инструментами дизайна: Поддерживает интеграцию с популярными инструментами дизайна, такими как Figma.

  4. Подсказки и рекомендации: Предлагает подсказки и рекомендации для улучшения кода и дизайна.

Плюсы Frontend AI:

  1. Автоматизация задач позволяет сократить время на разработку.

  2. Инструменты и подсказки помогают улучшить качество кода.

  3. Поддержка интеграции с инструментами дизайна делает процесс разработки более удобным.

  4. Интуитивно понятный интерфейс и отсутствие необходимости в регистрации.

Минусы Frontend AI:

  1. В некоторых случаях может не справляться с более сложными задачами.

    2. Результаты могут варьироваться в зависимости от точности ИИ.

    3. Возможны проблемы с совместимостью с некоторыми специфическими инструментами или фреймворками.

    Источник

Показать полностью
Инновации Искусственный интеллект Технологии Полезное Браузер Frontend Разработчики Разработка Веб-разработка Дизайнер Сайт Нейронные сети Видео Без звука Telegram (ссылка)
3
17
eugeneamfe
eugeneamfe
10 месяцев назад
IT-юмор
Серия IT мемы

Раньше было лучше?⁠⁠

Раньше было лучше? Юмор, Telegram (ссылка), Мемы, IT юмор, Frontend, Веб-разработка, Картинка с текстом

Telegram — Frontend.school()

Показать полностью 1
Юмор Telegram (ссылка) Мемы IT юмор Frontend Веб-разработка Картинка с текстом
8
673
eugeneamfe
eugeneamfe
10 месяцев назад
IT-юмор
Серия IT мемы

Главное, что видно пользователю⁠⁠

Telegram — Frontend.school()

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