Чем я заменил свой блог и почему мне хочется закрыть свой сайт?

Интернет в России переживает самые худшие времена в своей короткой и бурной истории, но сегодня я не про глобальные и крайне негативные тенденции, которые накрыли нашу страну, а про свой личный блог, который кажется потерял всякую актуальность, но напоминает о себе каждый год весной, когда требует заплатить за доменное имя и каждый раз эта цена растёт (она уже почти доходит до 2000 рублей). Добила меня ситуация с необходимостью привязывать свой сайт к Госуслугам через доменного регистратора и огромные штрафы, которые можно получить за авторизацию пользователей через иностранные сервисы. Ну и вишенка на торте это возможная блокировка сервисов от Google в будущем. 

Блог на устаревшей и заброшенной самим Google платформе в 2026 году это уже анахронизм. Чем же я заменил своё блогерское ремесло? Нет, я не перестал писать тексты и высказываться по вопросам, которые меня волнуют в текущий момент. 

Новости по играм и обзоры я теперь пишу в личном блоге на сайте DTF.ru. У него прекрасная цитируемость в поисковиках и я сам вижу, как мои статьи иногда мелькают в AI поисковике Perplexity. Минусы платформы: там довольно токсичное комьюнити (собственно как и на большинстве российских сайтов) и своевольная модерация, которая может отправлять пользователей в бан в зависимости от фаз Луны и трактования собственных правил. Персональный блог на сторонней площадке не принадлежит вам - это чужая собственность, вы помогаете зарабатывать просмотры и деньги другим людям, в то время как они могут совершенно не уважать ваш труд и вклад в развитие сайта. Но взамен я получаю миллион просмотров моих постов на DTF и один из самых удобных редакторов текста - ничего из этого я бы не смог получить в данном блоге.

Письмо "счастья" от LinkedIn 

Новости IT и короткие заметки про нейросети, фронтенд и современную разработку (то есть вайб-кодинг) я публикую в личном аккаунте на LinkedIn. Давно заблокированная в России профессиональная соцсеть от Microsoft с устаревшим дизайном, прекрасно себя чувствует и в 2026 году. И самое главное - там реально можно получить связи по работе и найти интересных людей. Я получал "дружеский инвайт" в один из банков на позицию фронтендера, да я не пошёл на собеседование, посчитав свой уровень навыков низким для работы там, но сам факт получения инвайта радует. На "линкедине" я в основном занимаюсь масс-фолловингом коллег фронтендеров и разработчиков, публикую 1-2 заметки в день. Если новостей нет и фронтендеры сегодня не выпустили новый фреймворк или очередную популярную библиотеку не взломали, то я могу просто опубликовать фотографию старых компьютеров - просмотры будут.

Вообще, LinkedIn в чём-то похож на "Одноклассники": там сидят взрослые люди (в основном без работы), ругают поиск работы, иностранцы засыпают ленту "нейрослопом", кто-то хвастается своими достижениями, используя специфический корпоративный сленг. Если вы разбавите эту вакханалию своей шуткой или фотографией красивого ретрокомпьютера, то ничего страшного не произойдёт, а может вас заметит какой-нибудь важный СЕО.  

Reddit - сердце Интернета

Для поиска новостей я использую главный форум Интернета - Reddit. Там можно найти сообщества буквально по любой теме: js фреймворк, игра, старые автомобили (там есть сабреддит посвященный автомобилю Lada, где сидят иностранцы и русскоязычные "фанаты марки"), ретрокомпьютеры и ретроигры... Удивительно, что это место ещё не заблокировано в России, видимо регуляторы думают, что оно не очень популярно и там надо знать английский, хотя там давно работает автопереводчик и чат-бот Grok в комментариях. Минусы: токсичные пользователи, которые начинают тебя "минусовать", если ты не попал по вайбу или сказал что-то резкое (а это бывает часто, когда ты используешь переводчик с русского на английский). Плюсы: гора контента на любые темы и реальная практика письменного общения с настоящими иностранцами. 

У меня есть время подумать до осени, но скорее всего я не буду продлевать домен, не буду себя заносить через Госуслуги в какие-то мутные списки владельцев сайтов (явно не с благими побуждениями, а с целью контроля или оплаты налогов). 

Всем удачи, а российскому Интернету выжить в эти времена цензуры и запретов. 

Джентльменский набор расширений для веб-разработки в VS Code

