All posts by Jonathan Stassen

Code: jquery.otherdropdown.js

Today I published my first node npm package and bower package – jquery.otherdropdown! For quite a while I’ve been reusing a simple code snippet that made it possible for a user to add their own custom response to a select dropdown. I never thought I would publish it.

The principle is simple, in a list of options when the ‘other’ response is selected, prompt the user to specify what they mean. Try out the demo.

jquery.otherdropdown

I’ve seen forms that add an additional input, but it’s effective – but feels choppy to the user. Processing the data can also be slightly more complex when you have to check for a value that may or may not exist.

A long while ago I wrote a script (before jQuery was prevelent) that manipulated the DOM to give the effect I was after. Since then it’s been modified and switched to use jQuery and made it into a plugin.

The functionality is all self contained and pretty simple to use.  Use jQuery to get the select dropdown and runn the plugin on it:

$('.myDropdown').otherdropdown();

Publishing it to Bower I realized could be helpful not only to me but to everyone. Why not give it a go? Many things needed to be done, make it flexible with options for customization, create documentation and demos, and sharpen up the code. After several hours it was ready to go!

It’s been fun to work on. More complex idea are cooking.

Tips: My Favorite Sublime 3 Packages

I primarily use Sublime as my code editor of choice; a bunch of us at Sprout Social do. It’s simple, clean, lightweight on system resources, and it has some pretty sweet packages. I’ve found a number of packages that increase my efficiency developing. Thought I’d share several of these personal favorite Sublime 3 packages.

If you’re on Sublime 2, upgrade to Sublime 3, it’s totally stable.

To get started you’ll need to install Sublime Package Control into Sublime. It’s fairly simple, and the you’re read to go. The “Package Control: Install Package” command will now be available in your command pallet via Cmd+Shift+P or Ctrl+Shift+P.

SublimeLinter

SublimeLinterBase package for all linters. Syntax error highlighting can greatly reduce the save-run-revise cycle time. Most IDEs already have syntax error highlighting, why not add it to Sublime?

There are many SublimeLinter packages. Browse through them find what fits your workflow. Be sure to follow each packages setup instructions, each will be a bit different.

My personal must have’s are:

  1. SublimeLinter-phplint
  2. SublimeLinter-jshint
  3. SublimeLinter-jsxhint
  4. SublimeLinter-csslint
  5. SublimeLinter-contrib-scss-lint

BracketHighlighter

BracketHighlighterAn even better bracket highlighting than what comes with Sublime. It also shows starting and ending brackets in the gutter, and can matching for [ ], ( ), { }, ” “, ‘ ‘, <tag> </tag>.

SideBarEnhancments

Give the context menu more options when right clicking on files in a project. Duplicate files, move, rename, etc.

DocBlockr

DocBlockrEasier creation of document blocks for functions, classes, methods. It’s intelligent and looks ahead to see what you’re documenting to pre-fill the base info (such as input parameters and what is returned). Documenting is now convenient.

Pro tip: use the Tab key to navigate through the generated documented block, no need to click or use arrow keys.

Shell-Turtlestein

Launch the terminal/command line right in the context of your project directly from Sublime.  Either as a new window or as its own panel within sublime.

GitGutter

Visually shows the diff since the last commit in the gutter.  At a glance you can see what lines are additions, modifications, or deletions.

Origami

Split Sublime into multiple horizontal and vertical panes for side-by-side work. Remove the need to switch between tabs or windows as frequently when comparing files.

TrailingSpaces

Highlights and helps cleanup end of line trailing spaces. Nobody likes them right? Or maybe we just don’t notice them.

 

There are many other great packages out there for Sublime : code snippets, theme,  and syntax highlighting. But these are just some of my favorites.

Remove public directory for laravel

To get rid of the /public you can either:
A) Upload vender, bootstrap, and app folders on directory higher than the htdocs or www folder. Then place all files in the public folder to the into htdocs or www.

B) Move files in public directory one folder higher, modify index.php removing the up directory “../” from the includes.

C) Make an .htaccess file in the root something to the effect of

RewriteEngine On

RewriteRule ^(.*)$ public/$1 [L]

Code: Laravel Scope Query on a Model

Let’s talk a bit about scoped queries in Laravel. First here is a basic Book Eloquent Model with two handy scopes for type and fewerPagesThan.

