ErBlog
-

🧠 Нейрон
Нейрон — это устройство для обработки информации. Он получает пачку сигналов через дендриты, и, если ему показалось, что их достаточно, передаёт их дальше через аксон. Ничего сложного. Но если соединить их в реально большую толпу, они смогут пустить этот сигнал в нужную сторону и преобразовать его способом, который сильно напоминает интеллект. Рисовать начнём с овального ядра. Вокруг нарисуем тело с короной из дендритов, которые выглядят как заострённые ветки. Добавим длинный хвост аксона, покрытый овалами миелиновой оболочки. Он заканчивается деревом отростков, похожих на ветки с плоскими кончиками. Получился вполне узнаваемый нейрон. -

🔨 Молоток
Молоток состоит из головки и рукоятки. У головки две стороны – одна, чтобы забивать гвозди, а вторая – чтобы их доставать. У рукоятки назначение одно, поэтому рисовать её ещё проще. -

🔌 Розетка
Сегодня будем рисовать розетку, а чтобы не было скучно, нарисуем сразу четыре, а ещё вилки к ним. Начнём с обычной электрической розетки. У меня сейчас вот такие: две дырки для контактов по центру, и заземление сверху и снизу. Вилку можно втыкать любой стороной. Ничего необычного. Дальше идёт USB Type‑A. Он известен тем, что его невозможно с первой попытки вставить правильной стороной. Либо со второй, либо с третьей. Теперь — USB Type‑C. Он всем хорош. И подходит для всего и вставлять можно любой стороной. Вообще у него только один недостаток — это все остальные стандарты разъёмов USB. Ну и напоследок — jack. У него вообще сторон нет, его можно хоть вставленным крутить. Один недостаток — места много занимает в устройстве, потому что он длинный. У меня когда-то был телефон с 2,5 мм джеком (который на 1 мм меньше привычного). Год я искал для него наушники, да так и не нашел. С тех пор ношу беспроводные. -

📷 Камера
Раньше фотоаппараты снимали на плёнку, теперь — на сенсор, но сути это не меняет. Нужна дырка, в которую свет попадёт, закрытая линзой, видоискатель, несколько кнопок и место для вспышки сверху. Ничего сложного: только круги, прямоугольники и линии. -

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

Contextualism
№14 Заметки к докладу "Contextualism". Полный список того, к чему есть доступ у стилей компонента. -

Modern UI Patterns
№13 Заметки к докладу "Modern UI Patterns". Подборка твиков UI доступных благодаря новым плюшкам в CSS. -

Forging Our Own Paths
№12 Заметки к докладу "Forging Our Own Paths". Про использование векторной графики для анимации. -

CSS Doom Lasers
№11 Заметки к докладу "CSS Doom Lasers". Перформанс с участием осциллографа, лазеров и огнетушителя. Изображение в звук и обратно. -

Breaking with habits
№10 Заметки к докладу "Breaking with habits". Про то что чтобы научиться новому, нужно сперва отпустить старое. -

Fun with grid lanes
№9 Заметки к докладу "Fun with grid lanes". Про раскладку не только для пинтереста. -

CSS is eating JavaScript
№8 Заметки к докладу "CSS is eating JavaScript". Что теперь можно делать в css и как подружить это с js, чтобы было удобно читать. -

Customisable \<select\> and the friends we made along the way
№7 Заметки к докладу "Customisable <select> and the friends we made along the way". Кастомный селект был нужен ещё в 93. И вот, спустя годы, он у нас почти есть. -

Cranking View Transitions up to 11
№6 Заметки к докладу "Cranking View Transitions up to 11". Понятный гайд в начале и безумные трюки с путешествиями во времени в конце. -

Color-Scheming
№5 Заметки к докладу "Color-Scheming". Не всем подходит темная тема. Не всем подходит светлая. Надо обе. -

