Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Meteor Cookbook
  • Toc
  • feedback
Meteor Cookbook

Meteor Cookbook

By : Isaac Strack
4.4 (5)
close
Meteor Cookbook

Meteor Cookbook

4.4 (5)
By: Isaac Strack

Overview of this book

This book is meant for developers of all experience levels looking to create mobile and full-stack web applications in JavaScript. Many of the simple recipes can easily be followed by less-experienced developers, while some of the advanced recipes will require extensive knowledge of existing web, mobile, and server technologies. Any application or enterprise web developer looking to create full-stack JavaScript-based apps will benefit from the recipes and concepts covered in this book.
Table of Contents (14 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Sections
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Optimizing Your Workflow
chevron up
1. Optimizing Your Workflow
Introduction
Installing Meteor
Finding documentation for Meteor
Getting help with questions
Setting up your project file structure
Setting up your development environment
Using the web console
Deploying a test app to Meteor
Deploying to Meteor using a CNAME redirect
Deploying to a custom hosted environment
Deploying with Meteor Up (MUP)
Using CoffeeScript
Using CSS compilers
2
2. Customizing with Packages
2. Customizing with Packages
Introduction
Adding Meteor packages
Removing Meteor packages
Discovering new packages with Atmosphere
Creating a multipage application with Iron Router
Building a custom package
Using npm modules
Publishing custom packages to Atmosphere
3
3. Building Great User Interfaces
3. Building Great User Interfaces
Introduction
Inserting templates with Spacebars
Inserting raw HTML using triple braces
Creating dynamic lists
Building a smooth interface with Bootstrap
Creating customized global helpers
Creating custom components
Using reactivity with HTML attributes
Using dynamic templates
Animating DOM elements
4
4. Creating Models
4. Creating Models
Introduction
Implementing a simple collection
Using the Session object
Sorting with MongoDB queries
Filtering with MongoDB queries
Creating upsert MongoDB queries
Implementing a partial collection
5
5. Implementing DDP
5. Implementing DDP
Introduction
Reading the DDP stream
Using client-only collections
Implementing multiserver DDP
Integrating DDP with other technologies
6
6. Mastering Reactivity
6. Mastering Reactivity
Introduction
Creating and consuming a reactive value
Using Ajax query results in ReactiveVar
Making a custom library reactive
Updating Blaze templates without Mongo
Using inline data to modify UI elements reactively
Integrating a jQuery UI
7
7. Using Client Methods
7. Using Client Methods
Introduction
Creating dynamic graphs with SVG and Ajax
Using the HTML FileReader to upload images
Creating a coloring book with the Canvas element
8
8. Integrating Third-party Libraries
8. Integrating Third-party Libraries
Introduction
Using npm packages directly
Building graphs with D3.js
Creating cutting-edge UIs with Polymer
9
9. Securing Your Application
9. Securing Your Application
Introduction
Basic safety – turning off autopublish
Basic safety – removing insecure
Securing data transactions with allow and deny
Hiding data with façades
Protecting the client with browser-policy
10
10. Working with Accounts
10. Working with Accounts
Introduction
Implementing OAuth accounts packages
Customizing the accounts login
Performing two-factor authentication
11
11. Leveraging Advanced Features
11. Leveraging Advanced Features
Introduction
Building custom server methods
Creating custom EJSON objects
Handling asynchronous events
Using asynchronous functions
12
12. Creating Useful Projects
12. Creating Useful Projects
Introduction
Creating RESTful web services
Creating a complete app with Iron Router
Deploying apps to mobile devices
Adding social sharing
13
Index
Index

Using CSS compilers

As any CSS junkie already knows, using standard CSS to create style sheets can be tedious, redundant work. Many designers and developers prefer to use a dynamic style sheet language or preprocessors, such as Less, Stylus, and SCSS/SASS.

Meteor not only enables the use of preprocessors, but also treats them just like any other file so that changes are reflected immediately.

This recipe will show you how to enable some of the more popular CSS compilers in your Meteor application.

Getting ready

Nothing is needed to prepare for this recipe, other than having Meteor installed, and a project created so that you can begin using CSS compilers.

How to do it…

We're going to cover three different preprocessors, as they all work in a similar way.

Using Stylus

  1. Open a terminal window and navigate to the root folder of your project.
  2. Enter the following command:
    $ meteor add stylus

    You should see a response similar to the following in the terminal window:

    stylus  added, version 1.0.7

    Stylus is now installed and ready to be used. You can test this by creating a .styl file and adding a script (for example, add test.styl to your client/styles folder).

When you start your Meteor application with the meteor command, Stylus files will be processed and proper CSS will be rendered.

Tip

You can use the nib code in Meteor as well. Just add @import 'nib' to your .styl files, and Meteor takes care of the rest.

Using Less

  1. Open a terminal window and navigate to the root folder of your project.
  2. Enter the following command:
    $ meteor add less

    You should see the following response in the terminal window:

    less  added, version 1.0.14

    Now the Less package is installed, and you can use the Less stylesheet syntax to create your CSS.

As with Stylus, you can test this by creating a .less file and adding some style declarations (for example, add test.less to your client/styles folder).

When you start your Meteor application with the meteor command, the Less files will be compiled by Meteor into standard CSS and rendered as usual.

Tip

If you're fond of using @import statements in your Less stylesheets, make sure you use the .lessimport extension. Otherwise, Meteor will automatically import and compile any and all .less files it can find.

Using SCSS / SASS

  1. Open a terminal window and navigate to the root folder of your project.
  2. Enter the following command:
    $ meteor add fourseven:scss

    You should see a response similar to the following in the terminal window:

    fourseven:scss  added, version 2.1.1

SCSS and SASS files can now be used to style your CSS. Just as before, you can test this by creating a .scss or .sass file and adding some style declarations (for example, add test.sass to your client/styles folder).

When you start your Meteor application with the meteor command, the SCSS or SASS files will be compiled by Meteor into standard CSS and rendered.

How it works…

When you installed any of the preprocessors with the meteor add command, it installed the corresponding npm packages tailored to work inside of Meteor.

As with other files, Meteor will monitor changes to any *.styl, .less, .scss, and .sass files, compile the changes into CSS, and render the changes immediately.

See also

  • The Adding Meteor packages recipe in Chapter 2, Customizing with Packages
End of Chapter 1
Next Chapter
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete