Переменные в CSS (или custom properties, кому как удобнее) изначально задумывались для хранения повторяющихся свойств вроде цветовой палитры или шрифтов в одном месте. В препроцессорах работа с переменными куда более гибкая, но магия SASS/SCSS применима не всегда и не везде, и в реальном мире часто обходятся без них, что нередко ведёт к раздуванию и размазыванию кодовой базы по разным файлам и форматам. В этой статье мы рассмотрим несколько интересных хаков, которые позволяют построить на механизме custom properties вещи, кажущиеся невозможными без препроцессоров или вмешательства JS.Читать полностью »
Рубрика «веб-дизайн» - 4
Крутые трюки с переменными CSS
2021-04-02 в 7:20, admin, рубрики: css, custom properties, switch-case, Блог компании Маклауд, веб-дизайн, переменные css, Разработка веб-сайтов, цветовые схемы, цссFont size бесполезен, давайте это исправим
2021-04-01 в 7:40, admin, рубрики: css, Font size, Блог компании VDSina.ru, веб-дизайн, дизайн, типографикаЧто происходит, когда вы указываете в редакторе "font_size": 32
? Я бы вам всё равно рассказал, но хорошо, что спросили.
Попробуем догадаться. Я пользуюсь Sublime Text 4 под macOS:

Если мы измерим сами буквы, то нигде не найдём числа 32:
32 — это не ширина и не высота буквы, и не высота заглавной буквы, и не рост строчных знаков, и не высота верхних или нижних выносных элементов. Что за дела?Читать полностью »
Как нас разводят с (бес)платной подпиской
2021-03-15 в 22:15, admin, рубрики: бесплатно, бесплатное в сети, веб-дизайн, дизайн, Лайфхаки для гиков, психологическое давление, темные паттерны, фримиум
Речь пойдёт об очень известном и уважаемом сайте - ShutterStock, одном из самых популярных фотобанков в мире. 360 млн изображений в базе! Я оформил там "бесплатную" пробную подписку, а потом бился с ними за возврат денег, списанных с моей карты без спросу. Осторожно, под катом много скриншотов!
TL;DR>
Как ощутить «интернет 2000 года»
2021-03-12 в 13:08, admin, рубрики: браузеры, веб-дизайн, интернет, Разработка веб-сайтов
Думаю, на Хабре есть уже много людей, никогда не слышавших звук модемного подключения по телефонной линии. А люди, заставшие те времена, наверняка успели многое подзабыть.
Все знают, что раньше интернет был попроще. Но часто ли вы вспоминаете, что во время его использования вся семья оставалась без телефонной связи? Помните ли встроенный в Opera баннер? Программы FlashGet и eMule? Вёрстку сайтов таблицами и фреймами? Штурмовые корабли в огне на подступах к Ориону? (Извините, увлёкся.)
Почему японский веб-дизайн настолько другой?
2020-12-06 в 13:23, admin, рубрики: skillfactory, web-разработка, Блог компании SkillFactory, веб-дизайн, Разработка веб-сайтов, японияКоничива Хабр!
В глазах многих людей Япония — земля спокойствия дзен-садов, безмятежные храмы и изысканные чайные церемонии. Как традиционные, так и современные японские архитектура, книги и журналы — предмет зависти дизайнеров всего мира. Однако по каким-то причинам практически ни одно из этих умений не перенесено на цифровые продукты, в частности на веб-сайты, большинство из которых выглядят так, как будто они появились примерно в 1998 году. Теории о том, почему всё именно так, многочисленны, и сегодня, в преддверии старта курса Профессия Веб-разработчик попытаемся развить некоторые из наиболее распространенных теорий в этом посте.

