Thursday, June 21, 2018

note to self Mac/OSX/MacOs keys / window manager dock program hyperdock

It's gratifying when I can do a simple search and dig up an old devblog post and use of share the information, and frustrating when my auto-Google mojo is weak. For some reason I couldn't find the name of an app I like to use "Hyperdock" which lets me set up some keypresses to zip windows to the side of the screen (in particular a typical large monitor window splits very nicely into two pieces.)

Sunday, June 17, 2018

shade in the usa

 With the caveats that IQ tests are problematic, I made a potentially reusable tool to put state data on a USA map, seeding it with Inc.'s We Compared the Average IQ Scores in All 50 States, and the Results Are Eye-Opening.

Because I am a partisan jerk, I was curious if it would reflect the political divisions of our nation. Nope, though there is a maybe even more problematic latitude correlation.

The code is JQuery-ish and hacky, but it solved some fun Google/stackoverflow challenges, like "how do I make a colored map of the USA?" (US Map JQuery Plugin) "How do I convert a number from one range to another?" (I was amused that my PHP recreation of Processing's .map() function was actually valid javascript as well) "how do I convert state names to abbreviations? (US states in JSON Gist), "how do I get a hex RGB value from 3 decimal values?" (relevant stackoverflow)

Wednesday, June 13, 2018

dipping a toe into modern web dev: deployment with parcel and a hello world in react

I admit, there's part of me that wants the world forever to be

<script src="mystuff.js"></script>

(and of course, the need for it to have a separate closing tag seems odd anyway ;-)

The save, reload loop is such a nice, tight way of coding, and so easy to understand! But it's limiting - new web technologies have a build step, and that's just the way life will be for all but the most trivial vanilla.s project.

My coworker Eric Wyler found the next best thing - webpack is famously fiddly (for a laugh, just see what @IAmDevloper says about it) but he got some great results with Parcel.

Here's his Parcel bootstrap steps:

(This assumes you've installed npm already)

Pick a project name, we'll go with "fooproj" for now.

mkdir fooproj
cd fooproj
npm init -y
npm install -g parcel 
(this install parcel globally, so you just have to run it once for your first project)

Now use an editor or the command line to do the basic
cat > index.html

<html lang="en">
  <title>Parcel React Example</title>
  <div id="root"></div>
  <script src="./index.js"></script>


cat > index.js

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
    <h1>Hello world</h1>
ReactDOM.render(<App />, document.getElementById('root'));
// Hot Module Replacement
if ( {;

so after that:

npm install --save react react-dom
parcel index.html

BOOM! Like the console says, you now have a little webserver running at http://localhost:1234  - and if you make a change to index.js, and save, it automagically reloads (actually, technically it's not even reloading... in theory if you're doing something with state it might get a little munged, but for many changes it's super-instant.)

Now it looks like dist/ is already full of something ready to deploy, but for some reason it was assuming an absolute path, but a command like
parcel build index.html --public-url .
did what I wanted, and I could just plop the contents of dist/ into an arbitrary folder on my webserver.

Thursday, June 7, 2018

floating with both sides aligned

For work, I was tasked with making a prototype that looked like the illustration. For the small thumbnails, I was pretty happy floating them:
  .smallpanel {
    float: left;

But they images were nestled up to each other, with no margin - but if I added a margin, then one side or the other might not line up with fullsize image above!

This seemed to work well:
  .smallpanel {
    float: left;

  .smallpanel:nth-of-type(even) {
    float: right;

I guess the even tricker case of 3 images with the same kind of alignment might use the nth-child pseduoselector, something like nth-child(3n+1).

(Note that this is somewhat easier if you're using box-sizing: border-box;)

Followup: I should get more fluent with flexbox, "justify-content: space-between;" might about what I'm looking for and works for larger numbers of boxes (After checking in with Can I Use...) - see a working Codepen (inspired by this coworker's)

Tuesday, June 5, 2018

get rid of the random note

Mac Users! Tired of seeing an ugly "ransom note" effect when you copy and paste some text, and the system "helpfully" tries to keep the old font and color info? Try this:

  • Open up System Preferences | Keyboard
  • Go to Shortcuts (tab) | App Shortcuts (left column) | All Applications (right column)
  • Hit the + button
  • Enter "Paste and Match Style" (exactly as it appears in the Edit menu dropdown) for "Menu Title" and then hit cmd-V in the "Keyboard Shortcut" box, then click "Add"
Voila. Any app that supports "Paste and Match Style" will now just paste the damn text as text, and you can stop pasting into an intermediate text app (or in my case, browser address box) to avoid your document from devolving into a crazy pastiche of colors and fonts. (Why this isn't more of a clipboard-level default, I'll never know. It's hardly ever helpful - just feels like OS developers trying to show off.)

Monday, June 4, 2018

the long and lat of it

I have to think a bit about Latitude and Longitude to do Porchfest website maps - especially when I try to tweak their position in an X/Y axis kind of way. The other day I posted on FB
Honestly the only way I keep track of Latitude vs Longitude is the old beer commercial (Corona?) that says "change your latitude", i.e. think in a more southernly climes way...
Some of my friends responded with some interesting devices to remember which is which:
  • Liz: "Longitude is long. Latitude is Fat."
  • Dave A: "Latitude lines are horizontal like the rungs of a ladder. That's how I have always remembered it, even though that's a stretch of a mnemonic."
  • Tim: I remember learning it with the second-letter correspondence... L(A)ttitue runs e(A)st to west. L(O)ngitue runs n(O)rth to s(O)uth.
I tried visualizing all of these, but none of them seem helpful. I realize maybe it's because I'm a "interactional" thinker - each of these describe how the lines look when inscribed on a globe (latitude is fAT, or like lAdder rungs, or running EAst to West) but my visualization is more "what number changes as I travel north to south, say?" - kind of the exact opposite of Tim's method.

I think this may be an example of "nouns vs verbs" thinking. I feel it's a spectrum for many folks - probably "bathtub curve" shaped. It's pretty abstract, but I think many programmers think in nouns, and they're the ones who love Object Oriented programming, and Declarative program -- "lets start with what you are, and then fill in what you do, or how you do it" while I'm always more concerned with "what are we doing, how are we interacting".

Wednesday, May 30, 2018

fullpage screenshots

For doing print layout in a webpage, I used to use phantom.js for screenshots bigger than my monitor, but it was always pretty fiddly, and bad at showing you the problem if something went wrong.

Now it seems much better to just use a chrome plugin - FireShot seems like a decent one. It zips around the screen and gives you several options for saving the results, including a simple download as a PNG.