Search
Write a publication
Pull to refresh
180
0
spmbt @spmbt

Пользователь

Send message

Простая минималистская реализация сложных JavaScript приложений

Reading time12 min
Views8.8K
Я хочу описать простой минималистский подход к разработке сложных JavaScript приложений. Из внешних библиотек будут использоваться только jQuery и мой js-шаблонизатор, причём из jQuery используются только $.ready(), $.ajax() и $.proxy() — т.е. суть не в библиотеках (их тривиально заменить на предпочитаемые вами), а в самом подходе.

В основе подхода лежат две идеи:
  1. JavaScript виджеты — небольшие модули, каждый из которых «владеет» определённой частью веб-странички (т.е. всё управление этой частью странички происходит исключительно через методы этого модуля, а не через прямую модификацию DOM — инкапсуляция). Виджет отвечает исключительно за функциональность, но не за внешний вид; поэтому прямая модификация части DOM, которым «владеет» виджет, снаружи виджета допускается — но только для чисто дизайнерских задач (для архитектуры и общей сложности приложения нет принципиальной разницы между коррекцией внешнего вида через CSS или jQuery).
  2. Глобальный диспетчер событий. Взаимодействие между виджетами осуществляется путём посылки сообщений глобальному диспетчеру (слабая связанность, паттерн Mediator/Посредник), а уже он принимает решение что с этим сообщением делать — создать/удалить виджеты, дёрнуть методы других виджетов, выполнить дизайнерский код, etc. В отличие от динамического подхода к обработке событий (когда обработчики конкретного события добавляются/удаляются в процессе работы) статический диспетчер сильно упрощает понимание и отладку кода. Безусловно, есть задачи, для которых нужны именно динамические обработчики событий, но в большинстве случаев это избыточное усложнение, поэтому всё, что можно, делается статическими обработчиками.

Читать дальше →

Параллельная загрузка JavaScript и CSS без блокирования парсинга страницы

Reading time5 min
Views67K
Известно, что следуя идеям старой школы, а именно, добавляя ссылки на JS и CSS в страницы, может обернуться большим временем загрузки страницы. Браузер отображает страницу по мере скачивания, но останавливается, если натыкается на тег script со ссылкой, до того момента, пока скрипт не будет загружен и выполнен. Сайты стали использовать всё большее количество скриптов, начальное отображение страницы занимает всё больше времени, к примеру, на этой странице, которую вы читаете, 13 скриптов, 7 из которых находятся в head'е. Ко всему прочему, некоторые браузеры по-прежнему придерживаются ограничений на одновременное количество загрузок с одного хоста.

Сразу предлагаю принять, что все JS файлы минимизированы, и передаются в сжатом виде.

Существует несколько решений, как то:
— поместить стили и скрипты прямо в страницу;
— установка аттрибутов async/defer тегу script;
— склеить все скрипты в один файл;
— помесить ссылки на скрипты в конец body;
— разместить все файлы на CDN/на разных хостах;
— свой вариант…

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

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

Код StarchartJs раскрыт под лицензией MIT

Reading time1 min
Views1.1K
StarchartJs рисует с помощью canvas карту звёздного неба в стереографической проекции для заданного места и времени. К сожалению, свой проект, в котором я хотел использовать эту библиотеку, я так и не начал. Но в эту библиотеку я вложил много сил, поэтому решил больше не прятать её от чужих глаз, чтобы не пропадала зря. Надеюсь, кто-нибудь найдёт ей применение. :) Я раскрыл код специально к Новому году :)

Демо: www.skyandme.com
Исходный код: bitbucket.org/monoid/starchartjs/overview

Проект использует мою другую библиотеку StarJs: github.com/monoid/starjs.

DocHub.io — удобный справочник HTML, CSS, Javascript

