iAdramelk

Английская версия: https://evilmartians.com/chronicles/bootstrap-an-intervention

Вводная часть

У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:

1. Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.

2. Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент h1.title, на него сработают все правила для тегов h1 и все правила для класса .title. Так как весь html состоит из тегов, то правил которые п

iAdramelk

Ща будет длинная простыня текста, готовьтесь. Начнем с задач.

Вот решили мы упороться за скорость загрузки и на каждую страницу сделать бандл в котором у нас будет только используемый на ней CSS-правила

Как нам это сделать? А как не забыть все состояния страницы (авторизован/не авторизован)? А те что из JS добавляются/изменяются?

Или вот мы решили пойти дальше и сократить названия всех нашил CSS-классов для чего-то вроде "aRz", как делает Gmail.

Как нам это сделать везде и ничего не забыть? Да, в JS тоже.

iAdramelk

А поговорить я хочу сегодня про VirtualDOM.

Вот небольшой JS Bin с илююстрацией того о чем я вчера говорил про HTML-в-JS: https://t.co/30cEuWYd61

Код можно запустить и посмотреть в консоли (браузерной, не JS Bin'овской) что именно отдает рендер и как они комбинируются.

Главное что нужно понимать из этого примера:

1. Компоненты возвращают объект с описанием какого-то куска HTML.

iAdramelk

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

1. Я считаю что модель верстки компонентами для любого крупного проекта подходит лучше, чем любай другая.
2. Компонент включает HTML, CSS, JS, тесты, локализации, мануал и т. д. Эти файлы проще всего хранить и использовать вместе.
3. Браузер это ассемблер которому мы кормим оптимизированный машинный код в разных форматах.
4. CSS, JS и HTML должны знать структуру друг друга, это позволяет гораздо эффективнее их сокращать, пожимать и оптимизировать.

Использование в последние годы штук вроде Webpack, React и CSS Modules меня лично убедило что при таком подходе к коду жить проще и приятнее.

Это все хорошо пока ты делаешь SPA, но есть проекты которым противопаказано быть SPA, а пользы от компонентов и оптимизаций было бы много.

iAdramelk

Star wars: Rogue One

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

Итак, первая встреча с Повстанцами: Мон Мотма угрожают ГГ-не скрывающемуся и воюющему с Империей, что она выдаст её империи если она не будет с ними сотрудничать. При этом все присутствующие в курсе, что ГГ-ня скрывается чтобы Империя не использовала её как заложника для давления на её отца. Очень интересно чего хотят повстанцы добиться этой угрозой, но как ни странно чего-то добиваются.

ГГ-ня при этом первые полчаса после встречи с повстанцами и узнав о том что её отец жив совершенно им не интересуется и найти не пытается.

При прилете на пустынную планету Главшпион хочет выйти на повстанцев встретившись с с сестрой погибшего повстанца-пилота. Кажется этот тот пилот которого Главшпион сначала

iAdramelk

Keybase proof

I hereby claim:

• I am iadramelk on github.
• I am iadramelk (https://keybase.io/iadramelk) on keybase.
• I have a public key ASDnEDBeiGUB_gZeQLGTA8yT0C2ynAZt82AdsOXobRcKSgo

To claim this, I am signing this object: