How to dynamically load the date in Jade using Javascript's Date()

Problem

I need to add the current year in a footer for the copyright, just like you can do with PHP. But, I'm using Node + Express + Jade templating.

Jade loves Javascript

Sometimes I forget, but Jade evaluates raw Javascript. Frequently I use it to evaluate the locals variable for dynamic content. But when compiling the Jade, you have access to the entire Native SDK.

The Solution

Mine just wanted the date, but presumably you could do a great deal of rendering logic right in the Jade file. Similar to what the Helpers do something in a Ruby on Rails project. Anythings extremely page-specific and last minute.

footer © #{new Date().getFullYear()} Charlton Roberts. All Rights Reserved.

Next,

I wonder what context the process that actually rendering the Jade lives in. Is anything else in scope..?

Quick Way to Remove a Single Line from a File From the Command Line, Linux / Mac

The Problem

Our stack typically requires recreating our staging servers a lot. By default, Mac OSX throws a security error if the IP address of the computer that you are trying to log into leads to a different computer than the last time you logged in. Something like this:

````bash

ssh root@staging @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-middle attack)! It is also possible that a host key has just been changed. The fingerprint for the RSA key sent by the remote host is 83:48:94:b9:ce:53:34:xx:xx:xx:xx:xx:xx:xx:xx:xx. Please contact your system administrator. Add correct host key in /Users/croberts1/.ssh/knownhosts to get rid of this message. Offending RSA key in /Users/croberts/.ssh/knownhosts:15 RSA host key for ec2-xx-xx-xx-xx.compute-1.amazonaws.com has changed and you have requested strict checking. Host key verification failed. ```

I'm sure there is a better way to solve the solution, but my quickfix is to delete the line in the known_hosts file and re-authenticate the server. So I wondered if there was an easy way to do this, in a single line, from the command line.

The Solution

The key piece of information is the line of the offending entry. Which is:

/Users/croberts/.ssh/known_hosts:15

So we know we want to delete the 15th line using sed, then send the output to the original file. Of course, you'll usually have to sudo this as well.

>> sed '15d' /Users/croberts/.ssh/known_hosts > /Users/croberts/.ssh/known_hosts

Where 15 is the line number you want to delete.

One Page Nav, scrollOffset Workaround Without Top Padding

The Problem

For the new Pilot site, we are using the clean and quick One Page Navigation jQuery plugin from Trevor Davis. In older versions of the site, the previous dev had used scrollOffset config feature. However, I wanted to use an updated version, and Trevor warned in several issues that the feature will soon be deprecated. He said to use padding-top and a negative top margin as a workaround.

However, I quickly discovered a limitation to this method: it fails for sections with background colors or images. I came across this wonderful post by Nicolas Gallagher in which he clearly outlines several methods to produce a floating header, with pros and cons of each.

The Solution

Ultimately, the method that worked for me was as follows (Method D):

CSS // Assuming a nav/header height of 100px; section { border-top: 100px solid transparent; margin-top: -100px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }

What's Going On Here?

We're establishing a transparent border that corresponds to the height of the header. The negative top margin positions the element for the jump link. Then–and this is the important part–we're clipping the background to the padding box. The syntax for background-clip is similar to box-sizing.

Limitations and Support

Two important limitations to note. First, this obviously prohibits you from placing an actual border at the top of the section. But, presumably you could place a border on an inner element, which you probably have anyway. Second, This causes the last X pixels of the previous section to be unclickable, where X is the height of the nav/header. This effect is due to the border, which is stacked above the previous section (negative margin). Typically this won't be a problem from a design perspective, as you'll want some space at the end of each element. But you shouldn't put any buttons or links down at the very bottom of any of sections for this reason.

Nicholas claims the following support for this particular method: Known support: Firefox 1.0+, Opera 10.5+, Safari 3+, Chrome

Conditional Parents in Jade

The Problem:

I need to decide which parent to insert based on a conditions. However, whatever the condition, they should both have identical children. Jade does not have an end like Ruby or a fi like bash. And if you simply add another space like you would expect, then only the last condition gets the children. There seems to be some disagreement over whether this is a limitation of the language or merely bad syntax that should be avoided.

Example:

```Javascript if (condition) form.class1(action="/", method="POST") else form.class2(action="/", method="POST")

input(type="text", placholder="Some Input")

```

The Solution:

Jade does support the ternary operator, and it works pretty well with tag attributes (including classes). My particular fix was as follows:

JavaScript form(action="/", method="POST", class=(condition)?'class1':'class2') input(type="text", placholder="Some Input")

How to Remove a Marker Google Maps JavaScript API v3

This, I thought, was not intuitive. In order to remove a marker that you have placed on a map, you need to reset its map, particularly to null. Like so:

markerToBeRemoved.setMap(null);

Jade Templating in Kraken for Node.js

Kraken, the new Node.js framework from the guys at Paypal offers some interesting new features. My favorite so far is its plethora of integrated features, especially around security. It comes standard with LinkedIn's flavor of the Dust templating engine. However, on a tight dev schedule, I really just don't have time to learn something new. Plus, hosted solutions like Nodejitsu and Modulus.io don't seem to support it. So, I wanted to go with old faithful, Jade (the standard in express).

Kraken said it supported multiple templating engines, but I couldn't find the documentation. I went digging and found a test using the Jade templating engine. I found that I needed to set following in my config/app.json:

"view engines": {
     "jade": {
        "module": "consolidate"
    }
},
"express": {
    "view engine": "jade",
    "views": "path:./.build/templates"
}

The kicker for me was the consolidate module. I had assumed it would use the jade module.