В общем, утром я ехала на собеседование frontend-разработчика. О вакансии мне рассказал бывший коллега, который уволился, чтобы упорхнуть в Москву и хотел пристроить меня на своё место.

Доделала портфолио, распечатала резюме, вспомнила всю хрень из теории Javascript {которую тебя в жизни никогда больше не спросят}, приготовилась писать функцию на листочке (и такое бывало), потренила на муже рассказ о том, какая крутая вообще, собрала отзывы от своих коллег. Приехала на место и узнала, что вот только что они уже кого-то приняли. А про меня вообще забыли 😕

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

Вопросы были такие:
— за какими студиями слежу (честно, не слежу за конкретными студиями. наблюдаю за отдельными дизайнерами}
— какие тренды в дизайне я могу назвать
— какие стили мне нравятся и почему
— какое качество я считаю важным в работе дизайнера
— как я бы хотела развиться в дизайне (я очень красиво ответила на этот вопрос)

Нормальные вопросы совершенно. Но в кабинет вошел какой-то человек, который даже не представился (оказалось, начальство) и начал задавать абсолютно-странные вопросы: какой у меня знак зодиака, какие темы в разговоре с коллективом я не обсуждаю, есть ли у меня стоп-слово {просто, что 😏}, нормально ли я отношусь к голым людям в офисе (вы сейчас подумаете, что это шютка. но там некоторые ночуют и реально есть челы, идущие от душа прикрывшись полотенцем), люблю ли я деньги. После положительного ответа на последний вопрос он ответил "Плохо, меркантильная значит".

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


но идут годы, а меня до сих пор не принимают из-за недостатка опыта.

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

Ссылка на стрим ⇾⇾⇾


× saintheron.com
Необычная сетка, которая сохраняется и на мобильном устройстве; моноширинная гарнитура; очень приятная корзина. Обратить всё внимание нужно на то, как вписаны объекты в текст. А именно на свойство shape-outside (протестировать работу можно на блоке IM13).

× etcagency.co
Сочетание режимов наложений в баннере, до которого я могла бы додуматься лишь случайно во время экспериментов; необычная сетка и множество мелких деталей; шрифтовая пара Arial Narrow и моноширинная гарнитура с эффектом машинной печати 👍. Местами сложно и непонятно, но мне хочется его разглядывать.

× co-projects.xyz
Классное сочетание шрифтов {не дают мне покоя шрифты по типу Hanh Mono 😭}; простая композиция; интересная анимация логотипа; easing анимации элементов с небольшим отскоком.

× theaterimdepot.de
Сайт с перемоткой в маске (сверху наложен SVG-объект, который меняет свою форму при переходе на страницы); имитация газетной верстки; необычное меню. Редко можно увидеть просто газетную верстку, а подобное так и подавно.

× ericreh.de
Неказистый и странный на первый взгляд сайт, но при этом отлично написанный. Анимация clip-path при наведении; переход на страницы без перезагрузки и интересной перемоткой страницы в маске. Если вы вообще не понимаете кто это такое ваше clip-path, то посмотрите этот выпуск уверстки 🤔.

× liebermannkiepereddemann.de
Летающие креативы на сайте агентства, цепляющие слова о том, какие вы зашибись дизайны делаете — нет, освистопердело это уже. Этот сайт я точно надолго запомню 😂

× thehost.is
Брутальный сайт, с которого можно утащить великолепно-написанные тени. Помимо этого интересный эффект в шапке; белый градиент на новости; эффект объемных кнопок.

Это был тестовый формат стрима и если вам подобное понравилось, то поддержите лайком. Отдельное спасибо всем, кто забежал поздороваться 😘

#ccылки #стрим

Планы на неделю такие {работа на частичный рабочий день за кадром} 😔

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

Цель: рассказать о себе в канале и доделать кейсы на сайте, чтобы можно было всем показывать 😏

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

Не являюсь большим сторонником использовать демонстрацию сайта в устройстве, но это, порой, нужно для кейса на Behance. И поиск не шаблонного варианта превращается в часы. Поэтому опять кратенько и по делу 🤩


benditomockup.com {вся красота в платном, но есть и бесплатные}
microvolume.gumroad.com
mrmockup.com
mockup.maison
unblast.com
creatoom.com {можно выбрать сцену, отдельно ноутбук и собрать всё в фотошопе}
anthonyboyd.graphics


