Блог

Мессенджеры

Я совершенно не понимаю зачем в 2017 году нужны Вайбер и Вотсапп. Есть ведь Телеграм, который удобнее для текстового общения, да и качество голосовой связи на порядок выше.

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

Поэтому, если нужен — пишите в телеграм.

вчера, 06:10
Ханимейт 2.0 Бета

Ханимейт — скрипт, который красиво показывает сайт по мере загрузки. Сегодня вышла первая бета Ханимейта 2.0.

Переписал 70% кода, убрал библиотеку imagesLoaded, объём файла удалось уменьшить с 9,2 кб до 3,4 кб.

Сделал один глобальный обработчик expose, раньше на каждый объект создавалось по обработчику. Анимации теперь просят кадры. Код стал чище и современнее: написан на es6 и собирается Бабелем.

Исправлен баг с параметрами await и continue: раньше, если ожидаемый объект не существовал, то ханимейт останавливал обработку и оставлял блок скрытым. Теперь, наткнувшись на такое, он просто покажет блок.

АПИ осталось прежним, поэтому для обновления достаточно заменить honeymate.js на вашем сайте.

Скачать архив
14 июля, 23:17   ханимейт   разработка
Отступ от заголовка

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

Сначала надо подобрать интерлиньяж. Базовая сетка имеет шаг в 18 пикселей, при 54–м кегле подошел интерлиньяж в 63 пикселя.

Теперь надо разместить текст так, чтобы он совпадал с верхней гранью заголовка.

Затем в начало текста добавляем две пустых строки и получаем правильный отступ.

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

Такой заголовок будет смотреться аккуратно и взвешено.

После этих манипуляций отступ можно замерить и перенести в ЦСС или макет, т.к. оставлять такой хак в реальных продуктах не стоит.

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

6 июля, 18:25   верстка   типографика
Красивые шаблоны

В заметке о релизе Изнанки 2.3 я написал про отступы в шаблонах. Хотелось бы раскрыть эту тему целиком.

Например, есть вот такой шаблон:

Раньше Изнанка портила отступы при отрисовке.

Оказалось, что после закрывающий тег ПХП удаляет перенос строки после себя. Лечится это добавлением пробела после тега. В Изнанке 2.3 я автоматизировал процесс простым алгоритмом: если в строке есть ХТМЛ помимо ПХП или ПХП выводит что–либо — экранируем пробелом. На выходе останутся пустые строки там, где был только ПХП код без вывода, но это исправляется через array_filter().

Вот так Изнанка отрисует шаблон сейчас:

29 июня, 5:40   ПХП   Изнанка   хтмл
Тореншал

Я всё больше и больше люблю Элементари ОС. Эти ребята поставили себе цель сделать не просто дистрибутив, а целую систему со своими приложениями и гайдлайнами.

В АппЦентре нашёл хороший торрент–клиент для Элементари — Тореншал.

Тореншал активно развивается (версия с гитхаба уже сильно отличается) и это радует, т.к. Трансмишн застрял во временах ГТК2.

Из очевидных недостатков: нельзя выбирать загружаемые файлы внутри торрента, порой долго ищет пиров если открывать .torrent файл (но очень быстро открывает магнитные ссылки).

Update

Пока писал заметку, Тореншал успел обновиться. Теперь окно выглядит вот так:

27 июня, 4:46   элементари   софт
Дай Хард?

У меня дико пригорает от локализации названий фильмов.

Есть всем известные забавные примеры типа «Die Hard», который в русском переводе стал «Крепким орешком», есть «Hitch», который перевели как «Правила съёма: Метод Хитча».

про работу шрифтовиков и дизайнеров я промолчу

В последнее время перевод названий стал совсем странным и угадать оригинал практически невозможно. Драма «Wakefield» с Брайаном Крэнстоном превратилась в странное «Во всём виноват енот».

Но ещё страшнее когда в работу переводчиков влезают маркетологи, которые меняют название чтобы запутать зрителя. Например, есть мультфильм «Рио», который хорошо собрал в прокате и коварные маркетологи решили перевести «Richard the Stork» как «Трио в перьях» и в афише сделать ощутимый закос.

ещё и Мадагаскар упомянули, чтобы завлечь детей

Постер «Рио» сильно похож.

Есть трилогия «Доспехи Бога» с легендарным Джеки Чаном, новый фильм «Kung Fu Yoga» решил примазаться к серии, взяв название «Доспехи бога: В поисках сокровищ».

остальных актёров решили с постера убрать

Сильно пострадал французский фильм «Demain Tout Commence», который в английской языке стал «Two is a Family». Оригинал переводится как «всё начнётся завтра» и я не понимаю чем этот вариант не устроил переводчиков. В России поступили как всегда: взяли название другого известного фильма с Омаром Си и закосили под него. Получилось «2+1».

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

Томато

Продолжаю писать о софте для Элементари Локи. На этот раз помидорковый менеджер «Томато»:

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

Использую его на ноутбуке для управления временем.

Вообще, всем рекомендую попробовать помидорковую технику. Это один из самых простых способов приучить себя правильно работать. Мне это помогает не лениться.

