Ребята! Я написала и опубликовала свою первую статью! 🎉

🔗 Про анимацию во фронтенде: пример 1 — движение света от фонаря

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

И если по программированию или дизайну в интернете информации довольно много, то c анимацией в вебе дела обстоят куда хуже (найти курс по креативной разработке — тот еще квест)

Я постаралась простыми словами раскрыть как можно больше тонкостей, все на наглядом примере с кодом и картинками. Если понравится — делитесь впечатлениями 🐾

p.s. Меня правда немного смутило, что при модерации редактор поменял некоторые слова и предложения без согласования со мной, финальный текст мне нравится меньше 😐

Не писала бы я этот пост, если бы не сталкивалась с IT-стартапами примерно раз в месяц.

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

А дальше классика: мысли о пользе для общества и финансовом успехе.

Но IT-стартап — это отдельная работа, требующая времени, нервов и, главное, денег. И как бы грустно это ни звучало, очень мало стартапов доходят до прибыли.


Что могу посоветовать, прежде чем рваться в бой:

✅ Хорошая аналитика. Не просто «мне кажется, что это нужно людям», а полноценная работа по анализу рынка и потребностей. Планирование и подготовка намного важнее веры в продукт.

✅ Готовые клиенты, под которых делается продукт, или ясное понимание, желательно подкрепленное опытом, как их привлечь.

✅ Разработчики или инвесторы, потому что разработка — это дорого.


Как бы жестоко это ни звучало, даже если ты создашь очень классный продукт, окупить его и начать получать с него прибыль — это отдельная бизнес-задача, которая слабо связана с пользой для общества.

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

На самое главное, аккуратно инвестируйте свои личные деньги, потому что IT стартап — это крайне рискованная инвестиция.


p.s. А если ты сам разработчик и хочешь создать стартап, это совсем другая история. Как минимум, это отличный опыт, как максимум, получится еще и денег заработать.

Update: Я попробовала Cursor 🥹

Это 10 из 10. Основной плюс — он работает без VPN.
Автодополнение все еще моя любимая фича. Хотя code review и генерация кода тоже прикольно работают.

Из минусов: правит слишком много и сразу в нескольких файлах. Появляется ощущение, что ты не контролируешь проект. Поэтому я постоянно отменяю его правки или принимаю их построчно, чтобы сохранять контроль 😅

Главное — не заиграться и не начать все делегировать ИИ, потому что соблазн присутствует...

Что я думаю: это отличный помощник в написании кода, но надо постоянно включать голову и проверять все, что он предлагает, иначе можно получить гору неподдерживаемого кода.

Я уже рассказывала, как сделала отправку писем на почту без бэкенда (вот этот пост).

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

Спойлер: это было проще, чем настроить отправку писем по почте 😅

Что было нужно:
Пользователь заходит на сайт, заполняет форму обратной связи, нажимает «отправить», а администраторам сайта приходит сообщение от телеграм бота с деталями заявки.


Звучит сложно, на деле — все очень просто.
Делюсь, как я это сделала:

1️⃣ Я создала телеграмм-бота.

2️⃣ Сохранила телеграм логины администраторов сайта в CMS (у меня это Sanity).

3️⃣ Написала хук с помощью SSR в Nuxt, который срабатывает каждый раз, когда кто-то запускает этого бота.

4️⃣ Хук проверяет логин пользователя, запустившего бота. Если он в списке админов из CMS — я "подписываю юзера на уведомления", сохраняю в CMS chat ID.

5️⃣ Ну а дальше — когда кто-то отправляет форму на сайте, я вызываю серверный метод, который тоже написан с помощью папки server в Nuxt. Этот метод получает всех администраторов из CMS и рассылает им уведомления и данные из формы в телеграм по сохранённым chat ID.


Я прям получила удовольствие от настройки всей этой системы, самое приятное — всё работает 🥹

Пишите, если интересно, могу собрать мини-гайд или добавлю примеры кода!

