Vizvamitra's blog

Новый редактор постов

Vizvamitra — Sat, 16 May 2015 19:09:00 +0300

Сегодня закончил первую версию нового редактора постов. Как и задумывалось, пост теперь состоит из отдельных кусков разных типов. Пока их всего 2: текст (с использованием маркдауна) и ембед-код, но позже я планирую добавить ещё.

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

Модульная организация javascript-кода

Vizvamitra — Wed, 13 May 2015 00:40:00 +0300

Часто бывает так, что на вашем сайте есть куча небольших кусков javascript-кода. Одни отвечают за инициализацию тех или иных библиотек, другие навешивают события на элементы интерфейса, но всех их объединяет одно: они никак не связаны друг с другом.

Попробуем улучшить организацию нашего кода.

Мета-тэги, Open Graph, микроразметка

Vizvamitra — Fri, 1 May 2015 20:11:00 +0300

Допустим вы реализовали на своём сайте красивый и понятный для людей дизайн. Но что делать, если ваш посетитель - не человек? Как роботу поисковика или соц. сети понять, что у вас и где? В этом посте я опишу 3 способа, с которыми только что сидел разбирался.

Как улучшить свои навыки при написании блога

Vizvamitra — Wed, 29 Apr 2015 18:26:00 +0300

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

Обновление блога

Vizvamitra — Wed, 29 Apr 2015 18:25:00 +0300

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

Пока что основных видимых нововведений 3:

Новый дизайн
RSS-лента (доступна по адресу [http://vizvamitra.ru/articles/feed])
Полноценные комментарии disqus'а

Скрипты для удалённой работы с домашним компом

Vizvamitra — Wed, 14 Jan 2015 01:01:00 +0300

Дома стоят ветхий сервак (на нём этот блог), домашний комп и ноут.

То и дело появляется необходимость влезть на домашний комп по ssh, для чего его нужно как-то удалённо включить. У меня это можно сделать с сервера (он никогда не вырубается и настроен так, чтобы быть доступным по ssh из нэта). Каждый раз делать всё это ручками лениво, поэтому я автоматизировал процесс с помощью скриптов.

Далее я расскажу о скриптах, которые для этого всего использую.

Фишки Rails. Хелперы вьюх

Vizvamitra — Wed, 7 May 2014 04:03:01 +0400

div_for

<%= div_for @post do %>
    <%= @post.body %>
<% end %>

Эквивалентно


    <%= @post.body %>

truncate

truncate("Я великий маг огня!", length: 7) # => Я велик...
truncate("Я великий маг огня!", length: 7, separator: ' ') # => Я...

titelize

Приветствуем, <%= @user.name.titelize %> # => Приветствуем, Василий Пупкин

to_sentence

Роли: <%= @role_names.to_sentence %> # => Роли: Админ, Автор, Гадский Гад

Фишки Rails. Asset Pipeline

Vizvamitra — Wed, 7 May 2014 03:55:00 +0400

В посте речь пойдёт о работе с ресурсными файлами в Rails.

Фишки Rails. Мейлеры

Vizvamitra — Wed, 7 May 2014 03:54:00 +0400

Кратко рассмотрим возможности работы с почтой в Rails

Фишки Rails. REST'о-штуки

Vizvamitra — Wed, 7 May 2014 03:52:00 +0400

Пост про маршруты в Rails и соответствующие им хелперы

Фишки Rails. Некоторые аспекты использования моделей

Vizvamitra — Wed, 7 May 2014 02:09:00 +0400

Сегодня вспомнил очередной раз про всё это и решил записать.

В программе: именованные скоупы, колбэки, опции отношений, 'includes' и has_many :through

как замена textarea

Vizvamitra — Sat, 12 Apr 2014 16:20:00 +0400

В ситуации, когда нужно, чтобы ваша textarea росла в высоту вместе с контентом, заставить её так себя вести можно только javascript'ом. Вероятно, это потребует создания скрытого блока, копирования в него содержимого textarea, высчитывания высоты и присвоения значения этой высоты вашей textarea, причём вся эта радость - при каждом нажатии клавиши. Жуть!

Но есть другой вариант: использовать вместо textarea обычный div с атрибутом contenteditable.

Turbolinks

Vizvamitra — Fri, 11 Apr 2014 11:13:00 +0400

Turbolinks в Rails - это отличный способ ускорить загрузку страниц. Суть фишки - в том, чтобы вместо полной перезагрузки страницы при нажатии на ссылку подгружать только изменившуюся часть. Как я выяснил, пока делал этот блог, подход имеет и подводный камень. При обновлении части страницы не происходит события ready, из-за чего такие вещи, как highlight.js, отвечающий тут за подсветку синтаксиса, не обрабатывают обновлённый контент.

Решением проблемы является использование событий, добавляемых Turbolinks'ом:

page:before-change a Turbolinks-enabled link has been clicked (see below for more details)

page:fetch starting to fetch a new target page

page:receive the page has been fetched from the server, but not yet parsed

page:change the page has been parsed and changed to the new version and on DOMContentLoaded

page:update is triggered whenever page:change is PLUS on jQuery's ajaxSucess, if jQuery is available (otherwise you can manually -trigger it when calling XMLHttpRequest in your own code)

page:load is fired at the end of the loading process.

Т.о. для того, чтобы подсветка синтаксиса работала при переходах между страницами я использую такой код (warning: coffeescript sintax!):

$(document).on 'page:change', ->
  $('pre code').each (i, e) ->
    hljs.highlightBlock(e)