Putting the C in CSS Crimes
№4 Заметки к докладу "Putting the C in CSS Crimes". Эмулятор x86 на чистом CSS. Эмулятор! x86! На чистом CSS!!! -

The value pipeline
№3 Заметки к докладу "The value pipeline". Про то как весело и интересно писать браузер с нуля по спекам. -

Let's fix the web's text size
№2 Заметки к докладу "Let's fix the web's text size". Про то как поддерживать изменение шрифта сейчас и как это изменится в светлом будущем. -

What the color?!
№1 Заметки к докладу "What the color?!". Доклад о том, как цветовые пространства похожи на водопроводные краны, и как научиться менять оттенок цвета, сохраняя его яркость и насыщенность. -

🚤 Катер
У классического катера двигатель находится в корпусе, а не висит сзади. У такого решения много сложностей, но выглядит он, как мне кажется, лучше. Проще всего нарисовать вид сверху. Начнём с корпуса: две симметричные изогнутые линии — борта. Задняя стенка наклонная, поэтому её видно. Дальше добавим деталей: ветровое стекло, сиденье и штурвал. Можно ещё крылья на корме добавить. -

🌴 Отпуск
Отпуск у меня ассоциируется с пальмами на берегу моря и людьми, которые чилят в шезлонгах между ними, глядя на закат. Сегодня я задумался, почему так, ведь в большинстве моих отпусков ни пальм, ни моря не наблюдалось. Потратив пятнадцать минут на копание в своей памяти, я выяснил, что это кадр из мультика, в котором родители дяди Фёдора обсуждают оставшиеся платья. Так в моей голове выглядит отпуск. Начнём с пальм. Хаотично свисающие листья, под ними кокосы, а под кокосами — немного изогнутый ствол. С другой стороны — такая же пальма. Дальше — шезлонги. Две перекрещивающиеся палки. Чуть выше и правее — ещё две такие же палки. Между ними натянута ткань. Добавим ещё один — зеркально. Всё. Отпуск готов. -

🪨 Камень
Камень рисовать нетрудно. Прелесть в том, что каждый камень при этом получается уникальным. Начните с грубой, угловатой формы. Добавьте несколько граней по краям и пару ломаных выступов внутри. Останется только нанести на грани тени — и камень готов. -

💨 Вентилятор
Самое сложное в рисовании вентилятора – нарисовать лопасти одинакового размера. Чем проще их форма – тем проще их повторять. Нарисуйте круг. Вокруг него добавьте на одинаковом расстоянии три, четыре, пять или столько лопастей, сколько вам хочется. За ними нарисуйте подставку или корпус вентилятора. -

🌐 Браузер
Рисовать браузер начнём с пустого прямоугольника. Несмотря на веяния дизайна и моды, в 2026 году браузер всё ещё можно узнать по адресной строке и кнопкам вперёд/назад. Добавим их в прямоугольник. Сейчас сайт без s после http смотрится по меньшей мере подозрительно, и каждый браузер это как-то подсвечивает — обычно щитом или замочком. Этот значок возле адреса означает, что сайт работает по https, а значит, всё, что вы ему шлёте, и всё, что он шлёт обратно вам, зашифровано, и это более-менее защищено. Обращайте на него внимание: шифрованное соединение — залог здорового веб-сёрфинга. Дальше можно добавить элементы управления окном по вкусу и скроллбар справа для солидности. Сайт внутри браузера можете нарисовать любой. Я вот свой бложик нарисовал. В смутные времена запретов и заборов старый добрый отдельный сайт с RSS будет доступен чуть дольше, чем всё остальное. Сохраните себе ссылочку, если нравится. Удачи вам и безопасных интернетов. -

🍾 Бутылка
Бутылку легко узнать по форме. Если добавить блик, то вообще будет красота. В нашем случае бутылка с металлической пробкой. Перед пробкой у горлышка небольшое утолщение. Сама пробка похожа на узенькую трапецию со штрихами, соединенными снизу.