Делюсь лучшими постами участников клуба IT-блогеров 💁‍♀️

Я вступила в Клуб IT-блогеров, теперь регулярно участвую в разных активностях, общаюсь с "коллегами", узнаю что-то новое про мир IT-блогерства. Первая активность, в которой я принимаю участие — это обмен лучшими постами месяца. Каждый блогер выбрал свой самый популярный или самым интересный пост, а я делюсь ими с вами 🧚‍♂️

🪲 Марго написала серию постов про дебаг. Ссылка на первый пост: Как новичку дебажить? Часть 1.

👉 Гриша продолжает обозревать фичи Svelte. Публикация уже на канале.

🧠 Наташа помогает отслеживать баги в мышлении, она коуч ICF и QA-инженер: На чём, на самом деле, держится ваша мотивация?

💡 Тимлид Артём рассказал, как у него стёрлась грань между жизнью и работой.

🔥 Коуч Анна делится важностью проявления агрессии в карьере в голосовом.

🐱 Я снова ломаю границы фронтенда! Рассказала про то, как настроить телеграм-бота для уведомлений с сайта без бэкенда

🤵 Разработчик Саша думает о пользователях и рассказывает, как соблюдать UX-законы при разработке фронтенда.

🍔 Раушан ударился в кулинарию: тудушка бутера, алгоритм приготовления суши.

😡 Счастливый тимлид походу перегрелся и бомбит то на кандидатов, то на формы регистрации.

Про Матрицы трансформаций или как работает CSS Transform

В универе я не особо понимала, как связаны математика и программирование — и тем более при чем тут фронтенд и вёрстка. Так вот. При том. Если хочется делать что-то более сложное и интересное (3D, прикольные эффекты, нестандартные штуки), приходится углубляться в основы.

Одна из таких основ — матрицы трансформаций

В CSS есть свойство transform. Так можно перемещать (translate), поворачивать (rotate), сжимать и растягивать (scale) или искажать (skew) элемент.


Под капотом это все работает с божьей помощью матриц трансформаций ✨


Как происходит трансформация:

1️⃣ Берутся ключевые точки элемента — например, углы прямоугольника.

2️⃣ Каждую точку представляют в виде вектора [x, y, 1]. Здесь x и y — координаты в пикселях от начала координат, а 1 — для удобства математических операций. За начало координат отвечает свойство transform-origin

3️⃣ Этот вектор умножается на матрицу трансформации. Для каждой операции (translate, rotate, scale, skew) математики вывели свою матрицу, их я приложила картинкой. Так получаются новые координаты вершин.

4️⃣ Внутренность элемента просто «перетягивается» за новыми координатами — как ткань, натянутая на гвоздики.


Самое крутое в этих матрицах: если нужно применить несколько трансформаций, например смещение и поворот, можно сначала перемножить матрицы между собой, а потом получившуюся матрицу перемножить на вектор. Это сильно экономит ресурсы и упрощает вычисления.

Что делать с этим знанием? Как минимум, можно умничать при коллегах 😏
А вообще, я изучила эту тему, потому что сейчас погружаюсь в WebGL, а без матриц там — никуда.

Оформляю свой первый кейс на Behance — это платформа, где дизайнеры делятся своими работами. Каждый кейс – вертикальная простыня слайдов: фото, видео, текст, похоже на лендинг.

Придумала один из слайдов сделать видосом с анимацией. Открыла AfterEffects, сделала анимацию, отрендерила, добавляю в кейс — и афигеваю: все цвета припыленные и сильно отличаются от изначальных. Это прям видно и выбивается из всего кейса. (Приложила скрин с разницей цветов, там спойлер этого проекта, кстати 😏)

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

Итак, как я вернула нормальные цвета в AfterEffect:

1️⃣ Поменяла Working Color Space. Как найти: File → Project Settings → Вкладка Color → Поле Working Color Space. Рекомендуют HDTV (Rec. 709), но мне подошел только sRGB IEC61966-2.1. Поэтому советую перебирать варианты.

