Хабрахабр: Web-разработка / Блог / Захабренные Голосов: 1 Адрес блога: http://habrahabr.ru/blog/webdev/ Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL

[Из песочницы] Как сократить количество написаного кода при ajax запросах? И ассинхронная отправка файлов

2013-04-18 07:09:37 (читать в оригинале)

Итак ajax запросы, всё просто, все привыкли их уже писать, но всё же как можно сократить количество написанного кода.
jquery.async.js

Сразу пример:

<form action="/" jasync>
	<input type="submit" />
</form>

форма отправляется ассинхронно

<input type="file" href="/" multiple jasync />
<div type="file" href="/" multiple jasync>Выберите файл</div>
<div href="/" jasync dropfile>Перетащите файлы и они отправятся на сервер</div>

файлы загружаюся асинхронно

<a href="/" jasync data="year=2013&month=5" class="send">отправить данные</a>

данные отправляется ассинхронно

И тут у многих наверное возник вопрос, как обрабатывать полученные данные, если форма не валидна зачем её отправлять, а если я хочу ещё отправить дополнительные параметры?
Читать дальше →

---

Foreman — менеджер процессов для ваших веб-приложений

2013-04-17 18:29:26 (читать в оригинале)

Все более популярной становится модель разработки веб-приложений, основанная на идее масштабирования с помощью процессов. Современное приложение представляет из себя набор выполняющихся процессов, не хранящих состояния, причем каждый изолирован друг от друга. Каждому такому процессу назначается свой локальный порт, что позволяет прозрачно экспортировать ваши сервисы для последующего их потребления кем-нибудь еще, возможно даже, что друг другом (например, один обслуживает http-запросы от пользователей, принимая url-адреса видео, а другой медленно, но верно, загружает их и конвертирует). Как правило, в большинстве случаев http-сервисы просто ставят за reverse proxy в nginx, но возможны варианты.

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

web:    mono ./awesome-app --port $PORT
api:    node ./api.js -p $PORT
worker: bundle exec rake resque:work QUEUE=*
habr:   bundle exec ./bin/thin -a localhost -p $PORT

Как видите, все довольно просто, в каждой строчке файла содержится по названию типа процесса и строка для его запуска. Так зачем оно нужно и что же там есть такого вкусного?

---

Live Video для сайта

2013-04-17 15:56:25 (читать в оригинале)

Последнее время мне и моим коллегам часто задают вопрос «Как реализовать вещание живого видео с камеры на веб сайте ?». Многие, задающие этот вопрос, заблуждаются, считая, что это можно сделать только с помощью IP-камер. Нет, такое делается и на базе недорогих USB-камер. Спецы, которые знают «как», часто имеют другое заблуждение – зачем платить за дорогую IP-камеру, когда все можно реализовать на USB-камерах за 20-30$? А допустим камеру нужно установить на улице, в другом конце здания, длинной 70м. Много ли вы знаете USB-камер с корпусом стандарта IP66 и рабочей температурой -20С? А какой длины может быть USB-кабель? Согласно Wiki максимальная длина USB-кабеля (в экране) не должна превышать 5м. А как подключить камеру на расстоянии 70м (и это по прямой, без учета изгибов кабелевода)? Можно через каждые 5м ставить usb-hub с питанием. А сколько в деньгах потянет стоимость usb-удлинителей и активных usb-hub’ов с организацией питания для них? Согласитесь, это окупит даже не одну IP-камеру. Кто-то скажет «Я поставлю, в непосредственной близости от камеры, комп в ITX исполнении и нет проблем». Да, это вариант, но в итоге стоимость «комп + USB-камера» выйдет, в лучшем случае, равной стоимости IP-камеры. А обслуживание, а бесперебойное питание? А если камеры разнесены на сотни метров, а то и на километры, например пляжи Крыма? IP-камера однозначно выигрывает!
Читать дальше →

---

Rear — полноценный backend интерфейс для ActiveRecord, DataMapper и не только

2013-04-17 14:30:46 (читать в оригинале)

Очень часто, почти всегда, хочется сократить до минимума время/усилия на создание «админки».

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

Обычно на рутинный процесс создания этого интерфейса уходит непростительно много времени/ресурсов.
Кроме случая когда используются уже готовые наработки.
Именно к таким наработкам относится и Rear.

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

А для нетерпеливых — смотрим демо

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

---

Автопрефиксер — окончательное решение проблемы префиксов в CSS

2013-04-16 19:35:06 (читать в оригинале)

Автопрефиксер — утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3. Она берёт с Can I Use последние данные о префиксах и популярности браузеров, читает ваш файл стилей, находит свойства и значения, которым действительно нужны префиксы и добавляет их.

Вы просто пишите обычный CSS:

a {
    transition: transform 1s
}

Автопрефиксер сам заменит нужные (и только нужные) свойства и значения (обратите внимание на -webkit-transform):

a {
  -webkit-transition: -webkit-transform 1s;
  -ms-transition: -ms-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
  transition: transform 1s
}

Эта утилита работает во время выкладки сайта на сервера (и на машине программиста во время разработки), так что не заметна для клиентов и не требует какой-то поддержки от браузеров.

Проблема

К сожалению текущие инструменты плохо решают задачу:

• Писать вереницы свойств руками — очевидно плохое решение. Такой код невозможно читать, легко забыть поправить остальные свойства при редактировании.
• В Sass и LESS вам нужно самому следить за актуальностью префиксов и копировать примеси из проекта в проект. К тому же примеси могут решить проблему только у свойств, а не у значений (например, calc()).
• Compass или Bourbon уже лучше, там список примесей хранится централизовано и его легче держать актуальным (но практика показывает, что обычно в примеси добавляют все префиксы не следя за актуальностью). Проблема значений всё так же не решена.
• Самая главная проблема Sass и LESS, что вам всё равно нужно постоянно думать «из CSS 3 это свойство или нет?» — и в зависимости от этого использовать примесь или нет. Эту проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
• Есть ещё скрипты добавления префиксов прямо в браузере, например Prefix Free, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

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