Node.js: Redirecting to new page after an XML Delete request

I couldn’t think of a clearer way to title this post, other than describing the action I was trying to accomplish.  It took me 4 days to sort this out from hints I received online (Free Code Camp Gitter Help channel), the MDN Javascript documentation and a host of Stack Overflow questions.

The project I am working on is the Free Code Camp Voting App project. it’s the first of the full-stack apps, I used MEEN (Mongo ,Express,  EJS (or your choice of binding script), Node).

I first attempted this app 18 months ago, and failed miserably. Normally failure is an opportunity for learning, but it was so painfully challenging at that point because I barely grasped each component of the stack and getting them to work together was incredibly confusing for me.   I even used Yoeman, which SHOULD make it easier…but in reality it just made it more confusing for me. I was not ready to use that framework since I had a very thin grasp of how all the parts connected to each other.

Prior to this my only experience with full-stack was using Rails.   Some familiarity (but far from expertise) with Rails gave me a perspective of what I could / should be doing in terms of modularizing my application code.   JavaScript, however, allows you to make those decisions on your own about how you would like to configure your folders, scripts, public assets, routes, etc.

I ended up with what i felt was a reasonable blend of decent modularization, but also chunks of code contained in one file so that I was able to keep the parts straight. Perhaps future projects I’ll feel more comfortable making things more modular.

So here is the basic folder structure I opted for in my applicatoin. I’m NOT suggesting you do it the same way…this is simply how I ended up doing it and it’s working OK for right now. I’m sure i’ll make modifications , or possibly go back to yoeman, clementine.js or maybe try Sails.js for my next app.

