html – Stepan Suvorov Blog https://stepansuvorov.com/blog Release 2.0 Sat, 28 Mar 2015 15:57:28 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.1 Быстро делаем виджет для mac https://stepansuvorov.com/blog/2015/03/%d0%b1%d1%8b%d1%81%d1%82%d1%80%d0%be-%d0%b4%d0%b5%d0%bb%d0%b0%d0%b5%d0%bc-%d0%b2%d0%b8%d0%b4%d0%b6%d0%b5%d1%82-%d0%b4%d0%bb%d1%8f-mac/ https://stepansuvorov.com/blog/2015/03/%d0%b1%d1%8b%d1%81%d1%82%d1%80%d0%be-%d0%b4%d0%b5%d0%bb%d0%b0%d0%b5%d0%bc-%d0%b2%d0%b8%d0%b4%d0%b6%d0%b5%d1%82-%d0%b4%d0%bb%d1%8f-mac/#respond Sat, 28 Mar 2015 15:14:59 +0000 http://stepansuvorov.com/blog/?p=1601 Continue reading →]]> На самом деле создать виджет для маковского дашборда дело 5 минут. Не знаю зачем все так запутали в мануалах и статьях.

myweather

Всего навсего нужно создать директорию, в которой сделать html страничку и манифест файл – Info.plist и файл Default.png – картинка, которая будте показываться, пока виджет не инициализирован. После чего переименовать эту директорию в *.wdgt. Все. Советы по обходу граблей под катом.

Подсказки:

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

    [xml]
    <key>AllowNetworkAccess</key>
    <true/>
    [/xml]

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

    [javascript]
    document.getElementById(‘debug’).textContent = ‘something that you want to log’;
    [/javascript]

Пример

Как примера я взял разработку погодного виджета, пожалуй одного из самых популярных. Данные беру с openweathermap.

Для удобства создал grunt конфигурацию, которая сама копирует файлы и переименовывает папку в файл с расширением *.wdgt.

Код примера тут.

В моем виджете всегда светит солнышко. It’s not a bug, it’s feature.

]]> https://stepansuvorov.com/blog/2015/03/%d0%b1%d1%8b%d1%81%d1%82%d1%80%d0%be-%d0%b4%d0%b5%d0%bb%d0%b0%d0%b5%d0%bc-%d0%b2%d0%b8%d0%b4%d0%b6%d0%b5%d1%82-%d0%b4%d0%bb%d1%8f-mac/feed/ 0 The Open Graph (OG) protocol https://stepansuvorov.com/blog/2014/07/the-open-graph-og-protocol/ https://stepansuvorov.com/blog/2014/07/the-open-graph-og-protocol/#comments Sat, 05 Jul 2014 14:41:30 +0000 http://stepansuvorov.com/blog/?p=1837 Continue reading →]]>

Только сейчас узнал, что есть способ дать фейсбуку(и другим социальным сервисам) понять какое превью изображение выводить в случае ссылки на ваш сайт. Как оказалось этому посвящен целый протокол – Open Graph. Вся информация передается в html meta-тэгах:

[html]
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
[/html]

Более подробно подробно – на оф сайте.

]]> https://stepansuvorov.com/blog/2014/07/the-open-graph-og-protocol/feed/ 2 WebStorm: Editing HTML Inside of JS Literals https://stepansuvorov.com/blog/2014/02/webstorm-editing-html-inside-of-js-literals/ https://stepansuvorov.com/blog/2014/02/webstorm-editing-html-inside-of-js-literals/#comments Sun, 16 Feb 2014 20:26:16 +0000 http://stepansuvorov.com/blog/?p=1465

I just got known that WebStorm has such a nice possibility to edit HTML that is presented like a string (in JavaScript code) in separate window. All you need to do is press [Alt]+[Enter] and vuala:

 

]]> https://stepansuvorov.com/blog/2014/02/webstorm-editing-html-inside-of-js-literals/feed/ 1