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

      (из серии «малая механизация 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!
      

      Вот живой пример.
      Читать дальше →
    • Пишем single-page web application framework в 60 строках кода

        В качестве предисловия



        Веб-дизайнерский народ в последнее время распробовал single page web applications. Что оправдано во многих случаях.
        Но явно ошибочно считать что single page web application не сделать без чего-то типа AngularJS, Ember и прочих Knockouts.
        Во всяком случае если вам нужно сделать нечто простое типа To-do списка совершенно не обязательно тащить на клиент килобайты мега-фреймворка. На самом деле килобайты трафика это пол беды. Основная цена, скажем AngularJS, в том что он, как любой универсальный data binding механизм, создает значительную run-time нагрузку.

        Эта статья про то как в 60 строках кода + jQuery/Zepto сделать простой app framework котрый можно расширять под свои нужды и без лишних сущностей в нагрузку.

        Постановка задачи



        Наш framework должен ...:

        1. … поддерживать routing, т.е. должна быть возможность сказать в деклартивной модели: «этот вот url hash должен быть показан в этом view».
        2. Должна быть возможность динамической загрузки разных view. Какие-то части нашего приложения могут быть либо тяжелы для начальной загрузки, либо не нужны, например, для незалогиненного пользователя.
        3. Должна быть возможность динамической загрузки скриптов. По причинам изложенным в п. 2
        4. Наше приложение будет поддерживать browsing history — кнопка «назад» в браузере должна показывать предыдущую страницу и т.д.
        5. Ну и все это должно быть компактным и расширяемым как того будет требовать логика нашего приложения.


        Пример того что мы хотим получить



        Приложение Bootstrap'нутый список контактов — содержит сам список, карточку — детали контакта и некую панель управления (dashboard). Что будет на той панели нам не важно — знаем что что-то будет и ладно.

        Personas demo

        Поехали
      • Sciter — встраиваемый HTML/CSS/scripting engine

          Попросили вот здесь про Sciter слово замолвить… Собственно вот рассказываю.

          Sciter есть встраиваемый HTML/CSS/scripting engine для создания UI десктопных и мобильных приложений, классических так и [occasionally-]connected.

          В принципе поддерживаются разные парадигмы приложений ограниченные лишь фантазией разработчиков. Например одной фирмой была сделана телефонная система со smart desktop phones на которых работал Sciter-based client — фактически специализированный browser загружающий UI (HTML,CSS, scripts и images) с системного контроллера станции по специализированному протоколу.

          Другой пример: фирма Symantec использует sciter как UI для их consumer продуктов — Norton Antivirus со товарищи (since 2007).

          image
          На картинке: sciter.exe demo проект из SDK + открытое окно DOM inspector'а, живет в inspector32.dll (исходники в SDK). inspector.dll можно использовать в своем проекте для отладки UI. Естественно что inspector UI есть опять же HTML/CSS/script + толика native code.

          Читать дальше →
        • Про вычислительную сложность алгоритмов HTML и CSS

            HTML документ загруженный в browser есть дерево DOM элементов и набор CSS правил. Каждое CSS правило это пара — селектор (selector) и список свойств (list of properties).

            Мы мало задумываемся над тем, а собственно чего стоит нарисовать HTML документ c вычислительной точки зрения? Знания про то что думатель — думает, а неонка у нея унутре ярко светит сквозь opacity:0.5 элементы бывает явно не достаточно.

            Собственно про это и есть данные статьи — про вычислительную сложность (computational complexity) отображения HTML и CSS. Хочу отметить что я использую свой собственный опыт имплементации HTML/CSS rendering engines (HTMLayout и Sciter), но вычислительные проблемы в данной области универсальны — определяются самой природой HTML и CSS спецификаций.
            Читать дальше →
          • Новое предложение в W3C/CSS — Flexible Flow Module

              Все кто профессионально работают с CSS знают что означенный инструмент достаточно беден на предмет layout management. Например в современном CSS (2.1 и 3) технически невозможно воспрозвести все возможности HTML таблиц.

              В Java/AWT/Swing например с самого начала были заложены всяко разны Layout Managers. В CSS такого в чистом виде нет. Непорядок.

              Собственно это и явилось причиной нашего предложения в W3C CSS WG.

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