Давайте без лишних слов разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения (все эти em, rem, vh, vw), как задать красный цвет шестью способами, и зачем нужны CSS-директивы.
Это работа является логическим продолжением моего первого подробного текста для сообщества об актуальных подходах к верстке Как верстать веб-интерфейсы быстро, качественно и интересно. Но, если в первом трактате, внимание уделялось, прежде всего, стилю кода, его качеству и эффектным современным возможностям различных препроцессоров и фреймворков, что демонстрировалось на некоторых конкретных специфических задачах, теперь хочется сфокусироваться на архитектурных или даже организационных аспектах веб-производства. Если вы не читали мой первый текст, но собираетесь при этом прочесть этот — не поленитесь перейти по ссылке и пробежать глазами самые последние разделы каждой из двух частей первого пособия: «Готовые решения» и «Песочницы». Этот текст начинает прямо с этих мест и развивает именно эти идеи: и о пагубности применения раскрученных-популярных «на все готовых» UI-«дизайн-систем»-фреймворков для создания кастомизированных веб-морд любой сложности и, о, по сути, полезности использования хотя бы минимального документирования и явных соглашений при разработке веб-GUI на фронтенде. Но я не стану тратить время, доказывая, что «ни в коем случае нельзя использовать Vuetify или AntDesign» для создания крупных UI-систем с полностью кастомным оформлением. Вам не нужно прикручивать себе огромный геморрой непроницаемый слой плохо кастомизируемого готового GUI для того чтобы написать кнопку или поле ввода! Если вам нужен датапикер — найдите и допилите что-нибудь под себя. Это понимание может только прийти или так и не придти с годами тяжелого опыта, когда вы будете постоянно тратить непростительно много своего времени на то, чтобы написать очевидно отвратительный CSS — «кряки с !important`ами поверх стилей библиотеки», выдумывать чудные костыли на javascript чтобы изменить дефолтное поведение виджетов на кастомное и хитрое-нестандартное затребованное вашими дизайнерами... И при этом ваши шаблоны, стили и js-обвязки будут превращаться во все менее читаемые запутанные нагромождения разнообразно оформленного кода, с различным подходом к наименованию и прочими бедами… Этот текст и написанный для него проект призваны наглядно показать «а как надо?».
Это история о том, как я разочаровался в компании «Паратайп» и шрифтах, которые она производит.
Я делал PDF-презентацию, чтобы показать европейским иностранцам. И что-то меня пробило на гиперкачественную вёрстку с образцовым типографингом. Пускай, думаю, у иностранцев сорвёт шаблон: они-то привыкли, что все русские верстают по-колхозному, особенно если думают, что нет.
Пока я размечал сетку страницы, меня упорола ещё одна идея: использовать шрифт отечественного производства. Пусть европейцы дважды офигеют.
Я выбрал PT Sans, потому что графика этого шрифта — вполне на мировом уровне. Однако…
Всегда ли обновление дизайна — это хорошо для сайта с точки зрения SEO? Нет, не всегда. Более того, часто редизайн влечет за собой ухудшение позиций. Так может, лучше не трогать то, что и так работает?
Опыт показывает, что изменение и обновление дизайна сайта раз в несколько лет — решение в очень правильное. Оно помогает улучшить юзабилити, увеличить конверсии и поднять позиции. Но почему тогда многие владельцы сайтов сталкиваются с совершенно обратным эффектом?
Привет, меня зовут Маша Челоногова, я руководитель группы дизайна онлайн-сервисов в Lamoda. Сейчас мы расширяем команду, проводим много собеседований и сталкиваемся с тем, что многих кандидатов заводит в тупик простой вопрос: умеете ли вы защищать свой дизайн?
Есть распространенное мнение, что если вкусы дизайнера и заказчика совпадают, тогда будет «мир-дружба-жвачка». Но это не так. Роль дизайнера эволюционировала, поэтому оценка результата работы становится более сложной задачей. А есть продуктовые дизайнеры, целью которых является решение конкретных бизнес-задач.
А где есть решение задач, там нет места субъективизму. На первый план выходит то, насколько эффективно выполнена задача, в каком контексте, и решает ли она проблемы заказчика — там уже появляются другие категории оценки, а не только «хорошо или плохо», «нравится или не нравится».
В этой статье я хочу поделиться небольшими советами, которые помогают в мире продуктовых дизайнеров, отстаивать свое предложение перед заказчиком.
Статья задумана как констатация существующей проблемы – сравнительно низкого качества российских веб-ресурсов, и как стартер для серии предстоящих публикаций, развивающих эту тему. Обозначить проблему – единственная ее цель, поэтому она не предполагает какого бы то ни было анализа, тем более готовых ответов на логичный вопрос «что делать?».
В отличие от российских дорог (используются здесь в качестве метафоры), космоса, науки, медицины, образования, экономики и с чем еще наши дела обстоят не лучшим образом, развитию которых традиционно что-то мешает, как то яйц, простите, санкции, шпионы и иноагенты, встречный ветер, сглаз и т. п., пример веба примечателен.
Во-первых, он по природе своей децентрализован и в настоящее время на удивление демократично не стеснен законодательством – во-вторых.
Объяснить состояние российского веба одной лишь неблагоприятной экономической обстановкой вряд ли получится. Как мы увидим из представленных в статье данных, в Китае, в котором перечисленные выше, а заодно и другие сферы деятельности находятся в менее удручающем и более оптимистичном состоянии, качество веба также оставляет желать лучшего.
Технологии и наилучшие практики, использующиеся во всем мире для строительства веба, доступны повсеместно и многие из них open source и free. Сам процесс строительства не требует капитальных вложений, требующихся на строительство дорог, газопроводов, запуск космических станций. Поэтому, в отличие от прочих глобальных составляющих жизни любого общества, применительно к вебу вопрос «почему он у нас такой хреновый?» не является риторическим.
В конце мая 2021 года вышло обновление браузера Chrome с поддержкой Web NFC. С помощью этой технологии сайты могут считывать и записывать теги NFC, когда пользователи прикладывают к меткам считывающее устройство. Пока что API Web NFC не ушёл за пределы Chrome для Android. Мы собрали идеи и мнения, как использовать эту функцию.
Наш дизайнер уже давно просился написать в наш блог, собирал примеры и отслеживал тренды. И вот сегодня мы рассмотрим 10 (и еще 2 спорных) трендов в дизайне креатива, которые, на наш взгляд, способны повысить CTR объявления, поэтому, вероятно, доживут с нами оставшиеся месяцы 2021-го и перейдут в 2022 год.
И сразу важный дисклеймер. У нас нет цели сказать этой статьей: «Делайте так, а вот так не делайте». Каждый креатив заходит определенной аудитории и существует в определенном социальном и медийном контексте. Каждое дизайнерское решение имеет право на жизнь и может кому-то понравиться. Мы лишь отразили актуальные общие тенденции, стили и мотивы, попытались их объяснить и показать их примеры.
Часть примеров ниже будет из реальных объявлений, часть из социальных сетей брендов, а часть с Behance. Во всех случаях мы постараемся указывать авторов или владельцев креативов, чтобы не нарушить ничьих прав.
Существует огромное множество стилей веб-дизайна, но глобально их можно разделить на два больших направления: минимализм и морфизм (по крайней мере, так было до появления миниморфизма)
Наверняка в вашем окружении есть люди, которые с гордостью говорят про себя: «Я — перфекционист!» Возможно, вы и сами относитесь к таковым. Ведь что плохого в том, чтобы стремиться выдать совершенный продукт? На первый взгляд — ничего. Вы гордитесь своей работой, проект-менеджер восторгается вашим талантом, клиенты рыдают от счастья, потому что у них самые лучшие сайты на свете.
Но есть и обратная сторона медали. Вы можете сколько угодно доводить макеты до совершенства, лишать себя сна и отдыха и отодвигать дедлайны. А вас всё равно попросят сделать кнопочку красненькой, а не синенькой. Или поиграть шрифтами. Ну и так далее. В итоге времени и сил затрачено очень много, но результат не удовлетворяет. Вы в эмоциональном раздрае, жизнь — тлен.
В предыдущей статье я писал веб-приложение и совершенно бездумно реализовал там авторизацию, построенную на JWT. В этой статье я хотел бы устроить небольшое погружение в технические детали того, как это устроено, перебрать разные альтернативы.
Достаточно несложно в React нарисовать форму, где можно позволить пользователям вводить свои учетные данные, включающие в себя логин и пароль. Не стоит практически никаких усилий, чтобы на Django сверить пароль, соответствующий логину в базе данных. Но что дальше? Обзор получился достаточно объемный с примерами кода, которые помогут воссоздать реализацию всех схем аутентификации/авторизации.
Очень часто в статьях про домашнюю автоматизацию на Хабре выкладывают всю техническую подноготную: на каких технологиях сделано, какие программные продукты применены. Но очень мало статей, которые показывают конкретные примеры правил автоматизации. И сегодня я хочу это исправить.
Причина, почему таких статей мало в общем-то понятна: правила фактически раскрывают всю частную жизнь владельца и его семьи. Посмотрим удастся ли соблюсти конфиденциальность в этой статье.
А ещё в этой статье не будет сложных правил - все они достаточно простые, но в то же время закрывающие практически все сферы автоматизации. Специально для этой статьи сделаны лакшери фоточки этой однокомнатной квартиры 46 квадратных метров.
Давно существует куча инструментов от Ahrefs, Mooz, Semrush и т.д., которые показывают главные мета теги для каждой страницы отдельно, в лучшем случае списком.
Но кто-нибудь видел инструмент, который выводит сразу все title и description за раз и показывает это в виде удобной иерархической визуальной структуры для всего веб-сайта?
Давайте по порядку ...
Вселенная «Звездных войн» — едва ли не уникальный пример того, как фантастический мир вовлекает миллионы фанатов-адептов наподобие религиозного культа. Духовное учение Йоды, джедаизм, оставило существенный след в реальном мире. Психолог Дерек Тогерсон приводит результаты переписи населения Великобритании за 2011 год: около 177 тысяч человек объявили себя джедаями. Это седьмая по популярности религия в масштабах целой страны. Что ж, давайте подумаем, как так вышло. Что за сила связывает миллионы преданных фанатов с Люком Скайуокером, Джин Эрсо, Ханом Соло и Дартом Вейдером?
История мира «Звездных войн» написана по всем канонам классического сторителлинга, мастерства рассказывать интересные и захватывающие истории, воздействующие на аудиторию. А что насчет веб-сайтов? Можно ли в веб-дизайне использовать те же методы для привлечения и удержания аудитории? Да, и еще как!
Не секрет, что во время разработки программного обеспечения в b2b очень сложно найти пользователей, чтобы провести CustDev и проверить жизнеспособность гипотез и идей, которые родились во время исследования у продуктового дизайнера.
Но развивать продукт нужно, и поэтому приходится находить методы, которые все-таки позволят оценивать востребованность новых фичей корпоративными пользователями.
Доброе утро!
Сегодня поговорим о примерах в дисциплине урматфиз общими словами без погружения в сухой, академический язык и множества формул.
По шкале сложности для чистой математики эта дисциплина на мой субъективный взгляд получает 7/10. Но это не значит что эти формулы легки для зазубривания и запоминания. Тем более говорить о том, что я могу сделать открытие в данной области которое попадет в учебники, например объясняя физику какого - либо нового процесса или уточняя уже существующий. Если подумать, то например выбирая какой-либо параграф учебника по данному предмету, то он исписан формулами которые если провести аналогию похож на модуль по программированию. Скажу сразу мне преподавали данный предмет очень плохо, не объясняя что данные формулы значат, точнее заглавие было например: "Уравнение волны" или "Колебание мембраны", а дальше переписывали все формулы в параграфе с короткими комментариями что откуда, весьма скудными в полной тишине. Препод перелистывал страницы презентации и ходил туда-обратно пока мы переписывали. Видно что не ему, ни мне это было не нужно, как бы для общего развития. Скорее всего надо было читать дополнительную литературу чтобы понять, но там уровень для подкованного студента, предметов было много и где-то были пробелы и особо не было времени на все распылиться. Ну это так к слову. К слову чем больше людей надо учить в промежутке времени, тем меньше времени уделяется каждому студенту и тем хуже уровень знаний у каждого студента, ну это в пределе.
Ну это было уже давно, лекций не осталось, практика забылась, из головы все выветрилось как талая вода. Вот пример волны наглядный:
Новичкам может быть сложно создать сайт, доступный лицам с ограниченными возможностями. Мы решили собрать в один материал обширный ассортимент инструментов, проверяющих доступность страниц — от одноразовых букмарклетов до полноценных приложений. Надеемся, он поможет вам погрузиться в мир создания доступных сайтов.
Это перевод статьи Nic Chan «A Complete Guide To Accessibility Tooling» из журнала Smashing Magazine.
Приветствую всех жителей хабравиля! Сегодня я подготовил для вас основы по блочной модели CSS. Безусловно, многие из вас знают о чём идёт речь, но сегодня я постараюсь объяснить прописные истины более понятно и наглядно, что поможет вам создавать веб-сайты, с идеально подходящими друг другу элементами (с точностью до пикселя), и научит более точно использовать свойства размеров, полей, отступов и границ. Итак, всех приглашаю под кат и погнали!