На Ютубе уже есть неимоверное количество видеороликов про "самые лучшие расширения для редактора кода VS Code", поэтому я решил, что этому миру нужен ещё один топ - на этот раз от меня. Шучу: вам совершенно не нужно смотреть все эти видеоролики, потому что они на 90% будут состоять из самых популярных расширений, которыми пользуются все. Этот набор одинаковый, однако не все программисты пристально следят за развитием VS Code, поэтому в их наборе иногда попадаются старые расширения, которые уже либо давно не нужны (функциональность введена в редактор), либо вообще вредны из-за глюков и тормозов (да, попадаются и такие расширения). Недавно я провёл ревизию среди своих расширений, удалил десяток неиспользуемых тем и расширений, и не могу сказать, что достиг совершенства, но мне точно удобно в таком редакторе работать. 

Работа с учебным react приложением в VS Code и Firefox Nightly

Итак, мой список расширений для VS Code, которые облегчают повседневное программирование, экономят время и нервы (жирным выделены must have расширения для меня). 

1. Prettier Plus. Prettier это гениальный форматтер кода, который после нажатия на кнопку сохранения (ctrl+s) превращает ваш как попало написанный код в прекрасно форматированный по всем правилам, которые вы можете ему определить (какие кавычки использовать, какие отступы). Просто не представляю как можно в 2020 году писать код без этого расширения! В маркетплейсе есть оригинальный Prettier с 6,5 миллионами скачиваний, но мне больше понравился форк Prettier+, потому что он лучше настроен на работу вместе с современным javascript и фреймворками. 
2. All Autocomplete. Умное расширение, которое сканирует открытые в проекте файлы и добавляет их в автодополнение (например названия классов из вашего css или функции из модуля js). 
3. Auto Rename Tag. Маленькое, но очень полезное расширение, которое автоматически изменяет закрывающий тег, если вы редактируете открывающий. И почему такой функциональности нет из коробки? Работает вообще с любыми тегами. 
4. Bracket Pair Colorizer 2. Расширение, которое раскрашивает открывающую и закрывающую скобку одним цветом, а так же остальные скобки разными цветами. Выглядит просто, но на самом деле это крайне важная штука. Без неё я бы давно сошёл с ума, пытаясь разобраться в хитросплетениях скобок javascript. В дополнение к нему есть расширение Indent Rainbow, которое раскрашивает отступы в коде по глубине, но мне оно не понравилось, потому что код превращается в цветные горы. *устарело
5. Code Runner. Добавляет в VS Code кнопку "Запустить", которую я безуспешно искал, когда только начинал учиться программировать. Просто подразумевается, что редактор кода это вам не IDE и он не будет вам ничего запускать или компилировать - всё это обычно вы делаете сами из терминала (именно так все и делают обычно). Code Runner понимает множество языков программирования: например он знает как запустить скрипт python или файл typescript через node.js. Кроме того он умеет запускать выделенный фрагмент кода, а не весь файл целиком, что бывает очень полезно при обучении и отладке.
6. Settings Sync. С помощью этого расширения вы можете сохранить и синхронизировать все настройки редактора в ваш gist на github (это такая записная книжка для программиста). В экспериментальных сборках VS Code уже тестируется встроенная аналогичная функция. *устарело функция теперь встроена в редактор.
7. EditorConfig for VS Code. EditorConfig это такой полезный файл, в котором вы можете хранить настройки редактора кода для каждого отдельного проекта. Этот файл можно передать, хранить в репозитории или просто скопировать себе в новый проект ваши любимые настройки.
8. ES7 React/Redux/GraphQL/React-Native snippets. Если вы программируете на React, то вам будет крайне полезен этот набор сниппетов (заготовок кода, шаблонов). Например, вы можете написать "rfc", а редактор кода по нажатию tab развернёт заготовку для функционального компонента. VS Code, конечно же, имеет встроенную систему хранения пользовательских сниппетов, но тут уже всю работу сделали за вас.
9. Guides. Улучшенная отрисовка линий отступов. Особенно полезно при работе в Python, ведь там отступы имеют важное значение. 
10. Highlight Matching Tag. Полезное при работе с тегами расширение (помогает не только при работе с html, но и в React). В редакторе Sublime эта функция есть "из коробки" (подчеркивает открывающий и закрывающий тег), а в VS Code это тоже есть (нужно нажать ctrl+d, чтобы выделились парные теги), но мне не нравится как это сделано - подчеркивание цветной линией выглядит красивее.  
11. Live Server. Любимое расширение и основной инструмент всех верстальщиков. Запускает локальный сервер с "горячей перезагрузкой" при изменении файлов проекта. Раньше для таких возможностей надо было поднимать gulp (или использовать стороннюю программу), настраивать функциональность, а тут всё это работает просто при нажатии "Go Live" внизу страницы.
12. NPM intellisense. Если у вас в проекте есть папка node_modules, то это расширение вам поможет. 
13. Output Colorizer. Расширение от IBM, которое раскрашивает ваш лог. К сожалению, конфликтует с Code Runner, который тоже "раскрашивает" текст в окне вывода (это ограничение редактора - только одно расширение может изменять там форматирование). 
14. Rainbow CSV. Если вы любите рассматривать CSV файлы, то это расширение скрасит вам времяпрепровождение. Лично я перешёл на json для хранения и передачи данных. 
15. Svelte intellisense. Это расширение для тех, кто программирует на javascript фреймворке Svelte. 
16. Vetur. Расширение, если вы программируете на фреймворке Vue. *проблемное С выходом третьей версии Vue, Vetur начал работать крайне нестабильно и многие vue-шники стали использовать расширение Volar.
17. CSS Navigation. Вы можете выделить класс в вашем html и нажать F12, и тогда вы попадёте в определение класса в вашем css. Позволяет быстро перемещаться по коду без поиска. 
18. ESLint. Большое и глобальное расширение, которое поможет вам писать код правильно. Нет, оно не отформатирует его за вас (хотя может работать в связке с Prettier), но укажет вам на места ошибок. Имеет гибкие настройки правил, но особой популярностью у разработчиков javascript пользуется стайлгайд от ребят из Airbnb.
19. Image Preview. Очень полезное расширение, которое помогает при вёрстке. Если вы правильного написали путь до картинки, то оно вам покажет превью на полях. Таким образом вы всегда может легко увидеть участки кода, где применяются изображения. 
20. Babel Javascript. Специальная подсветка для javascript, где учтены все особенности современного диалекта и использования JSX. Если пишите на React, то это расширение будет полезным. 
21. NPM. Позволяет запускать скрипты npm из встроенной консоли редактора (не терминала, а та, что вызывается по нажатию ctrl+shift+p). 
22. REST Client. Очень простое и эффективное расширение, которое заменяет популярный Postman для работы с запросами к API. Храните ваши запросы или логи в простых текстовых файлах, которые могут находиться вместе с кодом приложения. Требует минимального изучения документации, чтобы писать запросы, но всё окупается простотой использования расширения. 
23. Visual Studio IntelliCode. Умное автодополнение от Microsoft. Да, может и не самое умное в мире, если сравнивать с полноценными IDE типа Jetbrains. Есть различные автодополнения для VS Code, но не все они полезны. Например есть крутейшая вещь типа TabNine с машинным обучением на основе текстов программ с github, благодаря чему оно может угадывать просто куски кода и названия переменных (всё уже написано до вас тысячи раз), но, к сожалению, это расширение периодически тормозит и глючит.