Важное уточнение для тех, кто хоть немного умеет пользоваться фотошопом: берем фотографию с устройством, выделяем экран устройства, встраиваем внутрь видео (не забыв включить таймлайн). У Санёчка есть видео на эту тему. Подборка ниже для вас:
Unsplash часть 1
Unsplash часть 2
Unsplash часть 3

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

#ссылки

На этой неделе пошел 14-ый год, как мы вместе {в этом году мы вспомнили про годовщину не в декабре 😅}. Это вторая вещь, которая всех шокирует при знакомстве со мной.


В детстве мне постоянно говорили, что я всю жизнь буду одна: слишком характерная, вредная, непокорная. Никто никогда не захочет жить с такой. Нужно быть более покладистой. А потом случилось “Ты чего это одна тут сидишь?”. И у меня появился сначала друг, а после самый родной человек на земле. Благодаря ему я узнала, что я не грубый чёрствый человек. Просто любить тех, кто постоянно делает вам больно нельзя. И неважно, родственник это или даже родитель.

Так получилось, что этот год стал самым тяжёлым в нашей совместной жизни. Не по причине того, что мы разучились понимать и слышать друг друга. Просто в одном доме оказались два человека с депрессией, один из которых не хотел лечиться и вообще к кому-либо обращаться {потому что верил, что склонными к депрессии рождаются}. У обоих основная причина депрессии — работа, точнее проблемы с ней. Назовем это первым кризисом среднего возраста: когда тебе ещё не 40, но вот-вот уже будет 30, а достижений в копилке почти нет. А еще мы осознали, что на данный момент ни разу не жили просто для себя и деньги просто ради удовольствия никогда не спускали {а порой, так хочется 😔}. Ощущение, что мы просто опоздали жить эту жизнь.

Оказалось, что поддерживать друг друга, когда вы оба раздавленная чокопайка — невероятно сложно. Мы учились распознавать состояние друг друга, вырубили обоюдные подколы, пытались не говорить о работе и о деньгах (о последнем сложно не говорить, когда висят два кредита 😱), искали радость в чем-то новом (пьем кофеек в кофейне по выходным), работали с психологом и пили таблетки.


ракурс сделал меня лыжей. на самом деле я карлик 160, а муж 184

#личное

Спустя почти две недели трудов таки выкатываю #10 выпуск уверстки ✨



Изначально, уверстка задумывалась как небольшие посты, в которые можно вместить и инструкцию, и код решения. Но для юбилейного выпуска я сделала что-то более сложное. Как обещала — делюсь решением аккордеона в Zero (его можно убдеть в этом проекте и на моем сайте-портфолио).


Есть два способа встроить аккордеон в Zero:
— вставить стандартный аккордеон внутрь шейпа или в блок с кодом (основной минус в том, что данная конструкция ломается при использовании автоскейла и мы получаем ебейшую сильную вложенность)
— написать аккордеон самостоятельно (уменьшаем вложенность, не привязаны к свойствам блока, частично решаем проблему автоскейла)

90% модификаций выбирают накалякать первое решение 🙂. Но я не ищу легких путей — поэтому сделала аккордеон с помощью стандартного тега <details>.


Код забирать тут ⇒
Codepen {для удобной работы} ⇒


Решение предусматривает полную кастомизацию: размер шрифта для всех разрешений, размер плюсика ❤️ (можно заменить на стрелку), цвет заголовка при наведении и так далее. Сразу оговорюсь, что это не полноценная модификация с генерацией кода. Всё соответствует изначальной задумке уверстки. После создания аккордеона вы можете снести мою подпись в начале кодов потому что сделали все сами 😏.

Чтобы у вас не было сложностей в работе я записала небольшую инструкцию по работе с решением.


Минусы:
1. Нужно работать с кодом
2. На данный момент тег <details> не анимирован при открытии, но это обещают поправить уже в следующем черновике CSS.


Традиционно настойчиво прошу ставить реакции на пост, потому что делюсь всем бесплатно. Но в честь юбилейного поста открыла сбор, на который вы можете кинуть пакетик корма котам 😛. Это поможет мне продолжить собирать идеи и делать новые посты #уверстка ❤️

Задонить на корм в благодарность ⇒

Кстати, меня ни разу не спросил никто: “А что такое уверстка вообще?”. Выпустила первый пост и все такие “Окей, уверстка так уверстка”. Что вы себе позволяете? :D

