├── .nvmrc ├── themes └── meteor │ ├── _config.yaml │ ├── source │ ├── style │ │ ├── _global │ │ │ ├── panel.less │ │ │ ├── Radio.less │ │ │ ├── mobile.less │ │ │ ├── Textarea.less │ │ │ ├── Checkbox.less │ │ │ ├── link.less │ │ │ ├── base.less │ │ │ ├── syntax.less │ │ │ ├── animation.less │ │ │ ├── nav.less │ │ │ ├── form.less │ │ │ ├── Input.less │ │ │ ├── Select.less │ │ │ ├── formatting.less │ │ │ └── icon.less │ │ ├── _util │ │ │ ├── easing.import.less │ │ │ ├── link.import.less │ │ │ ├── clearfix.import.less │ │ │ ├── helper.import.less │ │ │ ├── index.import.less │ │ │ ├── text.import.less │ │ │ ├── scrollbar.import.less │ │ │ ├── color.import.less │ │ │ ├── ui.import.less │ │ │ └── typography.import.less │ │ ├── _theme │ │ │ ├── panel.less │ │ │ ├── nav.less │ │ │ ├── sidebar.less │ │ │ ├── layout.less │ │ │ └── content.less │ │ └── style.less │ ├── images │ │ ├── logo.png │ │ ├── OSXsmall.png │ │ ├── favicon.png │ │ ├── tuxSmall.png │ │ ├── windowsSmall.png │ │ ├── icon-white.svg │ │ └── logo-coralspace-left.svg │ ├── fonts │ │ ├── percolate.eot │ │ ├── percolate.ttf │ │ └── percolate.woff │ └── script │ │ ├── smooth-scroll.min.js │ │ └── main.js │ └── layout │ ├── partials │ ├── illustration-help.ejs │ ├── illustration-logs.ejs │ ├── illustration-compass.ejs │ ├── illustration-support.ejs │ ├── sidebar.ejs │ ├── illustration-guide.ejs │ └── illustration-github.ejs │ ├── page.ejs │ └── layout.ejs ├── .gitignore ├── assets ├── theme-colors.less └── api-box.html ├── README.md ├── scripts ├── parseTagOptions.js └── dl.js ├── circle.yml ├── package.json ├── source ├── chapters │ ├── 1 │ │ ├── conclusion.md │ │ ├── reactivity.md │ │ ├── methods.md │ │ ├── security.md │ │ ├── pubsub.md │ │ ├── collections.md │ │ ├── users.md │ │ ├── intro.md │ │ └── meteorSnacks.md │ ├── 2 │ │ ├── conclusion.md │ │ ├── intro.md │ │ ├── react.md │ │ └── css.md │ └── 3 │ │ ├── conclusion.md │ │ ├── fixtures.md │ │ ├── publications.md │ │ ├── testing.md │ │ ├── reusable-modules.md │ │ ├── static-type-checking.md │ │ ├── linting.md │ │ ├── emails.md │ │ ├── structure.md │ │ ├── microservices.md │ │ └── methods.md └── index.md ├── Contributing.md └── _config.yml /.nvmrc: -------------------------------------------------------------------------------- 1 | v8.16.1 2 | -------------------------------------------------------------------------------- /themes/meteor/_config.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/panel.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | npm-debug.log 4 | deploy.sh 5 | /public 6 | db.json -------------------------------------------------------------------------------- /assets/theme-colors.less: -------------------------------------------------------------------------------- 1 | // Haven't made any changes as we want the default Meteor colors 2 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/easing.import.less: -------------------------------------------------------------------------------- 1 | @easing: cubic-bezier(0.175, 0.885, 0.335, 1.05); 2 | -------------------------------------------------------------------------------- /themes/meteor/source/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cult-of-coders/meteor-tuts/HEAD/themes/meteor/source/images/logo.png -------------------------------------------------------------------------------- /themes/meteor/source/fonts/percolate.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cult-of-coders/meteor-tuts/HEAD/themes/meteor/source/fonts/percolate.eot -------------------------------------------------------------------------------- /themes/meteor/source/fonts/percolate.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cult-of-coders/meteor-tuts/HEAD/themes/meteor/source/fonts/percolate.ttf -------------------------------------------------------------------------------- /themes/meteor/source/images/OSXsmall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cult-of-coders/meteor-tuts/HEAD/themes/meteor/source/images/OSXsmall.png -------------------------------------------------------------------------------- /themes/meteor/source/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cult-of-coders/meteor-tuts/HEAD/themes/meteor/source/images/favicon.png -------------------------------------------------------------------------------- /themes/meteor/source/images/tuxSmall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cult-of-coders/meteor-tuts/HEAD/themes/meteor/source/images/tuxSmall.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Meteor Tuts - http://www.meteor-tuts.com 2 | 3 | This package has been cloned from: 4 | https://github.com/meteor/docs 5 | 6 | 7 | -------------------------------------------------------------------------------- /themes/meteor/source/fonts/percolate.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cult-of-coders/meteor-tuts/HEAD/themes/meteor/source/fonts/percolate.woff -------------------------------------------------------------------------------- /themes/meteor/source/images/windowsSmall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cult-of-coders/meteor-tuts/HEAD/themes/meteor/source/images/windowsSmall.png -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/link.import.less: -------------------------------------------------------------------------------- 1 | .link(@color) { 2 | color: @color; 3 | &:link, 4 | &:visited { color: @color; } 5 | &:active { color: darken(@color, 5%); } 6 | } 7 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/Radio.less: -------------------------------------------------------------------------------- 1 | @import "../_util/index.import.less"; 2 | @import "Checkbox.less"; 3 | 4 | label.radio { 5 | &:extend(label.checkbox all); 6 | 7 | input[type="radio"] + span:before, 8 | input[type="radio"] + span:after { border-radius: 1em; } 9 | } 10 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/clearfix.import.less: -------------------------------------------------------------------------------- 1 | // Modern Clearfix 2 | // Modified from http://nicolasgallagher.com/micro-clearfix-hack/ 3 | .clearfix() { 4 | *zoom: 1; 5 | 6 | &:after { 7 | clear: both; 8 | content: " "; /* 1 */ 9 | display: table; /* 2 */ 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/helper.import.less: -------------------------------------------------------------------------------- 1 | .position(@type; @top: auto; @right: auto; @bottom: auto; @left: auto; @width: auto; @height: auto) { 2 | position: @type; 3 | top: @top; 4 | right: @right; 5 | bottom: @bottom; 6 | left: @left; 7 | width: @width; 8 | height: @height; 9 | } 10 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/mobile.less: -------------------------------------------------------------------------------- 1 | // Show only on desktop 2 | .show-mobile { 3 | @media screen and (min-width: @breakpoint) { 4 | display: none !important; 5 | } 6 | } 7 | 8 | 9 | // Show only on desktop 10 | .show-desktop { 11 | @media screen and (max-width: (@breakpoint - 1px)) { 12 | display: none !important; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /scripts/parseTagOptions.js: -------------------------------------------------------------------------------- 1 | // sort of hacky but allows x:y 2 | module.exports = function(args) { 3 | if (args.length === 0) { 4 | return {}; 5 | } 6 | var argsJson = '{"' + args.join('","').replace(/:/g, '":"') + '"}'; 7 | try { 8 | return JSON.parse(argsJson); 9 | } catch (e) { 10 | console.error(args, argsJson); 11 | throw new Error("Couldn't parse arguments"); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/index.import.less: -------------------------------------------------------------------------------- 1 | // Normalize.import.less is imported separately 2 | 3 | @import 'clearfix.import.less'; 4 | @import 'color.import.less'; 5 | @import 'easing.import.less'; 6 | @import 'helper.import.less'; 7 | @import 'lesshat.import.less'; 8 | @import 'link.import.less'; 9 | @import 'scrollbar.import.less'; 10 | @import 'text.import.less'; 11 | @import 'typography.import.less'; 12 | @import 'ui.import.less'; 13 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 0.12 4 | 5 | checkout: 6 | post: 7 | - git submodule update --init 8 | 9 | dependencies: 10 | cache_directories: 11 | - "node_modules" 12 | override: 13 | - npm install -g hexo-cli 14 | - npm install 15 | 16 | test: 17 | override: 18 | # maybe we will need tests in the future 19 | - echo 'ok!' 20 | 21 | deployment: 22 | s3: 23 | branch: /^(master|version-.*)/ 24 | commands: 25 | - npm run deploy 26 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/text.import.less: -------------------------------------------------------------------------------- 1 | .subheading-caps() { 2 | .type-bold; 3 | letter-spacing: .35em; 4 | text-transform: uppercase; 5 | } 6 | 7 | .subheading-caps(center) { 8 | .subheading-caps(); 9 | text-indent: .35em; 10 | } 11 | 12 | .ellipsized() { 13 | overflow: hidden; 14 | text-overflow: ellipsis; 15 | white-space: nowrap; 16 | } 17 | 18 | .force-wrap() { 19 | word-wrap: break-word; 20 | word-break: break-all; 21 | -ms-word-break: break-all; 22 | word-break: break-word; 23 | 24 | .hyphens(auto); 25 | } 26 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_theme/panel.less: -------------------------------------------------------------------------------- 1 | .panel { 2 | @media screen and (min-width: @breakpoint) { display: none; } 3 | 4 | .panel-item { 5 | .std-xpadding; 6 | .font-s2; 7 | .type-semibold; 8 | display: block; 9 | padding-top: .5rem; 10 | padding-bottom: .5rem; 11 | position: relative; 12 | 13 | &.active, 14 | &:hover { 15 | background: @color-primary; 16 | 17 | a { .link(@color-lightest); } 18 | 19 | &:before { 20 | .transform(scale3d(1,1,1)); 21 | background: @color-primary; 22 | } 23 | } 24 | 25 | a { 26 | .link(@color-dark); 27 | .type-semibold; 28 | display: block; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scripts/dl.js: -------------------------------------------------------------------------------- 1 | /* global hexo */ 2 | 3 | var parseTagOptions = require('./parseTagOptions'); 4 | 5 | hexo.extend.tag.register('dtdd', function(args, content) { 6 | var options = parseTagOptions(args); 7 | 8 | var typespan = ''; 9 | if (options.type) { 10 | typespan = '' + options.type + ''; 11 | } 12 | 13 | var idstr = ''; 14 | if (options.id) { 15 | idstr = 'id="' + options.id + '"'; 16 | } 17 | var namespan = '' + options.name + ''; 18 | 19 | return hexo.render.render({text: content, engine: 'md'}) 20 | .then(function(markdownContent) { 21 | return '
' + namespan + typespan + '
' + markdownContent + '
'; 22 | }); 23 | }, { ends: true, async: true }); 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-site", 3 | "version": "0.0.0", 4 | "private": true, 5 | "hexo": { 6 | "version": "3.9.0" 7 | }, 8 | "dependencies": { 9 | "canonical-json": "0.0.4", 10 | "handlebars": "^4.4.3", 11 | "hexo": "^3.9.0", 12 | "hexo-generator-archive": "^0.1.5", 13 | "hexo-generator-category": "^0.1.2", 14 | "hexo-generator-index": "^0.1.2", 15 | "hexo-generator-sitemap": "^1.2.0", 16 | "hexo-generator-tag": "^0.1.1", 17 | "hexo-renderer-ejs": "^0.1.0", 18 | "hexo-renderer-less": "^0.1.3", 19 | "hexo-renderer-marked": "^0.2.4", 20 | "hexo-renderer-stylus": "^0.3.0", 21 | "hexo-server": "^0.2.0", 22 | "jsdoc": "git+https://github.com/meteor/jsdoc.git#espree-3.1", 23 | "showdown": "^1.9.0", 24 | "underscore": "^1.9.1" 25 | }, 26 | "scripts": { 27 | "build": "hexo generate", 28 | "start": "hexo server" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /source/chapters/2/conclusion.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Chapter 2 - Conclusion' 3 | description: Conclusion 4 | disqusPage: 'Chapter 2: Conclusion' 5 | --- 6 | 7 | Good job on making it through Chapter 2! 8 | 9 | You learned how to integrate the View Layer into Meteor. 10 | What's next ? 11 | Well, you need to do your homework first, because it will help you form 12 | new neural synapses that will enable you to remember the underlying mechanism and code faster. 13 | 14 | The next chapter will show you how all the knowledge from Chapter 1 & Chapter 2 can be used in complex projects: 15 | Healthcare applications, Government applications, Multi-tenant applications, Role-Based Access Control, CRMs, 16 | which are the usual enterprise type of applications that may require a bigger team to develop, 17 | and a lot of coding. 18 | 19 | We'll understand how to keep it under-control, how to use testing and how 20 | to continuously integrate and of course: how to deploy! 21 | 22 | It is going to be awesome! 23 | 24 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/scrollbar.import.less: -------------------------------------------------------------------------------- 1 | /// Mixin to customize scrollbars 2 | /// Beware, this does not work in all browsers 3 | /// @author Hugo Giraudel 4 | /// @param {Length} $size - Horizontal scrollbar's height and vertical scrollbar's width 5 | /// @param {Color} $foreground-color - Scrollbar's color 6 | /// @param {Color} $background-color [mix($foreground-color, white, 50%)] - Scrollbar's color 7 | /// @example scss - Scrollbar styling 8 | /// @include scrollbars(.5em, slategray); 9 | .scrollbars(@size, @foreground-color, @background-color) { 10 | // For Google Chrome 11 | &::-webkit-scrollbar { 12 | width: @size; 13 | height: @size; 14 | } 15 | 16 | &::-webkit-scrollbar-thumb { 17 | background: @foreground-color; 18 | border-radius: 1em; 19 | cursor: grab; 20 | 21 | } 22 | 23 | &::-webkit-scrollbar-track { 24 | background: @background-color; 25 | } 26 | 27 | // For Internet Explorer 28 | body { 29 | scrollbar-face-color: @foreground-color; 30 | scrollbar-track-color: @background-color; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/color.import.less: -------------------------------------------------------------------------------- 1 | // Primary 2 | @color-primary: #ff9c00;// coral 3 | @color-secondary: #56579B;// violet 4 | @color-tertiary: #BEA76E;// gold 5 | @color-complementary: #5FD500; // sea green 6 | @color-ancillary: #0F2A4A;// midnight blue 7 | 8 | // Monochrome 9 | @color-lightest: #fff; 10 | @color-lighter: #f8f8f8; 11 | @color-light: #f3f3f3; 12 | @color-mediumlight: #EEE; 13 | @color-medium: #CCC; 14 | @color-mediumdark: #999; 15 | @color-dark: #666; 16 | @color-darker: #444; 17 | @color-darkest: #333; 18 | 19 | // Accent 20 | @color-accent-coolest: #E2DFF3; // baby purple 21 | @color-accent-cooler: #DFECF2; // baby blue 22 | @color-accent-cool: #DEF2E9; // baby teal 23 | @color-accent-warm: #E5F2DE; // baby green 24 | @color-accent-warmer: #F2EFDE; // baby yellow 25 | @color-accent-warmest: #F2DFDF; // baby peach 26 | 27 | // Validation 28 | @color-positive: #63C131; // green 29 | @color-negative: #ff4800; // 30 | @color-neutral: #ffffe4; 31 | 32 | // Third-party 33 | @color-facebook: #3b5998; 34 | @color-google: #58586d; 35 | @color-twitter: #46c8f5; 36 | -------------------------------------------------------------------------------- /themes/meteor/source/style/style.less: -------------------------------------------------------------------------------- 1 | @import './_util/normalize.import.less'; 2 | 3 | // Mixins & Utilities 4 | @import './_util/index.import.less'; 5 | 6 | // Overrides specified by the user 7 | @import '../../../../assets/theme-colors.less'; 8 | 9 | // global namespace 10 | @import './_global/animation.less'; 11 | @import './_global/base.less'; 12 | @import './_global/button.less'; 13 | @import './_global/docsearch.less'; 14 | @import './_global/formatting.less'; 15 | @import './_global/Textarea.less'; 16 | @import './_global/form.less'; 17 | @import './_global/Input.less'; 18 | @import './_global/Radio.less'; 19 | @import './_global/Checkbox.less'; 20 | @import './_global/Select.less'; 21 | @import './_global/icon.less'; 22 | @import './_global/link.less'; 23 | @import './_global/mobile.less'; 24 | @import './_global/nav.less'; 25 | @import './_global/panel.less'; 26 | @import './_global/syntax.less'; 27 | 28 | 29 | // global templates 30 | @import './_theme/layout.less'; 31 | @import './_theme/panel.less'; 32 | @import './_theme/sidebar.less'; 33 | @import './_theme/content.less'; 34 | @import './_theme/nav.less'; 35 | -------------------------------------------------------------------------------- /themes/meteor/source/images/icon-white.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/Textarea.less: -------------------------------------------------------------------------------- 1 | @import "../_util/index.import.less"; 2 | 3 | // Input's look like text fields 4 | textarea { 5 | .font-s2; 6 | .placeholder(@color-mediumdark); 7 | 8 | padding: .7111em 1em; //40 9 | 10 | background: @color-lightest; 11 | border:none; 12 | box-sizing: border-box; 13 | border-radius: 0; 14 | color: @color-darkest; 15 | display: block; 16 | outline: none; 17 | width: 100%; 18 | -webkit-appearance: none; 19 | 20 | &[disabled] { opacity: .5; } 21 | 22 | &.small { 23 | font-size: 13px; 24 | line-height: 18px; 25 | padding: .38em 1em; //40 26 | } 27 | 28 | &.alert { box-shadow: @color-negative 0 0 1px 0 inset; } 29 | 30 | &.inverse { 31 | .placeholder(@color-medium); 32 | background-color: @color-darkest; 33 | color: @color-lightest; 34 | } 35 | 36 | // a form input with no chrome at all (ie. appears just as text) 37 | &.nochrome { 38 | padding: 0; 39 | 40 | border: none; 41 | box-shadow: none; 42 | background: none; 43 | 44 | &:focus, 45 | &:active, 46 | &:hover {} 47 | } 48 | } 49 | 50 | textarea.secondary { 51 | box-shadow: @color-mediumlight 0 0 0 1px inset; 52 | } 53 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/Checkbox.less: -------------------------------------------------------------------------------- 1 | @import "../_util/index.import.less"; 2 | 3 | label.checkbox { 4 | min-height: 1em; 5 | position: relative; 6 | 7 | cursor: pointer; 8 | 9 | input { 10 | .font-s2; 11 | margin: 0 .7em 0 0; 12 | visibility: hidden; 13 | 14 | & + span { 15 | display: inline-block; 16 | vertical-align: top; 17 | line-height: 1; 18 | 19 | &:before, 20 | &:after { 21 | .position(absolute, 0, auto, auto, 0, 14px, 14px); 22 | content: ''; 23 | display: block; 24 | } 25 | } 26 | 27 | 28 | & + span:before { box-shadow: @color-mediumdark 0 0 0 1px inset; } 29 | 30 | &:checked + span:before { box-shadow: @color-complementary 0 0 0 1px inset; } 31 | 32 | & + span:after { 33 | .transition(all 150ms ease-out); 34 | .transform(scale3d(0,0,1)); 35 | 36 | //overrides 37 | height: 10px; 38 | margin-left: 2px; 39 | margin-top: 2px; 40 | width: 10px; 41 | 42 | opacity: 0; 43 | } 44 | 45 | &:checked + span:after { 46 | .transform(scale3d(1,1,1)); 47 | background: @color-complementary; 48 | opacity: 1; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /source/chapters/1/conclusion.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Conclusions 3 | description: Here we are, at the end of the first chapter. 4 | disqusPage: 'Chapter 1: Conclusion' 5 | --- 6 | 7 | Even if this is the beginning of the 1st chapter, we just scratched the surface. Meteor has so many good things to offer! 8 | We are certain you have fallen in love with this framework, and we look forward to help you on this new journey! 9 | 10 | You now have the knowledge how to use Meteor's powers in your applications! You've learned how to: 11 | - store data in a database via Collections 12 | - use methods to perform server-side actions and return responses to the client 13 | - use Meteor's reactive system to develop live updates systems in your applications 14 | - secure your methods/publications in order to develop robust applications 15 | 16 | If you're like us, you will want to know more and more! Here's what we recommend: 17 | - https://guide.meteor.com/ 18 | - https://themeteorchef.com/ 19 | 20 | Also, we do this tutorial out of passion, and we'd like your support! 21 | Feedback is a critical component of any development system. Because of this, we encourage you to interact with us and help us make meteor-tuts better! 22 | Share your experience us regarding the content in this tutorial and help us improve it for other developers! 23 | -------------------------------------------------------------------------------- /themes/meteor/layout/partials/illustration-help.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/ui.import.less: -------------------------------------------------------------------------------- 1 | @breakpoint: 600px; 2 | @page-margin: 5.55555%; 3 | 4 | 5 | .page-margins() { 6 | @media screen and (min-width: (@breakpoint * 1)) { margin: 0 1*@page-margin; } 7 | @media screen and (min-width: (@breakpoint * 1.5)) { margin: 0 1.5*@page-margin; } 8 | @media screen and (min-width: (@breakpoint * 2)) { margin: 0 2*@page-margin; } 9 | } 10 | 11 | .std-ypadding() { 12 | padding-top: 1.25rem; //20px 13 | padding-bottom: 1.25rem; 14 | 15 | @media screen and (min-width: @breakpoint) { 16 | padding-top: 1.875rem; //30px 17 | padding-bottom: 1.875rem; 18 | } 19 | } 20 | 21 | .std-xpadding() { 22 | padding-left: 1.25rem; //20px 23 | padding-right: 1.25rem; 24 | 25 | @media screen and (min-width: @breakpoint) { 26 | padding-left: 1.875rem; //30 27 | padding-right: 1.875rem; 28 | } 29 | } 30 | 31 | .inline-block-whitespace() { 32 | // Removes whitespace from display:inline-block layouts 33 | // Sets font-size to 0 to remove whitespace and resets font-size for child elements 34 | // Used primarily in grids 35 | 36 | font-size: 0; 37 | > * { .font-s3; } 38 | } 39 | 40 | .term-code() { 41 | .type-code; 42 | .font-code; 43 | color: @color-complementary; 44 | 45 | .type { 46 | .font-s1; 47 | .type-primary; 48 | .type-italic; 49 | color: @color-dark; 50 | margin-left: 10px; 51 | } 52 | 53 | a { &:extend(.link.primary); } 54 | } -------------------------------------------------------------------------------- /themes/meteor/layout/partials/illustration-logs.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/meteor/layout/partials/illustration-compass.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/link.less: -------------------------------------------------------------------------------- 1 | @import "../_util/index.import.less"; 2 | 3 | a, 4 | .link { 5 | .transition( all 250ms ease-out ); 6 | .type-bold; 7 | cursor: pointer; 8 | text-decoration: none; 9 | 10 | &:visited { color: @color-darkest; } 11 | } 12 | 13 | 14 | .link { 15 | &:hover { text-decoration: underline; } 16 | &:focus { outline: none; } //hides outline in FF 17 | &:visited { color: inherit; } 18 | 19 | &.primary { .link(@color-primary); } 20 | &.secondary { .link(@color-secondary); } 21 | &.tertiary { .link(@color-dark); } 22 | &.complementary { .link(@color-complementary); } 23 | 24 | // When a file uploading is dressed as a link 25 | &.upload { 26 | display: inline-block; 27 | overflow: hidden; 28 | position: relative; 29 | vertical-align: bottom; 30 | 31 | input[type="file"] { 32 | .position(absolute, 0,0,0,0); 33 | opacity: 0; 34 | } 35 | } 36 | 37 | //When a link is on a dark background 38 | &.inverse { 39 | color: @color-lightest; 40 | &:link, 41 | &:visited { color: @color-lightest; } 42 | &:hover { color: @color-light; } 43 | &:active { color: @color-medium; } 44 | } 45 | 46 | &.inverse-alt { 47 | color: fade(@color-lightest, 70%); 48 | &:link, 49 | &:visited { color: fade(@color-lightest, 70%); } 50 | &:hover { color: fade(@color-lightest, 100%); } 51 | &:active { color: @color-medium; } 52 | } 53 | 54 | > [class*="icon-"] { 55 | font-size: 90%; 56 | display: inline-block; 57 | margin-right: .25em; 58 | vertical-align: baseline; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/base.less: -------------------------------------------------------------------------------- 1 | // the idea is to put base styles in here 2 | * { 3 | .box-sizing(border-box); 4 | -webkit-tap-highlight-color:rgba(0,0,0,0); 5 | -webkit-tap-highlight-color: transparent; /* For some Androids */ 6 | } 7 | 8 | html, button, input, textarea, select { 9 | .type-primary; 10 | outline: none; 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | } 14 | 15 | body { 16 | .type-primary; 17 | .font-s3(); 18 | color: @color-darkest; 19 | background-color: @color-ancillary; 20 | -webkit-overflow-scrolling: touch; 21 | overflow-y: scroll; 22 | } 23 | 24 | /* Default type layout */ 25 | h1, h2, h3, h4, h5, h6 { 26 | .type-normal; 27 | margin: 0; 28 | padding: 0; 29 | } 30 | 31 | h1 { .font-m3; } 32 | h2 { .font-m2; } 33 | h3 { .font-m1; } 34 | h4 { .font-s3; } 35 | h5 {} 36 | h6 {} 37 | 38 | p {} 39 | 40 | sub, 41 | sup { font-size: .8em; } 42 | 43 | sub { bottom: -.2em; } 44 | 45 | sup { top: -.2em; } 46 | 47 | b { .type-bold; } 48 | 49 | em { 50 | .type-semibold; 51 | font-style: normal; 52 | } 53 | 54 | hr { 55 | border: none; 56 | border-top: 1px solid @color-mediumlight; 57 | clear: both; 58 | margin-bottom: 1.25rem; 59 | } 60 | 61 | code, 62 | pre { 63 | .type-code; 64 | .font-code; 65 | } 66 | 67 | code { 68 | display: inline-block; 69 | padding-left: 2px; 70 | padding-right: 2px; 71 | vertical-align: baseline; 72 | 73 | color: darken(@color-complementary, 7%); 74 | } 75 | 76 | pre { 77 | padding: 1em 1.25em; 78 | white-space: pre-wrap; 79 | 80 | background: @color-lighter; 81 | color: @color-darkest; 82 | } 83 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_util/typography.import.less: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,600,700); 2 | 3 | .type-primary() { 4 | font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; 5 | } 6 | 7 | .type-light() { font-weight: 300; } 8 | .type-normal() { font-weight: 400; } 9 | .type-italic() { font-style: italic; } 10 | .type-semibold() { font-weight: 600; } 11 | .type-bold() { font-weight: 700; } 12 | 13 | .type-code() { 14 | font-family: "Andale Mono WT", "Andale Mono", "Menlo", "Lucida Console", "Lucida Sans Typewriter", Monaco, monospace; 15 | font-weight: 400; 16 | } 17 | 18 | 19 | // X-Large 20 | .font-x1 { 21 | font-size: 56px; 22 | line-height: 1; 23 | } 24 | 25 | // Large 26 | .font-l3() { 27 | font-size: 48px; 28 | line-height: 1; 29 | } 30 | 31 | .font-l2() { 32 | font-size: 40px; 33 | line-height: 1; 34 | } 35 | 36 | .font-l1() { 37 | font-size: 32px; 38 | line-height: 1; 39 | } 40 | 41 | // Medium 42 | .font-m3() { 43 | font-size: 28px; 44 | line-height: 1; 45 | } 46 | 47 | .font-m2() { 48 | font-size: 24px; 49 | line-height: 1; 50 | } 51 | 52 | .font-m1() { 53 | font-size: 20px; 54 | line-height: 1; 55 | } 56 | 57 | // Small 58 | .font-s3() { //this sets the baseline for the layout but gets overridden per template 59 | font-size: 16px; 60 | line-height: 24px; 61 | } 62 | 63 | .font-s2() { 64 | font-size: 14px; 65 | line-height: 20px; 66 | } 67 | 68 | .font-s1() { 69 | font-size: 12px; 70 | line-height: 16px; 71 | } 72 | 73 | .font-code() { 74 | //yields a footprint equivalent to 16px in Source Sans Pro 75 | font-size: 90%; 76 | line-height: 1.5; 77 | } 78 | -------------------------------------------------------------------------------- /themes/meteor/layout/partials/illustration-support.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /source/chapters/3/conclusion.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Chapter 3 - Conclusion' 3 | description: On your way to properly scale 4 | disqusPage: 'Chapter 3: Conclusion' 5 | --- 6 | 7 | ## Thank you! 8 | 9 | We really hope that this chapter has shared some insights into how to architect your Meteor app, and what are some 10 | of the best practices we identified. 11 | 12 | You should be on your way now to write beautiful, decoupled code that is easy to understand. 13 | 14 | Now, I have a task for you, remember that first task the user received in his intro ? 15 | 16 | Let's try and apply the principles we discussed and go ahead and create a public GitHub repository and write a project 17 | that will do the following: 18 | 19 | ## Beat the Boss 20 | 21 | - Use React as the view layer 22 | - Create fixtures for users and admin 23 | - Microservicify admin and app 24 | - Ability to register/login/forgot-password 25 | - Ability to create a post (Ask for title and description) 26 | - Make sure the post has createdAt, updatedAt, createdBy, updatedBy 27 | - Ability to list all approved posts on the route ("/posts") 28 | - Ability to view a single Post 29 | - As an Admin I need the ability to approve a post 30 | - When a new post is created the admins should get notified by email 31 | - Write tests 32 | 33 | Focus on backend, not frontend. The purpose here is to architect the backend right. 34 | 35 | Would you pass the *Bigshot Code Reviewer*'s review? 36 | 37 | Leave your link to the repository down below, and let other users review it! See if it's truly Enterprise level. 38 | 39 | 40 | ## Tell us what you think 41 | 42 | Your feedback is very important. Feel free to ask questions, if they are specific to a certain part of this chapter, 43 | go to that page and leave a comment there. Thank you! -------------------------------------------------------------------------------- /assets/api-box.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {{locus}} 5 |
6 | 7 | <{{hTag}} title="{{title}}" class="title-api selflink" id={{id}}> 8 | {{{signature}}} 9 | 10 | 11 |
12 | {{#if importName}} 13 |
import { {{importName}} } from 'meteor/{{module}}'
14 | {{/if}} 15 | 16 | {{#if filepath}} 17 | 18 | ({{filepath}}, line {{lineno}}) 19 | 20 | {{/if}} 21 |
22 |
23 | 24 |
25 |
26 | {{{markdown summary}}} 27 |
28 | 29 | {{#if paramsNoOptions}} 30 |

Arguments

31 |
32 | {{#each paramsNoOptions}} 33 |
34 | {{name}} 35 | {{{typeNames type.names}}} 36 |
37 |
38 | {{{description}}} 39 |
40 | {{/each}} 41 |
42 | {{/if}} 43 | 44 | {{#if options}} 45 |

Options

46 |
47 | {{#each options}} 48 |
49 | {{name}} 50 | {{{typeNames type.names}}} 51 |
52 |
53 | {{{description}}} 54 |
55 | {{/each}} 56 |
57 | {{/if}} 58 | 59 | {{#if UI.contentBlock}} 60 | {{#markdown}}{{> UI.contentBlock}}{{/markdown}} 61 | {{/if}} 62 |
63 |
64 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/syntax.less: -------------------------------------------------------------------------------- 1 | // Grabbed from legacy docs theme 2 | .gutter pre { 3 | color: #ddd; 4 | } 5 | 6 | pre { 7 | color: @color-darker; 8 | 9 | .function .keyword, 10 | .constant { 11 | color: #0092db 12 | } 13 | 14 | .keyword, 15 | .attribute { 16 | color: #e96900 17 | } 18 | 19 | .number, 20 | .literal { 21 | color: #AE81FF 22 | } 23 | 24 | .tag, 25 | .tag .title, 26 | .change, 27 | .winutils, 28 | .flow, 29 | .lisp .title, 30 | .clojure .built_in, 31 | .nginx .title, 32 | .tex .special { 33 | color: #2973b7 34 | } 35 | 36 | .class .title { 37 | color: #4077BF 38 | } 39 | 40 | .symbol, 41 | .symbol .string, 42 | .value, 43 | .regexp { 44 | color: #90a959 45 | } 46 | 47 | .title { 48 | color: #A6E22E 49 | } 50 | 51 | .tag .value, 52 | .string, 53 | .subst, 54 | .haskell .type, 55 | .preprocessor, 56 | .ruby .class .parent, 57 | .built_in, 58 | .sql .aggregate, 59 | .django .template_tag, 60 | .django .variable, 61 | .smalltalk .class, 62 | .javadoc, 63 | .django .filter .argument, 64 | .smalltalk .localvars, 65 | .smalltalk .array, 66 | .attr_selector, 67 | .pseudo, 68 | .addition, 69 | .stream, 70 | .envvar, 71 | .apache .tag, 72 | .apache .cbracket, 73 | .tex .command, 74 | .prompt { 75 | color: #90a959 76 | } 77 | 78 | .comment, 79 | .java .annotation, 80 | .python .decorator, 81 | .template_comment, 82 | .pi, 83 | .doctype, 84 | .deletion, 85 | .shebang, 86 | .apache .sqbracket, 87 | .tex .formula { 88 | color: #b3b3b3 89 | } 90 | 91 | .coffeescript .javascript, 92 | .javascript .xml, 93 | .tex .formula, 94 | .xml .javascript, 95 | .xml .vbscript, 96 | .xml .css, 97 | .xml .cdata { 98 | opacity: 0.5 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_theme/nav.less: -------------------------------------------------------------------------------- 1 | .nav { 2 | .background-image(linear-gradient(top, rgba(255,255,255,.96) 0%, rgba(255,255,255,.99) 100%)); 3 | box-shadow: @color-light 0 -1px 0 0 inset; 4 | 5 | .logo { 6 | height: 40px; 7 | margin-top: -2px; 8 | width: auto; 9 | display: block; 10 | 11 | img { 12 | display: inline-block; 13 | height: 100%; 14 | vertical-align: middle; 15 | } 16 | 17 | span { 18 | .type-normal; 19 | display: inline-block; 20 | vertical-align: middle; 21 | margin-left: 4px; 22 | line-height: 1; 23 | } 24 | } 25 | 26 | .nav-search { 27 | .position(absolute, 0,0,0,0); 28 | .transition(all 300ms ease-out); 29 | opacity: 0; 30 | z-index: -1; 31 | 32 | .input-symbol { 33 | .position(absolute, 0,0,1px,0); 34 | background: @color-lightest; 35 | } 36 | 37 | input { 38 | .transition(all 250ms @easing 00ms); 39 | .transform(translate3d(25%,0,0)); 40 | 41 | height: 100%; 42 | padding-left: 2.5em !important; 43 | width: 100%; 44 | 45 | @media screen and (min-width: @breakpoint) { 46 | font-size: 1rem !important; 47 | padding-left: 4em !important; 48 | } 49 | } 50 | 51 | .icon-search { 52 | .transition(all 300ms @easing ); 53 | .transform(translate3d(50%,0,0)); 54 | 55 | @media screen and (min-width: @breakpoint) { 56 | font-size: 1rem; 57 | left: 0; 58 | padding-left: 1.875rem; 59 | } 60 | } 61 | 62 | 63 | .nav-item { 64 | .transition(all 300ms @easing 200ms); 65 | .transform(scale3d(0,0,0)); 66 | 67 | .icon-close { 68 | .link(@color-medium); 69 | 70 | &:hover { color: @color-dark; } 71 | } 72 | } 73 | } 74 | 75 | &.search-visible { 76 | .nav-search { 77 | opacity: 1; 78 | z-index: 1; 79 | } 80 | 81 | input, 82 | .icon-search { 83 | .transform(translate3d(0,0,0)); 84 | } 85 | 86 | .nav-item { .transform(scale3d(1,1,1));} 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /source/chapters/3/fixtures.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Fixtures' 3 | description: Generate dummy data. 4 | disqusPage: 'Chapter 3: Fixtures' 5 | --- 6 | 7 | ## Why? 8 | 9 | The reason for writing fixtures is that once you setup your project, you fill it with relevant data, like users of different types and roles, posts, items, comments, whatever. 10 | 11 | This removes the reason of having a shared database, and it makes onboarding new developers so easy. 12 | 13 | ## Structure 14 | 15 | We will store our fixtures inside `/imports/fixtures` because this way you will not forget about them. They are an essential part of development. 16 | 17 | ```js 18 | // file: /imports/fixtures/index.js 19 | import createUsers from './createUsers'; 20 | import createPostsForUsers from './createPostsForUsers'; 21 | 22 | const runFixtures = function () { 23 | const shouldRun = Meteor.users.find().count() == 0; 24 | 25 | if (shouldRun) { 26 | createUsers(); 27 | createPostsForUsers(); 28 | } 29 | } 30 | 31 | if (!Meteor.isDevelopment) { 32 | runFixtures(); 33 | } 34 | ``` 35 | 36 | Keep a configuration so you can use it for load testing later on: 37 | 38 | ```js 39 | // file: /imports/fixtures/config.js 40 | export default { 41 | USERS_COUNT: 10, 42 | POSTS_PER_USER: 2, 43 | } 44 | ``` 45 | 46 | And make sure you use the config in every fixture module you've got! 47 | 48 | If it helps you for generation you can also use: https://github.com/versolearning/meteor-factory/ 49 | 50 | ## Caution 51 | 52 | If you have hooks that send emails or do API calls make sure you disable them when running your fixtures. 53 | 54 | Keep your fixtures in sync with your schemas, so whenever you update it, make sure to update your fixtures as well. 55 | 56 | Always work on adding fixtures as you add different data. 57 | 58 | Keep fixtures small and be careful when nesting them, you don't want to insert 100,000 documents because of a big nested loop. -------------------------------------------------------------------------------- /source/chapters/3/publications.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Publications' 3 | description: How to architect publications 4 | disqusPage: 'Chapter 3: Publications' 5 | --- 6 | 7 | ## Stop using them 8 | 9 | Yes you read that right, unless you want to create a custom functionality that uses the beautiful LiveData utilities 10 | from Meteor, stop using publications, instead leverage [Grapher](http://grapher.cultofcoders.com) for this. 11 | 12 | 13 | If you would like to find one post and have it react to changes you will create a NamedQuery: 14 | 15 | ```js 16 | // file: /imports/db/posts/queries/getPost.js 17 | export default Posts.createQuery('getPost', { 18 | $filter({filters, params}) { 19 | filters._id = params.postId; 20 | }, 21 | title: 1, 22 | user: { 23 | profile: 1, 24 | } 25 | }); 26 | ``` 27 | 28 | ```js 29 | // file: /imports/api/posts/queries/getPost.expose.js 30 | // if you don't expose it you can't work with it 31 | import getPost from './getPost'; 32 | 33 | getPost.expose({ 34 | firewall(userId, params) { 35 | // some rules here to secure the query 36 | } 37 | }) 38 | ``` 39 | 40 | In the client you will use it something like this: 41 | 42 | ```js 43 | import getPostQuery from '/imports/db/posts/queries/getPost'; 44 | 45 | export default createContainer(({postId}) => { 46 | const query = getPostQuery.clone({postId}); 47 | const handle = query.subscribe(); 48 | 49 | return { 50 | ready: handle.ready(), 51 | post: query.fetchOne(), 52 | }; 53 | }) 54 | ``` 55 | 56 | The advantages are the following: 57 | - No need to do big changes if you decide to make a query non-reactive 58 | - Separates the concern of data fetching 59 | - Brings modularity and easy linking with other collections. 60 | 61 | You have to use [Grapher](http://grapher.cultofcoders.com/index.html) in your Meteor app if you want to bring it to enterprise standards. Period. It's the best way we know. 62 | 63 | -------------------------------------------------------------------------------- /themes/meteor/layout/partials/sidebar.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 33 |
<%- category %>
34 | <% } %> 35 | 45 | 46 | <% }); %> 47 | 48 |
49 |
50 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/animation.less: -------------------------------------------------------------------------------- 1 | @import "../_util/index.import.less"; 2 | 3 | .jiggle() { 4 | // Jiggle side to side 5 | @jiggle-offset: 4px; 6 | 0%, 100% { .transform(translate3d(0,0,0)); } 7 | 12.5%, 62.5% { .transform(translate3d((@jiggle-offset * -1),0,0)); } 8 | 37.5%, 87.5% { .transform(translate3d((@jiggle-offset),0,0)); } 9 | } 10 | 11 | .jump() { 12 | // Jump up and down 13 | @jump-offset: 3px; 14 | 0% { 15 | .transform(translate3d(0,(@jump-offset * .5),0) scale3d(.9,.9,.9)); 16 | .animation-timing-function(cubic-bezier(0.33333, 0.66667, 0.66667, 1)); 17 | } 18 | 19 | 69% { 20 | .animation-timing-function(cubic-bezier(0.33333, 0, 0.66667, 0.33333)); 21 | .transform(translate3d(0,(@jump-offset*-1),0) scale3d(1,1,1)); 22 | } 23 | 24 | 100% { .transform(translate3d(0,0,0) scale3d(.95,.95,.95)); } 25 | } 26 | 27 | .spin() { 28 | // Rotate dom 29 | // usually used for inline spinners with icon-sync 30 | from { .transform(rotate(0deg)); } 31 | to { .transform(rotate(359deg)); } 32 | } 33 | 34 | .glow() { 35 | // Loading state for skeleton templates 36 | 0%, 100% { opacity: 1; } 37 | 50% { opacity: .5; } 38 | } 39 | 40 | .glow-loading() { 41 | // Loading Spinner ticks 42 | 0% { opacity: 1; } 43 | 100% { opacity: 0; } 44 | } 45 | 46 | .pulse() { 47 | // Graph hover state (dot) 48 | @a: 1.1; 49 | @b: 0.9; 50 | 0%, 100% { .transform(scale3d(1,1,1)); } 51 | 25% { .transform(scale3d(@a, @a, @a)); } 52 | 75% { .transform(scale3d(@b, @b, @b)); } 53 | } 54 | 55 | @-webkit-keyframes jump { .jump; } 56 | @keyframes jump { .jump; } 57 | 58 | @-webkit-keyframes jiggle { .jiggle; } 59 | @keyframes jiggle { .jiggle; } 60 | 61 | @-webkit-keyframes spin { .spin; } 62 | @keyframes spin { .spin; } 63 | 64 | @-webkit-keyframes glow { .glow(); } 65 | @keyframes glow { .glow(); } 66 | 67 | @-webkit-keyframes glow-loading { .glow-loading; } 68 | @keyframes glow-loading { .glow-loading; } 69 | 70 | @-webkit-keyframes pulse { .pulse(); } 71 | @keyframes pulse { .pulse(); } 72 | -------------------------------------------------------------------------------- /Contributing.md: -------------------------------------------------------------------------------- 1 | ## Contributing to Meteor Documentation 2 | 3 | Thanks for considering contributing to Meteor documentation. We really appreciate your assistance. 4 | 5 | The simplest way to contribute to a project is to open an issue or pull request (PR) on the relevant GitHub issue tracker: 6 | 7 | - Meteor API Docs: https://github.com/meteor/docs/issues 8 | 9 | ## Issues 10 | 11 | If you see a problem with a particular piece of content, you can hit the "Edit on GitHub" button to jump straight to the file on GitHub. If you are keen, you can submit a Pull Request immediately to fix the problem; alternatively, hit the "Issues" button at the top to open an issue reporting the problem. 12 | 13 | ## Pull Requests 14 | 15 | We welcome changes both large and small. 16 | 17 | ### Small changes 18 | 19 | Smaller changes such as fixing typos and small edits for clarity will typically be merged quickly, and are very helpful! Contributions like this enable us to maintain our high quality of documentation 20 | 21 | ### Larger changes 22 | 23 | Larger changes like section rewrites, new sections, and even entirely new articles are also encouraged! In fact, some large parts of our documentation have been contributed by community members. However, more controversial larger changes may require some discussion and buy-in from the documentation maintainers before being accepted—if you are unsure, it may be sensible to open an issue discussing the changes before making them. 24 | 25 | ## Becoming a documentation maintainer 26 | 27 | If you make larger contributions to the above properties, you may be invited to become a community documentation maintainer. This is both a recognition of your contribution (thank you!) and the granting of commit rights on the above repositories. 28 | 29 | With those rights you can merge the Pull Requests of others as well as commit directly to the repository (and in some cases deploy the site). So please use your discretion and be courteous. 30 | 31 | ### Current community maintainers 32 | 33 | - [Loren Sands-Ramshaw](http://github.com/lorensr) 34 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/nav.less: -------------------------------------------------------------------------------- 1 | .nav { 2 | .std-xpadding; 3 | .transform(translate3d(0,0,0)); 4 | text-align: center; 5 | z-index: 3; 6 | 7 | .position(relative, 0rem, 0, auto, 0, auto, 3rem); 8 | @media screen and (min-width: @breakpoint) { height: 4rem; } 9 | 10 | &.dark { 11 | color: @color-darker; 12 | .link { .link(@color-darker); } 13 | svg { fill: @color-darkest; } 14 | } 15 | 16 | &.light { 17 | color: @color-lightest; 18 | .link { .link(@color-lightest); } 19 | svg { fill: @color-lightest; } 20 | } 21 | 22 | .center-wrapper { 23 | position: relative; 24 | top: .75rem; 25 | @media screen and (min-width: @breakpoint) { top: 1.25rem; } 26 | 27 | img { 28 | height: 32px; 29 | display: inline-block; 30 | vertical-align: top; 31 | margin-top: -.5rem; 32 | } 33 | 34 | div { 35 | .font-s1; 36 | .type-semibold; 37 | color: @color-dark; 38 | margin-top: -.625rem; 39 | } 40 | } 41 | 42 | .nav-group { 43 | .position(absolute, 0, auto, auto, 0); 44 | .std-xpadding; 45 | z-index: 1; 46 | 47 | &.right { 48 | left: auto; 49 | right: 0; 50 | } 51 | } 52 | 53 | .nav-item { 54 | cursor: pointer; 55 | display: inline-block; 56 | line-height: 3rem; 57 | height: 3rem; 58 | @media screen and (min-width: @breakpoint) { 59 | line-height: 4rem; 60 | height: 4rem; 61 | } 62 | vertical-align: top; 63 | 64 | & + .nav-item { 65 | margin-left: .75rem; 66 | @media screen and (min-width: @breakpoint) { margin-left: 1.875rem; } 67 | } 68 | 69 | &.active { 70 | border-bottom: 2px solid @color-primary; 71 | 72 | .link { color: @color-primary; } 73 | } 74 | 75 | .link { 76 | .font-s2; 77 | line-height: 1; 78 | 79 | .type-semibold; 80 | } 81 | 82 | .btn { 83 | vertical-align: middle; 84 | } 85 | 86 | .icon-menu { 87 | .font-s3; 88 | line-height: 1; 89 | vertical-align: text-top; 90 | } 91 | 92 | .account-menu-wrapper { 93 | display: inline-block; //necessary for accounts loading state 94 | margin-top: .75rem; 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /source/chapters/3/testing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Testing' 3 | description: Writing Tests is so joyful! 4 | disqusPage: 'Chapter 3: Testing' 5 | --- 6 | 7 | ## Why 8 | 9 | Because your code grows and you make less mistakes. 10 | Because it's often faster for you to write a service and test it in a simple unit-test, rather then going on browser for manual testing. 11 | 12 | There are so many articles about why testing is mandatory. Just take my word for it. 13 | 14 | ## Configuration 15 | This article assumes you thoroughly read: https://guide.meteor.com/testing.html 16 | 17 | If you decoupled your code nicely, it's so easy to write tests: 18 | 19 | ``` 20 | meteor add practicalmeteor:mocha 21 | meteor npm i --save-dev chai sinon 22 | ``` 23 | 24 | ``` 25 | // package.json 26 | { 27 | "scripts": { 28 | "test": "meteor test --driver-package practicalmeteor:mocha --port 3050" 29 | } 30 | } 31 | ``` 32 | 33 | Now you can easily do in your terminal: `npm run test`. Then open your browser on http://localhost:3050 to see the results, 34 | they will be updated live as you write your tests or update your files. 35 | 36 | Test files should end in `*.test.js` and they should have a parent (not necessarily direct) with name `client` or `server` 37 | depending where we want to run them. 38 | 39 | ```js 40 | // file: /imports/api/posts/testing/server/PostService.test.js 41 | 42 | import {assert} from 'chai'; 43 | import PostService from '/imports/api/posts/services/PostService'; 44 | 45 | describe('Post Service', function () { 46 | it('Should be able to create a post', function () { 47 | const postId = PostService.createPost({title: 'Hello'}) 48 | 49 | assert.isString(postId); 50 | }) 51 | }) 52 | ``` 53 | 54 | ## Utilities 55 | 56 | - https://github.com/xolvio/cleaner 57 | - https://github.com/versolearning/meteor-factory/ 58 | - http://sinonjs.org/releases/v4.0.1/ 59 | - http://chaijs.com/api/assert/ 60 | 61 | ## Continous Integration 62 | 63 | Whenever someone does a Pull-Request, you can see if the code breaks some tests or not. This is invaluable, and so easy to implement. 64 | Really! 65 | 66 | Some good CI tools: 67 | 68 | - https://circleci.com/docs/1.0/getting-started/ 69 | - https://travis-ci.org/ 70 | 71 | -------------------------------------------------------------------------------- /source/chapters/1/reactivity.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tracker 3 | description: Building reactive apps with Meteor 4 | disqusPage: 'Chapter 1: Tracker' 5 | --- 6 | 7 | ## Introducing the tracking system 8 | 9 | What is a tracking system ? 10 | 11 | The tracker is one of the concepts that sets Meteor apart from other frameworks out there. As such, before we show you 12 | what it's all about, we need to make sure you have all the packages that you need installed on your machine. 13 | For that, run this in your terminal: 14 | ```js 15 | meteor add tracker reactive-var 16 | ``` 17 | 18 | Now open up your browser and type this into the browser console 19 | (the browser console is available for you in the "developer tools" menu of your browser): 20 | ```js 21 | var a = new ReactiveVar('a default value'); 22 | a.get() // will display 'a default value' 23 | a.set('some other value') 24 | a.get() // will display 'some other value' 25 | ``` 26 | 27 | That does not seem to be very complicated, but you might be asking yourself "what's the deal with this ?". 28 | Allow us to explain it step by step, so you can understand it! 29 | 30 | **ReactiveVar** is a reactive-data source and because of that, you can follow its changes at runtime. 31 | To be able to do that, we will be using the *Tracker* feature that got mentioned earlier in the tutorial: 32 | ```js 33 | var computation = Tracker.autorun(() => { 34 | // this is the function that runs it 35 | console.log(a.get()) 36 | }) 37 | ``` 38 | 39 | Now each time you set some value to the **a** variable, it will get logged into the console. Let's try it: 40 | ```js 41 | a.set('something') 42 | ``` 43 | 44 | To stop the execution, use: 45 | ```js 46 | computation.stop() 47 | ``` 48 | 49 | Now, if you give values to your data source, the **run** function's execution will be stopped. 50 | 51 | So, basically: 52 | With the **Tracker**, we can track changes occurring to reactive data sources, in real time. 53 | That's everything you need to know for now in order to use this feature. 54 | 55 | What we presented for you was a brief introduction, the **Tracker** tool is way more complex than that. You can read more about them [here](https://docs.meteor.com/api/tracker.html). 56 | 57 | At its core, tracker is a reactive "watcher". And it is not unique ! 58 | However, this one is very well integrated with Meteor, and this brings down the integration issues you might face when 59 | working on projects, which is why we are using it ! 60 | 61 | ## Practice makes perfect 62 | 63 | #### 1. Stop. It's too much! 64 | Create a tracker that will stop after the 5th change to a reactive variable. 65 | 66 | #### 2. Reactive-Dict ? 67 | Find out what's ReactiveDict and use it to track changes. -------------------------------------------------------------------------------- /source/chapters/3/reusable-modules.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Reusable Modules' 3 | description: How to create pieces of code designed for reusability 4 | disqusPage: 'Chapter 3: Reusable Modules' 5 | --- 6 | 7 | ## Why? 8 | 9 | Let's say you want to create a chat thingie, and you want to decouple it, because 10 | you think that in the future you will definitely use it in some other project. 11 | 12 | You need to treat it separately as a module: 13 | 14 | Create a new folder `/imports/modules/chat/` 15 | 16 | ```js 17 | // file: /imports/modules/chat/client.js 18 | // Do things related to client initialization (if necessary) 19 | 20 | // file: /imports/modules/chat/server.js 21 | // Do things related to server initialization, methods, listeners, etc (if necessary) 22 | 23 | // file: /imports/modules/chat/db 24 | // Apply the same principles 25 | 26 | // file: /imports/modules/chat/api 27 | // Apply the same principles 28 | 29 | // file: /imports/modules/chat/client 30 | // Store frontend stuff here. 31 | ``` 32 | 33 | ## Imports 34 | 35 | Inside your re-usable module, never use absolute paths, only relative paths when importing: 36 | 37 | ```js 38 | import {Threads, Messages} from ../../db 39 | ``` 40 | 41 | ## README.md 42 | 43 | Provide a README that specifies the module this uses, so it can be nicely reused. 44 | 45 | ```markdown 46 | // file: /imports/modules/chat/README.md 47 | // Store here the installation details and npm dependencies. 48 | // Describe in general terms how to use this module 49 | ``` 50 | 51 | ## Event handling 52 | 53 | Use an independent event handler. Not the global one. 54 | 55 | ```js 56 | // file: /imports/modules/chat/api/events.js 57 | 58 | import EventEmitter from 'event-emitter'; 59 | 60 | const Events = { 61 | CHAT_NEW: 'chat.new' 62 | } 63 | 64 | export default new EventEmitter(); 65 | ``` 66 | 67 | If you want to unify emitters you can do so simply: 68 | https://www.npmjs.com/package/event-emitter#unifyemitter1-emitter2-event-emitterunify 69 | 70 | But if you want to do app specific logic when something in this module happens, I recommend you use the EventEmitter from `chat` module to listen for events. 71 | 72 | 73 | ## A git submodule 74 | 75 | Ofcourse now that you have it as a module, you can make it a git-submodule, and make it re-usable in multiple projects and maintainable. 76 | 77 | Read more here: 78 | https://git-scm.com/book/en/v2/Git-Tools-Submodules 79 | 80 | ## Caution 81 | 82 | The problem is that this app is not so independent, so you may find yourself conflicting with some npm dependencies, 83 | so keep that in mind. It depends on your whole structure and how you use it. 84 | 85 | You can avoid this by properly versioning your git submodule. 86 | 87 | 88 | -------------------------------------------------------------------------------- /source/chapters/2/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'The View Layer' 3 | description: Understanding how to build interfaces 4 | disqusPage: 'Chapter 2: Intro' 5 | --- 6 | 7 | ## Introduction 8 | 9 | Previously, we learned how to harness Meteor's powers for building web applications. But we did not see anything actually happen in the View Layer (the UI). 10 | 11 | Since Meteor is a system that focuses on data more than anything else, of course it gives you some snacks to help you 12 | code faster: The User System, Emails and so much more. But when it comes to the View Layer, it's up to you! 13 | 14 | Don't panic! Meteor can be integrated with any View Layer/Template Engine/UI Framework you want to use! 15 | 16 | ## Brief history 17 | 18 | When Meteor started there weren't any stable solutions for building reactive views with it. Because of that the developers had to invent a way. 19 | This is how [Blaze](http://blazejs.org/) was born. In Q4 of 2015, the developers decided to drop the 20 | support for Blaze, not because it wasn't good, but because there were other teams that focused only on the 21 | view layer. You cannot expect one company to do everything. So they began decoupling Blaze from Meteor. 22 | 23 | The Meteor developers gave Blaze to the community to take care of it, decoupling it from Meteor. 24 | 25 | Even if it was a component of Meteor for a while, we do not recommend using Blaze in your applications. 26 | From personal experiences, we noticed that, for mobile builds, Blaze is inferior to React in terms 27 | of speed and stability. Especially for older mobile phones. 28 | 29 | However, as times change, new View Layers appeared that support reactivity: 30 | - [React](https://reactjs.org/) 31 | - [Vue.JS](https://vuejs.org/) 32 | - [Angular2](https://angularjs.org/) 33 | 34 | Each of these has advantages and disadvantages. The question is: what should you choose? 35 | 36 | Our recommendation is [React](https://facebook.github.io/react/) 37 | 38 | The reasons for which we made this choice are: 39 | 40 | - React is modular 41 | - Even if it is a bit hard to use at first, using React gets much easier once you get the hang of it, and the development process becomes easy and intuitive 42 | - React is lightning Fast 43 | - React is maintained by Facebook, and they actively use it in their projects, including in the source code of Facebook itself! 44 | 45 | However, at this stage(Q1 2018), Vue.JS is looking very promising and it is gaining a lot of momentum. 46 | Who will win? It's the survival of the fittest. Time will decide. For now, pick a technology and master it. 47 | 48 | Also, keep in mind the fact that many companies out there still use software that was written 50 years ago in COBOL. 49 | Why ? Because it gets the job done! 50 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/form.less: -------------------------------------------------------------------------------- 1 | @import "../_util/index.import.less"; 2 | 3 | // Form Spacing 4 | // Generic spacing for form elements 5 | // Add class .fieldset 6 | .fieldset { 7 | .clearfix; 8 | 9 | @fieldset-spacing: 1.25rem; //20px 10 | 11 | // All form components are wrapped in custom DOM 12 | // This is generic spacing for labelled and minimal forms 13 | // NOTE: Wrap any custom layouts in .fieldset-group 14 | 15 | > .input-label, 16 | > .input-symbol, 17 | > .textarea, 18 | > .textarea-label, 19 | > .select, 20 | > .select-label, 21 | > .btn { 22 | display: block; 23 | width: 100%; 24 | } 25 | 26 | //Minimal form spacing 27 | > .input-symbol, 28 | > .textarea, 29 | > .select, 30 | > .note-form, 31 | > .btn-group { 32 | margin-bottom: 1px; 33 | &:last-child:not(:only-child) { margin-bottom: 0; } 34 | } 35 | 36 | //Labelled form spacing 37 | > .input-label, 38 | > .textarea-label, 39 | > .select-label, 40 | .fieldset-group { 41 | margin-bottom: @fieldset-spacing; 42 | &:last-child { margin-bottom: 0; } 43 | } 44 | 45 | //Checkbox & Radio spacing 46 | > label.checkbox, 47 | > label.radio { 48 | .font-s2; 49 | margin-bottom: @fieldset-spacing - .25rem; 50 | 51 | // Affordance for visual space when the checkbox is sandwiched 52 | // between a form element and a button 53 | & + .btn { 54 | margin-top: @fieldset-spacing - .5rem; 55 | } 56 | } 57 | } 58 | 59 | 60 | /* Generic */ 61 | legend { 62 | float: left; 63 | margin-bottom: 1em; 64 | width: 100%; // Forces 100% width, not a block element 65 | 66 | .font-s1; 67 | .subheading-caps; 68 | color: @color-dark; 69 | } 70 | 71 | 72 | label { 73 | .font-s2; 74 | .type-bold; 75 | clear: both; 76 | display: block; 77 | margin-bottom: .25em; 78 | 79 | &.hidden { display: none; } 80 | 81 | .sublabel, 82 | .alert { 83 | .font-s1; 84 | .type-normal; 85 | 86 | margin-left: .5em; 87 | 88 | color: @color-dark; 89 | } 90 | 91 | .alert { 92 | .type-italic; 93 | color: @color-negative; 94 | } 95 | } 96 | 97 | // Character counts and help text beneath forms 98 | .subtext-form { 99 | .font-s1; 100 | .ellipsized; 101 | 102 | display: block; 103 | line-height: 2em; 104 | padding: 0 1.16em; //0 14px 105 | 106 | background-color: @color-light; 107 | color: @color-mediumdark; 108 | 109 | &.nochrome { 110 | background-color: transparent; 111 | padding: 0; 112 | } 113 | 114 | &.right { text-align: right; } 115 | 116 | .alert { 117 | .type-italic; 118 | color: @color-negative; 119 | } 120 | } 121 | 122 | .note-form { 123 | padding: .7111em 1em; 124 | text-align: center; 125 | 126 | .font-s2; 127 | background-color: @color-neutral; 128 | color: @color-darker; 129 | } 130 | -------------------------------------------------------------------------------- /themes/meteor/layout/partials/illustration-guide.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_theme/sidebar.less: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | .font-s2; 3 | 4 | .topcap { 5 | .std-xpadding; 6 | padding-top: 1rem; 7 | padding-bottom: 1rem; 8 | 9 | .title-sidebar { 10 | .font-s3; 11 | .type-semibold; 12 | } 13 | 14 | .version-sidebar { 15 | .type-semibold; 16 | float: right; 17 | margin-right: -.75rem; 18 | margin-top: -.5rem; 19 | } 20 | } 21 | 22 | .wrapper-search { 23 | display: none; 24 | @media screen and (min-width: @breakpoint) { display: block; } 25 | 26 | .std-xpadding; 27 | margin-bottom: .75rem; 28 | 29 | .input-symbol { 30 | width: 100%; 31 | 32 | input { box-shadow: @color-light 0 0 0 1px inset; } 33 | } 34 | } 35 | 36 | .heading-toc { 37 | .subheading-caps; 38 | color: @color-complementary; 39 | padding: 1.5em 0 .25em; 40 | } 41 | 42 | .toc > li:first-child > .heading-toc { 43 | padding-top: 0; 44 | } 45 | 46 | ul.toc { 47 | //reset 48 | list-style: none; 49 | padding-left: 0; 50 | margin: 0; 51 | 52 | .std-xpadding; 53 | padding-bottom: 1.5rem; 54 | 55 | ul { 56 | list-style: none; 57 | padding-left: 0; 58 | } 59 | 60 | li { vertical-align: top; } 61 | 62 | } 63 | 64 | ul.list-toc { 65 | a { 66 | .link(@color-darkest); 67 | .type-normal; 68 | display: block; 69 | line-height: 1rem; 70 | position: relative; 71 | 72 | &.current { 73 | &:extend(.link.primary all); 74 | .type-semibold; 75 | } 76 | 77 | &:before { 78 | .font-s1; 79 | .position(absolute, 50%, auto, auto, -1rem); 80 | .transition( all 250ms ease-out ); 81 | color: @color-primary; 82 | margin-top: -.5em; 83 | opacity: 0; 84 | 85 | // Taken from package percolate:icons/edited-style.less 86 | font-family: 'percolate'; 87 | speak: none; 88 | font-style: normal; 89 | font-weight: normal; 90 | font-variant: normal; 91 | text-transform: none; 92 | line-height: 1; 93 | -webkit-font-smoothing: antialiased; 94 | -moz-osx-font-smoothing: grayscale; 95 | 96 | // Show right arrow icon 97 | &:extend(.icon-arrow-right-alt:before); 98 | } 99 | 100 | &.active, 101 | &:hover { 102 | color: @color-primary !important; 103 | &:before { opacity: 1; } 104 | } 105 | 106 | &.h3 { .link(@color-dark); } 107 | 108 | em { 109 | // For code styling in tandem with .api-box 110 | // Used on Meteor Docs 111 | .type-italic; 112 | .type-normal; 113 | } 114 | } 115 | 116 | .sub-menu { 117 | margin-top: .375rem; 118 | 119 | &:empty { 120 | margin: 0; 121 | max-height: 0; 122 | overflow: hidden; 123 | } 124 | 125 | li { 126 | @indent: 15px; 127 | padding-left: @indent; 128 | } 129 | } 130 | 131 | li { 132 | position: relative; 133 | padding-top: .375rem; 134 | padding-bottom: .375rem; 135 | } 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_theme/layout.less: -------------------------------------------------------------------------------- 1 | @sidebar-width: 260px; 2 | @panel-width: 80px; 3 | @panel-width-tablet: 64px; 4 | @panel-width-mobile: 48px; 5 | 6 | html { 7 | overflow-x: hidden; 8 | } 9 | 10 | body { 11 | background: @color-lightest; 12 | overflow-y: auto; 13 | overflow-x: hidden; 14 | -webkit-overflow-scrolling: touch; 15 | } 16 | 17 | .panel { 18 | box-shadow: rgba(0,0,0,.1) 0 0 5px 0 inset; 19 | background: @color-mediumlight; 20 | z-index: 1; 21 | } 22 | 23 | .sidebar { 24 | .position(fixed, @panel-width-mobile, auto, 0, 0, @sidebar-width); 25 | .scrollbars(6px, rgba(0,0,0,.07), rgba(0,0,0,.05)); 26 | background: @color-lighter; 27 | overflow-y: auto; 28 | overflow-x: hidden; 29 | -webkit-overflow-scrolling: touch; 30 | z-index: 2; 31 | 32 | @media screen and (min-width: @breakpoint) { 33 | top: @panel-width-tablet; 34 | } 35 | } 36 | 37 | .nav { 38 | .position(fixed, 0,0,auto, 0, auto, @panel-width-mobile); 39 | opacity: 1; 40 | z-index: 3; 41 | 42 | @media screen and (min-width: @breakpoint) { 43 | height: @panel-width-tablet; 44 | } 45 | } 46 | 47 | .content { 48 | .position(relative, 0,0,0,0); 49 | .transform(translate3d(0,0,0)); 50 | background: @color-lightest; 51 | padding-top: @panel-width-mobile; 52 | z-index: 2; 53 | 54 | @media screen and (min-width: @breakpoint) { 55 | padding-top: @panel-width-tablet; 56 | margin-left: @sidebar-width; 57 | } 58 | } 59 | 60 | // Sidebar toggle 61 | body { 62 | .nav, 63 | .content { 64 | .transition(all 300ms @easing); 65 | } 66 | .sidebar, 67 | .sidebar-content { 68 | .transition(all 300ms @easing); 69 | } 70 | 71 | &.sidebar-visible { 72 | .sidebar { 73 | .transform(translateX(0)); 74 | 75 | .sidebar-content { 76 | .transform(translateX(0)); 77 | } 78 | 79 | //@media screen and (min-width: @breakpoint) { left: @panel-width-tablet; } 80 | 81 | //copied from above to override 82 | //@media screen and (min-width: (@breakpoint * 1.5)) { left: @panel-width; } 83 | } 84 | 85 | .content { 86 | //left: @sidebar-width; 87 | .transform(translateX(@sidebar-width)); 88 | 89 | @media screen and (min-width: (@breakpoint * 1.5)) { 90 | .transform(translateX(0)); 91 | } 92 | } 93 | } 94 | } 95 | 96 | // Sidebar search desktop 97 | .sidebar-content { 98 | .wrapper-desktop-search-results { 99 | .transition(all 300ms @easing); 100 | max-height: 0; 101 | overflow: hidden; 102 | opacity: 0; 103 | } 104 | 105 | .toc { 106 | .transition(all 300ms @easing); 107 | max-height: 300rem; 108 | opacity: 1; 109 | } 110 | 111 | &.searching { 112 | .wrapper-desktop-search-results { 113 | max-height: 100vh; 114 | overflow: visible; 115 | opacity: 1; 116 | } 117 | 118 | .toc { 119 | max-height: 0; 120 | overflow: hidden; 121 | opacity: 0; 122 | } 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /source/chapters/3/static-type-checking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Static Type Checking' 3 | description: Maintaining large projects 4 | disqusPage: 'Chapter 3: Static Type Checking' 5 | --- 6 | 7 | ## Why? 8 | 9 | Probably you have noticed it's a lot easier to develop new projects than support old ones. That's because of complexity that tends to grow fast as we add new features to the program. 10 | 11 | So, you might start breaking up your code into smaller modules, then add [testing](/chapters/3/testing.html)and maybe add some [linting](/chapters/3/linting.html). But what about the way those modules interact with each other? Wouldn't be great if we can define a contract that sets clear boundaries of what to except and enforce it? And that's where static type checking comes in. 12 | 13 | Also, Meteor has [some plans](https://github.com/meteor/meteor/pull/10522#issuecomment-511506265) to move on with TypeScript and is encouraging developers to help out with the [conversion to TypeScript](https://github.com/meteor/meteor/pulls?utf8=%E2%9C%93&q=is%3Apr+label%3AProject%3ATypeScript-conversion). But we'll be using [FlowType](https://flow.org/) which is supported by the [ecmascript package](https://atmospherejs.com/meteor/ecmascript). Flow is much easier to pick up and can be incrementally adopted. Don't worry if you can use one you won't face much trouble using the other. 14 | 15 | ## Install 16 | 17 | ```js 18 | meteor npm i --save-dev flow-bin eslint-plugin-flowtype 19 | ``` 20 | 21 | ## Config 22 | 23 | This is an opionated configuration. 24 | 25 | Create `.flowconfig` file inside your project root: 26 | 27 | ``` 28 | [options] 29 | # Absolute path support: 30 | # e.g. "/collections/todos" 31 | module.name_mapper='^\/\(.*\)$' -> '/\1' 32 | 33 | # Meteor none core package support 34 | # e.g. "meteor/kadira:flow-router" 35 | module.name_mapper='^meteor\/\(.*\):\(.*\)$' -> '/.meteor/local/build/programs/server/packages/\1_\2' 36 | 37 | # Meteor core package support 38 | # e.g. "meteor/meteor" 39 | module.name_mapper='^meteor\/\(.*\)$' -> '/.meteor/local/build/programs/server/packages/\1' 40 | 41 | # Fallback for Meteor core client package 42 | # e.g. "meteor/meteor" 43 | module.name_mapper='^meteor\/\(.*\)$' -> '/.meteor/local/build/programs/web.browser/packages/\1' 44 | 45 | # Structural mapping 46 | module.name_mapper='^modules\/\(.*\)$' -> '/src/modules/\1' 47 | module.name_mapper='^core\/\(.*\)$' -> '/src/modules/core/\1' 48 | module.name_mapper='^ui\/\(.*\)$' -> '/src/client/\1' 49 | 50 | [ignore] 51 | # Ignore the `.meteor/local` packages that aren't important 52 | .*/.meteor/local/build/programs/server/app/.* 53 | .*/.meteor/local/build/programs/server/assets/.* 54 | .*/.meteor/local/build/programs/server/npm/.* 55 | .*/.meteor/local/build/programs/server/node_modules/.* 56 | .*/.meteor/local/build/programs/web.browser/app/.* 57 | .*/.meteor/local/build/main.js 58 | .*/.meteor/packages/.* 59 | ``` 60 | 61 | If you're using vscode there're few [adjustments](https://github.com/flowtype/flow-for-vscode) to be made. And that's it, enjoy! -------------------------------------------------------------------------------- /source/chapters/3/linting.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Linting' 3 | description: Keeping your code standards high 4 | disqusPage: 'Chapter 3: Linting' 5 | --- 6 | 7 | ## Why? 8 | 9 | Because it takes you 2 minutes to set up, and the code quality respects the standards. Also you make it easier for code-reviewers, to spend time 10 | on thinking about what you did, rather than your coding standards mistakes. 11 | 12 | The thing is we need to automate this process, so we need to run the linting *before we commit*. 13 | And not allow a commits with bad code, this will force you to write beautiful code. 14 | 15 | ## Install 16 | 17 | Also, try integrating it with your IDE, for WebStorm look here: https://www.jetbrains.com/help/webstorm/eslint.html 18 | 19 | ```js 20 | meteor npm i --save-dev babel-eslint eslint eslint-plugin-import eslint-plugin-meteor eslint-plugin-react eslint-import-resolver-meteor lint-staged pre-commit 21 | ``` 22 | 23 | ## Config 24 | 25 | This is an opionated configuration. 26 | 27 | Create `.eslintrc.js` file inside your project root: 28 | ``` 29 | module.exports = { 30 | parserOptions: { 31 | allowImportExportEverywhere: true, 32 | ecmaFeatures: { 33 | jsx: true 34 | } 35 | }, 36 | env: { 37 | es6: true, 38 | browser: true, 39 | node: true 40 | }, 41 | plugins: ["meteor", "react"], 42 | extends: [ 43 | "eslint:recommended", 44 | "plugin:meteor/recommended", 45 | "plugin:react/recommended" 46 | ], 47 | settings: { 48 | "import/resolver": "meteor" 49 | }, 50 | rules: { 51 | "react/jsx-filename-extension": [ 52 | 1, 53 | { 54 | extensions: [".jsx"] 55 | } 56 | ], 57 | "react/jsx-no-bind": [ 58 | 2, 59 | { 60 | ignoreRefs: false, 61 | allowArrowFunctions: false, 62 | allowFunctions: false, 63 | allowBind: false 64 | } 65 | ], 66 | "max-len": [0, { code: 100 }], 67 | "import/no-absolute-path": [0], 68 | "meteor/audit-argument-checks": [0], 69 | indent: ["error", 4], 70 | "switch-colon-spacing": [0], 71 | "no-invalid-this": [0], 72 | "new-cap": [1], 73 | "no-trailing-spaces": [ 74 | 2, 75 | { 76 | skipBlankLines: true 77 | } 78 | ] 79 | }, 80 | overrides: [{ files: ["*.js", "*.jsx"] }] 81 | }; 82 | ``` 83 | 84 | In your `package.json` file add the following: 85 | 86 | ``` 87 | { 88 | ... 89 | "scripts": { 90 | "start": "meteor run --settings settings.json", 91 | "test": "meteor test --driver-package practicalmeteor:mocha --settings settings.json", 92 | "lint": "eslint . --ext .jsx --fix" 93 | }, 94 | "lint-staged": { 95 | "*.js": "eslint --fix", 96 | "*.jsx": "eslint --fix" 97 | }, 98 | "pre-commit": "lint-staged" 99 | } 100 | ``` 101 | 102 | Nice, now if you want to commit, it will try to lint your code first. And if any errors happen, it will not allow you to do so. 103 | 104 | If by any chance you are in a rush and you have a production bug and the whole world is burning! Try running: 105 | ``` 106 | git commit -m "xxx" -n 107 | ``` 108 | 109 | Using `-n` will bypass the linting and it will allow you to commit directly. -------------------------------------------------------------------------------- /source/chapters/1/methods.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Methods 3 | description: The RPC of Meteor. 4 | disqusPage: 'Chapter 1: Methods' 5 | --- 6 | 7 | ## RPC's - a way to express yourself 8 | 9 | Well, you are probably already asking yourself what is an RPC. Even if you have already googled the term, allow us to explain to you what an RPC is. 10 | 11 | First of all, RPC stands for "Remote Procedure Call", which basically means that you invoke "something" with some arguments ( only if you want to use arguments, of course). 12 | and you expect a response, just like you would do when in a conversation. 13 | 14 | In Meteor, the usual and most recommended way of doing this, is by communicating through a websocket with the server. 15 | 16 | So what actions we can do with RPC's ? 17 | - Fetching data 18 | - Inserting Data 19 | - Updating/Deleting Data 20 | - Making API calls 21 | - Anything you can possibly think of 22 | 23 | ## Let's create a method(or RPC) 24 | 25 | ``` 26 | // file /imports/api/methods.js 27 | import { Meteor } from 'meteor/meteor'; 28 | 29 | Meteor.methods({ 30 | 'find.random_number' (min, max) { 31 | if (!min) min = 0; 32 | if (!max) max = 100; 33 | const generatedNumber = Math.random() * (max - min) + min; 34 | return Math.floor(generatedNumber); 35 | }, 36 | }) 37 | 38 | ``` 39 | 40 | # Important 41 | Do not forget to `` import '/imports/api/methods.js' `` in the server's startup file: ` /imports/startup/server/index.js ` otherwise meteor won't know of the existence of this file 42 | 43 | ## Now...how to use it ? 44 | 45 | Methods can be called from the server-side or from the client-side. Let's try it in the browser's console: 46 | 47 | ```js 48 | Meteor.call('find.random_number', 25, 50, (err, result ) => { 49 | console.log(err); // in case an exception is thrown, then this will contain information about the error 50 | console.log(result); // this will contain a random number between 25 and 50 51 | }) 52 | ``` 53 | 54 | To fully understand the reason why we added 2 arguments `err` and `result`, go ahead and read the explanation [here](http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js/) 55 | 56 | ## Errors in methods 57 | 58 | Let's cause an error and see what happens: 59 | Type this code in the */imports/api/methods.js* file:3 60 | ```js 61 | // file /imports/api/methods.js 62 | import { Meteor } from 'meteor/meteor'; 63 | 64 | Meteor.methods({ 65 | 'method.checkString'(myString) { 66 | if (myString === 'exception') { 67 | throw new Meteor.Error(500, 'An error has occurred', 'You are not allowed to enter this string'); 68 | } 69 | 70 | return true; 71 | } 72 | // Arguments for throw new Meteor.Error: 73 | // The first argument (error): is something very general, can be a number like 500, 404, 74 | // The second argument (reason): is a description of the error 75 | // The third argument (details): is for providing more details about the error. 76 | }) 77 | ``` 78 | 79 | Now, make a method call in your browser's console to `method.checkString` and catch the exception: 80 | 81 | ```js 82 | Meteor.call('method.checkString', 'exception', (err, result) => { 83 | console.log(err); 84 | }) 85 | ``` -------------------------------------------------------------------------------- /themes/meteor/source/images/logo-coralspace-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 27 | 29 | 31 | 33 | 35 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /themes/meteor/layout/partials/illustration-github.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/Input.less: -------------------------------------------------------------------------------- 1 | //@import "../_util/index.import.less"; 2 | //@import "Textarea.less"; 3 | 4 | input { 5 | &.hidden { display: none; } 6 | } 7 | 8 | // Input's look like text fields 9 | input:not([type="checkbox"]):not([type="number"]):not([type="radio"]):not([type=submit]):not([type=file]), 10 | input[type="number"] { 11 | &:extend(textarea all); 12 | overflow: inherit; 13 | } 14 | 15 | // Remove default browser controls from number inputs for .cardinal 16 | input[type="number"] { 17 | .appearance(textfield); 18 | } 19 | 20 | /* Remove controls from Safari and Chrome */ 21 | input[type=number]::-webkit-inner-spin-button, 22 | input[type=number]::-webkit-outer-spin-button { 23 | -webkit-appearance: none; 24 | margin: 0; /* Removes leftover margin */ 25 | } 26 | 27 | input.secondary { 28 | &:extend(textarea.secondary all); 29 | } 30 | 31 | // Inputs with icons inside of them 32 | .input-symbol { 33 | .font-s2; 34 | display: inline-block; 35 | overflow: hidden; 36 | position: relative; 37 | 38 | > [class*="icon-"] { 39 | .transition( all 150ms ease-out ); 40 | .position(absolute, 50%, auto, auto, auto, 1em, 1em); 41 | font-size: 1em; 42 | margin-top: -.5em; //don't use transforms here, we animate this for alerts 43 | z-index: 1; 44 | 45 | background: transparent; 46 | color: @color-mediumdark; 47 | 48 | &.inverse { color: @color-mediumlight; } 49 | } 50 | 51 | input:focus + [class*="icon-"] { 52 | color: @color-darker; 53 | } 54 | 55 | > [class*="icon-"] { left: .8em; } 56 | > input { padding-left: 2.5em !important; } 57 | 58 | &.right { 59 | // Often used in conjunction with a button 60 | // e.g., Clearing a search field, submitting a single input form (mailing list) 61 | > [class*="icon-"] { 62 | right: .8em; 63 | left: auto; 64 | } 65 | 66 | > input { 67 | padding-right: 2.5em !important; 68 | padding-left: 1em !important; 69 | } 70 | 71 | &:before { right: 2.5rem; } 72 | } 73 | 74 | &.round { 75 | input:not([type="checkbox"]):not([type="number"]):not([type="radio"]):not([type=submit]):not([type=file]), 76 | input[type="number"] { 77 | border-radius: 3rem; 78 | padding-left: 2.75em !important; 79 | } 80 | 81 | > [class*="icon-"] { 82 | left: 1.25em; 83 | font-size: 95%; 84 | } 85 | } 86 | 87 | &.small { 88 | font-size: 13px; 89 | input:not([type="checkbox"]):not([type="number"]):not([type="radio"]):not([type=submit]):not([type=file]), 90 | input[type="number"] { &:extend(textarea.small); } 91 | } 92 | 93 | > input, 94 | > button { 95 | position: relative; 96 | width: 100%; 97 | } 98 | 99 | // Errors 100 | &:before { 101 | .position(absolute, 50%, 1.25rem); 102 | .transform(translate3d(100%, -50%, 0)); 103 | .transition(all 200ms ease-out); 104 | .font-s1; 105 | .type-italic; 106 | content: attr(data-error); 107 | line-height: 1em; 108 | opacity: 0; 109 | padding: .25em 0 .25em .5em; 110 | pointer-events: none; 111 | z-index: 1; 112 | 113 | background: rgba(255,255,255,.9); 114 | color: @color-negative; 115 | } 116 | 117 | &[data-error] { 118 | [class*="icon-"] { 119 | .animation(jiggle 700ms ease-out); 120 | color: @color-negative; 121 | } 122 | 123 | &:before { 124 | .transform(translate3d(0%, -50%, 0)); 125 | opacity: 1; 126 | 127 | color: @color-negative; 128 | } 129 | } 130 | } 131 | 132 | // Hacks for various browsers 133 | input:-webkit-autofill { 134 | //prevents autofill yellow backgrounds 135 | -webkit-box-shadow: 0 0 0 3em @color-lightest inset; 136 | } 137 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Hexo Configuration 2 | ## Docs: http://hexo.io/docs/configuration.html 3 | ## Source: https://github.com/hexojs/hexo/ 4 | 5 | # Site 6 | title: Meteor Tutorials 7 | subtitle: 8 | description: Meteor Tutorials - From Noob to PRO 9 | author: Theodor Diaconu 10 | language: en 11 | timezone: 12 | 13 | apis: 14 | ga: UA-40568040-10 15 | # docsearch: 16 | # apiKey: c6162b5842b0dc5f7af8c186fff8f5bb 17 | # indexName: grapher 18 | 19 | sidebar_categories: 20 | null: 21 | - index 22 | "Chapter 1": 23 | - chapters/1/intro 24 | - chapters/1/methods 25 | - chapters/1/collections 26 | - chapters/1/users 27 | - chapters/1/reactivity 28 | - chapters/1/pubsub 29 | - chapters/1/security 30 | - chapters/1/meteorSnacks 31 | - chapters/1/conclusion 32 | "Chapter 2": 33 | - chapters/2/intro 34 | - chapters/2/react 35 | - chapters/2/css 36 | - chapters/2/conclusion 37 | "Chapter 3": 38 | - chapters/3/intro 39 | - chapters/3/persistence-layer 40 | - chapters/3/testing 41 | - chapters/3/services 42 | - chapters/3/events 43 | - chapters/3/methods 44 | - chapters/3/publications 45 | - chapters/3/fixtures 46 | - chapters/3/reusable-modules 47 | - chapters/3/linting 48 | - chapters/3/static-type-checking 49 | - chapters/3/emails 50 | - chapters/3/microservices 51 | - chapters/3/structure 52 | - chapters/3/conclusion 53 | 54 | github_repo: "cult-of-coders/meteor-tuts" 55 | content_root: "source" 56 | 57 | # themeing 58 | favicon: "/images/favicon.png" 59 | 60 | logo: 61 | nav_mobile: "/images/logo.png" 62 | url: "http://www.cultofcoders.com" 63 | title: "Meteor Tuts" 64 | subtitle: "" 65 | 66 | nav_links: 67 | Meteor jobs: 68 | url: https://www.cultofcoders.com 69 | taget: _new 70 | Atmosphere: 71 | url: https://www.atmospherejs.com 72 | target: _new 73 | NPM: 74 | url: https://www.npmjs.com/ 75 | target: _new 76 | Meteor API: 77 | url: https://docs.meteor.com/ 78 | target: _new 79 | Meteor Guide: 80 | url: https://guide.meteor.com/ 81 | target: _new 82 | 83 | social_links: 84 | github: "https://github.com/cult-of-coders/meteor-tuts.com" 85 | twitter: "@culotfcoders" 86 | 87 | # URL 88 | ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' 89 | url: http://www.meteor-tuts.com 90 | root: / 91 | permalink: :year/:month/:day/:title/ 92 | permalink_defaults: 93 | 94 | # Directory 95 | source_dir: source 96 | public_dir: public 97 | tag_dir: tags 98 | archive_dir: archives 99 | category_dir: categories 100 | code_dir: downloads/code 101 | i18n_dir: :lang 102 | skip_render: 103 | 104 | # Writing 105 | new_post_name: :title.md # File name of new posts 106 | default_layout: post 107 | titlecase: false # Transform title into titlecase 108 | external_link: true # Open external links in new tab 109 | filename_case: 0 110 | render_drafts: false 111 | post_asset_folder: false 112 | relative_link: false 113 | future: true 114 | highlight: 115 | enable: true 116 | line_number: true 117 | auto_detect: true 118 | tab_replace: 119 | 120 | # Category & Tag 121 | default_category: uncategorized 122 | category_map: 123 | tag_map: 124 | 125 | # Date / Time format 126 | ## Hexo uses Moment.js to parse and display date 127 | ## You can customize the date format as defined in 128 | ## http://momentjs.com/docs/#/displaying/format/ 129 | date_format: YYYY-MM-DD 130 | time_format: HH:mm:ss 131 | 132 | # Pagination 133 | ## Set per_page to 0 to disable pagination 134 | per_page: 10 135 | pagination_dir: page 136 | 137 | # Extensions 138 | ## Plugins: http://hexo.io/plugins/ 139 | ## Themes: http://hexo.io/themes/ 140 | theme: meteor 141 | marked: 142 | breaks: false 143 | 144 | # Deployment 145 | ## Docs: http://hexo.io/docs/deployment.html 146 | deploy: 147 | type: s3 148 | -------------------------------------------------------------------------------- /source/chapters/3/emails.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Emails' 3 | description: How to work with emails 4 | disqusPage: 'Chapter 3: Emails' 5 | --- 6 | 7 | Most of the apps send out emails, but what is the best way to do it ? 8 | 9 | Well, I don't know about the best, but let's explore this solution. 10 | 11 | We want emails to: 12 | - Be able to be found easily in a centralized place. It's very important they are not spread all over the app so we have control over them. 13 | - Be able to have a nice layout for everyone of them 14 | - Be easy to develop and easy to maintain 15 | 16 | So, if we want to keep them centralized, it's clear that we must use [Events](/chapters/3/events.html). Therefore, 17 | whenever we want to send an email we need to dispatch an event. 18 | 19 | So, how do we render our emails ? React baby! 20 | 21 | So we want to create a service that sends an email based on a React template. Let's see how it would look like: 22 | 23 | ```js 24 | // file: /imports/api/emails/send.js 25 | import {Email} from 'meteor/email'; 26 | import {Meteor} from 'meteor/meteor'; 27 | import React from 'react'; 28 | import ReactDOM from 'react-dom/server'; 29 | 30 | const debug = Meteor.isDevelopment; 31 | // const debug = false; 32 | 33 | /** 34 | * React Email Sender 35 | */ 36 | export default function (mailConfig, Component, props) { 37 | const element = React.createElement(Component, props); 38 | 39 | let options = _.extend({}, { 40 | from: 'notifications@app.com', // or get it from Meteor.settings 41 | html: ReactDOM.renderToString(element) 42 | }, mailConfig); 43 | 44 | if (debug) { 45 | console.log(options); 46 | } else { 47 | // so it won't lag your methods 48 | Meteor.defer(() => { 49 | Email.send(options); 50 | }) 51 | } 52 | } 53 | ``` 54 | 55 | Cool I think it's self descriptive what this function does, here is how it would look in a real-life scenario: 56 | 57 | ```bash 58 | // file: /imports/api/emails/templates/NewItemCreated.jsx 59 | import React from 'react'; 60 | import PropTypes from 'prop-types'; 61 | 62 | const NewItem = ({item}) { 63 | return ( 64 |
This is your new {item.title}
65 | ) 66 | } 67 | 68 | NewItem.propTypes = { 69 | item: PropTypes.object, 70 | }; 71 | 72 | export default NewItem; 73 | ``` 74 | 75 | And to actually send it: 76 | 77 | ```js 78 | // file: /imports/api/emails/listeners.js 79 | import send from './send'; 80 | import {Items} from '/imports/db'; 81 | import {Emitter, Events} from '/imports/api/events'; 82 | 83 | import ItemNewEmail from '/imports/api/emails/templates/NewItemCreated.jsx' 84 | 85 | Emitter.on(Events.ITEM_NEW, function ({itemId}) { 86 | const item = Items.findOne(itemId); 87 | 88 | send({ 89 | to: 'rick.astley@never-gonna-give-you-up.com', 90 | subject: 'Never gonna let you down!' 91 | }, ItemNewEmail, {item}) 92 | }); 93 | ``` 94 | 95 | Now if you want to create a layout enveloping your template it's quite easy, you would do something like: 96 | 97 | ```bash 98 | // ... 99 | const Layout = function({children, header}) { 100 | return ( 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
{headerText}
{children}
111 | ) 112 | } 113 | ``` 114 | 115 | And because we want to keep the send email as flexible as possible we will use the layout inside our templates: 116 | 117 | ```bash 118 | // ... 119 | const ItemNewEmail = ({item}) { 120 | return ( 121 | 122 | This is your new item: {item.title} 123 | 124 | ); 125 | } 126 | ``` 127 | 128 | Both `Layout` and `ItemNewEmail` can change in anyway you like, depending on your context. 129 | Of course you can have multiple layouts, or no layout, it's up to the **email template to decide, not the send function**, don't forget this. 130 | 131 | Isn't this easy and clean ? -------------------------------------------------------------------------------- /themes/meteor/source/script/smooth-scroll.min.js: -------------------------------------------------------------------------------- 1 | /*! smooth-scroll v7.1.1 | (c) 2015 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */ 2 | !function(e,t){"function"==typeof define&&define.amd?define([],t(e)):"object"==typeof exports?module.exports=t(e):e.smoothScroll=t(e)}("undefined"!=typeof global?global:this.window||this.global,function(e){"use strict";var t,n,o,r,a={},u="querySelector"in document&&"addEventListener"in e,c={selector:"[data-scroll]",selectorHeader:"[data-scroll-header]",speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callback:function(){}},i=function(){var e={},t=!1,n=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);for(var r=function(n){for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t&&"[object Object]"===Object.prototype.toString.call(n[o])?e[o]=i(!0,e[o],n[o]):e[o]=n[o])};o>n;n++){var a=arguments[n];r(a)}return e},s=function(e){return Math.max(e.scrollHeight,e.offsetHeight,e.clientHeight)},l=function(e,t){var n,o,r=t.charAt(0),a="classList"in document.documentElement;for("["===r&&(t=t.substr(1,t.length-2),n=t.split("="),n.length>1&&(o=!0,n[1]=n[1].replace(/"/g,"").replace(/'/g,"")));e&&e!==document;e=e.parentNode){if("."===r)if(a){if(e.classList.contains(t.substr(1)))return e}else if(new RegExp("(^|\\s)"+t.substr(1)+"(\\s|$)").test(e.className))return e;if("#"===r&&e.id===t.substr(1))return e;if("["===r&&e.hasAttribute(n[0])){if(!o)return e;if(e.getAttribute(n[0])===n[1])return e}if(e.tagName.toLowerCase()===t)return e}return null},f=function(e){for(var t,n=String(e),o=n.length,r=-1,a="",u=n.charCodeAt(0);++r=1&&31>=t||127==t||0===r&&t>=48&&57>=t||1===r&&t>=48&&57>=t&&45===u?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&57>=t||t>=65&&90>=t||t>=97&&122>=t?n.charAt(r):"\\"+n.charAt(r)}return a},d=function(e,t){var n;return"easeInQuad"===e&&(n=t*t),"easeOutQuad"===e&&(n=t*(2-t)),"easeInOutQuad"===e&&(n=.5>t?2*t*t:-1+(4-2*t)*t),"easeInCubic"===e&&(n=t*t*t),"easeOutCubic"===e&&(n=--t*t*t+1),"easeInOutCubic"===e&&(n=.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e&&(n=t*t*t*t),"easeOutQuart"===e&&(n=1- --t*t*t*t),"easeInOutQuart"===e&&(n=.5>t?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e&&(n=t*t*t*t*t),"easeOutQuint"===e&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e&&(n=.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t),n||t},m=function(e,t,n){var o=0;if(e.offsetParent)do o+=e.offsetTop,e=e.offsetParent;while(e);return o=o-t-n,o>=0?o:0},h=function(){return Math.max(e.document.body.scrollHeight,e.document.documentElement.scrollHeight,e.document.body.offsetHeight,e.document.documentElement.offsetHeight,e.document.body.clientHeight,e.document.documentElement.clientHeight)},p=function(e){return e&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(e):{}},g=function(t,n){e.history.pushState&&(n||"true"===n)&&"file:"!==e.location.protocol&&e.history.pushState(null,null,[e.location.protocol,"//",e.location.host,e.location.pathname,e.location.search,t].join(""))},b=function(e){return null===e?0:s(e)+e.offsetTop};a.animateScroll=function(t,n,a){var u=p(t?t.getAttribute("data-options"):null),s=i(s||c,a||{},u);n="#"+f(n.substr(1));var l="#"===n?e.document.documentElement:e.document.querySelector(n),v=e.pageYOffset;o||(o=e.document.querySelector(s.selectorHeader)),r||(r=b(o));var y,O,S,I=m(l,r,parseInt(s.offset,10)),H=I-v,E=h(),L=0;g(n,s.updateURL);var j=function(o,r,a){var u=e.pageYOffset;(o==r||u==r||e.innerHeight+u>=E)&&(clearInterval(a),l.focus(),s.callback(t,n))},w=function(){L+=16,O=L/parseInt(s.speed,10),O=O>1?1:O,S=v+H*d(s.easing,O),e.scrollTo(0,Math.floor(S)),j(S,I,y)},C=function(){y=setInterval(w,16)};0===e.pageYOffset&&e.scrollTo(0,0),C()};var v=function(e){var n=l(e.target,t.selector);n&&"a"===n.tagName.toLowerCase()&&(e.preventDefault(),a.animateScroll(n,n.hash,t))},y=function(e){n||(n=setTimeout(function(){n=null,r=b(o)},66))};return a.destroy=function(){t&&(e.document.removeEventListener("click",v,!1),e.removeEventListener("resize",y,!1),t=null,n=null,o=null,r=null)},a.init=function(n){u&&(a.destroy(),t=i(c,n||{}),o=e.document.querySelector(t.selectorHeader),r=b(o),e.document.addEventListener("click",v,!1),o&&e.addEventListener("resize",y,!1))},a}); 3 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/Select.less: -------------------------------------------------------------------------------- 1 | @import "../_util/index.import.less"; 2 | @import "icon.less"; 3 | 4 | // Select Theme 5 | .select{ 6 | display: inline-block; 7 | 8 | select { 9 | .font-s2; 10 | border: none; 11 | border-radius: 0; 12 | color: @color-darkest; 13 | line-height: inherit; 14 | margin: 0; 15 | outline: none; 16 | 17 | &[disabled] { 18 | opacity: .5; 19 | } 20 | } 21 | } 22 | 23 | 24 | // Palette 25 | .select { 26 | //down arrow 27 | &:after {} 28 | // background of arrow 29 | &:before { background-color: @color-light; } 30 | // background 31 | select { background-color: @color-light; } 32 | 33 | &.inverse { 34 | //down arrow 35 | &:after { color: @color-lightest; } 36 | // background of arrow 37 | &:before { background-color: @color-darker; } 38 | // background 39 | select { 40 | background-color: @color-darker; 41 | color: @color-lightest; 42 | } 43 | } 44 | 45 | &.nochrome { 46 | // down arrow 47 | &:after { 48 | border: none; 49 | right: 0; 50 | } 51 | // bakcground of arrow 52 | &:before { content: none; } 53 | // background 54 | select { 55 | padding: 11px 2em 11px 0; 56 | 57 | .type-bold; 58 | background-color: transparent; 59 | text-decoration: none; 60 | } 61 | } 62 | } 63 | 64 | // Select layout 65 | .select { 66 | display: inline-block; 67 | height: 40px; 68 | line-height: normal; 69 | overflow: hidden; 70 | position: relative; 71 | 72 | select { 73 | .appearance(none); 74 | border: 0; 75 | padding: 11px 3em 11px 1em; 76 | position: relative; 77 | outline: none; 78 | width: 100%; 79 | } 80 | 81 | &:before, 82 | &:after { 83 | position: absolute; 84 | z-index: 1; 85 | pointer-events: none; 86 | } 87 | 88 | &:after { 89 | //position the icon-font 90 | font-size: .75em; 91 | height: 5px; 92 | margin-top: -.5em; 93 | right: 12px; 94 | top: 50%; 95 | 96 | // Taken from package percolate:icons/edited-style.less 97 | font-family: 'percolate'; 98 | speak: none; 99 | font-style: normal; 100 | font-weight: normal; 101 | font-variant: normal; 102 | text-transform: none; 103 | line-height: 1; 104 | -webkit-font-smoothing: antialiased; 105 | -moz-osx-font-smoothing: grayscale; 106 | 107 | /* Down arrow */ 108 | &:extend(.icon-arrow-down:before); 109 | } 110 | 111 | &:before { 112 | content: ""; 113 | bottom: 0; 114 | right: 0; 115 | top: 0; 116 | width: 2em; 117 | } 118 | 119 | &.select-symbol { 120 | //refer to .input-symbol 121 | select { padding-left: 2.5em; } 122 | 123 | [class*="icon-"] { 124 | .transition( all 150ms ease-out ); 125 | .position(absolute, 50%, auto, auto, .8em, 1em, 1em); 126 | font-size: 1em; 127 | margin-top: -.5em; 128 | z-index: 1; 129 | 130 | color: @color-mediumdark; 131 | } 132 | 133 | &.inverse [class*="icon-"] { color: @color-mediumlight; } 134 | 135 | select:focus + [class*="icon-"] { 136 | color: @color-darker; 137 | } 138 | } 139 | 140 | &[data-error] { 141 | [class*="icon"] { 142 | .animation(jiggle 700ms ease-out); 143 | color: @color-negative; 144 | } 145 | 146 | // Error message 147 | &:before { 148 | .transition(all 300ms @easing); 149 | .font-s1; 150 | .type-italic; 151 | 152 | color: @color-negative; 153 | content: attr(data-error); 154 | line-height: 40px; 155 | padding-right: 2.75em; 156 | 157 | //reset c-select 158 | width: auto; 159 | min-width: 2rem; 160 | } 161 | } 162 | } 163 | 164 | //FF styling/hack 165 | @-moz-document url-prefix() { 166 | .select select { 167 | padding-right: 2em; 168 | padding-top: 10px; /* off by 1px */ 169 | &:-moz-focusring { 170 | color: transparent; 171 | text-shadow: 0 0 0 #000; 172 | } 173 | } 174 | 175 | .select.nochrome select { 176 | -moz-appearance: none; 177 | padding-right: 1em; 178 | padding-top: 9px; /* off by 1px */ 179 | text-indent: 0.01px; 180 | text-overflow: ''; 181 | } 182 | } 183 | 184 | .select-label { 185 | .select { 186 | width: 100%; 187 | } 188 | } 189 | -------------------------------------------------------------------------------- /source/chapters/1/security.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Security 3 | description: Let's talk about Security 4 | disqusPage: 'Chapter 1: Security' 5 | --- 6 | 7 | Security is a very important aspect of any application. When your codebase grows, security must be one of the core aspects 8 | that you address. Users need to feel that the data they give you via the application is secure and that it respects the three 9 | most important requirements of data security - CIA: 10 | - **C**onfidentiality 11 | - **I**ntegrity 12 | - **A**vailability. 13 | 14 | Let's start by securing our methods and publications, then we will talk about implementing security best practices for an evergrowing code base. 15 | 16 | ## Securing methods and publications in Meteor 17 | 18 | Remember our talk about users ? 19 | ```js 20 | Meteor.methods({ 21 | 'do_something': function () { 22 | console.log(this.userId); 23 | } 24 | }) 25 | ``` 26 | Here you get access to the userId, which represents the logged in user. If your user is not logged in, its value will be null. 27 | 28 | 29 | The same goes for publications: 30 | ```js 31 | Meteor.publish('something', function () { 32 | console.log(this.userId); 33 | return this.ready(); 34 | }) 35 | ``` 36 | 37 | ## Managing roles, or "who's who" 38 | 39 | Based on the userId you can check if he/she is logged in, the roles it has in the system, the privileges granted to 40 | that user and, basically, you can do anything you want. 41 | 42 | We recommend installing the [alanning:roles](https://atmospherejs.com/alanning/roles) package: 43 | ``` 44 | meteor add alanning:roles 45 | ``` 46 | 47 | ## Order! 48 | 49 | Now let's centralize all of our security in */imports/api/security.js*, so we can see how the "big picture" looks like: 50 | ```js 51 | import { Roles } from 'meteor/alanning:roles'; 52 | 53 | export default class Security { 54 | static checkRole(userId, role) { 55 | if (!this.hasRole(userId, role)) { 56 | throw new Meteor.Error('not-authorized'); 57 | } 58 | } 59 | 60 | static hasRole(userId, role) { 61 | return Roles.userIsInRole(userId, role); 62 | } 63 | 64 | static checkLoggedIn(userId) { 65 | if (!userId) { 66 | throw new Meteor.Error('not-authorized', 'You are not authorized'); 67 | }; 68 | } 69 | // add other business logic checks here that you use throughout the app 70 | // something like: isUserAllowedToSeeDocument() 71 | } 72 | ``` 73 | Word of advice: always keep decoupling your code if classes get huge. And by decoupling we mean that you should separate 74 | code into classes, depending on its functionality. Big classes, with multiple functionalities will make it much harder 75 | to debug your application in case errors appear. Because of this, we strongly recommend that you abide to KISS : Keep It Smart and Simple. 76 | 77 | Pretty KISS, right ? The reason for which we centralize security in one place is to remove the boilerplate code from 78 | inside our methods and separate the purposes of each code file. 79 | You can however structure your application however you want. There is no right or wrong. 80 | However, from our experience, the applications that are structured like this are easier to maintain, and this kind of structure 81 | helps beginners write secure code right from the start! 82 | 83 | Let's now cover some simple use cases: 84 | ```js 85 | import {Meteor} from 'meteor/meteor' 86 | import {Posts} from '/db'; 87 | import Security from '/imports/api/security'; 88 | 89 | Meteor.methods({ 90 | 'do_something': function () { 91 | // throw exception if the user is not logged it: 92 | Security.checkLoggedIn(this.userId); 93 | 94 | // throw exception if the user does not have a role: 95 | Security.checkRole(this.userId, 'ADMIN'); 96 | 97 | if (Security.hasRole('ADMIN')) { 98 | return sensitiveData; 99 | } else { 100 | return publicData; 101 | } 102 | } 103 | }); 104 | ``` 105 | 106 | Publications usage shouldn't be too hard: 107 | ```js 108 | 109 | import Security from '/imports/api/security.js'; 110 | import {Meteor} from "meteor/meteor"; 111 | 112 | Meteor.publish('posts', function () { 113 | let filters = {}; 114 | if (!Security.hasRole(this.userId, 'ADMIN')) { 115 | // if the user is not an admin, we only show posts where "isPublic" is true 116 | filters.isPublic = true; 117 | } 118 | 119 | return Posts.find(filters); 120 | }) 121 | ``` 122 | 123 | You can now build secure apps with Meteor! 124 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_theme/content.less: -------------------------------------------------------------------------------- 1 | .top-information { 2 | position: fixed; 3 | bottom: 0; 4 | background: #f9deac; 5 | z-index: 9999; 6 | text-align: center; 7 | padding: 20px 0; 8 | width: 100%; 9 | display: none; 10 | color: #525252; 11 | font-weight: bold; 12 | a { 13 | color: #ca5b11; 14 | } 15 | } 16 | 17 | .content { 18 | .content-wrapper { 19 | .std-xpadding; 20 | .std-ypadding; 21 | .page-margins; 22 | overflow: auto; 23 | @media screen and (min-width: @breakpoint) { 24 | padding-top: 3rem; 25 | } 26 | } 27 | 28 | .anchor-offset { 29 | //offsets anchor links so the title is not hidden by header 30 | display: block; 31 | position: relative; 32 | top: -55px; 33 | @media screen and (min-width: @breakpoint) { 34 | top: -71px; 35 | } 36 | visibility: hidden; 37 | } 38 | 39 | .header-content { 40 | margin-bottom: 2rem; 41 | 42 | .title-page { 43 | .font-l1; 44 | @media screen and (min-width: @breakpoint) { 45 | .font-l2; 46 | } 47 | 48 | .type-light; 49 | color: @color-primary; 50 | margin-bottom: 0.5rem; 51 | } 52 | 53 | .subtitle-page { 54 | .font-m1; 55 | .type-light; 56 | line-height: 1.2; 57 | margin-bottom: 1rem; 58 | 59 | @media screen and (min-width: @breakpoint) { 60 | .font-m2; 61 | line-height: 1.32; 62 | } 63 | } 64 | 65 | .page-actions { 66 | margin: 1rem 0; 67 | a { 68 | margin-right: 0.5rem; 69 | } 70 | } 71 | } 72 | 73 | .api { 74 | .font-s3; 75 | background: @color-lightest; 76 | border: 1px solid @color-mediumlight; 77 | margin: 1.5em 0; 78 | 79 | .api-heading { 80 | background: @color-lighter; 81 | padding: 1rem 1.25rem 1.25rem; 82 | 83 | .locus { 84 | .font-s2; 85 | .type-italic; 86 | color: @color-dark; 87 | float: right; 88 | line-height: 24px; 89 | } 90 | 91 | .title-api { 92 | .type-code; 93 | .font-code; 94 | margin: 0; 95 | padding: 0; 96 | 97 | .anchor { 98 | display: none; 99 | } 100 | 101 | em { 102 | .type-italic; 103 | } 104 | } 105 | 106 | .subtext-api { 107 | .font-s2; 108 | 109 | .code { 110 | .font-code; 111 | .type-code; 112 | display: inline-block; 113 | margin-right: 20px; 114 | } 115 | 116 | .src-code { 117 | &:extend(.link.tertiary); 118 | } 119 | } 120 | } 121 | 122 | .api-body { 123 | .font-s2; 124 | padding: 1.25rem 1.25rem; 125 | 126 | .subheading { 127 | .font-s1; 128 | .subheading-caps; 129 | color: @color-mediumdark; 130 | margin: 0.5rem 0 0.5rem; 131 | } 132 | 133 | .desc:not(:only-child) { 134 | margin-bottom: 1.25em; 135 | } 136 | 137 | p { 138 | &:only-child { 139 | margin: 0; 140 | } 141 | 142 | &:first-child { 143 | margin-top: 0; 144 | } 145 | } 146 | 147 | dl { 148 | padding-left: 0; 149 | 150 | dt { 151 | .term-code; 152 | } 153 | 154 | dd { 155 | margin-left: 0; 156 | } 157 | } 158 | } 159 | } 160 | 161 | .pagination { 162 | border-top: 1px solid @color-mediumlight; 163 | border-bottom: 1px solid @color-mediumlight; 164 | margin-bottom: 1.5rem; 165 | 166 | .link { 167 | .font-s2; 168 | @media screen and (min-width: @breakpoint) { 169 | .font-s3; 170 | } 171 | 172 | float: left; 173 | position: relative; 174 | 175 | &:hover { 176 | text-decoration: none; 177 | } 178 | } 179 | 180 | .prev { 181 | [class^="icon-"] { 182 | left: -2em; 183 | } 184 | } 185 | 186 | .next { 187 | float: right; 188 | text-align: right; 189 | 190 | .subtitle-pagination { 191 | margin-right: -0.35em; 192 | } 193 | 194 | [class^="icon-"] { 195 | right: -2em; 196 | } 197 | } 198 | 199 | .subtitle-pagination { 200 | .subheading-caps; 201 | .font-s1; 202 | color: @color-medium; 203 | display: block; 204 | line-height: 1; 205 | } 206 | 207 | [class^="icon-"] { 208 | .position(absolute, 25%); 209 | display: none; 210 | 211 | @media screen and (min-width: @breakpoint) { 212 | display: block; 213 | } 214 | } 215 | } 216 | 217 | .github { 218 | padding-bottom: 1.5rem; 219 | text-align: center; 220 | } 221 | 222 | .objdesc > dt { 223 | .term-code; 224 | } 225 | } 226 | -------------------------------------------------------------------------------- /source/chapters/1/pubsub.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Publications & Subscriptions 3 | description: Building reactive apps with Meteor 4 | disqusPage: 'Chapter 1: Pub/Sub' 5 | --- 6 | 7 | ## Going Live 8 | 9 | To be able to understand what we mean when we say Pub/sub in Meteor, we need to explain to you what a pub/sub system is in the first place. 10 | 11 | The explanation is fairly straightforward: a pub/sub system is a communication system, where the "publishers" send messages 12 | to the "subscribers". Which is why, in Meteor, you will meet, very frequently, the term of **"reactive data"**. 13 | 14 | Having this feature available in Meteor means that we can build **live applications**. If we go to our post example, 15 | and we add a new post, all the users that are **subscribed** to that data will see the changes made to the data in real time. 16 | 17 | ## Publishing in Meteor 18 | 19 | So how would we explain publishing in a very simple manner ? Well, let's assume you're talking to a friend about your application, 20 | and you want to give him access to your data. In other words, you are going to make that data **public** for him. 21 | As such, **publishing** would be equivalent to saying "I will give you access to this data !". 22 | 23 | ```js 24 | //file /imports/api/posts/publications.js 25 | import { Meteor } from 'meteor/meteor'; 26 | import Posts from '/imports/db/posts/collection'; 27 | 28 | Meteor.publish('posts', function () { 29 | return Posts.find(); 30 | }) 31 | ``` 32 | 33 | Now, don't forget to import it in `/imports/startup/server/index.js`! 34 | 35 | It's a basic rule that a publication needs to return 2 things: 36 | 1. A cursor 37 | 2. An array of cursors 38 | 39 | It is because of this rule that we aren't using `.fetch()` in our code. 40 | 41 | ## What is a cursor? 42 | 43 | A good way to think about a cursor is to think of it as if you would think of an "address". 44 | In the example above, we returned an address to all posts. 45 | 46 | Q: Wait, isn't that also what methods do ?
47 | A: Yes, but by using publications we benefit from reactivity. 48 | 49 | Q: Ok, so when should I use methods and when should i use pub/sub ?
50 | A: You should use pub/sub when you want your data changes to be **live**. Otherwise you should stick to using methods. 51 | 52 | ## Subscribing 53 | 54 | We have now published the data changes, but how are the users going to know about the data that we've made available for them ? 55 | Well, that's where subscriptions come in ! If we are to use the "friend" analogy that we have used to explain **publishing**, 56 | the friend to which we have given access to the data will say: "Hey! I want access to the data you are offering me." 57 | 58 | You noticed that when we created our publication, we first passed a string to it in the code called 'posts'. 59 | We must use that same string in order to subscribe to the publication. 60 | 61 | Go to http://localhost:3000 and the console in your browser's . Then, type into it: 62 | ```js 63 | var handler = Meteor.subscribe('posts'); 64 | ``` 65 | 66 | ```js 67 | handler.ready(); // / will return true/false if the subscription is ready 68 | ``` 69 | 70 | ```js 71 | handler.stop(); // will return true/false and stop listening to changes 72 | ``` 73 | 74 | The variable *handler* contains: 75 | -a *subscriptionId*, which is a unique identifier for the subscription 76 | - *ready()*, which is a function that returns true, if the subscription is ready 77 | - *stop()*, which is a function that will stop the subscription 78 | 79 | When a subscription is ready, it means that the server got your request, and it gave the specified user access to the **live** data. 80 | 81 | How the data is served to us is a very interesting process, but in order to dive into that process, we must first have to 82 | have a good understanding of Client-Side collections. 83 | 84 | ## Observing Changes 85 | 86 | Now every time something in the "address" changes, like a new element is inserted, or updated, or removed, Meteor will communicate that to you, 87 | because you subscribed to that publication, and the cursor will change, to a new address. 88 | 89 | ## Managing subscriptions 90 | 91 | Just keep in mind: when **handle.ready()** returns *true*, if it is followed by a `.find().fetch()`, the results might be empty. 92 | That's because *ready()* returning a *true* value does not mean that you got all the data. 93 | Instead, it means that the connections was established, and Meteor will pump the data there. 94 | 95 | If you want to read more about how pub/sub works, click [here](https://docs.meteor.com/api/pubsub.html) 96 | 97 | In order to see this how fully works in a practical way, you could clone our [github repository](https://github.com/cult-of-coders/meteor-tuts-tutorial/tree/5-pub/sub) and on `/posts/reactive` you can see the process. 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/formatting.less: -------------------------------------------------------------------------------- 1 | @import "../_util/index.import.less"; 2 | 3 | .document-formatting { 4 | @spacing: 1.5em; 5 | 6 | 7 | h1, h2, h3, h4 { 8 | line-height: 1em; 9 | 10 | &:not(:first-child) { 11 | margin-top: 4rem; 12 | } 13 | 14 | & + * { 15 | margin-top: @spacing / 2 !important; 16 | } 17 | } 18 | 19 | hr + * { margin-top: 0 !important; } 20 | 21 | h2 { 22 | .font-l1; 23 | .type-light; 24 | margin-bottom: 1rem; 25 | } 26 | 27 | h3 { 28 | .font-m3; 29 | .type-light; 30 | margin-bottom: .25rem; 31 | } 32 | 33 | h4 { 34 | .font-m1; 35 | margin-bottom: .125rem; 36 | } 37 | 38 | // for theme's anchor links 39 | h2, 40 | h3 { 41 | position: relative; 42 | 43 | .anchor { 44 | .font-s3; 45 | .transform(translateY(-50%)); 46 | .link(@color-medium); 47 | margin-right: 6px; 48 | 49 | @media screen and (min-width: @breakpoint) { 50 | .position(absolute, 50%, auto, auto, -30px); 51 | } 52 | 53 | &:hover { color: @color-primary !important; } 54 | } 55 | } 56 | 57 | p { 58 | margin: @spacing 0; 59 | position: relative; 60 | 61 | &:first-of-type:not(:only-of-type) { margin-top: 0; } 62 | &:only-of-type { margin: 0; } 63 | } 64 | 65 | a code { 66 | text-decoration: underline; 67 | } 68 | 69 | p a, 70 | li a { 71 | .link(@color-primary); 72 | .type-normal; 73 | text-decoration: underline; 74 | } 75 | 76 | figure { 77 | clear: both; 78 | margin: @spacing 0; 79 | 80 | figcaption { 81 | .font-s1; 82 | color: @color-mediumdark; 83 | } 84 | } 85 | 86 | img { 87 | display: inline-block; 88 | padding: 0 20px; 89 | max-width: 100%; 90 | position: relative; 91 | vertical-align: top; 92 | 93 | &.alignright{ 94 | float: right; 95 | margin-right: 0; 96 | } 97 | 98 | &.alignleft{ 99 | float: left; 100 | margin-left: 0; 101 | } 102 | 103 | &.aligncenter{ 104 | display: block; 105 | margin-bottom: @spacing; 106 | margin-left: auto; 107 | margin-right: auto; 108 | margin-top: @spacing; 109 | } 110 | } 111 | 112 | blockquote { 113 | border-left: 2px solid @color-primary; 114 | color: @color-dark; 115 | margin: @spacing 0; 116 | padding: .75em 20px .75em 30px; 117 | 118 | p:only-of-type { margin: 0; } 119 | } 120 | 121 | ol, 122 | ul { 123 | list-style-position: outside; 124 | margin-bottom: @spacing/2; 125 | margin-top: @spacing/2; 126 | padding-left: 30px; 127 | } 128 | 129 | ol { list-style-type: decimal; } 130 | ul { list-style-type: disc; } 131 | 132 | *:not(figure.highlight) pre { 133 | margin-top: @spacing/2; 134 | margin-bottom: @spacing/2; 135 | 136 | code { 137 | .ellipsized; 138 | border: none; 139 | box-shadow: none; 140 | color: @color-darkest; 141 | margin: 0; 142 | max-width: 100%; 143 | padding: 0; 144 | } 145 | } 146 | 147 | 148 | .highlight { 149 | .font-s2; 150 | overflow-x: auto; 151 | 152 | table { width: 100%; } 153 | 154 | .gutter { width: 40px; } 155 | 156 | .gutter pre { 157 | margin: 0; 158 | padding: @spacing 10px; 159 | text-align: right; 160 | } 161 | 162 | .code { 163 | .line { 164 | height: 18px; 165 | } 166 | pre { 167 | overflow-y: auto; 168 | overflow-x: auto; 169 | padding: @spacing 15px @spacing 20px; 170 | margin: 0; 171 | white-space: pre; 172 | } 173 | } 174 | } 175 | 176 | dl { 177 | padding-left: 30px; 178 | margin: 0; 179 | 180 | &:not(:last-of-type) { 181 | margin-bottom: @spacing; 182 | margin-top: @spacing; 183 | } 184 | 185 | dt { 186 | .type-semibold; 187 | 188 | &:not(:first-child) { margin-top: 1em; } 189 | 190 | code { line-height: inherit; } 191 | } 192 | 193 | dd { 194 | margin: 0; 195 | } 196 | } 197 | 198 | // Tables based on GH markdown format 199 | // table { 200 | // .font-s2; 201 | // padding: 0; 202 | // } 203 | // table tr { 204 | // border-top: 1px solid @color-mediumlight; 205 | // background-color: white; 206 | // margin: 0; 207 | // padding: 0; 208 | // } 209 | // table tr:nth-child(2n) { 210 | // background-color: @color-light; 211 | // } 212 | // table tr th { 213 | // font-weight: bold; 214 | // border: 1px solid @color-medium; 215 | // border-radius: 3px 3px 0 0; 216 | // text-align: left; 217 | // margin: 0; 218 | // padding: .5rem .75rem; 219 | // } 220 | // table tr td { 221 | // border: 1px solid #ddd; 222 | // text-align: left; 223 | // margin: 0; 224 | // padding: .5rem 1rem; 225 | // } 226 | // 227 | // table tr th :first-child, table tr td:first-child { 228 | // margin-top: 0; 229 | // } 230 | // 231 | // table tr th :last-child, table tr td:last-child { 232 | // margin-bottom: 0; 233 | // } 234 | // 235 | } 236 | -------------------------------------------------------------------------------- /source/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome 3 | description: 'Getting acquainted with Meteor' 4 | disqusPage: 'Welcome' 5 | --- 6 | 7 |

Hello and Welcome!

8 | 9 | First of all, welcome aboard and congratulations on your choice of embarking on this journey. But before we start, let me tell you a little story:
10 | As years passed by and humanity evolved, apps have literally changed the way in which the world works, giving us the chance to simplify and optimize many aspects of our lives. 11 | Having things simplified gave us more time, time which we, as humans started to use smartly by finding a way so simplify the process of building apps. 12 | As a result of those efforts MeteorJS was born. 13 | 14 | **Important!** 15 | To further help your understanding we have set a [github repository](https://github.com/cult-of-coders/meteor-tuts-tutorial) where you can find a branch for each of the sections 16 | you will complete on this tutorial. 17 | 18 | 19 | 20 |

What is Meteor?

21 | 22 | Meteor is an open-source JavaScript-based framework which allows the developing of complex web and mobile apps at a fast pace. 23 | The framework’s design is based on simplicity and efficiency, thus making it a good fit for both beginner and advanced developers. 24 | 25 | 26 | 27 |

What is Cult of Coders?

28 | 29 | We are a Romanian company solely focused on web and mobile development. Analyzing our clients needs we understood that what 30 | they are looking for in a product is a perfect combination of the newest technologies and fastness, stability and scalability. 31 | In order to apply to all those needs and become more professional we chose to work exclusively with Meteor and React. 32 | 33 | 34 |

What is Meteor-Tuts?

35 | 36 | Being in love with what we do we contributed to a series of open-source projects which you can see [HERE](http://www.github.com/cult-of-coders).
37 | Meteor-Tuts is one of the projects closest to our hearts designed as a useful tool for any programmer that wants to step up his/her game. 38 | Navigating through this complex but rather easy to understand tutorial you will be accompanied by video tutorials for each chapter and sub-chapter. 39 | Also, to give you an even better overview, we will provide you with a github repository link where you can find the full project 40 | although we recommend you to take it step by step in order to achieve a better understanding and mastery of the MeteorJS framework. 41 | 42 | 43 |

Before you begin

44 | 45 | This tutorial is focused on Meteor, which is a Javascript framework. 46 | Because we want to teach you Meteor, we will already assume you know Javascript ES6, in order to keep this tutorial focused. 47 | 48 | However, if you do need to learn Javascript, you can use these resources: 49 | - We recommend this [website](https://www.freecodecamp.org/), because it will help you get some experience, after you're 50 | done with the Javascript, HTML and CSS tutorials. 51 | - One of the most eloquent [Javascript tutorials](http://eloquentjavascript.net/) on the web. 52 | - A [tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) from the 53 | Mozilla Foundation ( yes, they do maintain the Firefox browser :)). 54 | 55 | If you are familiar with Javascript, but not with the ES6 syntax, you can use these resources to learn it: 56 | - To just learn the syntax, this is the [place](http://exploringjs.com/es6/index.html) to go to. 57 | - After you've learned the syntax of ES6, to get some practice, go [here](http://es6katas.org/). 58 | 59 | These resources are ordered in the order we thought wold serve you best to go over them. If you think you have found a 60 | better way to learn Javascript ES6, then, by all means, please use the resource which fits you better. 61 | 62 | Even though our primarily focus is Meteor, we are going to use React so that you can visualize how everything works, which is the view layer we recommend for Meteor. Ideally, would be to study first React even though our primary focus on this tutorial is Meteor. To study React, we recommend you: 63 | - [https://camjackson.net/post/9-things-every-reactjs-beginner-should-know](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know). 64 | - [https://blog.risingstack.com/the-react-way-getting-started-tutorial/](https://blog.risingstack.com/the-react-way-getting-started-tutorial/). 65 | - [https://egghead.io/courses/react-fundamentals](https://egghead.io/courses/react-fundamentals). 66 | - [http://jaketrent.com/post/smart-dumb-components-react/](http://jaketrent.com/post/smart-dumb-components-react/). 67 | 68 |

Meteor - what are we going to learn?

69 | 70 | **Introduction:** 71 | - We are going to create a post feed application in which users will be able to make a post and users will see the changes reactive (live). Each post will have comments and will allow the owner to edit or remove the post.
72 | 73 | **Curriculum:** 74 | - Create a meteor project 75 | - Structuring a meteor application 76 | - Collections (list, insert, update and remove) 77 | - Methods 78 | - Publications and subscriptions 79 | - User accounts 80 | - Registration 81 | - Login 82 | - Forgot password 83 | - Meteor tips&tricks 84 | 85 | 86 | 87 | Now let's sail together into the Meteor World! 88 | 89 | -------------------------------------------------------------------------------- /source/chapters/3/structure.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Overall Structure' 3 | description: Let's bring it to a degree of order 4 | disqusPage: 'Chapter 3: Structure' 5 | --- 6 | 7 | So, we discussed about many concepts and we described where to put them. But the thing is, 8 | it doesn't really matter that much, what we describe here are a set of practices, there's no such thing 9 | as the best way, or the way. Whatever you choose, be consistent and try to document it. 10 | 11 | To give you an overall image, it will look something like this: 12 | 13 | ## Standalone 14 | 15 | ```bash 16 | server 17 | # This is where you import everything you need on server to start 18 | # Most likely it will be just: import '/imports/api/server' 19 | main.js 20 | client 21 | # This is where you import everything you need on client to start 22 | # Most likely it will be just: import '/imports/client/init' 23 | main.js 24 | imports 25 | # This is where our logic belongs 26 | api 27 | # We import all the "/server" folders from our modules 28 | server.js 29 | # For emitter and events (you can also make it a folder with index.js if you need decoupling) 30 | events.js 31 | # For securing your app (you can also make it a folder with index.js if you need decoupling) 32 | security.js 33 | emails 34 | send.js 35 | listeners.js 36 | templates 37 | {Module}NewEmail.jsx 38 | # We couple code based on different modules 39 | {module} 40 | # Here we store things that need to run only on the server 41 | server 42 | exposures 43 | get{Module}.expose.js 44 | index.js # Here we import them all 45 | listeners.js 46 | methods.js 47 | publications.js 48 | # Here we import all of them (including ./exposures) 49 | index.js 50 | # Here we decouple our logic 51 | services 52 | {Module}Service.js 53 | testing 54 | server 55 | {Module}Service.test.js 56 | 57 | client # Outside this scope (This will be treated in another chapter) 58 | # This is where our persistence layer is. Including external APIs 59 | db 60 | # Here we import and export all collections for easy usage 61 | index.js 62 | {module} 63 | # Nice grapher queries 64 | queries 65 | get{Module}.js 66 | aggregations 67 | getGroupedElementsByEmail.js 68 | testing 69 | server 70 | getGroupedElementsByEmail.test.js 71 | collection.js 72 | schema.js 73 | hooks.js 74 | links.js 75 | # For dummy data 76 | fixtures 77 | createUsers.js 78 | config.js 79 | index.js 80 | ``` 81 | 82 | ## Microservice 83 | 84 | ```bash 85 | core 86 | # For emitter and events (you can also make it a folder with index.js if you need decoupling) 87 | events.js 88 | # For securing your app (you can also make it a folder with index.js if you need decoupling) 89 | security.js 90 | emails 91 | send.js 92 | listeners.js 93 | templates 94 | {Module}NewEmail.jsx 95 | services 96 | {module} 97 | {Module}Service.js 98 | testing 99 | server 100 | {Module}Service.test.js 101 | # This is where our persistence layer is. Including external APIs 102 | db 103 | # Here we import and export all collections for easy usage 104 | index.js 105 | {module} 106 | # Nice grapher queries 107 | queries 108 | get{Module}.js 109 | aggregations 110 | getGroupedElementsByEmail.js 111 | testing 112 | server 113 | getGroupedElementsByEmail.test.js 114 | collection.js 115 | schema.js 116 | links.js 117 | # For dummy data 118 | fixtures 119 | createUsers.js 120 | config.js 121 | index.js 122 | {microservice} 123 | server 124 | main.js 125 | client 126 | main.js 127 | imports 128 | api 129 | # We import all the "/server" folders from our modules 130 | server.js 131 | # We have the bridge between Meteor and our core 132 | {module} 133 | # Here we store things that need to run only on the server 134 | server 135 | exposures 136 | get{Module}.expose.js 137 | index.js # Which imports all 138 | listeners.js 139 | methods.js 140 | publications.js 141 | # Here we import all the files (including ./exposures) 142 | index.js 143 | client # Outside this scope (This will be treated in another chapter) 144 | ``` 145 | 146 | -------------------------------------------------------------------------------- /source/chapters/1/collections.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Collections 3 | description: How we store our data in Meteor. 4 | disqusPage: 'Chapter 1: Collections' 5 | --- 6 | 7 | ## Let's talk data! 8 | 9 | Meteor uses MongoDB as its default database. You can use any database you want, because you have access to 10 | *http://www.npmjs.com*, therefore you have access to almost all the existing database drivers out there 11 | (a database driver is a program which implements a protocol for connecting to a specific database, like MongoDB, MySQL, SqLite and so on). 12 | 13 | ## How to create a collection? 14 | 15 | ```js 16 | // imports/db/posts/collection.js 17 | import { Mongo } from 'meteor/mongo'; 18 | 19 | const Posts = new Mongo.Collection('posts'); 20 | 21 | export default Posts; 22 | ``` 23 | 24 | ## Inserting data 25 | 26 | We already learned how to create and use a method so we are going to insert in the database a Post 27 | ```js 28 | // file: /imports/api/posts/methods.js 29 | // do not forget to import it in the '/imports/startup/server/index.js'; 30 | import {Meteor} from 'meteor/meteor' 31 | import Posts from '/imports/db/posts'; // or, as it's on github, for simplicity, import {Posts} from '/db'; 32 | 33 | Meteor.methods({ 34 | 'post.create'(post) { 35 | Posts.insert(post); 36 | } 37 | }); 38 | 39 | ``` 40 | To test this, you can go in the browser's console and try something like this: 41 | ```js 42 | const data = {title: 'test', description: 'some description'}; 43 | Meteor.call('post.create', data); // this will call the 'post.create' method and will add a post in the database 44 | ``` 45 | We can add in the database whatever we want, from strings to array of objects. The sky is the limit! 46 | 47 | ## Mongo tools - check what's in the database 48 | You could go in a new terminal, go in the root directory of your project and then `meteor mongo` or use an application like [robomongo](https://robomongo.org/) so you can visualize the data from your database 49 | 50 | If we choose to use the terminal and run the command written above, we could check all the posts from the database by typing: `db.posts.find({})`, this will search for all the posts from the database and retrieve an array of objects of there are any. 51 | 52 | ## Find all posts 53 | ```js 54 | // file: /imports/api/posts/methods.js 55 | 'post.list' () { 56 | return Posts.find().fetch(); 57 | } 58 | ``` 59 | 60 | To be able to query MongoDB efficiently, you need to know some things about selectors (meaning what are you going to select from your collection). 61 | Read [this](https://docs.mongodb.com/manual/reference/operator/query/#query-and-projection-operators) to get acquainted with them. 62 | 63 | The second argument for `find()` is useful for sorting, limiting the amount of received documents, to get only specific fields and many others. Read [this](https://docs.meteor.com/api/collections.html#Mongo-Collection-find) for more details 64 | 65 | ## Updating a post 66 | ```js 67 | 'post.edit' (_id, post) { 68 | Posts.update(_id, { 69 | $set: { 70 | title: post.title, 71 | description: post.description 72 | } 73 | }); 74 | } 75 | ``` 76 | 77 | The first argument represents the data that you "want to update", and the second tells the system "how you update it". 78 | The idea is you can do a lot of things, and the options are endless. 79 | So if you want to read more about updating in MongoDB, go [here](https://docs.mongodb.com/manual/reference/operator/update/). 80 | ## Remove a post with a specific _id 81 | ```js 82 | 'post.remove' (_id){ 83 | Posts.remove(_id); 84 | } 85 | ``` 86 | 87 | ## Fetch a post with a specific _id 88 | ```js 89 | 'post.get' (_id) { 90 | return Posts.findOne(_id); 91 | } 92 | ``` 93 | 94 | ## Work more to learn more 95 | 96 | Now let's practice what we've learned in this section with a few simple exercises: 97 | 98 | We'll consider a post in the following format: 99 | ```js 100 | 101 | const post = { 102 | title: 'something', // string 103 | description: 'meteor-tuts', // string 104 | isApproved: true, // boolean 105 | views: 10, 106 | linkedPostIds: ['aaa', 'bbb', 'ccc', 'ddd'], 107 | createdAt: new Date // Date 108 | } 109 | ``` 110 | #### 1. Posts with a specific title 111 | Make a method which returns all the posts with title: 'test' 112 | ```js 113 | Meteor.call('post.get_by_title', callback) 114 | ``` 115 | 116 | #### 2. Posts with views 117 | Make a method which returns all the posts that have between 100 and 200 views and that returns only the title (as fields) 118 | ```js 119 | Meteor.call('post.get_by_views', {title: 'test', views: 300}, callback) 120 | ``` 121 | 122 | #### 3. Removing posts 123 | Make a method that removes all the posts with title: 'test' or description: 'test' 124 | ```js 125 | Meteor.call('post.remove_by_test', callback) 126 | ``` 127 | 128 | #### 4. Updating posts 129 | Make a method that increments the number of views by 1 for each post that is approved 130 | ```js 131 | Meteor.call('post.increment_views', callback) 132 | ``` 133 | 134 | #### 5. Remove old posts 135 | Make a method which removes all the posts from last month (from the first day of month, to the last day of that month) 136 | ```js 137 | Meteor.call('post.remove_from_last_month', callback) 138 | ``` 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /source/chapters/3/microservices.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Microservices' 3 | description: Microservices - Decouple & Scale 4 | disqusPage: 'Chapter 3: Microservices' 5 | --- 6 | 7 | ## What? 8 | This does not relate to "services" term we used previously, when we regarded it as an unit of logic. 9 | 10 | `The term "Microservice Architecture" has sprung up over the last few years to describe a particular way of designing software applications as suites of independently deployable services.` 11 | 12 | Indepenently deployable, so basically it means that we need to have multiple meteor apps, but how to manage and allow them to re-use code ? 13 | It's quite easy. 14 | 15 | 16 | ## Why? 17 | 18 | For example you have an app, and you have to manage the users and control the content. Doing it in the same app may be a wrong approach, either your bundle size will increase, you may 19 | use modules that you don't need. And to use dynamic imports everywhere may be too much. Instead just separate the concerns, and move your admin app into a separate microservice. 20 | 21 | ## Solution 22 | 23 | First of all, understand the fact that we can have multiple Meteor apps inside the same git repository: 24 | 25 | ```js 26 | mkdir myapp 27 | git init . 28 | meteor create --bare admin 29 | meteor create --bare web 30 | ``` 31 | 32 | That's it, you began your microservice architecture. Now if you want to re-use code, we use symlinks. Sorry Windows users, for you it will not work. 33 | ``` 34 | cd admin/imports 35 | ln -s ../../web/imports app 36 | ``` 37 | 38 | Now look at this example: 39 | ```js 40 | // file: ./admin/imports/api/posts/server/methods.js 41 | import {Meteor} from 'meteor/meteor'; 42 | import {Posts} from '/imports/app/db'; 43 | 44 | Meteor.methods({ 45 | 'posts.approve'({postId}) { 46 | // ... 47 | } 48 | }) 49 | ``` 50 | 51 | That's it. If you plan on only using the db models, and not interact with other services, than just do: 52 | 53 | ``` 54 | cd admin/imports 55 | ln -s ../../web/imports/db db 56 | ``` 57 | 58 | and use it naturally in your admin microservice: 59 | 60 | ```js 61 | // file: ./admin/imports/api/posts/methods.js 62 | import {Meteor} from 'meteor/meteor'; 63 | import {Posts} from '/imports/db'; 64 | 65 | Meteor.methods({ 66 | 'posts.approve'({postId}) { 67 | // ... 68 | } 69 | }) 70 | ``` 71 | 72 | So nice! 73 | Note that if you use WebStorm, make sure to mark both "admin" and "web" folders as Resource Root (By right clicking on the folder), so you have autocomplete on absolute imports properly. 74 | 75 | ## Local Database 76 | 77 | In order for this to work nicely, you would have to configure them to open on different ports and connect to the same database. 78 | 79 | Note that when you start a meteor app, it opens it's own mongodb on PORT+1 (3001 in most cases). 80 | 81 | But if we want the two microservices to work together, either install a docker mongodb locally, either [install mongodb directly](https://docs.mongodb.com/manual/installation/). 82 | 83 | ```js 84 | // file: app/package.json 85 | "scripts": { 86 | "start": "MONGO_URL=mongodb://localhost:27017/web meteor run --port 3000", 87 | }, 88 | ``` 89 | ```js 90 | // file: admin/package.json 91 | "scripts": { 92 | "start": "MONGO_URL=mongodb://localhost:27017/web meteor run --port 3050", 93 | }, 94 | ``` 95 | 96 | Now you can start them both: 97 | ``` 98 | cd admin 99 | npm start 100 | ``` 101 | 102 | ``` 103 | cd web 104 | npm start 105 | ``` 106 | 107 | ## Deployment 108 | 109 | Each individual microservice will have it's own `.deploy` folder inside it with the proper configuration of deployment, depending on which tool you use to do so. 110 | The production bundle will be properly generated. 111 | 112 | ## A better strategy 113 | 114 | You will most likely head into this issue, especially if you decide to microservicify your already existing app: 115 | 116 | For example: 117 | ```js 118 | // file: /web/imports/api/posts/services/PostService.js 119 | import PaymentService from '/imports/api/payments/services/PaymentService.js'; 120 | // ... 121 | ``` 122 | 123 | This will fail if you want to use the PostService inside `admin` microservice! Because it doesn't have that file in that absolute path. 124 | 125 | The initial solution would be to use `imports PaymentService from '../../payments/services/PaymentService'` 126 | 127 | Another great solution is to begin thinking about it as a [reusable module](/chapters/3/reusable-modules.html). Which you can store in `/modules` folder directly. 128 | And create the following symlinks: 129 | ```bash 130 | /web/imports/modules -> /modules 131 | /admin/imports/modules -> /modules 132 | ``` 133 | 134 | If your module depends on things outside it, simply create a config inside it, and inject what you need inside it, keep it simple or make it as complex as you wish. 135 | ```js 136 | // file: /modules/chat/config.js 137 | export default {} 138 | ``` 139 | 140 | But there will be cases where you can't make everything completely independent, as they interact with many other system components, 141 | this would require a change in strategy: 142 | 143 | We have our `App Logic Layer` our `Persistence Layer` and our `Event System` 144 | 145 | Let's work with the following architecture: 146 | 147 | ```bash 148 | /core/services 149 | /core/events.js 150 | /core/security.js 151 | /core/db 152 | ``` 153 | 154 | Now let's symlink it: 155 | ```bash 156 | /web/imports/core -- /core 157 | /admin/imports/core -- /core 158 | ``` 159 | 160 | Sample: 161 | ```js 162 | // file: /web/imports/api/posts/server/methods.js 163 | 164 | import PostService from '/imports/core/services/posts/PostService.js'; 165 | 166 | Meteor.methods({}) 167 | ``` 168 | 169 | I personally don't recommend you using absolute imports any longer inside `/core`, even though you can do it if it starts with `/imports/core`. 170 | 171 | ## Conclusion 172 | 173 | This "better" strategy would require you to do some refactoring to ensure it works properly provided you have an existing app already. However, if you don't have an existing app and you know 174 | you will have microservices, start with this approach right from the beginning. 175 | 176 | 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /source/chapters/3/methods.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Methods & Structure' 3 | description: How to architect methods 4 | disqusPage: 'Chapter 3: Methods' 5 | --- 6 | 7 | Usually, you tend to put logic in your Meteor methods which is a very very bad terrible thing, because Meteor methods act as server-side routes, they act as the *C* (Controller) in *MVC*, 8 | the *C* does not contain logic, the *C* is a boss that delegates work to *M* (Services aka Models) 9 | 10 | It is also bad because methods are a communication layer between the client and the server, they shouldn't store business logic, or logic of any kind, imagine them as proxies that communicate with your services. 11 | 12 | ## Folder Structure 13 | 14 | Keep your methods inside a `/server` folder, this will allow Meteor to only refresh the server, without refreshing your browser, 15 | if you make a change inside a method. 16 | 17 | Take this scenario for example: 18 | - You have a form you click submit 19 | - An error happens server-side because of your fault 20 | - You go in the code, you fix the error, and you save the file 21 | - Meteor refreshes and it also refreshes your browser, loosing the form data 22 | 23 | By coupling server-only logic under `/server` folder you will benefit a faster development speed. 24 | 25 | So, I suggest the following design: 26 | 27 | ```js 28 | // file: /imports/api/posts/server/methods.js 29 | import {Meteor} from 'meteor/meteor'; 30 | 31 | Meteor.methods({ 32 | 'posts.create'() { ... } 33 | }) 34 | ``` 35 | 36 | ```js 37 | // file: /imports/api/posts/server/index.js 38 | import './methods'; 39 | import './publications'; // You can also import your publications 40 | import './listeners'; // And also your listeners in here! 41 | ``` 42 | 43 | ```js 44 | // file: /imports/api/server.js 45 | import './posts/server'; 46 | import './comments/server'; 47 | import './items/server'; 48 | 49 | // And don't forget to import this in your main startup script in /server/main.js 50 | ``` 51 | 52 | ## Method Naming 53 | 54 | Use `{module}.{submodule[1..n]}?.{action}` 55 | I recommend lowercase and plural form and camelCase for multi-words. Whatever you choose, just stick to it! 56 | 57 | Examples: 58 | 59 | ``` 60 | posts.create 61 | posts.comments.create 62 | posts.comments.impression.create 63 | ``` 64 | 65 | ## Method Calls 66 | 67 | Whenever you do a method call I recommend sending an object, rather than multiple arguments. 68 | 69 | For example instead of: 70 | ```js 71 | // BAD 72 | Meteor.call('posts.edit', postId, postData) 73 | ``` 74 | 75 | ```js 76 | // GOOD 77 | Meteor.call('posts.edit', { 78 | postId, 79 | postData 80 | }) 81 | ``` 82 | 83 | The reason is simple: easier inspection on the server and in the websocket frames. Plus, it's easier to validate. You validate against one object. 84 | 85 | If your method is heavily used, ok, I agree use arguments because they cost less, but I highly doubt you will need this. Don't micro-optimize. 86 | 87 | ## Method Body 88 | 89 | A method should do the following: 90 | 1. **Validate** - Check that the request is valid 91 | 2. **Secure** - Check user permissions 92 | 3. **Delegate** - Delegate job to services 93 | 94 | We can do #1 by using `check` but I'd rather use SimpleSchema: 95 | ```js 96 | // ... 97 | Meteor.methods({ 98 | 'posts.edit'(data) { 99 | new SimpleSchema({ 100 | postId: {type: String}, 101 | postData: {type: Object, blackbox: true}, 102 | }).validate(data); 103 | // it will throw an exception if it's not good 104 | 105 | const {postId, postData} = data; 106 | // ... 107 | } 108 | }) 109 | ``` 110 | 111 | For #2, always use a Security service, which you either store at top level in `/imports/api/security.js` or locally in `posts` module folder, 112 | or you could use both, why not? 113 | 114 | ```js 115 | import PostSecurity from '/imports/api/posts/security.js'; 116 | import Security from '/imports/api/security.js'; 117 | 118 | Meteor.methods({ 119 | 'posts.edit'({postId, postData}) { 120 | // ... 121 | Security.checkLoggedIn(this.userId); 122 | PostSecurity.checkAllowedToEdit(this.userId, postId); 123 | // ... 124 | } 125 | }) 126 | ``` 127 | 128 | These security checks must throw a `Meteor.Error` if the check does not pass. 129 | 130 | For #3, you know it, we [use a service](/chapters/3/services.html). 131 | 132 | ## Optimistic UI 133 | 134 | Sometimes you need that when you do an action which updates a local collection (meaning you observe reactive data) and 135 | you have a form that does an insert, you want it to immediately appear on your view. (not wait for the publication to send it to you) 136 | 137 | The best way to do this is to use ValidatedMethod: https://github.com/meteor/validated-method 138 | 139 | Store them inside: `/imports/api/{module}/optimistic/methodName.js` 140 | Import them all in: `/imports/api/{module}/optimistic/methods.js` 141 | And if you have `imports/api/{module}/server/index.js` make sure to `import ../optimistic` inside `/imports/api/{module}/server/methods.js` 142 | 143 | In most cases you won't use this, but it's a very nice feature when you need to. 144 | 145 | ## Mixins 146 | 147 | There will be scenarios where all your methods defined need a logged in user, or a user with a certain role, it can become tedious and repetitive, that 148 | inside every method you do this check, you need to do it once and keep your code [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). 149 | 150 | 151 | ```js 152 | // file: /imports/api/mixins/index.js 153 | import _ from 'underscore'; 154 | 155 | const mix = function(mixins, methods) { 156 | _.each(methods, (value, key) => { 157 | methods[key] = function (...args) { 158 | mixins.forEach(mixin => mixin.call(this, ...args)); 159 | return value.call(this, ...args); 160 | } 161 | }) 162 | } 163 | 164 | const checkLoggedIn = function () { 165 | if (!this.userId) { 166 | throw new Meteor.Error('not-allowed'); 167 | } 168 | }; 169 | 170 | export {mix, checkLoggedIn}; 171 | ``` 172 | 173 | And where you define your methods: 174 | ```js 175 | import {mix, checkLoggedIn} from '/imports/api/mixins'; 176 | 177 | const methods = mix([checkLoggedIn], { 178 | 'posts.create'() { 179 | // do something; 180 | } 181 | }); 182 | 183 | Meteor.methods(methods); 184 | ``` 185 | 186 | These few lines of code can have great impact on readability and elegance of your code. Feel free to use them! 187 | 188 | 189 | 190 | 191 | -------------------------------------------------------------------------------- /source/chapters/1/users.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Accounts 3 | description: Handling users with Meteor 4 | disqusPage: 'Chapter 1: Accounts' 5 | --- 6 | 7 | Congratulations for making in this far with this Meteor tutorial! Now we're going to talk about a very important element in you application: users! 8 | Meteor already has implemented some of the core functionality for dealing with users, and it offers simple yet very powerful APIs for helping you to implement user interaction in you application: 9 | 10 | - User creation 11 | - Login (via a password, or with Facebook, Google) 12 | - Password recovery 13 | - Change the user password 14 | - Reset a user's password 15 | 16 | In this section of the tutorial we focus more on teaching you how to handle passwords, but we'll also show you how easy it is to integrate the framework with other systems. 17 | Run this in your command line interface, and then we can get started: 18 | ``` 19 | meteor add accounts-base accounts-password 20 | ``` 21 | 22 | In your server-side shell type this snippet of code: 23 | 24 | ```js 25 | // file: /imports/api/users/methods.js 26 | 'user.register' (data) { 27 | Accounts.createUser({ 28 | email: data.email, 29 | password: data.password 30 | }); 31 | } 32 | 33 | // client side, in the browser try this: 34 | const data = {email: 'test@test.test', password: '12345'} 35 | Meteor.call('user.register', data, (err, result) => { 36 | console.log(err, result) // in case you try it twice, it will throw an exception that email already exists 37 | }); 38 | 39 | ``` 40 | 41 | Users get stored in a collection, which you can access via `Meteor.users`. 42 | It's the exactly like the collection that we have learned about until now. 43 | 44 | Now use this snippet in your browser console: 45 | 46 | ```js 47 | Meteor.loginWithPassword('test@test.test', '12345', function (err) { 48 | if (!err) { 49 | console.log('You see this because the authentication process was a success') 50 | } else { 51 | console.log(err); 52 | } 53 | }) 54 | ``` 55 | 56 | And, just like that, you're logged in! 57 | Now go back to your browser console and let's see the user that is currently logged in and its ID: 58 | ```js 59 | Meteor.user() 60 | Meteor.userId() 61 | ``` 62 | 63 | Since `Meteor.user()` is a reactive data source, if you use it in a Tracker, you can benefit from its reactivity, 64 | meaning you can access information about the users, logged in, or anonymous. 65 | 66 | Another thing you may notice is how the `emails` key is followed by the *"verified"* check: 67 | ```js 68 | [ 69 | { 70 | address: 'meteor@cultofcoders.com', 71 | verified: true|false 72 | } 73 | ] 74 | ``` 75 | 76 | This may seem to be redundant and complicated, but the Meteor developers decided to stick with this, maybe because they wanted to cater to the people 77 | that want multiple email addresses linked to their account. To get the email of your user, you would have to use the following snippet: 78 | ```js 79 | Meteor.user().emails[0].address 80 | ``` 81 | 82 | But you should not worry about this right now, because, by the end of this tutorial we'll learn how to easily implement this in any application, 83 | and simplify the steps you'll need to take in order to use it, so you won't have to repeat yourself whenever you will need a user's email. 84 | You might think that '12345' is not a very secure password! Since you are correct, let's go ahead and change it: 85 | 86 | ```js 87 | Accounts.changePassword('12345', 'My1337L333Tpassword%', function (err) { 88 | if (!err) { 89 | console.log('Changing the password was a success!') 90 | } else { 91 | console.log(err); 92 | } 93 | }) 94 | ``` 95 | 96 | Very nice! Now, since the password wasn't abiding to the basic guidelines that the user should respect when choosing his/her password, we made them change it. 97 | Now let's get the user to try out his/her new shiny password by logging them out, in order to get them to log back in with the new password: 98 | 99 | ```js 100 | //browser's console 101 | Meteor.logout(function (err) { 102 | if (!err) { 103 | console.log('The user was logged out successfully !') 104 | } else { 105 | console.log(err); 106 | } 107 | }); 108 | ``` 109 | Now, if you check their values, *Meteor.user()* and *Meteor.userId()* will be null, because there is no user that's currently logged in. 110 | 111 | The [callbacks](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) we used previously in `loginWithPassword`, 112 | `changePassword` and `logout` are optional. So, depending on the situation, you can make the application work without them. 113 | 114 | But wait! Your user's new password is so complex, he/she already forgot it. 115 | In order to reset their password, you simply need to: 116 | ```js 117 | Accounts.forgotPassword({ email: 'donut@lover.com' }) 118 | ``` 119 | 120 | Now if we check the output in the terminal, where we started Meteor, we should see a link that looks like this: 121 | ``` 122 | http://localhost:3000/#/reset-password/eNqDzCvx0F3OA6B0dzmx4i6kLs4-veJ36j3X2Rhxui7 123 | ``` 124 | 125 | The last part, the one after the last '/', is your token. 126 | Now let's use that token: 127 | 128 | ```js 129 | Accounts.resetPassword('eNqDzCvx0F3OA6B0dzmx4i6kLs4-veJ36j3X2Rhxui7', 'NewPassword123', function (err) { 130 | if (!err) { 131 | console.log('Password reset was a success!') 132 | } else { 133 | console.log(err); 134 | } 135 | }) 136 | ``` 137 | Now we can get back to the user and send our regards, together with the new password. 138 | 139 | But what if you want the user to confirm the registration by e-mail ? 140 | 141 | In your meteor shell type this: 142 | ```js 143 | Accounts.createUser({ 144 | email: 'user@withoutPassword.com' 145 | }) 146 | 147 | //this will return the newly created _id 148 | 149 | Accounts.sendEnrollmentEmail(_id); 150 | ``` 151 | 152 | Now go to where you started meteor and check out the email. 153 | Get the token like we just did and set a new password with `Accounts.resetPassword()`. 154 | 155 | **If you'd be interested to find out more:** 156 | 157 | Meteor allows you to [customize](http://docs.meteor.com/api/passwords.html#Accounts-emailTemplates) the messages that you send to your users. 158 | 159 | Did you like playing around with passwords ? Read more about them [here](http://docs.meteor.com/api/passwords.html). 160 | 161 | Wouldn't you like to know how you can allow your users to log in with Facebook, Google, Twitter, etc ? 162 | Find out how to do it [here](https://guide.meteor.com/accounts.html#supported-login-services). 163 | -------------------------------------------------------------------------------- /themes/meteor/source/script/main.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var MAX_HEADER_DEPTH = 3; 3 | var scrolling = false; 4 | var scrollTimeout; 5 | var activeLink = document.querySelector(".sidebar-link.current"); 6 | var allLinks = []; 7 | 8 | // create sub links for h2s 9 | var h2s = document.querySelectorAll("h2"); 10 | 11 | // find all h3s and nest them under their h2s 12 | var h3s = document.querySelectorAll("h3"); 13 | 14 | var isAfter = function (e1, e2) { 15 | return e1.compareDocumentPosition(e2) & Node.DOCUMENT_POSITION_FOLLOWING; 16 | }; 17 | 18 | var h2sWithH3s = []; 19 | var j = 0; 20 | for (var i = 0; i < h2s.length; i++) { 21 | var h2 = h2s[i]; 22 | var nextH2 = h2s[i + 1]; 23 | var ourH3s = []; 24 | while ( 25 | h3s[j] && 26 | isAfter(h2, h3s[j]) && 27 | (!nextH2 || !isAfter(nextH2, h3s[j])) 28 | ) { 29 | ourH3s.push({ header: h3s[j] }); 30 | j++; 31 | } 32 | 33 | h2sWithH3s.push({ 34 | header: h2, 35 | subHeaders: ourH3s, 36 | }); 37 | } 38 | 39 | if (h2sWithH3s.length) { 40 | createSubMenu(activeLink.parentNode, h2sWithH3s); 41 | smoothScroll.init({ 42 | speed: 400, 43 | callback: function () { 44 | scrolling = false; 45 | }, 46 | }); 47 | } 48 | 49 | function createSubMenu(container, headers) { 50 | var subMenu = document.createElement("ul"); 51 | subMenu.className = "sub-menu"; 52 | container.appendChild(subMenu); 53 | Array.prototype.forEach.call(headers, function (h) { 54 | var link = createSubMenuLink(h.header); 55 | subMenu.appendChild(link); 56 | if (h.subHeaders) { 57 | createSubMenu(link, h.subHeaders); 58 | } 59 | makeHeaderLinkable(h.header); 60 | }); 61 | } 62 | 63 | function createSubMenuLink(h) { 64 | allLinks.push(h); 65 | var headerLink = document.createElement("li"); 66 | headerLink.innerHTML = 67 | '' + 72 | (h.title || h.textContent) + 73 | ""; 74 | headerLink.firstChild.addEventListener("click", onLinkClick); 75 | return headerLink; 76 | } 77 | 78 | function makeHeaderLinkable(h) { 79 | var anchor = document.createElement("a"); 80 | anchor.className = "anchor"; 81 | anchor.href = "#" + h.id; 82 | anchor.setAttribute("aria-hidden", true); 83 | anchor.setAttribute("data-scroll", ""); 84 | anchor.innerHTML = ''; 85 | anchor.addEventListener("click", onLinkClick); 86 | h.insertBefore(anchor, h.firstChild); 87 | 88 | var anchorOffset = document.createElement("div"); 89 | anchorOffset.id = h.id; 90 | anchorOffset.className = "anchor-offset"; 91 | h.insertBefore(anchorOffset, h.firstChild); 92 | 93 | h.removeAttribute("id"); 94 | } 95 | 96 | function onLinkClick(e) { 97 | if (document.querySelector(".sub-menu").contains(e.target)) { 98 | setActive(e.target); 99 | } 100 | scrolling = true; 101 | document.body.classList.remove("sidebar-open"); 102 | } 103 | 104 | // setup active h3 update 105 | window.addEventListener("scroll", updateSidebar); 106 | window.addEventListener("resize", updateSidebar); 107 | 108 | function updateSidebar() { 109 | if (scrolling) return; 110 | var doc = document.documentElement; 111 | var top = (doc && doc.scrollTop) || document.body.scrollTop; 112 | var last; 113 | for (var i = 0; i < allLinks.length; i++) { 114 | var link = allLinks[i]; 115 | if (link.offsetTop - 120 > top) { 116 | if (!last) last = link; 117 | break; 118 | } else { 119 | last = link; 120 | } 121 | } 122 | if (last) { 123 | setActive(last); 124 | } 125 | } 126 | 127 | function setActive(link) { 128 | var previousActive = document.querySelector(".sub-menu .active"); 129 | 130 | var hash = link.hash; 131 | if (!hash) { 132 | if (link.parentNode.tagName === "A") { 133 | hash = link.parentNode.hash; 134 | } else { 135 | hash = link.getElementsByTagName("a")[0].hash; 136 | } 137 | } 138 | var id = hash.slice(1); 139 | var currentActive = document.querySelector( 140 | '.sub-menu a[href="#' + id + '"]' 141 | ); 142 | if (currentActive !== previousActive) { 143 | if (previousActive) previousActive.classList.remove("active"); 144 | currentActive.classList.add("active"); 145 | } 146 | } 147 | 148 | // scroll sidebar page link into view on page load (except for the top link) 149 | var atRoot = location.pathname === "/" || location.pathname === "/index.html"; 150 | if (!atRoot || location.hash !== "") { 151 | // hexo rewrites the URLs to be relative, so the current page has href="". 152 | document.querySelector('.item-toc a[href=""]').scrollIntoView(); 153 | } 154 | 155 | // version select 156 | var currentVersion = location.pathname.match(/^\/(v\d[^\/]+)/); 157 | [].forEach.call(document.querySelectorAll(".version-select"), function ( 158 | select 159 | ) { 160 | if (currentVersion) { 161 | [].some.call(select.options, function (o) { 162 | if (o.value === currentVersion[1]) { 163 | o.selected = true; 164 | return true; 165 | } 166 | }); 167 | } 168 | select.addEventListener("change", function () { 169 | var targetPath = "/"; 170 | if (select.selectedIndex !== 0) { 171 | targetPath = "/" + select.value + "/"; 172 | } 173 | location.assign(targetPath); 174 | }); 175 | }); 176 | 177 | // fastclick to remove click delay in mobile browsers 178 | if ("addEventListener" in document) { 179 | document.addEventListener( 180 | "DOMContentLoaded", 181 | function () { 182 | FastClick.attach(document.body); 183 | }, 184 | false 185 | ); 186 | } 187 | 188 | // search toggle 189 | var nav = document.querySelector(".nav"); 190 | var mobileSearch = document.querySelector("#mobile-search-input"); 191 | [].forEach.call(document.querySelectorAll(".js-search-toggle"), function ( 192 | link 193 | ) { 194 | link.addEventListener("click", function () { 195 | nav.classList.toggle("search-visible"); 196 | if (nav.classList.contains("search-visible")) { 197 | mobileSearch.focus(); 198 | } 199 | }); 200 | }); 201 | 202 | mobileSearch && 203 | mobileSearch.addEventListener("keydown", function (event) { 204 | if (event.which === 27) { 205 | nav.classList.toggle("search-visible", false); 206 | } 207 | }); 208 | 209 | // mobile 210 | document 211 | .querySelector(".js-sidebar-toggle") 212 | .addEventListener("click", function () { 213 | document.body.classList.toggle("sidebar-visible"); 214 | }); 215 | 216 | document.querySelector(".content").addEventListener("click", function () { 217 | document.body.classList.remove("sidebar-visible"); 218 | }); 219 | })(); 220 | -------------------------------------------------------------------------------- /source/chapters/1/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Hello' 3 | description: Getting started with Meteor 4 | disqusPage: 'Chapter 1: Intro' 5 | --- 6 | 7 | ## Installing the framework 8 | 9 | To install the framework, please follow the steps from the meteor official website: [meteor.com](https://www.meteor.com/install) 10 | 11 | ## Tools 12 | The tool that works best for us, and the one which we recommend you to use is WebStorm from Jetbrains. 13 | You can download Webstorm from [here](https://www.jetbrains.com/webstorm/download). 14 | 15 | To learn more about Webstorm and how to better use it, [go here](https://www.jetbrains.com/webstorm/documentation/). 16 | 17 | A free alternative to Webstorm would be VSCode. This is an extensible, feature-rich code editor that is 18 | relatively easy to learn. 19 | You can download it from [here](https://code.visualstudio.com/). 20 | 21 | ## Creating a project 22 | 23 | After you have installed Meteor, you can easily create a new project by running the following command in 24 | your terminal: 25 | 26 | ``` 27 | meteor create myProjectName 28 | ``` 29 | 30 | ## Start Meteor 31 | 32 | Now you have to start up the project you've just created by running the following commands: 33 | 34 | ``` 35 | cd myProjectName 36 | meteor run 37 | ``` 38 | 39 | That's it! You've just created your first project in Meteor! 40 | Now, to view your work, type *http://localhost:3000* in your browser's address bar and hit Enter. 41 | Yes ! It's **THAT** easy! 42 | 43 | ## Application folder structure 44 | 45 | This is the basic folder structure that an application, such as the one you've just created, should be made up of: 46 | 47 | 48 | 49 | ```bash 50 | client 51 | main.js # this file contains: /imports/startup/client 52 | db # This is where our persistence layer is. Including external APIs 53 | imports 54 | ui # contains anything User-Interface related 55 | startup 56 | client 57 | index.js # loads everything that is needed for the client to function (ex: routes, css, anything concerning the client) 58 | server 59 | index.js # loads everything that is needed for the server to function 60 | api # contains the rest 61 | server 62 | main.js # this file contains: import /imports/startup/server 63 | ``` 64 | As a reminder, you could always use the github repository. For that, go [here](https://github.com/cult-of-coders/meteor-tuts-tutorial/tree/1-clean-installation) 65 | 66 | Everything in "/client" and "/server" is automatically loaded, as it is explained [here.](https://guide.meteor.com/structure.html#load-order) 67 | 68 | In general we will need more control over our application, and in order to gain that control 69 | we will refrain from using auto-loading in our projects. 70 | 71 | This compiles all the modules we specified into our project with the "import" keyword, when we type **"meteor run"** 72 | into the command line, but does not load all of them. 73 | 74 | Because of this, everything in "/imports" must be explicitly imported so Meteor can "gain knowledge" about it. 75 | This also gives us the ability to build modular applications. 76 | [Read more about this here.](https://danmartensen.svbtle.com/build-better-apps-with-es6-modules) 77 | 78 | 79 | ## Importing from NPM 80 | 81 | For now, we won't get into a lot of details, but the basic idea is that with Meteor you have access to the 82 | full NPM ecosystem, allowing you to import modules from http://www.npmjs.com. 83 | 84 | "moment" is a library you will use when working with dates and times in your projects. 85 | 86 | Now, open a new terminal (leave the one with server open) and in the root directory of the project we are working on, write 87 | 88 | ``` 89 | meteor npm install --save moment 90 | ``` 91 | 92 | We use "--save" here because it will save it in our packages.json, meaning that if we work in collaboration with 93 | other developers, when they download the project to start working on it, they will have the same package 94 | installed, with the specified version thus making their life much easier. 95 | 96 | To use "moment" in your project, at a basic level, use this code snippet: 97 | 98 | ``` 99 | // file: (for example) /imports/startup/server/index.js 100 | import moment from 'moment'; 101 | 102 | const date = moment(new Date()).format('YYYY-MM-DD') 103 | console.log(date) 104 | ``` 105 | 106 | If added to the server side you will see the current date printed on your terminal, otherwise, if added client side you will see it on the browser's console. 107 | 108 | ## Atmosphere 109 | 110 | Atmosphere is a package manager which is specific to Meteor only, just like npm is for NodeJs. 111 | It helps you manage your project's dependencies easily. 112 | You can find great resources to help you with Collections, Server-Side Routes, Mailing, etc. 113 | 114 | You can learn more about it on the project's [webpage](https://atmospherejs.com). 115 | 116 | Adding a package is as simple as typing this into the console: 117 | ``` 118 | meteor add accounts-base accounts-password 119 | 120 | ``` 121 | 122 | That's it. You now have added an user management package in in your application. And it's ready for you to use it! 123 | There are a lot of cool and useful packages out there that we'll explore during these tutorials. 124 | 125 | ## Importing from Atmosphere 126 | You can also use the modular approach with Meteor packages! 127 | 128 | To import an atmosphere package we prefix it with `meteor/` 129 | 130 | ```js 131 | import { Accounts } from 'meteor/accounts-base' 132 | 133 | ``` 134 | 135 | Don't worry too much about this, we are going to explore them later in this tutorial. 136 | 137 | ## Importing from local files 138 | 139 | As you saw in the example for creating the project's folder structure, we have the ability to import from 140 | local files by using an "absolute path": 141 | ``` 142 | import myService from '/imports/startup/server/myService'; 143 | ``` 144 | 145 | You can also use a relative path: 146 | ``` 147 | import {sum} from './helpers'; 148 | ``` 149 | In order to see how this exactly works in an example, you can go on the github repository, [here](https://github.com/cult-of-coders/meteor-tuts-tutorial) 150 | Pretty easy right ? 151 | 152 | Would you like to find more about importing and exporting ? You can read more here: 153 | - [http://exploringjs.com/es6/ch_modules.html](http://exploringjs.com/es6/ch_modules.html) 154 | - [https://stackoverflow.com/questions/25494365/es6-module-export-options/34842087#34842087](https://stackoverflow.com/questions/25494365/es6-module-export-options/34842087#34842087) 155 | 156 | 157 | ## Need Help ? 158 | 159 | If you get stuck and need help, you can ask other Meteor evangelists out there: 160 | - https://forums.meteor.com 161 | - Go to the #meteor channel on FreeNode Server: [https://webchat.freenode.net/](https://webchat.freenode.net/) 162 | - Contact Cult of Coders for consultancy, [here](https://www.cultofcoders.com/contact) 163 | 164 | Make sure you Google your questions first, to find out if somebody had the same problem as well 165 | (and most likely has found an answer to that problem), before asking the community! 166 | 167 | 168 | -------------------------------------------------------------------------------- /themes/meteor/layout/page.ejs: -------------------------------------------------------------------------------- 1 | <% var githubUrl = 'https://github.com/' + config.github_repo + 2 | '/tree/master/' + (config.content_root || 'content') + '/' + 3 | page.path.replace(/\.html$/, '.md'); %> 4 | 5 |
6 |
7 |
8 | 9 | 10 | 11 | 71 |
72 |
73 |
74 |

<%- page.title %>

75 | <% if (page.description) { %> 76 |
<%- page.description %>
77 | <% } %> 78 | 79 |
80 |
81 | Edit on GitHub 82 | <% if (page.discourseTopicId) { %> 83 | Discuss 84 | <% } %> 85 |
86 |
87 |
88 | 89 |
90 | <%- page.content %> 91 |
92 |
93 | 94 | 129 | 130 |
131 | 132 | Edit on GitHub 133 |
134 | <% if (page.disqusPage) { %> 135 |
136 |
137 |
138 | 157 | <% } %> 158 | <% if (page.discourseTopicId) { %> 159 |
160 |
161 |
162 | 163 | 173 | <% } %> 174 |
175 | -------------------------------------------------------------------------------- /source/chapters/2/react.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'React' 3 | description: Integrating React with Meteor 4 | disqusPage: 'Chapter 2: React' 5 | --- 6 | 7 | ## Introduction 8 | 9 | This chapter shows you how to integrate React into Meteor. However, this is not a React tutorial! In order 10 | to fully understand what's going on here, check the following resources: 11 | 12 | - [9 things every ReactJS beginner should know](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know) 13 | - [The React way - getting started](https://blog.risingstack.com/the-react-way-getting-started-tutorial/) 14 | - [React fundamentals](https://egghead.io/courses/react-fundamentals) 15 | - [Smart and dumb components in React](http://jaketrent.com/post/smart-dumb-components-react/) 16 | 17 | ## The environment 18 | Before we go through some React code, let's set up the environment for the project with these terminal commands: 19 | 20 | ``` 21 | meteor add cultofcoders:meteor-react-routing 22 | meteor npm install --save react react-mounter react-dom 23 | ``` 24 | 25 | ## The code structure 26 | 27 | As we discussed in the first chapter, we want to build modular apps that do not rely on auto loading. 28 | We will store all of our React components in the `/imports/ui` folder. 29 | 30 | A router decides what to show to the user, and because it is a critical component 31 | in our app, we will place it in `/imports/routing`. 32 | 33 | ## Routing and application flow 34 | 35 | To better understand what we are about to do and look at some code samples, please go through the 36 | [README.md](https://github.com/cult-of-coders/meteor-react-routing) file that we maintain for our projects. 37 | 38 | After the setup you did previously with those 2 terminal commands, you will need to create a few files: 39 | - `/imports/routing/router.js` 40 | - `/imports/routing/index.js` 41 | - `/imports/ui/App.jsx` 42 | 43 | Now include the routing in your client/startup folder, and you should be good to go! 44 | 45 | Let's start with some code in `/imports/ui/Home.jsx` : 46 | ```js 47 | import React from 'react'; 48 | 49 | export default class Home extends React.Component { 50 | render() { 51 | return

Hello Reactive World!

52 | } 53 | } 54 | ``` 55 | Now in `/imports/routing/index.js`: 56 | 57 | ```js 58 | import route from './router.js' 59 | 60 | route('/', Home); 61 | ``` 62 | 63 | And let's access [our work](http://localhost:3000/)! 64 | 65 | ## Methods 66 | 67 | By default, React is already reactive, so by using `this.setState` it will 68 | render again your component in a very efficient manner. 69 | 70 | Let's see how we would call a method and show the response in our component with some code in `/imports/ui/Home.jsx`: 71 | 72 | ```js 73 | export default class Home extends React.Component { 74 | constructor() { 75 | super(); 76 | this.state = {loading: true, donuts: []} 77 | } 78 | 79 | componentDidMount() { 80 | Meteor.call('donuts.list', (err, res) => { 81 | this.setState({ 82 | loading: false, 83 | donuts: res // assuming the method returns an array of donuts 84 | }) 85 | }) 86 | } 87 | 88 | render() { 89 | if (this.state.loading) { 90 | return
Waiting for the method
91 | } 92 | 93 | return ( 94 |
95 | { 96 | this.state.donuts.map(donut => { 97 | return
{donut._id}
98 | }) 99 | } 100 |
101 | ) 102 | } 103 | } 104 | ``` 105 | 106 | ## Publications 107 | 108 | To use publications, we need Meteor's reactivity, the Tracker, about which we discussed in Chapter 1 of this tutorial. 109 | However, Meteor has created a package that allows us to easily use [it](https://guide.meteor.com/react.html#using-createContainer). 110 | This terminal command will add it to our project: 111 | ``` 112 | meteor add react-meteor-data 113 | ``` 114 | 115 | Let's assume you have a publication named 'donuts', that will of course return...Donuts.find(). 116 | In `/imports/ui/Home.jsx`, let's use: 117 | ```js 118 | import { createContainer } from 'meteor/react-meteor-data'; 119 | import Donuts from '/imports/api/donuts/collection.js' 120 | 121 | class Home extends React.Component { 122 | render() { 123 | const {loading, donuts} = this.props; 124 | 125 | if (loading) { 126 | return
Waiting for the method
127 | } 128 | 129 | return ( 130 |
131 | { 132 | donuts.map(donut => { 133 | return
{donut._id}
134 | }) 135 | } 136 |
137 | ) 138 | } 139 | } 140 | 141 | export default createContainer((props) => { 142 | const handle = Meteor.subscribe('donuts'); 143 | // the reactive data sources will get tracked here 144 | // any change will result into a re-render of "Home" component 145 | 146 | return { 147 | loading: !handle.ready(), 148 | donuts: Donuts.find().fetch() 149 | } 150 | }, Home) 151 | ``` 152 | 153 | Now try adding a new donut from the Meteor shell. You will see it updated live. 154 | 155 | This is it. It's that simple. You now have the knowledge that allows you to integrate React with Meteor. 156 | Now, you need to master it. 157 | 158 | In the homework you'll most likely be dealing with forms, so here are some recommendations: 159 | - [Material UI](http://www.material-ui.com/) 160 | - [Formsy React](https://github.com/christianalfoni/formsy-react) 161 | - [Formsy material UI](https://github.com/mbrookes/formsy-material-ui) 162 | 163 | There is a [package](https://github.com/meteor-utilities/react-list-container) that contains a lot of components and will do a lot of the work for you! 164 | 165 | ## Homework 166 | 167 | #### 1. Log me in! 168 | Create a route `/login` and a `Login.jsx` file. In it you will have a form. When the form is submitted, 169 | it will call `Meteor.loginWithPassword` and redirect him to "/" [Hint 1](/) 170 | 171 | #### 2. Private Donuts! 172 | Only allow logged in users to view the donuts list, which is private. [Hint]() 173 | 174 | #### 3. Register 175 | Create a registration. Use just email and password for now. 176 | 177 | #### 4. Create a donut 178 | As a logged in user, present a form and create a donut via the Meteor.call(). You can do it with a separate route, or 179 | where you list the donuts. Whatever you choose, create another component. Always think in components. 180 | 181 | ## Over-achievers 182 | 183 | #### 1. Filters 184 | In the donuts list, add a checkbox, when you click it it will only show the donuts with price smaller than 200. Make sure the filter 185 | is in another component, so that when something changes, your subscription changes as well. This means you may need a container on top of your container! 186 | 187 | #### 2. Pagination (By Methods) (From scratch) 188 | Implement a pagination strategy (You can use [React paginator](https://www.npmjs.com/package/react-paginator) where you display 189 | all the donuts, 3 items per page. *Quick tip*: You may need to create another method that retrieves the count of all the donuts. 190 | 191 | #### 3. Pagination (By Subscription) (From scratch) 192 | This one is a bit tricky. But not impossible, if you want true reactive pagination (which in most cases you don't) but you want 193 | to know about it because you're an over-achiever. Check out [this](https://github.com/percolatestudio/publish-counts) package, which can be used for reactive counting. 194 | 195 | -------------------------------------------------------------------------------- /source/chapters/2/css.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Cascade Style Sheet (CSS)' 3 | description: Styling your Meteor application 4 | disqusPage: 'Chapter 2: CSS' 5 | --- 6 | 7 | ## Introduction 8 | 9 | 10 | The style is an important aspect of an application. Anyone can write css, but there are some subtle things that makes the difference between a good written css and a bad one. 11 | 12 | We choose not to use a framework, but we are going to guide you throughout the process of building the base css you'll need in most of your projects. 13 | 14 | For this tutorial, we are going to use [SASS (SCSS)](http://sass-lang.com/), because it's an amazing tool that offers some features that plain css misses that could improve your productivity right away and help you modularize your code. For example: variables, mixins, import, functions and many other cool features. 15 | 16 | 17 | ## Setting Up 18 | 19 | ```bash 20 | meteor add fourseven:scss 21 | meteor remove standard-minifier-css // meteor installs this by default to optimize the css 22 | meteor add juliancwirko:postcss // for a better optimization of css 23 | meteor npm install --save-dev autoprefixer css-mqpacker postcss-csso 24 | ``` 25 | 26 | We are using [PostCSS](http://postcss.org/) because it makes our life easier by using some of it's plugins: 27 | - [Autoprefixer](https://github.com/postcss/autoprefixer) taking out our responsability to prefix our css rules for each browser. 28 | - [CSS MQPacker](https://github.com/hail2u/node-css-mqpacker) pack some CSS media query rules into one using PostCSS into one and adding them at the end of css file 29 | - [CSSO](https://github.com/css/csso) is a CSS minifier that compresses and cleans our code 30 | 31 | To configure your newly installed plugins, you need to add this in package json: 32 | 33 | ``` json 34 | "postcss": { 35 | "plugins": { 36 | "autoprefixer": { 37 | "browsers": [ 38 | "last 2 versions", 39 | "> 2%" 40 | ] 41 | }, 42 | "css-mqpacker": {}, 43 | "postcss-csso": {} 44 | } 45 | } 46 | 47 | ``` 48 | 49 | ## Styles Folder Structure 50 | This is the basic folder structure we are using and recommend 51 | 52 | 
 53 | ├── client 
 54 | │   ├── styles
 55 | │   │   ├── cc-app.scss // Main file where we import all the other scss files
 56 | │   │   └── _helpers // in this folder we add all files for variables, functions, mixins 
 57 | |   │   │    └── _functions.scss // functions that we use in mixins 
 58 | |   │   │    └── _helpers.scss // general rules all over the website
 59 | |   │   │    └── _mixins.scss // a group of declarations that you want to re-use
 60 | |   │   │    └── _variables.scss
 61 | │   │   └── base 
 62 | |   │   │    └── _normalize.scss // css reset for the browser 
 63 | |   │   │    └── _font.scss // rules for importing external fonts 
 64 | |   │   │    └── _general.scss // general rules for elements (html, body, links, a, etc)
 65 | │   │   └── elements
 66 | |   │   │    └── grid.scss
 67 | │   │   └── form  
 68 | |   │   │    └── _button.scss
 69 | |   │   │    └── _checkbox.scss 
 70 | |   │   │    └── _radio.scss
 71 | |   │   │    └── _text.scss
 72 | |   │   │    └── _textarea.scss
 73 | |   │   │    └── _select.scss
 74 | |   │   │    └── _form-helpers.scss
 75 | │   │   └── layout 
 76 | |   │   │    └── header
 77 | |   │   │    └── footer
 78 | |   │   │    └── main
 79 | │   │   └── pages // a folder in which we add the css files for each page of application
 80 | │   │   └── plugins // // in this folder we add the files from our external components that we use in the app
 81 | │   ├── ...
 82 | ├── imports
 83 | │   ├── ...
 84 | └── server 
 85 |     └── ...
 86 |
87 | 88 | You can find a pre-installed meteor project with this folder structure, [here](https://github.com/cult-of-coders/meteor-tuts-boilerplate) 89 | 90 | 91 | ## Use of Flexbox 92 | To structure our layout model, we are using CSS3 Flexbile Box because it solves some problems that the layout float model have: 93 | - vertical and horizontal centering 94 | - same height columns 95 | 96 | You can learn more about it, [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 97 | 98 | ## Use of Rem for font size 99 | We are using rem size for our fonts because it offers responsiveness, scalability, improved reading experience, and greater flexibility in defining components. To read more about it, click [here](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) 100 | 101 | ## Writing clean css 102 | It is extremely important to write clean css code so that we have some recommendations for you: 103 | - When you create an application, prefix your classes with something specific and short. For example, we chose for our company "cc" (Cult of Coders). The reason behind it is that if we get an external library, we won't any have any conflicts 104 | - Use 3 or less levels of css nesting. Most of the time you don't need more than one level because if you want to override those styles only on a specific elements, you don't have to recreate the whole nesting levels 105 | - Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come and don't use it! 106 | - For each component (or page / section) create a separate file in which you'll store only the specific styles for that section. This will make the code much cleaner, offering better readability and very easy to modify later 107 | - Naming standard convention. Our current recommendation is [BEM](http://getbem.com/naming/) 108 | - Be specific in naming your classes. The class names should represent your elements 109 | 110 | ```scss 111 | /* BAD */ 112 | .box { 113 | background-color: green !important; 114 | .box2 { 115 | .cc-box3 { 116 | font-size: 5px; 117 | .cc-button-x { 118 | color: red; 119 | } 120 | } 121 | } 122 | } 123 | .cc-div {} 124 | ``` 125 | 126 | ```scss 127 | /* GOOD */ 128 | .cc-donut { 129 | &--bg-main{ 130 | background-color: $color-main; 131 | color: $color-white; 132 | } 133 | } 134 | .cc-donuts-list { 135 | height: 100%; 136 | display: flex; 137 | 138 | &__title { 139 | @include font-size(16px); 140 | } 141 | } 142 | ``` 143 | 144 | ## Use of Variables 145 | Variables are simply amazing because you can store some general rules that you want to apply in your stylesheet. 146 | 147 | ```scss 148 | $font-roboto: 'Roboto', sans-serif; 149 | $base-font-size: 62.5%; 150 | $color-success: #4CAF50; 151 | $shadow-dp0: 0px 0px 0px 0px rgba(black, 0.2), 0px 0px 0px 0px rgba(black, 0.14), 0px 0px 0px 0px rgba(black, 0.12); 152 | 153 | /* How to use them? */ 154 | .cc-donuts-list { 155 | font-family: $font-roboto; 156 | color: $color-success; 157 | box-shadow: $shadow-dp0; 158 | } 159 | ``` 160 | 161 | ## Use of mixins 162 | A mixin lets you make groups of CSS declarations that you want to reuse throughout your site 163 | ```scss 164 | @mixin breakpoint ($value, $min-value: false) { 165 | @if $value == 'phone-small' { 166 | @media only screen and (max-width : 330px) { @content; } 167 | } 168 | 169 | @if $value == 'phone' { 170 | @media only screen and (max-width : 750px) { @content; } 171 | } 172 | 173 | @else if $value == 'tablet' { 174 | @media only screen and (min-width: 751px) and (max-width: 1199px) { @content } 175 | } 176 | 177 | @else if $value == 'desktop' { 178 | @media only screen and (min-width: 1601px) { @content } 179 | } 180 | 181 | @else { 182 | @media only screen and (max-width: $value) { @content; } 183 | } 184 | } 185 | 186 | /* How to use it? */ 187 | .cc-notification { 188 | @include breakpoint("tablet") { 189 | font-size: 50px; 190 | } 191 | } 192 | 193 | ``` 194 | ## Homework 195 | 196 | #### 1. Donut colors 197 | Style the section where we display the donuts. Add to each element from the section, a specific class. Each type of donut, will have a different color. 198 | 199 | #### 2. Responsive donuts 200 | The creation of a donut needs to be responsive so we can add it from each device we would like 201 | -------------------------------------------------------------------------------- /themes/meteor/layout/layout.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%- page.title %> | <%- config.title %> 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | 24 | 25 | 29 | 30 | 31 | 35 | 36 | 40 | 41 | 42 | 43 | 48 | 49 | 50 | 51 | <%- body %> 52 | 53 | 54 | 58 | 62 | 65 | 69 | 70 | 178 | 179 | 196 | 197 | 198 | -------------------------------------------------------------------------------- /source/chapters/1/meteorSnacks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Meteor Snacks 3 | description: Useful tools and features that Meteor has to offer. 4 | disqusPage: "Chapter 1: Meteor Snacks" 5 | --- 6 | 7 | ## Environment Variables 8 | 9 | Meteor uses environment variables to know various things, such as which MongoDB database should it connect to, to whom 10 | it should send emails and other information, such as: 11 | 12 | - MONGO_URL : you don't have to have this variable by default, but if you connect to another database you should have it here 13 | - MAIL_URL : the smtp:// for your email. The one you use to interact with your users. We'll show you in a bit how easy it is to set it up. 14 | - METEOR_PROFILE : if you set it to 1, you'll see how much time meteor spends on building/rebuilding your project 15 | - ROOT_URL : the real path of Meteor(the default address is http://localhost:3000) 16 | 17 | To specify these variables you would use the following snippet: 18 | 19 | ``` 20 | ROOT_URL="http://localhost:3000" MAIL_URL="smtp://gmail.com:25" meteor run 21 | ``` 22 | 23 | ## Step into an asynchronous world-_Meteor.wrapAsync_ 24 | 25 | Since you are here, you know that Javascript is a single-threaded system, meaning that it can do only one thing at a time. 26 | This would imply the fact that a slow operation would “block” the system, and keep it all to itself while executing, 27 | and everything else would have to wait for the slow operation to finish before they can continue. 28 | 29 | This is where asynchronous operations come into play! Asynchronous calls let us perform long-running operations without blocking the system. 30 | These operations can be network requests, disk reads/writes and so on. 31 | 32 | \*_Meteor.wrapAsync_ enables you to do asynchronous operations in your methods. Let's say you use Amazon S3, or an Npm library, 33 | that requires you to specify a callback. Well if you do it like this: 34 | 35 | ```js 36 | Meteor.methods({ 37 | something_async: function() { 38 | coolLibrary.coolFunction(function(err, res) { 39 | // it will get here after some time. 40 | }); 41 | } 42 | }); 43 | ``` 44 | 45 | you may get a very weird error saying that "code cannot run outside "Fibers" ". 46 | Since we don't want to overcomplicate things, we won't go into details regarding the error message. 47 | But here's the right way of doing things...asynchronously, of course: 48 | 49 | ```js 50 | Meteor.methods({ 51 | something_async: function() { 52 | const run = Meteor.wrapAsync(coolLibrary.coolFunction, coolLibrary); 53 | /* "coolLibrary" is there to provide context to the function, because if that function uses "this" inside of it, 54 | then it will fail because the context was not specified.*/ 55 | 56 | try { 57 | const results = run(); 58 | // if the callback accepts err result will be synced with results. 59 | } catch (e) {} 60 | 61 | // some API's will not have callbacks with (err, res), but will instead give you other arguments with other order 62 | // for those edge-cases you may need to use an "async" syntax, just like here: 63 | 64 | const results = run((arguments, of, the, callback) => { 65 | // do something here 66 | // since this time you are inside a fiber, your application will not crash 67 | }); 68 | 69 | return results; 70 | } 71 | }); 72 | ``` 73 | 74 | ## Timers 75 | 76 | You may already be familiar with _setTimeout_, _setInterval_ from plain JavaScript. 77 | Well, Meteor has them too, and they will run inside fibers. For example: 78 | 79 | ```js 80 | Meteor.methods({ 81 | something_async() { 82 | Meteor.setInterval(() => { 83 | console.log("tick"); 84 | }, 1000); 85 | } 86 | }); 87 | ``` 88 | 89 | After you called the method, you will get a 'tick' in your console, for every second passed. You will not be able to stop this, 90 | unless you restart the application or implement a handler that stops it, so be careful, because it unnecessarily 91 | takes up computing power from your system! 92 | 93 | ## Emails 94 | 95 | Remember the emails that we received in the console when we were talking about users ? Well, in the background, the system used this module: 96 | If you don't specify MAIL_URL, all the emails that you send will go to your console. 97 | 98 | If you want an email for your system, we recommend [Mailgun](http://www.mailgun.com/). Pro tip: for less than 10 000 email per month, it's free! 99 | 100 | Here, we use %40 to represent @ because we need URI encoding: 101 | 102 | ``` 103 | MAIL_URL="smtp://postmaster%40yourdomain.com:b23f5872166c187ad5b5f1abece071b2@smtp.mailgun.org:25" meteor run 104 | ``` 105 | 106 | This is an example that will demonstrate the most basic usage for your email: 107 | 108 | ```js 109 | import { Email } from "meteor/email"; 110 | 111 | Email.send({ 112 | to: "you@meteor-tuts.com", 113 | from: "no-reply@meteor-tuts.com", 114 | subject: "I'm an email", 115 | html: "

Hello!

" 116 | }); 117 | ``` 118 | 119 | If you're interested to learn more about communicating with your users from your Meteor-based application, 120 | you can read more [here](http://docs.meteor.com/api/email.html). 121 | 122 | ## Meteor.defer 123 | 124 | Sometimes, when you want to do something, and notify the user by email afterwards. However, if you use SMTP, sometimes 125 | it can take between 50ms to 1s for the mail to be sent, and this can give the user the impression that your application is slow. 126 | This is why you should use this function: 127 | 128 | ```js 129 | Meteor.methods({ 130 | 'action_plus_email': function () { 131 | // do something 132 | 133 | Meteor.defer(() => { 134 | Email.send(...) 135 | }) 136 | 137 | return 'hello there, user'; 138 | } 139 | }) 140 | ``` 141 | 142 | _Meteor.defer(fn)_ is same as _Meteor.setTimeout(fn, 0)_. 143 | Basically, _Meteor.defer(fn)_ will do a "background" job in a fiber (asynchronously...get it ? ). 144 | 145 | ## HTTP 146 | 147 | Picture a hungry developer that sits down at a table in the "Meteor restaurant": 148 | 149 | "-I'd like an external REST API please. 150 | -Coming right up!" 151 | 152 | This is how a conversation between the "hungry" developer and the Meteor "waiter" would look like, if the developer wanted to have a [REST API](https://www.youtube.com/watch?time_continue=1&v=llpr5924N7E). 153 | For that, Meteor has a simple [HTTP](http://docs.meteor.com/api/http.html) package built-in. 154 | 155 | ```js 156 | Meteor.methods({ 157 | an_api_call: function() { 158 | const data = HTTP.get("https://jsonplaceholder.typicode.com/posts/1"); 159 | 160 | console.log(data); 161 | 162 | return data; 163 | } 164 | }); 165 | ``` 166 | 167 | ## Assets 168 | 169 | The best documentation for assets is available [here](http://docs.meteor.com/api/assets.html), at the official Meteor website! 170 | 171 | Let's go ahead and put something in "/private/some_folder/test.txt" by running this in our Meteor shell: 172 | 173 | ``` 174 | Assets.getText('/some_folder/test.txt') 175 | ``` 176 | 177 | You would use this when, for example, you have a business, logic-packed csv, or an .xls file that you need to work with. 178 | Or you may have a JSON with car models. 179 | The idea is that you can use any type of file, even binary, that you can use privately on the server where the application is deployed on. 180 | 181 | ## Meteor Settings 182 | 183 | Again, the developers at [Meteor](https://docs.meteor.com/api/core.html#Meteor-settings) explain this subject in the best way. 184 | Use this code in your _.deploy/local.json_ file: 185 | 186 | ```json 187 | { 188 | "public": { 189 | "visible": "Something that the client can see" 190 | }, 191 | "private": { 192 | "API_KEY": "XYZ" 193 | } 194 | } 195 | ``` 196 | 197 | You can access the settings from the client-side with: 198 | 199 | ``` 200 | Meteor.settings.public.visible 201 | ``` 202 | 203 | Or you can access all of the settings from the server-side by using: 204 | 205 | ``` 206 | Meteor.settings.private.API_KEY 207 | ``` 208 | 209 | ## Running Meteor - the easy way 210 | 211 | Inside your "Meteor" folder you have a file named "package.json". That packages keeps track of what npm packages you use, and other 212 | information about your system setup. So, for example, you may start an app with different settings than the ones you developed it with on your workstation. 213 | To restore those settings, you would use something like this: 214 | 215 | ```json 216 | { 217 | ... 218 | "scripts": { 219 | "start": "MAIL_URL='xxx' meteor run --port 3000", 220 | "deploy": "We'll get into that in another chapter ;)" 221 | } 222 | } 223 | ``` 224 | 225 | Now run this in your terminal: 226 | 227 | ``` 228 | npm run start 229 | ``` 230 | 231 | and you should be okay to start your application! 232 | -------------------------------------------------------------------------------- /themes/meteor/source/style/_global/icon.less: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'percolate'; 3 | src: url('../fonts/percolate.eot?rxvase'); 4 | src: url('../fonts/percolate.eot?rxvase#iefix') format('embedded-opentype'), 5 | url('../fonts/percolate.ttf?rxvase') format('truetype'), 6 | url('../fonts/percolate.woff?rxvase') format('woff'), 7 | url('../fonts/percolate.svg?rxvase#percolate') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'percolate' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .icon-grow:before { 28 | content: "\e903"; 29 | } 30 | .icon-lightning:before { 31 | content: "\e904"; 32 | } 33 | .icon-request-change:before { 34 | content: "\e905"; 35 | } 36 | .icon-transfer:before { 37 | content: "\e906"; 38 | } 39 | .icon-calendar:before { 40 | content: "\e902"; 41 | } 42 | .icon-sidebar:before { 43 | content: "\e900"; 44 | } 45 | .icon-tablet:before { 46 | content: "\e901"; 47 | } 48 | .icon-atmosphere:before { 49 | content: "\e671"; 50 | } 51 | .icon-browser:before { 52 | content: "\e672"; 53 | } 54 | .icon-database:before { 55 | content: "\e673"; 56 | } 57 | .icon-expand-alt:before { 58 | content: "\e674"; 59 | } 60 | .icon-mobile:before { 61 | content: "\e675"; 62 | } 63 | .icon-watch:before { 64 | content: "\e676"; 65 | } 66 | .icon-home:before { 67 | content: "\e600"; 68 | } 69 | .icon-user-alt:before { 70 | content: "\e601"; 71 | } 72 | .icon-user:before { 73 | content: "\e602"; 74 | } 75 | .icon-user-add:before { 76 | content: "\e603"; 77 | } 78 | .icon-users:before { 79 | content: "\e604"; 80 | } 81 | .icon-profile:before { 82 | content: "\e605"; 83 | } 84 | .icon-bookmark:before { 85 | content: "\e606"; 86 | } 87 | .icon-bookmark-hollow:before { 88 | content: "\e607"; 89 | } 90 | .icon-star:before { 91 | content: "\e608"; 92 | } 93 | .icon-star-hollow:before { 94 | content: "\e609"; 95 | } 96 | .icon-circle:before { 97 | content: "\e60a"; 98 | } 99 | .icon-circle-hollow:before { 100 | content: "\e60b"; 101 | } 102 | .icon-heart:before { 103 | content: "\e60c"; 104 | } 105 | .icon-heart-hollow:before { 106 | content: "\e60d"; 107 | } 108 | .icon-face-happy:before { 109 | content: "\e60e"; 110 | } 111 | .icon-face-sad:before { 112 | content: "\e60f"; 113 | } 114 | .icon-face-neutral:before { 115 | content: "\e610"; 116 | } 117 | .icon-lock:before { 118 | content: "\e611"; 119 | } 120 | .icon-unlock:before { 121 | content: "\e612"; 122 | } 123 | .icon-key:before { 124 | content: "\e613"; 125 | } 126 | .icon-arrow-left-alt:before { 127 | content: "\e614"; 128 | } 129 | .icon-arrow-right-alt:before { 130 | content: "\e615"; 131 | } 132 | .icon-sync:before { 133 | content: "\e616"; 134 | } 135 | .icon-reply:before { 136 | content: "\e617"; 137 | } 138 | .icon-expand:before { 139 | content: "\e618"; 140 | } 141 | .icon-arrow-left:before { 142 | content: "\e619"; 143 | } 144 | .icon-arrow-up:before { 145 | content: "\e61a"; 146 | } 147 | .icon-arrow-down:before { 148 | content: "\e61b"; 149 | } 150 | .icon-arrow-right:before { 151 | content: "\e61c"; 152 | } 153 | .icon-chevron-down:before { 154 | content: "\e61d"; 155 | } 156 | .icon-back:before { 157 | content: "\e61e"; 158 | } 159 | .icon-download:before { 160 | content: "\e61f"; 161 | } 162 | .icon-upload:before { 163 | content: "\e620"; 164 | } 165 | .icon-proceed:before { 166 | content: "\e621"; 167 | } 168 | .icon-info:before { 169 | content: "\e622"; 170 | } 171 | .icon-question:before { 172 | content: "\e623"; 173 | } 174 | .icon-alert:before { 175 | content: "\e624"; 176 | } 177 | .icon-edit:before { 178 | content: "\e625"; 179 | } 180 | .icon-paintbrush:before { 181 | content: "\e626"; 182 | } 183 | .icon-close:before { 184 | content: "\e627"; 185 | } 186 | .icon-trash:before { 187 | content: "\e628"; 188 | } 189 | .icon-cross:before { 190 | content: "\e629"; 191 | } 192 | .icon-delete:before { 193 | content: "\e62a"; 194 | } 195 | .icon-power:before { 196 | content: "\e62b"; 197 | } 198 | .icon-add:before { 199 | content: "\e62c"; 200 | } 201 | .icon-plus:before { 202 | content: "\e62d"; 203 | } 204 | .icon-document:before { 205 | content: "\e62e"; 206 | } 207 | .icon-graph-line:before { 208 | content: "\e62f"; 209 | } 210 | .icon-doc-chart:before { 211 | content: "\e630"; 212 | } 213 | .icon-doc-list:before { 214 | content: "\e631"; 215 | } 216 | .icon-category:before { 217 | content: "\e632"; 218 | } 219 | .icon-copy:before { 220 | content: "\e633"; 221 | } 222 | .icon-book:before { 223 | content: "\e634"; 224 | } 225 | .icon-certificate:before { 226 | content: "\e636"; 227 | } 228 | .icon-print:before { 229 | content: "\e637"; 230 | } 231 | .icon-list-unordered:before { 232 | content: "\e638"; 233 | } 234 | .icon-graph-bar:before { 235 | content: "\e639"; 236 | } 237 | .icon-menu:before { 238 | content: "\e63a"; 239 | } 240 | .icon-filter:before { 241 | content: "\e63b"; 242 | } 243 | .icon-ellipsis:before { 244 | content: "\e63c"; 245 | } 246 | .icon-cog:before { 247 | content: "\e63d"; 248 | } 249 | .icon-wrench:before { 250 | content: "\e63e"; 251 | } 252 | .icon-nut:before { 253 | content: "\e63f"; 254 | } 255 | .icon-camera:before { 256 | content: "\e640"; 257 | } 258 | .icon-eye:before { 259 | content: "\e641"; 260 | } 261 | .icon-photo:before { 262 | content: "\e642"; 263 | } 264 | .icon-video:before { 265 | content: "\e643"; 266 | } 267 | .icon-speaker:before { 268 | content: "\e644"; 269 | } 270 | .icon-phone:before { 271 | content: "\e645"; 272 | } 273 | .icon-flag:before { 274 | content: "\e646"; 275 | } 276 | .icon-pin:before { 277 | content: "\e647"; 278 | } 279 | .icon-compass:before { 280 | content: "\e648"; 281 | } 282 | .icon-globe:before { 283 | content: "\e649"; 284 | } 285 | .icon-location:before { 286 | content: "\e64a"; 287 | } 288 | .icon-search:before { 289 | content: "\e64b"; 290 | } 291 | .icon-timer:before { 292 | content: "\e64c"; 293 | } 294 | .icon-time:before { 295 | content: "\e64d"; 296 | } 297 | .icon-dashboard:before { 298 | content: "\e64e"; 299 | } 300 | .icon-hourglass:before { 301 | content: "\e64f"; 302 | } 303 | .icon-play:before { 304 | content: "\e650"; 305 | } 306 | .icon-stop:before { 307 | content: "\e651"; 308 | } 309 | .icon-email:before { 310 | content: "\e652"; 311 | } 312 | .icon-comment:before { 313 | content: "\e653"; 314 | } 315 | .icon-link:before { 316 | content: "\e654"; 317 | } 318 | .icon-paperclip:before { 319 | content: "\e655"; 320 | } 321 | .icon-box:before { 322 | content: "\e656"; 323 | } 324 | .icon-structure:before { 325 | content: "\e657"; 326 | } 327 | .icon-commit:before { 328 | content: "\e658"; 329 | } 330 | .icon-cpu:before { 331 | content: "\e659"; 332 | } 333 | .icon-memory:before { 334 | content: "\e65a"; 335 | } 336 | .icon-outbox:before { 337 | content: "\e65b"; 338 | } 339 | .icon-share:before { 340 | content: "\e65c"; 341 | } 342 | .icon-button:before { 343 | content: "\e65d"; 344 | } 345 | .icon-check:before { 346 | content: "\e65e"; 347 | } 348 | .icon-form:before { 349 | content: "\e65f"; 350 | } 351 | .icon-admin:before { 352 | content: "\e660"; 353 | } 354 | .icon-paragraph:before { 355 | content: "\e661"; 356 | } 357 | .icon-bell:before { 358 | content: "\e662"; 359 | } 360 | .icon-rss:before { 361 | content: "\e663"; 362 | } 363 | .icon-basket:before { 364 | content: "\e664"; 365 | } 366 | .icon-credit:before { 367 | content: "\e665"; 368 | } 369 | .icon-support:before { 370 | content: "\e666"; 371 | } 372 | .icon-shield:before { 373 | content: "\e667"; 374 | } 375 | .icon-beaker:before { 376 | content: "\e668"; 377 | } 378 | .icon-google:before { 379 | content: "\e669"; 380 | } 381 | .icon-gdrive:before { 382 | content: "\e66a"; 383 | } 384 | .icon-youtube:before { 385 | content: "\e66b"; 386 | } 387 | .icon-facebook:before { 388 | content: "\e66c"; 389 | } 390 | .icon-thumbs-up:before { 391 | content: "\e66d"; 392 | } 393 | .icon-twitter:before { 394 | content: "\e66e"; 395 | } 396 | .icon-github:before { 397 | content: "\e66f"; 398 | } 399 | .icon-meteor:before { 400 | content: "\e670"; 401 | } 402 | --------------------------------------------------------------------------------