Так выглядит редактор кода у меня

Украшательства. Это очень важная сторона настройки свой среды для редактирования, но тут очень трудно советовать что-то для всех, потому что у всех вкус разный (о, каких только диких расцветок я не повидал у программистов на Ютубе). Просто опишу несколько популярных и моих текущий расширений:

1. Моя текущая тема это - Plastic. Ещё могу посоветовать The Best Theme и One Monokai Theme.
2. В сообществе крайне популярна Material Theme. Вам обязательно стоит попробовать её - это классика. Кстати, не удивляйтесь, если некоторые темы попросят вас купить их - всё таки это считается профессиональным продуктом, но никто не заставляет вас это делать и вы всегда можете найти аналогичный бесплатный форк. Вторая по популярности тема это - One Dark Pro, пришедшая к нам из редактора Atom (тема так же имеет множество форков и вариаций). 
3. Заслуживает внимание тема Dracula от дизайнера, который поставил своей целью донести это графическое оформление до мира. Несмотря на название, это довольно мягкая по цветам тема и ничего красного там нет. 
4. Если вам понравилась какая-то популярная тема, то определённо стоит поискать менее популярные форки этой темы. Таким образом, например, я нашёл отличную тему Snazzy Plus, которая является доработанной и улучшенной темой Snazzy Operator. 
5. Текущая тема иконок файлов у меня - Material Icon Theme. Ещё популярны VS Code Great Icons.
6. Есть особое направление в темах для тех, кому хочется минималистичных тем без обилия цветов. Имеется целый набор минималистичных тем: например Min Theme. Или вот светлая тема Alabaster от нашего соотечественника и создателя шрифта Fira Code.
7. Некоторые известные программисты имеют собственные темы подсветки кода, которые вы можете часто увидеть в их редакторах. Wes Bos (автор популярных курсов по фронтенду) разработал фирменную тему Cobal2, а Дэн Абрамов (из команды React) Subliminal. 
8. Если вам нравятся необычные цвета, то имеется классная тема Pop N' Lock.

update по состоянию на 2021 год, версия VS Code 1.60:

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

1. Bracket pair colorization теперь встроен прямо в редактор кода и работает очень быстро. Раскрашивание скобок можно включить в настройках. Соответственно оригинальное расширение можно удалить и забыть.
2. Аналогичным образом разработчики Microsoft написали собственную реализацию Live Server, которая работает как внутри редактора кода, так и с внешним браузером. Отличается от оригинального live server тем, что реально live - способен перерисовывать страницу прямо на лету, пока вы переписываете код (после каждого нажатия), а не после сохранения страницы. 
3. Так как GitHub это теперь тоже собственность Microsoft, то таким образом фирменную тему оформления можно считать официальной. Странно, что её не добавили в дистрибутив, учитывая что у неё 2 миллиона скачиваний. 

А нужно ли учить Bootstrap?

Многие начинающие веб-разработчики, насмотревшись многочисленных обучающих видеороликов от старых фрилансеров на Ютубе ("старый" в данном контексте означает, что уровень навыков может быть не совсем актуален в текущих условиях), очень сильно убеждены, что обязательно надо знать такой CSS фреймворк как Bootstrap и тогда тебя ждёт успех, а верстать станет очень просто. И они обычно очень удивляются, что на профессиональных курсах их этому и не собираются учить.

Хочу выразить своё отношение к этому вопросу. Дело в том, что для начинающего разработчика популярный Bootstrap представляет собой некий "костыль", который помогает делать первые шаги и особо не разбираться в том как работает css, одновременно вводя новый уровень абстракции, заставляя учить его многочисленные классы. Как только у человека появляется хотя бы немного понимания layout страницы, появляются навыки располагать элементы на странице и понимание адаптивности (media запросы), то следует эти костыли сразу же отбрасывать. Тем более ни в какой серьёзной компании с CSS фреймворками не работают, ну кроме совсем маленьких студий, которые свои сайты верстают буквально на коленках. И даже в последнем случае есть исключения, когда с Bootstrap работают на профессиональном уровне (с исходниками), подгоняя его под конкретные нужды и делая собственные UI наборы для него. Так же я видел, как от bootstrap подключают отдельные компоненты из исходников в scss и компилируют в свой общий css, но все эти заморочки с автоматизацией вёрстки не для новичков. Кроме того, следует различать как минимум три версии Bootstrap:

1. Bootstrap 3, которая до сих пор используется в устаревших проектах. Она прекрасно работает на старых версиях Internet Explorer и сделана на устаревших float. 
2. Современная версия Bootstrap 4 работает уже на flexbox, которые так себе отображаются даже в последней живой версии IE 11. 
3. Новейшая версия Bootstrap 5 (сейчас находится в стадии альфа-версии, но переход уже начат), в которой выброшены на помойку истории все старые технологии типа jQuery и поддержка любых версий Internet Explorer. Кроме того он изначально полностью сделан на SASS, позволяя вам брать от него нужные части и очень просто кастомизировать под себя (с помощью custom свойств CSS и utility API). А ещё они сделали собственный сет иконок, так что их можно использовать в своих проектах вместо Font Awesome, которые от которых, по большому счёту, сплошной вред. В новой версии они действительно сделали очень много, чтобы предоставить вам инструменты для кастомизации и делать непохожие друг на друга сайты (главная претензия противников Bootstrap). 

Разумеется Bootstrap не стал бы настолько популярным, если бы не обладал положительными сторонами. CSS фреймворки это отличная вещь, если вы собираетесь быстро сделать для себя какой-то прототип (например "админку" для сайта или форму), а заморачиваться с вёрсткой и отрисовкой всяких кнопочек и форм ввода вам никак не хочется - вот тогда на помощь придут фреймворки и сделают красиво почти без особых затрат. Ну разве только затрат на подключение лишнего css, который увеличит время загрузки вашего сайта. Именно поэтому стоит избегать фреймворков на сайтах, где важна оптимизация и быстродействие. CSS фреймворки незаменимая вещь при обучении программированию на javascript фреймворках, где всё ваше внимание должно быть направлено на программирование, а не на дизайн. 

