Ни для одного опытного программиста или верстальщика не секрет, что настроенная под себя среда разработки (не в смысле IDE, а в более общем) — жизненная необходимость. Было время, когда я делал очередную верстку в практически голом Notepad++ на единственном мониторе, поочередно открывая Photoshop, браузер и редактор. Сегодня, в эпоху «автоматизации всего», мне сложно представить, как вообще можно было так работать.

Sublime Text 2 — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент front-end разработчика для работы с HTML, CSS и JavaScript.

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

После некоторого, опыта решил написать небольшую статью-шпаргалку о загрузке файлов с использованием возможностей HTML5, а именно File API.

Читайте далее:

1. Поддержка браузерами.
2. Загрузка через Form Data.
3. Загрузка через File Reader.

Наткнулся на очень простой в реализации, но интересный rollover-эффект для кнопок на CSS. Автор — некий японец ksk1015.



Демонстрация эффекта и процесс написания.

Microsoft представила язык программирования TypeScript, который является надмножеством JavaScript, поддерживает статическую типизацию, модули, определение классов и интерфейсов. TypeScript транслируется в чистый JS, исполняется в любых браузерах, в Node.js и т.д.

Транслятор TypeScript вышел под лицензией Apache 2.0, с исходниками на CodePlex. Microsoft предлагает плагины для Emacs, Sublime Text и Vim.

Прошлая статья привлекла большой интерес. И даже, на некоторое время, стала лучшей за 24 часа. У меня появилось несколько идей и на часть вопросов в комментариях нужно ответить более развернуто.

Здравствуйте, уважаемые хабравчане.

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

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

• скорость jsperf (тест с прекомпилированными шаблонами: jsperf)
• расширяемость := кастомные контролы, трансформация шаблонных данных
• data bindings
• компиляция в json для дальнейшего кэширования
• приятный синтаксис (без мешанины логики и структуры)

Из недостатков:

• шаблонные данные могут находиться только в атрибутах и литералах (хотя, поверте — этого достаточно)

Если тема интересная —

По просьбам некоторых читателей решил написать топик про контекст в javascript. Новички javascript часто не понимают значение ключевого слова this в javascript. Данный топик будет интересен не только новичкам, а также тем, кто просто хочет освежить данный аспект в памяти. Посмотрите пример ниже. Если вы затрудняетесь ответить на вопрос «что будет выведено в логе» хотя бы в одном из пунктов или хотите просто посмотреть ответы — добро пожаловать под кат.

var f = function() {
    this.x = 5;
    (function() {
        this.x = 3;
    })();
    console.log(this.x);
};

var obj = {x: 4, m: function() {
    console.log(this.x);
}};


f();
new f();
obj.m();
new obj.m();
f.call(f);
obj.m.call(f);

Я не изобретатель очередного велосипеда марсохода, а просто хочу рассказать про python фреймворк WEB2PY. На Хабре почему-то нет каких-либо статей про этот чудесный инструмент. Если интересно, под хабракатом небольшая история использования web2py и его описание.

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

Syte был разработан Родриго Нери (Rodrigo Neri) — собственно его страничка и является одним из примеров использования Syte.
По сути, это простое и мощное Django-приложение, которое позволяет интегрировать такие социальные сервисы, как Tumblr, Twitter, Github, Dribbble и Instagram.

Зачем?

Вопрос “Зачем?” — самый главный при принятии любого решения. В нашем случае причин было несколько.

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

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

Но в Mail.Ru Group есть целая команда высококвалифицированных людей, знающих JS, способных самостоятельно написать инструмент, а самое главное — они же им и будут пользоваться.

Во-вторых, задачи. Возьмем проект Почта@Mail.ru. Мы не можем отказаться от шаблонизации на сервере – нам нужна быстрая загрузка при первом входе. Мы не можем отказаться от шаблонизации на клиенте – люди должны видеть высокую скорость реакции на их действия, а значит, обязателен AJAX и шаблонизация на клиенте.

Проблема очевидна: два набора совершенно разных шаблонов на сервере и на клиенте. А самое обидное, что решают они одну и ту же задачу. Дублирование логики нас просто измотало.

v8 — это интерпретатор JavaScript, а значит, мы можем получить один шаблон, который работает как на сервере, так и на клиенте.

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

Буквально пару месяцев назад, мы начали переписывать весьма крупный сайт, с момента прошлого крупного релиза прошёл не один год, конечно, сайт дорабатывался, правились баги и в итоге в настоящее время создаётся новая версия. В ней будет активно использоваться AJAX, поэтому весьма остро стоял вопрос с генерацией контента на клиенте, полученного в формате JSON. Прошлые шаблоны были собственной разработки, так как на то время вариантов было не так много, которые по разным причинам не подходили, базировались наши шаблоны на jquery, с помощью атрибутов происходило заполнение.

