Serverless Single-Page Applications with Auth0

I am excited about the idea of helping more people become web developers. One way I think that new developers will be able to start learning faster is if they don’t need to deal with servers. So, that’s why I’ve been following the growth of the “serverless architecture” concept lately.

I thought the term “serverless” had a faint smell of BS. I imagine cloud hosting salespeople trying to pry control out of the hands of the “real” developers. But here is the thing, when I am trying to quickly solve a problem, delivery value or build a lean MVP, I don’t want to have to know about any more layers of the system than I absolutely have to.

Data persistence

At the core of most user-facing web applications is reading and writing data to some persistent storage. You might be writing an MVC app and your controllers need to have access to a SQL database for reading and updating the models. Or possibly your are displaying a set of data fetched from an API, either your own or an external service providers.

If you don’t have a “server” to handle passing the right data to the browser and processing the user’s input through business logic.

Imagine you are just having the user’s browser query for data directly based on javascript code running on their computer. The biggest red flag with this idea is that you would have to give the browser some credentials to access the data. You can’t use your master API keys or username and password like you would in server-side code where it’s impossible for a user to see it. Instead you need to send a limited use authentication token that just gives that one browser access to only the records it should be able to access and only the permissions you want them to have (read, add, update, delete). But how do you get that token securely without hosting a server, and without exposing master credentials to the users?

Auth0 and Rules

Auth0 offers something that might help, they are a hosted user authentication service. They can keep a database of all your users for you, or integrate with other identity providers. So when you click “log in” your users are going to their servers and they are sending the user’s browser back to a specific page when they prove they are who they say they are. I have been trying out their email magic links and I think it’s really simple and nice for users to never create, save or remember a password. When a user enters their email address on the sign in form Auth0 immediately sends them an email with a unique token link, clicking that link proves identity and sends them back to my application. Since access to the user’s email inbox is, in reality, a skeleton key that unlocks every account anyway, I think email magic links are the best option.

So anyway, Auth0 has “rules” that you can run when a user successfully authenticates. This is the perfect place to run server-side code to get a one-time key.

For instance Azure Table Storage is a cheap persistence layer very similar to Amazon DynamoDB. I wanted to learn how to use some of these databases because they are an excellent option for a serverless app. With Azure Table Storage you can request a “Shared Access Signature”(SAS) which allows an end user application to work with a limited subset of data. I created a rule in Auth0 that uses my master key to request an SAS that allows full access to records whose “partitionKey” matches the current userId. This newly generated token is passed along to the web application url

HyperDev and Serverless Prototyping

I was a little behind the curve, but I just heard about HyperDev last week. I’ve had a chance to use it a little and it’s a breath of fresh air. If you aren’t aware of the way that web development has been going for the past few years, we are in a precambrian explosion of different tools and frameworks. Each new tool, language, technology adds a new layer of complexity to learn, or evaluate. Beware chasing after the newest thing in programming, though. This process often requires setting up a development environment on your local machine. Setting up dev environments and managing them across applications is a notoriously hard problem. Doing it for the first time is usually frustrating, especially when you’re trying to convince a friend or coworker to try something out.

HyperDev fits into the equation by making it so that you don’t have to download anything, install npm, run any commands from the terminal or even stand up a virtual machine. You can just open the webpage, see all the pertinent code that powers a simple web application, and just make changes. Those changes are applied instantly and your application is available for testing in another tab right away.

Hyperdev

If you need to teach someone the basics of node.js, this is the best way I can imagine doing it. If you want to learn a new front end framework (like I recently did with Vue.js) you can pull open a basic web application with a demo API, and just focus on writing front end javascript and html and css with a zero friction environment, including live-reload. If you know about jsfiddle or CodePen, this is just like that but on steroids.

I’ve tried out Source Lair before and it offers a very similar set of functionality. The only difference is that HyperDev is reaching an educational audience instead of a purely professional audience. And it abandons a lot of the power Source Lair has to make things simple and fast (and free!).