Не лайтхаусом единым: как проверить свой сайт со всех сторон
2020-10-14 в 6:30, admin, рубрики: AATT, Axe, Browseo, CSS Stats, CSS Validator, Favicon Check, i18n Checker, lighthouse, Link Checker, Majestic report, Nu HTML Checker, pagespeed insights, Pagewatch, Rocketvalidator, Sitecheck, wave, WCAG, Блог компании VDSina.ru — хостинг серверов, веб-аналитика, веб-дизайн, Разработка веб-сайтов, Тестирование веб-сервисовКогда мы говорим о веб-валидаторах и оптимизации сайта под них, мы чаще всего имеем ввиду Lighthouse/Pagespeed Insights от Google, который давно стал де-факто стандартом для оценки производительности сайта. Кто-то стремится к заветным 100 баллам даже на прототипах и шаблонных приложениях в две кнопки, кто-то в шутку создает абсолютно недоступный сайт с идеальным рейтингом, но для всех фронтендеров лайтхаус предоставляет вменяемую, хоть и довольно поверхностную, аналитику производительности сайта и поиск бутылочных горлышек. Однако скорость загрузки — лишь один из множества параметров, которые стоит проверять на своём сайте, и для большинства других есть свои валидаторы и скоринговые алгоритмы. Мы рассмотрим инструменты для каждого из значимых направлений и составим список, по которому стоит прогонять свой сайт, чтобы в дальнейшем не отлавливать проблемы вручную.Читать полностью »
Солнце в коробке
2020-10-04 в 17:44, admin, рубрики: diy или сделай сам, веб-дизайн, инди-разработка, микроконтроллеры stm, программирование микроконтроллеров, Разработка для интернета вещей, С++, ТехноТекст, электроника своими руками«Это мой лучший друг: всегда в хорошем настроении и не задаёт лишних вопросов» — Леон о растении.

Не секрет, что зеленые друзья расползлись по подоконникам многих из нас, вот и мне захотелось вырастить у себя что-нибудь. Да не просто «что-нибудь», а что-нибудь плодоносящее. К сожалению, в квартирных условиях обеспечить необходимые для этого условия весьма непросто. Однако попытаться стоит. Так, и взбрела мне в голову мысль разработки устройства для решения этой задачи — умного гроубокса. Конечно, идея не нова, но найти что-нибудь интересное, да еще и настольного формата среди готовой продукции мне не удалось и захотелось соорудить кое-что своё. Дело дошло до версии 2.0 и вот, я готов поделиться полученными результатами.Читать полностью »
Современное SEO: качество страниц
2020-10-02 в 22:40, admin, рубрики: amp, Google Web Toolkit, seo, веб-дизайн, голосовые интерфейсы, оптимизация, оптимизация сайта, поисковая оптимизация, поисковые системы, Разработка веб-сайтов
В конце мая с. г. в Google сообщили, что теперь они намерены в алгоритм ранжирования сайтов ввести понятие "качества страницы" (page experienceЧитать полностью »
41 термин в дизайне, полезный для UX-исследователя
2020-09-05 в 7:32, admin, рубрики: material design, UI, ui/ux дизайн, UX, web-разработка, wireflow, веб-дизайн, верстка, верстка сайтов, графический дизайн, дизайн, дизайн сайтов, дизайнеру, Разработка веб-сайтовРабота с UX-дизайнерами и знакомство с их словарным запасом — это почти изучение нового языка. Давайте посмотрим на 41 часто используемый дизайнерский термин. Для лучшего взаимопонимания в команде.
Новое CSS-свойство content-visibility ускоряет отрисовку страницы в несколько раз
2020-08-13 в 7:09, admin, рубрики: chromium, css, Блог компании VDSina.ru — хостинг серверов, веб-дизайн, интерфейсы, Разработка веб-сайтов5 августа 2020 разработчики Google анонсировали новое CSS-свойство content-visibility
в версии Chromium 85. Оно должно существенно повлиять на скорость первой загрузки и первой отрисовки на сайте; причём с только что отрендеренным контентом можно взаимодействовать сразу же, не дожидаясь загрузки остального содержимого. content-visibility
заставляет юзер-агент пропускать разметку и покраску элементов, не находящихся на экране. По сути, это работает как lazy-load, только не на загрузке ресурсов, а на их отрисовке.
В этой демке content-visibility: auto
, применённый к разбитому на части контенту, даёт прирост скорости рендера в 7 раз
Читать полностью »