Рубрика «веб-дизайн»

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

Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут - 1
Читать полностью »

Веб на заре Рунета. Как создавали и где хостили сайты в 90-е - 1
Хоумпейдж мой, домашняя страница готова. Сайт я свой доделал, бабуля!

Удивительно, но я совершенно не помню день своего знакомства с интернетом. Это определенно был 1996 или 97-й год, но сам момент отчего-то не отложился в памяти: интернет вошел в жизнь нашего поколения исподволь, вытеснив из нее и BBS, и эхоконференции Фидонета. Поначалу мы отчаянно потребляли контент: серфинг по сети в середине 90-х напоминал путешествия Колумба в поисках неизведанного, и ежедневно приносил новые увлекательные открытия. Затем у многих тяга к творчеству брала верх, и они начинали робкие эксперименты по созданию собственных «кошмарных домашних страничек». Меня тоже не минула чаша сия — воспоминания о том, как это было, сейчас вызывают лишь ностальгическую улыбку.
Читать полностью »

Крутые трюки с переменными CSS - 1

Переменные в CSS (или custom properties, кому как удобнее) изначально задумывались для хранения повторяющихся свойств вроде цветовой палитры или шрифтов в одном месте. В препроцессорах работа с переменными куда более гибкая, но магия SASS/SCSS применима не всегда и не везде, и в реальном мире часто обходятся без них, что нередко ведёт к раздуванию и размазыванию кодовой базы по разным файлам и форматам. В этой статье мы рассмотрим несколько интересных хаков, которые позволяют построить на механизме custom properties вещи, кажущиеся невозможными без препроцессоров или вмешательства JS.Читать полностью »

Что происходит, когда вы указываете в редакторе "font_size": 32? Я бы вам всё равно рассказал, но хорошо, что спросили.

Попробуем догадаться. Я пользуюсь Sublime Text 4 под macOS:

Font size бесполезен, давайте это исправим - 1

Если мы измерим сами буквы, то нигде не найдём числа 32:

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

Как нас разводят с (бес)платной подпиской - 1

Речь пойдёт об очень известном и уважаемом сайте - ShutterStock, одном из самых популярных фотобанков в мире. 360 млн изображений в базе! Я оформил там "бесплатную" пробную подписку, а потом бился с ними за возврат денег, списанных с моей карты без спросу. Осторожно, под катом много скриншотов!

TL;DR>
Как ощутить «интернет 2000 года» - 1

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

Все знают, что раньше интернет был попроще. Но часто ли вы вспоминаете, что во время его использования вся семья оставалась без телефонной связи? Помните ли встроенный в Opera баннер? Программы FlashGet и eMule? Вёрстку сайтов таблицами и фреймами? Штурмовые корабли в огне на подступах к Ориону? (Извините, увлёкся.)

Читать полностью »

Коничива Хабр!
В глазах многих людей Япония — земля спокойствия дзен-садов, безмятежные храмы и изысканные чайные церемонии. Как традиционные, так и современные японские архитектура, книги и журналы — предмет зависти дизайнеров всего мира. Однако по каким-то причинам практически ни одно из этих умений не перенесено на цифровые продукты, в частности на веб-сайты, большинство из которых выглядят так, как будто они появились примерно в 1998 году. Теории о том, почему всё именно так, многочисленны, и сегодня, в преддверии старта курса Профессия Веб-разработчик попытаемся развить некоторые из наиболее распространенных теорий в этом посте.

Почему японский веб-дизайн настолько другой? - 1


Читать полностью »

Не лайтхаусом единым: как проверить свой сайт со всех сторон - 1

Когда мы говорим о веб-валидаторах и оптимизации сайта под них, мы чаще всего имеем ввиду Lighthouse/Pagespeed Insights от Google, который давно стал де-факто стандартом для оценки производительности сайта. Кто-то стремится к заветным 100 баллам даже на прототипах и шаблонных приложениях в две кнопки, кто-то в шутку создает абсолютно недоступный сайт с идеальным рейтингом, но для всех фронтендеров лайтхаус предоставляет вменяемую, хоть и довольно поверхностную, аналитику производительности сайта и поиск бутылочных горлышек. Однако скорость загрузки — лишь один из множества параметров, которые стоит проверять на своём сайте, и для большинства других есть свои валидаторы и скоринговые алгоритмы. Мы рассмотрим инструменты для каждого из значимых направлений и составим список, по которому стоит прогонять свой сайт, чтобы в дальнейшем не отлавливать проблемы вручную.Читать полностью »

«Это мой лучший друг: всегда в хорошем настроении и не задаёт лишних вопросов» — Леон о растении.

Солнце в коробке - 1

Не секрет, что зеленые друзья расползлись по подоконникам многих из нас, вот и мне захотелось вырастить у себя что-нибудь. Да не просто «что-нибудь», а что-нибудь плодоносящее. К сожалению, в квартирных условиях обеспечить необходимые для этого условия весьма непросто. Однако попытаться стоит. Так, и взбрела мне в голову мысль разработки устройства для решения этой задачи — умного гроубокса. Конечно, идея не нова, но найти что-нибудь интересное, да еще и настольного формата среди готовой продукции мне не удалось и захотелось соорудить кое-что своё. Дело дошло до версии 2.0 и вот, я готов поделиться полученными результатами.Читать полностью »

Современное SEO: качество страниц - 1

В конце мая с. г. в Google сообщили, что теперь они намерены в алгоритм ранжирования сайтов ввести понятие "качества страницы" (page experienceЧитать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js