Прежде всего было решено провести тест, при генерации списка из 1500 элементов было получено превосходство в 20 раз, похожие результаты показывает сравнение с jQuery Template (страница с тестами).

Как многие уже догадались из названия, речь пойдет о движке LiveStreet, а вернее о базовом шаблоне Synio, который включается в сборку CMS, и автором которого мне повезло стать.

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

Добрый день!

Настройка автомасштабирования на основе Amazon EC2 это очень интересная задача, которую я когда-то решил и теперь применяю на практике. Существует много возможных вариантов, но я рассмотрю самый простой из них: горизонтальное масштабирование одного сервера под одним балансировщиком.

В качестве инициатора маштабирования будет выступать Cloud Watch. Метрикой будет наша кастомная метрика Load Average.

Итак, начнём-с. Первое, как тру линуксоид, я советую и рекомендую использовать в настройке автоскейлинга утилиты командной строки (Command Line Tools — CLT) по следующим причинам:

• из CLT можно сделать всё;
• удобнее копипастить в консоль, чем кликать мышкой.

В оригинале название звучит как «How Not To Sort By Average Rating». Я подумал, что дословный перевод «Как не сортировать по усреднённому рейтингу» будет малопонятен и хуже отражает содержание статьи.

Постановка проблемы

Вы занимаетесь веб программированием. У вас есть пользователи, которые оценивают контент на вашем сайте. Вы хотите разместить высоко оцененный контент наверху, а низко оцененный — внизу. Для этого на основе пользовательских оценок вам нужно вычислить некий «рейтинг».

Неправильное решение №1

Рейтинг= (Число положительных оценок) - (Число отрицательных оценок)

UPD: Рыская на просторах интернета набрел на новый более простой способ, без танцев с питоном( а можно и с ним если необходимо).
Оказалось что сайт sms.ru уже более полугода предоставляет Бесплатные СМС для программистов.

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

После регистрации можно отправлять до 60смс в день на свой номер, указанный при регистрации. Уже почти месяц как перевел все свои сервисы с гугла на данный сервис. Радует отсутствие минутной задержки перед отправкой и возможность получения статуса сообщения.

Отправить можно разными способами, на сайте, в разделе «Программистам» есть множество готовых примеров:

• HTTP
• curl для командной строки (UTF-8)
• php (с включенным модулем curl)
• php (без curl)
• php (усиленная авторизация)
• PERL (усиленная авторизация)
• Python

Самый простой способ это открыть страницу:

sms.ru/sms/send?api_id=xxxx-xxxx-xxxxx-xxxx-xxxx&to=номер_телефона&text=hello+world
,где - xxxx-xxxx-xxxxx-xxxx-xxxx это id доступный после регистрации.

Так же есть возможность пересылки email на смс. В разделе «Почта sms.ru» можно настроить свой почтовый ящик name sms.ru письма на который будут пересылаться на телефон в виде смс. При включенной опции «обрезать до 1смс» все сообщения на свой номер будут бесплатны.

---

В настоящее время все большую популярность приобретают WYSIWYG редакторы. Популярны они в силу своей простоты использования для обычных пользователей. Но по большей части, большинство этих редакторов волне хорошо справляется с созданием HTML содержимого и лишь малая часть из них умеет создавать содержимое c BBcode разметкой. А если и умеют, то настроить эти редакторы под свои нужды задача весьма и весьма тяжелая.

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

В качестве предисловия к переводу. Открываем Firefox/Opera, переходим по ссылке, смотрим исходный код страницы и удивляемся. Потому что его нет. Под катом рассказ, как такое можно сделать.

Очередным редактором HTML, CSS и JavaScript, написанным на HTML, CSS и JavaScript сейчас никого не удивишь. Однако есть несколько причин, по которым стоит обратить внимание на пока ещё совсем зелёный и молодой проект Adobe Brackets. Во-первых, его делает Adobe. Поддержка такой крупной корпорации значит очень много. Во-вторых, Open Source бывает разный. В случае с Brackets это правильный, настоящий Open Source — уровень открытости весьма и весьма высок. Проект был опубликован на Github в начале мая этого года, несмотря на то, что он ещё в совершенно младенческом состоянии. Бэклог проекта тоже открыт для всех — разработка ведётся по методологии scrum спринтами по 2.5 недели. В-третьих — дизайн и архитектура этого IDE заслуживают более подробного рассказа.