2️⃣ Цвета стали сильно лучше, но всё ещё светловаты. Поэтому я добавила легкую цветокоррекцию: понизила экспозицию и добавила чуть синего.


Для меня удивительно, что приходится вот так плясать с бубном вокруг AfterEffect’а, чтобы добиться исходных цветов. Надеюсь, я сэкономила кому-нибудь пару часов или нервных клеток 🫠

Я немного погрузилась в тему дизайна, и как человек с техническим складом ума, но большим желанием творить могу сказать: творить сложно, но возможно.

Долгое время мне казалось, что дизайн/веб-дизайн для избранных: творческих, возвышенных и с особым чувством прекрасного. Из-за этого откладывала идею попробовать.

Но желание было сильнее страхов и предрассудков.

Я попробовала. Уже сделала несколько проектов, надеюсь, скоро покажу их. Не скажу, что я довольна на 100%, но выходит лучше, чем я ожидала.


Что я усвоила за это время:

1️⃣ Дизайн — это техническая профессия. Сначала нужно упорядочить информацию, сделать логичную структуру. Красота вторична.

2️⃣ Это сложно. Структурировать контент, расставить акценты, сделать это красиво, в стилистике проекта, при этом, чтобы понравилось заказчику — задача не из легких.

3️⃣ Насмотренность и коллекционирование. Если регулярно анализировать хорошие проекты, изучать приемы и подходы, то все становится понятнее, пропадает страх чистого листа.

4️⃣ Лучше не пытаться изобретать велосипед, особенно если мало опыта. Найти референсы и грамотно применить их в текущий проект — половина успеха.

5️⃣ Нужно уметь останавливаться. В творческой среде нет предела совершенству, лучше учиться отпускать. Это мне дается особенно тяжело, я вечно собой недовольна.


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

Как я чуть не попалась на очень странный развод.

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

У меня в профиле всего 1 работа, где 44 просмотра. Не очень много.

И вот в пятницу мне написал человек в телеграм. Сказал, что увидел мою работу и его компания хочет со мной сотрудничать. Я, конечно, обрадовалась. Подумала: «Ого, вот это конверсия у Behance!» (ага, ага 😅).

Суть: Он предложил поработать со студией из Чикаго, делать простые лендинги на регулярной основе, 26$ в час, в среднем 3-4 лендинга в месяц.

Я подумала: простые деньги, где подвох?🤨

Начала расспрашивать: про оплату, сроки, формат работы — всё звучало логично. Поэтому согласилась идти дальше.

И тут начинается самое интересное.

Он присылает список документов для «оформления»:
ℹ️ Резюме, а точнее CV по американским стандартам.
ℹ️ Архив с работами (портфолио)
ℹ️ И сертификат о знании английского языка

Вы скажите, и что тут такого, звучит все логично. Я тоже так подумала.


Поэтому ринулась составлять CV. Он скинул несколько сервисов, через которые можно оформить CV в PDF, платно. Я сделала просто в Figma — он согласовал.

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


Но все равно пошла разбираться с сертификатом английского.

Он скинул 2 варианта — TOEFL, полноценный экзамен, котируется в многих странах, но к нему нужно прям готовиться и он стоит денег, и... какую-то ноунейм школу, где можно купить «сертификат» за 3000р.

Меня не устроили оба варианта, поэтому я нашла и прошла тест от EF SET. Это официальный бесплатный тест, сертификат даже можно добавить в профиль Linkedin.

Скинула ему, а ему он не подходит. Говорит: это европейский, нам нужен какой-то американский. Нужен TOEFL или купите просто за 3000р в этой онлайн школе.

Я еще немного его подопрашивала, но уже стало все понятно...


Очень странный, аккуратный развод на фоне веры в «классную первую работу». Схема для вдохновленных дизайнеров, которые только выложили первый кейс на Behance, поверили в себя… и хотят сразу 26$/час от американской студии.


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