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



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

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

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

Mousetrap — маленькая библиотека (1.4 KB) для обработки клавиатурных нажатий.

// single keys
Mousetrap.bind('4', function() { highlight(2); });
Mousetrap.bind("$", function() { highlight(3); }, 'keydown');
Mousetrap.bind('x', function() { highlight(4); }, 'keyup');

// combinations
Mousetrap.bind('command+shift+K', function() { highlight(7); });
Mousetrap.bind(['command+k', 'ctrl+k'], function() { highlight(8); });

// gmail style sequences
Mousetrap.bind('g i', function() { highlight(11); });
Mousetrap.bind('* a', function() { highlight(12)});

// konami code!
Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([15, 16, 17]);
});

Как видно, поддерживаются как одиночные нажатия, так и сочетания и клавиатурные комбо.

Работает в Internet Explorer 6+, Safari, Firefox, Chrome (с включенным Vimium не работает).

Пробуйте — craig.is/killing/mice

Я знаю что в сети много подобных скриптов на разный вкус и цвет. Но мне захотелось написать свой с нуля и первое что я сделал полез в Гугл искать алгоритм создания(сolor picker). В итоге я был разочарован так как не нашел нечего кроме готовых скриптов, наверно поэтому после того как я разобрался и написал свой color picker, я решил поделится своим опытом в его написание.

Так как я пишу на чистом js без библиотек (не считая той которую я пишу сам:)) в данном посте будет только хардкор чистый javascript.
Что нужно знать что бы написать cp (сокращенно color picker):

• Основы Drag'n'Drop
• Немного разбираться в Canvas (на нем будет рисоваться шкала оттенков Hue)

Неожиданно поступила задача разобраться почему определенный сайт не работает столь быстро сколь хочется. В основе его CakePHP, в связке с Apache и MySQL. В статье описание процесса поиска узких мест и приведение в порядок на столько, на сколько это возможно.

Название сайта светить не буду — думаю, программисты сами узнают. Скажу лишь, что это приложение для социальной сети нагрузкой 70-150 тысяч посетителей в обычное время. Все усложняется тем, что периодически производится рекламная рассылка, которая привлекает около 200-300 тысяч посетителей за пару часов.

Итак, под катом описание всей борьбы на протяжении 4 дней.

Привет Хабраюзер!

Я являюсь WEB разработчиком, программирую на PHP. Основным моим направлением является разработка сайтов с использованием CMS/CMF Drupal. Я работаю в небольшой IT организации, проекты бывают всякие (большие, маленькие, новые, прибывшие на допил и т.д.). В последнее время (в моём случае это уже год) я сталкиваюсь с такими проектами на которых работали одни, потом другие, третьи… И в осномном на таких проектах заказчик просит поправить как правило что-то по мелочи (там элемент в форму вставить, там-то класс дополнительный нужен и т.д.) Но поскольку проеты большие иногда случается такое что даже толком не всегда получается определить «а что же тут работает? какой модуль?». С года 2 назад я узнал про drush, весьма удобен, полезен, но самое главное не тратиться время на рендеринг страниц (его уходит очень много для построения страницы). И тут я понял что было бы хорошо как-то узнавать такую мелочную информацию через консоль, получилось довольно быстро и удобно как мне кажется.

Недавно мы настраивали SMTP-сервер для нашего проекта. Вопрос стоял так: что нужно сделать, чтобы письма, отправленные нашим пользователям, не попадали в папку со спамом или попадали туда как можно реже?

Было найдено несколько интересных и полезных статей на эту тему (ссылки в конце статьи), на основе которых и было всё сделано в итоге. Но получив сегодня утром очередную порцию рассылки от достаточно известных русскоязычных ресурсов и увидев, что они пренебрегают описанными правилами, я решил кратко и в одном месте собрать все действия, которых достаточно для решения проблемы. Надеюсь, что после этого количество сайтов, отправляющих почту как надо, возрастет.

Приведенные советы актуальны только если вы используете свой собственный SMTP-сервер. При использовании, например, SMTP сервера Google всё уже сделано за нас. Как правило. В любом случае рекомендую проверить (см. подразделы Как проверить?).

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

Большинство реляционных баз данных, за исключением MS Access, состоят из двух отдельных компонентов: «back-end», где хранятся данные и «front-end» — пользовательский интерфейс для взаимодействия с данными. Этот тип конструкции достаточно умный, так как он распараллеливает двухуровневую модель программирования, которая отделяет слой данных от пользовательского интерфейса и позволяет сконцентрировать рынок ПО непосредственно на улучшении своих продуктов. Эта модель открывает двери для третьих сторон, которые создают свои приложения для взаимодействия с различными базами данных.

В Интернете каждый может найти много продуктов для разработки и администрирования баз данных MySQL. Мы решили собрать 10 самых популярных инструментов в одной статье, чтобы вы смогли сэкономить свое время.

UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design

1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

Приветствую всех.

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

В этом топике вы узнаете, как грамотно настроить, сервер исходящей почты и в частности функцию mail() в PHP. Сам являюсь жутким педантом. Люблю, что бы везде было все на своих местах, не терплю халтуры. Увидев один раз полную чушь в заголовках письма со своего сервера я разобрался с этим кардинально и безоговорочно. Под грамотной настройкой я подразумеваю такую, которая удовлетворяет потребности спам фильтров крупных почтовых систем, и просто выглядело красиво и осмысленно.

Как известно протокол SMTP не подразумевает никаких средств защиты от спама и аутентификации пользователя, поэтому крупными и не очень компаниями были придуманы «фиксы» безопасности протокола.
Если вы устанавливаете выделенный сервер с доменом размещенным на нем, очень рекомендуется выполнить данные настройки, что бы все было как надо.

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

