Такой макет
40 members
3 photos
8 links
Разработчик журнала «Нож»

Пишу о сервисах, технологиях и обо всем, что касается разработки изданий в интернете.

Связаться со мной можно здесь: @lukin
Download Telegram
to view and join the conversation
Channel created
С 80 версии в Chrome по умолчанию включена возможность, позволяющая пользователю или автору дать ссылку на текстовый фрагмент. Для примера, ссылка на конкретный абзац статьи Ножа:

https://knife.media/dopanomics/#:~:text=In%202001,%20Stanford

Выключить функцию можно в настройках:
chrome://flags/#enable-text-fragment-anchor


Ссылка на документацию: https://github.com/WICG/ScrollToTextFragment/
Не так давно команда Google Fonts обновила свой api, добавив возможность использования вариативных шрифтов.

Ссылка на докуменатцию: https://developers.google.com/fonts/docs/css2

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

Если на странице используется всего несколько статичных заголовков, набранных особенным шрифтом, то в запросе можно использовать параметр &text=. В таком случае cdn вернет клиенту скомпилированный шрифт с нужными буквами. Этот прием также работает и для первой версии api.
This media is not supported in your browser
VIEW IN TELEGRAM
Раз уж я начал вести канал, то наконец-то пришло время разобраться, как добавлять ссылку на слово в телеграм сообщениях. Оказывается, в нативном клиенте для macos есть встроенная функция преобразваний текста. Там можно заодно и прописные на строчные заменить, если забыли отключить caps.

Об этом я, кстати, узнал в одном из issue репозитория приложения. У проектов с открытыми исходниками очень часто можно найти ответы на свои вопросы в трекере. Либо задать там же.
Есть такая штука, которая называется SSI. Больше 10 лет назад я познакомился с этой технологией, когда на бесплатных тарифах хостингов не было поддержки php, но Server Side Includes были доступны. С их помощью можно было собрать простой сайт, динамически подключая разные части директивой include.
Поддержка SSI и сейчас включена в nginx из коробки, и может использоваться, например, для кэширования динамики в highload проектах.

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

Нужно только прокинуть параметр запроса с результатом в шаблон и отобразить его в нужных тегах. Тут можно посмотреть, как это работает, а здесь полная документация к настройкам модуля для nginx.
В SSI шаблонах можно реализовать и гораздо более продвинутую функциональность, в том числе условное форматирование или даже рандом на основе регулярных выражений. И все это будет работать очень быстро и без дополнительных настроек окружения.
Не хочется превращать канал в обзор функциональности программ, но мимо такой штуки просто не могу пройти. Оказывается в Chrome можно без расширений сделать полный скриншот страницы. Это бывает очень полезно, когда нужно показать сайт по всей его высоте безо всяких подклеиваний.

Открываем консоль разработки (cmd+option+i / ctrl+shift+i), запускаем командное меню (cmd+shift+p / ctrl+shift+p) и выбираем Capture full size screenshot. После этого в папку загрузок автоматически сохранится скриншот в png.
This media is not supported in your browser
VIEW IN TELEGRAM
У нас на Ноже все слова в урле разделены дефисом. Заменять пробел подчеркиванием не рекомендуется. Дефис делит имя записи на слова, а подчекривание превращает два слова в единую сущность. Это касается не только адреса. Попробуйте в любом редакторе два раза щелкнуть на слово с дефисом – выделится только одна его часть. То же самое при перемещении по тексту при помощью клавиатуры (alt + →).

Это правило имеет значение и при индексации. Google напрямую об этом упоминает в своих рекомендациях для вебмастеров. Хотя хороший контрпример – Википедия, но не все могут себе позволить быть Википедией.
Где-то год назад Telegram пометил чат Тупого ножа как материалы для взрослых. Мы долго пытались убрать эту отметку, написав на все возможные адреса техподдержки, но все безуспешно – у пользователей iOS доступа к чату нет.

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

https://te.legra.ph/telegram-adult-06-18
Cloudflare, видимо, помер. Вместе с ним и наш Нож, и еще половина интернета. Будем ждать развития событий.

Update: сайт восстановился. Теперь интересны причины и выводы
Последний год с разной степенью успеха я борюсь с фейсбуком. Если быть точнее, то со счетчиком на кнопках шаринга. В определенный момент фб запретил получать эти данные без ключа авторизации, тогда я нашел недокументированный способ, который вскоре тоже перестал работать.

Мне удалось хитро обойти компрометацию токена на клиенте через проксирование запроса на nginx, но фейсбук и тут меня обошел, понизив лимит на количество запросов к API до 200 в час в расчете на количество пользователей приложения, которых у нас всего 1. В качестве временной альтернативы мне повезло найти такой же спроксированный API от крупного разработчика, у которого, видимо, эти лимиты сильно выше.

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

С помощью lua модуля от openresty, я написал правило, которое проксирует запрос к фб, получает содержимое этой кнопки, ищет там значение счетчика расшариваний и заворачивает в простой jsonp ответ. Все это должно работать очень быстро, а для надежности еще можно закешировать ответ с помощью proxy_cache минут на 20. Этот прекрасный модуль идет в пакете nginx-extras и для Debian совместимых систем ставится одной командой sudo apt install nginx-extras.

Код для nginx конфига: https://gist.github.com/antonlukin/69a19b2b0b9404e432b1edd9fddd14ff

Раунд, фейсбук.
3 сентября

Решил периодически писать о своих микропроектах. Начну с сайта к песне Шуфутинского про 3 сентября, тем более, что есть хороший повод – 4 годовщина со дня его запуска.

В 2016 году мы с дизайнером и разработчиком Лайфхакера на коленке за 2 вечера сделали первую версию сайта. На фоне играло видео с YouTube, а календарь переворачивался неестественно через центр. Тогда на сайт пришло чуть меньше 10 000 пользователей. С каждым годом эта цифра будет увеличиваться.

2017 год запомнился только тем, что сайт периодически падал с ошибкой Too many open files, которая решалась добавлением в конфиг nginx инструкции worker_rlimit_nofile 10240. В тот год календарь покрутило около 11 000 человек.

На 2018 год пришелся пик популярности. Про сайт написал Нож и упомянула Meduza. Всего пришло больше 52 000 пользователей. Большинство из соцсетей. Надо ли говорить, что об обновлении сайта я вспомнил вечером 2 сентября и прямо на живых пользователях пытался исправить проблему с автоматическим воспроизведением видео – YouTube зачем-то отключил такую возможность по умолчанию.

К сентябрю 2019-го я готовился заранее. Было понятно, что основной трафик теперь мобильный, а там видео на фоне совсем не работает. Поэтому я выкинул ролик, заменив на аудиодорожку. Починил переворот календаря и добавил вебсокеты – теперь число общих переворотов обновлялась в режиме реального времени. Все знакомые мне говорили, что тренд спал, и на сайт никто не придет, да и мне самому уже невероятно надоела эта тема. Однако, как это часто бывает, до мемеса спустя годы добрались крупные игроки. Свои календари сделали Pikabu и Лентач совместо с ВКонтакте, что вернуло интерес к теме, и транзитивно привело ко мне на сайт почти 50 000 человек.

В 2020 я все же решил вернуть на сайт видео, потому что без него выходило уж совсем скучно. Но от YouTube сразу было решено отказаться в пользу своего CDN. Благо теперь мобильные бразуеры дают возможность показывать видео на фоне сайта, если у него по умолчанию отключен звук. Также я добавил генератор обложек для шаринга. Теперь на них отображается число переворотов календаря.

Прогнозировать трафик не берусь, но кажется, что лавочку пора закрывать.