Пример необычной анимации на чистом JS и CSS

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

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

#codepen #javascript #css

Нашёл инструкцию, как делать 3D-текст без использования JavaScript

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

На видео, которое вы видите не используется JavaScript. Тут только HTML и CSS. Как это сделать, автор рассказывает у себя в серии статей. В первой части о том, как в принципе сделать такой текст. А в следующих уже будет о том, как его анимировать.

#css #фронтенд

Работает? Не трогай!

Делаем своего LLM-агента на TypeScript

Годная статья для тех, кто хочет сделать свою Алису, Сири, Джарвиса или ещё кого. Автор реализовал своего агента, который понимает запросы, умеет выделять из них суть и преобразовывать её в команды для различных сервисов. Теперь вы можете также, ведь он подробно рассказал, что делать, используя TS и MCP.

Читаем тут: https://habr.com/ru/articles/926548/

#llm #ии #ypescript

Как создавать сложные расширения Chrome

Всё не так сложно, как кажется. Нашёл руководство, в котором показано, как сделать полнофункциональное расширение для Chrome на реальном примере! В получите ценный опыт и расширение для сохранения изображения с любых сайтов в ваш сервис через API.

#extensions #chrome

Коллекция странностей CSS, которые могут сломать вам мозг

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

Чтобы не попасться в ловушку особенностей CSS, рекомендую вам хотя бы мельком прочитать эту статью. Здесь про calc(), aspect-ratio, absolute и многое другое.

#css #фронтенд

Как заставить пользователей заметить ваш сайт

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

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

#seo

Адаптивные изображения и подписи на CSS: как работают container queries и :has()

Container queries и селектор :has() делают адаптивность вёрстки проще и чище. Разбираем, как с их помощью построить компонент с feature image, который подстраивается под контейнеры, меняет расположение и стиль подписи, оставаясь стабильным при любой ширине.

Подробности тут.

#фронтенд #css

И это чисто тудушка для портфолио

Интерактивное руководство по SVG-контурам

Элемент SVG <path> известен своей сложностью. Его синтаксис не настолько сложен, как у регулярных выражений, но и удовольствия от работы с ним не возникает. При этом это всё ещё очень удобно и востребовано, поэтому отказываться от его использования не стоит.

Если у вас ломается мозг от работы с SVG, то я рекомендую вам вот это руководство. Тут пошагово показано, как вообще это всё работает. Вы один раз увидите и наконец-то поймете, что за странные буквы и числа написаны в пути контура.

Сохраняйте и делитесь с близкими: https://www.joshwcomeau.com/svg/interactive-guide-to-paths/

#svg #руководство