Скорость загрузки — очень важный фактор, влияющий на рейтинг сайта на SERP (Search Engine Result Page), или на странице результатов поиска. PageSpeed Insights от Google — отличный инструмент для оптимизации скорости загрузки вашего веб-сайта. Он не только показывает текущую скорость, но и определяет проблемы, которые тормозят ваш ресурс. В этом руководстве мы покажем, как устранить одну из наиболее частых проблем, с которой вы можете столкнуться, тестируя ваш сайт. Так что, если вы
Подробнее
В этой статье описываются некоторые методы ускорения загрузки фронтенд-приложений, чтобы реализовать отзывчивый, быстрый пользовательский интерфейс. Мы обсудим общую архитектуру фронтенда, как обеспечить предварительную загрузку необходимых ресурсов и увеличить вероятность того, что они в кэше. Немного порассуждаем, как отдавать ресурсы с бэкенда и когда можно ограничиться статическими страницами вместо интерактивного клиентского приложения. Процесс загрузки разделим на три этапа. Для
Подробнее![[recovery mode] 10 самых важных фактов про SERM](https://habrastorage.org/webt/71/n-/5f/71n-5fzwwbhzdwbr77mtymevqdu.png)
Поисковые системы давно и, видимо, надолго стали одним из основных источников, откуда мы черпаем информацию. Более того, в отличии от других источников, к поисковикам стабильно очень высокое доверие. Мы верим результатам выдачи Google и на их основании покупаем товары, устраиваемся на работу, выбираем, где и как провести отпуск, составляем мнение о событиях, людях, брендах. Иногда те самые бренды и люди оправдано не довольны тем, как они представлены в поисковых системах и как это влияет на
Подробнее![[Перевод] Стилизация старого доброго элемента button](https://habrastorage.org/webt/k1/7-/ql/k17-qlhlsy-iylytnjcmw4wjrhg.png)
Кнопка — это один из тех элементов, которые чаще всего используются на веб-страницах. Тег может быть применён для запуска некоего процесса вроде вывода данных, открытия модального окна, отправки формы и так далее. В материале, перевод которого мы публикуем, речь пойдёт о тонкостях стилизации элемента button и о том, как оформлять кнопки с учётом того, чтобы они хорошо работали бы в любых браузерах. Кроме того, тут будет рассмотрено большинство часто используемых стилей кнопок. Поговорим
Подробнее
Я увлеклась веб-дизайном и разработкой в конце 90-х. Чёрт побери, как это было давно. И как это было ужасно. Я имею в виду, что сделать сайт и опубликовать его представляло хитрое дело, а заказчиков можно было пересчитать по пальцам. Мне казалось, что большинство разработчиков помнят те дни или хотя бы следующее десятилетие, но нет. Недавно мне попался на глаза твит, автор которого удивлялся технике простановки закруглённых углов до появления border-radius (сделать отдельную картинку для…
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее
Один ранимый, глупый, мечтательный верстальщик решил стать программистом и у него ничего не вышло… Но он не бросил программировать и решил начать с малых программ… Это лучшее описание, которое я мог придумать. Именно с это целью я начал писать простенькие программы чтобы отточить свои навыки, познакомиться с новыми конструкциями в привычном мне языке и если честно, то это даже стало приносить мне удовольствие. Если у вас мало опыта разработки, то статья будет полезной, а если у вас уже
Подробнее
При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript. Читать дальше →
Подробнее
Доброго времени суток, друзья! Однажды веб серфинг привел меня к этому замечательному коду. «Замечательность» его (то бишь кода) состоит в практическом использовании переменных в CSS, что сильно облегчает написание стилей (использование переменных также обуславливает необычную структуру CSS). И, конечно, тема импонирует весьма — планеты Солнечной системы. Оригинальный проект написан на Pug и Sass, мы же разберем его на HTML/CSS. Итак, поехали. Читать дальше →
Подробнее
Начало Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать. Не только древность моей сборки мотивировала на эту статью, но и еще одна причина: мне больно…
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее![[Перевод] Понимание CSS Grid: Создание Grid-контейнера](https://habrastorage.org/webt/lx/qv/m3/lxqvm3tgz2rsshocx7mjvj4fktg.png)
Перевод «Understanding CSS Grid: Creating A Grid Container» Рейчел Эндрю Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель…
Подробнее