Your password sucks

Passwords are the worst and you’re probably terrible at them. #Sorrynotsorry

No really. Due to a toxic brew of poorly salted passwords, frequent security breaches, credential reuse, and boneheaded length / character rules (looking at you banks), web security sucks.

Combined with brute force and your email address, black hats can iterate over thousands of common passwords to break into your accounts. No bueno 💀

Of course, there’s two factor authentication (you’re using Authy right?) and password managers (LastPass, OnePass, Keypass - I don’t care which, just use one) — but passwords are always the weakest link.

Don’t despair though, there’s some good news in all this: with a database of the 10,000 most commonly used (and thus WORST) passwords, Stupid Passwords lets you test to see if your passwords are objectively awful:


const stupidPasswords = require('stupid-passwords');

const x = stupidPasswords.isStupid('hello');
// true -> bad password
// interestingly, 'god' isn't on the list...

const y = stupidPasswords.isStupid('1am$up3rc00l');
// false -> not a -terrible- password, but could be better

const z = stupidPasswords.rateOfUsage('hello')
// {password: 'hello', frequency: 1644 }
// i mean, come on

Much like forest fires, only you can prevent the crack-ening of your digital identity. Now go test your passwords and turn on two-factor!

Toolbar up

Discounting all of the masturbatory “think pieces,” I think Medium has been massively successful because of its UI/UX. The CMS and highlight-to-format toolbar are super easy to use, staying out of your way so you can focus on writing.

But, what if you want to adapt Medium’s interface to do more than format text? With the WebClip library from Randy, you can add contextual toolbars to your website or app:

screenshot of WebClip with custom font-awesome icons and actions

WebClip’s Medium-esque toolbars enable you highlight text and input it to custom JavaScript functions. You can even use Font-Awesome icons in your toolbar.

Experiment with the WebClip demo on Randy’s site and get inspired!

Comments :)

The tags are alright

I really like how Slack, Twitter, Facebook, and WhatsApp expand links, adding context and putting the focus on the main content. YouTube links become inline players or thumbnails. News articles display short summaries alongside the author’s name. Even something simple, like my podcast’s landing page, can be jazzed up:

How does it work? Meta tags. By parsing tags defined in the <head> element of the link’s html, you can extract a lot of data: title, type, related media, content creator, etc. Each of the major social networks have their own formats, but Eran Hammer’s Metaphor node library understands them all.

Just pass Metaphor a URL & a callback and it’ll return an object packed full of Twitter, Facebook, and oEmbed data (another common embedding protocol):

{
  url: 'http://commit.devpost.com',
  type: 'website',
  title: 'The Devpost Commit',
  description: 'A weekly show about software developers, hackathons, and getting a job in tech -- Hosted by Richard Murby and Neal Shyam',
  image:
   { url: 'https://challengepost-assets.s3.amazonaws.com/commit/commit-twitter-card.jpg', size: 566832 },
  sources: [ 'ogp', 'resource', 'twitter' ],
  author: 'Devpost',
  icon:
   { any: 'http://commit.devpost.com/public/img/favicon.ico',
     smallest: 'http://commit.devpost.com/public/img/favicon.ico' },
  twitter: { site_username: '@devpost', creator_username: '@devpost' },
  site_name: 'Devpost',
  preview: '<html><head><title>The Devpost Commit</title></head><body><div class=\'metaphor-embed\'><div class=\'metaphor-embed-header\'><img class="metaphor-embed-header-icon" src="http://commit.devpost.com/public/img/favicon.ico"/><div class="metaphor-embed-header-site">Devpost</div><a class="metaphor-embed-header-link" href="http://commit.devpost.com"><div class="metaphor-embed-header-title">The Devpost Commit</div></a></div><div class=\'metaphor-embed-body\'><div class="metaphor-embed-body-description">A weekly show about software developers, hackathons, and getting a job in tech -- Hosted by Richard Murby and Neal Shyam</div><img class="metaphor-embed-body-image" src="https://challengepost-assets.s3.amazonaws.com/commit/commit-twitter-card.jpg"/></div></div></body></html>'
}

Comments :)

Burn the ship

Here’s an abridged history of my experience with fractals:

  • 1992 Pops introduces me to the Mandelbrot set, Chaos Theory, and how everything keeps iterating as you zoom in. I’m unimpressed and wander off to play Nintendo.

  • 1995 I accidentally turn off the computer (the monitor was off!) while my brother is rendering some crazy iterated fractal. Yelling ensues. I wander off to play Wolfenstein.

  • 1999 We move to New Haven and pops stands behind Dr. Mandelbrot during some new teacher ceremony at Yale. Once again, I’m unimpressed. I wander off to play Xenogears.

  • 2016 I discover the Burning Ship fractal and time stops. I am magnetically drawn to it, like it’s calling out to me. Fractals are awesome and I’ll fight anyone who says otherwise.

Burning Ship screenshot for Wikipedia

Oddly, not many people on GitHub share my (newfound) love for fractals, but I did find a nice project called FractalJS, which plots fractals online. (Source code)

Zoom into the Burning Ship’s tail, the Armada. The main ship reminds of a sinking oil tanker, while the Armada looks like a collection of grand Spanish galleons with tall rigging. Look closely and you might see the Black Pearl!

Learn more about the Burning Ship on Paul Bourke’s blog. And FWIW, the difference between this fractal and the Mandelbrot set is relatively minor. Perhaps I owe Pops an apology.

Comments :)

Talk to her

I recently bought an Amazon Echo and I’ve been having a lot of fun asking Alexa to tell me about the weather, play my favorite songs, and set timers in the kitchen—all hands free.

I haven’t hacked with it yet, but my buddy Kunal Batra wrote a cool Swift app that puts Alexa in your Mac’s system tray. Unlike the Echo, MacLexa is entirely software based and only listens when you press the option key.

screenshot of MacLexa recording when option key is pressed

Whenever you record a command, it’s sent to Alexa for processing and returns a voice response. Try downloading the binary and asking Alexa to tell you a joke.

MacLexa also lets you process audio client-side and is a great tool for demoing your Alexa hacks without any Amazon hardware.

Follow the instructions in the readme, create an Alexa app, and talk to her.

Comments :)

2016 Neal Shyam