//Book Model
class Book extends Eloquent {
public function scopeType( $query, $type ) {
return $query->where( 'books.type', '=', $type );
}

public function scopeFewerPagesThan( $query, $pages ) {
return $query->where( 'books.pages', '<=', $pages ); } }

Using scoping

I often see confusion when we try to use scoping. Some would expect the following to give them back all 'autobiography' books:


Book::type('autobiography'); // This works right? Nope!

But it doesn't. Scoping functions will only refine your query. For instance all the following are great examples of using scoping:


Book::type('autobiography')->get();
Book::with('author')->type('autobiography')->get();
Book::fewerPagesThan(500)->type('autobiography')->get();

Building up scopes

When using scopes to refine and filter down which Models to retrieve, you will always need to add a ->get() at the end. This allows you can chain multiple "scopes" onto each other as in the 3rd example. Basically it needs to know when you are done filtering down and when to actually hit the database.

So the 3rd example could be broken down like this to really drive home the point:


$maxPages = 500;

$books = new Book();
$books->type('autobiography');
if( $maxPages )
$books->fewerPagesThan($maxPages);
$opportunities->get();

In every case before the ->get() call $books var is a Eloquent/Builder that is being built up.

After the ->get() call $books var gets overwritten with an Eloquent/Collection that has been filled with our data from the database.

This is a very powerful and flexible to way to scope and filter down models that are in your database. It is better to filter them down with scopes in the DB query than filter down a collection that has already been loaded into memory. Make the your DB do some weight lifting for you. 😉

Utility: Bootable ISO on USB Drive

I’ve given up burning ISOs to a disc. CDs are in the past. It took time to burn them, store them, and find them. I have all my CDs/DVDs in ISO form using another awesome lightweight utility that creates ISOs.

YUMI – Multiboot USB Creator

YUMI is a utility I’ve been using to load ISOs to a bootable USB disk.  The process is pretty dead simple and takes but a few moments to transfer an image to the USB disk.

  1. Choose the destination USB Device
  2. The type of ISO
  3. The source .iso file

YUMI-Multiboot-USB-Creator

Removing ISOs is equally simple via the View and Remove Installed Distors.

YUMI-Boot-Menu

Providing your system has the proper boot order to allow booting from a USB, YUMI will startup and ask what ISO you wish to launch. From there – business as usual.

Download

YUMI.exe (1.2MB)
Developer’s Site

 

Learning: Podcasts for the Curious Mind

Here are some of my favorite podcasts.

I’ve been on quite a podcast kick recently, just striving to absorb information. I am subscribing to more podcasts every week with little hope to keep up, much less listen to past episodes. The best began to quickly surface for me.

The Podcasts

Podcast Name
( 15min average length, 1.5x playback speed, Genre or Topics)
A sentence or two of description which includes a narrative of my opinion in places.

  • Radiotopia: 99% Invisible
    (15 – 30min, 1x, Design, Story Telling, Investigative Journalism)
    Stories about the other 99% of things designed that go un-notice and exploring their back-story.
  • NPR: Radiolab
    (20min – 60min, 1x, Story Telling, Investigative Journalism, Learning)
    Topic exploration with applications that are deep and unique. Encourages internal reflection and deeper understanding.
  • APM: Marketplace
    (30min, 1.5x, Market Impact, Investigative Journalism)
    A quality podcast about how markets are effecting different industries, life, and other economies – investigating how it all plays together.
  • NPR: Planet Money
    (20min, 1.5x, Market Impact, Investigative Journalism)
    A quality podcast about the strange and interesting places money finds itself. How money impacts our daily life in ways you might not expect.
  • a16z
    (20min, 1.5x, Interviews, Technology Trends)
    Interviews with impactful entrepreneurs and critical discussions around the current trends in the technology space.
  • HBR IdeaCast
    (20min, 1.5x, Business Management & Growth)
    Topics from the Harvard Business Review publication. Topics range for HR, Investors, Effectiveness in the Workplace, to Talent and Recruiting.
  • NPR: Stuff You Should Know (No longer recommended)
    (30min – 60min, 2x, Learning)
    They talk very slow and information density is low I certainly recommend speeding them up. Topics tend to very from simple to things you’ve never stop to think about. Good for passive listening.

Apps: My top iPhone / iPad apps

This will be an ever changing list, of apps I am currently big fan of.

All apps are free, unless noted.  I won’t bother to mention some of the more popular app.

Socail

Photography & Video

Finance & Money

  • Splitwise – Shared group expenses
  • Mint – Tack spending and savings trends, owned by Intuit and trusted
  • PayPal – Nice way to send / receive money
  • CardStar – Store your loyalty card numbers/barcodes on your phone.
  • LevelUp – Simple rewards and discounts at restaurants.
  • PaperKarma – ‘Unsubscribe’ button for junkmail in your physical mailbox

Travel

  • Waze – Map directions with traffic, cop warndings, and red light camera notices.
  • Google Maps – Best map directions
  • WunderMap / AccuWeather – Combined they make the best weather app
  • Hipmunk – Flight search tool
  • Hopper – Finding best time to fly

Productivity & Organization

  • AnyList – Shared group todo/shopping list
  • OneNote – App+Web note taking app that breaks things down into notebooks
  • RD Client – One of the better experiences for remote desktop

UX: Flat Design

I’ve grown to become quite opinionated about the recent Flat Design trend. Ironically at this time of writing my blog is using a rather flat design, however it still uses borders, dividers, and background colors which as you will see many flat designs ignore or drop.

Gripe with Flat Design

Microsoft chose grey on light grey on white with their new flat design in MS Office 2013. This is very hard on the eyes and makes finding sections / ideas in the UI take a bit of studying to understand. I won’t even go into Windows 8 start screen or new desktop UI which both have other issues. Apple in iOS7 appears to be choosing border-less white divs with section breaks just being a larger padding between items. There is little to no affordance.

If these are the leaders, I’m concerned.

Some are using Flat Design well

However, in my opinion some companies are pulling off flat design well. For instance AVG 2013, they chose very intuitive layout that makes the UI simple and understandable, I don’t use the product, but I would trust my grandma to run it. Other fine examples are the games OLO, Letterpress – check them out.

Some companies are going for a Almost Flat Design, which I can agree is a good compromise, making things a bit more intuitive and have substance. Examples include LinkedIn app, Google products, Facebook. And now with Google announcing Material Design that becomes even more clear.

What I’m saying?

It’s not about emulating the ‘real world’ as it is giving items a sense of sections, and layers. First sections, A menu bar or sidebar ought to look separate from the content. More specifically, static vs. dynamic content ought to be separate. Second layers, if a menu has a drop down that is going to cover content, there ought to be (even a subtle) hint/shadow that is is currently above the content and has a border to visually show its identity. Users will intuitively know there is content under it and not mistake it being part of the content. And not to say ‘Real world’ is what I’m suggesting, if I were then I would want SPST Push Button or NTE 54-533 Switch Rocker.

Where are we heading?

I could dig in further with some closer examples, but I feel User Experience seems unfortunately been placed on the side in many flat design cases. It seems we are in a UI counter-culture mood swing from our overdose on 3D buttons, and huge drop shadows. I get it. We just have to be careful to consider usability, intuitiveness, learnability, human errors, and other UX items. Maybe it is just poor flat design that I’m not a fan of or haven’t given it a full chance, but I’m concerned.

Thankfully with Google talking about Material Design, perhaps we can start to head in a smarter direction.

UX: iOS 8 Notification scroll state

Ever open Notification Center and find that you’re partially scrolled down? As of iOS 8 the scroll state is persisted from last time it was open.

IMG_6288.PNG

This causes confusion:
-additional gestures to see recent notifications
-unclear ordering or recency when view is show
-if scrolled by chance to only have one app banner, may be surprised to find additional notifications above.

Possible fix:
The scroll state could be reset after a new notification and after a timeout (perhaps 1 minutes). Preferably the state would be reset every time it is reopened always showing the freshest state.

Code: Backbone.js Selecting Elements with jQuery

Found a very simple way to get a jQuery rapped DOM element that is within a subView in Backbone. using `this.$( )`. This is pretty handy because it traverses only DOM elements within the current view instead of the entire DOM tree.

Inside a backbone view:

this.$('.myElement')

Inside an event

this.$('.myElement') or $(argument1.currentEvent).find('.myElement')

Inside a Model / Collection:

You shouldn’t, that’s the View’s responsibility