Я совсем забыла, что у меня тут нет ни одного поста {кроме паскудной версии}, в котором я бы нормально что-то рассказала о себе. Исправляюсь ✌. Кстати, почти никто не обнаружил секретную секцию на странице со ссылками, поэтому ее идеи были перенесены в обложку.


Меня зовут Катя, мне 30 годиков и я живу в Кемерово рядом с тайгой.

Закончила вуз по специальности информационные системы и технологии (ИИАПС). Я выросла в семье двух программистов и бывших военных и никогда не представляла себя человеком другой специальности, хотя и успешно сдала нормативы в университет МВД. Уже более 9 лет нахожусь в профессиональном вебе: пишу сайты и два года как вернулась в веб-дизайн. На данный момент я работаю lead-разработчиком в студии и очень хочу вырасти когда-то в хорошего дизайнера 🙈. Подробнее почитать о моём становлении в человека-винегрета можно в инстаграм.


Живу с пятью котами 🖐 и злобным кроликом, хотя люблю собак. Испытываю большую любовь к растениям 🪴 и мечтаю о своем участке у леса, на котором смогу сделать малютку оранжерею. Люблю колу, мятный шоколад, чай с молоком, лакрицу, корицу, мальчика под лестницей, вселенную Толкина (даже учила синдарин), аниме и мангу 🥰 (особенно исекай), тупые фильмы без глубоких смыслов, мемы, игровые стримы, дорамы (Ли Дон Ук просто милашка), новогодние надоевшие фильмы, слушаю классический роцк, Эминема и Рика Эстли 🤩 (80-е в фаворе).


У меня есть необычная особенность: каждая вещь, человек, событие или фотография имеют свою песню. Достаточно мне посмотреть на небо и в голове играет музыка из Людей в Черном {когда Кей смотрит на небо} словно я слышу ее наяву. А еще я часто раздражаю мужа тем, что во время серьезного рассказа могу услышать какое-то слово и допеваю песню в ответ {подожди дожди дождиии :D}


В завершение хочу предложить вам написать какая я, по вашему мнению: общительная, грубая на словцо, язвительная, зажатая, добрая, стеснительная или что-то еще. А после я уже расскажу то, как вижу себя сама :) Либо просто ставьте 💚, мне будет очень приятно 🥰

C какой проблемой ко мне можно обратиться:


— если вам нужна крутая верстка на тильде (я не знаю еще кого-то, кто мог бы такое вытворять с тильдой)
— если вам нужна помощь в отрисовке дополнительных страниц и вы хотите это кому-то делегировать (важно уточняю, что работаю на компонентах и у меня дергается глазик, когда в большом проекте их нет)
— если вам нужна ну очень аккуратная верстка сайта с упором на оптимизацию и современные технологии
— если вам нужно сильно изменить стандартные блоки и вы не хотите этим заниматься
— если вы хотите целиком заказать очень крутой сайт


В дизайне уважаю минимализм, люблю брутализм/необрутализм и антидизайн. Делаю большой упор на красивой картинке, но не забываю про UX.


Если у вас есть проект, который вы хотели бы реализовать на тильде (к примеру, красивая композиция в духе этого проекта), то мы можем сделать его по бартеру: вы упоминаете меня в своем аккаунте, а также оставляете подпись в футере. Если проект сложный, то я снижу цену за ссылку на меня в футере, а также расскажу о вашем проекте в своих социальных сетях.


Ну и совсем ахеревшая просьба с отрывом от реальности, но я попробую :D {вы мне постоянно говорите про нетворкинг}. Я буду благодарна, если вы посоветуете меня кому-то. Это очень поможет мне не продать машину в попытке оплатить лечение T_T

Мой сайт портфолио по ссылоньке ➡️ тык.

Кого из блогеров я смотрю на youtube и почему 👁️

Кажется, что помимо простых слов представление о нас формирует всё окружение: видео, фильмы и книги (часть из этих деталей просто не видно в блогах). Поэтому мне захотелось поделиться аккаунтами людей, которых я смотрю очень давно {многих с момента основания канала}. Не профессиональное, не гиковское, не игрульки 😔


[Саша Казанцева]
Я смотрю Сашу с момента, когда она еще была Дилей и рассказывала истории из своего детства. Мне очень близка терапия, которую прошла Саша и её трансформация из Диляры. Потому что примерно так я поступила после замужества, взяв фамилию мужа и символически отпустив всё прошлое, приносившее мне вагон и маленькую тележку боли.

