Ember.jsКомпиляция шаблонов в Ember.js 1.10

Только немного отвлёкся от Ember.js, как в нём внезапно произошли изменения, а именно, сменился движок рендеринга шаблонов. Был Handlebars, а стал какой-то HTMLBars, у которого я даже официального сайта не наблюдаю. Хотя для рядового разработчика ничего не меняется, внешне сами шаблоны остаются почти как есть, основные же отличия во внутренностях.

Если в двух словах, то было и стало.

Раз:

1
2
<script src="/bower_components/handlebars/handlebars.js"></script>
<script src="/bower_components/ember/ember.js"></script>

Два:

1
2
<script src="/bower_components/ember/ember-template-compiler.js"></script>
<script src="/bower_components/ember/ember.js"></script>

Второй момент - это предварительная компиляция *.hbs шаблонов в JavaScript-код. В предыдущей записи, посвящённой Ember.js, использовался модуль ember-precompile, однако сейчас я его даже пробовать не стал, уверен, что ошибки вылезут довольно быстро. Есть же и другие инструменты, рекомендованные на официальном сайте данного фреймворка (здесь).

Symfony2Symfony2 и Ember.js

Внимание, данная запись устарела. Работоспособность модуля ember-precompile под вопросом начиная с Emberjs 1.9, в связи с переходом на handlebars 2.0.0, а с версии эмбера 1.10+ шаблоны рендерятся с помощью HTMLBars, об этом напишу в ближайшее время.

Эту тему, конечно, в двух словах не опишешь, но попробую. Что это такое и с чем его едят - рассказывать не буду, т.к. раз уж вы сюда попали, то слова эти для вас не пустой звук. Расписывать, почему именно Symfony2 и Ember.js - тоже. Просто так сложилось. Ладно, вступление окончено.

В данной записи будет затронута только серверная часть, хотя не исключено, что когда-нибудь дойдут руки и до статеек по эмберу. Собственно, Symfony-приложение предоставит яваскриптовому приложению REST API, а так же неким образом "подготовит" его и выдаст клиенту в браузер.

RaspbianRaspbian + Node.js на Raspberry Pi

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

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

1
sudo apt-get install nodejs npm

Однако стоило посмотреть версию установленных паркетов, так сразу и стало печально. И дело не только в циферках (0.6.19 для nodejs и 1.1.4 для npm), тот же модуль forever уже не запустишь. Хотя и сам Debian тоже не радует дремучестью своих пакетов, ну да ладно, хотят люди стабильности - пусть им будет стабильность :) А я пошёл гуглить.

Секреты JavaScript ниндзя

ЛитератураСекреты JavaScript ниндзя

Прикупил недавно эту книгу → "Секреты JavaScript ниндзя" (Джон Резиг, Беэр Бибо). Почти три года назад тоже писал тут о книге, связанной с JavaScript, и тоже фигурировали эти самые ниндзя :) Хотя ниндзя веб-разработки я так и не стал.

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

Теперь о самой книге. Зацепила. Есть у меня и другие, но именно с этой стало понятно, чем, собственно, JavaScript отличается от других языков. Доступно и с большим количеством примеров описываются основы языка. Для меня, например, прояснились такие тёмные стороны JavaScript, как прототипизированное наследование и сами прототипы, что позволяет взглянуть на объектно-ориентированное программирование с другой стороны, отличной от привычных реализаций, где объекты основываются на классах.

В общем, рекомендую :)

typeahead.js

JavaScripttypeahead.js - Автокомплитер и Twitter Bootstrap.

Прикручивал автодополнение к полям формы на сайте, использующем Twitter Bootsrap, выбрал по инерции знакомый и привычный jQuery UI и тут же столкнулся с проблемой. Поля, использующие bootstrap-datepicker.js разнесло до полной неузнаваемости. Для начала просто отключил стили, необходимые для автокомплитера из jQuery UI, предполагая, что проблема именно в них, да и просто из любопытства, однако это не помогло - внешний вид улучшился, но до исходного варианта было ещё далеко :)

Морочить себе голову не стал, пытаясь соединить несовместимое, просто вбил в поисковик "twitter bootstrap autocomplete". И сразу наткнулся на то, что надо, т.е. на typeahead.js. Тут официальная страница с примерами, хорошая документация на GitHub. Добавить нечего. Просто брать и использовать. Внешний вид хорошо вписывается в общий стиль, не выглядит чужеродным :)

DISQUS

NewsПрикрутил DISQUS

Что-то довольно часто стала попадаться на глаза эта система комментариев, т.е. DISQUS. Любопытство взяло вверх, решил посмотреть, как оно всё выглядит изнутри, а этот блог как раз подходит на роль площадки для всяческих испытаний :)

Оказалось даже проще, чем я себе это изначально представлял, думал, что может приключиться что-то со стилями CSS и прочим, но ничего не произошло. Короче говоря, установить его сможет и домохозяйка, для которой html и javascript не пустой звук. Хотя если учитывать существование плагинов под WordPress, Blogger или Tumblr, то и эти условия становятся необязательными.

Комментарии, конечно, не посыпятся сюда, как из ведра, но надеюсь, что потратил своё драгоценнейшее время не зря :) А запись пусть висит тут для истории.

Sahi Dashboard

ТестированиеУстановка Sahi

Думаю написать пару записей про автоматическое тестирование в веб-разработке. Не потому, что информации по этой теме не хватает, а для того, чтобы у меня это было всегда под рукой :) Сразу всё в одной заметке не опишешь, конечно, так что буду по частям. Сегодняшняя часть будет про Sahi.

Если в двух словах, то это некий драйвер, который будет самостоятельно кликать по кнопкам и ссылкам, заполнять поля форм и выполнять прочие операции на сайте. Самостоятельно - это немного не то слово, будет происходить именно то и только то, что описано в тестовом сценарии. В отличии от других (но не всех, конечно) "эмуляторов" браузеров, Sahi умеет работать с динамическими веб-приложениями, т.е. AJAX и прочий javascript ему по зубам. Ладно, закончим с лирическим вступлением...

Идём на официальный сайт, перемещаемся в раздел с Open Source версией и кликаем на загрузку. Скачиваем. Скачается, скорее всего, jar-файл, но бояться его не стоит, всё отлично запустится и установится, если, конечно, Java JDK (или JRE) уже установлен.

робот спам

ВсячинаАтака роботов

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

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

JavaScriptHTML5 и IE8

Долго сражался с этим долбанным ребусом. Если вкратце, то внешний вид одного сайта нормально отображался в IE8 и IE7, однако одна единственная страница перекашивалась в указанных браузерах. Средство разработчика, встроенное в IE показало, что на этой злосчастной странице такие элементы HTML5, как <footer>, <article> или <header> самостоятельно "закрывались", т.е. превращались в элементы вида <footer/>, <article/> и т.п. Причём на остальных страницах подобного поведения не наблюдалось.

Гугление привело на страницу с решением, позволяющем включить новые элементы HTML5 в Internet Explorer. Приведу здесь необходимый фрагмент:

1
2
3
<!--[if lt IE 9]>
<script src="http://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

NewsПодсветка кода

Благодаря такой штуке, как SyntaxHighlighter, добавил себе в блог подсветку кода. Работает она только на странице записи, в ленте пока не организовывал её.

Собственно:

1
2
3
4
5
<?php

if ($ok) {
    echo 'Превед, Медвед';
}