benstr

Authentic Material Design Shadows without Web Components

I have seen a bunch of people trying to make the Material Design shadows. They all tend to be slightly wrong and at close inspection look nothing like Google's original. I found that Polymer had the best CSS implementation of the shadows but they were placed there by Web Component's and the Shadow DOM which does not help about 99% of us (yet!). The shadows in this pen use pseudo elements to achieve the exact same quality as the Google spec. Enjoy!

A Pen by Ben Strahan on CodePen.

License.

benstr

// Put a template into the DOM. get() must include a 0.
Blaze.render(Template.projectDetails, $('#main-content').get(0));


// To remove you must pass the view object
Blaze.remove(Blaze.getView($('#project-details').get(0)))

benstr

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

So you're curious in learning this new thing called (Functional) Reactive Programming (FRP).

Learning it is hard, even harder by the lack of good material. When I started, I tried looking for tutorials. I found only a handful of practical guides, but they just scratched the surface and never tackled the challenge of building the whole architecture around it. Library documentations often don't help when you're trying to understand some function. I mean, honestly, look at this:

Rx.Observable.prototype.flatMapLatest(selector, [thisArg])

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.

benstr

Fork & Symlink an Atmosphere Package

If you want to submit a pull request for an Atmosphere package you will first need to

1. On GitHub fork the GitHub repository you want to make changes to.
2. Clone the repository to your local machine with the Terminal.
   • cd into the folder you want the repository saved in and run the git clone command.
   • If you do not know the git clone command we break it down into 3 parts.
   • First part of command is the git clone.

benstr

var merge = require('deepmerge');
var fs = require('fs');

var a = require('./json/a-start.json');
var b = require('./json/collections.json');
var c = require('./json/z-sample-fields.json');

var merge1 = merge(a, b);
var merge2 = merge(merge1, c);

benstr

Add preliminary API for registering hooks to run when Blaze intends to insert, move, or remove DOM elements. For example, you can use these hooks to animate nodes as they are inserted, moved, or removed. To use them, you can set the _uihooks property on a container DOM element. _uihooks is an object that can have any subset of the following three properties:

• insertElement: function (node, next): called when Blaze intends to insert the DOM element node before the element next
• moveElement: function (node, next): called when Blaze intends to move the DOM element node before the element next
• removeElement: function (node): called when Blaze intends to remove the DOM element node

Note that when you set one of these functions on a container element, Blaze will not do the actual operation; it's your responsibility to actually insert, move, or remove the node (by calling $(node).remove(), for example).

https://github.com/meteor/meteor/blob/30fb11f1fa0227f1c0ec3eb30b7864ea3b2d210e/History.md

benstr

Router.configure({
  layoutTemplate: "layout",
  notFoundTemplate: "notFound",
  loadingTemplate: "loading"
});

if(Meteor.isClient) {
  var publicRoutes = ["userRequest", "userPassForgot", "userPassReset"];
}

benstr

Meteor + Famous

Packages

Famono: https://atmospherejs.com/raix/famono

Famono Example: https://github.com/tvararu/simple-famono-example

Views: https://atmospherejs.com/gadicohen/famous-views

benstr

App Dev Process

Premise: Many small wins, short sprints, frequent collaboration, k.i.s.s. every step.

Stage 1 Discovery

1. Understand that YOU do not understand.
2. Gain understanding by interviewing end-users & mapping current process.
3. Iteration #001: Deduce current process to the most basic needs.
4. Iteration #001: Plan a data model for just the basic needs.
5. Iteration #001: Design a user interface for just the basic needs.

benstr

Template.usersIndex.helpers({
  items: function() {
    var users = Meteor.users.find({}).fetch();
    _(users).forEach().forEach(function(num) { console.log(num); }).join(',');
    var items = users.filter(function(user) {
      return user;
    }).map(function(user){
      return {
        name: user.profile.name,
        description: user.emails[0].address,