How to Make a Simple Database Server

A couple months ago, I started writing an http server using Node.js; but had to stop because, life. I've written a few of these before, as the foundation for larger Node projects using Express for routing and MongoDB for data storage; but never used local data storage. This is the first of three posts. For the first part this program, I will be creating the database server using only what's available to me with Node.js. Before I jump into the code, a quick outline sets me up for a smooth(ish) execution:

  1. Create an empty Node.js project
  2. Install any dependencies, e.g. request
  3. Create the server and have it accessible from http://localhost:4000/
  4. Give it two routes: http://localhost:4000/set?somekey=somevalue and http://localhost:4000/get?key=somekey
  5. Store the key and value in local memory on the set
  6. Retrieve the key on the get

CREATING THE EMPTY NODE PROJECT

Create a new directory and cd into it.

mkdir simple-database
cd simple-database
npm init

This creates the package.json file to store the dependencies. Then, create the main file file that will contain the server code:

touch index.js

INSTALLING DEPENDENCIES

npm install request --save

Check the package.json file:

{
  "name": "simple-server",
  "version": "1.0.0",
  "description": "simple database server",
  "main": "index.js",
  "scripts": {
  },
  "author": "your name",
  "license": "ISC",
  "dependencies": {
    "request": "^2.79.0"
  }
}

Running these dependencies adds the node_modules folder in the root directory. Installing the request package allows you to make http requests. The --save option automatically adds the package to the package.json file and saves that version to the project in the node_modules directory. 

WRITING THE SERVER CODE

The first step in creating an http server is to require the http module. http modules are included when Node is installed so no additional steps are needed to import it. Using the http module's createServer( ) method, the server is now created. The createServer( ) method takes a callback function as a parameter. Every time the server receives a new request, the callback function is executed. At this point, you can check the terminal and browser window ... each should say 'This works.' If you refresh three times, you should see 'This works' logged three times in the terminal.

The callback function takes two parameters, a request and a response. The request object contains information such as the URL, while the response object is used to return the headers and content to the user making the request.

The callback function begins by calling the res.writeHead() method which sends an HTTP status code - in this case it's 200, an indication of success - and response headers to the user making the request. If you don't specify headers, Node will send them for you. Next, the server calls the res.end() method which tells the server that the response headers have been sent and the request has been fulfilled. It can be called with no parameters, but in this case, I've included a message 'This works' as an indication that the request has been fulfilled.

The listen() method activates the server on port 4000. 

var http = require('http');

http.createServer(function(req, res){
    console.log('This works.');
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('This works.');
}).listen(4000);

Making a Modular Grid & Baseline in Illustrator

Lately, I've been reading everything I can get my hands on about grids. A couple favorites are: Making and Breaking the Grid, The Designer and the Grid and just to set things off on the right design-minded foot, The Vignelli Canon. Every document I create sits on top of some type of grid-based structure. In web development, I use Twitter Bootstrap's 12-Grid System (12 columns and unlimited rows) to lay the foundation for the content. For print projects, depending on the nature of the project, I'll make my own grid. This brief tutorial attempts to walk through the process of setting up that structure. I won't get into the weeds about content hierarchy or typeface selection. I will however, take a more straight-forward approach to this specific part of the project setup.

Setting Up the Page

It's up to you to decide whether to take the font-size into consideration. For simplicity, I'll use a font-size of 10.5 pixels on an A4 (210mm x 297mm) page size - this is closest to 8 1/2 x 11. The default setting for most layout software is 120 percent of the type size and conventions finds that anything between 120% and 145% works. In the end it comes down to what you think looks good; but this is at least a starting point.

Some projects require control over vertical as well as the horizontal flow. In this case, a modular grid may be a good solution. Modular grids have vertical columns and horizontal flowlines the divide the columns into rows - similar to Twitter Bootstrap. Each one of the cells is called a module - hence the name. This modular grid will have four columns and eight rows, with a 3mm bleed around the edge of the entire document. Now let's open Illustrator and begin:

  • Make sure your rulers are on (⌘ + R)
  • Select the rectangle tool, make sure smart guides are on (⌘ + U)
  • Find the center of the document, hold down the Option key and click once (you’ll see a crosshair appear and a dialog box which you'll fill with the width and height dimensions). In this case, the A4 measurements (210mm x 297mm)
  • Next to each dimension, type - 24pt (this will put a 12 point gutter around the edge of the document)
  • Click OK
  • Change the color of the rectangle to #000 with a transparency of 20%
  • Click on Transform. The newly adjusted dimensions are: width (201.533 mm) and height (288.533 mm)

Screen Shot 2017-01-02 at 9.18.29 PM.png

Making the Grid

Take the height of the rectangle (288.533 mm) and divide it by the leading - also known as line spacing. I've decided on a 14 point(4.94 mm) leading to give the type some breathing room. This gives us the number of lines of text that will fit on the page (58.41). However, we need to use a number that will divide evenly into 8. In this case, it's 56 (7 lines of text for each row). We will use one less, bringing the number of lines to 55.

Now, take the height of the rectangle (288.533 mm) and divide it by the 55 lines. This is the new leading, 5.246 mm - it's also going to be the width of the gutter (space between the columns).

  • Select the rectangle
  • Go to Object > Path > Split into Grid...
  • Check the Preview box; but leave Add Guides unchecked for now
  • Fill in the number of rows (8) and columns (4)
  • Fill in the new gutter, 5.246 mm 
  • Click OK
Screen Shot 2016-12-30 at 10.47.07 PM.png

Select all the boxes and group them together (⌘ + G) so that they are easily selected later on. Go back to Object > Path > Split into Grid... and check the Add Guides box. Now click OK.

  • Create a new layer and name it Guides
  • Select the guides and move them to that layer
  • Using the Direct Selection (white arrow) tool, drag it over the top of the rectangle to select the vertical guides
  • In the Transform panel, type the height of the page (297 mm). The guides will be shortened to fit the page.
  • Make the lines into guides, View > Guides > Make Guides (⌘ + 5)
  • Repeat the same for the horizontal lines, with a width of 210 mm.
  • Lock the Guides layer

Making The Baseline

While the grid helps to set a structure for organizing the content on the page, the baseline helps set a vertical rhythm for the text to flow.

Screen Shot 2017-01-02 at 9.38.49 PM.png
  • Create a new layer and name it Baseline
  • Create one line across the top grid. Give it a red stroke color and no fill.
  • Go to Effects > Distort & Transform > Transform
  • The Preview check box should be selected
  • Now we want to duplicate the line we just created vertically with an offset using the leading measurement, 5.246 mm
  • The number of copies we want is 55
  • Click OK
  • If you need to go back and adjust any of the numbers here, click the Window > Appearance tool and you'll see there is an fx next to Transform. Click it to modify.

Now you have a grid and baseline to lay out your print project.

Screen Shot 2017-01-02 at 9.46.13 PM.png

To-Do List | Module Pattern

So for my first foray into using a design pattern, I'm making a Todo program using the Revealing Module Pattern. This pattern is based on the Module Pattern which I spoke about in my last blog post. The benefit of using this structure is that you can easily see the publicly available functions and variables clearly listed within the return statement.

To-Do List Mock Up

To-Do List Mock Up

I start by assigning the module to a variable that I will then use to call the methods. In this case, I called it Todo because I'm building a Todo program. I then assigned each of the DOM elements that I would be referencing (e.g. the form, the add button and the unordered list) to variables.

This program has only one method -- it's called addListItem. Within it, I assign an event listener and pass in two parameters. The first parameter is the event, in this case I'm using submit and the second parameter is the function. In the function, I create the element (in this case it's a list item), set the attributes of the input element (for this program I am using a checkbox which later on I can make functional so that when someone checks off a task, it can disappear or the text can have a strike-through) and insert the elements into the DOM (whatever words the user types into the text input field).

Within this method, I've also included an event listener on the form which listens for when the user types in the todo item and presses enter -- in this case, I've used the submit event. I could have also used a click event on the button element. 

$(document).ready(function() {

    var Todo = Todo || {};
    
    Todo.Item = (function(){
        'use strict';
        // assigen DOM elements to variables
        var 
            _form = document.querySelector('form'),
            _inputItem = document.querySelector('.input_item'),
            _button = document.querySelector('button'),
            _ul = document.querySelector('ul');
            
            // set up event listeners
            var addListItem = _form.addEventListener('submit', function(event){
                event.preventDefault();

                // create elements
                var li = document.createElement('li');
                var checkbox = document.createElement('input');
                var label = document.createElement('label');

                // decorate elements
                checkbox.setAttribute('type', 'checkbox');
                checkbox.setAttribute('id', 'check');

                label.setAttribute('id', 'item_text');

                label.textContent = _inputItem.value;

                // insert elements into DOM
                _ul.appendChild(li);
                li.appendChild(checkbox);
                li.appendChild(label);
            });
        
        return {
            add: addListItem
        };

        Todo.Item.add();

    })();

});

Before I write any code, I tend to sketch out a short check list of steps that describes in human terms what the program will do. This one is still relatively technical, and can be outlined even simpler still. 

image.jpg
image.jpg

Border Change on Text Input

I've created a small input field whose border turns green when the user enters text. When the user deletes the text, the border returns to it's default color. Nothing fancy.

The structure of the page is an input field with a placeholder attribute. This one has some simple text that says, "Please type text in here ..." For the stylesheet, I imported a nice sans-serif font from the Google Fonts website using @import. To the universal selector, I've set the box-sizing to border-box which includes both padding and borders when calculating the width of an element (the margin is not included in this calculation). The input field, I've set to display:block so that I am able to easily center the field horizontally on the page using margin:auto. I've removed the default focus glow from the input field and styled it's text with the imported Google font.

The micro interaction is controlled by setting the input element to a variable, in this case I left it at input to keep things simple. Then, used this input element to add an event listener (in this case I'm using keydown) so that when we interact with the element by placing our cursor in the field and start typing, we can get the border color to change. I save the border color information to a class in the CSS file.

The event listener takes in two parameters, the first is the event and the second is the function that holds the behavior for the event. The second parameter in the event listener will run after the user does the action in the first parameter. The second parameter contains a conditional statement that states when the user types something in the input field, the border will turn green else if the field is empty it will revert to its default color. A class of .success is added to the input element via the classList property which references the .success class defined in the CSS file.

Trying out a new Javascript Design Pattern

So, lately I've been obsessed with writing beautiful, modular, well-written code. To date, I feel that I've been writing code in a reactive manner - throwing things together like spaghetti, crossing my fingers and hoping it all works. For the most part they do, barely. I've been comparing my progress with learning to write code with learning to write; or at least what I remember it was like to learn to write. Now that I fell as though I can get some sentences and even paragraphs out onto the page, I'd like to be able to construct these thoughts more elegantly.

Lucky for me, a design pattern already exists for writing beautiful, modular code -- the JavaScript Module Pattern. It's also one of the more common design patterns made popular by Douglas Crockford.

    var MYAPP = MYAPP || {};

    // arithmetic is the namespace
    MYAPP.arithmetic = (function(){
        'use strict';

        // this is a private property
        var _result = 'The result is: ';

        // this is a private function
        var _showResult = function(answer){
            console.log(answer);
        }

        return {
            addMethod: function(num1, num2){
                // console.log('this is a public method');
                var sum = num1 + num2;
                _showResult(_result + sum);
            },
            subtractMethod: function(num1, num2){
                // console.log('this is a public method');
                var subtract = num1 - num2;
                _showResult(_result + subtract);
            }
        };
     })();

    // multiplication is the namespace
    MYAPP.multiplication = (function(){
        'use strict';

        // this is a private property
        var _result = 'The result is: ';

        // this is a private function
        var _showResult = function(answer){
            console.log(answer);
        }

        return {
            multiplyMethod: function(num1, num2){
                var times = num1 * num2;
                _showResult(_result + times);
            }
        };
     })();

    MYAPP.arithmetic.addMethod(4, 8);
    MYAPP.arithmetic.subtractMethod(24, 18);
    MYAPP.multiplication.multiplyMethod(4, 8);

The foundation of a module is the anonymous closure that encapsulates the code, keeping all within it private from any conflicting code another developer may write. This closure is formally known as an immediately invoked function expression aka IIFE.

(function(){
    // all the code here
 })();

The IIFE is then assigned to a variable, which is basically the Module. In this case, I have very generically called it, MYAPP. This Module will then be used to call the methods.

var MYAPP = (function(){
    // all the code here
 })();

Since all of the methods within the Module are private, in order for them to be made public and available to the Module, we must return an Object with the methods defined within.  

var MYAPP = (function(){
    return {
        publicMethod: function() {
            console.log('The information is here is public.');
        }
    }
})();

// This will output the statement 'The information is here is public.'
MYAPP.publicMethod();

Now, let's create a private method and call it from the public one.

var MYAPP = (function(){
    var _privateProperty = 'The information in here is public';
    var _privateMethod = function(){
        console.log(_privateProperty);
    }
    return {
        publicMethod: function(){
            _privateMethod();
        }
    }
});
// This will output the statement 'The information is here is public.'
MYAPP.publicMethod();

The publicMethod allows access to the _privateMethod, providing control. In the example at the top, I've created two namespaces (just for show) within the MYAPP method - arithmetic and multiplication. In the arithmetic namespace, both the addMethod and subtractMethod allow access to the private _showResult method. On the last three lines, we interact with the different methods within the Module through the namespaces.

Algorithms | Brain Teaser

Earlier this year I decided to get a mentor. Someone who works in a robust codebase on a daily basis but is new enough to the industry to understand those challenges that come along with ramping up on data structure and algorithms. We meet weekly and he walks me through white-boarding algorithms. This is one that I learned last week. This is my second time running through the exercise. 

You have a five-quart jug, a three quart jug and an unlimited supply of water (but no measuring cups). How would you come up with exactly four quarts of water? Note that the jugs are oddly shaped, such that filling up exactly ‘half’ of the jug would be impossible.
— Cracking the Coding Interview, Gayle Laakmann McDowell

Let's walk through this problem. You start by filling the five-quart jug with water and pour off three into the other jug. This leaves you with two quarts of water in the five-quart jug. Then, pour out the water in the three-quart jug and fill it with the remaining two quarts from the five-quart jug. Now, the five-quart jug is empty and the three-quart jug has only two quarts. Fill up the five-quart jug with water and top up the three-quart jug with one more quart of water to fill it to the brim. The five-quart jug is left with four quarts of water. The end.

Whiteboarding on a post it

Whiteboarding on a post it

Coding Challenge | Button + Modal

Whenever I come across an interesting coding challenge, I love writing a blog post about it because it provides me an opportunity to document these milestones and its a retrospective on the code itself -- what I liked and what I could have improved. For this challenge, the user clicks a button and a modal appears.

Button

Button

Modal

Modal

So, as with most front-end problems, there is the structure (html), the style (css) and the behavior (javascript). The structure of this challenge is very straightforward with two elements: the button and the modal (see figures above). For the target element, I used a <button> tag and for the modal, I created a wrapper <div>  and inside that, placed the modal content which includes the text and close button.

<button id="modalBtn">Open Me</button>

<div id="wrapperEl">
  <div class="modalEl">
    <span class="closeBtn">x</span>
    <p>I am a pretty modal</p>
  </div>
</div>

Now, let's look at the first element. It's located at the top left corner of our browser window. The goal is to horizontally center the button in the window. In order for this button to behave the way that I have sketched,  it needs to be a block-level element.

#modalBtn {
  display: block;
  margin: auto;
}

The wrapper for the modal is an overlay that spans the width and height of the browser window. The content modal is a smaller rectangle that I've decided to let take up 25% of the browser window and given a fixed height of 200px. 

.wrapperEl {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.modalEl {
  background-color: #F2F2F2;
  width: 25%;
  height: 200px;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
}

The elements inside the modal element include a close button and some paragraph text. I've floated this close button to the right and changed its properties using a :hover pseudo-class.

.closeBtn {
  float: right;
  font-size: 1.5em;
}

.closeBtn:hover,
.closeBtn:focus {
  color: #00B16A;
  font-weignt: 700;
}

.modalEl p {
  text-align: center;
  text-transform: uppercase;
  font-size: 35px;
}

Closing out the behavior part of this problem, I use vanilla javascript to grab the button and the close button, then tell it to show/hide the modal when I click the button. I also grab the modal so the program knows what it needs to show or hide.

var btn = document.getElementById('modalBtn');
var modal = document.querySelector('.wrapperEl');
var span = document.querySelector('.closeBtn');

btn.addEventListener('click', function(e){
  e.preventDefault();
  
  modal.style.display = "block";
});

span.addEventListener('click', function(e){
  e.preventDefault();
  
  modal.style.display = "none";
});

So there we have it, we've successfully grabbed all the elements (button tag, span tag, and wrapper element) and added event listeners to the button which will be 'clicked' to show the modal as well as the close button, which has a hover state and hides the modal when clicked.

Aligning Elements on a Page | Vertically & Horizontally

Before aligning an element on a page, you should be clear about one thing: is it an inline or block level element. This will determine how the element will behave. Some examples of block-level elements include: div, aside, section, footer, h1 - h6, form and nav; there are many more. These elements take up the full width of space available (sometimes that is the full width of the screen).

In the following example, the div is positioned in relation to the container element it is housed within. The top of the element is then pushed halfway down the page, from the top of the container element (so the entire div sits just below the center horizontal line). translateY changes the position of an element along the Y-axis. In this case, it pulls the div halfway back up  (hence the negative number) .

div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

To center the div horizontally on the page, again make sure you're manipulating a block level element. Give it a width; this can be a hard pixel number or percentage of the overall width. Set the left and right margins to auto. The div will take up the space you've determined and split the remaining white space evenly between the two margins.

div {
  width: 25%;
  margin: auto;
}

There you have it, now you can simply, and with very little code position elements exactly where you'd like them on the web page. 

Space Program

This Fall, Tom Sachs Space Program: Europa will take over the Yerba Buena Center for the Arts (full disclosure: I work there).  Last week, we had an intimate lunch time viewing of his documentary/installation video that simulates a mission to Mars - inside the Park Avenue Armory.

The astronauts' space suits, the spaceship and the control room is constructed from a variety of 'found materials' - plywood, Tyvek (the same material used to make FedEx packages and in home construction) and metal - with NASA-like detail.

image.jpg

I'm looking forward to witnessing this Fall's latest mission - to Jupiter.

Temperature Converter in Vanilla JavaScript

As far as simple projects go, this one is right up there with the nest of them. I took the idea of a temperature converter and applied some visual interest. At it's core, the project is made up of two basic functions -- one to convert the temperature in each direction and the other to change the color of each temperatures' background. I wrote this project several months ago, when I was just diving into front end using vanilla javascript. I'm sure that if I were to refactor this code today, it would look much cleaner.

If you'd like to play with the actual project, check it out here.