Что новенького есть в CSS в 2025 году

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

В этой статье автор разобрал актуальные фишки CSS, о которых вы могли не знать.

#css #фронтенд

Со статистикой трудно спорить

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

Только чур сначала попробовать ответить самому, а потом лезть в ответ!

Вопрос 1. Что такое Virtual DOM?

Virtual DOM — это виртуальное представление HTML‑структуры в виде обычных JavaScript‑объектов, которые хранятся в оперативной памяти и используются внутри фреймворка или библиотеки (например, React). Вместо того, чтобы сразу вносить изменения в настоящий DOM, фреймворк сначала обновляет Virtual DOM, сравнивает его с предыдущим состоянием и вносит только нужные изменения в реальное дерево элементов.

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

#вопросответ

KeyUX — удобная визуализация пользовательских нажатий клавиш

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

#фронтенд #библиотека

Практика JavaScript: делаем целый сайт за 2 часа с нуля

Ловите полезный двухчасовой курс по созданию сайта с JavaScript, где вы:

— напишите с нуля приложение, которое сможете добавить в портфолио;
— научитесь настраивать рабочее окружение;
— поймёте зачем на самом деле нужны классы в JavaScript);
— разберётесь как принципы SOLID помогают писать расширяемый и поддерживаемый код;
— поработаете над оптимизацией приложения;
— задеплоите приложение на хостинг и сделаете многое другое.

Видео взято с YouTube, поэтому если предпочитаете смотреть там, то вот ссылка: youtu.be/0ViiJ8qTCFM

#видео #курс #javascript

Паттерны современного Node.js

Node.js претерпел впечатляющее преобразование с момента своего появления. Если вы пишете на Node.js уже несколько лет, то, вероятно, сами наблюдали эту эволюцию - от эпохи колбэков и повсеместного использования CommonJS до современного, чистого и стандартизированного подхода к разработке.

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

Подробности в статье.

#nodejs

ЧЗХ? Почему японские сайты такие странные?

Вот сидишь и думаешь «как бы сделать интерфейс более юзер-френдли, не перегрузить его и вообще стоит сделать скругление кнопки 6px или оторваться по полной программе и сделать на все 8»? А потом заходишь на японский сайт и как будто снова в нулевых — всё перегружено, всрато, дизайн сомнительный, баннер на баннере и так далее.

Неужели японцы не умеют в дизайн и делают лишь бы работало? Доля правды в этом есть, ведь в стране наблюдается кадровый голод и иногда даже крупный сайт поддерживает всего один человек. Но это только верхушка айсберга под которой скрываются культурные и лингвистические особенности. Если интересно почитать подробнее, то мы подготовили статью на эту тему — 10 минут и вы узнаете много нового о мире японской веб-разработки.

Не SpeedTest'ом единым...

Мы не знаем почему РКН решил ограничить работу Speedtest в России, но точно знаем, что проверить скорость интернета бывает крайне важно. Поэтому мы собрали 7 рабочих проверенных альтернатив:

1 Яндекс.Интернетометр
2. Линкметр
3. Cloudflare Speed Test
4. nPerf
5. SpeedOf.Me
6. Orb
7. ПроСеть

У каждого сервиса свои сильные и слабые стороны. Чтобы вам было проще определиться, подробнее о каждом мы рассказали в статье.

Пример необычной анимации на чистом 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