index.jade

block vars
  - var pageTitle = "Home"
  - var description = "Ampersand.js, Javascript, ampersand, Node.js, Apps, HTML5"

extends templates/layout

block content

  header.hero
    .illustration.beach
      img(src="/public/images/ampersand-at-the-beach.svg")
    h1 A highly modular, loosely coupled, non-frameworky framework for building advanced JavaScript apps.


  hr

  section.splash

    .container.cf
      .splash-intro
        h2 Why Ampersand.js?
        p We <3 <a href="http://backbonejs.org/">Backbone.js</a> at <a href="http://andyet.com">&yet</a>. It’s brilliantly simple and solves many common problems in developing clientside applications.
        p But we missed the focused simplicity of tiny modules in node-land. 
        p We wanted something similar in style and philosophy, but that fully embraced tiny modules, npm, and browserify.
        p Ampersand.js is a well-defined approach to combining (get it?) a series of intentionally tiny modules.
        p Read <a href="http://blog.andyet.com/2014/06/25/introducing-ampersand-js">the post introducing ampersand.js</a> on our blog for more background.
        h3 Maximize simplicity
        p
          em If you don’t actively fight for simplicity in software, complexity will win, and it will suck.
        ul
          li Everything is a CommonJS module.
          li Everything is installed via npm.
          li Everything is MIT licensed.
          li Trusted versioning with semver.
        h3 Designed for rich “app” experiences
        ul
          li Modern browsers by default. Unapologetically supporting only IE9+.
          li The browser is a runtime, not a document viewer.
          li <3s realtime apps

        a.button.button-primary(href="/learn") Discover Ampersand.js
      .releases-list
        h3 Recent releases
        for module in globals.recent
          - var split = new Date(module.time[module['dist-tags'].latest]).toDateString().split(' ');
          - var dateString = split.slice(1, 3).join(' ') + ', ' + split[3];
          .module-card
            h4.module-name= module.name
            p.module-version= 'v' + module['dist-tags'].latest + ' – ' + dateString
            p.module-links
              a(href= module.homepage) github
              a(href= module.npmlink) npm
        
        a.button.button-primary(href="/contribute") How to contribute

    hr

    .callout.community
      h2 See who is using Ampersand.js today
      .users-list.cf
        a.logo.logo-otalk(href="https://otalk.im/login") Otalk
        a.logo.logo-yahoo(href="https://yahoo.com/") Yahoo!
        a.logo.logo-andbang(href="https://andbang.com/") And Bang
        a.logo.logo-talky(href="https://talky.io/") Talky

    //- hr

    //- .callout.jsforteams
    //-   img.humanjs-monster(src="/public/images/frankenstein-monster.svg")
    //-   h2 What if you could make your code more… human?
    //-   p Join us for 
    //-     a(href="http://andyet.com/training/human-javascript-live") Human JavaScript: LIVE!
    //-     | , a two-day, intensive JavaScript workshop and training experience designed to help you write code that is easier to understand and maintain.
    //-   p The next JScapade is 
    //-     strong October 1 &amp; 2
    //-     | .
    //-   a.button.button-secondary(href="http://andyet.com/training/human-javascript-live") Enroll now

    hr
    .callout.human-javascript
      h2 A foundation for building simple but powerful JS apps with Ampersand.js
      img.humanjs-ipad(src="/public/images/human-javascript.png")
      //- Needs svg and png fallback
      a.logo.logo-humanjs(href="http://humanjavascript.com/") Human JavaScript
      p Henrik Joreteg introduces practical patterns for powerfully simple application development. 
        a(href="http://humanjavascript.com/")
          em Human Javascript 
        | is a saner way to write JS.
      a.button.button-secondary(href="https://gumroad.com/l/humanjs") Buy the book for $39
      a.button.button-secondary(href="http://read.humanjavascript.com/") Read it free online

    hr

    .callout.modules-list
      h2 Useful modules
      .cf
        for module in globals.featured
          .module-card
            h4.module-name= module.name
            p.module-author by #{module.author.name}
            p.module-description= module.description
            p.module-links
              if module.homepage
                a(href= module.homepage) github
              a(href= module.npmlink) npm
      a.button.button-primary(href="/contribute") View all modules