?

Log in

[icon] Давид Мзареулян
View:Свежие записи.
View:Архив.
View:Друзья.
View:Личная информация.
View:Website (Мои фотографии).
View:Иероглиф. hiero.ru/David. RSS2LJ. Здешние теги.
You're looking at the latest 10 entries, after skipping 10 newer ones.
Missed some entries? Then simply jump back 10 entries or forward 10 entries

Security:
Subject:FriendFeed всё
Time:04:45 pm

Сегодня ночью, чуть позже полуночи, был выключен Френдфид. Выключен он был коварным Фейсбуком, который его (Френдфид) купил лет пять назад, потому что во Френдфиде были лайки, а в Фейсбуке, представьте себе, тогда их не было.

Френдфид изначально создавался как агрегатор расширенной френдленты. Вот есть у вас френд, и он есть в ЖЖ, в Твиттере, в Инстаграме, во Фликре, ещё в ста местах. Он заводит аккаунт во френдфиде, и импортирует туда все эти ленты. А ты там на него подписывашься, и всё это видишь. Так себе концепция, прямо скажем, в духе начала нулевых. Помните, тогда каждый сайт хотел быть «порталом» и собирать в себя всё на свете?

Но с момента покупки Фейсбуком Френдфид (как сайт) развиваться перестал, и в нём началась собственная жизнь, потому что помимо всей этой агрегации во Френдфиде можно было писать свои коротенькие посты, оставлять комментарии и лайкать.

Русское коммьюнити Френдфида мне напоминало одновременно сериал «Теория большого взрыва» и птичий рынок доперестроечных времён. ТБВ там была практически в чистом виде — такое общежитие, где у каждого IQ заметно выше 200, аналогичного уровня чувство юмора, речь, пересыпанная отсылками чуть ли не всю мировую культуру разом… и при этом совершенно непосредственные, детские реакции, обиды, радости и прочие эмоции.

Птичий рынок — это я там был посетителем птичьего рынка, со своим IQ << 200:) В старших классах школы я любил ездить на Таганку и бродить по рядам между рыбками, попугаями, какими-то хомячками и что там ещё было. Это был такой зоопарк, только без клеток и всякой несерьёзности типа мороженого — всё было гораздо ближе, интереснее и непонятнее. Вот я примерно с тем же чувством заходил во Френдфид и читал там всё это.

Хорошее, в общем, было место. Когда объявили о его закрытии (месяц назад), сразу же собралась инициативная группа и начала пилить запасной аэродром — http://freefeed.net/. Он пока не открылся, но я уверен, что откроется. Френдфид, конечно, прежним уже не будет, но прежним вообще ничего не бывает.

Прощай, фидик.


Этот пост в блоге POST /blog (16:05 11.04.2015)

Комментарии: 4 комментария или написать Поделиться

Tags:, ,
Security:
Subject:Видео на сайте: две маленькие хитрости
Time:08:57 pm

Хитрость номер раз: пусть у нас на странице есть красивое, но необязательное видео. Заставка, например. Нам хочется её показывать клиентам с десктопными браузерами и хорошими каналами, но не хочется показывать мобильным клиентам. Что делать?

Делать можно, например, следующее:

var video = document.createElement("video");

