Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS.
В короткой серии статей я собираюсь потратить некоторое время на детальную распаковку Flexbox — точно так же, как я делала в прошлом с grid. Мы рассмотрим, для чего был разработан Flexbox, что он действительно делает хорошо, а когда мы не можем выбрать его в качестве способа компоновки.
В этой статье мы подробно рассмотрим, что на самом деле происходит при добавлении display: flex в вашу таблицу стилей.
Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-август 2018.
Читать полностью »
Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.
В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
Читать полностью »
Привет! Представляю вашему вниманию перевод статьи «Ditch MVPs, Adopt Minimum Viable Prototypes (MVPr)» автора Alexandru Giuseppe Ispas.
Стремление к совершенству — это тонкая ловушка, которая часто приводит дизайнеров в бесконечный цикл итераций и доработок. Это особенно справедливо в мире цифровых продуктов, где каждое взаимодействие и графический элемент могут стать объектом дизайнерской одержимости.
Но если абстрагироваться и посмотреть на междисциплинарный характер дизайна цифрового продукта, легко понять, как дизайнеры попадают в идеальную ловушку.
Читать полностью »
В течение последних двух месяцев я углубился в изучение CSS Grid. В этой заметке я хочу поделиться своими основными соображениями. Чтобы было более понятно, я объясню все с помощью диаграмм.
Вероятно, вы уже знакомы с блоковой моделью CSS для обычных элементов. Давайте начнем с аналогичного «общего обзора» для CSS Grid:
В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный div, имеющий margin, border и padding. Для создания CSS grid контейнера добавим свойство display: grid. Элементы сетки — это потомки, размещенные внутри родительского контейнера. Они обычно определяются как список, описывающий header, sidebar, footer или другие аналогичные элементы макета сайта, зависящие от его дизайна.
Читать полностью »
Будучи студентом колледжа, я оказался тем самым одним из пяти, который подвержен тревожному расстройству и депрессии. Отчаянное стремление хорошо учиться, поиск работы, отношения, просто ощущение, что я «вступаю во взрослую жизнь» — все это слилось в лавину забот, которые поглотили меня с головой (оглядываясь назад, я понимаю, что многие из них были пустячными).
Однажды в первый год учебы у меня выдался особенно напряженный день — один из тех дней, когда расписание уже и так забито под завязку, а новые проблемы и встречи все прибывают и прибывают. В ту ночь я лежал в постели совершенно изможденный, но не мог сомкнуть глаз из-за паранойи. Через три часа, так и не сумев заснуть, я встал с кровати и загуглил: «простые способы умереть».
И вот что я увидел:
Читать полностью »
Все течет, все меняется, но только input[type=file] как портил нервы всем начинающим веб-разработчикам, так и продолжает это делать до сих пор. Вспомните себя N лет назад, когда вы только начинали постигать азы создания веб-сайтов. Молодой и неопытный, вы искренне удивлялись, когда кнопка выбора файла напрочь отказывалась менять цвет своего фона на ваш любимый персиковый. Именно в тот момент вы впервые столкнулись с этим несокрушимым айсбергом под названием «Загрузка файлов», который и по сей день продолжает «топить» начинающих веб-разработчиков.
На примере создания поля для загрузки файлов я покажу вам, как правильно прятать input[type=file], настраивать фокус на объекте, у которого фокуса быть не может, обрабатывать события Drag-and-Drop и отправлять файлы через AJAX. А также я познакомлю вас с парой браузерных багов и путями их обхода. Статья написана для новичков, но в некоторых моментах может быть полезна и занимательна даже для матерых разработчиков.
Читать полностью »
Это перевод статьи Оханса Эммануэля, который уже много лет работает в сфере разработки веб-сайтов и сервисов. Его главное увлечение — CSS, здесь он чувствует себя как рыба в воде. Свою любовь к делу и знания Оханс охотно передает читателям.
Сегодня мы поговорим о том, как можно сделать CSS-стили ужасными, само собой, решая прямо противоположную задачу — научиться создавать красивый и чистый CSS. Материал подойдет в основном начинающим веб-дизайнерам и разработчикам, хотя в качестве напоминания статья пригодится и их более опытным коллегам.
Читать полностью »
Как вы знаете, в городе-курорте Самара мы время от времени проводим Фестиваль 404, куда приезжают разные люди и делятся опытом. Доклады записываем на видео и выкладываем совершенно бесплатно на свой канал youtube. Там накопилось много интересного и мы сделали небольшую подборку самого популярного видео докладов прошлых лет.
Вас ждут тонны полезной информации и реки ностальгических слёз!
Я уже достаточно давно экспериментирую с CSS-переменными. Если вы к ним еще не подступались, вы можете воспользоваться этим кратким руководством, чтобы быстро во всем сориентироваться и приступить к работе.
Читать полностью »
