Your friends at Viget present Extend, a Code & Technology Blog

Native or Not? The Untapped Power of Web Apps

This post was adapted from a talk I've been giving this year (BD Conf and Forge were awesome and you should register next year!). If you're interested in the slides, you can find them here:

Why another web vs native discussion?

When I started as a Front-End Dev at Viget four years ago, building for "mobile" was still sort of a novelty. Today, everything we build is responsive, but it's been a slow journey figuring out how to translate the "wow" factor we have on desktop down to the tiny touchscreens in our hands.

While researching for a previous talk on mobile-first design, I found it incredibly hard to find exemplary, mold-breaking, mobile web experiences. Many "award-winning" sites featured on places like the FWA or either had no mobile experience at all, or displayed a dumbed-down version that lacked whatever it was that made the desktop experience stand out.

Why is there such a disparity between native and web apps?

Meanwhile, all the native apps coming were beautiful. Designs were crisp and clean, interactions were slick, animations and transitions were smooth and well thought out. Everything was perfectly sized for your screen, and the content and navigation were focused and easy to get to. Why was I seeing such disparity between native apps and web apps? It seemed disproportionate to any limits of technology that might exist between the two.

Develop in Style with Sublime Text and Atom Editor Themes

Both Sublime Text 3 and Atom are excellent code editors which are highly extensible, support package management, and provide many developer conveniences. Most importantly, they both support custom UI theming! There are currently some great themes available, and here are some of our favorite ones at Viget.

Sublime Text 3

Material Theme

Material Theme brings Google’s material design visual language to Sublime Text 3. Used by Dan Tello, Jeremy Frank, Tommy Marshall, Solomon Hawk, Ben Tinsley.

Material Theme


Spacegray provides a great looking hyperminimal UI with a unique color palette.

Spacegray Theme

El Capitan Theme

A variation on the popular Soda (light) theme, El Capitan Theme is made to better match the native UI in OS X.

El Capitan Theme


One Dark

Atom’s default UI and syntax theme. Used by Lawson Kurtz and Mike Ackerman.

One Dark Theme

Atom Material UI

This theme follows Google’s material design guidelines. Used by Jeremy Fields.

Material UI Theme

Native UI

Native UI provides the new OS X El Capitan user interface elements and improved typography.

Native UI Theme

Changing your editor’s UI theme or syntax coloring is simple to do and it’s a great way to give your coding experience a little boost. Several of the themes above support both light and dark variations, as well as various syntax coloring options. I encourage you to explore the themes above, and if you have a favorite theme, let's hear about it in the comments below!

How To Build A jQuery-free “Companion Nav”

One delimma I constantly run into is whether to use jQuery on a project that I have already set up without it. I think we have all been in a similar place - get a project set up from scratch firmly saying “no jQuery this time” and it goes fine, right up to the moment when you need to build out that slider or sticky nav. After much deliberation, you inevitably cave and pull in jQuery and use a handy plugin you have used in the past to get the job done.

I believe jQuery is a great tool, and I'm often relieved when I get on a project that makes use of it. However, as many people have pointed out in the last couple of years, you probably don't need jQuery on your project. It's bigger, slower and it's less flexible than standard JavaScript, especially when used in today's client-side applications.

On a recent project, the designer wanted the sidebar navigation to follow the user as she or he scrolled within a certain section. The rest of the project was light interaction-wise, so I could not rationalize using jQuery just for this small feature. Instead of caving and pulling in jQuery, I decided to do this with plain JavaScript.

Here's the final product:

a demo of the ollow nav in action

The following steps explain how you can build it yourself, but if you want to play with a demo while you follow along, get it from this repo.

Git Tips

Git is flexible and lightly opinionated about how you use it.  It's adaptable to you, your team, and the way you want to work.  But with that power comes some responsibility.  Here are a few helpful tips I've learned working with Git over the years:

Beware Git alias commands

It stops being fun to type out git status about three days into learning Git, so it makes sense to create a handy alias like alias gs='git status', which I did.  I now type gs so often, and so reflexively, that it bypasses my conscious thought process (if I got a dollar every time I opened Ghostscript on a server, I'd have like 34 more dollars) — wherein lies the danger.

Pundit: Your New Favorite Authorization Library

Pundit is a tiny Rails authorization library that will make you jump for joy after using the likes of CanCan.

Strictly speaking, Pundit it a small, unopinionated library of helper methods designed to make it easier to interface with Policy objects (classes that define your application’s authorization logic). It’s explicit, easy to understand, easy to use, and powerful.

It’s everything an authorization library should be.

Policy Objects

Pundit’s only strict opinion is that authorization should be performed by discrete objects, called policies. Policy objects make a ton on sense (even if you aren’t using Pundit). Their goal is to completely isolate and centralize all authorization logic in your app. (Sayonara to authorization logic in your views.) A policy object and its use could be as simple as:

class Policy
  def initialize(user)
    @user = user

  def authorized?


  attr_reader :user

Obviously this example is simplistic. In real applications, authorization logic can pile up and become difficult to organize. Pundit’s ease-of-use comes from its suggestion that policies be organized RESTfully as described below.