При создании сайтов часто возникает задача создания админки для редактирования контента. Задача, в общем, тривиальная, но сделать удобную админку не так-то просто.

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

Всем известный jQuery-плагин tablesorter с tablesorterPager-ом и менее известный, но гораздо более функциональный DataTables хороши, но обладают некоторыми недостатками. Главный из них — сложность динамического добавления новых строк в таблицу (после добавления строки в таблицу, новая строка потеряется при следующем вызове сортировки). tablesorter вообще не даёт средств для добавления строки в свой кэш, DataTables предоставляет широкое и функциональное API для управления внутренним представлением таблицы, но это API довольно многословно и не очень гибко.

Хочу предоставить общественности реализацию админки на относительно новой javascript-фреймворке AngularJS. Будет создана страничка для редактирования списка вопросов, разбитых по категориям и отвечающим. В статье нет сравнения с другими подобными фреймворками, но нет и простого повторения официальной документации, я постараюсь поделиться своим опытом в использовании фреймворка и расскажу о нескольких интересных приёмах работы с ним.

Сразу приведу, что получится в итоге (кликабельно):

Давайте представим себе типичный, набирающий популярность стартап, использующий, например, PHP или Python. Сначала все находится на одном сервере — PHP (или Python), Apache, MySQL. Затем вы выносите MySQL на отдельный сервер, устанавливаете nginx для раздачи контента, возможно, добавляете memcached для кеширования и еще несколько серверов приложений…

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

Чтобы получить ответы на эти вопросы, в Badoo был разработан сервиc мониторинга и статистики в реальном времени — Pinba. В данной статье мы расскажем о нашем опыте использования его для мониторинга и профайлинга нашей системы.

Почти месяц назад вышла вторая версия прекрасного и замечательного jQuery Notification plugin для вывода самых разнообразных уведомлений на сайте, странно что Хабр вообще обошёл его стороной, исправлю ситуацию.

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

В наши дни сложные Javascript-приложения можно увидеть повсюду. Со временем они становятся все сложнее и уже неприемлемо просто писать цепочку callback-функций на jQuery. Javascript-программисты постепенно узнают то, что обычные разработчики знали уже несколько десятилетий. Организация и эффективность может сыграть важную роль при разработке. Таким образом, такие MVC-фреймворки на Javascript, как Backbone, Knockout и Ember появились для того, чтобы заполнить пустоту между начинающими, средними и опытными разработчиками. Они предлагают разные возможности и функционал, который подойдет разным людям, в зависимости от их потребностей.

Вместо предисловия

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

Обзор 3D в Web

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

Один французский «исследователь безопасности» этим летом опубликовал невиданно много найденных им уязвимостей типа arbitrary file upload в разных «написанных на коленке», но популярных CMS и плагинах к ним. Удивительно, как беспечны бывают создатели и администраторы небольших форумов, блогов и интернет-магазинчиков. Как правило, в каталоге, куда загружаются аватары, резюме, смайлики и прочие ресурсы, которые пользователь может загружать на сайт — разрешено выполнение кода PHP; а значит, загрузка PHP-скрипта под видом картинки позволит злоумышленнику выполнять на сервере произвольный код.

Выполнение кода с правами apache — это, конечно, не полный контроль над сервером, но не стоит недооценивать открывающиеся злоумышленнику возможности: он получает полный доступ ко всем скриптам и конфигурационным файлам сайта и через них — к используемым БД; он может рассылать от вашего имени спам, захостить у вас какой-нибудь незаконный контент, тем подставив вас под абузы; может, найдя параметры привязки к платёжной системе, отрефандить все заказы и оставить вас без дохода за весь последний месяц. Обидно, правда?

Привет, Хабр!

Сегодня мы расскажем вам как использовать на веб-сайтах карты Nokia с помощью Nokia Maps JS API. Сервис «Карты Nokia» имеет не только очень простой в применении API, но ещё и отличную детализацию карт с огромной базой географических объектов, которая постоянно пополняется.

Больше информации про технологические возможности «Карт Nokia» вы можете узнать из выступления Сергея Руденко с Nokia Developer Days 2012 (ссылка), а мы приступим к описанию некоторых возможностей использования именно Nokia Maps JS API на примере интеграции карт и использовании возможностей геолокации и прокладывания маршрута. Выглядеть это будет примерно так:

В сети гуляет довольно много решений для эмуляции многопоточности в php. Чаще всего они основываются на форках, но есть и вариации на тему с использованием curl, proc_open и т.п.

Все встреченные варианты по тем или иным причинам меня не устроили и пришлось написать свое решение.
Набор требований у меня был следующий:

• Использование форков;
• Синхронный режим с сохранением интерфейса при отсутствии необходимых расширений;
• Многократное использование дочерних процессов;
• Полноценный обмен данными между процессами. Т.е. запуск с аргументами и получение результата по завершении;
• Возможность обмена событиями между дочерним процессом-«потоком» и основным процессом во время работы;
• Работа с пулом потоков с сохранением многократного использования, передачи аргументов и получения результатов;
• Обработка ошибок выполнения;
• Таймауты на выполнение работы, ожидание работы потоком, инициализацию;
• Максимум производительности;

