I’m giving a TED Talk

TEDResidents-Matthew-Nolan

I’m very honored and and humbled to be accepted into the TED Residency program. It’s an in-house incubator for breakthrough ideas. Residents spend four months in the TED office with fellow brilliant minds who are creatively taking on projects that are making significant changes in their communities, across many different fields. At the end of their session, Residents have the opportunity to give a TED Talk about their ideas. More info here.…

Read More»

Verona won some awards

My company Verona was recognized as an Official Honoree for the 20th Annual Webby Awards.

Verona is an official honoree for the 20th annual Webby Awards

Hailed as the “Internet’s highest honor” by The New York Times, the Webby Awards honor excellence around the web. The Webby Awards received nearly 13,000 Webby entries from all 50 US States and over 60 countries this year. Team Verona is thrilled to receive this distinction for our work alongside so many other outstanding companies who are setting the standard for creativity and innovation on the Internet.

Verona was also featured as one of “2016 Most Innovative Companies” from Fast Company.

Verona is a Winner of 2016 Most Innovative Companies from Fast Company

 

Matthew Nolan Fast Company

Thank you to Fast Company & team Verona, and of course our users!

Verona, world peace, one swipe at a time

IMG_5820

Read More»

Verona, my world peace app

Last year I built an app called Verona. It’s been an exciting adventure. I used my love of building software to make something that will make the world a better place. There were many articles talking about my app, but I like this one at Refinery 29 as they got perspectives from a few researchers. Some people are saying Verona could make a significant impact at reducing global conflict. It’s amazing what one can do with a few thousand lines of JavaScript when you put your mind to it. …

Read More»

Vagrant for mobile web development

The problem: You code your mobile web apps on your desktop, and it’s hard to see the changes.

Until OS X Mavericks kills the feature, you used to be able to daisy chain your local WiFi off your ethernet connection, and serve your local environment to your mobile devices via WiFi. It was a sad day when they killed it. It made development so easy. I couldn’t find any other alternative that didn’t involve time consuming network hacks. The XIP service got me close, but it was unreliable when I was at a location with high network security.

All was hopeless until I found Vagrant Share.

Now this is my workflow.

  1. I code.
  2. I save.
  3. My local browser refreshes. My iPhone refreshes.
  4. Repeat.

Vagrant Share allows you to share your Vagrant environment with anyone in the world, enabling collaboration directly in your Vagrant environment in almost any network environment with just a single command: vagrant share.

Vagrant share has three primary modes or features:
HTTP sharing will create a URL that you can give to anyone. This URL will route directly into your Vagrant environment. The person using this URL does not need Vagrant installed, so it can be shared with anyone. This is useful for testing webhooks or showing your work to clients, teammates, managers, etc.

SSH sharing will allow instant SSH access to your Vagrant environment by anyone by running vagrant connect --ssh on the remote side. This is useful for pair programming, debugging ops problems, etc.

General sharing allows anyone to access any exposed port of your Vagrant environment by running vagrant connect on the remote side. This is useful if the remote side wants to access your Vagrant environment as if it were a computer on the LAN.

The quick & dirty install.

I highly encourage you to head over to the vagrant site and check out their docs. They’re pretty detailed and it’s important to get a solid grip on what’s going on. That said, if you plug this into your machine, you’ll probably be alright.

Go here & install Vagrant.

$ mkdir vagrant_getting_started

Read More»

Sublime Monoaki across Chrome & Terminal

I spend all day using tools like Chrome, Sublime Text, and Terminal. A few months ago I spent a few hours customizing them to make them easier on the eyes. Here are some of my best plugins.

Terminal

I’ve really grown to love the Monoaki color scheme in Sublime Text. I found a plugin to make Terminal match. It’s a little thing, but somehow makes a big difference.

Download the Monokai.terminal theme here.

I’m also using a customization to the Bash prompt written by my friend Jesse Earle. My Bash prompt now shows me my current Git branch, and my current directory (so nice having it in front of you). It also uses funny emojis to separate the lines. bash_profile can be downloaded here.

bash

Chrome DevTools

I found a theme for Chrome’s DevTools with a darker background and higher contract colors than default. It makes a lot of difference. It’s not exactly Monokai, but it’s a lot easier to look at than the default white.

The installation is a little tricky, but worth it.

Chrome DevTools

Read More»

Hammer.js for touch events in a browser.

Whenever I need to implement touch events on a web page, I reach for Hammer.js. Hammer.js gives you key gestures like tap, doubletap, pan, swipe, press, pinch, and rotate. You can customize settings like velocity and timing to suit your needs.

It’s super light weight at 3.96k, and has no external dependencies. If you’re using Angular.js for mobile, the Hammer.js Angular directive is a must have. It lets you add events like ng-swipe.

Using it is this easy

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});

View the demo or browse the source on GitHub

Read More»

Do you REALLY know HTML?

