Разработчик Бен Фрейн (Ben Frain) однажды заметил: «Писать CSS-код легко. Масшабировать и поддерживать его — нет».

К счастью, на просторах интернета можно найти множество решений этой проблемы. В данной статье рассмотрены основные киты структуры CSS-кода, а также интересные рыбы/млекопитающие поменьше.

Статья служит лишь памяткой или кратким справочником — для подробного ознакомления с методологиями настоятельно рекомендуется изучать оригинальную документацию.

Итак, начнем.

Рынок товаров и услуг с каждым днём всё сильнее смещается в онлайн. Продавцы уделяют своему цифровому представлению максимум внимания, и веб-разработчикам нужно каждый день создавать новое и уникальное. Чтобы Вы не теряли время на механической стороне работы и могли погрузиться в творческий процесс, мы предлагаем Вам подборку инструментов для разработки сайтов, где уже выделены преимущества и слабые места каждого.

Сервисы в этой сфере разделены на две группы по основному функционалу: к первой относятся площадки, дающие возможность создать непосредственно дизайн — Figma, Adobe XD, Sketch, InVision Studio — в них вы не соберете сайт, но разработаете его прототип и дизайн-макет. Вторая группа сервисов имеет расширенный функционал, здесь дизайнер может создать сайт с нуля: от прототипа до реализации — Pixli, Webflow и Tilda

Figma, Adobe XD, Sketch, InVision Studio: разработка дизайна и прототипов

Figma

Figma — сервис для дизайнеров интерфейсов и веб-разработчиков. В первую очередь, это онлайн-приложение, но можно воспользоваться и десктопной версией: файлы будут размещены на локальном хранилище, но их можно в любой момент импортировать в облако. Помимо основного функционала предусмотрены легко подключаемые плагины для множества целей: «Если вы можете создать сайт, вы можете создать плагин».

В переводе этой статьи автор приводят ряд советов и приёмов, которые упростят жизнь при проектировании дизайна пользовательского интерфейса. В статье даны сведения о полезных и экономящих время возможностях работы таких программ как Sketch, Adobe Illustrator, Figma, Adobe XD.

Поддержка встроенной ленивой загрузки изображений и iframe пришла в веб!
Начиная с Chrome 76 версии, вы можете использовать новый атрибут loading для ленивой загрузки ресурсов без необходимости писать для этого дополнительный код или использовать стороннюю JavaScript-библиотеку. Давайте рассмотрим детали.

Уверен, что никому не нужно объяснять почему сайты должны быть гибкими и адаптивными. Все используют проценты и медиа-запросы в своей верстке. Сейчас это уже стандарт.

Но типографика до недавнего времени не была столь гибкой. Все что мы могли — изменять размеры шрифта от брейкпоинта к брейкпоинту. В таком случае мы получали скорее адаптивную типографику нежели отзывчивую. Для каждого медиа-запроса нужно задавать свои значения. Можно конечно использовать компонентный подход с относительными размерами шрифта, что может существенно ускорить процесс редактирования, но принципиально это ничего не меняет. При перемещении компонента в другое место нужно будет опять пробегать по всем медиа запросам и подставлять новые значения.

Но потом появились они — vw, vh, vmin, vmax — единицы измерения, которые базируются на viewport. У нас появился шанс на отзывчивую типографику.

Другие статьи цикла:
Хроники лаборатории: как мы молотый кофе считали софтом для анализа клеточных структур
Компот из кофейных сухофруктов. Знакомимся с каскарой — лучшим другом велосипедиста

Звонок будильника зазубренной пилой вырывает мозг из обьятий сна, свет из-за занавески жгучими импульсами внезапно заставляет сетчатку заливать мозг пакетами нервных импульсов. Спящий организм неторопливо проводит инициализацию базового оборудования, убеждается в относительной сохранности контрольной суммы нейрональных последовательностей и запускает базовую операционную систему по дороге на кухню. Запутанные скрипты инициализации заставляют руки выполнять сложные последовательности нажатий кнопок, регистрируют глухое жужжание акустическими сенсорами, звук льющейся жидкости… Мозг автоматически включает внутренний таймер на 25 секунд, одновременно отслеживая цветовые характеристики тихо журчащей пары тонких струек. Несколько движений чайной ложкой, ускоряющей растворение сахарозы, и сознание взрывается от сочетания тонкого бодрящего аромата, тягучего шоколадного вкуса с легкой кислинкой и нотами тропических фруктов. В сознании медленно проступает образ смуглых девушек, наполняющих свои корзины красными ягодами под лучами палящего горного солнца. Пробуждение...

На Хабре/Гиктаймсе уже не раз обсуждался кофе и все, что с ним связано. Я решил написать пост, посвященный этому напитку и различным эффектам кофеина с медицинской точки зрения. Если хватит времени — возможно это будет цикл статей с экспериментами над людьми, computer vision и прочим непотребством. Увидим. А пока, товарищи кофеиноманы и им сочувствующие, добро пожаловать под кат.

Недавно участвовал в разработке одного проекта — фото конкурса. По задумке, рейтинг фото альбомов должен формироваться из суммы всех публикаций в социальных сетях: Facebook, Вконтакте, Twitter. Т.е. общий рейтинг фотоальбома расчитывается:

Рейтинг фотоальбома = кол-во «Share» в Facebook + кол-во «Сохранить» в Вконтакте + кол-во «Retweet» в Twitter

На макетах, вид кнопок несколько отличался от предоставляемых социальными сетями плагинов, формируемых функциями api. В частности вид счетчиков:

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

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

Итак:

• количество лайков будем получать от REST сервисов каждой социалки
• кнопки рисуем свои и обрабатываем событие click

Adobe выпустила новый экспериментальный инструмент под кодовым названием Wallaby для преобразования Flash в HTML5.

Wallaby — это AIR-приложение с очень простым интерфейсом, позволяющим легко конвертировать fla-файлы в HTML5-код. Преобразованный контент можно просматривать в браузерах на движке WebKit, включая Google Chrome и Safari.

Технология была представлена на конференции Adobe MAX осенью прошлого года. Теперь пользователи могут свободно получить доступ к Wallaby на Adobe Labs.

Не так давно на Хабре уже появилась новость о том, что Google стал бороться с так называемыми контент-фермами путем использования мнений своих пользователей о конкретных ресурсах. Теперь же корпорация официально сообщила о вводе в работу нового поискового алгоритма, который будет ориентироваться на проекты, которые предоставляют пользователям подробную и главное, оригинальную информацию (что за информация — не суть важно). Таким образом, Google собирается бороться с копипастерскими ресурсами, тайпсквоттерами и другими представителями черного и серого SEO.

На сайте Адоби потихоньку появляются русские хелпы. Вот что нащупал:

dreamweaver_cs5_help.pdf
fireworks_cs5_help.pdf
flash_cs5_help.pdf
illustrator_cs5_help.pdf
indesign_cs5_help.pdf
photoshop_cs5_help.pdf

Здравствуйте, игрозависимые хабралюди и им сочувствующие! Согласно последним новостям из интернетов, народные умельцы сделали карты, на которых можно играть с AI на разных уровнях сложности. Для того чтобы поиграть, надо заиметь старик, как сказано в этом посте, и после этого сделать следующее:

Многие известные (и не очень) компании открывают свободный доступ у себя на сайте не только к пресс-релизам, но и к галереи фотографий своей продукции в высоком разрешении, печатным материалам, рекламным постерам и прочим графическим вкусняшкам. У меня накопилось несколько ссылок на такие хранилища, и я решил сделать эту подборку, наверняка кому-нибудь пригодится, заодно кто-то может еще поделится ссылками, так как у меня ссылки на галереи только некоторых эээм… IT-компаний.


Ссылка на фотобанк Samsung у меня появилась первой, поэтому с неё и начну. Её мне когда-то скинули сами представители компании, когда я для них разрабатывал небольшой буклет.


Фотобанк Samsung содержит коллекцию высококачественных изображений продуктов компании Samsung Electronics, элементы корпоративного стиля, а также фотографии, сделанные в галерее (что-то вроде выставочного центра) Samsung.

На сайте Adobe опубликована русская документация по новым продуктам в виде онлайн справки и PDF.

Photoshop CS4 Online + PDF (38Mb)

Illustrator CS4 Online + PDF (31 MB)

InDesign CS4 Online + PDF (38 Mb)

Dreamweaver CS4 Online + PDF (19Mb)

Fireworks CS4 Online + PDF (15Mb)

Похоже больше не находится… У кого получится — кидайте ссылки в таком же формате- перенесу в пост.

В продолжении поста "Ресурсы по поиску качественных иконок" представляю свою коллекцию сайтов, на которых вы найдёте очень(!) много качественных наборов иконок. Все сайты проверены руками, следовательно открываются и скачиваются легко.

Все когда-нибудь сталкивались с проблемой поиска качественных иконок для различных нужд. Список лучших поисковиков:

Первое издание «Недизайнерской книги о дизайне» заслужило себе славу самой доступной книги по дизайну. Несмотря на то, что она стала раритетом уже пару лет назад, положительные отзывы о ней не стихают.
Пару месяцев назад издательство «Символ-плюс» вновь выпустило книгу в свет, под названием «Дизайн для недизайнеров». Если вы не боитесь остаться без своего экземпляра, то почитайте нашу рецензию на эту книгу, в противном случае вам стоит бросить читать наш обзор и отправиться в книжный магазин.

Новые полезные штуки для веб-дизайнеров за июнь 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера"

Инструменты

Red Pen — сервис позволяет легко получать обратную связь на свои работы в формате PNG: после загрузки картинки любой пользователь может оставлять свои комментарии к файлу

В этой статье очень подробно описано пошаговое создание адаптивного меню для сайта с несколькими вариантами компоновки элементов (в зависимости от размера экрана девайса). Для поддержки retina-экранов используется иконочный шрифт.



Демо / Скачать исходники

В заметке собраны сайты с обучающими материалами для веб-дизайнеров и веб-разработчиков. Старался не повторяться с постом 27+ ресурсов для онлайн-обучения хабраюзера nicolausYes.

Academic Earth

Множество бесплатных лекций, в том числе от известных университетов (Гарвард, MIT, Стенфорд и др.).

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?