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

Еще один шаг к идеальным закладкам

2014-02-07 11:21:51 (читать в оригинале)


Привет всем! На хабре я уже более 5 лет и успел заметить множество стартапов которые были анонсированы здесь и успели дорасти до серьезных коммерческих проектов.
Мне всегда хотелось повторить их путь и следствием этого стал запуск Raindrop.io и публикации анонса.



Ваш последовавший отклик и интерес очень вдохновили меня, а замечания и идеи определили дальнейший путь развития проекта.
О том каким он стал и чего добился я хочу рассказать в этом посте.
Читать дальше →

---

Repeatable, еще один способ рендерить списки

2014-02-06 09:17:54 (читать в оригинале)


(из серии «малая механизация web страниц»)

Что такое Repeatable?

Repeatable это способ вывода (популяции) всякого рода списков, таблиц и пр. по массивам данных. Данный механизм
использует шаблон описанный в самом коде разметки (в отличие от, скажем, {{mustache}} templates).

Поддерживаются выражения и условное включение. И всё это в 90 строках кода.

Repeatable функиональность есть в каждом «взрослом» web framework'е. Но если вы не хотите по тем или иным причинам завязываться с монстрами то вот вам механизм который, что называется, есть не просит.

Пример

Скажем есть такие данные:

var data = [
       { name: "Olga", age: 20, email: "aaa@example.com" },
       { name: "Peter", age: 30, email: "bbb@example.com" },
       { name: "Ivan", age: 15, email: "ccc@example.com" },
    ];

И нам нужно из вывести как-то так:

<ul id="people">
    <li><a href="mailto:{{this.email}}">{{this.name}}</a> <b if="this.age > 18">18+</b> </li> 
    <li>No data available</li>
</ul>

Первый <li> собственно и есть шаблон записи. Для каждой записи во входном наборе этот элемент будет повторен с подстановками и гуляшшыми девами. Второй <li> будет выведен если Repetable «накормить» пустым массивом.

Если у нас это все описано то собственно популяция нашего списка это одна строка:

var list = $("ul#people").repeatable(); // declaring the repeatable
    list.value = data; // that's data population, sic!

Вот живой пример.
Читать дальше →

---

[Перевод] 10+ полезных jQuery сниппетов на каждый день

2014-02-05 19:13:27 (читать в оригинале)




Спустя годы библиотека jQuery стала неотъемлемой частью в работе каждого web-разработчика. Ведь она простая в использовании, быстрая и имеет очень широкие возможности. В этой статье я собрал список из более чем десяти сниппетов, которые вы можете свободно брать для использования. Их очень легко адаптировать под нужды ваших собственных проектов.
Читать дальше →

---

[Из песочницы] Опыт внедрения кэширования в небольшой проект с сильной социальной составляющей

2014-02-05 11:59:05 (читать в оригинале)


Хочу поделиться опытом внедрения кэширования при помощи memcached на своем сайте. Текст будет полезен новичкам в веб-разработке, которые задаются вопросом «как же применять на практике те 100500 статей о кэшировании, которые легко находятся в поисковиках». На истину не претендую, просто рассказываю, как получилось у меня.

Исходные данные:
Сайт крутится на одном выделенном сервере, но из-за вероятности в будущем еще подрасти, для кэширования выбран memcached;
Суточная посещаемость: ~23 000 уникальных посетителей и ~300 000 просмотров страниц;
80% посетителей — авторизованные пользователи;
Основной контент: текст (книги, которые авторы пишут и публикуют на сайте по главам, наподобие самиздата).
Сервисы: персонализированные новости, чтение текстов, разбитых на главы, комментарии, профили, блоги, рейтинги, подписка, метки, закладки, личные сообщения, счетчики, почтовые уведомления…
Пользовательская активность: более 10 000 действий, приводящих к изменению контента, в сутки.

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

---

Keypress 2.0.0

2014-02-05 10:22:31 (читать в оригинале)


Семнадцать дней назад (19 января 2014 года) вышла новая версия (2.0.0) джаваскриптовой библиотеки Keypress, предназначенной для удобного программирования реакций браузера на события, поступающие от нажатий (и от отпусканий) клавиш на клавиатуре.

Опубликованный на Гитхабе список изменений позволяет уверенно огласить вот что: важнейшим из достоинств новой версии стала возможность ловить события не только во всём окне в целом, но и для одного или нескольких отдельных элементов DOM. Теперь и при программировании различающихся реакций у различных элементов на веб-страницах мы можем с удобством прибегнуть к библиотеке Keypress вместо тех её более ранних и более популярных аналогов (например, jQuery.Hotkeys), которые уступают Keypress по богатству возможностей.



Возможности же эти вот каковы:

• Реакция на нажатие и отпускание одной или нескольких клавиш. Поддерживаются синонимы кросс-платформенные (например, "meta" означает "cmd" или "ctrl" в зависимости от системы) и шифтовые (например, "@" означает сочетание Shift и двойки).
   
• Программируемые сочетания клавиш могут включать в себя не только классические модификаторы ("meta", "alt", "option", "ctrl", "shift", "cmd"), но и какие угодно другие клавиши. Например, программируя WASD-управление пошаговою бродилкою, нетрудно достигнуть того, чтобы нажатие и отпускание клавиши «W» означало шаг вперёд, но «W» и «D» совместно — шаг по диагонали вперёд+направо.
   
• Возможно указание сочетаний клавиш, состоящих не из одновременных, а из последовательных нажатий клавиш. Это такие сочетания, как код Конами, например.
   
• Специальные «считающие» комбинации позволяют программировать такие ситуации, в которых нажатие основной клавиши обнуляет некоторый счётчик, а каждое нажатие дополнительной клавиши (при удержании основной) увеличивает этот счётчик на единицу. David Mauro (автор Keypress) приводит в пример такое сочетание Tab+Space, при котором нажатие Tab тотчас же открывает первую вкладку в некотором наборе вкладок, а каждое нажатие на пробел (при удержании Tab) перебрасывает на следующую вкладку — на вторую, на третью, на четвёртую…

Для каждой одиночной клавиши (или для комбинации) возможны дополнительные настройки. Эти настройки позволяют при необходимости сделать вот что:

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