var t = setTimeout(function() {  
    alert("No, we can't!);
    t = null;
}, 2000);

video.addEventListener("canplay", function() {  
    if (t === null) return;
    clearTimeout(t); t = null;
    if (video.buffered.length > 0 && video.buffered.end(0) > 0) {
        alert("Yes, we can!);
    } else {
        alert("No, we can't!);
    }
});

video.preload = "auto";  
video.src = VIDEO_URL;  

Происходит тут вот что. Мы создаём видеоэлемент с атрибутом preload равным "auto". Это значит, что браузер сам будет решать, предзагружать видео или нет. Десктопные браузеры всегда подгружают начальные секунды видео, а мобильные — нет (подробнее). На это мы и будем полагаться при принятии решения.

Событие canplay срабатывает, когда браузер считает, что готов воспроизвести видео. Десктопные браузеры вызывают его после предзагрузки, мобильные — либо сразу (Android) либо вообще не вызывают (iOS). На второй случай мы взводим таймер — если через две секунды событие не пришло, то считаем, что браузер не хочет загружать видео или канал слишком медленный. В этом случае видео показывать не нужно.

Если же событие canplay произошло, то мы смотрим на свойство video.buffered. Оно представляет собой набор отрезков времени, которые предзагрузил браузер. Если этих отрезков больше нуля и конец первого ненулевой, то браузер что-то предзагрузил, и мы можем играть видео. Если же браузер ничего не загрузил, то и играть не стоит.

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

var x = new XMLHttpRequest();  
x.onload = function () {  
    var newVideoUrl =  URL.createObjectURL(x.response);
    // …
};
x.open("GET", VIDEO_URL);  
x.responseType = "blob";  
x.send();  

Мы насильно грузим весь видеофайл через XMLHttpRequest. Когда файл загрузился, из полученных данных формируем локальный URL через URL.createObjectURL. И этот URL уже можем передать в проигрыватель видео — он указывает на наши локальные данные, и дозагрузки уже не будет.

Конечно, такой приём стоит применять только для коротких роликов.


Этот пост в блоге POST /blog (20:21 25.03.2015)

Комментарии: написать Поделиться

Tags:
Security:
Subject:Иероглиф (http://hiero.ru/): [без названия] (Давид Мзареулян)
Time:10:27 pm
Поделиться

Tags:,
Security:
Subject:Передача типа как параметра в Go
Time:09:21 pm

В Go иногда хочется передать в функцию не значение, а тип. Например, пусть мы хотим создать фабрику, который будет делать объекты заданного типа. И этот тип надо как-то в неё передать.

Пусть шаблон нашей фабрики выглядит так:

type Fabric struct {  
    t reflect.Type
}

func (f *Fabric) Make() interface{} {  
    return reflect.New(f.t).Interface()
}

func NewFabric(t interface{}) *Fabric {  
    // …
}

Функция NewFabric должна получить что-то параметром и сделать из него reflect.Type. Поскольку тип заранее неизвестен, то в сигнатуре функции это что-то выглядит как interface{}. Это что-то должно быть объектом или указателем на объект, потому что ничего другого в Go нет.

Я встречал решения подобных задач, когда в такую функцию передавали свежесозданный объект нужного типа, его zero value. Например, если у нас определён тип myType, то можно передать myType{} или, что лучше, &myType{} (он же new(myType)). Это удобно — в Go объекты (строго говоря, «структуры») лишены конструкторов, и созданный объект является совершенно пассивной структурой данных, факт его создания не вызывает никаких побочных эффектов. Но всё равно это неаккуратно — при создании выделяется память совершенно зря.

Однако, есть более простое решение (ну естественно, иначе зачем бы я всё это писал). Чтобы передать указатель на объект нужного типа, не обязательно этот объект создавать. Можно передать просто nil, но нужного типа. Вот так: (*myType)(nil). У нас получился типизированный nil. Он не соержит сам по себе никаких данных, не требует аллокации, но при этом обладает типом, который может быть прочитан и использован.

И наш код получается вот таким:

type Fabric struct {  
    t reflect.Type
}

func (f *Fabric) Make() interface{} {  
    return reflect.New(f.t).Interface()
}

func NewFabric(t interface{}) *Fabric {  
    return &Fabric{
        t: reflect.TypeOf(t).Elem(),
    }
}

// ...

fabric := NewFabric((*myType)(nil))

v := fabric.Make().(*myType)

Вот, можно посмотреть, как он работает: http://play.golang.org/p/4q9vnXcrhP

Конкретно эта фабрика достаточно бесполезна, но сам подход с типизированным nil-ом очень даже может пригодиться. Мне вот уже пригодился.


Этот пост в блоге POST /blog (21:12 16.03.2015)

Комментарии: 2 комментария или написать Поделиться

Security:
Time:02:13 pm
Я к Немцову, в общем, относился достаточно нейтрально, но очень сильно его зауважал после того как послушал его телефонные разговоры перед первым болотным митингом. Ну помните, которые лайфньюз выложила.

Хороший был человек, очень жаль.
Комментарии: 2 комментария или написать Поделиться

Tags:,
Security:
Subject:CSS-анимация исчезновения объекта
Time:12:35 pm

Понадобилось тут сделать блок, который висит над контентом страницы, и по какой-то команде плавно исчезает. С плавностью исчезновения всё, конечно, просто:

.block {
    opacity: 1;
    transition: opacity 1s;
}
.block.hidden {
    opacity: 0;
}

Но проблема в том, что прозрачный блок при этом хотя и перестаёт быть видимым, но со страницы никуда не девается и, например, не пропускает через себя мышиные события. Надо чтобы он на самом деле исчезал — или через display: none или через visibility: hidden. Свойство display в принципе не анимируется, остаётся visibility.

Простейший вариант такой:

.block {
    opacity: 1;
    transition: all 1s;
}
.block.hidden {
    opacity: 0;
    visibility: hidden;
}

Но он не работает: visibility не имеет промежуточных состояний, и сразу устанавливается в hidden, то есть, мы теряем анимацию исчезнования.

А правильным вариантом оказался вот такой:

.block {
    opacity: 1;
    transition: opacity 1s, visibility 0s;
}
.block.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 0s 1s;
}

visibility 0s 1s — это значит «анимировать visibility за 0 секунд, но с задержкой в 1 секунду». И это именно то что нужно: когда мы добавляем класс hidden, то в течение секунды анимируется прозрачность до нуля, а потом (!) мгновенно переключается visibility. При убирании класса hidden, наоборот, сначала включается visibility, а потом в течении секунды уменьшается прозрачность.

Вот действующий пример: http://codepen.io/davidmz/full/LEmQVa/. Обратите внимание, что после исчезновения картинки текст, который лежал под ней, можно выделить мышкой.


Этот пост в блоге POST /blog (11:45 24.02.2015)

Комментарии: написать Поделиться

Tags:, ,
Security:
Subject:JS media queries
Time:05:38 pm

Любопытный код нашёл в исходниках страницы https://muut.com/tour/. Они вот так эмулируют Media Queries:

;(function(win) {
  /* JS media queries */
  var head = document.documentElement,
      raf = win.requestAnimationFrame;

  function media() {
    var w = win.innerWidth, cls = '';
    for (var i = 500; i < 1200; i += 50) {
      if (w < i) cls += " max-" + i;
      if (w > i) cls += " min-" + i;
    }
    head.className = cls.slice(1);
  }

  if (raf) {
    win.onresize = function() { raf(media); }
  }
  media();
})(window);

Интервал ширин окна 500—1200 пикс. разбивается на отрезки по 50 пикселей и к documentElement-у дописываются классы вида: min-500 min-550 min-600 min-650 min-700 min-750 min-800 min-850 min-900 min-950 min-1000 max-1050 max-1100 max-1150. Вот такой класс означает, что ширина окна между 1000 и 1050 пикс. И дальше, понятно, к этим классам уже можно привязываться в CSS. Красиво.

А теперь вопрос — а зачем так делать, почему не использовать нормальные media queries? Я сперва подумал, что для IE8, который media queries не умеет (а в Muut гордятся тем, что поддерживают IE8), но в коде используется requestAnimationFrame, который появился только в IE10. Поставить вместо него setTimeout было несложно, но почему-то его не поставили. В IE8 стработает только самый первый вызов media() — получается, всё это ради него?

Загадка.


Этот пост в блоге POST /blog (17:31 17.02.2015)

Комментарии: написать Поделиться

Tags:, , , , , ,
Security:
Subject:Найдено в сети
Time:03:51 pm

Вложенные ссылки — совершенно чумовая методика создания вложенных ссылок (HTML-элементов A). HTML запрещает вкладывать A друг в друга. Браузеры тоже — код <a><a></a></a> автоматически преобразуется в <a></a><a></a>. Но решение есть, и оно настолько гениально в своей простоте и красоте, что я не буду его тут приводить — читайте по ссылке:) Жаль только, что совместимость IE9+.

my sliders — прекрасная коллекция CSS-кастомизированных <input type='range'>. Просто один краше другого, сплошное удовольствие.

Неделя CSS-морфинга на Хабре:

Особенно крутое, конечно, пламя.

Отойдём немного от HTML.

smallpdf.com — подарок всем, кому приходится время от времени работать с PDF. Это набор онлайн-инструментов для всяких несложных действий с PDF-файлами. Например, собрать несколько страничек в один PDF, сделать PDF из набора картинок и наоборот и так далее.

А ещё мне недавно потребовалось понять, как одна Android-программка общается с сетью. И нашёлся вот такой сайт:

Android APK Decompiler — декомпилирует любой загруженный в него *.apk-файл. Ну, я допускаю, что не совсем любой, но тот, что мне был нужен, прекрасно превратился в архив, наполненный *.java и *.xml-файликами, в которых я нашёл всё что надо. Профессиональные Android-разработчики, конечно, могут такие вещи делать и локально, инструменты для этого есть, но для простых юзеров такой веб-сервис — самое то.

Кстати, получить *.apk-файл тоже оказалось несложно. Есть расширения к браузеру, позволяющие скачивать их прямо с Google Play, а есть сайты-каталоги с apk-шками. Вот, например, https://sameapk.com/.


Этот пост в блоге POST /blog (15:31 11.02.2015)

Комментарии: 4 комментария или написать Поделиться

Tags:, , , , , , , , , , , , , ,
Security:
Subject:Найдено в сети
Time:04:17 pm

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

мимимишки Вот так в программке TunnelBear визуализируется процесс перехода с платного аккаунта на бесплатный.

Клиент сайд

Проблема диагональных бордеров и Firefox — это перевод англоязычной статьи на Хабре. Там описаны две проблемы, вторая, судя по всему, уже исправленный баг FF. А первая проблема интереснее, и она сводится к тому, что в RGBA-модели у полностью прозрачного цвета тоже есть цвет. Ну то есть, rgba(0,0,0,0) — это полностью прозрачный чёрный, а rgba(255,0,0,0) — это полностью прозрачный красный. Хотя ни тот ни другой глазом не видны. Это кажется неважным, пока мы не рассматриваем переходы от этих прозрачных цветов к какому-нибудь непрозрачному цвету.

Вот у нас цвет transparent. На самом деле это rgba(0, 0, 0, 0) (он так определён). Но если мы делаем косую границу между transparent и red, то мы ожидаем а) какого-нибудь перехода между ними, чтобы не было алиасинга и б) что этот переход всё-таки будет в красных тонах, а не в чёрно-красных. И браузеры имеют это в виду и в таких случаях подменяют прозрачный-чёрный на прозрачный-красный. Все кроме Firefox.

