ErBlog
-

Smart layouts
№9 Заметки к докладу "Smart layouts". Живой пример того, насколько динамично и адаптивно может вести себя лейаут при использовании современных возможностей CSS и HTML. Спойлер: настолько, что можно сказать, что можно назвать его умным. -

Scope in CSS
№8 Заметки к докладу "Scope in CSS". Что надо знать о скоупе в CSS? Любой CSS-селектор и есть скоуп. Но сейчас есть гораздо более интересные возможности по управлению скоупом: скоуп-бублик, определение доступности и прочие чудеса директивы @scope. Правда, лучший способ всё ещё — уникальные имена классов. -

Design Token Architecture
№7 Заметки к докладу "Design Token Architecture". Доклад о том, сколько рутинной работы мы делаем раз за разом, вновь и вновь, для того чтобы идентичность компаний отражалась в их сайтах и приложениях. И о том, как уменьшить количество повторяющейся работы, используя дизайн-систему на базе дизайн-токенов. -

Multicol and fragmentation
№6 Заметки к докладу "Multicol and fragmentation". Глубокий доклад о том, какие сложности стоят перед создателями спецификаций. Задачи, которые решались легко для статической печати на бумаге и в книгах, совсем не так легко решаются в динамическом мире веба, особенно когда их решение никому не нужно. -

Select it!
№5 Заметки к докладу "Select it! Styling new HTML UI capabilities". -

CSS tried to come for my job
№4 Заметки к докладу "CSS tried to come for my job". Великолепное демо с кучей примеров реализации перехода страницы из состояния в состояние. С помощью только CSS можно сделать очень динамичный интерфейс. -

Is Sass Dead Yet?
№3 Заметки к докладу "Is Sass Dead Yet? CSS Mixins & Functions &c." Доклад о том, как миксины и функции метаморфируют, переезжая из SASS в CSS, обрастая новыми особенностями, связанными с каскадом. -

A Dao of CSS
№2 Заметки к докладу "A Dao of CSS". Любопытный доклад предлагает взглянуть на CSS через призму китайской философии: не жестко контролировать лейаут, а позволить ему течь свободно, как вода, гибко приспосабливаясь к окружению. -

Level up your scroll UX
№1 Заметки к докладу "Level up your scroll UX". Доклад о том, что можно сделать с прокруткой, используя только CSS. Карточки, навигация, даже интерфейс Nintendo Switch. А ещё, рецепт Ultimate Scroller. -

Как ставить цели, чтобы их достигать
№1 Первая лекция курса «Успеть всё», специально для меня, раз уж я на этой неделе ничего не успел 💔. Тут надо быть крайне осторожным. Я уже много чего знаю про Time Management. Потому что то, что я знаю, мне никак не помогает. А помогает то, что я использую. -

🔏 Отпечаток пальца
№22 Оказывается, отпечаток пальца рисовать почти так же сложно, как мозг. В этот раз мы тоже будем использовать шаблон, который потом сотрём. Отпечаток пальца — это уникальный узор от изгибов на коже, который выглядит довольно фрактально. Он состоит из линий примерно одинаковой толщины, которые закручены по кругу или плавно изгибаются. Чтобы нарисовать отпечаток, мы возьмём полукруглую форму, которая будет примерно похожа на то, какой формы след оставит большой палец, если вы намочите его и приложите к бумаге. Нарисуем эту форму и начнём её постепенно заполнять. Я начал с одной изогнутой линии и потом вокруг добавлял новые линии и изгибая их. Чтобы узор получился уникальным, можно добавить ещё несколько линий, вокруг которых будем изгибать остальные. Линии иногда лучше прерывать, оставляя в них пробелы, тогда изображение получится более реалистичным. Когда заполните весь шаблон, убирайте его и получится рисунок отпечатка пальца. -

Автоматизация привычек
№6 Последняя лекция из курса «Любимые привычки». Как объединять привычки в систему, так чтобы они усиливали друг-друга. -

🌡️ Градусник
№21 Градусник - отличное применение законов физики. Стеклянная колба, наполненная ртутью или спиртом. Объём жидкости зависит от температуры. Чем теплее жидкость - тем выше она поднимается по колбе. Просто и надежно. Для того, чтобы нарисовать градусник, достаточно изобразить колбу. В низу расширение для жидкости, над ним - узкая вытянутая трубка, вдоль которой нанесена шкала. Вокруг можно добавить корпус, а можно и без него. -

Как среда и окружение влияют на привычки
№5 Пятая лекция из курса «Любимые привычки» про то, как использовать окружение, чтобы упростить себе жизнь. -