When I’m interviewing potential addition to our front-end team, there is one question which seem to trip up almost everybody. No matter if they managed to recite all the array object methods, and all jQuery functions, and can type a regex blindfolded, there one basic question I’ve seen dozens of (otherwise) talented get wrong.

What are the differences between the DIV, SPAN, and P tags?

It’s become sort of a FizzBuzz for layout.

For once don’t try to think outside the box. It’s all about the Box Model. The Box Model was published by the W3C around 2001 to help browsers display more advances layouts.

Every HTML tag has browser default settings for how it will lay out on a page. Which is why a web site like motherfuckingwebsite.com (which is hilarious btw) looks properly formatted even without any custom CSS. Knowing the browser default settings for key elements is essential to quickly laying out a page.

The key concerns on their difference are as follows:

  • Their Box-Type
  • How much margin (if any)
  • Semantic properties

The P tag

A P a block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. It can be the only thing on the line-box of the lines within it’s container. The P also has a bit of margin on it by default. 10px on Chrome.

The DIV tag

Like the P, the DIV is a also a block-level element. But it has no margin by default. This makes it ideal for laying out large page elements.

The SPAN tag

The SPAN is an inline-level element. This means it does not line break, and can share the same line-box as other elements. This makes it the goto tag for in line (inline) formatting.

The P also has a semantic quality about it, telling search engines the content inside is a paragraph. In HTML5, they introduced semantic tags such as ARTICLE, NAVIGATION, and FOOTER. They also offer a semantic value, but they are treated as block line elements. They are essentially DIVs …

Read More»

Sails.js is awsome

I’ve been experimenting with Sails.js. It’s a relatively new MVC framework which brings us closer to a Ruby on Rails grade solution for Javascript.

If you have Node.js, just plug this into your terminal. (on Window you don’t need to sudo).

$ sudo npm -g install sails

Then it’s super easy to fire up an app.

$ sails new demo-app 
$ cd demo-app
$ sails generate api users
$ sails lift

Then point your browser to

http://localhost:1337/users/create?username=demo&name=Matt&age=30

Bingo bango. You just created an app, fired up a server, and created a new record. Pretty easy huh? You can do a lot of cool stuff with Sails.js, before even writing any code for it.

Try it out yourself. Head over to the Sails.js Get Started page. The guy who made it has has a great 15 minute walkthrough video.


Read More»

The meaning of “This” and “That” in Javascript

Intro

In Javascript “this” is a special keyword which often confuses developers. You’ll often see a variable of “that” within methods which have a value of the mysterious “this” Discussing the meaning of “this” might sound philosophical, in Javascript “this” is actually not as ambiguous as it seems. In short:

“this” is a reference point to what is calling a function. It’s a reserved Javascript keyword

“that” is a variable used to to pass scope to private methods. It’s not part of the language but is a popular Javascript “design pattern” (which makes up for what many believe is an error in the Javascript specification).

The “this” keyword explained

Using this is very handy when referring to values within an object. Understanding how it’s use is essentially to writing clean, efficient code. Let’s look at the usage of the this keyword in practice.

var ourFunction = function () {
	console.log(this);
};
ourFunction(); 

What this will do is log the Window object to our console. This is because ourFunction() is being called from the root, or the Window object in your browser.

Lets call this from within an method inside another object.

var ourObject = {}

ourObject.ourMethod = function(){
	console.log(this);
}
ourObject.ourMethod()

this is no longer the Window object. It’s ourObject, since that’s what’s calling it. Or as the MDN puts it:

“Use the this keyword to refer to the current object. In general, this refers to the calling object in a method”.

Don’t be confused by the word “this”

I find the word “this” little counter intuitive. If I were to say “THIS is my house” while standing inside my actual house, by Javascript logic, my house would belong to the root, Earth.

If I were to wrap my house inside a my city, my house would belong to the city, since that’s what’s calling it.

var newYork = {}

newYork.myHouse = function(){
	console.log(this);
	console.log("is my house");
}

newYork.myHouse();
// Object {myHouse: function}. I guess New York actually owns my house. Bummer.

Why we use “that”

You might run into a few problems when trying to pass defined values …

Read More»
"Hi, I’d like to hear a TCP joke."
"Hello, would you like to hear a TCP joke?"
"Yes, I’d like to hear a TCP joke."
"OK, I’ll tell you a TCP joke."
"Ok, I will hear a TCP joke."
"Are you ready to hear a TCP joke?"
"Yes, I am ready to hear a TCP joke."
"Ok, I am about to send the TCP joke. It will last 10 seconds, it has two characters, it does not have a setting, it ends with a punchline."
"Ok, I am ready to get your TCP joke that will last 10 seconds, has two characters, does not have an explicit setting, and ends with a punchline."
"I’m sorry, your connection has timed out. Hello, would you like to hear a TCP joke?"