Но этот хак придуман, похоже, специально для любителей рисовать треугольники бордерами. Потому что если прозрачный-чёрный хоть чуточку непрозрачный, то хак перестаёт работать. Вот скриншот из моего Хрома-40. Ужасы алиасинга Как только прозрачность перестала быть нулевой, антиалиасинг выключился совсем.

Simple CSS-Only Row and Column Highlighting — подсветка строк и столбцов (!) таблицы на чистом CSS. Фокус со столбцами в том, что у ячеек создаются длинные (высокие) псевдоэлементы нужного цвета.

Sweet Alert — ну это все уже, наверное, видели. Библиотечка для красивой замены уродливых стандартных alert- и confirm-окон. Хороша во-первых внешним видом, а во вторых простым API (что важно, потому что пользоваться ей должно быть не сложнее чем написать в коде очередной alert()). Хотя я бы туда всё-таки Promise-ов добавил. Обычноый alert-то блокирует исполнение, а эти нет.

Add Rules to Stylesheets with JavaScript — David Walsh напоминает, что CSS такая же часть DOM-а, как и прочие элементы страницы, а значит, точно так же подконтрольна JS. Никакой Америки не открывается, просто ещё раз обращается внимание на то, что некотрые CSS-правила можно просто сгенерировать на лету, вместо того чтобы писать километровые статические стили с кучей условий.