[Ася Шатова]
Люблю влоги из Кореи {мечтаю когда-то таки выбраться из проблем, заработать на поездку и съездить покушать Чапсальтток}, процесс готовки под приятную музыку и просто Настю. Она дала мне мотивацию правильно питаться и активно тренироваться на пути к прессу без жирка. И вообще видишь, что красивое тело — это не счастливый билетик, а постоянная работа над собой до ручьев с лица.

[Каролина K]
Размеренная жизнь, работа над собой, естественность и важные мысли. Кажется, именно к такому спокойствию я стремлюсь: просто жить и радоваться каждому дню, пробежать своей первый полумарафон, радовать себя приятными покупками, каждый день работать над собой и становиться сильнее, чем я была раньше.

[Полинэ Кудрявцева]
Когда я представляю Санкт-Петербург, то сразу вспоминаю Полину. Именно так мы (в Сибири) представляем людей, живущих в этом городе: творческие, яркие, активные, воздушные, неожиданные. А еще Полина очень уютный и приятный человек, который постоянно растёт морально, читает книги и вяжет {меня пристыдил недовязанный носок, поэтому пора смотеть Полину и вязать}.

[лелюк]
Не так давно познакомилась с каналом Жени, но сходу послушала во время работы почти все видео. А после этого видео вечером долго думала и выписывала, что именно из своих поверхностных желаний я действительно хочу {хочу свободы}, а не пытаюсь угнаться за типикал образом: фрилансер-путешественник, успешный стартапер. Очень уютно и близко по мыслям.


Пост помечаю как #личное и буду благодарна за рекомендации таких уютных человеков, ну и за сердченый кошачий лайк 👍 (потому что в работе серьезный кошачий пост 😺)

Обо мне пишут 😳🤩✨

Анна поделилась опытом нашего сотрудничества и мыслями о создании сайта. Я же совсем забыла рассказать вам, что проект взял рекордные в моей жизни 9 наград: 5 SOTD и 4 CSSDA (было бы приятно получить Honorable Awards, но я решила не отсылать сайт на AWWW). В MOT, ожидаемо, не попал (просто знайте, что дизайнеры тильды круче этих ваших жюри на CSSDA и отправляйте сайт на другие агрегаторы. потом еще плакать будут, что вы не там).

Сам кейс подробно можно прочитать по ссылке 🔗

#работа

Практическое извращение над тильдой 🤔

Очень важный пункт нормального развития верстальщика (и front’a) не только постоянное изучение новых фреймворков {что уже бесит, дайте старые нормально выучить уже}, но и развитие насмотренности. О последнем пункте почти никто не говорит и в итоге мы получаем совершенно бездарных верстальщиков, неспособных угнаться за развитием дизайн-мира.

Подчеркну, что для меня важно верстать не по принципу "Как-нибудь работает и ладно", а делать действительно качественную современную верстку.

Один из способов — взять уже существующий сайт, который вас МЕГА зацепил и попытаться повторить (без постоянных подглядулек в инструменты разработчика). Такой сайт как раз попался на прошлом стриме и я решила уже привычно пойти извратить тильду.

На странице есть два блока: IM01 и IM13 и стили весом 7кб. В процессе я немного поправила позиции элементов на свой вкус потому что люблю системность (даже в том, что кажется совершенно несистемным). А также оставила кнопку, нажав на которую можно посмотреть все написанные стили 😑.


Соглашусь, что просто написать подобное было бы проще. Но в процессе работы мне нравится сталкиваться со сложностями и решать их. Тильда буквально напоминает мне галёрку, на которой я проработала много лет, превращая старый проект в нормальный.

🔗 Посмотреть результат можно тут

Помните, если вам надоели ограничения тильды — всегда можно их уничтожить самостоятельно или с моей помощью 😉

#переверстка

А вообще я заметила, что сейчас постепенно начинается медленный отток с тильды.

Все фирмы, с которыми я работаю полностью переходят на readymag/webfow. Всё больше людей, которые ко мне обращаются отказываются от разработки сайта на данном конструкторе, ибо наслышаны о медленной скорости работы, косяках с кроссбраузерностью и не только {было неожиданно, когда клиент скинул мне мой же аккаунт со словами "вот эта девочка говорит, что тильда плохой сервис" 😂}. В ноябре я буду переверстывать один из сайтов, который спокойно живёт на тильде, но клиент не хочет более терпеть долгую загрузку.


Мысль одна: где взять иностранную карту, не тратя свой месячный бюджет 😭 Мысль вторая: надо напроситься на проекты с версткой на readymag.


Заметили спад активности тильды? 🤔

Один очень умный человек углядел на странице прошлой уверстки, что я использую какую-то конструкцию с уникальными стилями для Firefox 🦊


Рано или поздно сталкиваешься с тем, что сайт на тильде именно в этом браузере выглядит не так, как хотелось бы: не тот межстрочный интервал, смещение элемента на определенной ширине устройства и так далее. Это не вина самого браузера (все новые фичи в нём появляются быстрее всего) в 80% случаев. Особым соком будет клиент {и его потрясающие друзья}, которые пользуются именно браузером Firefox. Тут не только волосы дыбом встанут, еще и корвалол в аптечке кончится.


И поможет нам такая конструкция (пишем в стили):

@-moz-document url-prefix() {
     /*Внутрь пишем всё, что надо*/
}

Важное уточнение в том, что данный финт работает не во всех версиях браузеров поэтому 100% гарантии, что клиент не увидит баг — нет. В таком случае не забывайте уточнить версию браузера у клиента, не стесняйтесь просить обновить браузер (и это совершенно нормальная просьба, потому что в эпоху постоянных обновлений мы не можем по своему желанию пользоваться Internet Explorer). Использовать можно так же и для других конструкторов. Второй способ уже несколько сложнее и требует написание скрипта {маякните мне, если он тоже нужен 😌}.


Традиционно ставим реакции под пост, если рубрика #уверстка вам по-прежнему интересна, оставляем комментарии, советуем меня товарищам 🤗. Если данный выпуск оказался для вас полезен, то вы можете подарить моим котэвичам пакетик корма — нам будет очень приятно ❤️❤️.


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

В последнее время я задумалась о том, как могу монетизировать решения, которые делаю для уверстки
{особенно те, которые отнимают 2-3 дня или более при написании}

Типичный вариант — сделать сайт или канал с подпиской. Но я терпеть не могу сервисы с подпиской, которые списывают ежемесячные оплаты: спишется оплата за все допы для тильды (которые я не покупаю, но вы — да), яндекс диск, музыка, пара сервисов с фильмами, читалка, платные приложения. Есть ощущение, что скоро придется платить подписку за чистый воздух. А можно было купить вкусную пицщу 😡!

Я ценю людей, которые ставят мне реакции и участвуют в жизни канала поэтому не хочу кому-то доставлять дискомфорт очередным сервисом с подпиской 😢. Варианты такие:


❤️ оставить сбор от тинькоф для тех, кто хочет меня поддержать {Минус: канал открытый, можно зайти и взять, на кой донить. Донат — это в любом случае по любви ❤️. Но что мешает брать решения людям, которые меня не любят?}
❤️ переделать структуру постов (особенно больших) на теорию и отдельно полный код решения, который можно купить {В качестве примера рассмотрим схемы для вязания и покупку книг в МИФе. Я покупаю только то, что мне интересно и нужно прямо сейчас. Если хочется — можно взять фрагменты из теории и накалякать самостоятельно 💪}
❤️ забить и сделать платный канал с одноразовой покупкой {Которая будет выше, чем стоимость привычной подписки. В плане дохода кто-то треснул бы меня по булке, ибо подписка более прибыльна}


Второй вопрос в актуальности тильды и том, стоит ли делать решения для данного сервиса. Вы очень поможете, если расскажете о планах на эту площадку:
1️⃣ активно пользуюсь тильдой, решения для тильды актуальны
2️⃣ ухожу на другой конструктор, жду решения для WF/RM (данный пункт тяжел тем, что платить за площадки еще не приносящие дохода будет очень трудно морально)


Мне важен ваш фидбек, поэтому мнение можно оставить в комментариях ❤️.


P.S. Спасибо всем, кто оставил фидбек. Всех услышала и выводы сделала. Приступаю к разработке новых решений 😡

Если кто-то не в курсе — на работе я отвечаю за стажеров/практикантов, которых нам направляют и вот сегодня получила приятный отзыв ❕


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


Серёжу не замазала специально, пусть знает 😏


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