Blog Name

What we are listening to #2: Podcasts

2019-04-15T02:00:00+02:00

Casefile

"Fact is scarier than fiction" – Casefile Podcast

Lindha: As a true crime buff, there is nothing better then Casefile. The background research is impressive, detailed and very visually descriptive. And if you are new to it, a backlog of over 100 cases, each about an hour or more to dig in too. I am not even close to being caught up at case 60+.

But, what's up with the host being anonymous?

Currently listening to:

Case 60 Jamestown (1–3)

Past favorite:

Case 19 Snowtown
and many more...

Stay Tuned with Preet

"Stay Tuned with Preet is a series about justice and fairness featuring Preet Bharara, the former US Attorney for the Southern District of New York" – NPR

Lindha: With all the twists and turns going on in American and World politics, it’s great to have a person like Preet Bharara to share his insights and put some into clarity. And the guests are fantastic. The episode where Preet is discussing the Magnitsky Act and how it came to life with Bill Browder, is worth listening to on its own. However, right now I have tuned out a bit from all the insanity, and as a result, I am a few episodes behind. Still would recommend it to anyone interested in keeping up on things.

Currently listening to:

CAFE Insider 03/25: Don't Barr Mueller's Report

Past favorite:

From Preet: The Magnitsky Act
and many more...

You're Wrong About...

"Every week Sarah Marshall and Michael Hobbs circle back to an event, person or trend that’s been misremembered in the public imagination." – Rottin' in Denmark

Jack: This is a “turns out...” podcast that often circles around the media’s role in framing the story we know about shared events. If you already know a lot about the week’s topic you might find yourself arguing that they are still wrong about something at the end. I truly enjoy Sarah’s academic vocabulary; she can certainly turn a phrase.

Currently listening to:

Urban Legends Spectacular!
Razorblades in apples, babysitters on acid, killers in backseats and “rainbow parties”: In this episode, Mike and Sarah investigate the scary stories Americans tell each other and discover the actual anxieties behind them. Turn on your high beams for this one.

Past favorite:

Alpha Males
Sarah tells Mike that animal behavior is an imperfect template for human society. Digressions include rabbits, Bob’s Burgers, and online dating. Mike makes an awkward observation about locker rooms.

Reconcilable Differences

"John Siracusa and Merlin Mann try to figure out exactly how they got this way." – Relay FM

Jack: I listen to every show either of these hosts is on, regardless of topic. RecDiffs has priority status in Overcast for me, as I will pause any other show if a new episode is available. You must start at the beginning, and if you don’t love the personalities you might not be hooked up right.

Currently listening to:

Duke of Bits
This week kicks off with a critique of the GUI for Skype. What’s Merlin’s problem with Swing anyway? John introduces the “MPU” then mostly agrees to drive.

John interrogates Merlin about a recent and notorious technical problem with one of his other programs. There is talk of checklists plus more fretfulness about the topic that cannot be discussed.

Next, your hosts respond at length to a listener’s question about things they’ve given up. Status is less pursued, insight on privilege is sought, and hope for interesting side projects is, alas, abandoned.

Finally, John looks for help regarding the help he was offered by an internet quiz.

Where to start:

We All Ruined It Together
In this inaugural episode of Season 1, John and Merlin begin framing the conversation on exactly how they got how they are.

From the dungeons of Usenet to the dragons of roving bullies, origins are explored, awkwardness is cataloged, and differences are provisionally reconciled.

eCommerce: Wireframing Kit for Prototyping in Adobe XD

2018-08-17T02:00:00+02:00

Continuing my series of converting and recreating my illustrator wireframing assets, this time its eCommerce bits and whatnots. It has come in handy as we have had a few online store projects lately. Use them as you see fit, and I will keep sharing small kits as I have them done moving forward.

Oh, and please check back for more. Enjoy! ヾ^_^

Download Adobe XD eCommerce Kit

Included in this kit

1. Shopping Navigation

Navigation with horizontal stacked links and a shopping cart icon.

2. Product

Single product view with image gallery, rating, color and quantity selector. An area below main content for additional details in a sectional tab.

3. Product Listing

Product cards with a preview image, label, price, short description, ratings and add to cart button.

4. Filter & Sorting, Product Listing

Product cards with a preview image, label, short description, ratings and add to download button. Icon to access filters and a sorting drop-down.

5. Card Variations, Product Listing

Three different card variations. Add to cart, download and plain preview versions.

6. Cart

Step by step cart preview. Input outlines indicate that quantity is editable, and the x to the right suggests that each item can be deleted.

7. Payment & Shipping, Cart

A second step in the checkout process. Input fields for billing address are grayed out and only available if "Billings the same as shipping address" is unchecked.

8. Placed Order Confirmation, Cart

A confirmation message with a detailed order summary.

Enjoy! ヾ^_^

Download Adobe XD eCommerce Kit

More Wireframing Kits for Prototyping in Adobe XD

Containers & Blocks: Wireframing Kit for Prototyping in Adobe XD

2017-11-23T01:00:00+01:00

Continuing my series of converting and recreating my illustrator wireframing assets, this time its containers and blocks. A few of these I use very sparsely or for particular purposes. Accordions and tabs used to be a way to cram and sort lots of content in a small space. While doing so, we are hiding some of that content from the user. Still useful as a space saver, I recommend not using them as an afterthought. They are more suitable for when including associated information, such as shipping terms on a product, etc. That said, accordions are one of my fav ways to display Q&As, making questions easily skimmable and tabs are great for featured tags, filter inline on the page.

Oh, and please check back for more. Enjoy! ヾ^_^

Download Adobe XD Containers & Blocks Kit

Included in this kit

1. Accordion

Vertically stacked list of item with icons indicating if it is collapsed or expanded.

2. Callouts

Callout block, with and without the collapsable icon.

3. Cards

Callout block, with and without the collapsable icon.

4. Time line/Timeline

Timeline with callout blocks.

5. Table

Table with table headers and content.

6. Tabs

Tabs with content.

7. Tooltips

Directional Tooltips.

Enjoy! ヾ^_^

Download Adobe XD Containers & Blocks Kit

More Wireframing Kits for Prototyping in Adobe XD

Write a Simple npx Business Card

2017-11-09T01:00:00+01:00

javascript is awesome for CLIs

the npm build, publish, share cycle is so easy
npx allows execution without installation
npm ecosystem is ripe for CLI wrappers, just write the stdio handler for your favorite package

npx business card

Let’s create a pointless CLI just to walk thru some best practices and patterns for publishing any node CLI.

Inspired by johnkpaul and searls, we’ll create a npx enabled business card. The final output might look something like this:

npm init

Start a new node project and name it whatever you want. You could choose to name it after the executable you want to expose. It’s not necessary but conventions are nice, and it makes your binary more npx friendly.

mkdir jackboberg
cd jackboberg
npm init -y

At first, let’s get the necessary CLI working.

touch cli.js
chmod +x cli.js

Now open the new file in your favorite editor. I’ve been using spacemacs recently, but am still very partial to vim.

#!/usr/bin/env node

console.log('doing business')

You can execute your new CLI like this:

./cli.js

ship it

That’s an entirely functional first release! You just need to modify your package.json to let npm know to link your executable and you are off:

{
  // ...
  "bin": "./cli.js",
  // ....
}

By default, npm will expose your binary using the same name as your package. You can configure this if it’s not what you want, but it will make your executable harder to use with npx.

Share your new CLI with the world!

npm version patch
npm publish

Now anyone can leverage your new CLI using npx, without needing to install it locally:

npx $YOUR_PACKAGE_NAME

Put your logic in a separate file

What if you want to tell people more about the business you are doing. Create an object to hold the data for our CLI. I like to keep even small projects organized, so I’ll create a new file in lib for this.

# ./lib/data.js
module.exports = {
  name: 'Jack Boberg',
  title: 'Software Engineer',
  github: 'jackboberg',
  urls: [
    'https://jackboberg.info',
    'https://studioelsa.se'
  ]
}

When your CLI needs to do additional work, put that code in index.js or a local module. Consumers will be able to use your package programmatically, and it gives you a discrete location to do all your stateful business logic. In this case, we will use the main module to format our data as a pretty string.

Let’s get a library that will help make our output a bit more stylish.

npm i prettyjson

We can use this package, or any other useful utility we find on npm, to improve our CLI utility.

# ./index.js
const { render } = require('prettyjson')
const data = require('./lib/data')

const renderOpts = {
  dashColor: 'cyan',
  keysColor: 'blue',
  stringColor: 'white'
}

module.exports = () => render(data, renderOpts)

A small update to our ./cli.js script and we can leverage our new module.

#!/usr/bin/env node

const pkg = require('..')
console.log(pkg())

Handle stdio in your CLI module explicitly

That’s not bad, but what if someone wants to get the raw JSON. Let’s add a simple flag to modify our scripts behavior.

npx jackboberg -j

Keeping your cli.js focused on parsing input and producing output is a good idea; it keeps your files small and reasonable. Resist the urge to write any business logic in this file.

#!/usr/bin/env node

const minimist = require('minimist')
const pkg = require('.')

const options = {
  alias: { json: 'j' }
}
const argv = minimist(process.argv.slice(2), options)

console.log(pkg(argv))

prettyjson already includes minimist as a dependency, so you can add it for ‘free’ and dress up your CLI from there. You should still include it explicitly in dependencies. Let’s make a small change to our main script to support this new option.

# ./index.js

// ...

module.exports = ({ json }) => json ? JSON.stringify(data) : render(data, renderOpts)

Don’t forget to publish your final npx business card when you are finished adding tons of unnecessary additional features. I made mine include cowsay, because of reasons.

npm version major
npm publish

Now you have a globally executable script, that can leverage all of npm, to perform awesome utilites (or silly ideas like this). If you find you are writing a ‘big’ CLI with lots of parameters or sub-commands, you will want more options around how to define your CLI and should consider trying yargs instead of minimist.

Navigation: Wireframing Kit for Prototyping in Adobe XD

2017-10-06T02:00:00+02:00

As I have mentioned before when sharing wireframing kits, my existing Illustrator wireframing assets are, per project basis, converted and recreated one by one. So let me share with you my common menus and standard navigation components. Use them as you see fit, and I will keep sharing small kits as I have them converted moving forward. Oh, and please check back for more.

Enjoy! ヾ^_^

Download Adobe XD Navigation Kit

Included in this kit

1. Menus

Horizontal and vertical menus, and with icons.

2. Dropdown Menus

Horizontal and vertical dropdpown menus.

3. Navigation Bar

Standard top navigation bar with logo placement and search.

4. Pagination

Pagination with page numbers and previous/next navigation.

5. Breadcrumb Trails

Breadcrumb trail with dividers.

6. Tabs

Tabular Navigation with active state.

7. Accordion Menu

Accordion with active state.

Enjoy! ヾ^_^

Download Adobe XD Navigation Kit

More Wireframing Kits for Prototyping in Adobe XD

Link Roundup #3: Technology

2017-09-22T02:00:00+02:00

creating a ruby development environment

I spent several years primarily developing applications using Rails, but more recently I’ve been happily focused on node.js projects. In the past few weeks I started a contract that has me back in Ruby. The MacBook I am using currently has never been used to do any Ruby work, and I made a mess of my .dotfiles. So, I had to start from scratch and get a Ruby environment set up again. Here are some bits I quickly realized I needed.

install some rubies

Managing Ruby versions is a breeze with rbenv, and I like that I can easily understand how it works. $PATH injection is a fine way to deal with this challenge, and I take it a step further by prepending ./bin to my $PATH. Then I can leverage binstubs locally and not have to use the cumbersome bundle exec or ./bin/rails when running scripts.

level up your REPL

You spend a decent amount of time in a Rails console, or IRB. It’s worth configuring some bits to make it more enjoyable. First, just use Pry everywhere.

# ~/.irbrc

begin
  require "rubygems"
  require "pry"
  Pry.start
  exit
rescue LoadError => e
  warn "=> Unable to load pry"
end

Then you can manage how you want all your Ruby REPLs to work in one place, your .pryrc. Here I make sure I always have awesome_print and toss in some examples for how you might extend your environment with methods you find helpful when hacking. I used to require hirb as well, but have not found I miss it enough to add it back (yet).

# ~/.pryrc

# awesome print
begin
  require 'awesome_print'
  AwesomePrint.pry!
rescue LoadError => err
  warn "Couldn't load awesome_print: #{err}"
end

# See https://gist.github.com/807492
class Array
  def self.toy(n=10, &block)
    block_given? ? Array.new(n,&block) : Array.new(n) {|i| i+1}
  end
end

class Hash
  def self.toy(n=10)
    Hash[Array.toy(n).zip(Array.toy(n){|c| (96+(c+1)).chr})]
  end
end

I am still early in my re-setup for active Rails development, but I would expect more Ruby links in the interesting projects sections of upcoming posts. Here are some of the vim plugins I have adopted.

vim-rails

Ruby on Rails power tools

vim-endwise

wisely add “end” in ruby, endfunction/endif/more in vim script, etc

vim-rubocop

The Vim RuboCop plugin runs RuboCop and displays the results in Vim