fccVote2
-app
--poll.js  (this was catch all JS for the app..>I ended up not using it at all)
-bower_components  (front end scripts stored locally)
--chart.js
--chroma.min.js
-config  (files for authorization & authentication using passport)
--auth.js
--passport.js
-models (models for mongoose/mongo collections)
--index.js  (ties the other two in)
--poll.js  (poll model)
--user.js  (user model)
-public
--assets
---favicon.ico
---styles.css
--js
---chartPoll.js (again I ended up not using this, instead used embedded script tags)
-routes  (self explanatory)
--index.js
--polls.js
--users.js
-views
--pages (ejs templates)
--partials  (ejs partials for nav bar, header, footer, etc)
.gitignore
package.json
server.js
todo.txt (used webstorm's "TODO:" syntax to track bugs and todo items)

I started the project by working from the Scotch.io tutorial, Node Authentication with Passport.   I had done that tutorial once in the past, and it went well, so I rushed through it more quickly than I should have this time to get something propped up real quickly that i could use.  But once i got it working, I ignored the user sessions until after I had the voting routes & controller code working well.  That served me well, because once the app was mostly functioning I could then concentrate on allowing actions only for authorized users depending on the route (posting a new poll should only be allowed for authorized users for example)

The next task I tackled was using mongoose for the first time in an app, that is, not a tutorial.  This was not as difficult as I imaged it would be and I think in time it will be easier in the long run.  I think one of the big advantages is transparency of making the connection and closing the database…all that is done for you with Mongoose.  I’m still not fully aware of what other steps it saves, since straight vanilla node.js driver mongo is not really all that challenging (minus callback hell).

At this point I needed to get some data into my database (using mLab, but could easily use local installation of mongod), and I didn’t want to fuss with the front end.  In all the mongo documentation, they provide a small database collection creation script that you run prior to running the commands.  

========================

This post is a draft I started a few months ago and can’t readily recall all the details I wanted to include. However there is some good reminders in here and hopefully they will help some others, so I am publishing it anyway

Free Code Camp’s Front End Certificate

I’ve been involved with Free Code Camp from nearly the beginning. I stumbled across an article by Quincy Larsen about how difficult it is teaching yourself to code. The thing that stood out to me was that he acknowledged how much time can be wasted, and progress stunted, but jumping from one tutorial to the next or one language to another without really learning the things you need to learn to becoming a well versed coder.

I have been a programmer since the age of 12 when I first entered some game contests programming in Basic using an Apple ][e computer.  We didn’t own a computer then, save for some ancient IBM thing that ran lotus   1-2-3 on a flip down keyboard and a monitor that looked like an old oscilloscope.

Yet I still struggled getting up to date  on current web technologies for interactive applications with the end user.

 

Before med school I worked for a year as a “database systems analyst” which was a fancy title for what I actually did.  I programmed hand-held bar code scanners for custom applications that worked with our company’s larger Computerized Maintenance Management System.   I had to learn a new coding interface for these devices, and had to know our own code well enough to integrate these cool little tools with the system software.

 

When I held a meeting for our sales staff to update them on the handheld scanners (about the size of shoebox for a pair of baby shoes), I passed out name tags in bar code.  They had to scan them to find their own name tag in order to learn how the devices worked.  It was really a lot of fun and I’m thankful I had mentors who taught me so much about programming interfaces, user interaction, database programming and design and more.

 

But it also poisoned me…I have enough knowledge of how the back end works that any time I have an idea for an application or interface, I know just how I’d like to implement it… in 1997 technology.

 

But catching up to web 2.0 and beyond has been a years long pursuit.

 

All this while still working as an ER physician and a triathlon coach means I do it in fits and starts.  Free Code Camp tracks my progress for me which is also a huge asset of the website.  And it’s free!

 

Check it out if you want to learn or improve your javascript!

Learning D3 – essential skills for the Javascript Programmer

Learning D3 – essential skills for the Javascript Programmer

Recently I’ve been experimenting with and trying to learn the D3.js library in order to create ziplines and develop some relative expertise at Free Code Camp. D3 stands for Data Driven Documents. As a former cartographer and information graphic artist in the 90s, discovering the possibilities with D3 for browser based interactive applications is like Geraldo Rivera discovering Al Capone’s vault! (except he didn’t…)

While it’s seemingly straightforward for those who have climbed the learning curve, “getting it” takes some experimentation, practice and intuition. Several reasonable tutorials exist for learning the library but its fair to say that whether one speaks to you at this moment depends on your prior javascript experience.

My first attempt at creating a bar chart with D3 was held up mostly be json data extraction and a standard array…pretty basic data manipulation as far as javascript goes, but because all the existing D3 tutorials I found had explicitly named key:value pairs, it took me two days to figure out that d.name and d.value as used in the examples were the same thing as d[0] and d[1] in my simple nested array structure that did not have named keys.

Small setbacks like that can be extremely frustrating, but it does seem it’s part of the learning experience.

So here is my short, and growing list of fundamental D3 tasks that should help you learn to not just follow or copy a tutorial, but start to manipulate the DOM and your data to create the visualizatoins you want.

My personal goal is an understanding of D3 that is good enough to not have the coding “get in the way” of creating the visualization I want.

Basic D3 skills

1. Know how to import the library into your JS project

<head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>

2. Manipulate the HTML DOM elements, similar to JQuery

HTML:

<div class="infobox">
<p>Here is where we will say something.</p>
</div>

JavaScript:

d3.select(".infobox").style("display", "block");	
d3.select("p").text("This bar has a value of " + rect.attr("height") + " units.");

3. Create a simple data array of one dimensional elements to use in your test code

JavaScript:

for( var i = 0; i < 25; i++ ) {
	data[i] = Math.floor(Math.random()*100);
}

4. Using SelectAll, create a new set of rectangles or circles (try both)!

<svg.selectAll("rect")
.data(data)
.enter()
.append("rect")

5. Give them a fill color, width, height & x,y position (for rectangles) or fill, x, y center and radius (for circles) and display them on the canvas. (added to snippet from #4)

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
.attr("x", function(d, i) {
 return i * 21; })//Bar width of 20 plus 1 for padding
 .attr("y",0 )
 .attr("width", 20)
 .attr("height", function(d) {
 return d; }) //Bar width of 20 plus 1 for padding

Steps 4 & 5 above constitute the very common “selectAll + data + enter + append” sequence that will allow you to generate some self-sufficiency at creating simple D3 documents. When you can do this for a new set of data within a few minutes, that is, you’re no longer debugging the code, and simple looking up reference material and writing from scratch, start keeping an eye open for interesting APIs or data sets that you can create new data sets from.

You can begin to dress them up by implementing best practices for information graphics including a proper scale & labels for your axes, a title, and margins or padding so the chart can “breath”.

GDP Bar Chart with D3

Screen Shot 2015-05-05 at 1.15.14 PM

While this isn’t a tutorial, I hope that this list of basic D3 skills and snippets helps you get oriented to the larger task of creating your “dream charts” with complex data.

Please leave a comment or link to any examples or codepens or gists you’ve created.