├── examples ├── hello-world │ ├── hello.tag │ └── hello-server.js ├── page-components │ ├── page-layout.tag │ ├── tags │ │ ├── page-navbar.tag │ │ ├── page-posts.tag │ │ ├── page-footer.tag │ │ ├── page-head.tag │ │ ├── single-post.tag │ │ └── page-content.tag │ ├── page-server.js │ └── pure.html ├── static-list │ ├── list-iterator.tag │ ├── list-server.js │ └── list.tag ├── static-server.js └── todo │ ├── todo.css │ ├── index.html │ └── todo.tag ├── .travis.yml ├── test ├── hello.test.js ├── list.test.js └── test.html ├── .gitignore ├── package.json └── README.md /examples/hello-world/hello.tag: -------------------------------------------------------------------------------- 1 | 2 |

Hello {name}

3 | 6 | 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4.2.2" 4 | before_install: 5 | - pip install --user codecov 6 | after_success: 7 | - codecov --file coverage/lcov.info --disable search 8 | -------------------------------------------------------------------------------- /examples/page-components/page-layout.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/static-list/list-iterator.tag: -------------------------------------------------------------------------------- 1 | 2 |

{ name } = { value }

3 | 4 | 9 | 10 | -------------------------------------------------------------------------------- /examples/static-list/list-server.js: -------------------------------------------------------------------------------- 1 | var riot = require('riot'); 2 | // by requiring the itterator tag here it becomes available 3 | // as a tag inside list.tag when rendered by riot below 4 | require('./list-iterator.tag'); 5 | var list = require('./list.tag'); 6 | var html = riot.render(list, { name: 'My List' }); 7 | console.log(html); 8 | -------------------------------------------------------------------------------- /examples/static-list/list.tag: -------------------------------------------------------------------------------- 1 | 2 |

{name}

3 |

Items:

4 |