CSS Element Queries — библиотечка, эмулирующая размерные Media Queries (min-width, min-height, max-width и max-height) не для всего окна документа, а для отдельных элементов. То есть, можно написать .widget-name[max-width="200px"], и этот стиль применится тогда, когда размер элемента .widget-name (именно элемента, а не окна!) будет меньше 200 пикс. И всё это начиная с IE7+. Очень круто, при этом библиотечка очень маленькая и хорошо написанная.

SVG for Everybody — классная библиотечка, позволяющая работать в IE с SVG-спрайтами. SVG-спрайты, если кто не знает, это безумно удобно — делаешь отдельный SVG, кладёшь туда всё, что тебе нужно, вот так:

<svg xmlns="http://www.w3.org/2000/svg">  
    <symbol id="codepen" viewBox="0 0 64 64"><title>CodePen</title><path etc.../></symbol>
    <symbol id="youtube" viewBox="0 0 64 64"><title>YouTube</title><path etc.../></symbol>
    <symbol id="twitter" viewBox="0 0 64 64"><title>Twitter</title><path etc.../></symbol>
</svg>  

а из HTML-кода вызываешь нужный фрагмент так:

<svg role="img" title="CodePen"><use xlink:href="spritemap.svg#codepen"></use></svg>  

Это уже само по себе круто, но главное тут то, что SVG-фрагмент при этом встраивается непосредственно в HTML-документ, и его можно стилизовать через CSS, изменять через JS т. п.

Но IE этого всего не умеет, и вот эта библиотечка его этому учит. С фоллбэком для IE8−, которые не умеют вообще ничего.

Сервер сайд

Pconnect: граната в руках обезьяны — довольно старый (2011) доклад Сергея Аверина из Badoo о том, чем опасно использование pconnect. С примерами из реальной жизни. Очень интересно — помимо очевидных вещей (можно завалить сервер висящими соединениями) говорится и о менее очевидных, например, о том, что протокол общения с сервером должен штатно отрабатывать ситуацию, когда запрос послал один клиент, а принял его другой. И клиент этой ситуации тоже не должен удивляться, а должен уметь с ней справляться.

