Neon

IMG_1258

I saw this #goodneon last night in Greenpoint. I may be a millenial, but I still like hot pink. I appreciate the cheeky lettering here. The artist uses continuous lines to make each letter rather than making a doubleback to create a single width line on each stroke of the letters.

When I moved to the LES two and a half years ago, I wanted to get a neon for my tenement apartment wall which had been freshly painted for the 30th time. Without anything specific in mind, I spoke to folks at sign shops in the LES who offered a non-specific sign for $300.

I found out that Brooklyn Glass offers two-day intensive neon workshops for a similar price. I took one and had a blast. David Ablon led the workshop. He is a great teacher and all-around gem of a human being. I highly recommend their neon classes if you want to blow a few hundred dollars and have a good time.

Screen Shot 2017-10-21 at 3.21.03 PM.png

The first day you get a feel for bending glass with the ribbon burner, and make a “squiggle.”

Screen Shot 2017-10-21 at 3.20.24 PM.png

My squiggle was this trombone sorta jam

Screen Shot 2017-10-21 at 3.24.06 PM.png

My friend Jenn took the class with me. This is her awesome squiggle.

That fall I took the 6-week neon course also taught by David. Kate Hush TA’d the class and is a rad neon artist. Here’s a piece from her show earlier this year:

Neon in the morning. Last day of a great show by @katehush

A post shared by Eric Lewis (@ericandrewlewis) on

During this class I focused on my block letter skills, working on those double backs.

Here’s my first E that felt good:

It's just an E it doesn't mean anything

A post shared by Eric Lewis (@ericandrewlewis) on

When writing with a pen and paper, you can draw lines in any order to make letters. One stroke has no affect on the next; you’re just putting ink on paper in one place or another.

When making a word in neon, you can’t be so naive. You could easily try to bend glass over itself without proper planning. So you draw out the word on fireproof fiberglass paper. The order of bends is planned using this notation language which you use as a recipe during production.

Learning the neon notation language

A post shared by Eric Lewis (@ericandrewlewis) on

I just wanted a word that would be good to work on my lettering, and David suggested “brat” as the letters are a good variety.

Learning how to write the alphabet

A post shared by Eric Lewis (@ericandrewlewis) on

On the last day of class I made another squiggly, which hangs in my living room / bed room:

 

I haven’t taken another class since. Brooklyn Glass offers focused block letter classes now, which piques my interest. However, time is a finite quantity.

Here’s some more good neon:

This neon has been on since 1949

A post shared by Eric Lewis (@ericandrewlewis) on

Neon in Winterthur

A post shared by Eric Lewis (@ericandrewlewis) on

The illest of neon

A post shared by Eric Lewis (@ericandrewlewis) on

Community Board says the fuck can't go on until 10

A post shared by Eric Lewis (@ericandrewlewis) on

Bathroom of the Year

A post shared by Eric Lewis (@ericandrewlewis) on

This place is next to my work and offers competitive hourly rates and #goodneon

A post shared by Eric Lewis (@ericandrewlewis) on

The subtle work on the head features here is real good

A post shared by Eric Lewis (@ericandrewlewis) on

A+ neon

A post shared by Eric Lewis (@ericandrewlewis) on

Using Gomix to share a JavaScript example with npm dependencies

Websites like JSBin and CodePen allow folks to share examples of front-end code.

Chill the Lion, the Most Hearted Codepen of 2015

You can see the source code right next to the running page, and make edits that show up as you go. Super useful.

These websites let you load bundled libraries, like jQuery or React. However, many libraries expect users to install the library via npm, and don’t distribute bundled versions of themselves. That means they’re incompatible with these online editors.

So what do you do if you want to share JavaScript code that has npm dependencies?

Gomix is an online code editor from Fog Creek Software that came out today. It is totally rad and solves this problem.

For example, I created of a ProseMirror editor in the browser. You can see the code here. If you wanted to use this boilerplate, you can fork it (“remix” in Gomix’s vocab) to create a copy in your account and go wild.

In Gomix, you edit in one window while your example displays in another.

I also made a basic Webpack setup, which is a starting point for any JS code you want to share that has npm dependencies, or if you want to use JavaScript modules in your example code.

This is made possible by the fact that Gomix is basically a nice text editor for a Node.js server that will install npm dependencies for you. I’m using Webpack and Webpack Dev Server to bundle JavaScript modules and serve them out.

Have fun!

Make your phone vibrate

When you touch your screen on this webpage your phone will vibrate.

This page was made possible by the Web Vibration API.

