$ grep -r Tag: «javascript»

Переписал своего бота на ES2015, плюс добавил тесты. Когда бот пишет о том, что вышла новая версия в App Store, то пишется и что нового в этой версии.

Исходники на GitHub.

Пока кодю на Node.js нужно постоянно что-то выводить в консоль. Например, ошибки. Но для большей информативности удобнее знать, где именно ошибка выводится. Тем более, что пока кодил под iOS такой удобный макрос всегда был под рукой, а с Node.js пришлось погуглить и поковыряться, т.к. многие примеры со Stack Overflow просто падали на последней версии Node.js 5.10.0. Падали из-за использования в них Error.captureStackTrace(err, arguments.callee), а сейчас уже нужно использовать NFE.

В итоге сделал то, что хотел. Оставлю тут как шпаргалку.

npm install colors --save

Файл logger.js:

'use strict';

let colors = require('colors');
colors.enabled = true;

exports.p = function logger(somethingForPrint) {
    somethingForPrint = somethingForPrint || '';
    const originalPrepareStackTrace = Error.prepareStackTrace;

    Error.prepareStackTrace = (error, stack) => { return stack; };

    let e = new Error;
    Error.captureStackTrace(e, logger);

    const stack = e.stack;
    const filename = stack[0].getFileName().split('/').reverse()[0];
    const trace = filename + ':' + stack[0].getLineNumber() + " " + colors.bold.black('%s') + "\n";

    Error.prepareStackTrace = originalPrepareStackTrace;

    console.log(trace, somethingForPrint);
}; 

Использовать:

const logger = require('../utils/logger');
logger.p('something happened');
// file.js:401 something happened 

Вынашивал тут идейку и наконец воплотил. У Apple есть REST API для поиска в iTunes. Я сделал бота для Telegram, который позволяет подписываться на обновления приложений. Когда выходит новая версия - он пишет тебе об этом в Telegram будь то личный чат или групповой. Будем теперь на работе оперативно все узнавать, когда новые версии наших приложений выходят в App Store.

Писал на Node.js как умею. Главное - работает. Хотел сделать и для андроидщиков, но, оказывается, у Google Play нет API. Совсем O_O.

Попробовать бота: https://telegram.me/ReleaseInformerBot (при старте просто набрать /help)

Если кто-то захочет что-то дописать исходники на Github: https://github.com/makoni/ReleaseInformerBot

Правда, кроме Node.js там используется как база данный мой любимый CouchDB. Но, чтобы запустить его на Mac, просто качаешь бинарник и готово (ну, и БД + виды надо создать).

Ковырял тут кое-что на Parse. В двух словах - штука очень крутая, есть крутые SDK для разных платформ, в том числе можно на Javascript юзать их как на фронт-энде, так и на бэкенде. Можно прям у них в облаке написать на node.js его, даже можно Express подключить, если нужно. Но есть два но:

1. Когда ты создаёшь отложенный push notification с расписанием - ты указываешь время отправки. Так вот через Javascript SDK он выставляет его по GMT и всё. Всем пуш будет отправлен по GMT вне зависимости от их часовой зоны, просто по расписанию. Указать, что ты хочешь отправить push всем, например, в 19:00 местного времени, чтобы клиент в любом часовом поясе получил сообщение в свои 19:00, в Javascript SDK ты не можешь. Этому багу уже 2 года. Вместо этого, тебе предлагается использовать из Javascript их REST API (sic!).
2. Окей, ты используешь REST API, благо это можно из того же Javascript SDK удобно сделать, и всё работает как надо, пуши планируются по местному времени, но... В тексте заголовка из сообщения вырезаются все русские буквы. Во всех примерах в документации к REST API просят указать заголовок запроса "Content-Type: application/json", вот только этого мало, чтобы кириллица и прочие символы не из латиницы не вырезались, оказывается, нужно указать кодировку в заголовке: "Content-Type: application/json; charset=utf-8". Чёрт его знает, в какой кодировке они ожидают по умолчанию данные, выкатывая международный сервис, но тем не менее.