23 июня, 7:28   элементари   софт
Аверто — красивые сообщения

В одном проекте понадобилось сделать вывод ошибки через alert(). Сама логика всплывающего уведомления мне понравилась, но то что это окно блокирует интерфейс меня расстроило. Да и внешним видом управлять нельзя.

Я решил сделать свой вариант всплывающих сообщений, так появился проект Аверто.

Аверто — красивый аналог alert(). Нажмите на кнопку чтобы увидеть.

Попробовать

Внешний вид, поведение и содержание сообщений задаётся через джаваскрипт: надо создать объект Averto и вызвать в нём функцию throw, задав параметры.

let Av = new Averto(); Av.throw({ message: 'Тестовое сообщение' });

Всего есть 6 параметров:

  • message — единственный обязательный параметр, текст сообщения

  • title — заголовок сообщения

  • color — шестнадцатеричный код цвета фона (по умолчанию красный)

  • autohide — скрывать ли сообщение автоматически (по умолчанию true)

  • timeout — таймаут скрытия в миллисекундах (по умолчанию 3000)

  • blocking — делает сообщение модальным, блокирует интерфейс и ждёт действия пользователя (по умолчанию false)

Цвет тени и текста рассчитывается сам. Приведённый выше пример — минимальный вариант, который запустится.

Объект стоит создавать единожды, т.к. он при инициализации приписывает ХТМЛ и ЦСС для сообщений.

Точно поддерживаются хром, фаерфокс и эдж. В сафари пока не тестировал. В мобильных браузерах работает, разве что в опере мини не будет.

Страницу проекта не успеваю оформить, поэтому скачать можно на гитхабе

22 июня, 18:29   джаваскрипт
Изнанка 2.3

Изнанка — простой, но мощный ПХП движок.

Вышла версия 2.3. Увеличина производительность, добавились цикл foreach и функция throw404, убраны старые баги, функция $view->compile стала публичной.

Новое

Появился цикл foreach, который пишется проще чем в ПХП:

{{@articles as $article}} <h1>{{$article['title']}}</h1> {{end}}

Появилась функция throw404(), которая делает именно то, о чём говорит её название: отправляет заголовок 404 и ставит шаблоном 404.tpl. Функция вызывается без аргументов.

Функция $view->compile($content) стала публичной. Эта функция рендерит текст как шаблон. Я использую это на страницах проектов: у проектов есть общие части (заголовок, дата, ссылка), а есть отличающиеся. Индивидуальные шаблон лежит в папке с проектом, а модуль projects получает этот файл и рендерит вот так:

$view->set('content', $view->compile(file_get_contents($path.$hurl.'.tpl')));

Изменилось

Переменные пути заменены на константы:

было

стало

$view->path

path

$view->uri

uri

Для перехода с предыдущей версии достаточно выполнить замену во всём коде сайта по шаблону, который указан выше.

Функция runModule($module) теперь принимает один аргумент — имя модуля. Это изменение совместимо с предыдущим вариантом, ничего менять не надо, но в дальнейшем модули следует вызывать в упрощённом виде:

<?php switch(uri) { case '/note': runModule('note'); break; }

Данные из массивов теперь выводятся без решётки. Теперь достаточно написать имя переменной в отдельный блок и она выведется.

{{@article['title']}}

Внутренние изменения

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

Построчная обработка также позволила исправить то, что меня давно бесило — съезжающие отступы в шаблонах. Теперь шаблоны выводятся так, как они написаны.

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

{{for ($i=0 to count(@passed))}}{{@passed[$i]}}{{end}}

Ошибка была плавающая, появлялась не всегда и из–за этого было неспокойно. Сейчас всё работает как надо.

Ещё ужал картинки и код, теперь дистрибутив весит 9.4 килобайта.

Где скачать?

Скачать можно на странице проекта или на гитхабе.

21 июня, 23:35   релиз   Изнанка
Просите кадры: пример

Недавно писал про то, что в джаваскрипте надо просить кадры. Решил сделать простой пример.

Задача: написать функцию, которая будет трясти элемент как МакОс трясёт окна авторизации с неправильным паролем.

Сначала надо написать математическую функцию. Для этого ищем сайт который строит график функции и пробуем. В моём случае функция вышла такая:

15 / (x1.25 / 20 + 0.5) * sin (x / 2)

Затем пишем эту функцию на джаваскрипте.

function draw(min, max){ let pos = (15 / ((Math.pow(min, 1.15) / 10 + 0.5) - 0.05) * Math.sin(min / 2)); min += 1; a.style.transform = 'translateX('+pos+'px)'; if (min < max){ requestAnimationFrame(function(){ draw(min, max); }); } }

Функция вызывается рекурсивно, таймеры писать не надо. Чтобы рассчитать длительность надо разделить количество кадров на 60. Я буду запускать эту функцию с параметрами 0 и 80, поэтому длительность анимации будет 1.33 секунды.

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

19 июня, 19:15   джаваскрипт
РаньшеCtrl + ↓