• Несколько интересностей и полезностей для веб-разработчика (выпуск 2)

      Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

      Webflow



      С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

      Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

      Parallax.js


      Функциональный и простой инструмент для создания параллакс эффекта.

      Читать дальше →
      • +104
      • 78,6k
      • 27
    • Создание интерактивного прототипа с Fireworks и TAP (touch application prototyping)

      • Tutorial
      Кажется Хабр незаслуженно обошло стороной повальное увлечение проектирования интерфейсов с помощью Fireworks, (по крайней мере Smashingmagazine и Cooper усиленно пропагандируют его как стандарт де-факто в отрасли).

      Статья не является переводом iOS Prototyping With TAP And Adobe Fireworks товарища Shlomo Goltz, однако идея разобраться в этом вопросе, наконец-то, появилась именно после этой статьи, да и картинку я «стырил» оттуда.

      В нашей лаборатории мы часто размышляли над тем какие инструменты лучше всего подходят для прототипирования приложений. На тот момент был популярен Expression Blend + SketchFlow, но его привязанность к Silverlight, не давала нам ни малейшего шанса на то, что он будет популярен в мобильной разработке.
      Читать дальше →
      • +15
      • 12,6k
      • 1
    • Адаптивная верстка: CSS&JS фреймворк Skeleton


      В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.
      Читать дальше →
    • Symfony 2: Полезные библиотеки и бандлы

        Уже около полугода для разработки веб-проектов используем Symfony 2. Накопился список полезных библиотек и бандлов, не входящих в состав symfony-standard, но значительно экономящих время и избавляющих от изобретения велосипеда.



        Обзор больше теоретический и включает следующие разделы:
        • Админгенераторы
        • Пользователи
        • Импорт/экспорт xls
        • API и OAuth 2.0
        • Меню/навигация
        • Мультимедиа
        • Формы
        • Поиск
        • Пагинация
        • Файловая система
        • HTTP клиент

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

        Читать дальше →
      • Бесплатный облачный PHP-MySQL хостинг для небольшого сайта на основе Amazon AWS

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

        Боевая задача.


        Предположим нам хочется захостить небольшой проектик где-нибудь в надежном и не особо тормозящем месте. А поскольку сайт небольшой, то не будем заморачиваться и захотим от хостинга что-нибудь самое простое. Для наших целей вполне хватит PHP, MySQL и доступа по FTP.
        Для решения этой задачи идеально подходит Веб сервис от Амазона в котором удивительным образом сочетается способность выдерживать большие нагрузки с бесплатным пакетом ресурсов на первый год после регистрации. В бесплатный пакет входит много чего, но в данный момент нас будут интересовать:
        • Виртуальный сервер в формате micro на основе Linux с доступом по SSH.
        • 30Гб места в Elastic Block Storage плюс 1Гб под бэкапы.
        • 15 Гб трафика в месяц.
        • Выделенный внешний IP адрес.

        Причем все это при желании можно зарегистрировать и подготовить к работе за полчаса, но понадобится кредитная карта, которую примет Amazon (и снимет 2 доллара) и сотовый телефон под рукой (домашний не подойдет).

        Читать дальше →
        • +125
        • 70,9k
        • 88
      • Javascript в декларативном стиле

          image

          Может, для гуру javascript данная статья будет не интересна, а вот для начинающих разработчиков, наверняка — полезна.
          Сразу оговорюсь, что в статье будет использоваться только чистый javascript без подключения сторонних фреймворков (например jquery).

          Писать javascript в декларативном стиле гораздо удобнее:

          • Возможность привязать конкретному html-блоку нужный javascript функционал
          • Возможность писать javascript код наподобие css (к объекту привязывать свойства)
          • Улучшить читаемость кода, перенеся логику, связанную с конкретными html-блоками, в отдельные файлы
          • И много чего ещё. Попробуйте и сами все увидите.

          Итак, приступим.

          Читать дальше →
        • Файловый менеджер на PHP, с правами, контролем версий и AJAX-ом

          Особенности файлового менеджера:
          — Можно задавать права доступа на файлы и директории. Права двух типов: есть доступ или нет доступа. Файлы хранятся в недоступной для скачивания по прямой ссылке папке. Скачивание файла происходит с предварительной проверкой пользователя и прав доступа на файл. Любой пользователь файлового менеджера может обладать правами администратора, что указывается при добавлении нового или редактировании существующего пользователя. Администратор может видеть все, в том числе «удалённые» файлы.
          — Контроль версий каждого файла. После загрузки файла он сохраняется с именем, которое не позволяет перезаписать существующие файлы, а его «оригинальное» имя сохраняется в БД. Данный подход разрешает хранить разные состояния файлов.
          — Автоматическое создание превью загружаемых изображений.
          — Файл в менеджере можно сделать доступным для скачивания
          — GPL, код доступен на github



          Читать дальше →
        • Realplexor: производительный Comet-сервер с API для PHP и Javascript (realtime)

            Dklab Realplexor — это Comet-сервер, позволяющий держать одновремено сотни тысяч долгоживущих открытых HTTP-соединений с браузерами пользователей. JavaScript-код, запущенный в браузере, подписывается на один или несколько каналов Realplexor-а и вешает обработчик на поступление данных. Сервер может в любой момент записать сообщение в один из таких каналов, и оно будет моментально передано всем подписчикам (хоть одному, хоть тысяче), в режиме реального времени и с минимальной нагрузкой для сервера.

            Хотя идейным вдохновителем Realplexor-а был предыдущий проект, dklab_multiplexor, код Realplexor-а не имеет с ним практически ничего общего. Поэтому я и решил сменить название. Несопоставимы также возможности продуктов (см. ниже), да и размер кода увеличился в 7 раз.

            Realtime-направление сейчас довольно активно развивается на Западе, и в нем особенно выделяется продукт Tornado — событийно-ориентированный веб-сервер на языке Python. Правда, Tornado — это не столько Comet-сервер, сколько инструмент, с помощью которого можно запрограммировать «в том числе» и Comet-сервер. Ключевые слова: Comet, Push Server, Long polling, JavaScript, XMLHttpRequest.

            Главные преимущества Realplexor-а:
            • простота использования: наличие API для JavaScript, API для PHP (в будущем — и для других языков);
            • простота конфигурирования;
            • широкий функционал (либо отстутствующий, либо недоступный напрямую в аналогах).

            Лучше один раз увидеть...


            Я сделал отдельную онлайн-песочницу, чтобы продемонстрировать функционал нового Realplexor-а и то, для чего вообще нужны Comet-серверы (кстати, это физически тот же самый демон Realplexor-а, что использует мой новый стартап РуТвит). Песочница реализует что-то типа многоканального чата: зайдя, вы получите как будто бы 2 независимых «браузера», запущенных на разных компьютерах.
            • Верхний «браузер» отображает каналы — в них моментально появляются новые сообщения, как только кто-то их туда отправляет на стороне сервера. Конечно же, эту страницу могут просматривать одновременно сотни тысяч пользователей, и они все будут видеть одно и то же (реализовано с использованием Realplexor JavaScript API). Можно «на лету» добавлять новые каналы (подписка) или скрывать уже имеющиеся (отписка).
            • Нижний браузер содержит формы, позволяющие добавлять сообщение в произвольный канал, указав его имя. Форма AJAX-ом отправляется на сервер, и уже там PHP-скрипт записывает в Realplexor полученный текст через PHP API. (И да, так можно чатиться.)
            По умолчанию на странице открыто 3 канала с именами Alpha, Beta и RuTvit. Но, конечно, вы можете закрыть эти каналы и открыть новые. Вот, например, страница с единственным открытым каналом по имени Habrahabr: http://rutvit.ru/realplexor/demo?ids=Habrahabr.



            Песочница демонстрирует следующие функции Realplexor-а:
            Читать дальше →