Я фронтенд-разработчик с опытом около 3 лет. Уже месяц ищу работу, откликаюсь каждый день - и я просто в ярости. Картина на hh.ru везде одинаковая: под любой вакансией уровня middle или даже junior-middle - 1000-2000 откликов.

Причина понятна - рынок перенасыщен новичками. И большая часть этого перенасыщения создаётся крупными «академиями», которые массово продают курсы.

Что реально происходит:

1. Им важно количество, а не качество.
Это потоковый бизнес. Их цель - продать как можно больше экспертных «профессий с нуля», а не выпускать специалистов, которые реально нужны рынку.

2. Формируют ложные ожидания.
Слоганы вроде «трудоустройство за 3 месяца», «зарплаты от 150-200 тысяч» или «мы гарантируем оффер» - не совпадают с реальностью. Это маркетинг.

3. Ежегодно - тысячи выпускников, а вакансий почти нет.
Рынок просто не способен переварить такой объём начинающих разработчиков. Компании нанимают крайне выборочно, а нужды в таком количестве джунов нет.

4. Проигрывают все.
- Новички ищут работу месяцами и не могут пробиться.
- Разработчики с опытом тонут в общей массе резюме.
- Работодатели получают сотни нерелевантных откликов и вынуждены вручную отсеивать то, что учебные центры учат отправлять везде подряд.

5. Выпускников прямо учат откликаться на всё подряд.
Им говорят: «Чем больше откликов - тем выше шанс».
Результат - резюме людей с опытом просто не видят среди валов откликов из десятков учебных потоков. Это ещё сильнее снижает шансы тех, кто реально умеет работать.

6. Цена вопроса - 200-300 тысяч рублей.
Люди берут кредиты, учатся, а потом оказываются в ситуации, когда вакансий объективно меньше, чем выпускников.
Их сталкивают между собой в одну и ту же воронку, которая уже давно переполнена.

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

Рынок перегрет. И даже с 3 годами опыта сегодня становится невероятно сложно найти работу.

Этот текст - это крик безысходности.
Просто посмотрите на цифры на hh.ru, сравните их с рекламой «академий» - и делайте выводы до того, как отдадите 200 тысяч за обещание, которое никто не сможет выполнить.

Дисклеймер. На pikabu нет редактора кода, поэтому код картинками, но в конце я дам ссылку на github, откуда можно будет скопировать блоки кода.

Когда мы создаем контент WordPress, чаще всего используем редактор Gutenberg. Он появился в версии WordPress 5.0 (в декабре 2018 года) и заменил старый добрый TinyMCE. TinyMCE был текстовым редактором из эпохи Web 1.0: над полем <textarea> находились простые кнопки вроде «жирный», «курсив» и «ссылка». Весь текст хранился одной сплошной лентой HTML-кода, и переместить блок или вставить что-то посередине было крайне (sic!) неудобно. Кроме того, TinyMCE не поддерживал адаптивную 12-колоночную разметку, которая стала стандартом де-факто во времена Web 2.0, поэтому сложные макеты приходилось строить вручную с помощью HTML и CSS.

Gutenberg — редактор нового поколения

Gutenberg решил эти проблемы. Теперь каждая часть страницы существует как блок — заголовок, параграф, цитата, изображение, таблица или фрагмент кода живут отдельно. Это делает редактирование проще, а страницы — гибкими и адаптивными.

Контент должен одинаково хорошо выглядеть на любых устройствах — от телефона до широкоформатного монитора. Когда сайт не адаптируется к экрану, текст «плывёт», изображения обрезаются, а таблицы вылезают за границы блока. Решается это с помощью адаптивной разметки, которая автоматически перестраивается под ширину экрана.

В основе такой разметки лежит 12-колоночная сетка. Она стала стандартом благодаря фреймворкам вроде Bootstrap и Foundation, и Gutenberg использует тот же принцип: ширина контейнера делится на 12 равных частей (по 8.33 % каждая), из которых можно собрать практически любую компоновку:

1 колонка → [████████████] 100%
2 колонки → [██████][██████] 6/6
3 колонки → [████][████][████] 4/4/4 4
4 колонки → [███][███][███][███] 3/3/3/3

На мобильных устройствах колонки выстраиваются вертикально — контент остаётся читаемым при любой ширине экрана.

Внутри Gutenberg эта идея реализована через блок “Колонки” (Columns), который автоматически подстраивает расположение элементов под ширину окна.
На уровне HTML это контейнеры с классами wp-block-columns и wp-block-column, а за выравнивание отвечает Flexbox:

По сути, Gutenberg автоматически создаёт гибкий контейнер, который можно делить на нужное количество колонок. При уменьшении экрана колонки становятся вертикальными — и это достигается не JavaScript-скриптами, а чисто с помощью CSS.

Одна и та же страница выглядит корректно и на телефоне, и на мониторе — без единой строчки JavaScript.

Но из всех возможностей редактора сейчас нас интересует всего один элемент — блок кода. Он используется, когда нужно показать пример программы, скрипта, конфигурации или команды терминала. Технически это простой HTML-контейнер: <pre> ... </pre>

Gutenberg и TinyMCE отображают его одинаково — как текст, набранный моноширинным шрифтом (чаще всего Consolas, Courier New или Monaco). Без подсветки, без нумерации строк, без выделения синтаксиса. Это решение логично — большинству пользователей подсветка не нужна, а включи её для всех, и редактор стал бы сложнее и тяжелее. Но если вы публикуете примеры кода, инструкции или статьи для разработчиков, то отсутствие подсветки делает материал трудно читаемым. В этом случае на помощь приходит библиотека Prism.js, которая решает проблему просто и изящно.

Мне, почему-то кажется, что программисты Pikabu работают на Gutenberg. А потому, что в Gutenbergе нет подсветки синтаксиса языков программирования. Сейчас я покажу, как решить этот вопрос без установки внешних плагинов. Нам понадобятся: Prism.js, Prism.css 👇👇👇👇

Prism.js — библиотека для подсветки кода

Prism.js — лёгкая и быстрая библиотека, созданная специально для подсветки синтаксиса на веб-страницах. Она не перегружает редактор и делает статьи с кодом читаемыми и профессионально оформленными. Таже она не требует серверных модулей и работает полностью в браузере: скрипт на JavaScript анализирует содержимое тегов <pre><code>..., а таблица стилей prism.css раскрашивает ключевые слова, строки, комментарии и другие элементы кода.

По сути, Prism делает для веб-страниц то же, что IDE делает для программистов — делает код понятным и визуально структурированным.
Поддерживаются десятки языков программирования — от HTML, CSS и JavaScript до Python, PHP и Go — и множество плагинов: нумерация строк, подсветка отдельных строк, отображение языка, копирование в буфер, тёмные и светлые темы.

Пример разметки:

После подключения Prism.js и Prism.css этот код автоматически подсвечивается в браузере, без дополнительного вмешательства.

Библиотека особенно хорошо сочетается с Gutenberg, потому что не требует изменения самого редактора — она работает уже на этапе отображения статьи, обрабатывая всё, что находится между тегами <pre> и <code>.

Что такое тема в WordPress и почему работать нужно через дочернюю.

В WordPress тема — это набор файлов, которые определяют внешний вид сайта: шаблоны страниц, стили оформления, типографику, шапку и подвал, поведение меню и многое другое. Проще говоря, именно тема отвечает за то, как ваш сайт выглядит и реагирует на действия пользователя. Тему можно установить прямо из админки — “Внешний вид → Темы → Добавить” — или загрузить архив вручную в папку /wp-content/themes/. После активации она начинает управлять всей визуальной частью сайта.

Однако вносить правки напрямую в файлы темы — плохая идея. Как только разработчики выпустят обновление родительской темы, WordPress заменит старые файлы новыми, и все ваши изменения будут утеряны. Вся. написанное вами в functions.php или CSS-правило в style.css исчезнут после обновления.

Чтобы избежать этого, в WordPress предусмотрен безопасный механизм — дочерние темы. Дочерняя тема наследует всё содержимое родительской, но хранит собственные правки отдельно. Таким образом, вы можете обновлять родительскую тему сколько угодно, а весь ваш код, настройки и стили останутся нетронутыми. Создать дочернюю тему просто. В каталоге /wp-content/themes/ создайте папку, например mytheme-child, и добавьте в неё файл style.css с базовым описанием. Важно: параметр Template должен точно совпадать с названием папки родительской темы.

1. Theme Name

Это отображаемое имя темы.
Оно появится в панели администратора WordPress в разделе Внешний вид → Темы.
Можно написать что угодно — главное, чтобы название было понятным и уникальным.
Пример: Theme Name: Neve Child

