Pull to refresh
0
0
Денис Дрожжов @colobot

User

Send message

Вам показалось! Все о Perceived Performance

Reading time12 min
Views10K

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

В большинстве случаев с ростом реальной производительности улучшается и Perceived Performance. А когда реальная производительность не может быть с легкостью увеличена, существует возможность поднять видимую. В своем докладе на Frontend Live 2020 бывший разработчик Avito Frontend Architecture Алексей Охрименко рассказал о приемах, которые улучшают ощущение скорости там, где ускорить уже нельзя.

Читать далее
Total votes 23: ↑22 and ↓1+21
Comments23

Как устроена библиотека дизайн-системы Авито в Фигме

Reading time9 min
Views14K

В Авито колоссальное количество интерфейсов и экранов — около 1000 на десктопе и в мобильных приложениях. Чтобы интерфейсы были консистентными и корректно работали, а создавать их получалось быстрее и проще, у нас есть дизайн-система.

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

Читать далее
Total votes 20: ↑19 and ↓1+18
Comments20

Спать мало, но правильно?

Reading time7 min
Views897K
Навеяно этим постом от юзера case. Пост не новый, и на главную он не попал.
Но я вот наткнулся на него сегодня и решил написать кое-что о сне. Уверен, что это будет полезно многим хабравчанам, да и случайным читателям тоже.
Читать дальше →
Total votes 713: ↑670 and ↓43+627
Comments420

Не используйте @import

Reading time3 min
Views62K
В данной статье автор Steve Souders приводит наглядные доказательства, почему не стоит использовать import для загрузки стилей в документ.

LINK vs. import


Существует 2 способа загрузки файлов стилей. Использовать тег LINK:
<link rel='stylesheet' href='a.css'>

Или импортировать файлы с помощью import:
<style>
@import url('a.css');
</style>

Я предпочитаю использовать LINK для удобства, т.к. вы должны помнить, что import нужно размещать всегда в самом верху блока стилей, в противном случае они не импортируются.
Смотрим доказательства
Total votes 72: ↑58 and ↓14+44
Comments52

Toggl виджет для Mac

Reading time1 min
Views1.6K
image

По совету недавней статьи я решил в очередной раз попробовать вести трекинг потраченного на задачи времени. Воспользовался старой учеткой на сервисе toggl.com и на этот раз, о чудо, получилось весьма недурственно — вести трекинг оказалось не очень напряжно, а эффект получился положительным. Самое полезное заключается в том, что приходится записывать чем ты занимаешься, а записывать, что занимаешься пинанием балды не очень хочется — поэтому приходится делать полезные вещи :)

На радостях решил установить виджет быстрого доступа к сервису, но не нашел ни на официальном сайте ни в гугле. Пришлось скачать программку TogglDesktop. OMG! Программа, единственная задача которой выводить iframe на их сайт занимает 30Mb! Такое ощущение, что они встроили туда копию WebKit-a.

В итоге, за полтора часа разобравшись с Dashcode, сделал маленький и удобный виджет на 140Kb. Теперь трекинг задач осуществляется, так сказать, на кончике пальцев! Очень удобно :)

Всех маководов, решивших вести трекинг своих задач, прошу на страничку виджета.
Total votes 26: ↑22 and ↓4+18
Comments16

10 недорогих способов повысить лояльность работников в стартапе

Reading time2 min
Views13K
Стартапы и небольшие компании зачастую не могут предложить звездные зарплаты своим работникам, но есть другие способы сделать жизнь сотрудников более приятной. Большинство этих методов бесплатны или обойдутся вам в копейки.
workathome

Читать дальше →
Total votes 129: ↑108 and ↓21+87
Comments253

Как делегировать?

Reading time3 min
Views23K
Последняя версия этой статьи о делегировании.
Есть такое умное слово — делегирование. Определение я бы дал такое: делегирование — это процесс передачи ответственности за результат исполнение на другого субъекта. Вряд ли, кто то в здравом уме скажет «Я тебе это делегирую», чаще мы используем слово «поручаю». Попробую поделиться своим опытом, как перекладывать с больной головы на здоровую.

Читать дальше →
Total votes 88: ↑70 and ↓18+52
Comments61

О роли изменений

Reading time2 min
Views1.3K
Питер Шульц, в то время президент компании Porsche, рассказывал как-то историю, которая приключилась вскоре после того, как он попал на эту должность. Его пребывание в компании началось с детального знакомства с ней: он обходил все отделы, чтобы представиться и вникнуть в работу каждого подразделения.

image

В конструкторском отделе он спросил, участвует ли Porsche в гоночных соревнованиях Le Mans (считается главной гонкой для компаний, производящих спортивные машины). «Нет, — ответили ему, — не участвуем». Это было странно, ведь Porsche — один из лидеров в производстве гоночных машин. Тогда Питер поставил перед ними амбициозную задачу: «Давайте сконструируем машину, которая победит в гонке Le Mans!».

Читать дальше →
Total votes 190: ↑167 and ↓23+144
Comments40

Чему я научился в Майкрософт

Reading time9 min
Views5.9K
Проработав пять лет в различных командах в Майкрософт я вынес несколько вещей, о которых я даже не подозревал, когда оканчивал колледж. Основные ценности, чему я научился, вынесенные уроки, причина моего крика на друзей, как ни называй, они сослужили мне хорошую службу.

Некоторые из этих вещей специфичны для Майкрософт, но большая часть найдет применение в любой командной/корпоративной среде. Некоторые из них сложны – из-за них тебя могут уволить (а может и хуже), если ты не знаешь, что делаешь.
Читать дальше →
Total votes 290: ↑240 and ↓50+190
Comments108

15 примеров отличной типографики

Reading time2 min
Views11K
Британский сайт I Love Typography, посвящённый типографике, опубликовал список с примерами отличной типографики. Этот список составлен по итогам II кв. 2008 года. Предыдущие «хит-парады» можно найти здесь и здесь.

Каждый пример сопровождается кратким комментарием, а нажатие на скриншот ведёт на оригинальный сайт.

Seed Conference


Нет флэша, нет картинок, нет лишнего шума; просто хорошо стилизированный шрифт и хорошо написанный текст: реальное доказательство того, что с помощью только шрифта можно получить отличный результат. Хотелось бы увидеть ещё несколько примеров такого рода.


Читать дальше →
Total votes 66: ↑58 and ↓8+50
Comments36

Шрифтестер

Reading time1 min
Views807
Для приобщения дизайнеров к теме экранной типографики, хочу рассказать про очень интересный и удобный инструмент typetester, кстати вот он:

Бывают такие ситуации, когда нужно подобрать гарнитуру для сайта и при этом проверить как она выглядит в различных браузерах и как сочетается с другими гарнитурами, а ещё бы и готовый CSS всего этого получить. Более того, если не доступен визуальный редактор, который, последнее время я вообще не использую, то хочешь-не хочешь а Шрифтестером пользоваться придётся. Симпатичная графика сочетается с повышенным удобством программы! В общем must use.
Rating0
Comments0

Рабочая библиотека веб-типографа и контент-менеджера

Reading time4 min
Views7.5K
Несмотря на то, что основной инструмент работы веб-типографа и контент-менеджера — это Интернет, пока ещё не весь корпус полезных для нас материалов переведён в электронную форму. Поэтому я решил перечислить те бумажные книги, которые стоят у меня на отдельной полке, и на которые не успевает оседать пыль из-за постоянного их использования.

Список книг будет разбит на группы по темам, и каждая из них — на группы «обязательно прочесть и иметь» и «можно прочесть и иметь» (это выделение безусловно субъективно, так что спорить насчёт него не буду точно). В принципе, большинство книг есть в широкой продаже, в том числе и в крупнейших российских интернет-магазинах. Некоторые есть в отсканированном виде и их можно найти в Интернете.

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


Читать дальше →
Total votes 86: ↑82 and ↓4+78
Comments47

Оформление цитат на сайтах

Reading time8 min
Views92K
Обычно при вёрстке текстов для веба на оформление цитат не обращают достаточного внимания. Стараясь исправить это досадное недоразумение, мы коснёмся двух вопросов: типографического оформления цитат (в той части, где чаще всего допускаются ошибки при вёрстке) и реализации этого оформления в HTML-коде.

Мы также не будем касаться вопросов проверки смысловой точности цитирования, правильного использования купюр, сокращений и дополнений — всех интересующихся ждёт «Справочник издателя и автора» А. Э. Мильчина и Л. К. Чельцовой.

