/blog notes

portfolio & contact info

deploying to heroku

my deployed app and the repo

This app may load slowly. The Heroku dyno that it runs on is free, and free dynos fall asleep quickly. Also, the html that is rendered and sent is 449 KB, which is a decent amount of data to download (often ~1 second). The original css and ejs files total less than 1 KB.

unicode screenshot

initial setup

mkdir my_project
cd my_project
touch .gitignore server.js
echo 'web: node server.js' > Procfile
npm init --yes
npm install express --save --save-exact
  • the --yes flag lets you skip having to hit enter enter enter...
    • the project "name" has to be all lower case
    • and "main" will be set to the first js file in the directory OR index.js
  • the Procfile sets the command run by the app's dynos on Heroku. If you used the Express Generator, the file should contain web: node ./bin/www

git stuff

add to .gitignore

.DS_Store
node_modules

git it

make a new github repository

git init
git add -A
git commit -m"initial project setup"
git remote add origin git@github.com:jontejada/project_name_here.git
git push origin master 

package.JSON edits

add engine (optional / good practice)

get current node engine with node -v command and add to package.JSON (with a comma):

"engines": {
    "node": "5.0.0"
}

add start to the scripts object

"scripts": {
    "start": "node server.js"

server.js edits

allow heroku to set the port

var port = process.env.PORT || 8080;
app.listen(port);

heroku initialize

install heroku CLI

heroku create
git add -A
git commit -m"note"
git push heroku master
heroku ps:scale web=1
heroku open

links

Getting Started with Node.js on Heroku

10 Habits of a Happy Node Hacker

Heroku Error Codes

scotch.io How to Deploy a Node.js App to Heroku

Mvc

model view controller (MVC) and the single page application (SPA)

separation of concerns

  • database with user lives in the model. has name, email, password, etc

  • view is what the user sees, i.e. html templates

  • controller has routes(?)

  • layered cake analogy

Model

  • first place to work on a new project
  • define and establish organization of data
  • want an accurate representation of real world
  • but also easy for programmers to manipulate

View

  • anything seen by the user
  • HTML, EJS
  • users might interact with views

Controller

  • routing is most common function
    • ex --logic for a login page that will fetch user data

Micro-services

  • result of the rise of APIs
  • small standalone applications served from same webserver code
  • separate concerns of keeping data model
  • several little view/controller jellybeans

serving content with express & ejs

my heroku app -- unicode table

unicode screenshot

github repo

server.js

var express = require('express');
var app = express();
var port = process.env.PORT || 8080;
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', function(req, res) {
    res.render('pages/index');
});
app.listen(port);
console.log('on 8080');

index.ejs

<!DOCTYPE html>
<html>
<% include ../partials/head %>
<body class='container'>
    <% include ../partials/header %>
    <main>
        <div class='row'>
            <% for (var i=0; i<6; i++) { %>
            <div class='col-md-2'>
                <table class='table table-hover table-condensed'>
                    <% for (var j=i*1000; j<i*1000+1000; j++) { %>
                    <tr>
                        <td><kbd><%= String.fromCharCode(j) %></kbd></td>
                        <td><%= j %></td>
                    </tr>
                    <% } %>
                </table>
            </div>
            <% } %>
        </div>
    </main>
</body>
</html>

regex

this post is under construction

two ways to create regex in javascript:

var re1 = /ab+c/; //regex literal enclosed by slashes
var re2 = new RegExp("ab+c"); //constructor function of obj
  • literal character/string being searched for
  • metacharacter special character with meaning other than literal
  • target string string being searched
  • escape sequence
  • search expression regular expression with search pattern

12 metacharacters:

metacharacter usage
\ backslash makes following non-metacharacter special OR escapes following metacharacter to use it literally
^ caret matches beginning of input OR negates a char class when first char in the set
$ dollar sign matches end of input to preceding expression
. dot matches any char except newline, equivalent to [^\n]
| pipe alternation, equivalent to 'OR'. has lowest precedence
* asterisk match preceding expression 0+ times, equivalent to {0,}
+ plus match preceding expression 1+ times, equivalent to {1,}
? question mark match preceding expression 0 or 1 time, equivalent to {0,1}. see also non-greedy, lookahead assertions
() parenthesis capture group is matched and remembered for backreference
[] brackets char class/set will match for one character position once
- dash range separator inside a char class
{} curly braces match exact number of occurrences of preceding expression OR range with ,

[] character class / set

  • some internal metachars are not special, so don't need to be escaped:
    • - must come first or last, i.e. [-abc]
    • . and *

shorthand char classes:

shorthand short for
\d [0-9] ASCII digit char in javascript
\D [^\d] negated digit char
\w [A-Za-z0-9_] word char, ASCII alphanumeric chars plus underscore
\W [^/w] negated word char
\s [ \t\r\n\f]and more whitespace char including space, tab, linebreak, formfeed

non-printable chars:

ASCII
\t tab 0x09
\r carriage return 0x0D
\n line feed 0x0A

boundary chars:

\b word boundary
\B non-word boundary(?)

Dan's Tools Regex Pal Cheat Sheet:

Character classes
. any character except newline
\w \d \s word, digit, whitespace
\W \D \S not word, digit, whitespace
[abc] any of a, b, or c
[^abc] not a, b, or c
[a-g] character between a & g
Anchors
^abc$ start / end of the string
\b word boundary
Escaped characters
\. \* \\ escaped special characters
\t \n \r tab, linefeed, carriage return
\u00A9 unicode escaped ©
Groups & Lookaround
(abc) capture group
\1 backreference to group #1
(?:abc) non-capturing group
(?=abc) positive lookahead
(?!abc) negative lookahead
Quantifiers & Alternation
a* a+ a? 0 or more, 1 or more, 0 or 1
a{5} a{2,} exactly five, two or more
a{1,3} between one & three
a+? a{2,}? match as few as possible
ab|cd match ab or cd

Methods that use regular expressions from MDN

Method Description
exec A RegExp method that executes a search for a match in a string. It returns an array of information.
test A RegExp method that tests for a match in a string. It returns true or false.
match A String method that executes a search for a match in a string. It returns an array of information or null on a mismatch.
search A String method that tests for a match in a string. It returns the index of the match, or -1 if the search fails.
replace A String method that executes a search for a match in a string, and replaces the matched substring with a replacement substring.
split A String method that uses a regular expression or a fixed string to break a string into an array of substrings.

links

Quick Start

MDN regex guide

zytrax