Нет robots.txt — нет сайта в выдаче Google
Внезапное. Алан Смит делится интересным кейсом. В какой-то момент органический трафик из Google на сайт ушёл в 0. И причина, скорее всего, в том, что у сайта нет
Дальнейший ресёрч показал, что вообще-то в поддержке есть целое видео про этот нюанс.
Честно говоря, я с таким никогда не сталкивался, потому что у меня для каждого личного проекта
https://www.alanwsmith.com/en/37/wa/jz/s1/
Внезапное. Алан Смит делится интересным кейсом. В какой-то момент органический трафик из Google на сайт ушёл в 0. И причина, скорее всего, в том, что у сайта нет
robots.txt — файла в корне сайта, который должен давать инструкции роботам, куда можно ходить, а куда нельзя ходить.Дальнейший ресёрч показал, что вообще-то в поддержке есть целое видео про этот нюанс.
Честно говоря, я с таким никогда не сталкивался, потому что у меня для каждого личного проекта
robots.txt на автомате копируется из предыдущего. Но удивительно, что если гуглобот не получил явное разрешение погулять по сайту, то он не наглеет и действительно не идёт гулять. Логично. Но удивительно.https://www.alanwsmith.com/en/37/wa/jz/s1/
Alanwsmith
Fix Your robots.txt or Your Site Disappears from Google
a post from alan w. smith
👍40🤯22❤🔥3❤2🤣2
Оптимизация SVG. Гайд для новичков
Постоянно вижу на разных сайтах SVG, которые очень сильно не оптимизированы. Не считаем PNG в base64 внутри SVG, это совсем уж вопиющее, речь скорее про лишние группы, ненужные атрибуты и координаты с точностью до 10 знаков.
Лаура Калбаг делится инструкцией, с чего стоит начать, чтобы SVG на выходе были поменьше размером, не теряя в качестве.
https://penpot.app/blog/how-to-optimize-svg-files-a-complete-guide-for-beginners/
Постоянно вижу на разных сайтах SVG, которые очень сильно не оптимизированы. Не считаем PNG в base64 внутри SVG, это совсем уж вопиющее, речь скорее про лишние группы, ненужные атрибуты и координаты с точностью до 10 знаков.
Лаура Калбаг делится инструкцией, с чего стоит начать, чтобы SVG на выходе были поменьше размером, не теряя в качестве.
https://penpot.app/blog/how-to-optimize-svg-files-a-complete-guide-for-beginners/
Penpot Blog
How to optimize SVG files: A complete guide for beginners
SVG files use mathematical formulas to create graphics, allowing infinite scaling without losing quality, and making them perfect for high-res displays and responsive design.
👍41❤4🎉1
Почему я всё ещё использую jQuery
Андрей Мелихов поделился в редакторском чатике ссылкой на статью «Why I Still Use jQuery», которая мне откликнулась. Мнение автора можете почитать по ссылке, а я хочу поделиться своими размышлениями.
С недавним мажорным обновлением jQuery 4.0 в блогах и твиттерах видел много бурлений на тему: «А зачем оно вообще надо? Кто-то до сих применяет jQuery?»
Для начала: да, кто-то применяет. Я редко, но применяю jQuery, и мне не стыдно. Даже горжусь этим иногда.
1. Если вы думаете, что во всём мире у всех пользователей современные компы с современными ОС и браузерами, то это заблуждение. Как бы мы не хоронили Internet Explorer, во многих государственных учреждениях до сих пор стоят закупленные в райне 2005 компы с Windows XP, где IE нужен как минимум чтобы запустить закупленные в те же годы Silverlight-приложения. Да, доля для какого-нибудь маркетплейса ничтожная, но для разработчиков приложений под такую ЦА Internet Explorer, к сожалению, никуда не делся. Кстати, этим разработчикам jQuery 4.0 уже не пригодится, в нём отказались от поддержки IE.
2. Wordpress. Когда-то он породил огромное количество сайтов, где jQuery торчит из базовых тем, плагинов и так далее. Современные веб-студии давно перешли на более современный стек, плагины тоже. Но я где-то раз в полгода помогаю знакомым слегка править сайты на WP — и там всегда есть jQuery в моём случае.
3. Если есть адепты секты React / Tailwind / подставь_своё, то почему не может быть адептов секты jQuery? Некоторые разработчики используют React просто потому, что больше ничего не освоили, при этом быстро собирают сайты, выдают по проекту в день, решают задачи бизнеса и хорошо зарабатывают. Так почему не могут себе такое же позволить jQuery-разработчики? Когда код на jQuery на кончиках пальцев, причём LLM с ним тоже замечательно дружит, а пользователь при этом не страдает — ну и хорошо же.
4. Экосистема обширнейшая. Плагины есть почти на любой чих. Если стоит задача сделать быстро, то можно собрать целый комбайн из плагинов, где почти всё нужное есть.
5. DX для простых сайтов типа лендингов лучше, чем у нативных методов. В статье есть хороший пример про AJAX. Код на нём для меня лично более читаемый, чем пачки хуков и провайдеров.
Это не значит, что я призываю всех выбросить React, Vue.js или на чём вы там пишете. Даже наоборот, если ваш рабочий процесс отлажен на удобном вам инструменте и это не портит UX, то нет смысла в 2026 году осваивать и внедрять jQuery. Но это всё ещё инструмент, который в некоторых местах нужен и полезен. Хейтить ручную пилу, что она не достаточно электропила — сомнительно.
Всем добра :)
https://www.docker.com/blog/why-i-still-use-jquery-2025/
Андрей Мелихов поделился в редакторском чатике ссылкой на статью «Why I Still Use jQuery», которая мне откликнулась. Мнение автора можете почитать по ссылке, а я хочу поделиться своими размышлениями.
С недавним мажорным обновлением jQuery 4.0 в блогах и твиттерах видел много бурлений на тему: «А зачем оно вообще надо? Кто-то до сих применяет jQuery?»
Для начала: да, кто-то применяет. Я редко, но применяю jQuery, и мне не стыдно. Даже горжусь этим иногда.
1. Если вы думаете, что во всём мире у всех пользователей современные компы с современными ОС и браузерами, то это заблуждение. Как бы мы не хоронили Internet Explorer, во многих государственных учреждениях до сих пор стоят закупленные в райне 2005 компы с Windows XP, где IE нужен как минимум чтобы запустить закупленные в те же годы Silverlight-приложения. Да, доля для какого-нибудь маркетплейса ничтожная, но для разработчиков приложений под такую ЦА Internet Explorer, к сожалению, никуда не делся. Кстати, этим разработчикам jQuery 4.0 уже не пригодится, в нём отказались от поддержки IE.
2. Wordpress. Когда-то он породил огромное количество сайтов, где jQuery торчит из базовых тем, плагинов и так далее. Современные веб-студии давно перешли на более современный стек, плагины тоже. Но я где-то раз в полгода помогаю знакомым слегка править сайты на WP — и там всегда есть jQuery в моём случае.
3. Если есть адепты секты React / Tailwind / подставь_своё, то почему не может быть адептов секты jQuery? Некоторые разработчики используют React просто потому, что больше ничего не освоили, при этом быстро собирают сайты, выдают по проекту в день, решают задачи бизнеса и хорошо зарабатывают. Так почему не могут себе такое же позволить jQuery-разработчики? Когда код на jQuery на кончиках пальцев, причём LLM с ним тоже замечательно дружит, а пользователь при этом не страдает — ну и хорошо же.
4. Экосистема обширнейшая. Плагины есть почти на любой чих. Если стоит задача сделать быстро, то можно собрать целый комбайн из плагинов, где почти всё нужное есть.
5. DX для простых сайтов типа лендингов лучше, чем у нативных методов. В статье есть хороший пример про AJAX. Код на нём для меня лично более читаемый, чем пачки хуков и провайдеров.
Это не значит, что я призываю всех выбросить React, Vue.js или на чём вы там пишете. Даже наоборот, если ваш рабочий процесс отлажен на удобном вам инструменте и это не портит UX, то нет смысла в 2026 году осваивать и внедрять jQuery. Но это всё ещё инструмент, который в некоторых местах нужен и полезен. Хейтить ручную пилу, что она не достаточно электропила — сомнительно.
Всем добра :)
https://www.docker.com/blog/why-i-still-use-jquery-2025/
Docker
Why I Still Use jQuery in 2025 (and When Not to) | Docker
When jQuery still shines in 2025—legacy apps, quick prototypes, simple AJAX—and when to use modern JavaScript.
👍55❤26🥴14😁13👌3🔥1😱1🤬1🐳1💯1
CSS Stats
Нашёл в интернетах интересный анализатор CSS на любых сайтах. Умеет считать и сравнивать специфичность селекторов, показывать цветовую палитру, тени, рамки, CSS-переменные, раскладки гридами. Даже пробует подсказать, есть ли смысл переходить на Atomic-классы.
Честно говоря, чтобы найти какие-нибудь аномалии на сайте — инструмент отличный. Дробные размеры, внезапные переменные, незапланированные шрифты. Или подсмотреть у конкурентов, что у них там в вёрстке неидеального есть, потешить своё ЧСВ, например. Или даже сравнить две версии сайтов между собой, есть и такая функциональность. Поймал себя на том, что последние три дня сижу и анализирую разные сайты (через расширение браузера) — зачем-то оно мне надо, хотя толком сформулировать себе, зачем именно, пока не могу.
В общем, в закладки сохранил, с вами тоже делюсь.
https://cssstats.com/
Нашёл в интернетах интересный анализатор CSS на любых сайтах. Умеет считать и сравнивать специфичность селекторов, показывать цветовую палитру, тени, рамки, CSS-переменные, раскладки гридами. Даже пробует подсказать, есть ли смысл переходить на Atomic-классы.
Честно говоря, чтобы найти какие-нибудь аномалии на сайте — инструмент отличный. Дробные размеры, внезапные переменные, незапланированные шрифты. Или подсмотреть у конкурентов, что у них там в вёрстке неидеального есть, потешить своё ЧСВ, например. Или даже сравнить две версии сайтов между собой, есть и такая функциональность. Поймал себя на том, что последние три дня сижу и анализирую разные сайты (через расширение браузера) — зачем-то оно мне надо, хотя толком сформулировать себе, зачем именно, пока не могу.
В общем, в закладки сохранил, с вами тоже делюсь.
https://cssstats.com/
CSS Stats
CSS Stats - Analyze and visualize CSS
Analyze CSS from any website. View colors, typography, spacing, specificity graphs, and design tokens.
❤44👍9🔥5
Returns Undefined
Забава вам на вечер. Игра, которая проверяет ваши знания приведения типов в JavaScript. И не только. В пиксельной графике.
Местами есть абсолютно издевательские вопросы, но тем и веселее.
Кстати, проект написан на Svelte, лежит в опенсорсе.
https://ylovits.github.io/returns-undefined/
Забава вам на вечер. Игра, которая проверяет ваши знания приведения типов в JavaScript. И не только. В пиксельной графике.
Местами есть абсолютно издевательские вопросы, но тем и веселее.
Кстати, проект написан на Svelte, лежит в опенсорсе.
https://ylovits.github.io/returns-undefined/
😁24👍10🥴6❤3
Переезд с Chalk на нативный styleText
Есть такая утилита Chalk, которую даже если вы осознанно в проект на Node.js не подключали, есть высокая вероятность, что подключали неосознанно. У неё какое-то неприличное девятизначное число скачиваний в неделю. И нужна она, чтобы в терминале красиво выводить текст: с фоновым цветом, разноцветно, жирненько или курсивом и так далее.
В Node.js v22.13.0 стабильной стала нативная утилита
А самое приятное, что можно запустить официальный кодмод от команды Node.js, который мигрирует ваш проект сам:
https://nodejs.org/en/blog/migrations/chalk-to-styletext
Есть такая утилита Chalk, которую даже если вы осознанно в проект на Node.js не подключали, есть высокая вероятность, что подключали неосознанно. У неё какое-то неприличное девятизначное число скачиваний в неделю. И нужна она, чтобы в терминале красиво выводить текст: с фоновым цветом, разноцветно, жирненько или курсивом и так далее.
В Node.js v22.13.0 стабильной стала нативная утилита
node:util.styleText, которая может почти всё то же самое, но с некоторыми ограничениями. Для нас, разработчиков, это приятное удаление лишней зависимости и более быстрое логирование.А самое приятное, что можно запустить официальный кодмод от команды Node.js, который мигрирует ваш проект сам:
npx codemod @nodejs/chalk-to-util-styletext
https://nodejs.org/en/blog/migrations/chalk-to-styletext
nodejs.org
Node.js — Chalk to Node.js util styleText
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
🔥40❤14👌4🤯1
CTF Frontend // 2026
Каждый год мы небольшой командой перед конференцией «Я 💛 Фронтенд» собираем фронтендерский CTF (Capture the Flag). Он уже оброс собственным лором, узнаваемой стилистикой, локальными мемами и небольшим, но уютным комьюнити. Игры больше похоже на головоломки, где знания фронтенда помогают найти спрятанные сообщения, чтобы перейти на следующий уровень.
В этом году тоже готовим новую игру с новыми заданиями. Сижу как раз оформляю сюжетные диалоги, чтобы вам интереснее играть было.
А ещё мы, наконец, собрали сайт, на котором есть ссылки на все игры прошлых лет. Не ругайтесь на вёрстку, пожалуйста, собрано на коленке, там много что нужно переделать, но свою задачу он уже выполняет.
В эту субботу. Ждём всех. Never Gonna Give You Up.
https://ctf.ilovefrontend.ru/
Каждый год мы небольшой командой перед конференцией «Я 💛 Фронтенд» собираем фронтендерский CTF (Capture the Flag). Он уже оброс собственным лором, узнаваемой стилистикой, локальными мемами и небольшим, но уютным комьюнити. Игры больше похоже на головоломки, где знания фронтенда помогают найти спрятанные сообщения, чтобы перейти на следующий уровень.
В этом году тоже готовим новую игру с новыми заданиями. Сижу как раз оформляю сюжетные диалоги, чтобы вам интереснее играть было.
А ещё мы, наконец, собрали сайт, на котором есть ссылки на все игры прошлых лет. Не ругайтесь на вёрстку, пожалуйста, собрано на коленке, там много что нужно переделать, но свою задачу он уже выполняет.
В эту субботу. Ждём всех. Never Gonna Give You Up.
https://ctf.ilovefrontend.ru/
ctf.ilovefrontend.ru
CTF Frontend
Фронтендерский турнир из множества заданий. Выигрывает тот, кто решит задания быстрее других.
❤30🔥14❤🔥4👍1
Долой появление по скроллу!
Дэвид Бушелл довольно аргументированно доказывает, почему делать scroll-fade на сайте не нужно. Это такой эффект, когда вы скроллите — и только после этого текст и картинки как-то появляются на странице.
Если кто-то попросит вас сверстать такой эффект, поделитесь с ними этой статьёй, там наглядно.
https://dbushell.com/2026/01/09/death-to-scroll-fade/
Дэвид Бушелл довольно аргументированно доказывает, почему делать scroll-fade на сайте не нужно. Это такой эффект, когда вы скроллите — и только после этого текст и картинки как-то появляются на странице.
Если кто-то попросит вас сверстать такой эффект, поделитесь с ними этой статьёй, там наглядно.
https://dbushell.com/2026/01/09/death-to-scroll-fade/
dbushell.com
Death to Scroll Fade!
The one where I crowdsource an argument winner
🤣21❤11💯5👍3🔥3
Эффект эластичного текста на чистом CSS
Для начала, это эффектно и красиво.
Темани Афиф собирает демку, в которой за текст можно потянуть курсором мышки — и он потянется в правильном направлении, а потом пружинкой отскочит обратно. Выглядит «вау», если знать, что там нет JavaScript. В статье есть пошаговый разбор, как достигнуть такого эффекта.
Автор сразу предупреждает, что с точки зрения доступности такой текст имеет неприятные нюансы на разных скринридерах. Их, при желании, можно обойти, но за предупреждение спасибо.
https://frontendmasters.com/blog/how-to-create-a-css-only-elastic-text-effect/
Для начала, это эффектно и красиво.
Темани Афиф собирает демку, в которой за текст можно потянуть курсором мышки — и он потянется в правильном направлении, а потом пружинкой отскочит обратно. Выглядит «вау», если знать, что там нет JavaScript. В статье есть пошаговый разбор, как достигнуть такого эффекта.
Автор сразу предупреждает, что с точки зрения доступности такой текст имеет неприятные нюансы на разных скринридерах. Их, при желании, можно обойти, но за предупреждение спасибо.
https://frontendmasters.com/blog/how-to-create-a-css-only-elastic-text-effect/
🔥19👍3❤1
Я 💛 Фронтенд 2026
Чуть не забыл в суматохе подготовки. Мы с Сашей Шинкевич сегодня ведём конференцию про фронтенд. С отличной программой (по мнению составителей этой программы, то есть нас).
Трансляция стартует в 11:00 по минскому времени: https://www.youtube.com/live/Da3cJi7RDPg
Программа и подробности тут: https://events.yandex.ru/events/ya-love-frontend-2026/
Чуть не забыл в суматохе подготовки. Мы с Сашей Шинкевич сегодня ведём конференцию про фронтенд. С отличной программой (по мнению составителей этой программы, то есть нас).
Трансляция стартует в 11:00 по минскому времени: https://www.youtube.com/live/Da3cJi7RDPg
Программа и подробности тут: https://events.yandex.ru/events/ya-love-frontend-2026/
YouTube
Я 💛 Фронтенд 2026
Я 💛 Фронтенд 2026 — главная фронтенд-конференция Яндекса и ежегодный флагман для тех, кто создаёт современные интерфейсы.
14 февраля соберутся разработчики и дизайнеры, которые искренне влюблены во фронтенд: в код, архитектуру, визуал и пользовательский…
14 февраля соберутся разработчики и дизайнеры, которые искренне влюблены во фронтенд: в код, архитектуру, визуал и пользовательский…
❤🔥38🎉6❤4🥰4😁3
Собственная тема для VS Code
Зелл Лью делится опытом написания и публикации собственной темы для VS Code. Пошагово и с подробностями.
В начале статьи Зелл пишет, что ему понадобилось всего 6 часов на создание рабочей темы и пара дней на «полировку».
Статья может быть полезна не только тем, кто хочет стилизовать свой IDE, но и тем, кто встраивает движок Monaco в свои продукты. Хотя отличия всё же есть.
https://css-tricks.com/no-hassle-visual-studio-code-theming-building-an-extension/
Зелл Лью делится опытом написания и публикации собственной темы для VS Code. Пошагово и с подробностями.
В начале статьи Зелл пишет, что ему понадобилось всего 6 часов на создание рабочей темы и пара дней на «полировку».
Статья может быть полезна не только тем, кто хочет стилизовать свой IDE, но и тем, кто встраивает движок Monaco в свои продукты. Хотя отличия всё же есть.
https://css-tricks.com/no-hassle-visual-studio-code-theming-building-an-extension/
CSS-Tricks
No-Hassle Visual Studio Code Theming: Building an Extension | CSS-Tricks
I've always thought that creating a VS Code theme was a lot of work. But lo and behold, it took less than six hours to get it working, then a day or two to polish up my final tweaks.
👍11❤2❤🔥1👏1
Гайд по Anchor Positioning
Anchor Positioning — это декларативный способ описать визуальную привязку одного элемента к другому на странице. Тулптипы, подсказки, сноски, выносные элементы — всё это можно реализовать относительно легко при помощи Anchor Positioning API.
Рома Ахмадуллин в Доке написал подробную статью, как работать с этим однозначно полезным API. Много интерактивных демок.
https://doka.guide/css/anchor-positioning-guide/
Anchor Positioning — это декларативный способ описать визуальную привязку одного элемента к другому на странице. Тулптипы, подсказки, сноски, выносные элементы — всё это можно реализовать относительно легко при помощи Anchor Positioning API.
Рома Ахмадуллин в Доке написал подробную статью, как работать с этим однозначно полезным API. Много интерактивных демок.
https://doka.guide/css/anchor-positioning-guide/
Дока
Гайд по Anchor Positioning — CSS — Дока
Всё, что нужно знать про Anchor Positioning: основные термины, свойства и функции, полезные ссылки по теме.
❤29🔥7❤🔥3