Reading time1 min
Views14K
Интернет наполнен огромным количеством документации для веб-разработчиков. Но, к сожалению, использование большей части документации довольно неудобное. Для примера, возьмем Mozilla Developer Network (MDN). Сайт Mozilla Developer Network предлагает большой объем документации по CSS, JavaScript, HTML, SVG и т.д., но навигация по нему утомительна — нет никакого глобального меню и поиск не столь удобный.

Это привело разработчика Рафаэль Гарсия создать instaCSS — быстрый способ просматривать документацию CSS от MDN. Благодаря хорошей функции поиска и чистому, простому дизайну с хорошим глобальным меню instaCSS стал хитом по мнению читателей Hacker News. В связи с большим спросом, Гарсия перевел проект на более широкий домен DocHub.io и расширил поиск по CSS, HTML, JavaScript и DOM.
Читать дальше →

Хотите знать, что в данный момент читают другие пользователи интернета?

Reading time7 min
Views546
Глаз народаТогда предлагаю попробовать расширение для Google Chrome, которое позволяет исполнить это желание. Называется оно “Глаз народа” и по задумке должно показывать самое интересное из читаемого в данный момент пользователями сети.
Если кратко, то суть его работы в следующем. Расширение отслеживает активность пользователя браузера, протоколирует информацию о том, куда и когда он “ходил” и периодически отсылает данные на сервер. Сервер в режиме реального времени интегрирует полученную информацию, формирует и поддерживает постоянно меняющийся рейтинг популярного контента. Этот рейтинг возвращается всем пользователям расширения в виде короткого списка ссылок. По сути происходит обмен посещенными страницами интернета, позволяющий узнать, что сейчас интересно другим людям.
К достоинствам такого способа делиться посещенными ресурсами можно отнести следующее.
  • Оперативность. Все происходит почти в реальном времени. Посещение вами веб-страницы может отразиться на текущем рейтинге уже через 10-15 минут.
  • Объективность. Оценку привлекательности контента производит система, исключая субъективные желания пользователя.
  • Непринужденность. Пользователю самому не нужно делать ровным счетом никаких специальных действий. Только получать результат.

Есть еще потенциальные достоинства, которые могут появиться в будущем, а также и определенные недостатки, но о них чуть ниже.
А перед тем, как вы попробуете установить расширение или решите, что оно вам не надо, позвольте рассказать немного о том, почему это безопасно, как работает и для чего создавалось на самом деле.
Читать дальше →

Обзор свежих материалов, октябрь-ноябрь 2011

Reading time10 min
Views1.8K
Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-сентябрь 2011. В связи с повышенной конференционной активностью этой осенью вышла пауза с публикациями, но дальше такого наплыва мероприятий не будет.



Читать дальше →

Python на примере демона уведомления о новых коммитах Git

Reading time4 min
Views27K
Работая в команде я люблю быть в курсе активности участников. Поэтому было решено написать демона наблюдающего за поступлением новых коммитов в репозиторий git’а. Так как я работаю в Ubuntu, то уведомление было реализовано встроенным способом — библиотекой libnotify.
Язык — Python!

image

В статье упоминается:
1. Демон на Python;
2. Логирование на Python;
3. Хранение конфигурационных файлов программ на Python;
4. Работа с командами ОС из скриптов Python;
5. Получения списка последних изменений из git’а;
6. Стандартные всплывающие уведомления Ubuntu.
Читать дальше →

Джон Кармак о статическом анализе кода

Reading time4 min
Views14K
«Самой важной вещью, которую я сделал как программист за последние годы — это начал агрессивно применять статический анализ кода. — пишет Джон Кармак в статье, опубликованной на AltDevBlogADay. — Не так важны сотни серьёзных багов, которые удалось предотвратить, сколько смена ментальности и моего отношения к надёжности ПО и качеству кода».

Джон Кармак рассказывает о различных инструментах, которые пытался использовать в течение своей карьеры и о тех выводах, к которым пришёл в итоге.
Читать дальше →

DOM-shim для всех браузеров включая IE < 8

