Jack Tarantino

Frameworkless JavaScript Part 3: One-Way Data Binding

Jack Tarantino — Mon, 26 Feb 2018 00:43:11 GMT

This article is one in a series about writing client-focused JavaScript without the help of libraries and frameworks. It's meant to help developers remember that they can write good code on their own using nothing but native APIs and methods. For more, check out the original article on writing small JavaScript components without frameworks and the previous article on templates and rendering. This article is intended to be a deep-dive into data-binding, how it works, and how you can do it without frameworks like Angular, React, or Ember. It is strongly recommended that you read the previous article before this one.

1-way data-binding

In this article we're looking at 1-way data-binding. That is to say "a method of putting data into the DOM which updates the DOM with new data whenever that data changes". This is the major selling point of the React framework but with a little work you can set up your own data binding in much less code. This is particularly useful when you have an application that sees routine changes to data like a simple game or a stock ticker or a twitter feed; Things that have data that needs to be pushed to the user but no user feedback is required. In this case we need an object with some data in it:

let data_blob = {  
  movie: 'Iron Man',
  quote: 'They say that the best weapon is the one you never have to fire.'
}

A Proxy:

const quote_data = new Proxy(data_blob, {  
  set: (target, property, value) => {
    target[property] = value
    console.log('updated!')
  }  
})

And a poor DOM node to be our guinea pig:

<p class="js-bound-quote">My favorite {{ movie }} quote is "{{ quote }}".</p>

In this case, we need the data_blob to serve as a storage unit for the proxy. Proxies in ES6 are just a really convenient way to trigger callbacks when certain actions are taken on an object. Here, we're using the proxy to trigger a callback every time somebody changes a value in the data blob. We don't have a way to update the text in the DOM node yet though so let's set that up:

const quote_node = document.querySelector('.js-bound-quote')

quote_node.template = quote_node.innerHTML  
quote_node.render = function render (data) {  
  this.innerHTML = this.template.replace(/\{\{\s?(\w+)\s?\}\}/g, (match, variable) => {
    return data[variable] || ''
  })
}

This gives us a quick and dirty way to update the node's inner HTML with some arbitrary data. The only thing we need to do to connect our new script with the proxy is to substitute the console.log call with quote_node.render(data_blob):

const quote_data = new Proxy(data_blob, {  
  set: (target, property, value) => {
    target[property] = value
    quote_node.render(data_blob)
  }  
})

With all this set up, we can add a quick script to prove that our DOM node is, in fact, updated every time we change the data blob. The exact same way that we want things to happen with a framework but with no external dependencies and WAY less code.

const quotes = [  
  "What is the point of owning a race car if you can't drive it?",
  "Give me a scotch, I'm starving.",
  "I'm a huge fan of the way you lose control and turn into an enourmous green rage monster.",
  "I already told you, I don't want to join your super secret boy band.",
  "You know, it's times like these when I realize what a superhero I am."
]

window.setInterval(() => {  
  const quote_number = Math.floor(Math.random() * quotes.length)
  quote_data.quote = quotes[quote_number]
}, 2000)

This adds a script to change to a random quote every two seconds. Check out the working example below:

See the Pen A simple 1-way data binding in ES6 by jacopotarantino (@jacopotarantino) on CodePen.

This is a little sloppy though. It really only works for one node, one time. Let's clean things up a bit and add constructors for both the nodes and Proxies. Then the functionality is reusable and we can test it a little more easily. A node class might be as simple as:

class BoundNode {  
  constructor (node) {
    this.template = node.innerHTML
    this.node = node
  }

  update (data) {
    let temp_template = this.template.slice(0)
    this.node.innerHTML = temp_template.replace(/\{\{\s?(\w+)\s?\}\}/g, (match, variable) => {
    return data[variable] || ''
    })
  }
}

This creates instances that just have an update method that switches up the node HTML similar to the render method above. Our models are all just Proxy instances but let's create a class for them just to keep the syntax a little more consistent:

class BoundModel {  
  constructor (handlers) {
    const callbacks = []
    const data = {
      add_callback: function add_callback (fn) {
        callbacks.push(fn)
      }
    }

    const proxy = new Proxy(data, {
      set: function (target, property, value) {
        target[property] = value
        callbacks.forEach((callback) => callback())
        return true
      }
    })

    return proxy 
  }
}

There it is. A class that returns a Proxy instance with the callbacks and set trap laid out already. The add_callback method is a bit of sugar to keep the callbacks neatly hidden away and treat our models a little more object-oriented. Make sure to return true in the set handler. This tells the proxy that the assignment succeeded. Things will get a little weird if you don't return a value from that handler. Check out the fully-working example with tests below:

See the Pen A simple 1-way data binding in ES6 with tests by jacopotarantino (@jacopotarantino) on CodePen.

Building a shrimp tank

Jack Tarantino — Sun, 28 Jan 2018 19:34:06 GMT

This past summer I managed to fit in a TON of fun experiments. One of them was a butterfly kit. I accidentally kept the hatched butterflies for a little bit too long and one day I suddenly had a cage full of hundreds of butterfly eggs. I couldn't possibly take care of all of them so I bought a bunch more food and a few more cages and when they were nice and ready I distributed the extra caterpillars to some friends and coworkers. One of those coworkers has a sweet young child and asked what they could do next; what's the next cool nature project they could show their kid? I've been working on a shrimp tank for the last several months and I recommended that. Of course, a good coworker wouldn't just recommend a project but actually provide some documentation so I wrote up some notes for them. And I got a little carried away... Eventually I decided to just turn my notes into a blog post. So here I present you what I've learned so far about building a shrimp (and snail) tank:

General Notes

I think a good pet project would be a shrimp tank. I'm working on one now and it's fun and really cute.
- You can also put snails in with them. Watching them interact is pretty funny and the snails are zero-maintenance.
Before you get started with any of this, it's critical that you do research and learn about aquarium maintenance and the nitrogen cycle. This is one of the most if not the most important thing to understand about keeping an aquarium. Check out this video from the people who made my tank to get a basic understanding of what it is but do some more research to fully understand how it can impact your tank and the critters in it. Shrimp and snails are fairly hardy so you shouldn't be too worried but if eventually you want to graduate to fish, those are a lot more sensitive.
Speaking of the nitrogen cycle, the whole thing is supported by bacteria. These bacteria live all over your tank but most importantly in the filter media. A lot of sources, especially your tank manufacturer and filter manufacturer will encourage you to change out the whole thing very often. Sometimes as often as every week. Don't give in to the marketing nonsense. Your tank needs an established bacterial colony and you can't keep it established if you scrap the filter media every week. Carbon filters are mostly good for water color and any odors that might come up. They don't help the tank remotely as much as the bacterial media (usually called Biomax). That should actually rarely be changed as it supports the bacterial colony in a very important way. You can rinse it with tank water to clean off any gunk but I'd strongly recommend against changing out the Biomax wholesale. Most sources I've encountered suggest only changing the bacterial media if there's a major problem with the tank. And only changing the sponge if it's damaged beyond use. You can change the carbon filter more often (maybe once a month) but never change all the filter media at the same time or you risk killing the whole tank.
You'll want a 5-10 gallon tank. I strongly recommend getting one with a built-in pump and filter. You'll probably have to get a separate heater and airstone though because tanks rarely come with those built in. I also got an electronic for mine just because it was cute and I'm not 100% sure I trust the heater haha.
I've bought from a few different sellers so far and a lot of them are sketchy or (as with one that I had to deal with this week) shipped me a bunch of dead plants. One seller is really really good: AquaticArts. It's this mom&pop shop in the midwest. They take good care of their products and they always ship more than you ordered just in case there's any problems. A good friend and excellent fishkeeper recommends Fish Direct as a super premium seller. I haven't had the opportunity to buy from them yet but I'm looking forward to it.
For the critters, go with dwarf shrimp (neocaridina davidi), and mystery snails (pomacea bridgesii). There are definitely other species you can play with but these are the cheapest and most readily available. Plus they come in all sorts of fun colors. It's important to note that you shouldn't mix colors. So if you want to get blue shrimp only get blue shrimp. This is for a couple reasons. First, if your shrimp breed in a couple generations they will all go back to their natural colors (brown. not much color at all). Second, the different colors are caused by selective breeding. Selective breeding will get the color right but can have lots of other side effects on their aggression, size, appetites and everything else. If you have lots of different colors one will eventually outcompete the rest and they will either get beat up or starve to death.
As a longer-term project and if you're interested in learning/teaching about genetics and how cool selective breeding can be, try breeding them for a particular color. Check out this cart that shows the variations of neocaridina that you can find today!
For plants I prefer to get real ones. You can get all sorts of pretty plastic ones but real plants will help filter the water so you don't have to clean as much.
- I would cater the decorations to the shrimp, and more specifically, viewing the shrimp. The snails will be fine with just about anything and they'll crawl all over.
- The shrimp really really like java moss. It's their absolute favorite place to hide. I'd recommend getting a little bit for them just in case. Something advertised as ~25 sqare inches will take up a third of a 5 gallon tank so no need to get a lot.
- There's a kind of seaweed called java fern that is really good for tanks like these. It's a good hiding spot for the shrimp and it's good for us too because they're easier to see there.
- Marimo balls are cute. I got big ones but I'd actually recommend getting little ones, they're more fun.
- Cholla wood is another great one for the shrimp. They do hide out of sight but they really enjoy the wood and it's a great decoration.
- You'll want to get a substrate. I recommend something sand-y and light in color so your decorations show up better and the sand is easier to clean.
For the tank water, just your tap is fine. No need to get anything fancy. But you'll need to treat the tap water with Seachem Prime.
- And just to make sure your water is in the right condition, pick up an API brand master test kit. And some test strips just for quick tests (the master test kit is allegedly the best in the industry but it also take a little bit of time. the strips are good for spot checks to make sure nothing crazy has changed).
Feeding: these animals are scavengers naturally so it's good to mix up their food. I feed mine (and my fish) a variety of fish flakes, freeze-dried bloodworms, freeze-dried brine shrimp, floating betta pellets (fish only), invertebrate pellets, and some random stuff left over from the sea monkeys and triops (other experiments I did this summer. All invertebrate foods that I've encountered are algae-based so they're pretty similar). I also feed them live brine shrimp by tossing some eggs in there now and again. That's very not necessary but the critters do like to do real hunting now and again.
- I found it very hard to find good information online about exactly how much to feed them. Most guides say "as much as they'll eat in a few minutes" or something like that. My fish get fed twice a day but the snails and shrimp only need it once a day. A pinch of fish flakes or like one invert pellet per 2 critters is enough for them in my experience. It's important to remember that invertebrates need very little in the way of food. especially if you have an established tank with some vegetation in it. DO NOT feed them too much or you'll wind up causing an ammonia spike in the water and they will all die.
You'll probably also want a variety of other supplies like a fish net, algae scrubber, cleaning pump, a second glass enclosure (just in case you need to take them out or you're adding new stock or something), clean glass cup or measuing cup for moving water between places, shoulder-length gloves for when you have to reach in.

Shopping List:

The tank:

Fluval 5 Gallon http://amzn.to/2GmdTD5
Heater http://amzn.to/2rJpcSG
Thermometer http://amzn.to/2FjmN2T
Air stone http://amzn.to/2DB3ilR
Filter media http://amzn.to/2EiTNsZ and http://amzn.to/2GnJjc8 (the tank comes with this but you'll need backups sooner than you think. Especially if you add a fish)

The habitat:

Substrate - So I have http://amzn.to/2DQb26T (volcanic rock substrate) but I would recommend http://amzn.to/2DHDvbC (white-ish sand. it's prettier, lower maintenance and ph-neutral)
Cholla wood http://amzn.to/2Foqh3Z (note that both woods need to be soaked in hot water repeatedly before they're safe to put in the tank)
Mopani redwood http://amzn.to/2DQ8dmj (this one in particular I had to soak in fresh hot water with replacements 2-3 times a day for a week)
Betta carpet http://amzn.to/2Gou6rA
Java fern http://amzn.to/2Flz1YS (careful about ordering these while it's still cold out. i got one in the summer that was perfect and one a week ago that was dead..)
Java moss http://amzn.to/2DQIhqD
Marimo balls http://amzn.to/2DRBygc
Mini moss carpet http://amzn.to/2GmexR1
Floating rocks http://amzn.to/2DTfuSm
Cuttle bone http://amzn.to/2DUJmOn (needs to be weighted to sink. This is strictly decorative. Your tap water should have more than enough calcium for the invertebrates. Also be careful with cuttlebones because they can be VERY messy. I had a kitchen just coated in white dust for a while)

The water/chemicals:

Tap water (keep in mind that you'll need to treat the water with Seachem Prime before adding it to the tank)
Seachem Prime http://amzn.to/2FkkZ9G (recommended to me by an expert as "the absolute only thing you actually need to treat your water")
Stress coat + http://amzn.to/2DPOh2V (strictly for the aloe, not the water treatment)
Quick Start http://amzn.to/2BwnJyK (my expert says that this is totally unnecessary and that the bacteria is most likely all dead buuuut... just in case.)
Fluval waste control http://amzn.to/2DRVwr3
Master test kit http://amzn.to/2Goh7WK
Ammonia test strips http://amzn.to/2Egmre9
5in1 test strips http://amzn.to/2DFwRTg

The animals:

dwarf shrimp(neocaridina davidi) http://amzn.to/2EgjU3D (you should get a bunch of each of these. i'd say around a dozen of each or just like 24 shrimp if you skip the snails)
mystery snails(pomacea bridgesii) http://amzn.to/2BwTZli (if you go with a different item or what have you, make sure to buy from Aquatic Arts. They've been really good to me. If you buy direct from their website, they have a coupon in every order: AQUA5)

The food:

Fish flakes http://amzn.to/2DEcy8Y (pretty much any flakes will do but i prefer to get the "tropical" ones since these are tropical animals. I'm not sure if they're made of anything different though)
Bloodworms http://amzn.to/2DE30Lg
Dried brine shrimp http://amzn.to/2GjUBya (they come in the form of cubes for some reason. You'll want to break off a little corner)
Live brine shrimp http://amzn.to/2BwSWBS (this one vial will last forever. A tiny sprinkle of them, like 30 eggs, will hatch about 20 shrimp. They definitely won't live too long but trust me don't spill the vial in or you'll have a disaster on your hands)
Invert pellets http://amzn.to/2ngSYsk

You can also throw in blanched vegetables or stuff that's not quite good anymore. I put the already-dead plant in anyway hoping that it might come back and instead the snails ate the whole thing down to the stems.

The accessories:

Measuring cups http://amzn.to/2FmaKBR
Algae scrubber - Mine kinda sucks. It's a soft sponge and doesn't get all the algae at all. I'm ordering this razor-based one next: http://amzn.to/2EdWZFY (Update: the razor is WAY better. Strongly recommend)
Pump http://amzn.to/2DTvGDm (definitely get one with a priming bulb. doing this manually is exhausting)
Fish net http://amzn.to/2GmJqVq
Gloves http://amzn.to/2DTS53h

Disclaimer

Please keep in mind that this is an experiment for me and I'm still learning. I'm no expert and even though I've claimed to talk to one I'm learning something new every time I do talk to them. If you find something that's just wrong with this post or if you'd like to add something please send me a note and I'll be sure to update the post accordingly. Please also make sure to research every item that you buy and make sure that you're ready to start a project that involves live animals. It takes a lot of effort and you can't just take a week off because you're bored. This is a very long term project.

Web development with nothing but a phone and a keyboard

Jack Tarantino — Thu, 14 Sep 2017 20:17:11 GMT

Recently I started a gig where I was handed a laptop and told I should take it home with me at night. Now this isn't the worst thing ever but I was already carrying one laptop with me (my personal/work laptop as opposed to the one given to me by the client). So now my backpack has 2 full-size MacBook pros in it and they're not too light when you start stacking them up. Throw in a sweater for the freezing office, a charger for the laptops and the occasional book/snack/other item and suddenly my backpack is crazy heavy! I felt like I was in high school lugging around all those textbooks again. So I decided to do something about it. I was carrying this stuff around like somebody who's not an engineer!

The first thing I decided to do was take care of the client laptop. It took a while but I finally got a locker so I don't have to carry that one home with me. That's a big relief. No more responsibility, no more risk, and no more back pain. But while I was at it, there's a bunch of other stuff I could get rid of. I started emptying out my bag. Old credit cards, gum, laptop accessories, they can all go. But that left the biggest thing; How do I get rid of my personal laptop? I use it for so much. I use it for taking notes, and chatting, and doing some dev work and research on the side... Hard to replace all that functionality and power at my fingertips.. Or is it?

I think I was over-engineering my life. My phone actually has way more power than my first couple desktop computers. Surely it can handle some text editing..

I started putting together a list of what I use my laptop for. That turned out to be a pretty freakin' long list and I had to cut it short. But then I started listing just the things I use it for while at work. That turned out to be a much smaller list! Despite my best efforts, I don't really do that much real programming on my personal computer at work. Nor do I do video editing, gaming, run docker swarms, sed, awk, grep, or simulate various hardware environments. Sure, I do all those things once in a while but not terribly often and things like research I can generally do on the client's machine. Don't get me wrong, I do these things all the time at home or at my company's office but almost never while at the client. As it turns out, most of what I do on my personal machine at work is listen to music, chat with coworkers over Slack, and take notes in Evernote. When you break down my spread of activities over time and how often I do each of them, it became pretty apparent that I don't spend enough time on my personal machine to justify hauling it all over town hurting my back and risking theft.

It was like Occam's razor for my backpack. It turns out the simplest solution was just to not carry all that shit around with me.

Replacing the lost functionality is pretty easy for common operations. I already had Slack, Chrome, Evernote, and various chat and music applications installed. That covered about 80% of what I use the machine for. Those activities presented a unique challenge though; While I can easily take notes on my phone, typing them out on the tiny screen is really really hard! I needed a keyboard. A real keyboard where I could type at full speed, tab between chats, and just generally not lose any of my productivity to the tiny screen. I opted on a whim to purchase Apple's Magic Keyboard since I knew it would be fully compatible with my iPhone 7+ and I could use it with other computers in the future if I so choose. It also helped that there's an Apple Store in the same building as me making popping downstairs to buy one all-too-convenient.

Getting the keyboard set up was a breeze. It's a pretty standard Bluetooth device and it's decently responsive. I had it connected to my phone in a minute. The thing that I didn't expect is that after getting things set up I tried immediately to cmd+tab my way into an application like I had seen online. Not so fast! As it turns out, you're not really expected to try and use a phone as a powerful device; You're only expected to use the iPad that way. So a lot of the fancy keyboard shortcuts available to iPad users are not available to the iPhone including tabbing between applications and double-tapping the home button. What you can do, though is hit cmd+space to bring up spotlight search. It's not quite as efficient but I can switch apps without taking my hands of the keyboard which is all I really wanted. Another useful trick is that you can power on your phone as if you had hit the home button by tapping any key on the keyboard. Tap the key again to bring up the passcode screen and enter your password on the keyboard to unlock. That way you don't even have to move away from the keyboard to unlock the phone!

I wanted to replace all the power and developer tools that my laptop offered me.

This turned out to be way harder. I couldn't just pair my keyboard to an "iTerm2 Phone Edition". IOS is a pretty locked-down operating system so you're going to have a hard time doing things like installing node and running a web server. Instead, I decided to go the way of the millennial and offload my needs to the cloud. I'm already keeping documents, videos, photos, social media, and all sorts of other stuff in the cloud, why not my local development environment too? There's a couple apps you can use to do some local development on iOS but they're all very limited in one way or another. When it comes to development, I'm willing to deal with a small screen and a requirement for a network connection but limiting what I can do over that connection is not acceptable. So cloud it is. I chose to use AWS since I already have an account there and they provide far more services and functionality than I need. I spun up an Ubuntu box in AWS and enabled an SSH connection from just my current IP address. The last thing I needed was a way to connect to it. Enter Termius. It's an application that provides a simple way to SSH or Telnet into any remote machine and it runs on iOS. It also supports logging in with an SSL keypair instead of a password which is how AWS expects you to work. After a couple minutes of setup, I was in!

You can see my first login in the screenshot above. From here I can install node, run and edit scripts and hack 'til my heart's content.

You can ditch your laptop for your phone too. All you need is an external keyboard.

I'm doing it right now! I wrote this blog post in Evernote on my phone in about half an hour. I didn't have any problems typing or formatting. Now, to be fair, I did still have to go back to my laptop to publish it because the scripts that generate the site live there but now that I've got everything else set up I'm going to be moving my blog scripts to AWS as well. I hope this inspires somebody else to ditch the brick and get into super light-weight development.

Calendar Tetris is an antipattern

Jack Tarantino — Mon, 12 Jun 2017 17:55:10 GMT

It's time that we took back our work day from our calendars and Calendar Tetris is the first thing that has got to go. Calendars are a tool and like every tool they should be used appropriately.

What is "Calendar Tetris"?

Does your calendar look like a Jackson Pollack painting? Maybe more like a Piet Mondrian? Then you're probably suffering from Calendar Tetris. Calendar Tetris is a problem where you constantly have to shuffle around items on your calendar because there's so many of them they can't all fit. When it's particularly bad, you rarely have an open spot on your calendar and you're frequently double-booked. At it's worst, I've seen a coworker triple-booked at minimum every hour of the workday for an entire week.

Why is Calendar Tetris a bad thing?

Brendan Nelson argues that the constant scheduling of meetings is taking over our lunch hour! And I agree. I feel guilt and just a tinge of shame when I decide to take my full lunch hour (What Nelson calls "white collar truancy"). And nobody has ever told me I'm explicitly not allowed to take it. I'm just used to running out to get whatever's cheap, quick, and delicious and going back to my desk to get some reading done. But the disappearing sacred ritual of a lunch "hour" isn't the only thing that Calendar Tetris is affecting.

Constant meetings ruin productivity. And everybody knows it. Ray Williams points out in Psychology Today that managers think that 30% of the meetings that they're in are a waste of time. And that's just the meetings that they know are wasteful! What about the ones that could have been avoided altogether? In another article, Dr. Sally Augustin points out that even small interruptions can cost you. Interruptions of as little as 3 seconds can double the number of cognitive errors you make afterwards and longer interruptions flush your working memory leaving you 15-20 minutes behind in your work.

How does one wind up playing Calendar Tetris?

A lot of people think that just because they're senior or because they're a manager that they necessarily have to be in meetings all day. I once witnessed a situation where an engineer got a promotion that added the word "Lead" to his title. That engineer suddenly got added to another 6 meetings a week despite having basically the same job description and the exact same responsibilities. You don't need to go to all those meetings though! Take, for example, the CEO of a busy and valuable company. You would assume that they spend all day in meetings in board rooms and drawing on whiteboards but Jason Fried argues that he tries to keep his calendar as open as possible in order to get real work done.

In some environments I've worked in people feel they need a lot more structure in the workplace. Those teams tend to call everything a meeting even if it's just a quick conversation. Most often I see Calendar Tetris being played by people who have too much on their plate. They have too many reports, too many responsibilities, or just too much to focus on. In that case, the best solution is to trim down your responsibilities and make an effort to focus on just one problem or project until you finish it.

A lot of the trouble with an extreme volume of meetings comes from not using the tools around you correctly. For example, do you need a meeting for an announcement or could you just send a quick email? Do you really need to put time on Sully's calendar or could you just walk over to her desk and ask "Hey, sorry to interrupt, do you remember what we decided to do about all those UFOs?"? And yes, you should always apologize for interrupting people. Meetings are huge interruptions and drag people and their ability to focus far away from real work.

How to beat the game

Fix your current calendar by removing meetings

What's on your calendar? Does it need to be a formal meeting? The answer for most meetings is a solid "No". For the most part you could send out a quick email, slack message, or just stop by somebody's desk to get them to answer a couple questions. Does somebody need to sign off on the decision? Stop by their desk next! You just saved the whole team half an hour of not being sure why they're in a room with everyone. Anything that doesn't need to be a formal meeting needs to come off your calendar right away. Put things that you need to talk about into a todo list and get them done with relevant people when you get to it.

Does the meeting need to be that long? Most meetings go on far longer than they should. A good way to make sure your meetings are as short and productive as possible is to set an agenda (and stick to it!). If a coworker sends you a meeting invite with no clear agenda such as one with just a title like "Planning session" or "Let's chat", ask them to add an agenda to the meeting invite. In my experience, if you ask people to do this they tend to realize that they need way less of your time than they thought. More than once I've had somebody cancel a meeting because they realized they didn't need it.

Speaking of agendas, agendas are a way of preparing for meetings or whatever's on your calendar. Everyone should always be prepared for whatever the meeting is. If you're going to an IPM, everyone in the room should have scanned the stories you're reviewing before you sit down. If you're having a performance review, everybody involved should have already discussed most of the issues at hand before the official review. If everybody invited isn't prepared then you either need to limit the meeting to the people that did prepare or move the meeting to another time, preferably never.

Do you personally really need to be present for that meeting? The answer is frequently "no". Relevant parties are usually just the people that need to make a decision. If somebody is participating just because they're a manager for people in the meeting or because they want to know about the outcome of the meeting, they're not actually contributing. Managers and interested parties who don't need to be part of the decision making process can be filled in later via email or in person. Is your whole team in the meeting for some reason even though Mulder and Skinner are the only people who are going to talk or listen? Everybody else can go then. There's no reason to involve Product Managers outside of your team or junior developers in a conversation about a bug or planning next quarter. And have you guessed the great part about eliminating unnecessary people from the meeting? Once the attendance list is down to just the relevant decision makers, you can usually cancel the meeting and turn it into a quick conversation or brainstorming session over coffee instead of wasting people's time and the company's money.

Safeguard your calendar by stopping meetings before they start

Does that meeting need to be recurring? I can't count the number of times I've seen people walk into a room, announce "we actually have nothing to talk about this week" and walk out again. That was a huge interruption for nothing. Or when I see that people have skipped the meeting smartly but they still have the room reserved which is confusing for people looking for a quiet place to talk. Any time somebody invites you to a recurring meeting, you should be asking them if it's really necessary to plan a second meeting when you haven't even had the first. How do they know you'll need to talk about a particular subject again at exactly that time in 2 weeks? Recurring meetings are generally a good way to waste people's time. The only recurring meetings I think people should have are a morning standup and a weekly/semi-weekly retrospective. Everything else can go.

If you have a lot of recurring meetings or just meetings scheduled far ahead in the future, take the opportunity to clean out your calendar once in a while. You can think of it like clearing the candy bar wrappers and coffee mugs off of your desk once a month. Cleaning your calendar is just as good of a use of your time as cleaning anything else you look at so often. And when you can trim out a meeting here, a meeting there, and a couple recurring meetings that you never go to, suddenly you have a lot more free time on your calendar! Suddenly you have time to get real work done instead of go to meetings!

How are you addressing takeaways from your meetings? A well-organized meeting should result in at least one decision or action item. That action item should turn into a story in your board or somebody doing some work as soon as possible. The takeaway from a meeting should almost never be just another meeting. If your meetings are just creating more meetings, what did you actually accomplish in the first one?

The worst part about going to meetings is that they interrupt what could otherwise be productive work time and it takes a long time to get back in the groove of what you were doing. A very effective way to mitigate that loss is to group your meetings together. This reduces the amount of time that you waste before and after the meetings. Try to group all your meetings into the morning, before you go for lunch. Or block off certain days as pure work days. Say you only take meetings on Monday, Wednesday, and Friday so that you have 2 days a week that can't be interrupted. Imagine how much you can get done with all that meeting-free time!

When to pair program

Jack Tarantino — Tue, 14 Mar 2017 20:59:32 GMT

This post is another one brought to you by the good people at InRhythm. If you're an engineer that likes writing and building strong, happy culture focused on learning and growth you should apply! I like working with smart, passionate people :).

Lots of companies embrace pair programming as a way to increase programmer productivity (loosely defined here as delivering "value" which can have many forms) but is it really that great? I wonder why we should pair program and when is the right time to embrace pairing as a strategy. Pair programming, as I know it, came into popular culture as a facet of XP(extreme programming), a development framework that enforces certain practices that it considers to improve software quality and responsiveness. The idea is a new incarnation of the old adage "two minds are better than one". Possibly originating from the christian bible:

Two are better than one; because they have a good reward for their labour.

The quote is actually about friendship but if we take it out of context it can mean whatever we want it to. Anyway, the idea is right; Two people have different histories, cultures, and experiences and for those reasons they can think about things in different ways. When two people work on a problem together they almost always come out with a better solution that if one of them worked on it alone. So how does this relate to programming specifically?

The Good

Pair programming does reduce bugs

The primary drive for pair programming is to increase quality and decrease bugs and when done well, pair programming does that spectacularly. One study found that pairing reduced bugs in production by 15%!

Pairing does increase code quality

A lot of the benefits of pair programming are not actually technical, they're social. Pair programming is in some ways like having a boss breathing down your neck but one that you're comfortable who doesn't make you nervous at all. When you're working directly with a peer, you feel encouraged to do your best. Not only that, but you feel compelled to do your coding the right way and not let through those little bits of technical debt that you tell yourself you'll "fix later". These little bits of technical debt that usually slip through are a primary source of unmaintainable code. When you forget about technical debt, it's no longer debt; It's just bad code. When pairing we tend to do things just a little bit cleaner. We make algorithms just a little bit easier to read. We name variables just a little bit more sensibly. We actually write our unit tests to 100% coverage... With two people looking at the code, the quality is almost always higher than it would be with just one of them.

The Gotchas

Pair programming does not eliminate bugs.

Inasmuch as we'd like to pretend that pairing will just eliminate all bugs, that's not true. Bugs still happen. There are generally fewer of them but unless you have perfect programmers you're not going to have perfect code.

Pair programming doesn't fix bad product direction.

This is my number one pet peev right now. Good projects need very strong product direction. And to be clear, the responsibility for this direction is on everyone, not just "product people". It all has to start with people asking questions and making informed decisions about what work is going to be done. And then the team needs to thoroughly discuss the work in order to break it down as much as possible and understand the scope of work. If this isn't done properly then deadlines will be missed, everyone will be stressed, work that you thought would take minutes winds up taking days... Pair programming can't fix that. Nothing is more important than good product direction.

Pair programming costs a lot.

Like, a lot a lot. One study found that pairing increases the cost of software by 100%. While that seems like a pretty predictable number (if you put one more programmer onto a task you effectively double the cost), it's highly variable. If pairing is used effectively, I would say it strictly costs the amount of time put in, minus the value added. It could be a single-digit percentage. On the other hand, if pairing is done poorly, you're paying about 300% more. That's 100% for putting another salaried employee on the same project, 100% for that that employee not adding any value, and 100% for the work that they could have been doing if they weren't "pairing". So make sure that you're pair programming for the right reasons and doing it effectively or you could be paying up to 4 times the price for the same old software.

You have to do pair programming right for it to mean anything.

Pair programming is a tool meant to help make a difficult problem more digestible. It needs to be used correctly just like any tool. Pair programming done right generally involves one person writing code and the other person directing the work. Directing in this case means providing feedback about best practices and constructive criticism. It also means researching those best practices when you don't know them off the top of your head and taking the time to think deeply about possible edge cases and hangups relevant to the work at hand. Pairs should communicate constantly and make sure to share all relevant information about their work. And pairs should switch duties as often as they're comfortable. It's taxing to think about problems in both a creative and technical way so it's better to distribute that work. That's one big reason that pair programming is such an effective tool.

Pair programming doesn't make each individual programmer suddenly more senior.

When people work on a problem together, the intellectual benefits are additive, not exponential. This is an important distinction because we need to remember that adding another programmer to a problem can only make them about twice as effective. Adding a third programmer can only possibly make the group three times more effective and at that point you should already be seeing diminishing returns. When you have two junior programmers and you stick them on a problem together, they don't suddenly become mid-level programmers. They don't suddenly acquire more innate knowledge of systems and experience using tricky ways to improve systems. Two juniors will still make junior mistakes, just together. Two mid-levels will still make mid-level mistakes, just together.Even worse is if you have bad programmers. From a recent chat:

Me: It doesn't fix anything if you just have 2 bad programmers at 1 computer.

Coworker: And if a pair isn't collaborating, it's not pairing. Taking control is not pairing and neither is one person checking facebook while the other codes.

It's important to remember this when considering whether pairing is the correct tool to engage at the moment.

So when are we supposed to pair program?

Pair program when there is a very difficult problem at hand.

If you can't reasonably break a big problem down into smaller parts then you have a very difficult problem on your hands. That's the kind of thing that should be attacked with multiple programmers. An 8 point story should generally never exist in your organization if you're doing normal web work. Features can almost always be broken down into "front-end" and "back-end" stories. Whole-page mockups can be broken down into component parts. Design and QA phases can also be separated out into their own stories. But a really tough problem is just a really tough problem. Trying to add a new feature to a language is a really tough problem. Trying to figure out how to reduce the latency on database calls is a really tough problem. Those problems that you need to think about both creatively and technically tend to be really tough ones and you should use pairing to address those.

Pair program when 2 programmers are at completely different skill levels.

Pair programming is a remarkably good way to teach more junior programmers. Getting to watch live while a more senior programmer talks about how and why they're doing something is invaluable experience. So is writing code while a more senior programmer coerces better practices on the fly. The frequently of those "aha moments" is very high in a situation like this. In my time as a programmer, pairing with somebody significantly more senior than me has been some of the most difficult and most rewarding work I've ever done.

Pair program when 2 programmers have completely different skill sets.

If you choose not to break down a story into easily divisible parts, having 2 programmers with different but complementary skill sets can be very rewarding for both the programmers and the codebase. Examples might be pairing together programmers who generally only work front-end or back-end to get an end-to-end feature out the door. Or you might have a Postgres expert pairing with a Scala expert to make your database calls more efficient. When these 2 people work together live, they absorb a lot of knowledge about each other's domain and in turn make sure that there's no aspect of the project that gets neglected.

Pair program when you're both new to a language or framework.

Sometimes you wind up in a situation where nobody is an expert. Even if you're working on a trivial feature you've just wandered into a very difficult problem (see above). This is an excellent situation in which to pair program. There are extra benefits to this as well. Not only do you get two programmers working through a difficult problem and contributing their individual skills to building a better product and helping each other learn, you also get redundancy in the skill growth of your programmers. This is important because the skills in your organization should never be concentrated in one person. If that person gets sick, goes on vacation, or takes another job, you have a big organizational problem on your hands. Having programmers pair on new languages and/or frameworks ensures that there are a minimum of two people who can work on this in the future.

But don't pair program if you don't have a good reason for it.

Pair programming is just a tool. A fact that I will continue to emphasize. You need to have a reason to use a tool. If you're working in an auto shop and you don't know who your next customer is going to be, you don't immediately start out saying "I'm going to need a monkey wrench and exactly 4 bolts for the next job." That would be silly. In the same way, you shouldn't say that you're definitely going to pair on a programming problem before you even know what it is.

Don't pair program just because you're in a shop that considers pairing the norm.

Every decision should be made pragmatically. Pair programming is a tool just like code reviews or docker containers. You should only use it when it's appropriate. Like another quote that's popular in development shops:

Use the right tool for the job (possibly popularized by this ad campaign)

You have to make conscious decisions to use this and any tool for the right reasons. If you're wondering if it's a good idea, it's probably not. If your shop enforces pair programming all the time, talk to your leader and ask them why you do that and if they think it's always appropriate.

Don't pair program so that you can catch up on your messages while the other person drives.

This is the absolute worst reason to pair program. It costs the company 4 times as much to produce the exact same code (Because they're paying 2 salaries for 1 task and getting nothing done on another task). This is a way of creating useless process that prevents you from getting stuff done. If you as a programmer need to take some time to yourself, try taking regular breaks or walk around the block. Consider the pomodoro technique as a way to break up your day and keep your energy high.

Don't pair program if you both already know what you're doing.

This is very similar to the previous tip. If the task at hand is some sort of rote change or something similar to a task both programmer have tackled before then there's nothing to be gained. Pair programming is about learning and communication, not just a "life hack" to get stuff done.

Don't pair program just because it's an 8 point story.

Whether your point system is one that estimates time or estimates complexity, throwing 2 programmers doesn't reduce that estimate. If you're estimating time (which you should be), that story should take into account the number of programmers that will work on it. So if it starts at an 8, it's going to be like a 13 if 2 programmers are working on it. You're much better off putting your effort into making that story less complex and breaking it into smaller stories. Investing in your product direction like that is a much smarter and less costly way of improving quality.

Frameworkless JavaScript Part 2: Templates and Rendering

Jack Tarantino — Sun, 08 Jan 2017 18:19:00 GMT

This article is one in a series about writing client-focused JavaScript without the help of libraries and frameworks. It's meant to help developers remember that they can write good code on their own using nothing but native APIs and methods. For more, check out the original article on writing small JavaScript components without frameworks. While that article was a bit more basic, this is intended to really dig into the topic of templates and data binding and how to implement these concepts without frameworks.

One big problem that developers rely on frameworks to solve is templating markup and the myriad methods of getting data into those templates. Here we explore a few ways to do common templating operations with nothing but vanilla JavaScript.

Templating and string interpolation

HTML templates can seem cumbersome and they come in a lot of forms, especially when working in the browser. You can retrieve an HTML template from a local variable, from a file on a remote server, as an aspect of an ajax request or via whatever kind of magic and mystery your favorite framework uses to abstract those templates away from the code you write. No matter which method you use to get the template data, however, in the end the template is just a string with markers in it that you use to do a bit of find-and-replacing. In a most primitive form, a template system is nothing more than a method that takes a template string and an options hash and sticks information from the options hash into the string. An example of this might be the render method as show below:

var insertable_markup = render('<h1>{{ the_title }}</h1>', {  
  the_title: 'hello, world!'
})
// insertable_markup is now '<h1>hello, world!</h1>'

The render method above could do a whole lot of things but in this case all we need it to do is interpolate some strings. And since the template system is nothing but arbitrary string replacement we can code up a method definition like the following:

function render (template, options) {  
  return template.replace(/\{\{\s?(\w+)\s?\}\}/g, (match, variable) => {
    return options[variable] || ''
  })
}

In this example we have a method that just does a global replace on a string. It matches for any word (\w) contained within a set of curly braces (\{\{) and some optional spaces(\s?). The second argument is a function which itself takes as arguments the entire match (which is largely useless here), and the subtext that was matched which should be the name of a property in our options hash. And so with a 3 line method we can do "HTML templating" in a very basic way that is infinitely faster than any more complex framework method and does everything that we usually need. You can see the full, tested code in the example below:

See the Pen A simple template rendering method in ES6 by jacopotarantino (@jacopotarantino) on CodePen.

While this is great for just putting data on a page, sometimes we need to bind data between an object/model and the DOM which is what we'll explore in the next article on JavaScript without frameworks: Data Binding.

Extra credit: nested properties in templates

Warning: This is an antipattern. The most reliable, maintainable, speedy, and reusable HTML templates do not allow access to nested properties in interpolated data. This is because nested properties necessarily bind the structure of the data that is passed to the template to the template itself making refactoring slower and less reliable. There's no need to do something like namespace properties in your templates because well-designed templates should never have access to more than one context. Well-designed components are also usually very small so they shouldn't have access to so many variables that they need to be namespaced. If you're passing data to your template which is not in a flat structure which is very likely (our data is rarely in a flat structure), make sure to restructure the data in a controller or view-model. For example in an "employee ID card" template we might have the following data available:

const myEmployee = {  
  id: 'asdfsafdasdfasdfa',
  name: {
    first: 'Bob',
    last: 'Builder'
  },
  role: 'Lead Engineer',
  photos: {
    primary: {
      url: 'foobar.com/img.jpg',
      description: 'A photo of Bob the Builder'
    }
  }
}

And a template that looks roughly like this:

<li data-id="{{ id }}">  
  <img src="{{ image_url }}" alt="{{ image_description }}">
  <p>
    <strong>{{ name }}</strong>
    <small>{{ title }}</small>
  </p>
</li>

In order to prepare this data, in our controller/view-model we might transform the data to be flattened as follows:

const template_data = {  
  id: myEmployee.id,
  image_url: myEmployee.photos.primary.url,
  image_description: myEmployee.photos.primary.description,
  name: `${myEmployee.name.first} ${myEmployee.name.last}`,
  title: myEmployee.role,
}

This way the data passed to the template is nice and simple so that the templating method doesn't have to do much work and is therefore very fast and testable. But what if we just can't flatten our data? What then? Well, we won't need to do the data transform in the controller. But we will need to make our render method a bit more complicated:

function render (template, options) {  
  return template.replace(/\{\{\s?([\w.]+)\s?\}\}/g, (match, variable) => {
    return variable.split('.').reduce((previous, current) => {
      return previous[current]
    }, options) || ''
  })
}

This time we alter the regex a little bit to support dot notation in our template variable names. The code [\w.]+ means "match any sequence of word characters or periods". Then instead of simply pulling values out of our options hash we use a bit of javascript magic to split the variable name into each of it's parts and reduce them which will return the last value in that sequence. This is a bit more complicated but allows us to write templates with nested properties like this one:

<li data-id="{{ id }}">  
  <img src="{{ photos.primary.url }}" alt="{{ photos.primary.description }}">
  <p>
    <strong>{{ name.first }} {{ name.last }}</strong>
    <small>{{ role }}</small>
  </p>
</li>

Check out the fully tested method and example below:

See the Pen A template rendering method in ES6 with nested-property support by jacopotarantino (@jacopotarantino) on CodePen.

Empire Node 2016

Jack Tarantino — Tue, 08 Nov 2016 22:57:34 GMT

Yesterday I had the good fortune to attend Empire Node at The National Museum of the American Indian, courtesy of InRhythm. A good time was had by all and we got to see some great talks! There was programmable music, smart ways to get into code style linting and, of course, robots. Following are my notes on the talks. They're definitely incomplete and probably inaccurate so send me a note if you spot something out of order.

Hosts

Headed up by Matt Walters - @mateodelnorte - NYCNode
Emcee: Florida - @floriidaaa - Casper

Matthew Conlin - @mathisonian - Computational Journalist with 538

Extending HyperTerm (now known as Hyper)

HyperTerm is built on js, react, redux and exposes a full plugin API and lifecycle hooks.
npm install hpm and then use hpm like npm to install HyperTerm extensions.
Plugins like power, hyperambient.
Intercept redux actions to change behavior by triggering new actions. add reducers to listen on those actions and change state.
To deal with files and streams all you really want is cat but pushing everything to stdout is unreliable. instead output to a file and pass around references to that file.
HyperTerm has access to the entire react ecosystem!
htyt will take a reference to an arbitrary youtube video and play it in your terminal!

Jamund Ferguson - @xjamundx - Paypal

Advanced linting with ESLint

"Linting multiplies your power as an engineer".
"It's like being able to whisper best practices into somebody's ear as they're coding."
When you're throwing an error, do not throw a string. Throw new Error because if there's no error you lose the stack trace.
The problem with callbacks is you frequently forget to pipe up the errors. always remember to handle errors first.
Don't nest promises!
Don't ever mismatch code patterns that solve the same problem!
- es6 classes and prototypes
- es6, commonjs, amd modules
- connect middleware, koa middleware
- early return and single in single out
- factory, singleton, etc
- lodash, underscore, jquery
Writing custom rules
- astexplorer.net
- How do we prevent promises inside of callbacks?
- Detect a promise by looking for a MemberExpression with a name of then.
- Detect a callback by looking for a parent FunctionExpression that has a first argument with a name of err.
Figure out patterns that you're using incorrectly and write rules to fix them.
Learn ASTs to better help you understand what's going on in your code.

Justin J Moses - @justinjmoses - MongoDB

The Sound of Music

Learned to play classical guitar after a career in ColdFusion.
Functional Programming - coming back into vogue as a response to the unpredictability of object-oriented applications.
EventEmitters (pubsub) give us a way to do async but if something happens before something else is listening that event is lost.
Promises fix that issue by hanging onto the return value until something listens.
Streams take that even further and hang onto old value(s) and continue to allow you to pipe values through them.
Node keyboard - library that allows you to play midi values and pipe them around. use various "instruments" by engaging "soundfonts".
Western music theory is largely functional and popular musical sequences can be constructed just by applying simple functional transforms to other popular sequences. (making music with functional composition).
RX is like a super-powered pubsub pattern. (obesrvables).
Converting sentiment analysis scores to notes allows us to do something like "listen to our facebook news feed and hear the tone of what people are saying".

Alejandro Oviedo - @a0viedo - NodeSchool, Thinkful

Understanding JavaScript Engines

The history of JS engines.
source code > parsing phase > byte code > execution phase.
Garbage collector > heap.
"Hot functions" are functions that are running too often.
Adaptive/Optimistic optimization.
Inline caches.
Most engines use 2 different compilers. One that optimizes compilation time and another that optimizes execution time.
Each of the 3 major browsers use a slightly different architecture of optimizers and interpreters.
In low level programming languages like Assembly, calling a function results in a "context switch" which is a costly operation so optimizers will try to reduce function calls as much as possible.
- This is why a for-loop is so much faster than #forEach, the #forEach callback function creates a new context and switches to it for each iteration.
Replace repeated calculations with constants.
Trim code that's never used known as "dead code" to reduce wasted cycles.
Working on a way at runtime to detect which optimizations are enabled.
How to measure optimization performance? It's difficult.

Seth Samuel - @sethfsamuel - Working at Airtime

How WebAssembly will change your life

A brief history of the web: Charles Babbage, Ada Lovelace, Alan Turing, Grace Hopper, Tim Berners-Lee, Brendan Eich, Ryan Dahl, and YOU. Oh good, now we're all caught up.
What are programming languages? A bridge between human thought and computers.
Why do we need them? Computers are just pipes of electrons.
Electrons > Machine code (binary numbers) > Assembly (using conceptual words to describe simple machine operations) > Lower level languages (you don't need to know exactly how many bytes to assign to a variable in memory but you do need to do a lot of calculations manually. At a time this was considered a "higher order" language) > High-level languages (don't worry about machine operations at all or very much. Write understandable code more quickly.)
ASM.js - supposed to be easier for compilers to compile down to assembly code.
Mariko Kosaka - How to be* a Compiler.
global.Wasm (don't use this in production yet).
Fibonacci is the "darling of cpu profiling tests".
"Loose typing is great when you're writing code and terrible when you're running code".
With ASM.js you can run compiled system languages (like C) in the browser!
Webassembly lets us write code however we want and compile it down to the same target language/AST such that it can be run without all sorts of intermediary steps.
The first big win will be getting some of these processor-intensive dependencies (like libsass) to run in your JS environment without having to go through the C compile step.

Will Blankenship - @retrohack3r - Consultant(Sellsword)

Building p2p applications in Node

Why build in JS? Because it's ubiquitous and very close to the best tool for the job. And because we have Electron to wrap our applications in lovely interfaces.
We don't use p2p applications on a daily basis because they're generally hard to use.
Why build this way? Reduce server costs and make highly-available applications. Non-data code and non-IP code doesn't need to be on a centralized server.
Deep Blue - 11.3 gigaflops (floating point operations per second).
"Your wifi router has more computing power than all of nasa had in 1968."
"I like counting windows because I know that behind each window is at least one computing device."
What could we do with all of the untapped computing power just in NYC, the US, the world?
WebTorrent is a beautiful piece of code. If you want to learn how to write Node modules and ship them the right way this is the best place to start.
Kad Tools is a super simple interface that lets you wrap complicated code. Good example - Storj.io (a decentralized version of S3).
https://github.com/retrohacker/awesome-p2p.
PeerWeb - a decentralized internet browser.
This is going to change the future of how we access information and pay for that access.

Nick Hehr - @hipsterbrown - Tessel, Namely

Portable, Distributed Systems

Data is transferred over the internet in the form of packets.
Packets are made up of a bunch of different sections like headers.
Packet delays come in several forms: propagation (basically distance over the wire), transmission (the rate at which you can transfer data), process (the time it takes to interpret and process the received data), queueing (variable latencies and delays because router buffers hate dropping packets).
"For every 20ms decrease in latency we have a linear improvement in load times."
Tessel is a node-based microcontroller.
OpenWRT (an embedded linux distro, mostly for routers).
How to distribute the load between multiple nodes? Create a MANET.
The dgram module provides an implementation of UDP for node.
UDP is used by DNS and routing.
mDNS is a way to resolve hostnames on a local network without a local nameserver.
- Implemented in Bonjour and Avahi
- mDNS js package to run mDNS in node
tessel-av
TesselMobile
TesselComms - small devices that create an adhoc network and subscribe to a pubsub service. Can be used to turn on and off switches or evolve into a walkie-talkie.

Carlos Justiniano - @cjus - Flywheel Sports

Node Microservices Using Hydra

A longstanding interest in distributed computing.
2005 world record for largest distributed chess computer.
Large applications power businesses but they're big, slow, and bogged down by a bunch of dependencies.
Microservices should be fast and agile.
- That's an inaccurate description.
- "A process dedicated to doing a single particular task."
We wanted to create a smart and easy to use and deploy microservices so we created Hydra.
Hydra comes with a bunch of features out of the box like automatic service discovery...
Use a yeoman generator to bootstrap your microservice! fwsp-hydra.
- Bootstrapped microservices come with an "app" and a "routes" file that describes how the microservices should listen and respond.
Hydra is based on Express.
Hydra router automatically discovers services available on your application. It makes those available and even automatically load balances between instances of microservices.
Hydra wallboard provides a list of running microservices and status for each of them because each microservice is expected to self-report status.
Built a hydra compute cluster out of 8 Raspberry Pis.
hydra MCP - master control program. A GUI for communicating with the cluster.
Hydra doesn't just have http restful services, it also communicates over sockets.
Test your code on Raspberry Pis and Arduinos. If you can get your code to run on low-level machines then you can run it anywhere.

Gabrielle Crevecoeur - @nowayshecodes - Technical Evangelist at Microsoft

Build your child their very own NodeJS Frozen Bot

Why build a frozen node bot?
- Little sisters! I wanted to build something that lets me do my job and also connect with somebody I care about.
"I googled... I mean, I 'bingd', sorry."
How do I get started with microcontrollers? How do I get JavaScript on these boards?
"I felt like Arduinos make getting started with pins and headers and such easier."
Johnny Five is a great way to get JavaScript onto these boards.
A lot of boards come with shields. The nice ones just plug straight into your board and other require you to wire them up on a breadboard next to the board.
Required hardware: arduino, mp3 shield, speaker.
Get my computer to listen on the microphone > pipe audio into a wave file > pipe to Microsoft Convoluted services > they process the audio and return text > scan the text for the trigger words.
If the trigger word is detected the host computer pushes an audio file the the shield which then tries to play the file.
Remember to turn your devices on and get the right port number when doing demos. It helps to pay attention.
When you're making embedded components, make them pretty!
Go to aka.ms/frozenbot to get step by step instructions on building your own.

Philipp Burckhardt - @burckhap - Carnegie Mellon

Real Time Machine Learning with NodeJS

I needed to parse large amounts of data and Node seems to handle these tasks extremely well.
The one reason why Node has not become popular in mathematics and statistics is just because the community hasn't built up yet.
What can machine learning help us with? It helps learn patterns from data! "Find the signal in all that noise."
Real time machine learning is new and interesting because historically statisticians have worked on a fixed set of data collected after an experiment.
Batch algorithms vs incremental algorithms.
@stdlib/math/generics/randu - Math.random can work different in different environments and it's not seedable so you can't get reproducible data.
"Prediction is very difficult, especially if it's about the future." - Nils Bohr
Types of problems - regression (like housing prices), classification (like character recognition), clustering (like generating movie recommendations for similar users).
"Supervised" vs "Unsupervised" machine learning.
Regression example: find the average number of versions for packages on NPM over time in order to be able to predict the number for an unknown package.
Classification example: Find out which NPM dependency is an accurate predictor of that project also depending on React.
"Elements of Statistical Learning" - Freely available reading online.

Sarah Sexton - @Saelia - Microsoft Tech Evangelist, Voxels

Getting Started with Microsoft Bot Framework

Interested in getting more women into coding.
Why is Bot service interesting? It lets you write your chat bot once and deploy it to all sorts of services like Slack, Skype, or Facebook.
Bot builder available for NodeJS and .NET.
Tracery.io - tool by @GalaxyKate to generate text.
Use chat bots to do anything you need. Book a haircut, order a pizza, take notes...
Always save your passwords and secrets in environment variables or untracked files to avoid publishing them.
Dialogs follow routes and you can configure your bot to follow these conversational routes.
Use #createGrammar to create a basic grammar.
Use #addModifiers to add common grammar traits to your custom grammar.
https://github.com/SarahSexton/TraceryBot

Tierney Coren - @bitandbang - Developer Advocate at NodeSource

Rocketing the Node Community Beyond the Edge

We all think that Node is awesome. Applications are endless, it's easy to pick up and learn, and it's just JavaScript.
I think the community is awesome because of how large and diverse it is.
Ecosystem - 350,000 published packages. 500 new per day. Almost 6 billion downloads over the last month.
Node core - 15000 commits. 400 releases. Over 1000 collaborators. Over 4000 issues filed. Over 5000 pull requests submitted.
The io.js story - Node forward was the path that led us to the io.js fork. Thanksgiving 2014, Node was forked. Jan 13, 2015 io.js v1.0 was released.
Before the fork, everybody was fighting to get stuff in. After the fork they were content just to get their stuff done.
Now: "Individuals making significant and valuable contributions are given commit access to the project to contribute as they see fit."
You can get started RIGHT NOW. There is a very low barrier to contributing and getting feedback.
What is the Evangelism Working Group? - create graphics and promotional materials for Node. Create public communication about Node. Grow the community's positive messaging.
"You don't need to code to be able to contribute to NodeJS."
Now there's a weekly newsletter that's being developed by the foundation. Working on getting contributors to update the Node.js wiki page.
Beginning to develop a process to summarize the extremely long threads in core.
The Node.js project isn't just about writing code or creating software. It's a community of people coming together to work better and faster together.

You're not better than WordPress

Jack Tarantino — Wed, 18 May 2016 00:20:36 GMT

If that title left you feeling a bit indignant, this post is just for you. After consulting with my Nth company running a content site and watching them struggle to design, develop, and maintain their own CMS, I think it's time to admit this: I'm not better than WordPress. None of us are. WordPress is a fantastic piece of software and trying to roll your own CMS for a simple content site today is just sheer dead insanity. A wise man once said:

It is the duty of every good developer to try to code themselves out of a job.

That man was me, by the way. This wasn't meant to say that you should just quit your job and go live like Thoreau in the woods. It's meant to say that you should embrace ideas, principles, and systems like Don't Repeat Yourself, Minimum Viable Products, Keep It Simple, Stupid, and the Single Source of Truth. These principles all engage pragmatism as related to programming process and design and encourage us to do things once and do them well. Something that we as designers and developers constantly forget is that these principles don't just apply to the one software project we're working on right now; These principles apply to everything across the software ecosystem and indeed across time. Don't solve problems that have already been solved! That includes problems that have been solved by other developers, in other industries, and years into the past.

If you needed somewhere to sit you wouldn't go chop down a tree and build a chair, would you? When you want to listen to music you don't start soldering buttons, resistors, and RAM together, do you? When your clothes are dirty, do you start designing the best way to wash them or do you just pop them into the washer and dryer that somebody else already built? So when you need to put a simple blog on the internet (and yes, your site is just a blog) why would you hire a team of developers to start creating a CMS for you when there are already plenty of options out there?

What I see time and again is that people reject using Wordpress for 1 of 2 reasons. The first is that they just didn't do their research properly and they didn't learn what's out there and what the strengths of various frameworks are. The second is that they just plain think they're too good for WordPress(This is basically a textbook example of the Dunning-Kruger bias). Well, I'll admit right away that WordPress is not sexy anymore. It's not the perfect solution to everything. And seemingly in spite of everything good in the world, WordPress runs on PHP and ... ew.

BUT

WordPress is an excellent choice for a content site CMS

Here's why:

Your blog isn't complicated. When you start thinking about all the little things you want your blog to do, it can seem overwhelming but trust me, other people have done it before and they've done it with WordPress.
Your blog doesn't have scale that WordPress can't handle.
Your in-house team will NEVER catch up to the feature set in WordPress.
Your in-house team will NEVER create something more stable and secure than a platform that's vetted by millions of people. Whether you call it a post, article, blog, story, listicle, blurb, review, communiqué or whatever else, it's still just a giant text blob with some images and a little metadata. That's a simple content website. The thing that WordPress does best.
Programming is really really hard. While rolling your own CMS seems so very do-able: it's not. Trust me when I say that you will spend years on it, you will spend millions of dollars on it, and eventually you will replace it because it became a monster.
You have custom content types? Holy shit! Nobody's ever done that before! WordPress doesn't just let you have a special post type, it lets you create a custom template for it. And a custom metadata structure for it. And custom widgets and permissions and icons and admin layouts and everything else for it. Including whether or not it's even visible in the admin GUI.
Security? WordPress runs literally a quarter of the Internet. Think you can do that and be super easily hackable? Seriously. Look at all dat security. It even updates itself!
It's not pretty enough? Absolutely every part of it is theme-able. Embrace the feature set and just layer your own styles on top. Doesn't fit your publishing flow? Meet my friends the 900 editorial flow plugins(slight exaggeration but you get what I mean). All free. All the time.
The most popular plugins easily and automatically handle things like SEO and CDN configuration. It's almost too easy to get all your important features.

When you should definitely not use WordPress:

You're working on an application or other site that is not content-based. That is to say that your application is heavily interactive and focuses on users taking action rather than just looking at things.
You're a developer yourself and you're only running a blog. WordPress is easy but you can probably do better. Make a static site or write your app in Lua or something crazy like that. Be interesting!
Hosting or especially streaming media. WordPress is just not a music or video host. It can be but it's just not.
If you hate happiness and want to work on something redundant for the next several years.
You're an arrogant bastard and think that you can do it all and you can do it better. You probably have an IQ of like a million and find tasks like reading the entire dictionary in an afternoon to be trivial.
You got in a fight with Matt Mullenweg in 6th grade and you've never forgiven him for it.

All of these things are solved problems and you can do all of them very easily with WordPress:

Blogging
Media
Complicated media styles
Editors inserting code
Permissions management
Social media integration
Oauth
Running multiple sites on one install
Importing and exporting data to and from any other service
A/b testing
Analytics

You don't even need to worry about hosting! PHP configs, MySQL configs, networking, backups, ports, routing, and memory management are all things that have been solved already and are available to you in stunningly simple and affordable services like WP Engine and WordPress VIP. Or roll your own service but take advantage of the work done by others with something like the WordPress Docker image.

Wordpress has methods for absolutely everything. Whatever it is you want to do, there is a more secure and efficient way to do it with a native method. I never even needed to learn sql when I was a Wordpress developer because the database abstractions are that good.

Backups and migrations? WordPress has things like the Heartbeat API that will automatically store versions of articles as you write them. Your entire site config is stored in the database and a litany of plugins will help you quickly set up hourly, daily, and monthly snapshots of your entire database.

Say to yourself "It's just a blog" and repeat until you believe it

I've worked on plenty of WordPress projects before. I've written themes and plugins and even made a tiny contribution to WordPress itself. I wrote the plugin to easily add CORS headers to your site (a function which is now built into WordPress core). This post is not an endorsement of WordPress as the solution to every site and every problem. After everything I've done with WordPress already I'd rather work on more interesting problems like design systems and getting my time-to-glass as low as possible on 3G networks. So, in the same vein, this post is meant to encourage you to think about the problems and projects you face and attack them pragmatically. Let other developers deal with solved problems for you and work on interesting things yourself! Get out there and code yourself out of a job!

Supporting smaller audiences for maximum profit

Jack Tarantino — Fri, 13 May 2016 23:06:31 GMT

or "How I learned to stop worrying and love all browsers the same as long as they came out kinda recently"

Time and time again I've seen companies ignore smaller audiences that use their product because those audiences are not the main/target/primary audience. At a recent job they ignored users on small desktop computers and on tablets saying that the company "doesn't support" those devices. At a recent consulting gig someone asked "why would we support a web app when our target market is mobile?".

There’s a concept in software design where browsers and environments are not just "supported" or "not supported" but they receive gradations of support. This system is referred to as a "browser support matrix" and is generally broken down into 4 categories:

A level - this browser is fully supported and the tiniest bug will be fixed.
B level - this browser is supported and any large problems will be dealt with but we're not worried about cosmetic issues or fringe cases.
C level - this browser is supported functionally only. if there's a bug, we're only fixing it if the app completely stops working.
Unsupported - this browser will not get any of our dev time, sorry.

Other systems can engage more levels of support and some very daring engineers actually support platforms on the feature-level instead of whole-platform. Going by feature and trying to "progressively enhance" experiences is very difficult to do right though. It generally takes a very strong engineering team or a great deal of time.

This system and the effort that we put into sorting different browsers and environments into different categories helps us to determine how much effort we want to put into supporting a given platform. the mistake that I see all too often is that people think that there's no gray area between full and nothing and that hurts them. The business loses customers. The business loses prospective hires. And consumers miss out on a good product.

Take, for example, this social app that doesn't have a web version. The company is missing out on people who don't have smart phones. They're missing out on people who don't want to download the app onto their phone (which could be for security reasons or maybe they just can't afford the 200mb download on their plan). They're missing out on people who want to be logged in but don't want to have more than once device out in front of them. They're missing out on people who were going to send one last message but then their phone's battery died and they don't have a charger and they just missed out on messaging their would-be soul mate (it could happen!). Now, these people are clearly not in company's priority audience. The priority audience is people who have a working smartphone, who use it constantly, and who are easily conned into buying upgrades and subscriptions. But just because that one audience is the most profitable doesn't mean you have to cater to only that one audience at the expense of all the others you could be profiting off of. Even if those other audiences only constitute 1% of your demographic each, that's 4% all together. and that's 4% more money that the company could be making with a minimum of effort. In many cases just putting smaller audiences in your B or C support levels can dramatically increase profits. The company doesn't have to fully support and cater to every single platform but if they just put in a small effort they could be making a lot more money and have many happier users.

In this particular case, there's also a technical upside: reducing the amount of code maintained and the amount of effort that goes into developing and deploying new features. The company currently supports native applications written for iOS and Android. They do not support Windows phone or anything on the web. If they wrote a web-based application and layered in support for mobile features like push notifications (which you can also do on the web now!) they would have a lot less code to maintain. One codebase for 4 platforms instead of 2 codebases for only 2 platforms. Half the code and double the platform support equals like 16 times the fun! The business would also save a lot of money on developers because they'd only need to hire people to program in and debug one platform instead of many.

Now, not every single business is going to want or need to support every single platform out there. But when you're considering your audiences and whether or not you "support" them, keep in mind that you are allowed to only partially support an audience. You don't need to have every single pixel in place but just having a barebones version of your service on a platform gives you a whole new audience to capitalize on. You don't have to give A-level support to tablets if they only make up 3% of your audience but if you just make sure that tablet experience is not broken(C-level support) then that 3% of your audience will still keep giving you money and you don't have to put much effort in.

Developing small JavaScript components WITHOUT frameworks

Jack Tarantino — Sun, 17 Apr 2016 20:11:45 GMT

You too can write vanilla JavaScript!

A mistake that a lot of developers make when they first approach a problem (me included!) is to start thinking about the problem from the top down. They start thinking of the problem at hand in terms of frameworks and plugins and pre-processors and post-processors and object-oriented patterns and some great medium post they read once and if there's a generator for the kind of thing they're now scaffolding... But with all of these great tools and powerful plugins we tend to lose sight of what it is that we're actually building and why. For the most part we don't actually need any of those tools though! Let's look at an example of a simple component that we can build without any JavaScript frameworks or tools whatsoever. This post is intended for mid- to advanced-level programmers as a reminder that they can do anything without the use of frameworks and bloatware. However, the lessons and code examples should be readable and usable by more junior engineers.

Let's build a list of recent employees at our company (normally I'd say a list of recent tweets or something but they now require you to set up an app to access their API and that's just complicated). Our product manager wants us to put a list of recent employees on the homepage of the corporate website and we want to do it programmatically so we don't have to update it manually later. The list should have a photo of the new employee along with their name and city they are located in. Nothing too crazy, right? So, in the current scope, let's say that the corporate homepage is isolated from the rest of the codebase and that it's already got jQuery on it for a couple animation effects. So, this is our scope:

a semi-live-updating list
on one page only
you're the only developer on this project
you're allowed to take as much time and resources as you want
the page already has jQuery on it

So where do you start? Do you immediately reach for Angular because you know you can whip up a $scope.employees and ng-repeat in no time flat? Do you go for React because it'll make sticking the employee markup into the list crazy fast? What about switching the homepage over to a static site and using Webpack to wire things up? Then you can write your HTML in Jade and your CSS in Sass because honestly who can even look at raw markup anymore? Not gonna lie, that last one sounds really appealing to me. But do we really need it? The correct answer is 'no'. None of these things actually solve the problem at hand. And they all make the software stack way more confusing. Think about the next time another engineer has to pick up this project, especially if they're more junior; You don't want another engineer to be confused by all the bells and whistles when they just want to make a simple change. So what should our simple component look like in terms of code?

<ul class="employee-list js-employee-list"></ul>

That's it. That's all I'm starting with. You'll notice that I added a second class to the div that starts with js-. If you're unfamiliar with this pattern, it's because I want to indicate to any future developers that this component also has JavaScript that interacts with it. This way we can separate classes that are just for JS to interact with and those that have CSS tied to them. It makes refactoring so much easier. Now let's at least make the list a little prettier (Note for the reader: I am like the world's worst designer). I would prefer to use a CSS structure like BEM or SMACSS but for the sake of this example let's keep the names terse and holding their own structure:

* { box-sizing: border-box; }

.employee-list {
  background: lavender;
  padding: 2rem 0.5rem;
  border: 1px solid royalblue;
  border-radius: 0.5rem;
  max-width: 320px;
}

So now we've got a list and it has an appearance. It's not much but it's progress. Now let's add in an example employee:

<ul class="employee-list js-employee-list">  
  <li class="employee">
    <!--   Placeholder services really are your best friend   -->
    <img src="http://placebeyonce.com/100-100" alt="Photo of Beyoncé" class="employee-photo">
    <div class="employee-name">Beyoncé Knowles</div>
    <div class="employee-location">Santa Monica, CA</div>
  </li>
</ul>

.employee {
  list-style: none;
}

.employee + .employee {
  padding-top: 0.5rem;
}

.employee:after {
  content: ' ';
  height: 0;
  display: block;
  clear: both;
}

.employee-photo {
  float: left;
  padding: 0 0.5rem 0.5rem 0;
}

Great! So now we have a single employee in the list with some simple styles for layout. So what's left? There should probably be more than one employee. And we need to fetch them dynamically. Let's start by getting that sweet sweet employee data:

// wrap things in an IIFE to keep them neatly isolated from other code.
(() => {
  // strict mode to prevent errors and enable some ES6 features
  'use strict'

  // let's use jQuery's ajax method to keep the code terse.
  // Pull data from randomuser.me as a stub for our 'employee API'
  // (recall that this is really just a fake tweet list).
  $.ajax({
    url: 'https://randomuser.me/api/',
    dataType: 'json',
    success: (data) => {
      // success! we got the data!
      alert(JSON.stringify(data))
    }
  })
})()

Brilliant! We got the employee data and we managed to do it without a framework, without a complicated preprocessor and without spending 2 hours arguing with a scaffolding tool. For now instead of using a testing framework we're just alerting the data to make sure it came through as expected. Now, we need to parse the data through some sort of template to stick into the .employee-list so yank that Bey out of there and let's get templating:

$.ajax({
  url: 'https://randomuser.me/api/',
  // query string parameters to append
  data: {
    results: 3
  },
  dataType: 'json',
  success: (data) => {
      // success! we got the data!
    let employee = `<li class="employee">
        <img src="${data.results[0].picture.thumbnail}" alt="Photo of ${data.results[0].name.first}" class="employee-photo">
        <div class="employee-name">${data.results[0].name.first} ${data.results[0].name.last}</div>
        <div class="employee-location">${data.results[0].location.city}, ${data.results[0].location.state}</div>
      </li>`
      $('.js-employee-list').append(employee)
    }
  })

Fantastic! Now we have a script that fetches users, can stick a user into a template and put that user into a spot on the page. It's a bit sloppy though and it only handles one user. Time to refactor:

// takes an employee and turns it into a block of markup
function employee_markup (employee) {  
  return `<li class="employee">
    <img src="${employee.picture.thumbnail}" alt="Photo of ${employee.name.first}" class="employee-photo">
    <div class="employee-name">${employee.name.first} ${employee.name.last}</div>
    <div class="employee-location">${employee.location.city}, ${employee.location.state}</div>
  </li>`
}

$.ajax({
  url: 'https://randomuser.me/api/',
  dataType: 'json',
  // query string parameters to append
  data: {
    results: 3
  },
  success: (data) => {
    // success! we got the data!
    let employees_markup = ''
    data.results.forEach((employee) => {
      employees_markup += employee_markup(employee)
    })
    $('.js-employee-list').append(employees_markup)
  }
})

And there you have it! A fully-functioning small JavaScript component with no frameworks and no build process. It's only 66 lines including comments and can totally be extended to add an animation, links, analytics, whatever with very little fuss. Check out the finished working component below:

See the Pen MyGVOv by jacopotarantino (@jacopotarantino) on CodePen.

Now, clearly this is just a VERY simple component and might not handle all of your needs for your specific project. If you keep simplicity in mind you can still hold to this no-framework principle and add more to it. Or, if your needs are many but your complexity is low, consider a build tool like Webpack. Build tools (for the sake of this argument) are not exactly the same as frameworks and plugins in what they achieve. Build tools only exist on your box but they don't add bloat to the final code that's served to a user. This is important because while we're stripping out frameworks the goal is to create a better experience for end users and create more manageable code for ourselves. Webpack handles a lot of the heavy lifting so that you can focus on more interesting things. I use it in my UI Component Generator which also introduces very little in the way of frameworks and tools allowing you to write tons of functional code without all the bloat. When you're working in JavaScript without frameworks, things can get very "wild west" very quickly and the code can get confusing. So when you're working on these components make sure to think about a structure and stick to it. Consistency is the key to good code.

And remember, above all you must test and document your code.
"If it's not documented, it doesn't exist." - @mirisuzanne

Extra credit

I cheated a little bit in this post by using jQuery. This was mostly for the sake of brevity and I do not endorse using jQuery when you don't need it. For those that are curious, here's a few things that we can replace with super-readable and almost-fun vanilla JavaScript.

AJAX request in plain JavaScript

Sadly this one hasn't gotten any prettier but you can still do it yourself with relatively little code.

(() => {
  'use strict'

  // create a new XMLHttpRequest. This is how we do AJAX without frameworks.
  const xhr = new XMLHttpRequest()
  // tell it which HTTP method to use and where to request
  xhr.open('GET', 'https://randomuser.me/api/?results=3')
  // in a GET request what you send doesn't matter
  // in a POST request this is the request body
  xhr.send(null)

  // we need to wait for the 'readystatechange' event to fire on the xhr object
  xhr.onreadystatechange = function () {
    // if the xhr has not finished we're not ready yet so just return
    if (xhr.readyState !== 4 ) { return }
    // if it didn't get a 200 status back log the error
    if (xhr.status !== 200) { return console.log('Error: ' + xhr.status) }

    // everything went well! log the response
    console.log(xhr.responseText)
  }
})()

DOM insertion in plain JavaScript

This one is crazy easy now that browsers have basically adopted all of jQuery's selector capabilities:

(() => {
  'use strict'

  const employee_list = document.querySelector('.js-employee-list')
  const employees_markup = `
    <li class="employee"></li>
    <li class="employee"></li>
    <li class="employee"></li>
  `
  employee_list.innerHTML = employees_markup
})()

That's it!

Developing without ES6 features

I really wouldn't recommend going back to ES5 but if your job requires it, here's what you can substitute.

String interpolation

Substitute out all the `Photo of ${employee}.` blocks with 'Photo of ' + employee + '.'

`let` and `const`

You can safely replace all of the let and const keywords in these examples with var but be careful in your own code.

Arrow functions

Substitute out all the (employee) => { blocks with function (employee) {. Again, it should work fine in this code but be careful in your own. let, const, and arrow functions all have different scoping than var and function and switching between them can wreak havoc on your code if you're not very careful and structured.

Clarity Conf Day 2 Notes

Jack Tarantino — Fri, 01 Apr 2016 19:31:05 GMT

Here's my notes from day 2 of Clarity Conf. Again, apologies to the speakers whom I'm certain I misquoted and probably misrepresented. These are very incomplete. Please send me a message or say 'hi' in person with any changes.

Jina Anne

designsystems.herokuapp.com <- get invited to the Slack channel!

Chris Coyier

Jina has years of experience with this. "Design Systems Empress"
Thanks to Jina who basically organized this entire thing
Recap of yesterday's events
- "Dangers of silos"
- "Measure that your style guide is successful"
- "Maybe a style guide is a CSS API"

Rachel Nabors

She's basically done everything with animation ever. like, all of it.
"Any Bronies in the audience?"
Hand-drew all her slides
This isn't a talk about how why to use animation. it's about how to wrangle it.
When you put animation in a system it's important to keep it consistent.
Animation sits at the intersection of design, dev, product..
- Communication issues, inadequate deliverables, lack of respect(for people or just for animations)
Hard to find universal examples of animations
Designers want thematic, theory, educational, guidance...
- IBM's motion guide
Developers want granular, components, fixed numbers, instructional, maintainable code..
Documentation, defaults, unity.
There is no one size fits all
The best place to start is at the end. start with deliverables.
Easing used to be called "cushioning" or "slowing"
Just like her website, "we want custom easings that reinforce our brand"
You'll want a few: acceleration, deceleration, something subtle(like linear but not exactly linear because it sucks) and a bounce.
Fades and color changes look best with more linear changes.
Bounces are fun but use them with caution.
Stay within 70 to 700ms
200 - 300 is a sweet spot for animation duration.
Shorter durations for fades and color changes.
Longer durations for animations.
CSS opacity and transform are the most performant properties right now.
John Lasseter - "The art challenges the technology and the technology inspires the art."
It's okay to use things that don't perform well sometimes.
Creating an "animation language"
Hilariously, "people hold their vowels longer with onomatopoeias to indicate duration"
Combine animations to create animation patterns. fade + pop + slide = notification/dismissal pattern.
Storyboards were created by disney to make long animations clear.
Blue and orange are the most visible colors to most people.
Fancy storyboards are a great way to demo animation to clients.
Storyboarding tools:
- postits, index cards, paper
- her storyboard template.
- boords.com
Storyboard can't tell you how an animation is going to feel
"An animation is worth a thousand meetings"
An "animatic" is kinda like a gif with some animations in the middle. It's a rough sketch.
- They're like mood boards or doodles, not deliverables
Animatic tools - keynote aftereffects, principle, animatics
Stephanie Rewis - "what developer doesn't want a good copy-paste?"
Prototyping tools - principle, pixate, invision, ux pin, foundation, framer.js
Verbal + animatics + prototypes = good documentation.
Generating buy-in
- Let people contribute! especially to the documentation
- Group index-card sketching of animations
- Animations need champions in every company. but have a co-conspirator.
Sarah Drasner, also Ben Folds, also also Brad Frost - "Do it anyway."
There is no 'right way' but you can create a culture that supports animation.
webanimationweekly.com
slack.animationatwork.com

Conversation after

Fabulous unicorn horn
- "Unicorns"(in context of the talk) are designers who grok code.
We have an innate anticipation of how physical systems work.
- If you break your own rules the site seems sketchy or unfinshed.
"It's like wearing a really cheap suit to a wedding"
Justify your animations! -not just animations but have a reason for everything you do.
"Because it looks good" is not a justification for anything.
Sometimes too much animation is a bad thing.
"Baby-friendly animation" because some animations are hard to watch for babies/the tired..
"Browsers throughout history have only ever had to animate one thing: scrolling."
Web animations API opens up the animation internals! you can create your own performant animation library.

Cordelia McGee-Tubb

Baking accessibility in
Accessibility is creating experiences that everyone can use regardless of their abilities
You've made these really great muffins. but your mom is like "your nieces favorite is blueberries!" so you start just shoving blueberries into the muffin and it looks awful and it's not the same as a blueberry muffin.
"As system designers, you are creating the cookbooks that everyone else reads."
If you learned to do stuff by reading other people's code and copying and pasting it...
It's about creating really comprehensive systems.
Foundational ingredients
- Semantic HTML - a screen reader relies on elements being marked-up correctly.
Write code samples that are accessible by default so that when people are copy and pasting that code they are copying good code.
An anchor elements without an href is not keyboard-accessible.
Make sure that your buttons are actually
Form fields: use visible, explicit labels! - low-contrast is a huge issue for people with low vision, cognitive impairments...
- Make sure that example form fields have labels with a for attribute to connect the label to the input.
Give images alternative text.
- Icons should also have alt text if they're meaningful or readable by a screen reader
- Use alt="" or aria-hidden="true" to hide images from screen readers.
Include a dash of ARIA when necessary.
Components that should be aria: modals, menus, accordions, tabs,
Resources: wcag 2.0 guidelines, heydon's practical aria examples, web accessibility slack community
MAKE KEYBOARD INTERACTIONS AS RICH AS MOUSE INTERACTIONS
- Create an animation that happens both on hover and on focus
Don't forget about focus halos
- People navigating with the keyboard need focus indicators because they don't have a mouse.
- Don't get rid of the focus indicator, just change it to be more attractive.
Colors
- Use reasonable color ratios
- colorsafe.co
- Just make sure to use dark colors for text and use the light colors for whatever else.
- Use more than just color for meaning(use the text 'required' instead of just highlighting a box in red)
- Yellow is an extremely difficult color to get to pass wcag 2 guidelines
Pinterest fails are the best.
- What often happens with design systems is the opposite. people will make a website that looks good but tastes awful.
INCLUDE ACCESSIBILITY NOTES IN YOUR DOCUMENTATION
Component documentation: remind people to constantly remember accessibility. spread best practices. discourage people from accidentally removing accessible aspects/ARIA attributes.
General documentation: encourage holistic thinking about inclusive design.
Does the need to code accessible markup the "right way" provide a barrier to entry to writing accessible code?
Think about ways you can make things fun for all users.

Conversation after

Improving voice and tone is a great way to make fun for everyone.
"Accessibility mode" is actually really bad for people who need it.
- It's a great way to create a second-class experience that gets neglected.
Adding keyboard shortcuts is actually more fun for everyone and not just people who need them.
button.button is a great way to force people to only use button styles on buttons. instead of spans and divs and all that.
- Does that limit us from having links that we want to look like buttons?
Most modals are inaccessible.
- "The incredible accessible modal"
- Trigger focus on the first element in a modal to keep tab focus in the right place.
Don't make custom select elements. they're not accessible. just don't.
tenen.io?
People start out afraid of accessibility but once they're done they like it more than the original
Accessibility is not just for blind people with screen readers.
- Minor or temporary impairments.. reading a screen in bright sunlight.. migraines with aura..
Voiceover apple has good documentation.

Jeremy Perez-Cruz

I wanted to do a slide that doesn't say hello.
It's awesome how warm and welcoming everyone is.
It's humbling to be around all these smart, thoughtful people.
"The future of branding is in-house"
Branding is fun and doesn't include a lot of acronyms :P
@hat is brand?
- Name, packaging, price, history...
- Intangible
- Marty Neumeier - "A person's gut feeling about a company/product."
- Brand is psychology, design and magic.
"Startups don't realize they need a brand until they reach some sort of scale."
A great brand definition needs to be a living. breathing document.
We shouldn't be afraid to go back and edit once our work gets into the hands of others.
There's no such thing as bulletproof brand design guidelines.
"A logo might live for decades. ... If we're lucky."
Experience is the brand and experiences live in people.
Brand in the context of ~~people's~~ human lives.
Create your brand out of sympathy.
Systems should always be a work in progress.
Brand design guidelines:
- Breathe. Sometimes we need to make things look good even if it makes breaking a guideline.
- Grow. "Salesforce defaults to clarity over brevity".
- Learn. We have to learn the essentials of being human. You won't know if something works until you try it and learn.
- Feel. Get happy.
- Fear. "The most innovative ideas scare the crap out of everyone." - Neumeier
- Age. Everything new will become old and will eventually become new again.
- Socialize, explore, create, share
"Human The Movie" - This speaks to the optimism and the humanity that we should all be striving toward.

Conversation after

Branding not only can evolve but should evolve
What is the real brand?
How do you know what's good?
It's hard to get real data when your company works at huge scale..
Think about brand in terms of permanent vs temporary.
- Intrinsic vs extrinsic.
- Permanent is like the logo. shouldn't change..
- Extrinsic is like an ad campaign.
- A really strict set of guidelines breaks core principles of design.
- "Good design works without needing to ruin the brand."
Do small companies screw up branding because they don't work on it as actively?
We as an industry always complain about wanting a seat at the table.
We should be proud of CEOs that want to get involved with design. We should support each other and want to get design involved in all our projects. Look at all the massive companies who's greatest value is their brand and their design.

Claudina Sarahe

It's awesome that we're all design system enthusiasts.
best use of emojis so far.
"If only there were some document or resource I could point my junior devs to..."
Christopher Alexander - "Patterns are a collective memory of things that work really well in our surroundings."
"A pattern language is a method of describing good design."
Notes on the Synthesis of Form
A Pattern Language -> Towns. Buildings. Construction.
Wanted to release it as a binder so you could add or remove patterns as you need them.
"Patterns are not dogma."
Anatomy of a Pattern
- Name
- Context
- Problem
- Solutions
- Related patterns
"Naming Pattern"
- Name: naming
- Context: a way to identify
- Problem: people don't know what stuff is.
- Solutions: give stuff names.
- Related patterns: documentation, classes
A pattern language serves as a way to communicate and educate
They're a very useful tool in trying to wrangle a very complicated system.
A pattern language forces us to remember that we're working in a system.
"A pattern language for front-end web systems"
- Global patterns
- Community guidelines
- Temporary autonomous zones(meetups)
- Independent disciplines (ui, ux, dev, accessibility)
- Process patterns
- Purpose
- Planning
- Management
- Code reviews
- Cross-functional teams
- Design Systems
- Naming
- Documentation
- Single origin of truth
- Workspace patterns
- Editors
- CLIs
- Syntax highlighting
- Shortcuts
- Git/Github
- Version and dep management
- Configuration and settings
- Project patterns
- Build tools
- Bundling
- Linters
- File organization
- Composability
- Templating
- CSS strategy
- JS
- Content strategy
- Shareable data
- Identifiers
Tadao Ando
- "Purpose should be baked into all of our decisions."
- Ando - "To change the dwelling is to change the city and reform society."
Open Borders - working with people across disciplines and skill sets.
- Minimal dependencies, static, no db, no migrations, everyone on a team can work on the codebase.
Documentation
- A way to record decisions. Code is not self-documenting. Use automated solutions. Documentation should be easy to find.
- Sassdoc is based on jsdoc and uses the same style.
HTMl Templating
- A way to create structure and share code across components.
- Nunjucks, jade, swig, handlebars, mustache..
- Related: naming, Documentation, directory structure.
{% call content_panel({...}) %}
Directory structure
- Traditional - type, view, purpose, file.
- Component - first designed by nicholas gallegher. view/component, {purpose,} file.
Build tools make it easy to ignore whichever structure and just Get work done.

Conversation after

Components are especially great for removing old code; You only remove code in one place.
- Extra good for ie overrides because they all tend to live in one folder.
Nunjucks macros are super fun.
We're all very concerned with naming.
"We want to make sure the language we're using makes sense to everyone."
URL and path are different things!
"If you don't have solid naming conventions you can't communicate with your team."

Maya Benari

Works for 18f!
Gov't website with overlapping content. Many websites. Some of them seem like a scam. Roughly half are impossible to use on a phone.
Veteran benefits, immigration services, others are all hard to use...
The US spends 86 billion dollars per year on IT projects. 94% of them are over budget and behind schedule. 40% are scrapped before they ever go public.
BUYING I.T. IS NOT THE SAME AS BUYING PENCILS AND TANKS
These products meet the spec but ignore the person they're service.
Can we build easy-to-use tools that serve the public's needs.
The gov't has a strong history of good design here and there.
The UK does well but they're very different from us.
"The great pitch"
What was it like to work on federal IT services?
We interviewed a whole bunch of different government IT workers.
"The clock racer"
- way too much work, too little time, desperate for solutions.
"The master builder"
- They know systems well and love clean markup.
"The lone ranger"
- Trying to do the right thing but they just makes one-offs.
The Macgyver, the newbie, the contract manager...
We want our standards to be flexible enough for all agencies and reusable.
They need to be accessible!
They should be open source since it' a public service.
Gov't sites should feel familiar and be intuitive.
Doing a survey: do we really need 32 different shades of blue? 70 different button styles?
Testing typography pairings across gov't websites.
Institutions seemed to think they need to maintain their own history and identity so new design standaards are all suggestions.
How can an agency fold parts of the standards library into their existing code?
How to use?
- Our design and our code
- Our design, different code
- their design, our code.
Flexible code
- "We should really think about how we write our code because millions of americans will be living with it."
Plain html, css, and javascript
Component-based structure
How to write code so that even junior developers could use it.
"We don't want to add more red tape to our already red tape covered jobs."
BEM and OOCSS is great with keeping your css modular but it fills your HTML with classes and bloat.
Open source all the things!
Open source makes your code more secure and maintainable.
22 Contributors in the first week since launch.
Help from across the pond, from the products we use, from the iron chef of type design, from the fonts we used.
if you want to be a good open source project: respond to an issue in 24 hours and respond to a review in 48 hours.
"Always thank a contributor for their contribution!"
"Accessibility in't just a nice-to-have; It's the law."
Section 508 features.
Second most starred project on Github
50 us websites are now using it.
"Naming things is hard."
Federal employees were afraid that the standard would be forced upon them.
Federal front door initiative.
"Good civic design at it's core is about access."
People can get the right help sooner with less stress.
Design can improve the interaction that people have with their government!

Conversation after

Should you or can you do research and start building at the same time?
It's amazing to see how so much of the target audience is different kinds of people.
"Should we BEM or should we not BEM"?
Adoptability depends on the complexity of the component.
"The most American javascript framework is vanilla JS."
We wanted to make a tool that people want to use, not one that they're forced to use.
Now we've been able to observe multiple agencies moving over to the new standards.
Did you have to make weird tech decisions based on public service constraints?
- Not really. The website itself is a Jekyll website.

Richard Danne

Designing for Earthlings and Astronauts
Design director for NASA
Had a kickstarter for his original design manual. 9000 backers at 80$ a head.
When he started he felt like the US was way behind Europe in terms of design.
Introduced the "NASA Manual" detailing how everything should be laid out on paper, uniforms, space machinery...
"There's nothing frivolous about it. It's a design document that's meant for the ages."
Started out with a staff of 5 in a tiny office.
This was all pre-digital and things had to be done by hand.
There was a page in the book for how to not use the logo.
They didn't have electronic tyesetting so it was all basically hand-made.
There were no dedicated designers in any agencies then.
There were 5 space education vans.
The shuttle went through a bunch of different revisions because at first they didn't know where they could put graphics.
They had trouble with the uniform arm patch because of the color and how the patch also had to be flame-retardent.
"The idea was that your taxpayer dollars were working..."
Apparently all the photos of "rockets and space stations" were mocks?
Copy cat culture
- Saturn, Boeing, "NAPA", ...
- Tons of other brands have appropriated the original styles to look more space-y because they literally defined the "space brand" that people could recognize.
Designed for the FAA
Created designs for FIT. Was interesting because FIT insists that things always change so the brochures were completely different year to year.
Mendes Júnior - Created design guides in English and in Portuguese.
"The admiral's piping formed the 'A'"
Kid knowledge is a new initiative to teach physics to very young children.
Did design for napa valley jazz society but then also outlined promos for performers so their style was mostly congruent with the main design.
Get a copy at standardsmanual.com
If you are interested in the history of the manual, give him a call!

Conversation after

This was really a new effort in creating a style guide.
They brought in a panel of experts to audit the agency and try to identify what was needed.
Their RFP for the projects was just the crew going in and talking about their experience and how smart they are.
At the time NASA was 11 disparate centers that all resented headquarters.
It's hard enough to get the person sitting next to you to use your style guide let alone somebody in a different agency.
Spaceflight really pulled the nation together and got people interested in collaborating.
NASA is full of very smart, very talented people who are resistant to being told what to do.
"The fact that you had to push Helvetica through Congress..."
- It was actually literally Congressional approval for 2 colors.
Physical style guides - people can hold it in their hand and they seem to respect it more so it is more effective.
"They put so much stuff on the tail it looks like it's disintegrating." You have to keep it clean.
"We designed for permanence."
What goes around comes around...

Clarity Conf Day 1 Notes

Jack Tarantino — Fri, 01 Apr 2016 17:28:56 GMT

Here are my notes from day 1 of Clarity Conf. Apologies in advance to the speakers whom I am certain I misquoted and misrepresented. Also if I missed things. Also for having some personal stuff just in the middle of there. Also because there's probably like 90 typos. I may or may not fix those later. Apologies to readers because this is seriously all I could jot down while trying to pay attention.

Jina Anne (host)

Code of Conduct

it's solid

Chris Coyier

pattern libraries, design systems, style guides
clarity - it's a way to see and understand things better
style guides aren't new, style guides for the web and at the scale that we're engaging them are new.
why do we need a design system? not having one is kindof like death by a thousand cuts. or like 500 cuts and then life with 500 band aids.
brad frost
- he really likes style guides, resources, styleguides.io

Brad Frost

vaughn vaper the fake CEO says we're gonna redesign the homepage
team is super excited about "doing it right" this time with modern tools and all that.
getty images basically has no consistency
canon has 500 different location based experiences
browsing through the ebay site, we can see our journey back in time
united airlines has 13 different button styles just on the homepage
users see a signle brand and expect a cohesive experience
what is a style guide? brand identity, design language, voice and tone, writing, pattern libraries, code.
google's material design
mailchimp's voice and tone
the economist styleguide
SMACSS
github styleguide
it's in nobody's best interest to think of the internet as pages
it's not fun to design 3 separate versions of each page
frameworks are great but they all start to look the same
- how is your site compatible with existing sites and patterns
dave rupert - responsive deliverables should look like a filly functioning bootstrap customized for each client
walmart's stylgeuide
how do we make these things happen?
- we have to sell it - more cohesive experience = more conversions and moneyyyyy
- faster production = roll out more features faster
- shared vocabulary = more times collaborating and less time in meetings
- easier to test = more responsiv, performant and hub for best practices
- useful reference
- future-friendly foundation = modify, extend and improve over time
how to sell?
- show them, don't tell
- show what sucks about the current interface and how inconsistent it is
- categorize every element in the UI
- if you ever want to make your CEO cry just show them how inconsistent the current site is.
establishing how inconsistent the current site is provides a scope of work for what needs to be fixed
"if the boss still says no, do it anyways"
"in order to make the whole, you need to make the parts"
"atoic design has everything to do with considering the whole and the parts at the same time. it's not about just making buttons in isolation."
>> atomic design theory
atoms molecules organisms templates pages
creators > build > clients
t-shaped people - breadth vs depth
"the letter t doesn't really stand up on it's own. we need to build table-shaped teams. groups of t's all hooked together that can stand on their own"
"front end designers bridge the gap between design and development"
kill the waterfall process
samantha warren's style tiles
dan mall - ui element collages
working as a front end developer is kindof like working as a prep chef. you cop all the carrots so the next day the real chefs can focus on their work.
when you use atomic design, the higher up the templates you go the more you see just lists of partial incldes
"no matter what you're doing, use photos of beyoncé for your fill images"
beyoncé lorempixel?
if you wind up at a point where you've finished one organism but not others, and the rest of them look like shit, that's okay as long as you communicate and are clear about expectations.
"oh great, here's this nice design system! TRASH CAN."
we need to maintain the pattern library as central architecture. a living part of the process.
nathan curtis - a style guide is an artifact of the design process. a design system is a living funded part of the development process
a great-looking style guide reflects an organization's comitment to a thoughtful design system.
coyier - my worry is that orgs will say "oh we don't have time for that."
make something > show that it's useful > invest in it.
the holy grail is a real living stlyleguide.
a pattern library should serve as a watering hole and encourage people to participate in it.
USDS design system
nathan curtis - when you put a styleguide behind a wall it takes an outrageously long time to get access or they never get access at all.
"make it agnostic" "patterns should be versatile" - list group and feature block
"make it contextual"
mariott digital standards
- announcechanges
a design system should be like a fine wine. it should provide increasing value over time.
franklin "when you're finished changing, you're finished."

Conversation after

cooking metaphors are awesome
- mise-en-place
for all the guides and stuff we use, should we define one of these or use one consistently?
atoms molecules and organisms implies a sense of hierarchy
- you can call it whatever you want so long as it's consistent and you agree on it.
that consistency should exist across devices and properties
the magic elevator of knowledge
getting people excited about investing is the key
nathan might have better notes on that
creating atoms isn't about creating them in isolation

Isaak Hayes and Donna Chan

building empowering style guides with practical research
usable and impactful
version 1 of style guide was just in psds and in design team only
many companies start out with style guides silo'd to one team
lack of communication makes the guide unusable by designers, developers or across teams.
"style guide reserach process"
- who do you need to talk to?
- what should you be researching?
- interview - understand - define
who are the users of a guide? designesrs, sales, marketing, PMs...
who are the builders? designers, engineers, writers...
who are stakeholders? ceo, managers, project leads...
the style guide should account for future projects as well as current ones
app direct lets users theme websites
- theme-able components are essential to their business
"what problems are we trying to solve with a styleguide?"
what are your biggest pain points?
what would a style guide allow you to achieve?
what information would you need from a style guide?
builders will also be users!
what constraints surround the creation of a style guide?
face to face interviews > pull out nuggets > sticky note the ideas > always communicate out your findings
designers and developers both hate red-lining stuff > employees are wasting time on repetitive tasks.
"i don't konw what other people are doing" > information is not being readily distributed
"engineers are not recycling old code!' > unweildly code base
principles > user stories > metrics
fixed problems: efficiency > communication > simplicity
user stories: as a designer i need to quickly communicate. as an engineer, i need to get clear instructions.
if you're having trouble pinpointing measurable things in your company, try using surveys. some data is better than no data.
"this is a process!" it's continuous and needs to change and scale with the team.

Conversation after

don't just talk over the fence, kick it down
it's hard to implement style guides because people have abandoned them before and they're bitter about it
"i always just start making a style guide and talk to the engineer who's passionate about it."
"styleguides are like unit tests for design"

Nathan Curtis

"beyond the system"
google's material design is ahome run.
i can't get a client to make their top nagication consistent across applications.
how many times have i asked "do we need a variable for border radius?" - YEAH WE DO.
it's not reds 1 through 8 because when you need red 7.5 you're kinda screwed.
it's not just about creating a photo card. it's about establishing a design system. it's about solving a problem once.
print out all the pages, cut up ui components, group, label, prioritize...
a design system is a lot of work. and it's fun work!
dot voting to prioritize
one company doesn't use a tracker because they paste everything on the wall in the office.
the mission is efficient, collaborative, scalable, cohesive and high-quality.
- tooling, connections, shipping, experiences
foundation is created by people who created system for people who create systems for people who create products
choose flagship projects that'll commit to you too
use their launch dates or make your own
in a portfolio of "web products", things that don't have a dedicated team, usually have a stakeholder or product owner.
what's your get?
avoid distractions
"the homepage is a frickin distractions!"
- massive numbers of stakeholders who all have opinions and you're constantly changing stuff
be careful not to make the style guide the arbiter of what makes it to prod.
make one-offs if you need to!
there's a strong relationship between metrics and all your different components
@livlab - the demo convinced anyone in 1 minute which left me 59 minutes to talk about heftier topics
sun microsystems style guide
"overlords don't scale"
- a single engineer making a style guide can't work.
- iit's only built for one person's needs, not everyone's.
a centralized design team doesn't scale either. they're too disconnected from other teams.
a distributed "federated" team works better because you're getting more of the team involved. salesforce uses a "cyclical" design system team.
sometimes you play the role of "connector" instead of building or deciding you just help.
@cap's sliding scale of giving a fuck
designate "go-tos", not deciders.
civx > content, interaction, visual, uesr experience
"mix doers with delegators"
retro survey employees: what was particularly satisfying or dissastisfying about working on this project?
embrace new responsibilities! PM, seller, evangelist, connector, aligner
"get endorsed" > the way to get a design sytem that works and matters is to get support from "the top"
@jonwiley - first thing's forst: you must have total support from the top.
- a google-wide diesng initialitive required the vision of a CEO who can make that happen.
a style guide is an artificat of design process
a design system is a living funded project
we all use blue because links were blue in 1996

Conversation after

do you find there's success in using manual tools?
- it creates an atmosphere around which people are engaged physically and engaged together.
- physical stuff disarms people from feeling like things should be perfect.
maybe being the style guide lone rogue isn't the best idea if you8 can't get buy-in
any decider who only works on a single product is a bottleneck to the other teams
snarky websites that make fun of how every website looks the same..
- there's a system and then there's the expression that the systsem evokes
tiny bootstrap is a great reference
bootstrap is a tool and not a style guide
allow autonomy despite having a set of rules that we should all adhere to.
the ability to cede authority oveer a decision makes me a better systems designer
- i don't care where the icons go or what they look like as long as we make the decision together.

Miriam Suzanne

natalie downe - barcamp 2015
we need frameworks for building those into every site as quickly as possible
our team's product is the architecture. the architecture is what we're selling them.
quality architecture is just patterns
patterns are also integration tests. they are made up of may disparate patterns working together.
patterns are a combination of languages
maintenance of a style guide should be integrated
make sure that a style guide is easy to get to
ITCSS?
separation of concerns
- data logic structure presentation
specificity is your guide
css was designed for patterns
- what did you think 'classes' are for?
don't repeat yourself but don't stretch for patterns
- "these elements share a purpose" - that purpose is represented by a border style
natalie of sass - extends work well when used semantically to represent "is-a" relationships
i don't use grids anymore. i don't think you need them
- why? - don't use crazy grid systems. only use basic ones if you need to restrict design. otherwise just use good design + flexbox.
naming conventions must be consustent across the whole team.
layour region > component > element > state > js-hook
adding js- to a class name makes it obvious that it's for javascript
"there's no right answer but if you have no answer that's totally wrong."
maps are more semantically valuable than plain namespaced varialbes but they still have problems.
- use helper methods to make these more useful and readable.
"make documentation the lazy option"
SASSDOC!!!!!!!!!!
- - Herman(beta) ?
toolkits are a byproduct of pattern design
tools should fit you
- "sorry, this hammer only builds patio chairs"
SASS TRUE
- @include test('merges 2 maps')...
add sass-lint to ui component generator
"template logic is great"
code patterns are central to a pattern library

Conversation after

sometimes overtooling happens and you need to pull back
"the way i was taught, the html comes first"
i like to build abstractions so the developers i hand this code to don't even know what's in the classes i write, let alone need to look at them. they can just call this "icon()" function and it ouputs all the mess
claudina trained her to use this "documentation first" approach.
IF YOU DON'T DOCUMENT IT, IT DOESN'T EXIST.

Stephanie Rewis

css written by people who want to write java
how to make specificity wars work?
"how do i make my app look like salesforce?"
turned standardized properties and patterns into "tokens"
using variables for all the styles also allows external developers to override our internal styles.
take current patterns and break them down to their smallest parts
- this is how we identify atoms while keeping scop in mind.
enterprise applications have some unique traits
- set all headings to the same size and then change design with accessory classes
bem + xml = broken xml because dashdash
accessibility is a mandate at salesforce
- semantics
- aria
- REM sizing - people with bad vision just change their base font size, they don't zoom!

Brandon Ferrua

"if you build it, they will come." lot of confidence there...
HOW DO WE LOWER THE BAR FOR ADOPTION?
how do we keep our design system agnostic?
minimize dependencies
you don't know what you don't know!
what makes up your ecosystem?
who are your customers?
minimum deps: tokens icons html css guidelines
- no javascript?
- js isn't easy to understand for all users
- rely on IA and documentation
don't document javascript behaviors with readmes. document it with demonstrations of what happens. document the user experience, not the code.
avoiding potholes:
we have to be forward thinking but backward compatible.
3 releases per year. need to support the last 3 releases.
does this make deployment/attaching a particular feature to a particular release any easier? cherry picking only different versions?
deprecation becomes your new best friend?
as a developer or a consumer, how do i know what is deprecated?
what can we do with the tools at our disposal?
sass deprecate?
- sass mixin to compile or not compile a block of code based on a named variable that represents a semver.

Conversation after

Theo is a pretty good tool to abstract away from a particular stack.
is it a problem when there's 50 classes on div?
is it any better to use a single long fuck classname?
when you deprecate is there a danger of losing trust?
how do you handle making one-offs and tracking them?
What's it like to work on a small team in a huge changing org like that?

Anna Pickard

I like 'hello'. Hello is one of the bets pieces of copy. It means I'm here and you're here and we're about to have a conversation. It's very nice.
how do you scale a feeling of humanity in a product?
styleguide is split into 2 section. the first is the rules: grammar, oxford commas and all that. the second is voice and tone.
it's all about being human. (there's a tiger on the screen...)
"we do not sound like corporate drones"
saying "it's not these things. i'll know it when i see it" is like saying "i've hidden a diamond the size of your fist somewhere in the world. it's not in your laundry room and not in bhutan."
slack is confident, witty, concise, helpful, human, empathetic, courteous.
**who am i talking to?
what emotional state are they in?
what is the context? frequency? placement?
what do i want them to take away from this?**
courtesy is about getting out of people's way.
what can i do to simplify this message?
am i helping the user?
working with transparency, giving up your ego
we are inclusive. puns are fun but they're not inclusive and that's why we don't make them.
playfulness: being in the spirit of the game. wanting to improve..
be nice just because you can. just because it's human.
being truthful, open, authentic and fair.
how human does it sound if i read it out loud?
emojis: not, hat, shooting star, rabbit. "it's not magic"

Conversation after

Dev relations is allowed to use puns sometimes but only because we can't stop them :P.
"you can't sound like this all the time. when a bank says 'you look nice today' you're like 'really???'"
we don't say things like chat, collaborative, rockstars, ninjas, ...
we say "we" because we're a team.
"because i'm human and especially because i'm british i can nice anyone into apologizing"

Over-delegating JavaScript events

Jack Tarantino — Wed, 27 Jan 2016 03:33:40 GMT

Delegating event listeners in JavaScript is generally a good practice. It allows us to create only one event listener for events that might be triggered on a variety of nodes and across multiple contexts. If we're just looking to listen for any given click on a page it would be madness to create an event listener on every single node. So we wait for the event to bubble up to a higher-level node and catch the event there, creating only one event listener on one node that can handle all sorts of event sources.

But what if we go too far with event delegation? What happens then? Let's consider a contrived example: I want to open a modal to sign up for my newsletter whenever someone clicks on a link in the header nav. Here's how I might do it:

// Not recommended
var signup_modal

function show_signup_modal () {  
  signup_modal = $(modal_markup)
    .appendTo('body')
    .show()
}

$('body').on('click', '.js-menu-link', show_signup_modal)

This seems pretty standard. The problem is in the targeting on that last line there. When we let the event bubble all the way up to the body element we're allowing a couple things to happen that are not necessarily desirable. The first of which is that the event is bubbling up and running callbacks on nodes that it doesn't need to. This isn't very costly at all(Maybe a few dozen CPU cycles? Not a big deal.) but it is a bit sloppy to not scope events to only the place they need to be. The second problem is more directly related to that point: The event is firing outside of it's appropriate context and could affect the behavior of other components. If one child node triggers a click event and another far-away child node triggers a different click event, higher level nodes will receive the same type of event and there's no guaranteeing that every developer that's worked on this project has the context available to make sure they don't accidentally listen on the wrong event. So what we need to do is scope the event to a parent that we know is the nearest to the children that will be the event targets.

// Good
let signup_modal, show_signup_modal

show_signup_modal = (event) => {  
  event.stopPropagation()
  signup_modal = $(modal_markup)
    .appendTo('body')
    .show()
}

$('.menu-list').on('click', '.js-menu-link', show_signup_modal)

This way we scope the event listener to only the node that contains all of the nodes that can trigger the event. We also stop the event from propagating up because nothing higher than this node needs to know that this event is firing. This is great because now we can keep our events exactly where we need them much in the same way that we scope variables to local contexts with closures, saving CPU cycles, memory and reducing overhead on our JavaScript app.

Stay pragmatic my friends.

Multiline strings in ES6 JavaScript

Jack Tarantino — Sun, 29 Nov 2015 23:59:53 GMT

The new kid in town is called Template Strings. Template Strings are demarked by a backtick(`) on either end and can contain other backticks if they are escaped by a backslash(ie. let my_string = `some cool \`escaped\` thing`). This new kind of primitive in JavaScript is different from string literals in a few important ways.

New features in Template Strings

Firstly, it can contain newline characters(\r and \n) which means that hitting enter in the middle of a string is now valid! This also means that you can write long-form content or even properly indented HTML without needing to use one of a list of hacks.

The other main difference with Template Strings is that you can interpolate data into them using the `${data}` syntax. This means that instead of concatenating together a list of strings with tons of extra + operators and newlines you can insert data directly into a string. The interpolation operator will evaluate arbitrary content so you're not limited to just already-declared variables. You can insert expressions to calculate a value or even instantiate a new instance of a class and render it to a string. Go wild!

If you'd like to process a template string in your own way, Template Strings also come in a 'tagged' variety. With the name of a function directly connected to a Template String, the string is then processed and fed into the function with the first argument being an array of normal strings(the ones separated by interpolated data) and the following arguments being a list of calculated values from interpolated sections of the Template String. For example:

let number = 33  
let food = 'problem'

function process_string (clean_strings, value1, value2) {  
  let new_string = `${clean_strings[0]}${value1}${clean_strings[1]}${value2}`

  return `${new_string}. Doncha know?`
  // creates a string processed slightly differently.
  // Just completely ignores clean_strings[2].
}

process_string`i have ${ number * 3 } ${ food + 's' }.`  
// "I have 99 problems. Doncha know?"

Multiline string hacks in ES5

Previously there were 3 ways to write multiline strings in JavaScript in a legible way: escaping newlines, concatenating strings, and creating an array of strings.

Escaping Newlines

While this technique keeps all your information in one string, the escapes at the end aren't very pretty and unfamiliar developers might mistake them for part of the string itself. Or just a syntax error. It's also worth noting that these are not real newlines because they're being escaped. Presentationally this technique and the two following don't allow for visible newlines in the string.

var my_string = 'Lorem ipsum dolor sit amet, \  
consectetur adipiscing elit, sed do eiusmod tempor \  
incididunt ut labore et dolore magna aliqua. Ut enim\  
 ad minim veniam'

Concatenating Strings

Probably the ugliest of techniques but the easiest to understand, this method requires a lot of extra markup to get the same string. This method tends to violate syntax linters for having trailing spaces at the beginning or end of lines.

var my_string = 'Lorem ipsum dolor sit amet, ' +  
    'consectetur adipiscing elit, sed do eiusmod tempor ' +
    'incididunt ut labore et dolore magna aliqua. Ut enim' +
    ' ad minim veniam'

Creating an Array of Strings

This is also not super pretty and involves some unnecessary markup. It is, however, the easiest to read and conforms easier to syntax formatting standards. Make sure to include an empty string or another separator in your Array#join method call or it will join your strings with the default separator(,) which can cause problems in many circumstances.

var my_string = [  
  'Lorem ipsum dolor sit amet, ',
  'consectetur adipiscing elit, sed do eiusmod tempor ',
  'incididunt ut labore et dolore magna aliqua. Ut enim',
  ' ad minim veniam'
].join('')

Writing multiline strings in ES6 using Template Strings

Here's an example of real HTML content with interpolated data written in ES5 first and ES6 second:

var kevin = {  
  profile_image: 'http://lorempixel.com/300/300',
  name: 'Kevin',
  title: 'Mover, Shaker, Risk Taker'
}

function get_user_widget_markup (user) {  
  return [
    '<div class="user-profile">',
      '<img src="' + user.profile_image + '" alt="" class="user-image">',
      '<h2 class="user-name">',
        user.name,
      '</h2>',
      '<p class="user-title">',
        user.title,
      '</p>',
    '</div>'
  ].join('')
}

get_user_widget_markup(kevin)

Wow, that's really unnecessarily verbose! How about ES6?

let kevin = {  
  profile_image: 'http://lorempixel.com/300/300',
  name: 'Kevin',
  title: 'Mover, Shaker, Risk Taker'
}

function get_user_widget_markup (user) {  
  return `<div class="user-profile">
    <img src="${user.profile_image}" alt="" class="user-image">
    <h2 class="user-name">${user.name}</h2>
    <p class="user-title">${user.title}</p>
  </div>`
}

get_user_widget_markup(kevin)

Much better. That's 6 lines and 78 characters shorter(at least in the way that I would normally write in each syntax. Feel free to drop me a note about your favorite JS syntax styles. I love to talk about code style). As you can see, writing multiline content in ES6 is simpler, more concise, and doesn't require hacks or workarounds. Using Template Strings we're capable of using newlines without having to explicitly write out \n. Interpolation is much easier as well, requiring less verbose markup and keeping the data in the middle of the string where it belongs instead of breaking up the string. Having written many A/B tests recently as well as other JavaScript code that requires HTML markup to be in the JavaScript files, multiline string support might be my favorite feature of ES6.

ES6 IIFE with fat arrow functions

Jack Tarantino — Sun, 29 Nov 2015 17:45:39 GMT

Writing Immediately Invoked Function Expressions or IIFEs in ES6(Also known as ES2015 now) just got a lot easier with the introduction of fat arrow functions.

(global => {
  const MY_CONSTANT = 'api key or something'
  let counter = 0
  let some_array = [1,2,34,5,6,7]

  counter = some_array.reduce (total, item) => total + item
})(window)

This is great. Much shorter than the old ES5 way of writing IIFEs. Or if you don't need to reference the window/global object and you just hate extra characters:

()=> {
  // code goes here...
}()

I would be hesitant to use this second approach in some cases because it's not immediately clear that the function is going to be invoked immediately. The containing parens(while not super pretty) let you know from line one that this is a function that will be invoked right away. Also be careful using this in fat arrow functions in general. They have a slightly different context than normal functions which can bite you.

As a bit of extra credit there's an even shorter way to write IIFEs in ES6 which is to use the new function context syntax all on its own like so:

{
  console.log("I'm executing code immediately!")
}

This approach is very fun because it requires the absolute minimum amount of code. It doesn't allow us to take/pass arguments though so it's a bit limited in terms of the features we usually use in IIFEs but that shouldn't stop you if all you want to do is create a new closure to hide private variables from outside code.

Jack Tarantino

Frameworkless JavaScript Part 3: One-Way Data Binding

1-way data-binding

Building a shrimp tank

General Notes

Shopping List:

The tank:

The habitat:

The water/chemicals:

The animals:

The food:

The accessories:

Disclaimer

Web development with nothing but a phone and a keyboard

Calendar Tetris is an antipattern

What is "Calendar Tetris"?

Why is Calendar Tetris a bad thing?

How does one wind up playing Calendar Tetris?

How to beat the game

Fix your current calendar by removing meetings

Safeguard your calendar by stopping meetings before they start

Further Reading

When to pair program

The Good

Pair programming does reduce bugs

Pairing does increase code quality

The Gotchas

Pair programming does not eliminate bugs.

Pair programming doesn't fix bad product direction.

Pair programming costs a lot.

You have to do pair programming right for it to mean anything.

Pair programming doesn't make each individual programmer suddenly more senior.

So when are we supposed to pair program?

Pair program when there is a very difficult problem at hand.

Pair program when 2 programmers are at completely different skill levels.

Pair program when 2 programmers have completely different skill sets.

Pair program when you're both new to a language or framework.

But don't pair program if you don't have a good reason for it.

Don't pair program just because you're in a shop that considers pairing the norm.

Don't pair program so that you can catch up on your messages while the other person drives.

Don't pair program if you both already know what you're doing.

Don't pair program just because it's an 8 point story.

Further reading

Frameworkless JavaScript Part 2: Templates and Rendering

Templating and string interpolation

Extra credit: nested properties in templates

Empire Node 2016

Hosts

Matthew Conlin - @mathisonian - Computational Journalist with 538

Jamund Ferguson - @xjamundx - Paypal

Justin J Moses - @justinjmoses - MongoDB

Alejandro Oviedo - @a0viedo - NodeSchool, Thinkful

Seth Samuel - @sethfsamuel - Working at Airtime

Will Blankenship - @retrohack3r - Consultant(Sellsword)

Nick Hehr - @hipsterbrown - Tessel, Namely

Carlos Justiniano - @cjus - Flywheel Sports

Gabrielle Crevecoeur - @nowayshecodes - Technical Evangelist at Microsoft

Philipp Burckhardt - @burckhap - Carnegie Mellon

Sarah Sexton - @Saelia - Microsoft Tech Evangelist, Voxels

Tierney Coren - @bitandbang - Developer Advocate at NodeSource

You're not better than WordPress

WordPress is an excellent choice for a content site CMS

When you should definitely not use WordPress:

All of these things are solved problems and you can do all of them very easily with WordPress:

Say to yourself "It's just a blog" and repeat until you believe it

Supporting smaller audiences for maximum profit

Developing small JavaScript components WITHOUT frameworks

You too can write vanilla JavaScript!

Extra credit

AJAX request in plain JavaScript

DOM insertion in plain JavaScript

Developing without ES6 features

String interpolation

let and const

Arrow functions

Clarity Conf Day 2 Notes

Jina Anne

Chris Coyier

Rachel Nabors

Conversation after

`let` and `const`