А в остальное, конечно, сервис очень классный.

Проблема выделения текста внутри ссылки на движках Webkit/Blink уже существует давно. Лично для меня. Как-то я пропустил, что она может быть решена с помощью расширения для браузера. Нашёл такое расширение, называется Select like a Boss. Но оно только для Firefox, Opera (Blink) и Chrome. Т.к. на гитхабе были найдены исходники расширения для Chrome - я просто взял js-код и запаковал его в расширение для Safari. Теперь я счастлив и могу нормально выделять текст внутри ссылок :)

Исходники + ссылка на скачивание: GitHub.

Обновил расширение для Safari. Теперь выводится 5 релизов на панели вместо 3. Ну и дизайн теперь в стиле Safari 8.

Исходники на GitHub.

Установить расширение.

Я периодически захожу на Funkysouls в поисках новой музыки. Пролистываю несколько первых страниц, смотрю по тэгам - может ли мне это быть интересно, после чего копирую название исполнителя, иду в ВК или на Яндекс.Музыку, вставляю и слушаю там пару трэков. Если мне нравится - тогда только пробую заиметь альбом.

Надоело мне копипастить и я написал расширение для Safari (давно хотел освоить).

Расширение делает всего 2 вещи:

1. Когда заходишь на Funkysouls - у каждого релиза добавляется 2 кнопки Play, как видно на скрине. Красная ведёт на поиск по исполнителю на Яндекс.Музыку, синяя ведёт на поиск по исполнителю в ВК. Не надо больше копипастить. 2 клика - и ты слушаешь.
2. Разошёлся слегка, пока писал, и добавил панельку в браузер. Расширение дёргает раз в 5 минут RSS сайта и выводит на панельке 3 последних релиза. Можно отслеживать их не заходя на сайт, например. Естественно, если нажать на название релиза на панельке, откроется новая вкладка с его страницей на фанках.

При желании, можно взять код расширения из end.js и button.css, вставить его в Chrome в расширение Control Freak, например, и получить те же 2 кнопки Play в Chrome. В Firefox, думаю, тоже, через Greasemonkey.

Исходники на GitHub.

Установить расширение.

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

1. Форматы видео

Март 2024: Уже все актуальные браузеры поддерживают и WebM, и H.264

В своё время, браузеры разделились на 2 лагеря - те, которые поддерживают H.264, и те, которые выступают за открытые форматы вроде OGG/Theora и WebM. Соответственно, нужно было хотя бы 2 версии видео.

H.264 поддерживают на апрель 2024:

WebM поддерживают на апрель 2024:

Как видим, и все десктопные браузеры (за исключением почившего IE), и актуальные мобильные браузеры, поддерживают оба формата. Выбирай любой. Но если хочется поддерживать старые версии (и мобильный Firefox для Android), которые поддерживают только один формат, то можно добавить видео и в H.264, и в WebM.

2. HTML и CSS

Код видео:

<div id="trailer" class="is_overlay">
    <video id="video" width="100%" height="auto" autoplay loop muted playsinline preload>
        <source src="book.mp4"></source>
        <source src="book.webm" type="video/webm"></source>
    </video>
</div>

И CSS:

.is_overlay{
    display: block;
    width: 100%;
    height: 100%;
}

#trailer {	
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
}

#trailer > video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

Собственно, этим кодом всё и сказано - div #trailer растягиваем на весь экран, внутри него наше видео, у него аттрибут autoplay, значит оно стартует сразу, как браузер решит, что уже можно начать играть, т.к. стоит preload="auto".

Получаем такую картинку:

Видим чёрные полосы по краям. Можно ещё для #trailer > video поменять CSS, чтобы их не было:

min-width: 100%;
min-height: 100%;
width: auto; height: auto;

Тогда мы получим видео на всю ширину:

Всё хорошо... Пока мы не изменим размер окна. Внезапно:

Тут нам на помощь приходят CSS Media Queries для управления пропорциями. Убираем добавленный на предыдущем шаге CSS-код и добавляем:

@media (min-aspect-ratio: 16/9) {
    #trailer > video { height: 300%; top: -100%; }
}

@media (max-aspect-ratio: 16/9) {
    #trailer > video { width: 300%; left: -100%; }
}

/* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */
@supports (object-fit: cover) {
    #trailer > video {
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
    }
}

Это позволяет нам при разных размерах размерах окна/экрана центровать видео.

Ну вот, красота. Теперь главную часть, текст, увидят все.

3. Мобильные браузеры

С мобильными браузерами сложности.

Internet Explorer на Windows Phone всё показывает и играет без нареканий, проигрывание стартует автоматически.

На iOS в Safari на март 2024 автопроигрывание работает при указании атрибута playsinline для тега video, но только, если не включён режим энергосбережения. Если он включён - то видео играть не будет.

Чтобы определить, включён ли энергосберегающий режим, можно воспользоваться JS-кодом и, например, вместо видео, показывать картинку:

// находим видео
const videoElement = document.getElementById("video");

// картинка, которой заменим видео
const poster = document.getElementById("poster"); 

if (videoElement === null || poster === null) {
    return;
}

const promise = videoElement.play();

if (promise !== undefined) {
    promise
        .catch(error => {
            // Автовоспроизведение не удалось
            if (error.name === "NotAllowedError") {
                // скрываем видео
                videoElement.style.display = 'none'; 
                
                // показываем картинку вместо видео
                poster.style.display = "block";
            }
        })
        .then(() => {
            // всё хорошо
            videoElement.play();
        });
} 

На марта 2024 автопроигрывание прекрасно работает на последних версиях Android. Но на всякий случай оставляю абзац ниже.

С Android тяжелее всего. Автопроигрывание не работает. Кнопка Play появляется только если добавить для тега video атрибут controls, чтобы появились стандартные контролы управления. Это, увы, не так уже красиво. Но это ещё не всё. Для того, чтобы видео начало играть, нужно ещё добавить дополнительно Javascript-обработчик, который принудительно скажет video, чтобы оно играло:

var video = document.getElementById(element);
video.addEventListener('click',function(){
    video.play();
},false);

Для определения Android, чтобы добавить атрибут controls, я просто использовал Detect.js:

var ua = detect.parse(navigator.userAgent);
if ( ua.os.family === 'Android' ) {
    video.setAttribute( 'controls','controls' );
}

Кроме того, чтобы это работало на Android, нельзя использовать атрибут type внутри source.

Такие вот дела. Итог с прелоадером тут.

Давно хотел такую штуку сделать, чтобы при скролле страницы какой-то блок скроллился вместе со страницей до определённого момента, а потом прилипал. Сегодня нашёл такой плагин под названием jQuery Sticky Scroller

Скачать его можно тут.

Подключается он довольно просто:

var scroller = new StickyScroller("#menu",
{
    start: 270,
    end: 50800,
    interval: 200,
    range: 100,
    margin: 0
});

Собственно, по названию параметра понятно, что когда скролл уходит за 270 пикселей от верхней границы страницы - элемент #menu фиксируется на странице, то есть получает свойство CSS position: fixed;. Параметр end отвечает за нижнюю границу отслеживания скролла, на случай, если фиксированным элемент должен быть не всегда. Параметр margin задаёт то - с каким отступом от верхней границы окна браузера будет находиться элемент.

У плагина есть также несколько публичных методов, описывать их смысла не вижу, описание есть на странице плагина.

По работе периодически приходится смотреть какие-то данные из базы. Время мы в основном храним в TimeStamp (количество секунд, прошедших с сотворения мира Unix, то есть 1 января 1970 года).

По цифре вроде 1305233826 хрен поймёшь, что это за дата. Каждый раз писать в каком-нибудь скрипте конвертирование неудобно, поэтому сделал онлайн-конвертер. Показывает время в удобочитаемом виде.

Enjoy. Online TimeStamp Converter