responsive developer mode

I found an Easter egg today. It wasn’t outside, leftover from months ago. It was hiding in my Safari browser all along, a poorly-documented keystroke which I tripped over today.

responsive-developer-mode

Cmd + Option + R

I was looking for the hotkeys in Safari in order to reload a page without using the cache. I’d guessed that it was some alteration of the standard Cmd + R combination for refreshing the page and was trying those combinations, only I got more than I bargained for.

Browser Options

From the interface, it looks like I can select different browsers, to include Chrome and even Internet Explorer.

browser-options

Screen Resolutions and Portables

Looks like I can change from the standard OS X to iOS as well, see what things look like on some of the iPhones, three sizes of iPad and a few screen resolutions for desktops as well.

Toggle It Back Off

And of course, you can toggle the mode back off again with the original key combination of Cmd + Option + R.

Advertisements

the matrix linode’d

Today’s review is about a pretty decent hosting company called Linode. Here’s the three-day timeline from idea to implementation:

  1. Thursday: decided to create a new info website about 3D printing, bought the domain name on GoDaddy and waited for the changes to take effect at midnight
  2. Thursday: created a Github repository to store the source for the website since I’m open-source like that
  3. Thursday: created an account on Linode, purchasing a “linode” for that
  4. Thursday: designed/created the initial local/development website layout/framework, collected images and content
  5. Friday: created (provisioned) the basic linode (virtual machine) for the website on production, provisioned a virtual drive, deployed Ubuntu 16.04LTS onto that, booted and remoted into that, ran updates, installed the framework, added the website, setup security and the firewall
  6. Friday: adjusted the DNS at GoDaddy to point to the new server, added more content
  7. Saturday: launched the website on Linode with the initial version
  8. Saturday: tweaked the settings to make the Node.js—based website start on bootup
  9. Saturday: added more content to the website

site

Not bad for an open-sourced 10-page (44 files) responsive website, if I do say so myself.

Please note that when I say “hosting company”, I really mean a “virtual server provider” so this is more like Amazon EC2 as a service offering. I didn’t just rent website space (like on Wix.com or WordPress.com), I rented an entire virtual server, if you will.

Comparison of virtual server versus website space

There are some advantages/disadvantages of renting a virtual server over just some website slot on a server somewhere:

Pros:

  • In theory, you could run several websites from a virtual server
  • You can run services in the background (like Node.js) and manage them
  • You can run multiple threads on the same server, like helper routines which do something other than serving up pages
  • You’re not limited to the set of templates that are available from Wix.com, for example
  • Your website runs separately from other websites
  • You get an IP address which is only used for your website

Cons:

  • You have to setup security yourself since you’re responsible for the entire server
  • The learning curve is steeper
  • You have to know I.T. things like setting up servers and installing software

Framework/software

Here’s a list of what I used for this website:

  • Node.js: Probably the most famous event-driven JavaScript runtime engine out there
  • Express: A minimalistic Node.js framework for separating code from content on a website
  • Bootstrap.css: A responsive stylesheet and component library for styling a website
  • PM2: A handy process manager for Node-based applications on a server.  After pulling new code, I might run the command pm2 restart AppName to restart the service

Documentation

Kudos to Linode for providing a detailed Getting Started guide along with several tutorial videos on the subject.

And further, a note of thanks to PM2 which seems to satisfy the requirements of bringing up and managing a Node.js application as a service within a production environment and their ample documentation.

Suitability

Is Linode well-suited for most website designers/developers? Probably not. On an I.T. complexity scale from 1 to 10 potatoes, I’d say they’re probably seven potatoes, perhaps. In this case, you’d have to be comfortable doing the following:

  • Using a web-based console to allocate and bring up/down a virtual server
  • Using ssh to remote into your virtual server
  • Navigating within a command line interface on a Linux computer or similar
  • Using ssh-keygen to generate a keypair
  • Using apt-get to update things
  • Editing files using nano
  • Managing services, reading log files
  • Remotely rebooting your virtual server
  • Setting up a firewall, testing and managing same
  • Applying code using git
  • Testing a website to verify that there are no 404 (file not found) type of errors, for example
  • And obviously, creating/designing a website in the first place and using a repository like Github for storing those files

That said, it was a perfect fit for me since I can do those things. In fact, the Linode-related part of this took no more than two hours since this is the first time I’ve used their interface. My next one should go much faster.

Observations

I will say that I’m impressed. Unlike Amazon AWS, Microsoft and Google, the people at Linode haven’t created an interface that’s overly complicated. It seems to work simply and to do the things you need to do and those are: 1) buy a virtual server, 2) deploy something onto it, 3) turn it on and 4) remote into it. I don’t think the “big three” have figured this out yet; their interfaces and the assumed workflow requires too much research, in my humble opinion.

Additionally, the PM2 software does a great job of working with the git-based code distribution model, allowing you to restart the Node.js app when it’s required and to start up automatically each reboot. There’s an easy-to-remember command interface like pm2 show AppName which tells you what you usually want to know.

At a cost of $5/month, it compares favorably to most of the well-known hosting providers out there. The basic linode will likely satisfy the requirements of the average Node.js application up to a reasonable level of simultaneous users, I’d suggest.

price

the story of the us$100m button

Once upon a time…

…in an enchanted forest of Interweb there lived a kindly old oracle by the name of Google. Most days would find him smoking a long pipe and—seated at the end of a very long line—dispensing answers to the person at the head of said line. See, everyone came to Google when they were looking for something they couldn’t find.

One might inquire of Google, “where can a man go to find a good pub around here?” and he’d then magic up a scroll instantly. On the scroll would be a carefully-constructed list of pubs and over in the marginalia would be a bunch of advertisements for pixie dust, faerie potions, &c. As it happened, he paid for his various sundries and such out of the monies which he received from the witches who paid for these advertisements.

Sometimes, though, Google’s hand would cramp up a bit after a long bout of magical writing like that especially on summer days when the sun grew hot and rather than handing the person a scroll he’d just get a twinkle in his eye and ask, “are ye feeling lucky?” and if the person nodded, he’d then just tap his wand on their shoulder and they’d instantly be transported to the top place which would have been on the scroll, if only he’d penned it up as before.

This carried on for some time as things tend to do. But then one day the witches hired a man whose job it was to count all the beans in the King’s silos. They wanted the man to use his advanced forms of math to cypher up the sum total of lost monies that Google was incurring by this practice of not scribing down those advertisements.

So the Royal COB (Counter-of-Beans) then set about to find out how often Google was taking this shortcut (“one soul a’ hundred”) and further, the total loss in pixie dust monies (“I fully a’sure ye it’s nigh less than a hundred-thousand-thousand of the paper scrip they call dollars a month’s sail west o’ here”). Well, the witches were fit to be tied, I’ll tell ye.

“Ye can’ot be doin’ tha’ anymore, Google”, they said. “Ye’re costin’ us out of hovel n home, ye are!”

And so,

…that’s the story of why Google can’ot just send ye on yer way anymore without the fairie dust adverts. The Royal COB and the witches simply won’t let him.

~~~ The End ~~~

server-side tone synth with node

I thought I’d work on another Raspberry Pi 3 project and this time was looking to expand my repertoire for server-side audio.  I suppose I was imagining an application in which you’d carry the Pi along with you using a USB-based power bank and plugging in your headphones, controlling the interface via your cellphone’s browser, let’s say.

Platform

Logically then this would need to be a Node.js—based webserver which could synthesize a sine wave tone with a specified frequency on both left/right audio outputs on the server itself (rather than streaming it back to the client browser).  I chose the Raspian image for the microSD card because, as a Debian modification, it’s likely the closest to the standard Ubuntu flavor of Linux which I work with the most.

Open Source

Searching the npm space I found nothing useful, to be honest. It’s rare when the open source world fails to deliver but this was one of those times. I was going to need to innovate on this one. There are many repositories out there which use the browser’s window object but that just wasn’t available here on the server. I installed module after module only to find that one of its dependencies relied upon that same pesky window object. So each time, I had to perform another npm remove --save whatever from my project to return things back to “square one”.

This research took a little longer than I’d hoped for but it turns out that Raspian out-of-box includes the Open Sound System (OSS) aspi-utils collection and its speaker-test program can be used in a terminal to generate tones from both speakers. Okay, so now how do you run terminal programs from JavaScript?

Starting External Programs From Node

It turns out that Node has an internal module called child_process which allows you to spawn (run) something you might normally invoke from the command line. It took some reading but I was able to navigate the documentation and to start a speaker-test session with the necessary arguments. One task down, (one to go).

Stopping External Programs From Node

Fortunately, Node also has an internal module process with a kill command to stop a running process.

Implementation

It takes a bit of state management: the webserver needs to remember if you’ve started a process, what its process ID is and whether or not you’ve now stopped it. A proper open source project would support systems other than Linux but this is the starting point and this wouldn’t work, say, with a Windows-based computer using the PowerShell module control, for example.

Since this wasn’t an exercise in UX design the interface couldn’t really be any simpler. It’s your basic Express-generated website with the Pug view engine and a simple pull-down list for selecting some preset frequencies. Submitting your tone choice POSTs back to the same index page; selecting the Stop button POSTs to a virtually-routed /stop routine which then redirects back to the original index page.

Source Code

Check it out if you’re curious. I’ll likely be using this same technique to create a more self-contained module for managing external programs.

github.com/OutsourcedGuru/heal

firebase notches things up

Looks like Firebase is likely getting an influx of capital from Google from what I’m seeing. Google announced on May 18th that they’re using Firebase as its unified platform for mobile developers after acquiring them in 2014. Too bad they didn’t give the nod to Adobe’s PhoneGap, given its traction so far in this arena, to-date.

Firebase’s pricing page now indicates that their free entry-level tier Spark now includes custom domains! This is going to be great for developers, especially. We can’t afford to pay $25 per month per concept site that we’re running—that’s just madness. But we can afford free. I can afford free all day long, in fact.

Granted, there’s a lot that you don’t get with Firebase since it really changes things up. You  don’t get server-side code like you might get with the typical Apache/Perl setup. You also don’t appear to have server logs that you’d find on most hosting plans. I think they assume that you’ll use Google Analytics and push that content to them in the form of client-side JavaScript.

Existing developers

Unfortunately, they haven’t figured out what to do with us early implementors. Their interface wants to charge me to add a custom domain to my developer tier. I assume that you’ll need to delete your existing rig, re-create a new account and then push the content back to them in order to take advantage of the new Spark tier offerings.