Надеемся, что эту запись будет удобно использовать как справочник по часто встречающимся вопросам оформления цитат.

Читать дальше →
Total votes 108: ↑105 and ↓3+102
Comments59

Краудсорсинг шрифтов

Reading time1 min
Views3.2K
Краудсорсинг проникает в разные немыслимые области. Взять, к примеру, разработку шрифтов. Раньше этим занимались специализированные компании или вынужденно переквалифицированные дизайнеры, вроде сотрудников студии Лебедева. В результате мы получаем или закрытый продукт, недоступный для сообщества дизайнеров, или непомерно дорогой. Типичная стоимость коммерческого шрифта колеблется в районе $30-40.

Слава богу, теперь всё меняется благодаря краудсорсингу. Разработка шрифтов оказалась отличным применением для концепции UGC, как показывает пример онлайнового редактора шрифтов и сервиса FontStruct.

Выпуск редактора шрифтов FontStruct состоялся в апреле. Программа, с помощью которой любой желающий может легко и быстро создать собственный шрифт, так понравилась пользователям, что в первые дни работы сайт едва справлялся с нагрузкой. К настоящему времени пользователи нарисовали уже почти 2000 фонтов самого разного вида и предназначения. Все файлы DIY абсолютно бесплатны для скачивания.


Читать дальше →
Total votes 36: ↑33 and ↓3+30
Comments26

95% веб-дизайна составляет типографика

Reading time3 min
Views30K
95% информации на вебе — текст. Вполне логично, что веб-дизайнер должен получить хорошую подготовку в основной дисциплине формирования письменной информации, иными словами: типографике.

Информационный дизайн это типографика


В 1969 году, Эмиль Рудер, знаменитый швейцарский типограф, написал о современных ему материалах для печати то, что мы могли бы легко сказать о наших современных веб-сайтах:

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


Включите воображение (замените «печатный» на «интернет») и это звучит как описание работы информационного дизайнера. Задача информационного дизайнера и есть «разделять, организовывать и интерпретировать эту массу печатных изданий таким образом, что у читателя будет шанс найти то, что интересно ему».
Читать дальше →
Total votes 98: ↑84 and ↓14+70
Comments27

Два инструмента для создания шрифтов.

Reading time2 min
Views136K
Я настоящий фанат типографики, и трачу много времени на поиск и экспериментирование со всеми видами различных типов шрифтов и стилей.

В этом смысле, я также пытался создать собственные шрифты, и должен сказать, что любой человек, обладая небольшим опытом, может это сделать.
Далее освещены несколько наиболее известные (и бесплатных) инструментов для самостоятельного создания шрифтов.
Читать дальше →
Total votes 55: ↑51 and ↓4+47
Comments28

Рецепты хорошей типографики

Reading time7 min
Views57K
Судя по результатам голосования, которое я проводил в своём блоге, большинство пользователей никак не типографируют тексты перед публикациями (НЛО не считается). Те, кто работают над текстами, в большинстве своём делают это вручную, поэтому я решил попробовать собрать воедино рецепты экранной типографики, дабы не забывать самому и напомнить другим. Не думаю, что статья будет чем‐то новым для опытных верстальщиков. Новички узнают, профи исправят :)

Содержание

  1. Дефисы, тире, минусы и другие палочки
  2. Кавычки и чёрточки
  3. Скобки
  4. Многоточие
  5. Заголовки, списки

Читать дальше →
Total votes 154: ↑133 and ↓21+112
Comments92

Типограф (плагин к редактору FCK)

Reading time1 min
Views2.2K
(Пора выйти из тени)
О моем плагине уже писал товарищ
Теперь можно типографировать 4-мя типографами.
К уже имеющимся
rmcreative.ru/article/programming/typograph, typograf.ru,
Типограф студии Артемия Лебедева.
Добавил ещё один off-line типограф — студии Евгения Муравьева.

Все типографы настроены на работу с UTF-8.

Страница — Типограф для FCKEditor

Плагин делался первоначально для себя и так как к посту не было ни одного коммента, то и не правился.
Типограф для FCK.
Типограф для FCK.Форма типографирования
Total votes 48: ↑39 and ↓9+30
Comments36
1

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity