bitsandletters

[bitsandletters]

Adventures with Metalsmith

On the advice of a wise and experienced friend, I started looking into static site generators. I wanted to create a new portfolio site and integrate it with my blog, which I was ready to move off of Tumblr.

Having used Drupal for several years, I was both puzzled and intrigued by this concept. What --- no database to store our content?? How will we be able to separate our content into semantically appropriate chunks that can later be reassembled? Are there any security risks? Does this provide benefits performance-wise?

In the end, I decided to go this route because I couldn’t face either (1) creating a DB seed file with my old blog posts, or (2) re-entering all of my blog posts either manually or into a DB GUI.

A static site generator that read both markdown and HTML seemed like an efficient way to go -- just export my old posts as CSVs, cut them into separate files, and -- abracadabra -- new site!

I was attracted to Metalsmith because it advertised itself as built on NodeJS and being friendly to JS developers. Yeah, I can do that!

However, my first encounters with Metalsmith were like an awkward first date.

Awkward moment #1: build files output as .html

Oof! I feel like I’ve been caught with a giant pimple on my nose. I haven’t had a site with .html pages since... well probably about 2008. Needing to get the site up quickly, though, I’ll have to set aside this blemish for later cleanup.

Awkward moment #2: the documentation

I would love to help the author(s) add a bit more documentation. Metalsmith is billed as “simple”, but the labyrinth of Readme files and links on GitHub are a bit of a puzzle. When trying something for the first time, I learn best by looking at completed examples, rather than by trying to assemble a bunch of disconnected code snippets on multiple pages. Some of the linked blog entries are super helpful, but ideally this should be contained in the core documentation.

Awkward moment #3: collections

I couldn’t get file-path pattern-matching working for collections to my satisfaction. I wanted to create two separate collections, "blogposts” and “projects”. You’re supposed to be able via use.collections(blogposts: {pattern: ‘somedirectory/*.md’}) in your build file, but I couldn’t get that to produce actual collections.

I tried creating a ‘superset’ collection for all articles: .use(collections({ articles: {pattern: '*/*.*'}}))

but this also picks up my ‘index’ pages.

For blog posts and projects, I ended up labeling each .md file as belonging to a particular Collection within the front matter, just to save time in the short term.

No big deal for my small site, but I would love to figure out how to use this properly.

Awkward moment #5: sorting collections by date

This was admittedly a beginner’s mistake :-) If you want to sort a collection by date in ascending order, do NOT use a key-value pair “reverse: ‘false’“. It doesn’t exist! Just use the following:

`    .use(collections({        blogposts: {            sortBy: 'date',            reverse: 'true'        },        projects: {            sortBy: 'date'        }

}) ` I have a lot more work to do before my experiment is ready for prime time, but it was interesting learning a l little about static site generators!

[bitsandletters]

A front-end buzzword cheatsheet

While applying for web developer jobs, I’ve come across a number of terms in job descriptions that are not 100% meaningful to me. Here are this week’s Cliff’s Notes.

Django: an MVC framework for Python. Includes elements like a web server, a template system, an ORM, a caching framework, access to a testing framework, etc. Elasticsearch: a popular enterprise search engine that uses JSON over HTTP

YAML:  a data display format that allows humans to understand the represented data structure based on markup and whitespace. Follows from the need to serialize data --- i.e. to represent or translate complex data structures into a format that can be stored by a machine.

Houdini: a CSS specification under development that will allow access to additional stages in the browser rendering process. For example, being able to define new layout modules that can be used with display:, or being able to assign a transition value to properties in addition to elements. HandlebarsJS: a JavaScript-based templating system for HTML that allows you to store content in an object-like (JSON-like?) format and, through the use of handlebar expressions interspersed with your template HTML, substitute content from that object into your template HTML. MustacheJS: a minimalist templating system that puts content from values in an object (?) into tags. Emphasis on simplicity and lack of logic -- just replaces tags with values.

[bitsandletters]

First thoughts on Express

Today was my first time using Express. We installed it to help run some common Node.js tasks, like listening for GET requests on particular paths. Express makes it so (seemingly) easy!

app.get('/foo', function(request, response) {  response.send("<p>Here’s the response for foo!</p>");  })

The part that blew my mind, though, was the disassociation between URIs with slashes and file paths. 

Typically, I associate a forward slash with navigation to a subdirectory:

(www.example/test/foo/index.html would indicate a file, index.html, present in parent directory foo, which is present in grandparent directory test)

But with a platform like Node or Express, paths like those don’t necessarily have an association with file hierarchies!

You can easily set up a listener for any path that is in fact served by a file at the root of the directory:

app.use('/test/foo', function(request,response) { response.send('You found foo!'); })

Seems so simple --- I know this is how Drupal operates, but seeing it here really hit home. Paths really don't seem to have much meaning any more, except perhaps as a visual indicator, or maybe for search.

Fascinating!

[bitsandletters]

A note on dot notation vs. bracket notation

I was under the impression that dot notation and bracket notation were more or less interchangeable when referring to object properties. Turns out that's not the case when dealing with variables!

Take this object:

var pet = { color: "brown", type: "rabbit", name: "Peter", age: 2 }

Now suppose you'd like to print the key-value pairs. Using dot notation won't work as expected:

for(var key in pet) { console.log(key,":",pet.key); }

Here, pet.key is undefined.

In the above example, .key is interpreted to be the actual name of the key (rather than a variable to be substituted out for the actual key label).

In contrast, the following way will return the expected output:

for(var key in pet) { console.log(key,":",pet[key]); }

In other words, pet.key is interpreted to have the same meaning as pet['key'].

Very helpful!

[bitsandletters]

Thoughts on Array.prototype.reduce()

The reduce method of Javascript arrays has been a bit of a sore point for me, but I finally realized today that it’s partially a nomenclature problem: I was mixing up the meanings of “current” and “previous”.

To me, "previous value" and "current value" are misnomers. "Previous value" seems to imply ‘the element at the previous index’. But it’s not --- it actually refers to the result of the previous operation. To me, a better way to describe this concept would be accumulator, running tally, or subtotal. 

Conversely, “current value" to me seems to imply a running tally. But it's not -- it's just the value at the current index (i.e. arr[i] where i is the current index in array arr).

To think about this sequentially in an array of four elements:

'Zeroth' iteration: Previous value comes from second parameter of reduce function, if present. Current value is the value at the current index (i = 0)

First iteration: Previous value is the result of the operation in the zeroth iteration. Current value is the value at the current index (i = 1)

Second iteration: Previous value is the result from the first iteration. Current value is the value at the current index (i = 2)

Third iteration: Previous value is the result from the second iteration. Current value is the value at the current index (i = 3)

I made the sketch below to try to solidify this concept. Now I just have to remind myself to stop looking at the wording in the MDN docs.... :-)

[bitsandletters]

My cheat sheet for Array.prototype.reduce() !

[bitsandletters]

Copying by value vs. copying by reference

I am absolutely loving Nicholas Zakas’s The Principles of Object-Oriented Javascript. It’s helped solidify a lot of the concepts that are touched on in the bootcamp curriculum.

One that’s been a little fuzzy in my head in the past few weeks has been copying by value vs. copying by reference - but I think I finally have it down now!

Copying by value

If you assign a primitive value to a variable, and then assign that variable to a second variable, the primitive value is copied by value. For example:

str1 = "cat";

str2 = str1;

str2 = “dog”; // str1 still equals “cat”

str1 and str2 each get their own copy of "cat" stored separately in memory.

In JS, primitive types include strings, numbers, and booleans (as well as undefined and null).

Copying by reference

If you assign a reference value to a variable, and then assign that variable to another variable, that value is copied by reference. For example:

var obj1 = { animal: “cat” };

obj2 = obj1;

obj2.animal = “dog”; // now obj1.animal equals “dog”, too

Both obj1 and obj2 point to the same location in memory.

In JS, objects are reference types (and hence functions and arrays are reference types, too).

[bitsandletters]

Getting excited about Node.js

This week we completed a second small application in Node.js, and this is the first time I’ve started to understand the power of this platform.

Up until now, I was thinking of it as a JavaScript-based equivalent of PHP or another server-side scripting language.

But it seems like the object-oriented nature of JavaScript is part of what makes this such a powerful tool (in addition to asynchronous programming, which we haven’t really covered yet in the curriculum).

Here’s a quick summary of what I learned today.

‘Creating a server’

The terminology on this one was stumping me for a while. What does it mean to “create a server”? For now, I’m just going to think of this as opening a port on your machine, and forcing the machine to start listening for requests on that port.

When you run http.createServer, Node ‘gets ready’ to parse incoming requests into objects ready for you to manipulate (complete with methods and properties, like the incoming path, browser info, and so on).

The request and response objects

Request and response are objects that you can manipulate and inspect. So cool! The first thing that came to mind is, “You could really do a lot of damage with this!” :-)

Each file or module you import is an object

At a very high level, it seems like each module (for lack of a better word) you require, like http, is an object, and you have access to all its methods and properties. Hence the dot notation for running a function like http.createServer.

And when you require a file you’ve created (require(’./filename.js’)), that can be accessed as an object as well! Each file comes with an empty object to which you can attach properties and methods through module.exports.

Starting to appreciate OO JS

I’ve been slogging through object-oriented JavaScript and really not quite grasping the point of learning all the rules about prototypes, constructors, and so on (”Why can’t we just do this procedurally?? Waaah! ;-)”). But now that I’ve begun to understand the power of Node.js, I’m starting to get why learning OOP is worthwhile :-)

[bitsandletters]

Creating javascript objects: classical vs constructor method

I’m trying to wrap my head around the difference between creating a new object with new (constructor method) vs. creating an object with Object.create() (classical method).

My main question so far is, "Why would anyone create an object using the classical method?" It seems so much simpler to create an object with a constructor function: the prototype chain is clear right off the bat, and there's no messy assigning of prototype objects or constructor functions.

I can't answer that question right now, but I can observe the differences in results between the two.

Constructor method, using new

Here's my sample 'parent' function:

function Quadrilateral() {   this.numSides = 4;    this.width = undefined;   this.height = undefined; } Quadrilateral.prototype.area = function() {   return this.width * this.height; }

Here's a new object created using Quadrilateral() as a constructor:

var square = new Quadrilateral();

When I inspect square in the console, I see

v Quadrilateral   height: undefined   numSides: 4   width: undefined   v __proto__: Quadrilateral     > area: ()     > constructor: Quadrilateral()     > __proto__: Object

(Note, "v" represents an expanded arrow in the console (pointing down) and ">" represents a console triangle, not-expanded.)

square has everything I'd expect: properties height, numSides and width, and a link in the prototype chain to Quadrilateral.

Classical method

Now let's try the 'classical method':

function Rectangle() {   Quadrilateral.call(this); }

As of this moment, Rectangle is a function that hasn't been called yet, so if we inspect it, we don't see anything related to Quadrilateral.

v function Rectangle()   arguments: null   caller: null   length: 0   name: "Rectangle"   v prototype: Rectangle     > constructor: Rectangle()     > __proto__: Object   > __proto__: function ()

Its prototype object points to itself (still not sure what that means). And its __proto__ points to a function.

If we create a new Rectangle,

myRect = new Rectangle();

we get this upon deep inspection:

v Rectangle   height: undefined   numSides: 4   width: undefined   v __proto__: Rectangle     > constructor: Rectangle()     > __proto__: Object

Makes sense --- myRect gets inherited properties from Quadrilateral, and its prototype chain links back up to Rectangle. So there is no 'lasting' relationship between myRect and Quadrilateral. It was a one-time granting of properties when myRect was 'birthed'. Quadrilateral is just an absentee parent, to use another analogy.

Now suppose we increase the 'linkage' between Rectangle and Quadrilateral.

