Занимательные задачи
снова выходят:)

По JavaScript:
https://t.me/javascript_tricker

По PHP:
https://t.me/php_tricker

По Python:
https://t.me/python_tricker

Проблемы модульности в CSS

В современной верстке принято разбивать части сайта на независимые модули. Но есть проблема: обычный CSS это не поддерживает. Сейчас я покажу на примере. Пусть у нас есть следующая верстка:
<div class="parent">
<span class="elem">+++</span>

<div class="child">
<span class="elem">---</span>
</div>
</div>

Пусть я хочу, чтобы у меня был блок parent и блок child. Эти блоки должны работать независимо. Это значит, что если я стилизую какой-то элемент из parent, то элемент с таким же именем в блоке child стилизоваться не должен.

Собственно, в этом и проблема. Для примера я специально сделал два элемента с классом elem в обоих наших блоках. Пусть я хочу стилизовать элемент из блока child. Я напишу следующий CSS код:
.parent .elem {
color: red;
}

Этот CSS, однако, зацепит как elem из родительского блока, так и elem из дочернего. Что же с этим делать? Проблему можно решить через соглашения, которые накладываются на имена классов. В данном случае соглашение - это правило, которое мы накладываем на имена наших CSS классов. Мы говорим, что будем следовать этому правилу и не будем его нарушать. Наиболее известным таким соглашением является БЭМ от Яндекс https://ru.bem.info/methodology/.

Перепишем нашу верстку в стиле БЭМ:
<div class="parent">
<span class="parent__elem">+++</span>

<div class="child">
<span class="child__elem">---</span>
</div>
</div>

Стилизуем наш элемент:
.parent__elem {
color: red;
}

Как вы видите, суть соглашения в случае БЭМ - это то, что в имени элемента указывается имя родителя. Это решает описанную выше проблему. Но так как БЭМ это по сути костыль, то проблема решается не очень хорошо. Нам приходится дублировать имена родителя в каждом его элементе. Из-за этого код становится очень многословным и нарушает принцип DRY (https://code.mu/ru/theory/glossary/DRY/).

Новая модульная система в CSS

В предыдущем посте мы рассмотрели проблему модульности в CSS. К счастью, в современном CSS появилась новая команда @scope, с помощью которой можно сделать настоящие модули. Эта команда позволяет написать селектор, который стилизует от заданного родительского класса до заданного дочернего. Ее синтаксис выглядит так:
@scope (селектор1) to (селектор2) {
.elem {
color: red;
}
}

Давайте решим с ее помощью задачу из предыдущего поста. Для этого нам также придется ввести соглашение, но более простое чем в БЭМ. Мы скажем, что все теги, которые должны быть модулями,
будут иметь класс block:
<div class="block parent">
<span class="elem">+++</span>

<div class="block child">
<span class="elem">---</span>
</div>
</div>

Давайте теперь сделаем так, чтобы стили, заданные для класса block, не распространялись внутри дочерних классов блок. Говоря другими словами, сделаем так, чтобы мы могли стилизовать elem из родителя, не зацепив elem и дочернего блока. Используем команду @scope:
@scope (.parent.block) to (.block) {
.elem {
color: red;
}
}

Что дает новая блочная система? Если вы знаете БЭМ, то в ней есть также соглашение на то, что мы среди всех богатых возможностей CSS будем использовать только классы. Это сделано для того, чтобы костыль с соглашениями имен не сломался. Но в модулях через @scope мы можем делать любые селекторы! Давайте посмотрим на примере. Пусть у нас есть обычные абзацы как в родителе, так и дочернем блоке:
<div class="block parent">
<p>
+++
</p>
<p>
+++
</p>

<div class="block child">
<p>
---
</p>
<p>
---
</p>
</div>
</div>

Стилизуем абзацы из родительского блока, не захватив абзацы из дочернего:
@scope (.parent.block) to (.block) {
p {
color: red;
}
}

Поддержка
К сожалению, команда @scope еще имеет недостаточную поддержку. Если смотреть на caniuse, то по мировой статистике ее поддерживают 85% браузеров. Смотрите приложенный скрин.

Но пройдет не так много времени и соглашения типа БЭМ и других аналогичных уже станут не нужны:)

P.S.
Да, @scope еще не поддерживается достаточно. Но его уже можно применять в специфичных проектах. Например, в своих внутренних проектах, которые я делал для себя, я использую @scope уже около года.

P.P.S
Честно вам скажу, я не люблю БЭМ. Он слишком многословный. Поэтому на сайте code.mu другая модульная система, придуманная мною. Она менее многословная, но все равно костыльная.

Но, пару недель назад, я залез в верстку сайта code.mu, чтобы добавить несколько новых блоков. И решил заодно перевести сайт на модульную систему через @scope. Да, еще вроде как рановато:) Но аудитория сайта технически подкованная и не ленится обновлять браузер. Поэтому я полагаю, что особых проблем не будет.

Обновление сайта code.mu

На днях состоится обновление движка сайта. Сайт прекращает поддержку старых браузеров (кому интересны технические подробности, смотрите предыдущие 3 поста). Если в вашем браузере не будут работать CSS стили, ваш браузер устарел, обновитесь.

Если будет сломано что-то другое, пишите мне в личку, я поправлю)

P.S.
Кто по каким-то причинам не может обновить браузер - можно заюзать офлайн версию со старой блочной системой https://t.me/codemu/264.

P.S.S
В рамках данного обновления будет
добавлен перевод сайта еще на 11 языков.

Набор на обучение по Java
В формате репетиторство.

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

Стоимость: 20$ за 1.5 часа.

Внимание:
Количество мест на данный формат ограничено!
Сейчас есть только 2 свободных места.

Для записи пишите мне в личку в личку @trepachev_dmitry.
Я отвечу на ваши вопросы, потестирую вас и составлю план занятий.


В рамках данного курса вы сможете изучить Java с нуля, либо с вашего текущего уровня. Что мы будем изучать: основы синтаксиса, переменные, примитивные и ссылочные типы данных, массивы, операторы, условия, циклы, работу со строками (String, StringBuilder). Мы глубоко погрузимся в ООП: классы и объекты, инкапсуляцию, наследование, полиморфизм, абстрактные классы и интерфейсы. Изучим основные структуры данных коллекций List, Set, Map, работу с исключениями, обобщения (Generics), основные паттерны проектирования.

Освоим современные возможности языка: лямбда-выражения, Stream API для работы с данными, модульность. Научимся работать с файловой системой, вводом-выводом, многопоточностью и конкурентным программированием. Познакомимся с сетевым программированием и созданием простых клиент-серверных приложений.

В части профессиональных инструментов и экосистемы изучим: систему сборки Maven/Gradle, модульное тестирование с JUnit и Mockito. Освоим работу с реляционными базами данных с помощью JDBC и ORM-фреймворка Hibernate, основы языка запросов SQL. Познакомимся с созданием веб-приложений на основе сервлетов и Spring Framework (Core, Boot, MVC, Data, Security), а также основы REST API. Для анализа данных рассмотрим библиотеки, такие как Apache Commons, а для знакомства с data science-стеком — основы работы с Apache Spark.

Курс позволит вам не только понять язык, но и научиться создавать надежные, современные приложения, используя лучшие практики и самые востребованные инструменты мира Java.

Новых учебников не будет:(

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

Нужна ваша поддержка донатом.
Собираем средства на учебники по
Java, Kotlin, Django, Laravel, Simfony, Docker.

Ваши донаты позволят выпустить эти учебники в короткие сроки.
Подробности тут:
https://code.mu/ru/donate/

P.S.
Все, кто сделает донат, получат ранний доступ к новым учебникам. Кроме того, для вас будет проведен первый бесплатный курс по новым темам.

Выложил переводы еще на партию языков

Теперь code.mu переведен на 50 языков:)

В соответствии с распоряжением Оперативно-аналитического центра при Президенте Республики Беларусь, с 00:00 18 декабря до 23:59 19 декабря 2025 года белорусские хостинг-провайдеры ограничат доступ к виртуальному хостингу из-за пределов Республики Беларусь.
Эти меры обусловлены угрозами для объектов информационной инфраструктуры и информации, обрабатываемой с их использованием.

Пока можно воспользоваться офлайн версией сайта https://t.me/codemu/264

Бесплатные курсы по Python
начало перенеслось с 11 на 18 декабря,
то есть на сегодня

желающие - можете присоединяться к нам тут:
https://t.me/+v9WeYJ-2fi5iY2Uy

сегодня будет первое занятие в 20.15 по москве

Бесплатная онлайн лекция "Асинхронность в JavaScript"

Лектор: Трепачёв Дмитрий, автор сайта code.mu
Начало: 21 января в 20.00.
Продолжительность: 1.5-2 часа

Лекция пройдет онлайн в виде стрима. На лекции можно будет задавать вопросы в чате. Запись лекции останется, но только на 4 дня.

Будем изучать асинхронность. Эта тема традиционно вызывает сложности у изучающих JavaScript, даже после прочтения учебника. Мы с вами изучим простые примеры асинхронности, затем перейдем к коллбэкам, промисам, изучим работу с async-await, перехватом исключительных ситуаций. Затем мы с вами изучим модель подписок (не вошло в учебник), а также поработаем с технологией AJAX через функцию fetch.

P.S.
Есть вопросы?
Можете написать их мне в личку @trepachev_dmitry


Для записи вступите в следующий канал:
https://t.me/+Zk-oeVPJ1Ws1NjFi

НОВИНКА
Каждую среду будут выходить
бесплатные онлайн лекции!

Лекции будут по HTML CSS, JavaScript, PHP, Python.
Первая лекция стартует уже 21-го января (пост выше).

В моих планах:
асинхронность в Python
работа с CSS фреймворком Bootstrap
работа с CSS фреймворком Tailwind
работа с try-catch в PHP
работа с сокетами в NodeJS
разработка телеграмм ботов на NodeJS и Python
парсинг сайтов на NodeJS
и другие:)

P.S.
Предлагайте темы лекций в комментариях:)
Можно предлагать как простые темы, так и сложные.
Это могут быть темы, которые есть в учебнике, но вы в них не смогли достаточно разобраться. На лекции я расскажу про них подробнее и понятнее. Либо это могут быть темы, отсутствующие у учебнике.

Если тема мне понравится и наберется достаточное количество желающих, я поставлю ее в очередь:)

P.S.
Планируется, что в дальнейшем по средам будет две лекции подряд на разные темы и языки.

И кстати, лекции идут не только по средам:)
Продолжается бесплатный онлайн курс по основам Python. Сегодня в 20.15 мы будем разбирать циклы. Желающие - присоединяйтесь к нам тут https://t.me/+v9WeYJ-2fi5iY2Uy

КУРСЫ по Laravel 12
занятия в минигруппах

Лектор: Трепачёв Дмитрий, автор сайта code.mu
Расписание: пн, чт в 21.00-21.45 по москве
Продолжительность: 10 лекций + 1 месяц практика

Начало: по набору минигруппы (минимум 3 человека),
но не позже 2-го февраля.

Стоимость: 100$ за курс.
при записи до 23-го января СКИДКА: 75$ за курс.
возможна оплата в рассрочку несколькими платежами


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


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

После окончания курса - практика. Под моим руководством вы сможете реализовать 3 учебных проекта для закрепления навыков. После учебных проектов каждому участнику я выдам еще 2 персональных проекта. Эти проекты будут выложены на хостинг и вы сможете добавить их в портфолио.

---

Для записи на занятия пишите мне в личку:
в личку @trepachev_dmitry

Бесплатная лекция
Асинхронность в JavaScript
Сегодня в 20.00 по Москве.

Желающие - присоединяйтесь к нам тут:
https://t.me/+Zk-oeVPJ1Ws1NjFi

Бесплатные курсы по JavaScript с нуля
Занятия в виде онлайн лекций

Лектор: Трепачёв Дмитрий, автор сайта code.mu
Начало: 2 февраля
Расписание: пн, чт в 19.30-20.15 по москве
Продолжительность: 10 лекций + 2 недели практики

На лекциях будет теория, а затем
будет выдаваться домашнее задание.

Вопросы можно задавать как на лекции,
так и в любое время, без ограничений!

Для записи вступите в следующий канал:
https://t.me/+4yIJkDUdSt5mN2Iy

Продвинутые курсы Python
занятия в минигруппах
расписание: пн, чт в 20.15 по Москве

группа уже набрана,
начинаем в понедельник, 2-го февраля
но еще есть места:) Желающие - пишите в личку для записи.

СКИДКИ при записи до 30 января
возможна оплата в рассрочку

Что будем изучать:
продвинутый курс Python, курс по парсингу на Python,
курс по фреймворку Django.

Продвинутый курс
15 лекций + 2 недели практики
200$

Курс парсинга
11 лекций + 2 недели практики
100$

Курс по Django
15 лекций + 4 недели практики (на практике будем делать проекты в портфолио)
200$

Все курсы Python оптом:
250$ при записи до 30 января
450$ после


Для записи на платные курсы пишите мне в личку: @trepachev_dmitry

P.S.
Также действует акция: приходите с другом - каждому скидка 10% (скидки суммируются)

———-

Программа на Продвинутый курс Python
15 лекций + 2 недели практики

1
Область видимости функций, рекурсия

2
Лябмда, замыкания, включения, декораторы.

3
Работа с датой и временем

4,5
Регулярные выражения

6
Исключительные ситуации

8
Работа с файлами и папками

9
Модули и виртуальное окружение
Асинхронность

10,11
Базы данных и язык SQL,
Организация БД

11,12,13
ООП

14,15
Библиотеки numpy, pandas, itertools, SQLAlchemy

—————

Курс парсинга сайтов
11 лекций + 2 недели практики

1,2
Парсинг регулярками

3,4
Парсинг через beautifulsoup

5
Библиотека requests

6
Поэтапный метод и метод Паука

7
Парсинг CSS, JS, картинок, аудио, видео.
Отправка форм.

8
Работа с куками. Обход авторизации.

9
Автоматизация парсинга.
Обход капч через сервисы распознования.
Многопточный парсинг через покупку прокси.

10
Парсинг через управление браузером через Selenium

11
Парсинг через библиотеку Scrapy