81code

четверг, 17 августа 2017 г.

Отдаем .webp вместо jpg/png при помощи .htaccess

Формат .webp уже поддерживается основными браузерами: файрфоксом, эджем, хромом и аналогами, их совокупная доля на рынке превышает 75%, а значит есть смысл его использовать, чтобы изображения быстрее загружались.

Как это сделать? Существуют решения с <picture> или определением поддержки webp при помощи джаваскрипта, добавлением класса .webp в <html> и загрузки нужных форматов через css. Эти варианты требуют изменения разметки. Вместо этого можно обойтись всего лишь изменением конфига сервера.

Работает так:

Сервер проверяет, поддерживает ли браузер пользователя webp (браузер указывает в это заголовках запроса).
Если пользователь запрашивает изображение, то сервер проверяет, есть ли такая же картинка с расширением webp.
Если есть, то отдает ее пользователю. Иначе отдает обычную.

Решение для .htaccess:

	<IfModule mod_rewrite.c>
	RewriteEngine On

	# serves a .webp image instead of jpg/png
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} ^(.+)\.(jpe?g\|png)$
	RewriteCond %1\.webp -f
	RewriteRule ^(.+)\.(jpe?g\|png)$ $1.webp [T=image/webp,E=accept:1]
	</IfModule>

	<IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
	</IfModule>

	AddType image/webp .webp

view raw .htaccess hosted with ❤ by GitHub

В диспетчере запросов будет виден только один запрос с изначальной картинкой, вместо которой будет отдан webp файл. В столбце Type будет указано "webp".

Существуют аналогичные решения: webp-detect (заодно есть конфиг для nginx и др.), WebP-images-with-htaccess.

Их особенность в том, что они не работают. В них для проверки существования файла с расширением webp используется {DOCUMENT_ROOT}, но у меня он ведет в корень сайта, а не в папку с файлом. Из-за этого сервер не может найти webp файлы. Зато вариант с {REQUEST_FILENAME} работает.

Вывести переменную из .htaccess

При отладке .htaccess хочется вывести на экран значение переменных или найденных строк. На stackoverflow есть решение:

# в переменную окружения TEST0 передаем требуемые данные
RewriteRule ^(.*) - [E=TEST0:%{DOCUMENT_ROOT}/blog/html_cache/$1.html]

# после чего показываем эту переменную в заголовке ответа TEST_FOOBAR
Header set TEST_FOOBAR "%{REDIRECT_TEST0}e"

Например, если мы хотим отладить отдачу картинок webp через .htaccess, то делаем так:

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} ^(.+)\.(jpe?g|png)$
  RewriteCond %1\.webp -f
    RewriteRule ^(.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1,E=TEST0:%1\.webp]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
  Header set TEST_FOOBAR "%{REDIRECT_TEST0}e"
</IfModule>

AddType image/webp .webp

Затем заходим в инспектор запросов браузера, кликаем на нужный запрос, и смотрим заголовок TEST_FOOBAR:

Более подробное логирование

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

Он включается в настройках VirtualHost апача. Нужно указать:

LogLevel alert rewrite:trace8

Перезапускаем апач и теперь в error.log будет отображаться подробная информация по правилам .htaccess.

четверг, 1 июня 2017 г.

Как правильно обновить npm под windows

Открываете cmd или powershell от имени администратора и запускаете там команды:

powershell -ExecutionPolicy unrestricted

npm install --global --production npm-windows-upgrade

npm-windows-upgrade --npm-version latest

Вот и все, npm обновлен.

воскресенье, 10 апреля 2016 г.

Syntax highlighter для blogger

1. Открываете в блогспоте вкладку "Дизайн". Снизу в footer добавляете гаджет "HTML/Javascript" с содержимым:

<!-- syntax hightlight -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/vs.min.css" />
<style>
pre>code {padding: 1em; border: 1px solid #aaa; display: block; overflow-x: auto;}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Сохраняете.

2. Во время редактирования поста переходите на вкладку HTML и там пишите:

<pre><code> тут код, который нужно раскрасить </code></pre>

Скрипт сам постарается определить язык программирования. Если хотите, то можете указать его явно. Для этого укажите класс в теге <code class="javascript">. Названия поддерживаемых языков находятся в документации.

Если хотите отключить раскрашивание, то указываете класс "nohighlight".

Если хотите раскрасить html, то в блоггере на вкладке "Создать" вставляете html код, нажав ctrl+shift+v. Затем переходите на вкладку HTML и там обрамляете получившийся код (со всеми этими < и >) тегами <pre><code class="html"> ... </code></pre>.

Для всего этого используется библиотека highlightjs.org. Заходите в ее демку, чтобы узнать какие языки поддерживаются и выбрать подходящий стиль раскраски.

3. Если пишите посты в блоггере через вкладку "Создать", то когда вы будете отделять пустыми строками блоки с кодом, то блоггер будет добавлять лишние пустые строки. Чтобы этого избежать, нужно убрать пустые строки над и под блоками с кодом. Можно так же во вкладке HTML удалить лишние <br> вокруг блоков с кодом. В редакторе блоггера пост будет выглядеть примерно так:

Cron в meteor.js при помощи Heroku Scheduler

Идея простая:

В Meteor.methods добавляем нашу задачу (назовем ее task)
Создаем route '/task/:param'
А затем вызываем его через curl.

Код:

# /lib/router.coffee

Router.route '/task/:param', {where: 'server'}
  .post ->
    Meteor.call 'task', @params.param # запускаем метод 'task', ждем выполнения
    this.response.end('done') # возвращаем 'done' когда 'task' выполнится

# /lib/task.coffee (or /server/task.coffee ?)

Meteor.methods
  task: (param) ->
    return if (Meteor.isClient)
    # your code here

Добавляем в хероку аддон Heroku Scheduler. В нем добавляем задачу:

curl -X POST https://our-app.herokuapp.com/task/param-value

Теперь хероку будет по расписанию это запускать, передавая param-value в метод task и возвращать строку 'done' (будет видна через heroku logs).

воскресенье, 18 января 2015 г.

Как заставить работать PEAR в XAMPP

1. В C:\xampp\php\pear.bat нужно добавить строку (там в начале файла есть несколько аналогичных - после них и добавляйте) источник

IF "%PHP_PEAR_SYSCONF_DIR%"=="" SET "PHP_PEAR_SYSCONF_DIR=C:\xampp\php"

2. Открываете консоль в папке C:\xampp\php\ и вводите команды: источник

pear config-set doc_dir C:\xampp\php\pear\docs
pear config-set cfg_dir C:\xampp\php\pear\cfg
pear config-set data_dir C:\xampp\php\pear\data
pear config-set cache_dir C:\xampp\php\pear\cache
pear config-set download_dir C:\xampp\php\pear\download
pear config-set temp_dir C:\xampp\php\pear\temp
pear config-set test_dir C:\xampp\php\pear\tests
pear config-set www_dir C:\xampp\php\pear\www

Все, после этого PEAR должен заработать.

суббота, 20 октября 2012 г.

Что такое NCrunch

NCrunch — это расширение для Visual Studio, которое автоматически запускает тесты. Причем для этого даже не обязательно сохранять файл. Все запускается на лету. Прошел тест или нет — это отображается сразу в редакторе. Так же отображается покрытие кода и узкие места по производительности.

Материалы по теме:

Официальный сайт. На нем есть еще хорошее видео, по которому понятно, как все работает.
Подробная статья на английском в картинках с установкой, настройкой, работой.
Другая статья со скриншотами.

Альтернативы:

http://continuoustests.com/