Rectangle.prototype = Object.create(Quadrilateral.prototype);

Now, a deep inspection of Rectangle produces the following:

v function Rectangle()   arguments: null   caller: null   length: 0   name: "Rectangle"   v prototype: Object     > __proto__: Quadrilateral   > __proto__: function ()

The new Rectangle prototype's __proto__ links back to Quadrilateral, but the prototype itself is an object separate and apart from Quadrilateral. Rectangle is a function, so we expect it to have its own prototype. What seems to be the most significant change is the new linkage of __proto__ to Quadrilateral. In fact, Rectangle's new __proto__ seems fairly comprable to the __proto__ of square.

However, now that we've 'overridden' Rectangle's original prototype, it has 'lost' its original constructor, which I would expect to find inside its prototype property.

I am not sure of the significance of this. I can still create new Rectangles:

var foo = new Rectangle()

Deep inpection:

var foo = new Rectangle()

v Rectangle   height: undefined   numSides: 4   width: undefined   > __proto__: Object     > __proto__: Quadrilateral

Contrast this with the deep inspection of myRect we did earlier:

v Rectangle   height: undefined   numSides: 4   width: undefined   v __proto__: Rectangle     > constructor: Rectangle()     > __proto__: Object

Now let's 'restore' the constructor function:

Rectangle.prototype.constructor = Rectangle;

and create a new Rectangle:

var foo = new Rectangle();

Deep inspection of foo:

v Rectangle   height: undefined   numSides: 4   width: undefined   v __proto__: Rectangle     > constructor: Rectangle()     > __proto__: Quadrilateral

Now, the __proto__ linkage back to Rectangle is restored, and __proto__ also reports a connection to Rectangle as its constructor.

I'm still parsing through what all this means, but it's good to have these test results in one place.

More later!

[bitsandletters]

I heart Chrome Dev Tools

I’ve been using Firebug and Chrome Dev Tools for a few years now, but today I learned about a few Dev Tools features I hadn’t used before:

Dragging and dropping elements from one part of the DOM to another (amazing!)

Right-clicking to add or edit an attribute

Temporarily hiding an element

Using the + button to add a new style to a highlighted element

Changing the state of an element (to hover, for example) by right-clicking the element or by using the “force element state” button in the styles panel

The color swatch color picker in the styles panel

Modifying temporary copies of stylesheets in the browser (with revision history!)...

...and being able to save those temporary copies to your desktop.

All of the different console methods

Setting and using debugger breakpoints

"Pause for uncaught exceptions" mode

Examining (and modifying!) variables in local storage

Optionally disabling cache through Dev Tools settings

The "initiator" column in the Network pane

Getting HTTP header information directly in Dev Tools

So much good stuff in there!

[bitsandletters]

What influenced and inspired me to learn to code?

Fond childhood memories of BASIC

I’ve been fooling around with computers for a long time. I was lucky enough to have access to computers in grade school and junior high, along with a fabulous teacher, and absolutely loved writing short BASIC programs. As children during the pre-internet age, we created text-based word games like Mad Libs, did computer ‘art’ with the 16 colors available at our disposal, and even graphed simple trigonometric functions. I remember having hours and hours of fun tinkering.

There were no computer science courses available at my suburban high school, and I was not confident enough to take comp sci in college, so I went close to a decade without doing any coding.

Curiosity about online publishing

With a bachelor’s degree in biology in hand, I went on to become a scientific copy editor at the Nature family of journals. There, I got to know the web producers who put all our papers online, and I began to get curious about how these documents got published on the web. Within a few months, I taught myself HTML and CSS and started creating simple static websites.

Trying ‘real’ programming

Fast-forward to 2008: I was in grad school (studying for a masters degree in information systems) and had the good fortune to take two semesters of C++ with another wonderful teacher. This was really the first time I spent digging into any sort of ‘real’ programming with a compiled language. I came to love the “puzzle solving” aspect of coding - having to break a problem into logical steps, and translating each one of those into code. It was also very satisfying to have your code compile correctly and meet all the specifications.

