JavaScript *

Затекли? Хотите размять мозги? Вперед!
Hand-tailored специально для вас. Одним из вас.
Мы любим головоломки. Мы любим интересные конкурсы и терпеть не можем яблоки (поэтому будем их солить и выбрасывать в окно).
Это уже не первый наш опыт.
Предыдущий эксперимент увенчался успехом, но мы хотим большего.
Мы хотим проводить конкурсы регулярно. И хотим чтобы участие в них было захватывающим. И хотим чтобы у вас было время к ним подготовиться.

Продолжая свои рискованные и бесчеловечные эксперименты в области веб-проектирования, сегодня я предлагаю вашему вниманию дальнейшее развитие Markdown webdocs и его интеграцию с сервисом GitHub.
Что получилось: достаточно простая, несколько вики-подобная (в подходе к редактированию), с форматированием текста markdown + html + компоненты, с встроенным редактором (и не только текста страницы, но и структуры сайта), без дополнительных сервисов/серверов/базы данных, основанная на Git(Hub) и файлах, фактически CMS система ориентированная на создание документации, простых сайтов или веб-приложений, с возможностью распределенной работы с общим репозиторием (читаемые диффы, автоматические коммиты, возможны пул-реквесты).

Саша Гриф (Sacha Greif), автор книги "Discover Meteor" в следующую субботу (14 декабря) в Сан Франциско проводит обучающий семинар по MeteorJS. Для тех же, кто не может лично прийти параллельно стартовала маркетинговая акция: "бесплатный доступ к книге на 1 день" — зарегистрироваться можно здесь (UPD: регистрироваться не нужно — доступ будет свободный по ссылке — http://free.discovermeteor.com/).

Доброго времени суток, уважаемые хабравчане. На этой неделе мы с вами упустили одно событие. 4 декабря прошло ровно 18 лет с публикации пресс-релиза от Netscape Communications Corporation и Sun Microsystems о появлении JavaSript «открытого, кросс-платформенного, объектно-ориентированного скриптового языка для корпоративных сетей и интернета». Подзаголовок документа: «28 ведущих в данной отрасли компаний одобрили JavaScript в качестве дополнения к JAVA для простой разработки онлайн приложений».

Язык был разработан Брендоном Айком за 10 дней. Самые интересные факты о его труде собраны в статье «История создания Javascript» хабраюзера kmike.

Хотя неделя 30-строчников закончилась, рискну привести ещё один пример сверхлаконичного кода JavaScript, который я нашёл в сети. Встречайте четырёхпанельный редактор HTML/CSS/JS, с превью в реальном времени, код которого умещается в 230 символов:

<x id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea id=t'+i:'<iframe')+' style=width:49%;height:48% oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script>

Посмотреть демо можно по этой ссылке. А можно просто вставить вот этот текст с кодом в адресную строку браузера:

data:text/html,%20<x%20id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea%20id=t'+i:'<iframe')+'%20style=width:49%;height:48%%20oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script>

От переводчика: перевожу не ради холивара, сам RoR не знаю, но чувствую исходящее от специалистов по RoR положительное к нему отношение, мельком видел красоту и самого языка и фреймворка, но здесь не об этом. Цель перевода еще раз обратить внимание на Meteor, который развивается семимильными шагами — в начале 2014 ждем релиз 1.0. В англоязычном Интернете все кипит, а у нас тишина — лишь несколько статей.

Почему Meteor?

Помню как начинал заниматься Rails в 2004 году — это было «волшебное время» — и, конечно, я помню, что меня по крайней мере раз в неделю спрашивали, почему же стоит использовать rails. Я всегда отвечал одинаково: разработчикам нравится этот фреймворк, потому что он позволяет делать работу быстро и с удовольствием. К этому моменту я чуть больше месяца вплотную проработал с Meteor и готов ответить на вопрос: «Почему Meteor?» — который мне тоже часто стали задавать.

Недавно вышло много обновлений Windows Azure. Среди них долгожданная поддержка Cross-Origin Resource Sharing для хранилищ. Я плотно использую в работе blob-storage (файловое хранилище) и в этом посте опишу как сделать загрузку файлов простой и приятной.

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

— В кэмелкейсе пишем?
— Да, как обычно, в кэмелкейсе
… прошло две недели…
— Мы ж в кэмелкейсе договаривались!!!

В нашем случае не было разве, что последней фразы.
Уже давно хотелось как-то это систематизировать, но никак не доходили руки до выбора между стилями от jQuery, Google, ideomatic.js и Crockford.

Когда месяц с небольшим назад в trending гитхаба попало руководство от AirBnB, оно тут же попалось нам на глаза…
А неделю назад мы его перевели, в первую очередь для собственных нужд, но не поделиться с сообществом не могли.

• Оригинал: https://github.com/airbnb/javascript
• Перевод: https://github.com/uprock/javascript

Прочитать крайне советую как минимум всем начинающим js-разработчикам.

^{Более 300 сайтов использовали движок до публикации.}

Девять месяцев назад мы запустили сайт студии. Он быстро набрал популярность, мы получили несколько наград, о нас написали профильные СМИ.

Сайт так же быстро оброс клонами. Некоторые скопировали нас полностью. Попадались и подобные забавные вещи. Сайт на нашем движке попал на One Page Love, а после выявления воровства был удален из рейтинга. Когда количество клонов превысило три сотни, мы решили сделать исходный код движка открытым.

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



Пример и код в jsFiddle.

Первый топик постигла участь многих пятничных постов, но не беда!
Я не сдаюсь, а значит мы продолжаем…

В этом топике мы осветим следующие темы:

• Классы. Определение, создание экземпляров, наследование.
• Методы и поля классов, конструкторы и методы базового класса

Суть проблемы: можно изменить свойство «тематика сайта» для любого приложения типа Web-сайт, даже для того, которое нам не принадлежит.

Мы сделали интеграцию COLT с Sublime. Изменения настолько значительные, что мы даже добавили после точки единицу и теперь COLT имеет версию 1.2.5.

Одним дождливым осенним вечером пришла мне в голову мысль о том, что никогда прежде я не писал JavaScript код следуя канонам test-driven development (TDD). Лиха беда начало! Результатом работы стала маленькая библиотека-шаблонизатор работающая по принципу «JSON на входе, HTMLElement или просто DOM объект на выходе».

Из инструментов использовались: CoffeeScript, QUnit, PhantomJS, Google Closure compiler, а собирается всё это с помощью старого доброго GNU Make. Статья для всех, кому интересна библиотека и для тех, кто поверхностно знаком с вышеперечисленными технологиями и хотел бы увидеть их в работе.

Приветствую хабр, довелось мне недавно писать сервис опросов. В админке этого сервиса была форма с вопросами и вложенными в них примечаниями. И нужно было мне при сохранении вопроса, сохранять все открытые на редактирование вложенности, в чем мне безумно помог jQuery $.Deferred, об этом я и хочу рассказать вам в этой статье.

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

Пойдем по порядку.
Сначала объясню какие были условия.

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

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

JavaScript занимательный язык программирования.

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

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

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

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

Мишко Хевери, главный разработчик Ангуляра, как-то упомянул, что приложение гарантированно работает без тормозов, если в нем не более 100 активных областей видимости. Такой подход, в общем, применим к любым приложениям. В играх давно не рендерят то, чего игрок не видит и только в вебе пока еще считается нормой отобразить целиком список из нескольких тысяч элементов. С приходом js-фреймворков ситуация должна измениться и лучшим решением станет удаление из DOM того чего нет на экране, нежели отказ от промежуточных тегов, биндингов и других вещей, облегчающих разработку. Поэтому провел небольшой анализ решений для отображения больших списков. Наткнулся на пару статей:

1. The Infinite Path of Scrolling

В ней парень рассказывает, что проходил стажировку в Гугле в команде Ангуляра и ему поручили исследовать этот вопрос. (Радует, что разработчики заинтересованы этим. Надеюсь, скоро увидим родную поддержку бесконечного скролла).

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

.hover .element:hover {
  box-shadow: 1px 1px 1px #000;
}

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

Docpad

«Нашумевший» проект в Twitter и GitHub. По заявлению разработчиков «Docpad снимает ограничения и убирает разрыв между профессионалами и новичками. Теперь дизайнеры и разработчики могут создавать веб-сайты быстрее, чем когда-либо прежде». Docpad — это статический генератор сайтов написанный на Node.js. Он позволяет с легкостью создавать шаблоны и блоки. Работает c PHP, Ruby, CoffeeScript и др. В нем есть file wathing, live reload и самое главное «amazing plugin system». Большим плюсом является обучающее видео (хоть и на английском).

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

Действительно, под мои требования замечательно подходил, например, RequireJS с его адаптером для Node.js, которые какое-то время с успехом удовлетворяли мои прихоти, пока меня опять не осенила гениальная мысль: «Почему я вынужден использовать кашу из двух совершенно различных форматов модулей в одном проекте? Нужно все унифицировать!».

И опять ответ не заставил себя долго ждать, нашелся миллион браузерных реализаций CommonJS модулей: и всевозможные склейщики скриптов, и серверные препроцессоры, и синхронные загрузчики, и асинхронные — все, что душе угодно. Но все они оказались с одним очень важным недостатком. Они так или иначе изменяли исходный код скриптов и делали очень неудобным процесс их отладки в браузерных инспекторах.