Подписаться на блог
В Твиттере

Реплики и ссылки на заметки

В Фейсбуке

Ссылки на заметки

Вконтакте

Ссылки на заметки

В Телеграме

Ссылки на заметки

В Тумблере

Заметки целиком

В Же-же

Заметки целиком

По РСС

Заметки целиком

Если что-то из этого не работает, напишите мне: ilyabirman@ilyabirman.ru.

Программирование

Что почитать на выходных — 145

Вот:

  1. Developers’ side projects. Джоел Сполски рассказывает, как страшно в Америке программистам жить.
  2. The Case Against Progressive Enhancement's Flimsy Moral Foundation.
  3. Why time management is ruining our lives. «The better you get at managing time, the less of it you feel that you have». Это да. «Part of the problem is simply that thinking about time encourages clockwatching, which has been repeatedly shown in studies to undermine the quality of work». И это да. Но вот это: «Work expands to fill the time available for its completion» — я не понял, почему проблема. Это подаётся так, будто настоящая цель тайм-менеджмента — максимизация времени безделья.
  4. Apple’s 2016 in review. Очередной разнос Эпла. Что-то последнее время их пишут все кому не лень; этот очень хороший. Про Мак Про (который не обновлялся четыре года): «what they built was a device based around their own ego needs of proving their critics wrong, not a device that served the purposes of their power users». И ещё: «They really miss Katie Cotton, because they seem to have gone tone deaf on how they explain the story of the product». Вообще, увольнение Кейти — самое удивительное решение Эпла за последнее время.
  5. Сначала конструкция, потом сетка. Игорь Штанг.
  6. Великая Отечественная Война. В разное время так назывались разные войны.

Однажды в Википедии: Moving sofa problem

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

6 января   Америка   веб-разработка   программирование   типографика   управление собой   чтиво   Эпл

Склонировать структуру папок и файлов

Мне нужно было скопировать структуру папок и файлов с одного диска на другой. Чтобы всё лежало так же по папкам, под теми же именами, но каждый файл весил 0 байт.

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

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

Пришлось попотеть, чтобы понять, как это сделать. У меня получилось так:

cd папка_которую_клонируем
find . -type d -print0 | xargs -0 -I {} mkdir -p папка_куда_клонируем/{}
find . -type f -print0 | xargs -0 -I {} touch папка_куда_клонируем/{}

Сложность была в том, что find возвращает список найденных файлов с пробелами в именах, и когда такие файлы передаёшь куда-то ещё, всё взрывается. Пришлось просить find в конце имени каждого найденного файла ставить символ 0 (-print0), а потом с помощью адской команды xargs это разбирать и скармливать в качестве аргументов другим командам. Учитывая, что я раньше ничего сложнее apachectl restart не писал, это была жесть.

Добавлено через полчаса: Читатели рассказали мне про -exec

2016   лайфхак   программирование

Слова weight и height

Часто веб-разработчиков ставит в лингвистический тупик такой ЦСС-код:

font-weight: normal;
line-height: 1.4em;

Запомните: слово height читается «хайт» несмотря на то, что слово weight читается «вейт».

2016   английский язык   программирование

Как работает мой сайт

Мой сайт работает на моём самописном движке на ПХП (единственное исключение — раздел «Блог», о нём в конце).

Файлы страниц сайта лежат в папках, соответствующих урлам разделов, например страница про Ангстрем лежит на сервере под именем .../www/projects/angstrom/angstrom.php. Задача этого файла — сгенерить ХТМЛ смысловой части этой страницы.

Метаданные

Рядом с файлом имя-папки.php должен лежать файл метаданных _имя-папки.php. Для Ангстрема он выглядит примерно так (выкинул часть полей для простоты):

<?php return array (

  'logo' => 'angstrom',
  'value' => '20140201',
  'title' => 'Ангстрем', 

  'x-showcase-title' => 'Ангстрем, конвертер всего',
  'x-copyright-years' => '2014...',

  'languages' => array (
    'english' => array (
      'title' => 'Ångström',
      'x-showcase-title' => 'Ångström, the converter',
    ),
  ),

) ?>

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

Там умная и гибкая система, которая позволяет делать отличия между сайтами на разных языках (ilyabirman.ru и ilyabirman.net) только там, где они нужны: домен, текст, правила типографики, твиттер-акаунт для шаринга; но всё остальное хранить в одном месте один раз.

Самое главное в файле метаданных — это поле logo. Это постоянный идентификатор страницы, который не поменяется, если я вдруг решу перенести её в другую папку. На нём завязаны многочисленные макросы. Например, на главной у меня есть этажик, где я показываю разные проекты в горизонтальной прокручиваемой полосе — «витрине».

Вот примерный код, который её рисует (подсветка синтаксиса глючит):

<?php $showcase_elements = array (
  'angstrom',
  'moscow-metro-multiplication',
  'therules-2-for-ios',
  'chelyabinsk-trams-2015',
  'emcee',
  'train-thirteen',
  'wireless-dj',
  'snooker-results-display',
  'moscow-metro-poster-vdnh',
  'forebruary',
  'moscow-metro-nanomap',
); ?>

<?php foreach ($showcase_elements as $showcase_element) { ?>
  <div class="b-showcase-element" style="width: 160px">
    <div class="b-showcase-element-image-wrapper">
      <div>
        <a href="<?= HREF ($showcase_element) ?>" class="nu">
          <img
            src="<?= FOLDER ($showcase_element) ?>i/icon-160@2x.png"
            alt="<?= strip_tags (TITLE ($showcase_element)) ?>"
            width="160" height="160"
          />
        </a>
      </div>
    </div>
    <div class="b-showcase-element-title">
      <a href="<?= HREF ($showcase_element) ?>">
        <?= EX ('showcase-title', $showcase_element)?>
      </a>
    </div>
  </div>
<?php } ?>

Макросы

Важно то, что этот код ничего не знает про урлы, названия и папки отдельных штук, на которые ссылается. Всё делают несколько умных макросов:

  • HREF ($logo) возвращает полный урл страницы по её идентификатору;
  • FOLDER ($logo) возвращает путь к папке, в которой лежит страница;
  • TITLE ($logo) возвращает название страницы;
  • EX ($what, $logo) возвращает значение поля x-something из файла метаданных.

Я, как видите, использую EX и поле x-showcase-title для того, чтобы показывать особые заголовки в «витрине». Если я вдруг решу переименовать один из проектов и перенести в другую папку, и ещё сделать про него страницу на французском, чтобы она была доступна по адресу ilyabirman.net/french/обычный-путь-к-проекту — это займёт пару минут, не считая времени написания французского текста. При этому создавать папку /french/ на сервере и копировать туда все файлы не придётся — языковые элементы урла обрабатываются отдельно и на структуру папок на сервере не влияют.

Есть и другие макросы. CHILDREN вернёт массив всех дочерних для данной страниц. Например, в разделе проектов их список автоматически дополнится новым, если я создам подпапку со страницей нового проекта в ней.

А ещё у меня на страницах бывают переключалки между связанными страницами, вот, например, такой переключалкой провязаны несколько рассказов про Лондон. Это работает, потому что эти страницы связаны в одну группу через поле group в файле метаданных. Они при этом могут лежать вообще по любым урлам, их просто вернёт GROUPLINGS. Если одна из страниц группы окажется недоступна на одном из языков — не беда, значит не попадёт в список. Движок не станет генерить мёртвые ссылки.

Или вот есть ещё WITHIN, определяется так:

function WITHIN ($what, $id = false) {
  return AT ($what) or INSIDE ($what, $id);
}

Удобно использовать в меню, например, в котором плашку у текущего раздела надо поставить если мы в нём или любых его подразделах.