2. Template

Это самое важное поле во всём блоке.
Оно говорит WordPress, от какой родительской темы наследуется данная дочерняя тема.
Значение должно в точности совпадать с именем папки родительской темы (а не с её названием в админке).
Например: если родительская тема находится по пути `/wp-content/themes/mytheme/`
то в поле должно стоять:
Template: mytheme

Если ошибиться — WordPress не распознает родителя, и дочерняя тема просто не активируется.

3. Version

Это внутренний номер версии вашей темы — для порядка и контроля изменений.
WordPress не использует это поле функционально, но оно помогает вести версионирование и отличать ваши обновления.

• Обязательные поля: Theme Name, Template

• Необязательное, но полезное: Version

• Дополнительно можно добавить Description, Author, Author URI, Tags, License и т. д.

Далее создайте functions.php и подключите стили родительской темы, а затем — свои собственные.

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

Как подключить Prism.js к WordPress

По сути, Prism делает для веб-страниц то же самое, что делают IDE для программистов — делает код понятным и визуально структурированным. Поддерживаются десятки языков программирования (от HTML, CSS и JavaScript до Python, PHP и Go) и множество плагинов: нумерация строк, подсветка конкретных строк, отображение языка, копирование в буфер, тёмная и светлая темы.

Все действия выполняются в❗ дочерней теме❗, чтобы при обновлении родительской вы не потеряли свой код.

Подключить Prism.js к WordPress можно в несколько шагов — быстро и без плагинов.

Шаг 1. Скачиваем сборку

Сайт: https://prismjs.com/download.html

Настройка сборки

Раздел Download состоит из нескольких блоков.

- Compression level. Выберите параметр Minified — это минимизированная версия библиотеки, она весит меньше и загружается быстрее.
- Core. Этот блок включён по умолчанию и обязателен — он содержит основное ядро библиотеки Prism.
- Languages. Выберите языки, для которых хотите включить подсветку синтаксиса.
Рекомендуемый набор:

• HTML (Markup)

• CSS

• JavaScript

• PHP

• Python

• JSON

При необходимости добавьте другие языки — например, Bash, SQL, C-like, Markdown, YAML, Go и т.д.

Plugins.
Вы можете добавить дополнительные функции.
Наиболее полезные из них:

• ✅ Line Numbers — нумерация строк

• ✅ Toolbar — панель инструментов

• ✅ Copy to Clipboard Button — кнопка для быстрого копирования кода

• (опционально) Show Language — отображение языка над блоком

• (опционально) Highlight Lines — подсветка отдельных строк

Скачивание файлов

После того как вы выбрали нужные компоненты, прокрутите страницу вниз и нажмите две кнопки:

• DOWNLOAD JS — чтобы скачать файл prism.js

• DOWNLOAD CSS — чтобы скачать файл prism.css

Оба файла необходимо поместить в папку вашей дочерней темы, например:
/wp-content/<themes>/<my-child-theme>/prism.js
/wp-content/<themes>/<my-child-theme>/prism.css

Подключение файлов в WordPress

Когда файлы prism.js и prism.css размещены в папке дочерней темы, их нужно подключить.
Для этого откройте файл functions.php вашей темы и добавьте следующий код:

Добавляем автоматическую нумерацию строк

Чтобы не добавлять класс вручную, используем фильтр WordPress, который добавит его ко всем блокам кода:

Экранируем HTML-символы

Если в коде встречаются символы < или >, браузер может попытаться интерпретировать их как HTML-теги. Чтобы этого избежать, добавим фильтр, который заменяет эти символы на безопасные HTML-сущности при сохранении поста:

5. Добавляем стили оформления

Добавьте в style.css дочерней темы:

Меня тут девушка мастер подземелий в какой-то момент озадачила, мол тыж фронтенд программист, сделай мне так, чтобы карты предметов можно было создать и распечатать. Ну и я как совсем еще неопытный фронтенд программист стал во всю прыть ваять сей продукт.

Короче говоря, вот ссылка.
Все абсолютно бесплатно, ни рекламы, ни какого-либо мне известного налюбилова здесь нет. Старался в первую очередь для девушки, но может кому еще понравится/пригодится.

Удивительным образом, UI/UX дизайнер - это прям отдельная профессия, а в Figma я не заглядывал.

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