Author Archives: Dano

Creating my ideal MERN Stack

This is going to change A LOT over time

Setup Express

npm install -g express-generator
npm install -g nodemon
express express-backend --view=hbs --css=sass
cd express-backend
npm install

Open the folder in a code editor (I’m using VSCode right now. It’s pretty nice!)

  • In /bin/www, change “start”: “node ./bin/www” to “start”: “nodemon ./bin/www”
  • In /bin/www, change var port = normalizePort(process.env.PORT || ‘3000‘); to var port = normalizePort(process.env.PORT || ‘3001‘);
  • In /app.js, choose your sass syntax : indentedSyntax: false, // true = .sass and false = .scss

Setup React

From inside the express-backend

npm install -g create-react-app
create-react-app client
  • In /client/package.json, append after the end of the “scripts” block
    } // end of "scripts"
    ,"proxy": "http://localhost:3001"
  • Now you are ready to start react.  It will talk to your Express route APIs by using fetch or axios, as if the data was local, thank to the “proxy” we added! In another command window to go to the /client folder and type:
npm start

Note: This process is roughly based off this article by Dave Ceddia. Thanks Dave!

Setup MongoDB

  • Download Mongo Community version : the engine
  • Download Mongo Compass : the database visualizer
  • Install them both : use the defaults
  • (WINDOWS) Add Mongo \bin folder to your path
  • Add the following to you package.json file in your “express-backend” folder:
"mongo-mac": "mkdir mongo-db; mongod --dbpath mongo-db",
"mongo-win": "md mongo-db & mongod.exe --dbpath mongo-db"
  • Install mongoose in /express-backend with:
cd express-backend
npm install mongoose --save
npm install axios --save
  • If you want to replace any fetch calls with axios in react, you can use the following conversion style:
  componentDidMount() {
    /*fetch('/users')
      .then(res => res.json())
      .then(users => this.setState({ users }));
    */
    axios.get('/users')
      .then(res => this.setState({ users : res.data }))
      .catch(error => console.log(error));
  }
npm install react-router-dom --save

 

more to come…

Mongo-Express-React-Node : My MERN Stack

Prerequisites (for Windows)

npm install -g node-gyp
(as administrator) npm install --global --production windows-build-tools

Node

  • Axios : Like fetch() but it works everywhere, processes your json and detect 400 errors
npm install --save axios

Express

  • express-generator : easy setup of express environment
  • body-parser : parse the incoming requests bodies for the info we are sending (allows access to req.body)
  • nodemon : watches our server.js file for changes, then restarts it.
  • mongoose : Allows easy interaction with a MongoDB
npm install -g express-generator
npm install -g nodemon
npm install express body-parser nodemon mongoose --save

React

  • create-react-app : My go-to boilerplate
  • Axios : (Yes here too!)
  • StoryBook : Author your components in a standalone environment
  • Jest : “delightful” javascript testing

Redux

MobX

I haven’t tried MobX yet, but I am eager to see what it can do.

Mongo

  • Compass – Essential for visualizing your data and tables

Playing around with animation and layers

One day I just woke up and had to make this. I collect limited edition screen prints, and one of my first Artist I started collection was Daniel Danger. The layering effect of screen printing lends itself perfecting to layering elements in an animation.

Scroll the frame below

As with all code, after 6 months there are things I would have done differently, but you can silently judge me here, by looking at my code.

How to make WordPress Show in an iFrame (X-Frame: SAMEORIGIN)

So I use a nice Chrome plugin for testing responsive layouts called “Dimensions Legacy”, and it puts your content in an iFrame and lets you resize the frame without having to resize your browser (good for inspecting!), HOWEVER, wordpress has added a Frame showing restriction into their default security that won’t allow wordpress to render in an iFrame anymore!

I tried a few things that were meant to make it work, like commenting out the header hooks and even the function that inserts the X-Frame directive, but nothing seemed to work. Even after a reboot!

Finally I found a nice solution (in StackOverflow), that lets you invalidate the X-Frame SAMEORIGIN directive, by adding your own nonsense one that makes the browser ignore them both!

In my page template I added:

<?php header('X-Frame-Options: GOFORIT'); ?>

Problem Solved! 3 years and noone has hacked me yet!

Old Reliable vs Bleeding Edge : WordPress CMS to Ghost CMS

A new client of mine wants to re-brand their existing website, and I’m excited about it!  They are in the industry, they have hired other very capable freelancers to work with me, and they have a clear view of their goal.

We were talking together about how we wanted to serve the web content.  We could make a static site, but it’s not flexible enough for the client to edit on their own. We could use a CMS, but we aren’t interested in a blog (yet!) and only want web pages.

Blogs make great non-blogs!

Using a blog engine these days doesn’t mean that you are actually making a blog anymore.  Wordpress has introduced for a while, the concept of a static “homepage”.

So, Do we want to use WordPress?

Yes and No.  Wordpress I know how to use (though I’m not very fluent in PHP), and it has a ton of support for themes (but we want to start with a barebones theme anyway) and it’s got a lot of widgets and libraries (that we don’t really use).

I asked myself, do i want to use all this infrastructure to make a light-weight, fast website?

Then my hero Jeff Atwood (of Stack Overflow fame) wrote recently that he’d changed his own blog over to Ghost. I also had been starting to work with Node.js framework recently, and when I googled “Node.js CMS” Ghost came up prominently!

Destined to be haunted…

Ghost is fast, really lightweight, and very much focussed on posts and pages and blogs and THAT’S IT.  My only really big problem was I was going to need a static page as the home page and Ghost version 0.4.1 supports pages, but not a page as the root page! 🙁

Ghosts are transparent!

Hey but it’s all good! All the code in ghost is non-compiled and you cna hack away at anything you want… so i fiddled with the routing and controllers a little and BOOM!  Static page for a homepage!

Lets go!

So my next exploration is : Hosting this baby on AWS using a Bitnami image and making sure this is going to work!

Old Flexbox is slow. New Flexbox isn’t. Things solved with Flexbox!

Thanks (again) to Paul Irish doing the hard work for all of us and testing if modern flexbox is “up to par” for performance.  Good new everyone!  It is.

http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow

Oh and incase you were wondering what can be done with flexbox?

Things solved by flexbox

http://philipwalton.github.io/solved-by-flexbox/

Perfect your Vertical Rhythm: CSS Line-Height Explained and De-mystified

Props to Russ Weakley for this fantastic and quick slideshow on everything you wanted to know about line-height and adjusting your “Vertical Rhythm”.

I guess what I took out of this more than anything, is specifiying line-height: 1.25; (with no unit) is a great option that will cascade down through child objects in your DOM and re-calculate line-height based on each item’s size.

Using Mustache Templates for Javascript : Practical Examples

Aw3some!!1

Mustache.js is awesome for making HTML templates in an MVC framework, and I’ll tell you why.  Previously I had used underscore.js for templating and it allowed you do pretty much anything you wanted.  This would invariably end in templates with business logic and data-massaging code embedded in “the view”.  Mustache is the drill-sergeant of templates : It only allows it’s own logic tags, and is not going to take any bullshit from you soldier!

Sir! Yes Sir!

Now rather than being a pain to use Mustache is actually refreshingly simple and lightweight, but also incredibly powerful.  Since the documentation ranges from “great” to “meh!” (see partials).  I thought I’d list some <blink>WORKING</blink> examples of real-world mustache usages:

Example 1 : Binding a primitive variable (No JSON structure)

This one isn’t particularly “real world”, but it’s a great place to start.. you have a variable.. jsut one.. and you want to bind it to a template. As your variable won’t have a name, you need to say “just bind the data”… that is what {{.}} does.


Try the example

Example 2 : Binding an Array of primitive variables (Array structure)

This one is a real world example.  Your web service returns you a complex object, but all you are interested in is binding to one array inside that object.  Rather than pass the whole structure in.. you just pass in the array.. but the array has no name.. how do you reference it?  with the {{#.}}{{/.}} loop command.


Try the example

Example 3 : Binding an Array of Name/Value Objects with named Properties

Moving onto our most realistic example so far.  Building a <select> with objects that are bound to a data object.  In this case, we emit our one-time select tag and then inside it, loop through our named “data” property and bind it’s properties by their names of “value” and “text”.


Try the example

Example 4 : Binding a data object and a localization (L10n) data object joined in a wrapper object

This is a simplistic example of a real world problem we were solving with templates.  Our page labels all had to be localized, and the label text was stored on the server and delivered to our web pages as a javascript object.  This l10n object would then get wrapped in a data object with a sibling object that would contain the user data.

The template would render both the label as well as the data at the same time.


Try the example

Example 5 : Binding a data array to an anonymous (lambda) function

The reason I like Mustache over, say, Underscore is because it doesn’t allow for any embedding of code in your template. It forces you to have a nice clean View. Sometimes, however you do need to process data, or perform a lookup based on a key.

In the Real World, I have used this functionality to lookup a localization string in a dictionary, based on a key, and if the data is missing, then show a “missing data” flag for that label.

Try the example

Example 6 : Binding a data array recursively to a template

It took me hours to get this one working originally, then I lost it, and had to re-write it. It then only took me about 15 mins, and most of that was making the data structure! Once you understand how ti works, it’s very easy.

When you are planning on rendering data recursively, you need two templates (or the same template twice), the first is your master wrapper template, and then when you call Mustache.render, you provide a third parameter, which is a JSON object of all your sub-templates you will be referring to by name.

When you want to call you sub-template, you use the {{>subtemplate}} syntax, and it will render. To get recursiveness, your sub template must also then refer to itself inside it.


Try the example

Documentation?

Mustache has an OK document called mustache(5) , but this document which is specifically for javascript is both more detailed, and doesn’t have syntax errors.