Есть макрос LANG, который возвращает текущий язык. Его удобно использовать, если страницы на разных языках отличаются двумя-тремя строками текста. Но чтобы не писать сто раз if (LANG == 'russian') { ... }, можно просто положить в папке два файла — angstrom-english.php и angstrom-russian.php, тогда движок сразу возьмёт нужный из них.

Ещё есть TAIL, OFFSET, SIBLINGS, NEIGHBOURS и всякие другие, которые позволяют компактно и внятно выражаться в коде.

Я это называю макросами, а не функциями, потому что это точнее передаёт смысл, и ещё их можно вызывать без параметра $logo и без скобок (если других параметров нет), и тогда они сработают для текущей собираемой страницы:

<h1><?= TITLE ?></h1>

Шаблоны

У любой страницы в файле метаданных может быть поле apply-template — оно говорит движку, что надо пропустить страницу через определённый шаблон перед тем, как заворачивать в обёртку из меню и подвала.

Например, в подвале любого рассказа о поездке я даю ссылки на соседние. Их сколько нужно возвращает макрос SIBLINGS. Но я не копирую этот этаж из рассказа в рассказ — для этого у меня есть шаблон world-story, который применяется ко всем рассказам из поездок.

Шаблон может не просто завернуть страницу во что-то, но и как угодно её обработать перед использованием.

Вот начало файла .../www/world/london-2011-may/london-2011-may-russian.php:

Лондон — лучший город, где мне доводилось бывать.
IMG_0333.jpg Парламент и Биг-бен в Лондоне

Достопримечательностям здесь совершенно необязательно быть в поле зрения, чтобы было понятно, где ты находишься. Каждая деталь напоминает об этом:
IMG_0238.jpg Телефонная будка, почтовая машина и автобус в Лондоне

Похоже на текст из редактора Эгеи, правда? Потому что я тут использую Нисден — форматтер Эгеи. Шаблон world-story автоматически пропускает текст через него. Поэтому тут автоматически работает всякая резиновость картинок, фоторамы и всё остальное, и в результате сам собой получается рассказ про Лондон.

Блог

Теперь про блог. Блог работает на Эгее и живёт своей жизнью, несмотря на внешнее сходство с остальным сайтом. Эгея, в отличие от остального сайта, используют базу данных для хранения заметок, комментариев и прочего. Сайту никак не мешает, что в папке /meanwhile/ у него живёт что-то «неродное». Он не находит там файла _meanwhile.php и поэтому считает, что эта папка для него не представляет ценности.

Мне надо, чтобы в блоге у меня использовался ЦСС с основного сайта, но всё же в нём есть несколько своих особенностей, поэтому напрямую я не могу залинковать тот же самый файл. Чтобы не носить общие для сайта изменения из одного файла в другой, я использую Галп, который автоматически собирает нужную версии ЦСС-файла для блога.

Ещё, как вы знаете, у меня есть русский и английский блоги. На самом деле их выдаёт одна и та же копия Эгеи, которая в зависимости от домена использует разные таблицы в базе данных.

Это недокументированная функция, но по секрету скажу что там, где у вас в Эгее лежит папка /user/, у меня лежит папка /users/ с двумя подпапками. Да, Эгея умеет быть многопользовательской уже много лет! Только никому не говорите. Если серьёзно, это работает на костылях. Заранее говорю, что не буду отвечать на письма с вопросом «как мне сделать так же».

2016   программирование   Эгея   этот сайт

Что посмотреть с ВВДЦ-2016

Кроме очевидных:

...я посмотрел ещё несколько сессий, которые меня заинтересовали:

  • 203. What's New in Cocoa. Это просто всегда смотрю на всякий случай. Ура, дадут перетаскивать несистемные элементы правой стороны меню.
  • 205. What's New in Cocoa Touch. Это тоже обязательно к просмотру, чтобы быть в курсе дела.
  • 208. What's New in watchOS 3. Много интересного про дизайн и для дизайнеров. Порадовала идея вместо прогрессбара («делаем...») показывать галочку («задание принято!»), чтобы дать человеку спокойно опустить руку.
  • 217. Introducing SiriKit. Hey Siri, say hello to apps. Было интересно, как оно спроектировано. Плата за простоту подключения — негибкость. Ни к Ангстрему, ни к Правилам русского языка, например, не прикрутить.
  • 403. Swift API Design Guidelines. The Grand Renaming. Это прям самая клёвая сессия, про дизайн АПИ.
  • 501. Advances in iOS Photography.
  • 509. Speech Recognition API. Наконец-то, полезная штука.
  • 701. Introducing Apple File System. A snapshot of the next generation in storage. Давно жду новую файловую систему, поэтому было интересно. Снэпшоты кайф, должны сильно улучшить тайм-машину, а ещё, вероятно, сделают возможным лёгкую реализацию многопользовательскости на айпадах.
  • 705. How iOS Security Really Works. Интересно для общего развития. Чувак порадовал: «Злоумышленники устанавливают на ваши телефоны кейлоггеры, шпионские программы, неотключаемую рекламу. Откуда мы это знаем? Мы это видим на других платформах».
  • 712. Working with Wide Color. Посмотрел, чтобы быть лучше готовым к светлому будущему, когда основы перевернутся и в вебе тоже. Сколько же всего приходится взорвать в системе, чтобы поддержать другую цветовую модель!
  • 803. Typography and Fonts.
2016   ай-разработка   программирование

Что почитать на выходных — 128

Вот:

  1. Кучка сложностей в простой обёртке. Шурик Бабаев рассказал подробности о внутренностях Ангстрема.
  2. Как создавался транспортный бренд Будапешта.
  3. What is the history behind the «breathing» sleeping LED on Apple laptops? «Apple carried out research into breathing rates during sleep and used that figure to derive a model for how the light should behave».
  4. Медитация и разумная внимательность. Рахим Давлеткалиев объяснил, зачем.
  5. Вальтер Скотт, Майн Рид и другие. Аль Капоне бы убил за такое.
2016   Ангстрем   дизайн   программирование   транспорт   чтиво   Эпл

Что почитать на выходных — 98

Вот:

  1. An interactive exploration of Boston's subway system. Обалденные интерактивные визуализации работы бостонского метро, интегрированные в текст, объясняющий их и рассказывающий о выводах из них. Дизайнерская журналистика такая.
  2. Visualizing Algorithms. А тут крутейшие визуализации алгоритмов, тоже с текстом. Прям ах.
  3. Относительно лёгкий способ определить качество кириллицы в шрифте.
  4. A Closer Look at the Photos «Adjustments» Bar. Чувак взял эпловский скриншот будущего приложения «Фотос» для Мака и разобрал по косточкам.

Однажды в Википедии: Диаграмма Вороного

2014   Википедия   инфографика   метро   программирование   софт   чтиво   шрифты   Эпл

Что почитать на выходных — 94

  1. Three Lessons from Katie Cotton, Apple's Departing PR Boss. Ещё про Кейти Коттон и пиар-службу Эпла. «Apple is an exasperating company for reporters to cover. It has a staff of PR people, but God knows what they do. I can tell you what they don’t do, and that is talk to reporters».
  2. Replacing the PC. Дастин Кертис считает, что планшетам недолго осталось.
  3. Google has most of my email because it has all of yours.
  4. Programming Sucks. «You are an expert in all these technologies, and that's a good thing, because that expertise let you spend only six hours figuring out what went wrong, as opposed to losing your job». Много смешно, потому что правда.
  5. Wikipedia redesign. Чувак объясняет, что не так со всеми редизайнами Википедии.
2014   Википедия   Гугль   дизайн   программирование   технологии   чтиво   Эпл

Что почитать на выходных — 92

Вот:

  1. Прекратите чесаться: почему не стоит делать стартапы для самих себя. Хорошая мысль.
  2. Графический интерфейс. Данила Ковчий написал странный пост — сборную солянку разных мыслей и историй на тему интерфейса, но некоторые из них весьма любопытны, да и примеры хорошие.
  3. Money and Security. «Trusted third parties enabled instantly transferrable money across the globe, fueling industrial revolution that created an unbelievable wealth on the planet: cars, robots, airplanes and free image hosting for internet memes».
  4. То же, но без секса и рок-н-ролла. В наркомании виноваты не наркотики, а борьба с ними.
  5. You have ruined JavaScript.

Система стилей Ангстрема

Несколько дней назад я написал про неё в английском блоге, теперь пишу по-русски.

Когда мы с Шуриком делали Ангстрем, наш мегаконвертер для Айфона (поставьте, если ещё не), мы придумали технологию Ångström Style System, которая ловко сокращается до слова ÅSS.

ÅSS — это движок стилей для Какао-приложений с синхронизация через Дропбокс. Стили обновляются, если потрясти телефон (шейк-ту-рефреш называется). Это суперспособ разделить код и дизайн. Благодаря нему я попробовал кучу разных цветовых схем, шрифтов, отступов, а главное, покрутил по-разному анимации. При этом не приходилось докучать Шурика просьбами «а давай попробуем ещё вот так» по двадцать восемь раз в день.

Курсор

Любимая заморочка в Ангстреме — анимация текстового курсора:

Это гифка, лучше смотреть в настоящем приложении (бесплатно).

Как я уже писал, я хотел длинный курсор, чтобы он торчал вверх и вниз за пределы текстовой строки. Но я ещё хотел, чтобы он приятно растягивался и отпружинивался, вместо того, чтобы просто мигать. Что это значит технически — да хрен его знает, надо крутить. Невозможно просто так взять и написать, насколько что должно тянуться и за какое время. Хотелось поподбирать все параметры.

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

В итоге после нескольких часов подбора цифирок получилось вот так:

"cursor": {
  "showTime": 0.2,
  "hideTime": 0.2,

  "color": "@colors.textNumberColor",

  "period12": 0.4,
  "timingType12": "linear",

  "period21": 0.2,
  "timingType21": "easeOut",

  "height1": 48.0,
  "width1": 2.0,
  "delay1": 0.3,
  "alpha1": 1.0,

  "height2": 78.0,
  "width2": 1.0,
  "delay2": 0.1,
  "alpha2": 0.33
},

Это примерно 3% всей «таблицы стилей» Ангстрема.

Синхронизация через Дропбокс и шейк-ту-рефреш

Это две главных радости.

Вообще вынести переменные, связанные со стилем, в отдельный файл — само по себе хорошая идея. Уже так я мог бы играть с разными параметрами и пересобирать программу, не вникая в код Шурика. Как я понимаю, так работает ДБ5 Брента Симмонса.

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

  1. Открываю Ангстрем на телефоне и иду в экран, который хочу подкрутить.
  2. Открываю файл стилей из Дропбокса Сублайм-текстом на Маке.
  3. Меняю параметры, которые хочу подкрутить и сохраняю файл.
  4. Трясу телефоном и сразу вижу, как всё выглядит с новыми параметрами.

То есть прямо запущенное приложение тюнится вживую. Это очень круто.

Бывает ещё другой подход: некоторые на время разработки ставят всякие свои слайдеры в приложение «Настройки», чтобы дизайнер мог их дёргать там. Это выглядит весело, но кажется непродуктивным: нафига всё время переключаться между своей программой и настройкой? Да и скроллить бесконечные списки параметров на экране телефона как-то не особо круто. Или вводить коды цветов на телефонной клавиатуре. В этом плане Сублайм-текст на компьютере, синхронизированном по Дропбоксу с телефоном, работает лучше.

Шурик написал заметку про внутренности системы, там есть куски кода всякие, почитайте.

Ctrl + ↓ Ранее