When learning the code base of a new project, there are always places where
you look at what’s been written, and have a “WTF” moment. Normally, it’s best
to leave written code in place – if it ain’t broke, don’t fix it. However,
I let myself get a bit carried away with a recent project, and rewrote the
bulk of the server-side component. I thought I’d pull out a small example of
how you can take some verbose code, and condense it down to something more
readable.
In this example, we have an array of email addresses, some of which may be
prepended with the string "coordinator-". Why the original developer didn’t
just create two database columns, user_emails and coordinator_emails, I
can’t imagine. In any case, we want to send a message to the “non-coordinator”
email addresses.
Here was the original code:
var to = "";
for(var i=0; i<emails.length; i++) {
var email = emails[i];
if(email.indexOf('coordinator') == -1) {
to += email;
if(i != emails.length-1) to += ",";
}
}
to = to.slice(0, -1);
Straightforward enough, right? Create an empty string, and concatenate the
appropriate email addresses (include a separating comma), then remove the final
comma. So, if the emails array looks like ['bob@gmail.com', 'larry@gmail.com', 'coordinator-joe@gmail.com'],
the final output is the string "bob@gmail.com, larry@gmail.com".
But there’s an easier way to do this, and it involves being knowledgeable about
common Array manipulation methods. The first thing we want to do is remove any
email addresses that contain "coordinator-". Filter them out, if you will.
By Jove, there just happens to be an Array method named filter that we can use!
Next, we want to join the resulting email addresses together, with a comma between
them. What do you know? join is an Array method as well!
The whole thing boils down to one (long) line (pardon the ES6 syntax):
let recipients = emails.filter(email => { return email.indexOf('coordinator-') === -1; }).join(',');
Which do you prefer?
·
Posted by Nathan at 16:12 ·
code refactoring javascript
Recently I took the plunge and purchased a Happy Hacking Keyboard Professional 2.
Design
The first thing you notice about the HHKP is its small footprint. It is approximately
the size of a laptop keyboard, but the keys are full size. I purchased the
black version, which uses a dark grey plasic for the board/keys, with black
lettering on the key tops. Taken as a whole, it looks very attractive and minimalistic.
One thing to note is that the contrast between the keys and labels is very
slight, which might make it difficult to see in a darkened room. The textured
plastic also seems to attract lint, which mars the overall appearance.
Feel
The keys feel great; if you’re used to typing on modern Apple keyboards, the
key travel will feel almost excessive at first. I wasn’t sure what I would
think about Topre switches, but I think that I like
them; they aren’t really noisy, but have a deep, satisfying “thunk” when they
bottom out. The keycaps have a textured plastic on the top which is also very
pleasant to feel. I think that overall, the switches fulfill the requirement
I had for them, which was to provide moderately deep travel and not be too
loud for a cramped office space.
Compromises
Of course, the reason why the HHKP is so polarizing is that the designers
made some choices that not everyone will agree with. Probably the most obvious
is that there are no dedicated arrow keys; you have to press a modifier key
plus one of the [, ;, ' or / keys. If you’re a visual text editor
power user, this may very well be a dealbreaker for you. The only other real
annoyance I’ve found is the placement of the tilde (~) key, which is on the
upper right side of the board, above the Delete key. It’s very commonly used
in Unix-flavored systems (e.g. cd ~ will take you to your home directory), and
I have not gotten used to its placement yet.
Conclusion
Although it will only appeal to a subset of keyboard enthusiasts, I have
enjoyed using the HHKP. If you use a computer professionally, it’s definitely
worth your time to investigate other keyboards besides the one baked into your
laptop.
Happy Hacking Keyboard Professional 2 on Amazon.com (referral link)
·
Posted by Nathan at 11:11 ·
review keyboard japan
Finally getting around to making note of this here: I finished another simple
puzzle game a few weeks ago. It’s a hashi wo kakero implementation, called
“Let’s Build Bridges.” Check it out on the Ganbaru Games site.
It works great on mobile (Chrome/Safari) as well, so you can save it to your
device’s homescreen for fast access. Alternately, I put an IAP-enabled version
on iTunes,
so plz give me pennies.
Also, since trashing the Ganbaru Games dev blog, I needed something to put
there, so ended up making a faux smartphone-type interface.
It’s a bit spartan now, but will be fleshed out a bit as I slowly convert some
of my Javascript games over to using Arcadia.
·
Posted by Nathan at 22:08 ·
javascript games development
Spelunky is a great game. I remember
playing the first freeware version, and sucking at it. I don’t think
I ever got past the Mines. Never owned an Xbox 360, so I wasn’t able to play the
HD remake when it was first released. I shed bitter tears about that. Imagine
my joy when a port was released for PS3 (which I actually owned)! Imagine my
anguish when my PS3 bit the dust, suffering from the dreaded “Yellow Light of
Death!”
While there is a PC version of the game, no OS X port has been released, and
it’s looking rather unlikely at this point. Fortunately, it’s super easy to
get the Windows version of the game running in Wine! Even better, there’s an
application called Wineskin Winery, which will bundle the Windows .exe into its
own self-contained Mac .app bundle! When you get the whole thing working, it’s
totally seamless and amazing. While I found a few tutorials online to help walk
through the process of getting Spelunky up and running, they were a bit sketchy,
so I figured I’d recount the process here, complete with screenshots. Note that
I’m running the GOG version.
- Download Wineskin Winery.
When you start the app, you’ll see something like this
- Install an engine. I installed
1.7.29, but you can probably use anything newer.
- Click “Create New Blank Wrapper.” Give it an awesome name.
- The wrapper is done! Click the “view
wrapper in Finder” button.
- Right-click the wrapper app and choose “Show package contents.”
- You’ll see an app called
Wineskin.app. Open it,
then choose “Install Software.”
- The installer will allow you to choose a setup executable. Click
that then choose the Spelunky setup .exe.
- Install it!
- Click the “Advanced” options and choose “Tools” -> “Winetricks”.
- Install
d3dx9 from the “dlls” section.
- Do a test run. Hopefully it should work!
- Use Controllers to map keyboard input
to your Bluetooth game controller!
Now, enjoy some of that sweet, sweet Spelunky-ing.
·
Posted by Nathan at 20:06 ·
spelunky wine gaming os x
I’ve been using the Lollipop version of Gmail quite a bit recently. One neat
little detail is that whenever you drill down into the individual email view,
the “hamburger” button in the upper left smoothly animates into a “back” button.
In fact, you’ve probably seen this effect quite a lot – a simple search for
“animated hamburger icon”
returns a boatload of results. Most of the techniques for doing this sort of
effect on the web utilize some sort of CSS trickery: they’ll use psuedo-
elements to create the hamburger, then animate it all with transforms.
What if you have to support older browsers in your site? I know it’s hard to
resist the shiny new features in the most recent version of Chrome, but
lots of folks still use (gasp!) IE8 (or older). In fact, one of the sites that
I help administer has an even split of users between Chrome and IE8. For that
reason, I was thinking about how I could implement a hamburger animation in
a way that wouldn’t totally break for IE8 users.
I ended up simply using two images, a “hamburger” and an arrow, then fading
between them. On newer browsers that support transforms, the fade is obscured
by a rotation animation. Sure, it’s hacky; the cooler versions of this effect
will create the hamburger using DOM elements, then animate each one into
position. But most end users won’t notice the difference. And using images
will allow older browsers to get an approximation of the effect.
Check out a JSFiddle with the implementation details.
·
Posted by Nathan at 23:05 ·
html css javascript
