Про Матрицы трансформаций или как работает 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, а без матриц там — никуда.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

А я как пересел на Cursor так и не слезаю с него, так как ИИ дополнение и генерация кода очень сильно снимают когнитивную нагрузку на что-то что не интересно делать, оставляя только творчество

Программисты, кто уже пользовался AI помощниками в работе с кодом?

Меня до сих пор обходил стороной этот тренд, я редко первой пробую новые инструменты, но сегодня, по воле случая, я обновила VS Code и встретилась лицом к лицу с GitHub Copilot — инструмент, разработанный OpenAI и GitHub, встроенный в среду разработки AI помощник.

И я прям афигела от того, как он работает. Основной профит, который я заметила на данный момент, — это автозавершение кода. Настолько круто он предлагает сниппеты, что ощущение, будто он умнее меня...

Например, я использую динамические компонент в vue (). Copilot понял, какие пропсы принимает динамический компонент и автодополнил мне код нужным параметром. Это просто 🤯

Буду тестировать, но на первый взгляд, скорость разработки сильно увеличивается, хочу еще попробовать code review, может и качество подтянется 😅

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

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

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

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


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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

Момент пришел, делюсь своим мнением:


Никакие курсы вам не помогут 😅


Если есть желание и интерес обучиться программированию, то на просторах интернета огромное количество бесплатной информации и есть чат GPT.

Курсы часто дублируют все, что есть в открытом доступе.

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

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

И советую как можно скорее устроиться на работу, потому что самый лучший опыт – это боевой опыт. Да, будет страшно, но рост происходит именно во время стресса (главное балансировать конечно и не уйти в выгорание)



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


А вы что думаете, у кого какой опыт в обучении?