7 | 16 | 17 | -------------------------------------------------------------------------------- /examples/page-components/tags/page-navbar.tag: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | -------------------------------------------------------------------------------- /examples/page-components/tags/page-posts.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /test/hello.test.js: -------------------------------------------------------------------------------- 1 | var test = require('tape'); 2 | 3 | var dir = __dirname.split('/')[__dirname.split('/').length-1]; 4 | var file = dir + __filename.replace(__dirname, '') + " -> "; 5 | 6 | var riot = require('riot'); 7 | 8 | test(file + "Hello World test", function(t) { 9 | var hello = require('../examples/hello-world/hello.tag'); // sync 10 | var html = riot.render(hello, { name: "Ana" }); 11 | t.ok(html.match(/Hello Ana/), "Hello renders to: "+html) 12 | t.end() 13 | }); 14 | -------------------------------------------------------------------------------- /examples/page-components/tags/page-footer.tag: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /examples/static-server.js: -------------------------------------------------------------------------------- 1 | var Hapi = require('hapi'); 2 | var server = new Hapi.Server(); 3 | var port = process.env.PORT || 8000; 4 | 5 | server.connection({ port: port }); 6 | 7 | server.register(require('inert'), function () { 8 | server.route({ 9 | method: 'GET', 10 | path: '/{param*}', 11 | handler: { 12 | directory: { path: require('path').normalize(__dirname + '/'), listing: true } 13 | } 14 | }); 15 | }); 16 | 17 | server.start(function () { 18 | console.log('Static Server Listening on : http://127.0.0.1:' +port); 19 | }); 20 | -------------------------------------------------------------------------------- /test/list.test.js: -------------------------------------------------------------------------------- 1 | var test = require('tape'); 2 | 3 | var dir = __dirname.split('/')[__dirname.split('/').length-1]; 4 | var file = dir + __filename.replace(__dirname, '') + " -> "; 5 | 6 | var riot = require('riot'); 7 | 8 | test(file + "Nested Tag test", function(t) { 9 | require('../examples/static-list/list-iterator.tag'); // resolve nested tag 10 | var list = require('../examples/static-list/list.tag'); // sync 11 | var html = riot.render(list, { name: "Ana" }); 12 | // console.log(html); 13 | t.ok(html.match(/Smoothie/), "List contains smoothie."); 14 | t.end() 15 | }); 16 | -------------------------------------------------------------------------------- /examples/hello-world/hello-server.js: -------------------------------------------------------------------------------- 1 | var riot = require('riot'); 2 | var doctype = ''; 3 | var hello = require('./hello.tag'); 4 | var html = riot.render(hello, { name: 'World' }); 5 | 6 | var http = require('http'); 7 | var port = 8000; 8 | var host = 'localhost'; 9 | 10 | function handleRequest (request, response) { 11 | response.writeHead(200, { 'Content-type': 'text/html' }); 12 | response.end(doctype + html); 13 | }; 14 | 15 | var server = http.createServer(handleRequest); 16 | 17 | server.listen({ port: port, host: host }, function () { 18 | console.log('Server listening on: http://localhost:' + port); 19 | }); 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /examples/page-components/page-server.js: -------------------------------------------------------------------------------- 1 | const riot = require('riot'); 2 | const doctype = ''; 3 | require('./tags/page-head.tag'); 4 | require('./tags/page-footer.tag'); 5 | require('./tags/page-navbar.tag'); 6 | require('./tags/single-post.tag'); 7 | require('./tags/page-posts.tag'); 8 | require('./tags/page-content.tag'); 9 | const layout = require('./page-layout.tag'); 10 | 11 | const html = riot.render(layout); 12 | 13 | const http = require('http'); 14 | const PORT = 8000; 15 | 16 | //Create a server 17 | const server = http.createServer(function handleRequest (request, response) { 18 | response.writeHead(200, { 'Content-Type': 'text/html' }); 19 | response.end(doctype + html); 20 | }); 21 | 22 | //Lets start our server 23 | server.listen(PORT, function () { 24 | //Callback triggered when server is successfully listening. Hurray! 25 | console.log('Server listening on: http://localhost:%s', PORT); 26 | }); 27 | -------------------------------------------------------------------------------- /examples/todo/todo.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | font-family: 'myriad pro', sans-serif; 4 | font-size: 20px; 5 | border: 0; 6 | } 7 | 8 | todo { 9 | display: block; 10 | max-width: 400px; 11 | margin: 5% auto; 12 | } 13 | 14 | form input { 15 | font-size: 85%; 16 | padding: .4em; 17 | border: 1px solid #ccc; 18 | border-radius: 2px; 19 | } 20 | 21 | button { 22 | background-color: #1FADC5; 23 | border: 1px solid rgba(0,0,0,.2); 24 | font-size: 75%; 25 | color: #fff; 26 | padding: .4em 1.2em; 27 | border-radius: 2em; 28 | cursor: pointer; 29 | margin: 0 .23em; 30 | outline: none; 31 | } 32 | 33 | button[disabled] { 34 | background-color: #ddd; 35 | color: #aaa; 36 | } 37 | 38 | ul { 39 | padding: 0; 40 | } 41 | 42 | li { 43 | list-style-type: none; 44 | padding: .2em 0; 45 | } 46 | 47 | .completed { 48 | text-decoration: line-through; 49 | color: #ccc; 50 | } 51 | 52 | label { 53 | cursor: pointer; 54 | } 55 | -------------------------------------------------------------------------------- /examples/page-components/tags/page-head.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Blog – Layout Examples – Pure 7 | 8 | 9 | 10 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /examples/todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Riot todo 6 | 7 | 8 | 9 | 14 | 15 | 16 | 17 | 18 |

19 | 20 | 21 | 22 | 23 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /examples/page-components/tags/single-post.tag: -------------------------------------------------------------------------------- 1 | 2 |

3 |

4 | ${post_author}'s avatar$ 5 | 6 |

{post_title}

7 | 8 |

9 | By {post_author} under {name} 10 |

11 |

12 | 13 |

14 |

15 | {post_description} 16 |

17 |

18 |

19 | 20 | {data.alt}

{data.alt}

21 | 22 | 23 |

24 |

{name}

25 |

26 |

27 |

28 |

29 |

30 | 31 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /examples/todo/todo.tag: -------------------------------------------------------------------------------- 1 | 2 | 3 |

{ opts.title }

4 | 5 |

7 | 8 | { title } 9 | 10 |

12 | 13 | 20 | 21 | 22 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "learn-riot", 3 | "version": "2.6.1", 4 | "description": "learn how to use riot.js to build ultra-efficient web applications", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/docdis/learn-riot.git" 8 | }, 9 | "keywords": [ 10 | "riot.js", 11 | "learn", 12 | "tutorial", 13 | "how-to", 14 | "full-stack" 15 | ], 16 | "author": "@Danwhy, @besarthoxhaj, @nelsonic, ", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/docdis/learn-riot/issues" 20 | }, 21 | "homepage": "https://github.com/docdis/learn-riot", 22 | "dependencies": { 23 | "hapi": "^15.0.2", 24 | "inert": "^4.0.2", 25 | "riot": "^2.6.1" 26 | }, 27 | "devDependencies": { 28 | "decache": "^3.0.3", 29 | "istanbul": "^0.4.0", 30 | "jsdoc": "^3.3.3", 31 | "live-server": "^1.1.0", 32 | "nodemon": "^1.8.1", 33 | "pre-commit": "1.1.2", 34 | "tap-spec": "^4.1.0", 35 | "tape": "^4.2.2" 36 | }, 37 | "scripts": { 38 | "docs": "./node_modules/jsdoc/jsdoc.js ./lib/*.js", 39 | "test": "PORT=8000 ./node_modules/tape/bin/tape ./test/*.js", 40 | "test2": "PORT=8000 ./node_modules/.bin/istanbul cover ./node_modules/tape/bin/tape ./test/*.test.js", 41 | "coverage": "PORT=8000 ./node_modules/.bin/istanbul cover ./node_modules/tape/bin/tape ./test/*.js && ./node_modules/.bin/istanbul check-coverage --statements 100 --functions 100 --lines 100 --branches 100", 42 | "open-coverage": "open ./test/coverage.html", 43 | "spec": "PORT=8000 node ./node_modules/tape/bin/tape ./test/*.js | node_modules/tap-spec/bin/cmd.js", 44 | "dev": "PORT=8000 ./node_modules/.bin/live-server --open=./examples", 45 | "start": "node examples/static-server.js" 46 | }, 47 | "pre-commit": [ 48 | "coverage" 49 | ], 50 | "engines": { 51 | "node": ">=4.2.2" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TEST Basic Riot.js Component/Tag 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 15 |

16 | 17 | 18 |

19 | 20 | 26 | 27 |

28 |

29 | 30 | 31 | 33 | 34 | 37 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /examples/page-components/tags/page-content.tag: -------------------------------------------------------------------------------- 1 | 2 |

3 | 12 | 13 |

14 |

15 | 16 |

17 |

Pinned Post

18 | 19 | 20 | 27 | 28 |

29 | 30 |

31 |

Recent Posts

32 | 33 | 36 | 37 |

38 | 39 | 40 | 41 |

42 |

43 |

44 | 45 | 98 | 99 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # learn riot.js 2 | 3 | > "Riot is an incredibly fast, powerful yet tiny client side (MV*) 4 | library for building large scale web applications." 5 | 6 | [![Build Status](https://travis-ci.org/dwyl/learn-riot.svg)](https://travis-ci.org/dwyl/learn-riot) 7 | [![npm](https://img.shields.io/npm/v/riot.svg?maxAge=2592000)](http://riotjs.com/) 8 | [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/learn-riot/issues) 9 | 10 | ## Table of Contents 11 | 12 | - [Why](#why) 13 | - [What](#what) 14 | - [Can We Use *"Native" Web Components?*](#can-we-use-native-web-components) 15 | - [How](#how) 16 | - [FAQ](#faq) 17 | - [Resources](#resources) 18 | - [Official links](#official-links) 19 | - [Introductory Tutorial](#introductory-tutorial) 20 | - [Examples](#examples) 21 | - [Screencasts](#screencasts) 22 | 23 | ## Why? 24 | 25 | We need a way of organising the pieces of our web applications 26 | into discrete *components* that can be developed/tested independently 27 | and composed into a fast User Interface/Experience. 28 | 29 | ## What? 30 | 31 | ![riot header](https://cloud.githubusercontent.com/assets/194400/10937086/7c62bab4-82e8-11e5-89e8-5e41f7864734.png) 32 | 33 | ### Can We Use *Native Web Components* ? 34 | 35 | Web Components are *going* to revolutionize the web. *Eventually*. 36 | *Sadly*, there is not yet widespread adoption for the Web Component spec. 37 | 38 | Even though Google Chrome supports all the pieces of Web Components and has over 39 | [***50% Market Share***](http://www.sitepoint.com/browser-trends-august-2015-chrome-exceeds-50), 40 | Internet Explorer and Safari are still lagging behind: http://caniuse.com/#search=components 41 | 42 | The current *status* is "*working draft*" see: http://www.w3.org/standards/techs/components#w3c_all 43 | which means the *finer details* are *still being debated* by the W3C, 44 | which means we might sill have a few months (_years_?) to wait... 45 | 46 | So, while we [*wait*](http://www.2ality.com/2015/08/web-component-status.html) 47 | for Internet Explorer to catch up, we are using [**Riot**](http://riotjs.com) because its *much* smaller and 48 | thus *faster-to-learn* than *everything* else out there... 49 | 50 | A quick introduction to the [Riot.js](https://muut.com/riotjs) client side MVP library for people who want to build minimalist apps. 51 | 52 | > _Imagine **React went on a diet** and got **better syntax**, **that's Riot.js**_. 53 | 54 | ## *How*? 55 | 56 | On the Riot.js website, visit the "_Guide_" page: http://riotjs.com/guide/ 57 | 58 | > W3C Valid Code: https://validator.w3.org/nu/?doc=https%3A%2F%2Flearn-riot.herokuapp.com%2Ftodo%2F 59 | 60 | 61 | ### Videos 62 | 63 | Searching YouTub for riot.js https://www.youtube.com/results?search_query=riot.js there are _thousands_ of results. If you are _totally new_ to Riot and want a "Why Riot" overview, 64 | 65 | ### *FAQ*? 66 | 67 | If you are *wondering* ***how*** you can `require()` a `.tag` file 68 | ( *that is not `.js` or `.json` - 69 | the standard files you require in node.js* ) 70 | The answer is *simple*: when you `require('riot')` 71 | the `riot` *module* ***extends*** node's native `require` method 72 | (*this is* ***JavaScirpt*** *after all, everything is accessible/mutable*) 73 | which means that `require()` *understands* how to load a `.tag` file. 74 | 75 | > More FAQ: http://riotjs.com/faq/ 76 | 77 | ## *Resources* 78 | 79 | ### Official links 80 | 81 | - Site: http://riotjs.com/ 82 | - GitHub repo: https://github.com/riot/riot 83 | - Muut Manifesto (the makers of riot.js): https://muut.com/manifesto 84 | 85 | ### Introductory Tutorial 86 | - http://riotjs.com/guide/ 87 | + Cheat Sheet: http://martinmuzatko.github.io/riot-cheatsheet/ (basic examples) 88 | 89 | ### Examples 90 | 91 | - Riot ToDoMVC: https://github.com/3den/riotjs-todomvc 92 | 93 | ### Screencasts 94 | 95 | - [RiotJS - Introdution Part #1](https://www.youtube.com/watch?v=ZHmJ_gcZ8Fw) by [@andrewdelprete](https://github.com/andrewdelprete) **- Youtube** `[03:29]` 96 | - [RiotJS - Event Handlers and Rendering Part #2](https://www.youtube.com/watch?v=FPmAZD9QRQw) by [@andrewdelprete](https://github.com/andrewdelprete) **- Youtube** `[03:10]` 97 | - [RiotJS - Looping with each attribute Part #3](https://www.youtube.com/watch?v=VDKenvP5TyM) by [@andrewdelprete](https://github.com/andrewdelprete) **- Youtube** `[02:19]` 98 | - [RiotJS - Nested Tags / Inheritance Part #4](https://www.youtube.com/watch?v=DzyaPZCrQ-A) by [@andrewdelprete](https://github.com/andrewdelprete) **- Youtube** `[03:38]` 99 | - [RiotJS - Expressions and Classes - Part #5](https://www.youtube.com/watch?v=_a4OSbPSUEE) by [@andrewdelprete](https://github.com/andrewdelprete) **- Youtube** `[02:00]` 100 | - [RiotJS - Observables - Part #6](https://www.youtube.com/watch?v=CHBQtqNtEhM) by [@andrewdelprete](https://github.com/andrewdelprete) **- Youtube** `[05:09]` 101 | - [RiotJS - Routing - Part #7](https://www.youtube.com/watch?v=1Q9Nad1Mu6A) by [@andrewdelprete](https://github.com/andrewdelprete) **- Youtube** `[05:36]` 102 | 103 | ## license 104 | 105 | MIT: https://en.wikipedia.org/wiki/MIT_License 106 | -------------------------------------------------------------------------------- /examples/page-components/pure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Blog – Layout Examples – Pure 10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |

38 | 55 | 56 |

57 |

58 | 59 |

60 |

Pinned Post

61 | 62 | 63 |

64 |

65 |

66 | 67 |

Introducing Pure

68 | 69 |

70 | By Tilo Mitra under CSS Pure 71 |

72 |

73 | 74 |

75 |

76 | Yesterday at CSSConf, we launched Pure – a new CSS library. Phew! Here are the slides from the presentation. Although it looks pretty minimalist, we’ve been working on Pure for 77 | several months. After many iterations, we have released Pure as a set of small, responsive, CSS modules that you can use in every web project. 78 |

79 |

80 |

81 |

82 | 83 |

84 |

Recent Posts

85 | 86 |

87 |

88 |

89 | 90 |

Everything You Need to Know About Riot.js

91 | 92 |

93 | By Eric Ferraiuolo under JavaScript 94 |

95 |

96 | 97 |

98 |

99 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 100 | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 101 |

102 |

103 |

104 | 105 |

106 |

107 |

108 | 109 |

Photos from CSSConf and JSConf

110 | 111 |

112 | By Reid Burke under Uncategorized 113 |

114 |

115 | 116 |

117 |

118 |

119 | 120 | Photo of someone working poolside at a resort

Photo of someone working poolside at a resort

121 | 122 | 123 |

124 |

CSSConf Photos

125 |

126 |

127 | 128 |

129 | 130 | Photo of the sunset on the beach

Photo of the sunset on the beach

131 | 132 | 133 |

134 |

JSConf Photos

135 |

136 |

137 |

138 |

139 |

140 | 141 |

142 |

143 |

144 | 145 |

YUI 3.10.2 Released

146 | 147 |

148 | By Andrew Wooldridge under YUI 149 |

150 |

151 | 152 |

153 |

154 | We are happy to announce the release of YUI 3.10.2! You can find it now on the Yahoo! CDN, download it directly, or pull it in via npm. We’ve also updated the YUI Library website with the latest documentation. 155 |

156 |

157 |

158 |

159 | 160 | 169 |

170 |

171 |

172 | 173 | 174 | 175 | --------------------------------------------------------------------------------