So my idea for future web development projects is to rapidly protoype visual design and UX in a collaborative styleguide based on patternlab and then build out functional prototypes of front end features using hyperdev. Then that front-end code can be pulled into a private repository, the back-end code can be re-deployed on a different hosting environment like Azure Functions, Azure Websites, Amazon AWS Lambda, Heroku etc for future nodejs development. This would leave a place for rapid iterations with the design team, a seperate iteration and collaboration space for front end developers while the back end developers can take the lessons from that prototype and build out a more robust and maintainable applicaiton architecture.

Andrew Walks

I’m very proud of my sons. This little guy has been walking further and further every day. He’s about to make things even more interesting around here.

Racing Quadcopter

I have really started getting into flying remote control quadcopters. I began flying a small toy-sized quadcopter last year, and have been practicing a lot. Getting used to making turns reversed, perfecting smooth and easy circles and figure-eights.

Now a few weeks ago I ordered my first “real” quadcopter. It’s a EF 250 and it was an amazing deal. The prices for real carbon-fiber racing quads has dropped quickly over the past 12 months. And this racing quad is every bit as good as I imagined. This one is 250mm

It is fast (supposedly up to 90mph on a 4S battery), and I’m learning a lot. I can fly with the FPV video goggles and see exactly what the quad is seeing. This is tricky but also makes some aspects of flying easier to manage. I am breaking lots of props, and learning a ton of new things in the process. I’m able to do basic flips and rolls while flying now, which is pretty exciting.

I went out to fly for a little while last weekend with Becca. And we found some beautiful wide open places nearby.

I’m planning on participating in a local race next week. We shall see how that goes. I am looking forward to it, but mostly afraid that I will crash and break my quad beyond repair in the next few days of practice.

Happy First Birthday Andrew

Our wonderful little guy is one year old now. He loves cheerios and Oranges, so here you go. This photo really encapsulates how I think of Andrew right now. He is always excited to see me, and he frantically waves his arms when he gets the attention he loves. He has started to practice talking, and he has a few cute little proto-words.

He did get chocolate cake later that night. Though his older brother keeps on trying to ride on his back like a horsey.

A sturdy workbench

I acquired an excellent project bench on Craigslist yesterday. It’s perfect for finally assembling our home “Maker Space“.

It’s got a nice light, more outlets than I could imagine, even an ESD grounding wire for anti-static wrist straps. Perfect for some of the projects I have in mind.

Moving into our First Home

This last Friday we closed on our first home. We started looking for a house at the end of last November. Previous to that we lived in a nice little apartment, but that ended with an unpleasant maintenance issue that we tried and failed to resolve with our landlord and his HOA.

So, we moved in with my parents. We were so grateful to have a place to stay, and it worked out really well for us. My parents were not living here in their home for a big chunk of the time we were there, that made things really easy and we saved a lot on rent. I did not enjoy my much longer commute.

So, we searched all over Colorado Springs for a place to call home. God has blessed us with the resources to pay of a lot of debt and even start saving a little money over the last few years. We’ve always enjoyed the simplicity of not having a mortgage, and not having to worry about maintenance tasks or lawn upkeep. But the idea of having a little yard for the boys to go play in, and a place to put a sandbox for them, that sounded really nice.

We eventually found an amazing and unique place up in a little community called Palmer Lake, CO. It’s a beautiful mountain town 15 minutes away from work! The fact that we could afford this modest (by American standards) home was a real surprise. It’s a beautiful location, with amazing mountain views all around us and beautiful little pond nearby. We have a fenced in yard for the kids and a really cool park nearby.

It’s so exciting to get moved in and unload all our stuff from the storage POD. It is incredible to see just how much “stuff” we’ve accumulated again since we had kids immediately after losing it all in the fire 2.5 years ago. So now we are into a new home in a beautiful mountain setting. We are enjoying this new place immensely. It’s special, and I have a ton of geeky projects in mind for it now that I have the freedom to modify and hack this home all I want!

Long term testing results of some favorite clothing

I thought it would be a good time to follow up on this post from 2 years ago.

Wool Stocking Cap

Grade: A

Loved it. It shrunk drastically the first time it went through the wash, now it won’t fit on a baby. Kept me very warm on the top of Long’s Peak last fall.

Ibex Hooded Indie

Grade: C

Owned for 1.5 years. Worn out on the ends of the sleeves quickly. Loved it but a little disappointed on the durability. Probably too light-weight.

Darn Tough Merino Wool Crew Socks

Grade: A+

Still great. Haven’t seen any holes or flaws in any of them wear them for several day at a time. Never smell bad (let them air out overnight). I bought a couple more pairs because I lose socks sometimes.

Merrell Barefoot Style Shoes

Grade: C-

The ones I thought were appropriate to wear to work wore out very quickly. And the ones I have for running are fine, but I just don’t run that often compared to hiking, where I want a more durable and waterproof midtop boot.

Newer Purchases

For my outdoor adventures I wanted somethin like these Synthesis Mid GTX boots from La Sportiva. Yay for GoreTex liners! My feet were the perfect temperature all day on Longs Peak.

This last year I purchased general everyday leather boots The Niners from Woolrich. I had hoped these would be lifetime quality resoleable boots, they are very good. I replaced the laces with ironlaces right away, and the leather is a “Genuine Leather Product” from Horween. Which means it’s not full grain, but honestly they look nice, they are durable and the wear in a way that is very convincingly leather.

I wear these to work, and on the weekends, in every season. I added Green Superfeet insoles and gave them a coating of Sno-Seal before winter set in. I’ve worn these out in deep snow, while sledding with the kids, and on many long walks. They haven’t reached the 1 year mark even, but they are looking pretty good.

My Photography Organization Process

  • Import photos using Lightroom. Import into local Pictures/YYYY/MM directories
  • Rate and develop photos in Lightroom.
  • Drag finished photos or photos above 3 stars from last import into the ‘rated-for-albums’ publish location, then click Publish (only when on local network with diskstation)
    • diskstation runs the organize script on that folder every hour
    • puts photos in my DS PhotoStation albums
  • choose some of my favorite photos to be sent to flickr photostream for sharing
  • every month or two move all photos from local Pictures/YYYY directory onto an external harddrive.

Migrating to HexoJS

I’m trying out a new blog platform again. Over the last 15(!) years I’ve run this site on a few platforms, including WordPress, Mambo, and ExpressionEngine.

I know WordPress has always served me well. But it was time to try a static blogging platform. Oddly, for the first couple of years I blogged with a static blogging platform. I created posts by adding them to an HTML file. Yes, I was writing raw HTML like an animal. In Notepad++ or Dreamweaver or something like that. So, now we’re back to that level of sophistication, except I don’t repeat myself in the HTML process. Blogging without generator software resulted in manually creating pagination links and an archiving mess.

Hexo takes care of all of that. And even supports importing wordpress posts. When importing the WP XML file Beware of "s in your titles. Those need to be manually removed from the XML file.

INFO 1455 files generated in 28 s

Not bad.

I was able to use my existing Heroku account, and even the same application. Heroku made me upgrade to the latest stack before it would let me deploy (I was still on Cedar 10). I can’t decide if I should deploy with the hexo deploy command or using dropbox integration. I’m going to try the hexo deploy command. It seems like it takes a long time to regenerate because I have 1400 posts in my archive, so that’s not optimal. Oh well, I like learning new ways of doing things, and the ability to write my posts as local markdown text files makes it fit into my existing workflows really well.

PS: My fear of digging into the internals of my wordpress installation for themeing and such was another reason to move to a system that I can understand a little bit better because it is built in node.js.

PPS: Also, the hacky fork of WordPress that I used for… exactly 3 years (What’s up with February!?) to host this blog for free on Heroku started getting pretty far out of date. So here we are.