Getting into web publishing

Since leaving grad school, I've been working as a web editor / project manager / website administrator in higher ed.

I'm in contact with many web developers as part of my job, and frankly I'm envious of the work they do. I have been dying to be able to get under the hood of our websites and be able to fix bugs and develop new features.

I believe in the power of a well-tuned content management system and think it can have a profound effect on helping people get the word out about their business, organization, personal cause, or project.

It frustrates me that I don't have the appropriate job title or skills to help  organizations and individuals present web content in a modern, efficient way --- hence my interest in coding bootcamp. My natural leaning is to want to work in web development at the intersection of content and technology, to enable better information sharing. A few examples of this are

presenting event information with appropriately coded microdata

understanding the SEO implications of the current “infinite scroll” web page that’s so popular everywhere

developing “foolproof” content entry forms that prevent non-technical users from uploading enormous images that put a strain on mobile data networks and lead to a poor user experience

I believe that by furthering my coding education, I can make a contribution to the world of web publishing, and also open up doors to employment that will allow me to continue on this personal mission.

[bitsandletters]

Reflections on week 1

It’s been a busy week - simultaneously wrapping up my current job and also getting rolling with bootcamp. Phew!

I wanted to take a few minutes to reflect on some points from this week’s lessons that were new or particularly significant for me, and a few points that I’m still struggling to wrap my head around.

Points that are starting to make sense:

Manipulating arrays using pop() and push()

The RPN calculator exercise helped solidify this for me.

Using this within functions

So cool!

The difference between creating an object via the literal method vs. using a constructor

David and Scott explained in the video that a constructor does four things:

runs the constructor function

returns this by default (this can be overridden through a return statement)

creates an empty object

assigns the double-underscore prototype to the prototype of the constructor function (still working on understanding that part

Cool stuff about the browser console: dir(x) will allow you to do a "deep inspection" of x's properties and methods. Oh and in general, the console is a helpful javascript 'scratchpad'.

Things that I'm still struggling with:

The flow of control inside Testem/Jasmine test scripts.

I'm still not clear on the how a script like this gets executed.

describe("hello()", function() { it("says hello", function() { expect(hello()).toEqual("Hello!"); });

Definitely need to dive deeper in this, since it seems like test-driven development is a big part of the curriculum, and I don't want to just gloss over it.

More examples of how the following are used:

Functions as objects

Creating one property of an object as a .prototype, and another property without that designation

When to create a function using var myfunction = function() {} and when to create one using function myfunction() {}

Looping or iterating through all keys & values in an object. This was the final lesson & exercise, and I definitely need more practice with this concept.

[bitsandletters]

Dipping a toe in Bootstrap

As part of one of my first coding bootcamp assignments, I’m creating a front end for a javascript-based number guessing game, and we’re permitted to use Bootstrap rather than starting from scratch.

I’ve been eager to get into Bootstrap for a while. I’ve been familiar with the 960 grid concept for several years, and had a vague understanding of the YUI Library, but a whole pre-baked responsive framework just seems too good to be true!

A few questions come to mind right off the bat:

How many container divs do I need on one page?

What’s the purpose of wrapping content in a row div?

If you have col-sm and col-md divs that are the same number of columns wide, what is the difference in their behavior or appearance?

I’ll try to address these questions in a later post.

[bitsandletters]

Change of plans

Hear ye, hear ye, internet citizens! I’m ‘officially’ repurposing this blog to be tech-only (fewer letters, more bits :-) as part of my enrollment at web programming bootcamp.

I promise less color commentary about random UI quirks that I find in my daily digital life, and more about coding.

</end of official pronouncement>

[bitsandletters]

From the Security Through Obscurity Department: Adobe Acrobat Pro XI hides Tools inside the Page Thumbnails button. <sigh>

[bitsandletters]

1 Chrome tab = 6 processes using 182k RAM 1 Firefox tab = 1 process using 126k RAM ?

[bitsandletters]

Google Drive adopts a cinematic landing page, not unlike... Bing!