🫙 Канистра
№20 Прежде чем начнем рисовать канистру, надо про нее немного рассказать, потому что штука эта весьма интересная. Дело в том, что в ней есть много крутых дизайнерских решений. Во-первых, у канистры три ручки, поэтому ее можно тащить вдвоем за крайние ручки или одному за среднюю, в зависимости от того, насколько она тяжелая. Далее, у нее есть специальный воздушный карман, который находится выше горловины, поэтому если ее залить до краев, а потом уронить в воду, то она всплывет. Для жесткости у нее есть специальные углубления на боковых стенках. Они также помогают канистре не порваться при нагревании и остывании. Горлышко тоже довольно хитро устроено. Во-первых, в него встроена крышка. Во-вторых, на картинке этого не видно, но в горлышке есть специальная трубочка. Одним концом она торчит из горлышка, а другим заходит в воздушный карман. Благодаря этому, когда из канистры начинаешь лить что-то, она не булькает, жидкость течет ровным потоком. Теперь начнем рисовать. Тушка канистры имеет соотношение сторон примерно 4 к 6. В верхнем левом углу у нас будет выпуклость для воздушного кармана. После того, как мы справились с формой, надо добавить ручки, горловину и рельеф на боковой стенке. Можно еще добавить цвета. -

Самоконтроль и провалы
№4 Четвертая лекция из курса «Любимые привычки», про то, как начать ожидать неудач и что с ними делать. Непривычное вызывает дискомфорт и сопротивление. Воля истощается, стоит её экономить. Если вы не ошибаетесь – значит, вы не делаете нового. -

Наивный реализм
Шум Благодаря этой особенности люди способны удержать в голове модель мира, не перегружая мозг. Из-за неё же трудно поверить, что человек с противоположным мнением искренен. Сложно принять, что у другого человека другой мир в голове. Вместо этого кажется, что мир только такой, каким его видим мы, а все, кто с этим не соглашаются, делают это назло нам. Отсюда обвинения в ангажированности, продажности или глупости. Мир был бы уютнее, если бы мы могли почувствовать мир другого человека, но мы, увы, не можем. -

🧠 Мозг
№19 Мозг — это, наверное, самая сложная штука, которую я рисовал. С одной стороны, это загогулины определенной формы. Но с другой стороны, я очень много раз пытался, и получалось прям плохо. После очень большого количества попыток я всё же наловчился. Попробую сегодня рассказать, как. Проще всего нарисовать мозг, сперва нарисовав шаблон его формы. Шаблон надо будет заполнить извилинами, а потом — стереть. Начинаем заполнять шаблон извилинами. По одной за раз. Они не должны быть слишком симметричными или одинаковыми. Это будет выглядеть неестественно. Они не должны быть слишком разными. Это тоже будет выглядеть неестественно. Толщина должна изменяться незначительно. А изгибы не должны быть на разный угол. Смотрите на фотку настоящего мозга и пробуйте, пока не почувствуете, что начинает получаться. Когда форма полностью заполнена изгибами, остается закрасить просветы и добавить внизу ствол и мозжечок. Получился мозг. Вы великолепны! -

Как формировать полезные привычки
№3 Третья лекция из курса «Любимые привычки», про то, как упростить формирование привычек. Привычки приживаются только если они нам подходят и мы понимаем зачем они нам. В начале пути повторение действия важнее качества самого действия. Привычки объединённые в цепочку подпитывают друг друга 📖 Рекомендация книги по теме: Нанопривычки Би Джея Фогга. -

🔧 Гаечный ключ
№18 Начинать лучше с отверстия в головке. Оно довольно просто рисуется: две параллельные прямые линии, соединенные с одной стороны изогнутой. Прямые линии немного длиннее. Загнутая часть нужна, чтобы в нее угол гайки помещался. После того как у нас получилось отверстие, вокруг него довольно легко нарисовать рожки. От них продолжаем вниз ручку. В ручке делаем дырку. При желании можно добавить объем. -

Как изменить старые привычки
№2 Вторая лекция из курса «Любимые привычки». Почему привычки сложно менять? Как упростить изменение? Как не сломаться в процессе? Из интересного: Трение можно с пользой для дела и уменьшать и увеличивать. Важно всегда иметь запасной план. -

⛏️ Кирка
№17 Кирка нужна, чтобы добывать руду в шахте или пахать грядки. С одной стороны у неё острый кончик, с другой – широкое лезвие. Всё это держится на рукоятке, обычно сделанной из дерева. Рисовать кирку начнём с большой дуги её головки. После этого добавим симметричные изгибы с внутренней стороны, придав им объём. Остаётся добавить рукоятку. -

Как формируются привычки
№1 Сегодня начал изучать курс от Level One «Любимые привычки». Первая лекция была про формирование привычек с точки зрения нейробиологии. Уровни мышления, зачем людям привычки и из чего они состоят. Состоят они из повторения петли: сигнал, действие, награда. -

🚗 Автомобиль
№16 Иногда, чтобы нарисовать картинку, проще всего взять готовый рисунок и обвести его. Можно использовать кальку, светящийся экран или цифровую рисовалку. Этот способ хорошо подходит для машин и зданий. Чтобы нарисовать автомобиль, нужна картинка с автомобилем. Если вы меня знаете, то точно знаете, какой автомобиль я выберу) Сначала нужно нарисовать колёса. Дальше - обвести внешний контур толстой уверенной линией. Потом более тонкой линией – детали и грани. После этого убрать изображение и дорисовать пропущенные детали, тени и цвет. Звучит несложно) -

🪶 Перо
№15 В рисовании пера нет ничего сложного. Оно состоит из центрального стержня и опахала вокруг. Ещё можно линиями показать, что опахало состоит из маленьких волокон. В принципе, всё.