Привет, Хабр! Все знают что для того, чтобы ваш сайт увидели поисковые роботы вам нужен SSR. Но единственное ли это решение? Всегда ли он нужен? Есть ли другие варианты роботам увидеть контент? Что мы можем выиграть от альтернатив? В этой статье рассмотрим альтернативное решение для SSR, а именно Динамический рендеринг (он же Пререндеринг). Читать далее
Подробнее
Слайдеры изображений, также известные как карусели картинок, очень распространены. Есть множество вариантов обычного CSS-слайдера, в котором изображения смещаются слева направо (или наоборот). Можно использовать JavaScript-библиотеки для создания красивых слайдеров со сложной анимацией. Но здесь я подойду к созданию карусели иначе. В серии статей я расскажу вам, как создать необычные и красивые слайдеры исключительно в CSS. Если вы устали от одинаковых слайдеров, вам это понравится!
Подробнее
Привет Хабр! Недавно мне попался на рефакторинг один сайт написанный одним студентом. Он был реализован не лучшим образом и уже давно следовало бы его исправить. И вот наконец у меня выдалось свободное время на рефакторинг. Сайт был написан на Next.js, для написания стилей использовались SCSS Modules. А так как я на своих проектах уже давно использую Styled Components тут же в глаза бросился дискомфорт от использования обычного SCSS. И в этой статье я вам расскажу что же это за дискомфорт и
Подробнее![[Перевод] Геометрия объектной модели документа: исчерпывающее руководство](https://habrastorage.org/webt/qb/js/pi/qbjspiq_llicm9mnwl9rwsvh7_m.png)
Я не считаю, что DHTML — cool, просто картинка хорошая) Привет, друзья! Представляю вашему вниманию перевод этой замечательной статьи. Знаете ли вы, что кроме интерфейсов, определенных спецификациями объектной модели документа (Document Object Model, DOM) и объектной модели каскадных таблиц стилей (Cascading Style Sheets (CSS) Object Model, CSSOM), существует также набор свойств и методов, определяемых в модуле отображения CSSOM (CSSOM View Module)? Этот интерфейс…
Подробнее
Ранее мы писали о том, каким образом мы оптимизировали сайт more.tv для поисковых систем технологически и семантически. В очередной статье из серии мы обсудим, как влияет пользовательский опыт (UX) и, в первую очередь, быстродействие веб-приложения на эффективность его поискового продвижения. Читать далее
Подробнее
Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Анимации перестанут зависать, ничего не будет лагать и мир станет чуть ярче. ✨ Читать далее
Подробнее
Зачастую, когда говорят об адаптиве, подразумевают сужение большого экрана до мобильного размера без потери функциональности. Однако, на самом деле, адаптив также существует между разными десктопными версиями. Обычно разработчики не очень стараются применять адаптивные подходы для больших экранов, ведь если интерфейс поместился на HD разрешении, то он точно поместится на 2K разрешении и больше. Однако контент никак не масштабируется, поэтому имеем на больших разрешениях маленькие
Подробнее
Когда говорим «динамический», подразумеваем JavaScript. Но некоторые динамические функции можно реализовать, используя только CSS. Например, цвета. Читать далее
Подробнее
Владея знаниями по вёрстке, можно достичь поставленных целей и перейти на следующую ступень профессионализма. В этой статье я расскажу, какие материалы мы с коллегами используем в своей работе: уверен, эта информация будет полезна разработчикам на CSS. На базовом уровне Цель: Помнить все свойства в CSS. Достигается примерно за 300 часов Что изучать? Читать далее
Подробнее
Анимация — несколько рисунков, показанных последовательно, чтобы создать иллюзию движения. Анимации привлекают внимание пользователей и помогают сделать интерфейсы понятными. Мы подготовили перевод статьи, чтобы разобраться, как контролировать движения и переходы в CSS. Читать далее
Подробнее
Я только начинаю свой путь, как в веб-разработке, так и в программировании в принципе, с ответом на этот вопрос мучился 2 дня и казалось бы перепробовал все, НО как это обычно бывает, решение лежало на поверхности. P.S. Могу путаться в терминах в силу своей неопытности, прошу строго не судить. Всегда рад конструктивной обратной связи, спасибо за понимание! Да, я знаю о существовании Django, просто начинать как мне кажется лучше с голого кода и дальше с базовыми знаниями переходить к
Подробнее
Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек. Читать далее
Подробнее