Javascript

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

Приятного просмотра, с удовольствием отвечу на все вопросы по теме

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

Если хотите попробовать у себя, то в консоли браузера (F12) запустите вот этот код:

const downButtons = document.querySelectorAll('.story__rating-down'); downButtons.forEach(button => { button.addEventListener('click', function(event) { event.preventDefault(); const ratingCount = button.closest('.story__rating-block').querySelector('.story__rating-count'); if (ratingCount) { let currentCount = parseInt(ratingCount.textContent, 10); ratingCount.textContent = currentCount - 1; } }); });

😂 Телеграм-канал

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

Написал я кучу статей — около 250 штук! — про всякое IT, инвестиции, умные дома, автоматизацию... Короче, про всё, что вас может интересовать. И всё складывал в одну большую таблицу. Но вот понять, что круто работает, а что — не очень, захотелось только недавно.

Почему за статистикой погнался? Просто хотелось понять, насколько вообще мои статьи нужны людям. А то ведь реакция бывает разная: где-то вообще молчок, а иногда на Хабре зашкаливает рейтинг, но комментариев кот наплакал. Но одно очевидно: статистика — это зеркало.

Вот, например, статья про то, как я двумя скриптами обработал 700 страниц документов — на Пикабу собрала почти 75 тысяч просмотров и 80 комментариев! А на Хабре — так себе. Или вот про анализ статей 2024 года по Node.js, Google Sheets и ChatGPT — на Хабре рейтинг приличный, +68, а просмотров всего 7 тысяч. Так в чём же дело?

В общем, вручную считать просмотры, комментарии и рейтинг — это адский труд. Поэтому я автоматизировал процесс. Написал скрипт на Python (ну, ладно, на Node.js и Google Apps Script, но суть понятна), который собирает всю эту информацию и складывает в одну удобную табличку. Теперь вижу, что и на каких ресурсах лучше писать и что интересно разным аудиториям.

Этот скрипт — open source, лежит на GitHub. Хотите — скачивайте, пользуйтесь, делитесь! В нём есть две части: одна для работы в Google Таблицах, другая — серверная, работающая с разными сайтами.

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

Но вернёмся к технической части, например для парсинга Смартлаба с количеством просмотров пришлось повозиться — их API не делился информацией через Google Apps Script. Пришлось писать отдельную часть скрипта на Node.js, чтобы обойти эти ограничения.

Прямо перед новым годом я спарсил и провёл анализ всех публикаций за год для IT сообщества Хабра и трейдеров со Смартлаба, до Пикабу правда не добрался, сорян.

И вот что я выяснил, проанализировав данные за 2024 год. На Хабре — круто разбираются в технике. Там популярны статьи про обход блокировок, советы по программированию, настройка софта... На Смартлабе же — больше экономика, инвестиции, геополитика. Санкции, курс рубля, рынок акций — всё это там обсуждают.

В общем, Пикабушники, запомните главное: чтобы ваша статья полетела, нужно знать, кому и что интересно. Мой скрипт — это инструмент, который поможет понять, что движет вашей аудиторией. Это позволит оптимизировать контент под конкретный ресурс.

И теперь у меня есть чёткие представления, про что писать на Хабре, а про что — на Смартлабе. На Пикабу правда пока не очень понятно, но думаю разберусь...

И да, мои скрипты (хотя на Python не написано, обещаю, в следующей версии поправлю) открыты! Берите и улучшайте!

P.S. А вы что думаете, на чём можно автоматизировать, чтобы Пикабушные топ-посты определять? Подкиньте идеи в комментах!

Автор: Михаил Шардин,

6 января 2025 г.

"Всего несколько строк CSS для плавных переходов между страницами"

• перевод на хабре

• оригинал

Я много раз слышал, про View Transitions API и о том, что теперь можно настраивать анимации перехода между страницами, но никогда не пробовал.

В статье автор предлагает сделать переходы между страницами плавными с помощью одной строчки кода.

@View-transition { navigation: auto; }

Чтобы понять о чём говорит автор просто посмотрите прикреплённое видео:

• или откройте оригинал статьи и воспроизведите видео

• или же откройте мой блог и попробуйте перейти на одну из последних статей

В SPA приложениях также есть возможность использовать View Transitions API. Можете посмотреть демки в статье: "Введение в View Transitions API".  Анимация реализуется с помощью startViewTransition

document.startViewTransition(() => updateTheDOMSomehow());

При использовании View Transitions API происходит следующее:

• делается снимок текущего состояния страницы

• выполняется обновление DOM (updateTheDOMSomehow)

• делается снимок нового состояния страницы

• переход между этими состояниями анимируется с помощью дефолтного плавного затухания или с помощью кастомной анимации

Более сложные примеры  можно узнать отсюда:

• The View Transitions API And Delightful UI Animations (Part 1)

• The View Transitions API And Delightful UI Animations (Part 2)

• Никита Дубко. По-настоящему красивые переходы средствами браузера

Для блогов на Astro:

• Документация View Transitions в доке Astro

• Как починить темную и светлую темы после внедрения view transitions — читать тут