Название заголовка выбрал именно такое, так как вначале своего пути я искал что-то вроде этого. Настраивать будем postfix, php, dns (ptr, spf), и другое.

Эта статья будет интересная людям, настраивающим выделеные сервера, но не менее интересна для обычных программистов.
К слову данную инструкцию я использую для своих проектов. Системы автоматизированного получения приглашений и получения виз в страны Шенгена: https://goingrus.com/ru, весь софт крутится на виртуальной машине.

Подробности под катом

Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.

Небольшая демонстрация возможностей CSS3 на примере. Данный пример затрагивает свойства border-radius, box-shadow и linear-gradient.

head

Прошу расценивать предлагаемый код не в качестве готового решения, которое требуется использовать в своем проекте, а лишь как демонстрация. Хотя, при должной доработке, вполне возможно подойдет для какой-нибудь задачи.
Для тех, кому лень читать весь текст статьи я сразу прилагаю ссылку на рабочий пример. Солнце можно двигать по экрану, при его приближении к горизонту создается имитация заката. После полного ухода солнца за линию горизонта на небе выплывают звезды.
Пример тестировался в последних версиях современных браузеров — IE9, Chrome 16, Opera 11.60 и Firefox 8. Как ни странно, но шустрее всего на моей машине пример работал в браузере IE9, чуть похуже обстояли дела в браузере Firefox. В Chrome и Opera заметны некоторые фризы при движении.

Работать дизайнером очень интересно. Это творческая работа. И как любому творческому человеку, дизайнеру нужна муза или вдохновение.

Я уверен, что у каждого дизайнера есть набор сайтов, на которые они периодически заходят для того что бы черпать это самое вдохновение. У меня так же есть такой список. И я хочу им с вами поделиться.

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).

Прочитав недавний топик Ubuntu Unity — светлое будущее против консерватизма автора Kottenator мне понравилось обсуждение данной статьи. Все пользователи, как у нас в России принято, тянут одеяло на себя. Ну, что же, давайте я расскажу как я довел до ума свою Ubuntu.

Однажды на новогодней распродаже (2007 год наступал) купил себе нетбук Acer Aspire One ZG5. Внутри у него мало чего интересного, но как записная книжка — вещь удобная. Поюзав некоторое время его заводскую ОС Linpus, я понял что нужно что-то менять. Выбор пал на убунту.

Установка убунты была довольно легкой и не принужденной. Но дальше «да, начался гемморой по настройке». Настройка была долгой и вызывала много вопросов, споров, недоразумений и так далее. Недавно я взял в руки коробку с новоиспеченным дистрибутивом Ubuntu 10.04. И для меня это стало восхитительно. По сравнению с предыдущими дистрибутивами многие действия просто перестали быть необходимыми. Но разговор не об этом…

Иногда возникают такие ситуации, когда нужно прочитать QR код, а смартфона под рукой нет. Что же делать? В голову приходит лишь попробовать прочитать вручную. Если кто-нибудь сталкивался с такими ситуациями или кому просто интересно как же читается QR код машинами, то данная статья поможет вам разобраться в этой проблеме.

В статье рассмотрены базовые особенности QR кодов и методика дешифрирования информации без использования вычислительных машин.

Иллюстраций: 14, символов: 8 510.

В очередном проекте я столкнулся с необходимостью активно работать с кросс доменными запросами на ajax, тема, как я вижу на хабре особо не поднималась и не освещалась, вот и решил поделиться с читателями свои опытом.

Я думаю, что у каждого, кто использует Drupal в своей работе, периодически возникают задачи переноса сайтов, работающих на других CMS, или просто задачи импорта данных на платформу Drupal.

Такие задачи периодически возникают и у меня, но раньше я весь импорт делал написанием скрипта на php, который просто записывает нужную информацию прямо в БД Drupal. Я, конечно же, знал, что есть механизмы, которые позволяют добавлять данные, используя API Drupal, но как-то разбираться с ними было лень, да и скрипт для записи сразу в БД пишется довольно быстро.

Когда сайт на Drupal достаточно простой и на нем не используются какие-то сложные модули (и их мало), то такой принцип импорта (прямая запись в БД) себя оправдывает. Но что делать, когда нужно перенести данные на очень сложный сайт со множеством модулей и их сложной настройкой?

В этом случае очень сильно поможет знание API Drupal'a, т.к. всю работу по правильному апдейту всех взаимосвязанных таблиц с учетом всех хитрых настроек за нас сделает Drupal.

Как оказалось, использование API Drupal'a не то чтобы просто, а очень просто. Про это и будет сегодняшняя статья.

По состоянию на 1 мая 2011 года и по данным на странице camp11.drupal.ua/ru/program я получил очень интересную информацию о том, чего желают люди, которые будут на Drupal-кемпе в Киеве 3-4 июня 2011 года.

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

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

Кто-то обеспечивает малой кровью graceful degradation, ну а кто-то радикально прощается со старыми браузерами, чуть ли не нарочно приправляя сайт современными технологиями и показывая в браузерах-старичках заглушку с предложением срочно обновиться.

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

Самый надёжный способ — поднять несколько виртуальных машин, где всё можно будет досконально протестировать (в том числе потаскать границу окна, поскроллить и уж тем более посмотреть, как работает JS). Но ведь часто требуется просто взглянуть на сайт и понять, всё ли с ним в порядке в целом. Либо предоставить такую возможность заказчику.

Классикой жанра для решения поставленной задачи является веб-сервис:

Универсальный, но долгий browsershots.org

Он позволяет получить скриншот не только из конкретного браузера, но и выбрать его версию и ОС, в которой браузер запущен.

Недостаток один — очередь. Скриншотов нужной страницы можно прождать полчаса и даже больше.