if (!”vibrate” in navigator) {
document.querySelector(‘#no-vibration-api-warning’).style.display=”block”;
}

document.body.addEventListener(‘touchstart’, function() {
navigator.vibrate(100000);
});
document.body.addEventListener(‘touchend’, function() {
navigator.vibrate(0);
});

.post {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}

I like “let”

The let statement in JavaScript is a new way to declare a variable. It has block scope rather than function scope, which avoids problems that the function scope of var has. I heard Rick Waldron of TC39 say that function scope is basically a bug, so the introduction of let is basically a bug fix. 🙂

The const statement is similar to let, but also creates an “immutable binding.” That means the variable can’t be reassigned, and increment and decrement operators can’t be applied to the variable. const x = 3; x = 5; throws a TypeError exception, and so does const x = 3; x++;.

Const is not an immutable variable though, contrary to its semantics. const x = [3]; x.push(4); is error-free code, and results in x = [3,4].

I like and use the let statement. I don’t use const because the effort to keep its utility in my head outweighs its functional benefits while I’m writing code.

Choosing keyboard shortcuts for websites

Keyboard shortcuts give users fast methods to interact with an application. Native apps like Microsoft Word have shortcuts for nearly every editor command. This lets the user focus on authoring text rather than shifting their focus to navigating an involved File menu.

If the web is the application platform of the future, websites should also offer keyboard shortcuts for efficiency. However, you can’t pick just any shortcuts.

For example, a few weeks ago a bug was reported in ProseMirror, an in-browser text editor. Normally when a Mac user is editing text, pressing Option+Right moves the cursor right by one word. Pressing this shortcut in ProseMirror was not doing this, because Option+Right was internally bound to custom, two-step shortcuts. For example, pressing Option+Right then * in ProseMirror would wrap the text selection in a bullet list. Oh crap!

This bug has been fixed 🎉 but gives you a feel for the rocky terrain of keyboard shortcuts on the web.

Use familiar shortcuts

Google, Twitter and Facebook provide some common shortcuts. It’s likely your users will try these shortcuts on your site too.

If your website is a list of items (like emails in GMail or tweets in Twitter), pressing Up and Down arrow may navigate the user’s focus through the list. The browser default of scrolling up and down the screen is ignored, replaced by a behavior similar to the default in spirit but with more awareness of user context. The keys J and K often navigate up and down as well, which is a shortcut borrowed from the Vim text editor.

The Enter key may expand the view of a selected item (like opening an email).

The / key (forward slash) may focus the user’s text cursor in the site search (Also from Vim). Update: Eevee told me the / key opens Find in Page in Firefox, so keep that in mind while deciding whether to use this shortcut.

Make Shortcuts Discoverable

If your website offers keyboard shortcuts, your users will want to know what they are. Provide a link somewhere in your application to see a list of them, like under a menu. Users should not have to try key combinations to find shortcuts like a game of bobbing for apples. Shortcuts should be discoverable.

Twitter.com’s keyboard shortcut help modal

Pressing the ? key (question mark) is a common shortcut to bring up a list of available shortcuts.

Keep in mind that screen readers used by those with impaired vision override almost every single key shortcut. If a shortcut is critical to navigate your website consider placing them under modifier keys.

Using modifier keys

You may want to create multi-key shortcuts that include modifier keys (e.g. the Control, Command or Alt key).

If your website includes text input fields, you may want shortcuts on modifier key combinations so can trigger a shortcut while focused in an input field. If your website has a save command, you may want the familiar shortcut Command+S/Control+S to trigger this save command, rather than the browser default of saving the HTML of the current webpage to your computer.

A user’s operating system and web browser have built-in shortcuts which are bound to various modifier and key combinations. Here is a list of operating system and browser keyboard shortcuts. Are your OS/browser shortcuts not listed? Let me know and I’ll give you edit access.

With this list you can make informed decisions about what keyboard shortcuts to choose.

Most operating system behaviors cannot be prevented. e.g. Pressing Command+Tab on a Mac to switch between apps, and can’t be disabled.

Browsers also limit what shortcuts can be disabled. Command+1 in Mac Chrome switches the user to the first tab. This can be overridden, but not in Safari. See what shortcuts can be disabled in your browser in this demo, which tries to prevent the default behavior when any key is pressede.

Respect user intent

It is up to you to decide what shortcuts to offer users, and whether to override browser shortcuts.

Lea Verou makes an interesting case for overriding browser defaults. Her argument is that if your websites has tabs, overriding the browser shortcuts for switching between tabs is useful, and avoids hard-to-remember shortcuts like Control+Alt+1. She says,

the browser environment is merely a host, like your OS. The focus is the web app. When you’re working in a web app and you press a keyboard shortcut, chances are you’re looking to interact with that app, not with the browser Chrome.

These choices are up to you, but they are user experience questions which I don’t have answers for. Make informed decisions and consider what the user intends to do when they press a shortcut, and how your application reacts to it.

There are some shortcuts that should just work. Take the ProseMirror bug I mentioned before. When a Mac user is entering text, pressing Option+Right moves their text cursor right by one word. I’d expect this to work when I’m typing into a text field on a website, so a shortcut shouldn’t override it while I’m typing.

Expect edge-cases in international contexts

Operating systems around the world have made hard choices in the last 30 years to make the QWERTY keyboard work across different languages. This can lead to unexpected behavior, for example Polish users could not enter the Ś character into Medium’s editor, and saw their document getting saved instead. Medium fixed this bug 🎉 and if you get a bug like this, you should respect user intent too!

Now close this tab in your browser (Command+W/Control+W) and go add shortcuts to your website!