iron-router-logo

Quick Reference: Meteor.Js Iron Router Vocabulary

Iron Router Vocabulary

  • Routes: A route is the basic building block of routing. It’s basically the set of instructions that tell the app where to go and what to do when it encounters a URL.
  • Paths: A path is a URL within your app. It can be static (/about) or dynamic (/posts/abc), and even include query parameters (/search?keyword=meteor).
  • Segments: The different parts of a path, delimited by forward slashes (/).
  • Hooks: Hooks are actions that you’d like to perform before, after, or even during the routing process. A typical example would be checking if the user has the proper rights before displaying a page.
  • Filters: Filters are simply hooks that you define globally for one or more routes.
  • Route Templates: Each route needs to point to a template. If you don’t specify one, the router will look for a template with the same name as the route by default.
  • Layouts: You can think of layouts as a “frame” for your content. They contain all the HTML code that wraps the current template, and will remain the same even if the template itself changes.
  • Controllers: Sometimes, you’ll realize that a lot of your templates are reusing the same parameters. Rather than duplicate your code, you can let all these routes inherit from a single routing controller which will contain all the common routing logic.

 

Ref. Discover Meteor & Iron:Router Documentation

Quick Reference: Meteor.Js Packages

Meteor.Js Packages

  • meteor-base: Contains Meteor’s core components – a Meteor app can’t run without it
  • First-party packages: come bundled with Meteor, examples: mongo and/or session. Included by default with new Meteor projects but can be removed
  • Local packages: Specific to your app; live in its local /packages dir
  • Atmosphere packages: Custom, third-party packages published to Atmosphere
  • NPM packages: Node.js packages. Can’t be included in Meteor package list directly, but can be imported/used within Meteor local/Atmosphere package

Ref. Discover Meteor

AJAX Image

AJAX Series: Async vs Sync

For the longest time I wanted to learn what AJAX was all about (you can interact with a website’s features without the need of reloading the entire website). The first thing that got me confused was the term “asynchronous”; what’s that about, right?

Well, there are two ways in which data is processed: the synchronous (or in “sync”) and the asynchronous (not in sync) way. To give you a better idea on how these two differ I highly suggest you to go over at NodeSchool.io and check out the learnyounode workshopper. If you are interested in learning Node.js or IO.js (NodeJS fork) I highly encourage you to take all the workshoppers that are available! These are excellent resources in which you will learn a lot about JavaScript.

Now, lets talk about sync programming. Usually, when we are developing, specially in Javascript, our scripts follow a certain pattern: we define global variables, objects, methods, scopes, etc. All of them follow a “recipe style” process. What I’m trying to say is that your script will wait until Step 1 is done in order to perform Step 2 and so on; this is the nature of sync programming and as you can imagine, it has its limitations since we need to wait until a certain part of the program has finished in order to proceed to the next step. This has a huge impact on performance and creates a bad user experience; which is no bueno! And for that reason (sometimes) it’s better to use an async approach.

Now, AJAX is all about asynchronous programming, which means, the client doesn’t have to wait for a server response in order to execute/process another part of the Web application. Remember, with synchronous programming the app follows a recipe style format; perform step 1, then 2, and so on. With an async approach, there isn’t such thing as a recipe style, which means, it doesn’t have to wait for step 1 to finish in order to execute step 2 or 3. This sounds great right? Well, it does! It improves the user experience and performance!

A living example on how AJAX works is by looking at Google Maps website. As you move your cursor to different parts of the page, there are certain tiles/squares that get updated with the new satellite pictures (these are XMLHttpRequest calls to the server). Something very important to take into consideration, is the fact that each tile doesn’t wait for the first one to finish loading and then proceed to the next one and so on, they don’t follow a particular order. That’s why certain tiles load faster than others.

I truly hope this little introduction gave you a better understanding on how AJAX works. This is Part I of my AJAX series. Make sure to come back next week (or subscribe to my newsletter!) for Part II where we will start to write some code!

Cheers 🙂

 

Javascript Fundamentals – The DOM

Document Object Model

 

I’m sorry for not being so active on my blog lately! Although, I’m always reachable on Twitter @Salcoder 🙂

I have been doing a lot of Javascript lately and I have come across concepts such as: the DOM, traversing and event handlers which in my opinion can be quite tricky to grasp.

I want to share this video that I found thanks to the awesome members of the Treehouse Forum.

In this video Chris Johnson makes it very easy to understand the DOM and how traversing works too 🙂

I truly hope you enjoy and learn a lot from it!

 

CSS3 Property: text-shadow

text-shadow
Image from http://blog.greer-inc.com

I haven’t said it before but I’m really looking into becoming a Web Developer full-time. I came to the conclusion that we must do what we love and if we aren’t doing it we won’t be able to achieve happiness (I truly love Web Dev/Design).

I recently joined Treehouse and let me tell you, WHAT AN AMAZING COMPANY! I will write a review about Treehouse and Code School later on. Stay tuned! 😉

Now, enough of that and let’s get our hands dirty!  🙂

Based on what I have been learning about CSS and some of the cool properties in CSS3, I decided to show some examples when using text-shadow. There are an infinite amount of websites out there that have pretty awesome examples, but for the sake of it I decided to show some of my styles.

Here we go:

text-shadow

text-shadow

text-shadow

text-shadow

text-shadow

 

As you can see, the text-shadow property can add a lot of character to your text!

Remember to have a firm understanding on how the values affect the text-shadow:

text-shadow: 1px 2px 8px #000;

1px –> Horizontal Shadow
2px –> Vertical Shadow
8px –> Blur Distance
#000 –> Color

Here are some awesome links with a lot of information to get you started:

http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

http://css-tricks.com/almanac/properties/t/text-shadow/

http://www.w3.org/Style/Examples/007/text-shadow.en.html

http://css3gen.com/text-shadow/ <– Easily generate your text-shadow !

As a bonus, if you want an online Color Palette you can go ahead and visit this website:

http://paletton.com

Cheers!