Reading time4 min
Views12K
Доброе время суток уважаемые хабражители.

Многие javascript-программисты сталкивались с не поддерживанием некоторых функций DOM JS API в некоторых браузерах (не будем показывать пальцем). Наверняка, многие знакомы с замечательными библиотеками es5-shim и DOM-shim для решения проблем совместимости между разными браузерами, а DOM-shim к тому же, «подтягивает» браузер до уровня DOM4.

В данной же статье я расскажу, как сделать DOM-shim в IE6 и IE7, чтобы навсегда забыть о существовании этих браузеров.
Читать дальше →

TurnAPI — пиши документацию легко

Reading time2 min
Views1.8K

Знакома ли вам ситуация, когда запуск проекта переносится только из-за того, что не готова документация к API или чему-то подобному? Может быть, вам приходилось тратить месяц на разработку системы ведения документации с пользователями, правами доступа и мощным редактором? Вы сами работаете над документацией и погрязли в этой рутине? Вы ответили «Да» на все вопросы?
мы тоже

Алгоритм определения движения через сравнение двух кадров

Reading time4 min
Views21K
Здравствуйте, хабражители.
Хочу с вами поделиться своими наработками по обработке изображений. В последнее время занимаюсь написанием домашнего сервера под «умный дом» и начал с видеонаблюдения.
Задача оказалась не такой тривиальной. По поводу всего видеонаблюдения я напишу отдельно (если кому-то это интересно), а сейчас хотел бы затронуть тему «Алгоритм определения движения через сравнение двух кадров».
Этот алгоритм необходим для включения (выключения) записи видео с видеокамер.
Читать дальше →

TextMate средствами gedit

Reading time3 min
Views7.1K


Так вышло, что в офисе я работаю за Маком, а вот ноут — «17 MacBook Pro — не самый лучший, на мой взгляд, вариант в разрезе производительность/цена. Anyway, это тема другого разговора. Ноут под Ubuntu.
А теперь вопрос: если кодить на Ruby/RoR — кто ваш лучший ТекстовыйПриятель? Все верно, Textmate — Великий Фетиш и Идол всех программистов на Ruby под Mac. Итак задача была предельно проста — найти инструмент под Linux, максимально приближенный к Textmate по тому объему функционала который я использую в работе.
Читать дальше →

Программатор для ПЛИС

Reading time3 min
Views59K
Хочу рассказать о том, как развивается проект http://marsohod.org.

Цель проекта — популяризация проектирования для ПЛИС.
Тема ПЛИС постепенно набирает популярность — и совершенно заслуженно. Ведь теперь мы фактически получили простую возможность создать свою цифровую микросхему. Вам не потребуется нано-фаб и миллион долларов — все можно просто сделать имея компьютер и микросхему ПЛИС на плате разработчика. Вы знаете, что 90% производителей микросхем в мире не имеют собственных фабрик? Они проектируют и тестируют в ПЛИС, а производство заказывают сторонним производителям.

Когда-то и программирование микроконтроллеров считалось чуть ли не чудом. Теперь можно купить платку Ардуино и научить старшеклассника «мигать светодиодом».

Я хочу показать, что и ПЛИС — это вполне доступная технология.

Плата «Марсоход» — это самый простой и дешевый девелопер кит на микросхеме ПЛИС компании Альтера EPM240T100C5. Проект — опен соурс — схемы платы есть на нашем сайте. Кроме того, опубликованно уже более 50 проектов выполненных на базе нашей платы.

Дальше я расскажу о программаторе для ПЛИС. Считается, что учиться проектированию ПЛИС гораздо дороже, чем учиться микроконтроллерам. Отчасти это мнение связано с тем, что программаторы вендоров ПЛИС довольно дороги.

Теперь есть альтернатива. Вы сможете сделать простой программатор USB сами!
Читать дальше →

Как создать визуальную библиотеку изображений с HTML5 Canvas

Reading time14 min
Views4.6K
Сегодня утром, открыв почту, получил очередную рассылку от Code Project, в которой был описан интересный путь создания галереи изображений при помощи Canvas элемента. Статья показалась достаточно интересной и я решил опубликовать ее перевод
здесь

Игры на CANVAS/WebGL

Reading time1 min
Views12K

Vortal Combat


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

Читать дальше →

Синтез фракталов: IFS и L-системы

Reading time9 min
Views21K

Введение

[1]
Фракталом (лат.«fractus» – дроблёный, сломанный, разбитый) называют сложную геометрическую фигуру, обладающую свойством самоподобия, т.е. составленной из нескольких частей, каждая из которых подобна целой фигуре. В более широком смысле под фракталами понимают множества точек в евклидовом пространстве, имеющие промежуточную (дробную) метрическую размерность (размерность Хаусдорфа).
Размерность Хаусдорфа – естественный способ определить размерность множества в метрическом пространстве. Размерность Хаусдорфа согласуется с нашими обычными представлениями о размерности в тех случаях, когда эти обычные представления есть. Например, в трёхмерном евклидовом пространстве хаусдорфова размерность конечного множества равна нулю, размерность гладкой кривой – единице, размерность гладкой поверхности – двум и размерность множества ненулевого объёма – трём.
Читать дальше →

О регистрации на сайтах

Reading time6 min
Views81K
Мы часто выполняем на многих сайтах действие, которое постоянно эволюционирует и улучшается (а иногда наоборот). Это регистрация. Именно о разных способах и особенностях регистраций на сайтах я бы хотел с вами поговорить. Это не громоздкое исследование, а просто небольшие и (надеюсь) полезные выдержки из моего опыта дизайнера интерфейсов.


Пример удачной регистрации на сайте Tumblr.

Начну с определения самого понятия «регистрация», с ним всё не так просто, как может казаться. В результате полевых исследований нашей компании оказалось, что разные люди (клиенты, посетители и мы сами) нередко воспринимают это слово по-разному. Для того, чтобы избежать непонимания, опишу то, как я сам вижу регистрацию.
Читать дальше →

Как получился Indie-Tracker

Reading time4 min
Views834
Я разрабатываю онлайн-сервис таск-трекинга для небольших команд разработчиков. Он будет очень простым и наглядным, с современным графическим интерфейсом. Чтобы начать им пользоваться, достаточно пройти по ссылке внизу поста и зарегистрироваться.
Сейчас я расскажу, почему во время разработки программы я несколько раз изменял её концепцию. Какие ошибки я допустил и к чему пришел в конце.
Читать дальше →

Знакомство с Gem. Часть первая

Reading time2 min
Views22K
Доброго времени суток!

Введение


Каждый рубист, да и вообще программист, рано или поздно начинает задумываться о написании своих библиотек. Ему начинает надоедать перетаскивание одних и тех же кусков кода в другие проекты. В Ruby лекарством от данного заболевания являются gem'ы. Итак, давайте познакомимся с ним поближе.
Добро пожаловать к нам под хабракат

Channel.me → совместный просмотр сайтов

Reading time2 min
Views5.3K
Внезапно, у меня возникла задача выбрать товары в интернет-магазине вместе с сестрой. Казалось бы всё просто, только вот сестра находится на 800 км вдали от меня.

Кидать ссылки друг другу или шарить один из рабочих столов я посчитал неэффективным. Но нашёлся революционный сервис, который похож на Google Docs, но только для совместного посещения сайтов — Channel.me.



Ближе к делу: демо-канал для хабрапользователей | демо-канал №2
Комментарий от создателей по поводу хабра-эффекта в демо-канале:
The demo-channel is a bit crowded… Looks more like a stress test :-)
Our virtual server is running at 160% and with 20Mb/s traffic… cool!

Далее чуть-чуть текста, скриншот и ссылки на расширения

Information

Rating
Does not participate
Location
Россия
Registered
Activity