Мы сделали интеграцию COLT с Sublime. Изменения настолько значительные, что мы даже добавили после точки единицу и теперь COLT имеет версию 1.2.5.Читать полностью »
Рубрика «javascript» - 446
Sublime + COLT. Добавь интеллекта своему IDE
2013-12-02 в 13:07, admin, рубрики: COLT, javascript, sublime, Блог компании CodeOrchestra, Веб-разработка, метки: COLT, javascript, sublimekidomi: построение DOM-объектов «на лету»
2013-12-02 в 9:24, admin, рубрики: Closure Compiler, coffeescript, dom, javascript, templates, шаблонизатор, метки: Closure Compiler, coffeescript, dom, javascript, templates, шаблонизаторОдним дождливым осенним вечером пришла мне в голову мысль о том, что никогда прежде я не писал JavaScript код следуя канонам test-driven development (TDD). Лиха беда начало! Результатом работы стала маленькая библиотека-шаблонизатор работающая по принципу «JSON на входе, HTMLElement или просто DOM объект на выходе».
Из инструментов использовались: CoffeeScript, QUnit, PhantomJS, Google Closure compiler, а собирается всё это с помощью старого доброго GNU Make. Статья для всех, кому интересна библиотека и для тех, кто поверхностно знаком с вышеперечисленными технологиями и хотел бы увидеть их в работе.
Читать полностью »
Рекурсивное сохранение вложенностей с помощью $.Deferred объекта
2013-12-02 в 8:44, admin, рубрики: deferred, javascript, jquery, метки: deferred, javascript, jquery 
Приветствую хабр, довелось мне недавно писать сервис опросов. В админке этого сервиса была форма с вопросами и вложенными в них примечаниями. И нужно было мне при сохранении вопроса, сохранять все открытые на редактирование вложенности, в чем мне безумно помог jQuery $.Deferred, об этом я и хочу рассказать вам в этой статье.
Допустим у нас есть такая структура вопросов и примечаний к ним, как указана на скриншоте справа, её мы и будем разбирать. Я не дизайнер, стилизировал как смог, чисто для этой статьи, так что извиняйте.
Пойдем по порядку.
Сначала объясню какие были условия.
Есть вопросы, внутри них могут быть примечания. При нажатии редактировать или сохранить — с сервера возвращается вёрстка вопроса/примечания и заменяется в шаблоне. Задача в том чтобы не потерять изменения примечаний при сохранении вопроса, если одновременно редактировались и вопрос и вложенное примечание.
Есть несколько вариантов решения этой проблемы, наверняка можно было отправлять всё разом на сервер а там уже разбирать, но это потребовало бы изменения структуры.
Мне понравился вариант с отложенным сохранением родительского вопроса, если имеются на сохранение некие дочерние элементы. Такое поведение бывает нужно в самых разных ситуациях, и даже в моей недолгой практике это потребовалось уже несколько раз.
Читать полностью »
Несколько JavaScript хаков для хипстеров
2013-12-02 в 8:26, admin, рубрики: javascript, Веб-разработка 
JavaScript забавный язык программирования, ну, кроме некоторых случаев.
Постоянные опасения ошибок времени выполнения заставляют нас думать постоянно. Мы программируем все лучше и лучше — так как постоянно приходится выполнять код в уме, другого способа нет.
Вот почему важно, чтобы код был аккуратный. Маленький код, изящный. Такой, в который можно влюбиться. В противном случае, JavaScript может и отпугнуть.
Я подобрал для вас несколько забавных сниппетов, которые радуют меня самого, и которые я сам использую вместо скучного кода, занимающего много места. Некоторые из них делают код короче, другие четче и яснее. Еще парочка — это хаки для отладки.
Все это я узнал, изучая проекты с исходным кодом, но здесь я пишу так, как будто бы это я их придумал.
Читать полностью »
Бесконечная прокрутка в веб-приложениях с примерами на AngularJS
2013-12-01 в 17:24, admin, рубрики: AngularJS, javascript, архитектура приложений, Веб-разработка, метки: AngularJS, архитектура приложенийМишко Хевери, главный разработчик Ангуляра, как-то упомянул, что приложение гарантированно работает без тормозов, если в нем не более 100 активных областей видимости. Такой подход, в общем, применим к любым приложениям. В играх давно не рендерят то, чего игрок не видит и только в вебе пока еще считается нормой отобразить целиком список из нескольких тысяч элементов. С приходом js-фреймворков ситуация должна измениться и лучшим решением станет удаление из DOM того чего нет на экране, нежели отказ от промежуточных тегов, биндингов и других вещей, облегчающих разработку. Поэтому провел небольшой анализ решений для отображения больших списков. Наткнулся на пару статей:
1. The Infinite Path of Scrolling
В ней парень рассказывает, что проходил стажировку в Гугле в команде Ангуляра и ему поручили исследовать этот вопрос. (Радует, что разработчики заинтересованы этим. Надеюсь, скоро увидим родную поддержку бесконечного скролла).Читать полностью »
60 FPS? Легко! pointer-events:none!
2013-11-30 в 20:31, admin, рубрики: css, javascript, Веб-разработка, производительность 
Вы, наверное, уже читали интересную статью о том, как можно отключать эффекты :hover при скроле – это позволяет здорово сохранить отзывчивость сайта, но имеет один недостаток – вам приходится опираться на один общий класс, и это плохо.
.hover .element:hover {
box-shadow: 1px 1px 1px #000;
}Несколько интересностей и полезностей для веб-разработчика (выпуск 9)
2013-11-30 в 18:26, admin, рубрики: css, html, javascript, Веб-разработкаДоброго времени суток уважаемые читатели. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
Docpad
.jpg "Несколько интересностей и полезностей для веб разработчика (выпуск 9)")
«Нашумевший» проект в Twitter и GitHub. По заявлению разработчиков «Docpad снимает ограничения и убирает разрыв между профессионалами и новичками. Теперь дизайнеры и разработчики могут создавать веб-сайты быстрее, чем когда-либо прежде». Docpad — это статический генератор сайтов написанный на Node.js. Он позволяет с легкостью создавать шаблоны и блоки. Работает c PHP, Ruby, CoffeeScript и др. В нем есть file wathing, live reload и самое главное «amazing plugin system». Большим плюсом является обучающее видео (хоть и на английском).
Видео: Rapid Web Development with DocPad
Загрузка CommonJS модулей в браузер без изменения исходного кода
2013-11-30 в 16:38, admin, рубрики: browser, CommonJS, javascript, module, require, Веб-разработка, метки: browser, CommonJS, javascript, module, require 
Однажды, сидя за компьютером и обдумывая свою очередную никчемную затею, я внезапно понял, что мне нужен способ использовать один и тот же код на стороне браузера и на стороне сервера. Я почти сразу же догадался, что наверняка я не первый такой умный, и все давно придумано за меня — и не ошибся.
Действительно, под мои требования замечательно подходил, например, RequireJS с его адаптером для Node.js, которые какое-то время с успехом удовлетворяли мои прихоти, пока меня опять не осенила гениальная мысль: «Почему я вынужден использовать кашу из двух совершенно различных форматов модулей в одном проекте? Нужно все унифицировать!».
И опять ответ не заставил себя долго ждать, нашелся миллион браузерных реализаций CommonJS модулей: и всевозможные склейщики скриптов, и серверные препроцессоры, и синхронные загрузчики, и асинхронные — все, что душе угодно. Но все они оказались с одним очень важным недостатком. Они так или иначе изменяли исходный код скриптов и делали очень неудобным процесс их отладки в браузерных инспекторах.Читать полностью »
Простая публикация геоданных на собственной карте на базе 2ГИС
2013-11-29 в 18:45, admin, рубрики: javascript, Maps API, php, Геоинформационные сервисы, метки: 2gis API, 2ГИС, javascript, PHPНедавно передо мной встала интересная задача — отображать на сайте карту, с различными объектами, причем этих объектов могут быть десятки и сотни, а управлять ими должен уметь любой менеджер ниже среднего звена.
Более формально задача сводилась к тому, чтобы дать возможность пользователям задавать некий список гео-объектов, дать им возможность легко и быстро этими объектами управлять и автоматически отображать эти объекты на некоей карте.
Для реализации задумки была выбрана связка Google Docs и API картографического сервиса 2ГИС. Решение получилось действительно простым, в духе знаменитых «30 строк» :)
Читать полностью »
Пишем плагин для CKEditor 4
2013-11-29 в 14:58, admin, рубрики: ckeditor, javascript, wysiwyg-редактор, Веб-разработка, метки: ckeditor, javascript, wysiwyg-редакторCKEditor — это WYSIWYG редактор HTML-кода для браузеров. Всякий раз, сталкиваясь с его документацией или же с его исходным кодом, с исходным кодом его плагинов я терялся. И это не мудрено, ведь CKEditor это очень большой продукт, имеющий довольно сложную инфраструктуру. Но, зачастую, стандартных возможностей не хватает и требуется добавить свою. В этой статье я хотел бы остановиться на плагине, который позволяет встраивать и оперировать в редакторе Yandex-картами.
Вот так это будет выглядеть по окончанию редактирования:
А вот так в режиме редактирования:
Читать полностью »