А теперь расскажу о CSS фреймворках с которыми я познакомился. 

1. Bootstrap. Это классика от компании Twitter и её стоит знать, но вовсе не заучивать, как думают новички. Самые важные для понимая вещи это сетки (разделение на ряды, контейнеры и знаменитая 12-колоночная система) и некоторые классы-утилиты (отступы, размеры, работа со шрифтами). Все эти вещи примерно похожи во всех остальных фреймворках и если вы выучите их использование у Bootstrap, то без проблем сможете пользоваться и в других фреймворках, которые отличаются лишь названиями классов и дизайном элементов интерфейса. В школе W3C имеется отличное пособие на английском языке (автоматический переводчик Google тоже неплохо переводит), которое учит основам Bootstrap на простых примерах. Кстати, для популярных фреймворков вы обязательно найдёте приличный перевод документации на русский язык. Имеется он и для документации Bootstrap.
2. Bulma CSS. Прекрасный небольшой фреймворк, который я рекомендую использовать в качестве замены огромному Bootstrap. Документация не очень большая, так что с изучением проблем не будет. В качестве названий классов использует предложения на английском языке, а не аббревиатуры. Не тащит с собой огромного количества элементов, позволяет модульность из коробки, когда вы подключаете в свой проект только то, что вам непосредственно нужно: например, вам нужны только кнопки и формы, так зачем тащить за собой всё остальное? 
3. Materialize CSS. Большой и крутой фреймворк от программистов Google. Позволяет делать интерфейсы в стиле Material Design как на Android. Ваше приложение будет одинаково выглядеть как в вебе, так и на мобильном устройстве. Документация мне показалась попроще, чем у Bootstrap. Много элементов интерфейса завязано на javascript, так что небольшое понимание его работы стоит иметь. Material design это не собственность Google, а концепция в дизайне, поэтому любые сторонние разработчики могут создавать свои фреймворки. Вы можете попробовать Material Lite от сторонних разработчиков, преимущество которого в том, что он не завязан на javascript. 
4. Sematic UI. Большой фреймворк с поддержкой тем. Похож на UIKit. 
5. Pure CSS. Крайне минималистичный фреймворк в 3,8 КБ, да ещё и с модульностью. Можете скачать исходники и полностью перенастроить его под свои нужды. 
6. Picnick CSS. Небольшая CSS библиотека в которой уже переопределены стандартные свойства оформления. Подойдёт вам, если вы не хотите вообще писать какой-либо CSS, а вам нужно просто украсить вывод в html. Такие фреймворки ещё называются "class-less" (без классов). 
7. Mustard UI. Ещё один простой и минималистичный фреймворк в 5 КБ. Документация занимает всего 10 экранов. Разумеется можно скачать все модули и легко перенастроить через переменные. 
8. Tachyons CSS Toolkit. Если вам мало минималистичных фреймворков, то вот вам ещё один. Обладает большими возможностями по настройке и использует что-то вроде атомарного CSS, когда много всяких классов, которые заменяют свойства css. 
9. Foundation. Большой коммерческий фреймворк, который любят всякие крупные корпорации и сайты. Прямой конкурент "бутстрапу". Имеет возможности по гибкой настройке. 
10. Tailwind CSS. Особый фреймворк "без фреймворка", который основан на идее атомарного css. Не всем такой подход вообще нравится, лично я был в шоке, когда впервые увидел - меня учили не складывать html и css вместе в один код, потому что это похоже на inline css. Тем не менее такой подход позволяет очень быстро кодить сайты и делать прототипы, не влезая в дебри css стилей. Особо любим фронтендерами, которые используют фреймворки - им как раз удобнее держать логику и дизайн в одном компоненте. 

Как видите, Bootstrap лишь один из инструментов и далеко не самый главный, хотя и самый популярный, потому что именно в нём придумали сетку и систему именования классов, которыми сейчас пользуется половина веб-разработчиков мира. В любом случае вам необходимо на достаточно хорошем уровне знать HTML и CSS, чтобы уметь работать с любым фреймворком профессионально и чтобы они были для вас реально полезными инструментами в разработке, а не костылями, которые ограничивают вашу фантазию. Удачи в работе! 

P.S.: Вот ещё один список фреймворков на любой вкус и для любых целей.