IPÊ — не уверен, как это точно произносится. Это Pusher-совместимый сервер, написанный на go. То есть, если вам нужен свой Pusher — ставите эту штуку и она экономит вам денежку.

Прочий сайд

Hound — локальный (хотя его можно и в сеть выставить) поисковик по коду. Состоит из браузерного React-фронтенда и go-бэкенда. Умеет регекспы и вообще приятно выглядит.

AWS SDK for Go — Amazon тестирует Go-версию SDK для своих сервисов. Это само по себе не сенсация, go-пакетов для работы с AWS достаточно много. Но это показатель популярности языка. Сейчас Amazon предлагает AWS SDK на следующих языках: Java, C#, Ruby, Python, JavaScript, PHP и Objective C. Это сливки с самой верхушки рейтинга популярных веб-языков. Даже новомодного Swift-а пока нет. А Go теперь будет.

iocontrol — go-пакет, предлагающие расширенные версии io.Reader-а и io.Writer-а. Оставаясь, разумеется Reader-ом/Writer-ом, они умеют пропускать через себя данные с заданной скоростью и подсчитывать число прошедших байтов. Доки, как обычно, на godoc.

Parser for PHP written in Go — ну заживём теперь!


Этот пост в блоге POST /blog (16:09 05.02.2015)

Комментарии: 3 комментария или написать Поделиться

Tags:, , , , , , , , , ,
Security:
Subject:Найдено в сети
Time:02:44 pm

Ахтунг: следилка от провайдера — Ллео Каганов обнаружил, что его провайдер сливает логи его сёрфинга какой-то левой конторе. И не только его провайдер. Как выяснилось, это не очень-то новость (ссылки в посте есть). В общем, это пиздец такого уровня, что руки опускаются. Ну можно, конечно, полжизни положить на жалобы и суды с этими мошенниками, но что толку, если подобные вещи делаются в два клика на любом уровне цепочки от тебя до сайта, на который ты заходишь. Желающих подслушать и подправить твой трафик более чем достаточно.

Единственно пока правильный способ борьбы со всей этой мерзостью — это VPN с клиентской стороны и HTTPS с серверной. Уже объявлено, что браузеры через какое-то время начнут маркировать не-HTTPS сайты как потенциально опасные, так что тотальный HTTPS — наше самое ближайшее будущее. Ну и VPN на клиенте надо осваивать, это другая сторона защиты.

Ладно, хватит о грустном.

Я в прошлый раз упоминал о софтовых разработках Financial Times и Guardian, а недавно сразу несколько российских/русскоязычных сетевых СМИ начали публично описывать свои внутренние технологические процессы. Это очень круто и правильно.

Meduza : dev — блог разработчиков Медузы. В нём пока один пост: «Техническая сторона Медузы», описывающий общую архитектуру проекта. Очень интересно.

Inside Meduza — а это ещё один блог Медузы, и тоже, в общем, технический. Не очень понятно, зачем им два, ну да ладно. Пост «Как делается «Медуза». На самом деле» описывает админку Медузы. Админка довольно простая, мне слегка напомнила ту, что я когда-то делал для АиФа:)

Look At Media — а это уже блог “Look At Media” (The Village, Look At Me, FURFUR, Wonderzine) и пост в нём Сетка, который описывает их систему управления контентом. Крутую, надо сказать, круче чем у Медузы:)

How PAPER Magazine’s web engineers scaled their back-end for Kim Kardashian (SFW) — а вот это подробнейшая и крутейшая стстья о том, как сайт Paper Magazine готовился к публикации задницы Ким Кардашьян:) Сайт, на который в месяц приходили около 650 тысяч юзеров, получил за несколько дней 30 миллионов уникальных посетителей. Но выстоял.

Все вышеперечисленные блоги, кстати, на Medium-е. Medium — новый ЖЖ:) Я бы тоже там писал, но он код не умеет подсвечивать.

Ну и хватит на сегодня. На сладкое: недавно вышла preview-версия Windows 10 с новым IE на борту. User Agent этого IE выглядит так:

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

Счастливой отладки…©


Этот пост в блоге POST /blog (14:22 31.01.2015)

Комментарии: 3 комментария или написать Поделиться

[icon] Давид Мзареулян
View:Свежие записи.
View:Архив.
View:Друзья.
View:Личная информация.
View:Website (Мои фотографии).
View:Иероглиф. hiero.ru/David. RSS2LJ. Здешние теги.
You're looking at the latest 10 entries, after skipping 10 newer ones.
Missed some entries? Then simply jump back 10 entries or forward 10 entries