В результате получилась библиотека AzaThread (старое название — CThread).

Параллельные программы на PHP

Раньше заголовок темы был «Написание многопоточных программ на PHP». В PHP есть ровно один «нормальный» способ писать приложения, которые используют несколько ядер/процессоров — это fork(). О прикладном использовании системного вызова fork() в языке PHP и расширения pcntl я и расскажу. В качестве примера мы напишем достаточно быструю параллельную реализацию grep (со скоростью работы, аналогичной find . -type f -print0 | xargs -0 -P $NUM_PROCS grep $EXPR).

Fluid UI: очень удобное HTML5-приложение для создания прототипов мобильных интерфейсов в браузере (Chrome или Safari). Буквально за пару минут можно сделать приличный набросок.



Поддерживает жесты, действия на прикосновения, драг-н-дроп, переходы между страницами, дублирование шаблона на несколько страниц, библиотеки iPhone и Android, загрузку пользовательских изображений и скриншотов. Ссылку на созданный дизайн можно быстро отправить коллеге или протестировать на мобильном устройстве. Можно экспортировать в PDF, HTML или графический формат.

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

А пока, обо всем по порядку…


Катя Клубникина изображает счастливого туриста с первым макетом устройства на шее.

Часть первая. Предыстория.

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

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

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

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

Ниже показан результат обработки реального размытого изображения (не с синтетическим размытием). Исходное изображение было получено камерой Canon 500D с объективом EF 85mm/1.8. Фокусировка была выставлена вручную, чтобы получить размытие. Как видно, текст совершенно не читается, лишь угадывается диалоговое окно Windows 7.



И вот результат обработки:



Практически весь текст читается достаточно хорошо, хотя и появились некоторые характерные искажения.

Под катом подробное описание проблем деконволюции, способов их решения, а также множество примеров и сравнений. Осторожно, много картинок!

Как характеризуют сервис сами разработчики, Moqups — это «изящное HTML5-приложение для создания макетов, концептов пользовательского интерфейса, прототипов, в зависимости от того, как вы сами это называете».



Для Chrome есть отдельное приложение.

На данный момент доступно более 60 шаблонов элементов, экспорт в PDF и PNG, клавиатурные шорткаты, группировка объектов, привязка к сетке и проч.

Проект находится в стадии активной разработки и открыт для критики, помощи и предложений.

Ребята из Development Seed запустили MapBox Static API. Теперь вы можете использовать красивые статичные карты MapBox в своём приложении без использования JavaScript и сторонних библиотек. Перед вами перевод официального анонса.

Неужели у кого-то было время этим запариться!

css3ps.com

Работает как вебсервис, от того время ожидания результата работы 30 секунд.

1) Качаем плагин под нужную версию фотошопа, открываем через windows->extensions->css3ps;
2) рисуем шейп, накладываем стили, отправляем на сервер через расширение;
3) ждем 30 секунд, смотрим на результат.

Естественно, сервис разбирает не все, что вы натворили в стилях.
Обратите внимание, что шейп нужно рисовать аккуратно.



Все работает) Фантастика.

Привет!

Расскажу об одной небольшой (~30kb) JS библиотеке для удобной работы с Google Maps API под названием gmaps.js.
Раз уж библиотека создана для ускорения процесса веб-разработки, то и я вас задерживать не буду. Как можно понять из названия, она делает не что иное, как упрощает взаимодействие с API Google Maps. Многие из вас работали с API и, вероятно, каждый раз вам приходилось попотеть, чтобы порыться в документации и реализовать, например, свое собственное описание метки на карте. Или подписаться на событие взаимодействия с картой…

Перелистывая хаб «Разработка под Java ME» наткнулся на тему Spb Transport J2ME, где автор использует картографические сервисы, и одним из TODO является поддержка GPS (для улучшения юзабилити). Проблема в том что телефонов с встроенным GPS-приемником относительно небольшое количество. Надеюсь данным постом помогу не только автору той темы, но и кому то еще, сам в свое время набил немало шишек. Итак, приступим.

Чтобы определить местоположение пользователя (телефона, как вам угодно), можно использовать несколько способов:
— по GPS. Способ наиболее точный. Из недостатков: относительно долгий старт, потребляет много энергии, не так уж много аппаратов с встроенным приемником.
— по вышкам оператора. Средний по точности. Энергии кушает немного. Из минусов: не на всех телефонах доступны данные.
— по IP. Наименее точный. Собственно это самый большой минус.
— по CB-сообщениям оператора

В начале года я публиковал статью Определение страны по IP: тестируем скорость алгоритмов, в которой упоминался мой «велосипед» отличающийся высокой скоростью работы. Одним из популярных вопросов стала возможность определения города по IP.

И вот несколько месяцев спустя, проект начинавшийся, как «for fun» перерос в самостоятельный проект.
Открыт отдельный сайт посвященный проекту Sypex Geo, на котором можно скачать свежие версии API и баз данных, а также ознакомиться с документацией.

Для желающих скорее протестировать правильность определения города по IP — вот ссылка на демо-страницу. А под хабракатом, я опишу некоторые технические подробности и приведу результаты небольшого тестирования.

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