April 2 @ 9am

An Event Apart Seattle 2018

Jeremy is going to talk about the present and the future… and he’s going to start with the future.

Plan 9 From Outer Space, one of the worst movies ever made… a science fiction film sort of about the future.

2001: a space odyssey is one of the BEST movies ever made. 50 years old written by Stanley Kubrick and Arthur C. Clarke the science fiction writer. Arthur C. Clarke was no stranger to the trouble of predicting the future… because you’re either going to be conservative and wrong, or

“It’s not prediction – it has rather ad double action like the lenses of 3D glasses. Through one lens we make a serious attempt to predict a realistic future. In the other, __________ (ask Jeremy for the rest of the quote).

Relax your eyes and the results can be startling in their clarity.”

Novels are empathy machines. You get into the mind of someone else!

In history you can enter the mind of someone in the past.

In science fiction you can enter the mind of someone potentially in the future.

Make It So by Nathan Shedroff & Christopher Moessel

• Interaction Design Lessons from science Fiction

The interfaces are all so ridiculously hard to use… everything is so over engineered. It’s not attempting prediction, but in its world building it makes interesting use of design.

“2001: a space odyssey” in a sense WAS trying to do prediction. There was a real attempt to predict what it would be like in 2001. They got so much RIGHT in 1968. But it’s really interesting to see what they MISSED completely. What is present in our today that they missed?

Example: When you need to make a phone call, you still have to go to a machine to make a call. Yes, it’s a video call, but it’s like no one thought it would be possible to walk around with mobile phones. It’s a blind spot.

Blade Running 1982

There are off-world colonies, artificially engineered beings, we literally have flying cars in this future of 2019, and yet when you need to make a phone call you go to a machine in the wall. The idea of a mobile phone not only WASN’T but COULDN’T be predicted. And when you want to pass time you’re not playing on your phone you’re reading a newspaper!!

There’s a subheading on that paper in the movie was “World Wide Computer Linkup Planned”… there are flying cars but the idea of a WWW is still not there!

It does feel sometimes like the present we are living in is a science fiction movie, and Jeremy’s not sure he likes this film. We’re being bombarded everyday with self driving cars, drones, AI, VR, the block change…

Is our present a utopian future? A dystopian? Is there a difference?

Effectively in terms of literature are we in a dream or a nightmare, or is it a matter of perspective?

Is it a matter of how you treat this onslaught of technology?

Jeremy has been analyzing his excitement and fear about various technology. In advertising you either get somebody really excited about how great their life will be if they buy your product, or you show them what it would be like without that product and create a void they have to fill. Likewise when selling the news you go for getting people excited or fearful about something.

Jeremy doesn’t like the idea of making decisions on fear. “Never make any decision out of fear” – Bruce Sterling.

He tries to live by that and analyze his own decision making process. But at one point his colleague pointed out that fear is a very useful evolutionary adaptation. Without fear we would have walked up to a bear and gotten eaten.

Without a level of fear we wouldn’t be alive!

If you only have pure excitement about everything that’s equally dangerous… so never make any decision purely out of excitement.

So let’s talk about EXCITEMENT and APPREHENSION in terms of technology.

Anything in the world when you’re born is natural an ordinary. Anything invented after you’re 15 is exciting and revolutionary and you could probably get a career in it. But anything invented after you’re 35 is against the natural order of things.

So is it because he’s OLD? No, because he still gets excited about things.

“I wonder if I have 20 years of experience making websites, or if it is really 5 years of experience repeated 4 times…” – (get author from Jeremy)

He doesn’t fear change… he fears a rapid rate of change. There’s a difference.

There is a book (probably no longer in print) called How Buildlings Learn by Stuart Brand about architecture. In it, Frank Duffy talked about this idea of sheering layers with building. A building, properly conceived, is several layers of longevity. The site it’s built on is centuries, maybe even millennia without change. But once you get higher into the plumbing you want to change every decades, and the room layouts you may want to change every few years, and the furniture you may want to change more frequently. Each layer depends on the one below. You can’t have the structure without the site for example.

Then Frank applied the topic to more general ideas and called them ‘pace layers’ – things moving at a different rate of change. We get a nasty feeling when one of these layers moves too fast. When Governance moves too fast we’re in a revolution, with Fashion (popular culture) if it moves too slowly we’re bored.

Fast learns, Slow remembers. Fast is discontinuous, Slow is continuous. Fast and Small instructs Slow and big by incurred innovation and occasional revolution. Slow and big controls fast and small by constraint and constancy. Fast gets all our attention, but Slow has all the power. And in a durable society, each level is allowed to operate at it’s own page, safely sustained by the slow levels below and invigorated by the fast levels above.

Jeremy still gets excited bout the MATERIALS of the web (HTML, CSS, JavaScript), and is apprehensive of the TOOLS of the web (git, nom, yarn, sass, gulp, grunt, table, web pack… things designed to make you work better and faster). The tools are useful, but there’s something about them… they remind him of the Juicero which was this fancy expensive machine that made juice by putting their expensive juice packages into the machine and then magically out comes juice. BUT THEN SOMEONE REALIZED YOU COULD JUST SQUEEZE THE JUICE INTO A CUP. The tools feel like that to him. He could just use HTML, CSS, and JavaScript!

I get excited about creating things that can be used, but he doesn’t get excited about things that help him as a developer. If there’s a technology that could help him but hurt the end user potentially, he doesn’t want to use it.

No matter what tools you use, the end user always get the same stuff: HTML, CSS, and JavaScript in the browser.

CSS Frameworks, JavaScript libraries, really benefit the developer but there’s a bit of a tax because they have to be downloaded by the client. the user has to download the library for the developer to benefit from it / use it. Sometimes people reach for these tools because it will make their life easier without considering the impact on the user. It’s a balance and you have to weigh them.

He doesn’t get too excited about these tools because he treats them like cattle not pets. Don’t get too attached because you know in 12 months’ time everyone will get excited about something else.

The way these tools position themselves is as ‘the easy solution’…. but that if you want the real power you’ve gotta get into the guts of the RAW languages… but that doesn’t seem right to him.

Jeremy thinks we can layer our technology right into the pace layers:

Top – Fast

JS (the ecosystem of frameworks and libraries and way of thinking about JS is super fast)

CSS (moves a bit faster – recently we have Grid and Flexbox)

MATERIALS (HTML – moves at a fairly steady pace)

URLs

HTTP (Recently we have HTTP2)

TCP/IP

Bottom – Slow

By mapping onto these pace layers, it makes him feel ok about this. It’s ok that JS is overwhelming and moves fast and is hard to keep up with. It’s MEANT to be – it’s the fashion layer. Fast learns but Slow remembers… so, it’s in the JavaScript layer we try stuff out until it moves down the layers into CSS or HTML. When something becomes so popular, it moves down.

Every day we choose technologies to build websites with. There’s a rule he likes to apply:

The Rule of Least Power: Choose the least powerful language suitable for a given purpose.

That doesn’t seem to make sense at first… but the least powerful thing is the one that’s more robust, and steady… it’s less powerful but longer lasting. When he’s building, he always asks ‘can I do something in a simpler layer?’

This is a choice he makes, and you don’t have to build websites this way. You CAN just do JavaScript, skip CSS/HTML/URLs and jump right to HTTP and TCP/IP. This is a single level app! Everything is done with JS!

It’s a testament to the flexibility of the web that you can choose to build this way.

Jeremy doesn’t like to build this way because it turns the web into a binary choice – where something either works great or doesn’t work at all. This was the case with Flash. If you have the Flash plugin you get 100% of what the author designs. If you don’t have the plugin, you get none of it.

The power of the web is that we can have layers of experience. There can be intermediate stages that for different browsers / networks, it can work OK… so it’s not either 0% or 100%. So we’re moving from a model where it either doesn’t work or works great where there’s a steady rate of experience / change and nobody gets left behind. But this isn’t the mindset he sees in most developers – most are leaning towards the either/or position.

The tools we use favor the visible (Sketch & Adobe Photoshop). What we design in these tools is typically the best case / works great scenario. And of course, this makes sense. Yo can’t design every single scenario. But then we take the biases from these design tools and take them into production and we start building as if we only have 2 options – working great or not working at all.

Design tools are all about making things picture perfect… but maybe they should be move vague. They confine us to an unrealistic and hard to realize goal – one of perfection. These tools are highly precise and they demand precise execution.

We’re making design decisions in these tools and we get sign off from ‘the boss’ or ‘the client’ and then when we move to development people are unhappy. So let’s DECIDE in the browser instead to avoid that issue!

Editor’s note: This is actually WHAT WE DO with our clients. We design AND develop AND decide in the browser, because our first review is actually showing the client a live website that they can see and interact with. Client changes are made IN THE BROWSER so we can discuss what is possible and what is going to cost more to do because it will take more work.

“I love designing in layers – looking at the page and thinking about how it will change if fonts aren’t available or JS doesn’t load or someone is using a reader.”

The killer feature of the web is accessibility. As long as you can access a URL, you get to have that content. Yeah it might not look the same as it does for someone else. It isn’t CONSISTENT, but it’s UBIQUITOUS. But he can see how someone could hate that and want everyone’s experience to be consistent. So he can understand why some people chase consistency… but he doesn’t think that’s the way of the web.

Example: Let’s say you want to have someone select their country.

You could use a select element – it just works, it comes with keyboard control, it’s accessible, etc.

So why wouldn’t someone do this? Well, it’s inconsistent to style a select element… so:

But if someone wants to be consistent and have control, you have to literally RECREATE the select element. You have to recreate all the stuff the browser was giving you for free. So even though you’re throwing all the side

---

His first layer was a select element, and it would work no matter where you accessed it from. Then he would layer on top of that enhancements to try and make the review stars LOOK like normal review stars and behave a certain way.

When you break things down into their component parts, you get some really powerful stuff at a simple level.

Atomic Design is breaking things down into their modular components, and asking what is the purpose of these components? He’s advocating we go a step further = that we go INTO those components and look at the elements

The HTML elements are the SUB-Atomic level of your design.

Someone might say this only works for something simple, but if you’re designing something complex it doesn’t work. But Jeremy disagrees. He doesn’t think there’s a dichotomy between simple and complex – eh thinks you can BEGIN with something simple and GET to something complex by layering on technologies.

We LIKE having binary choices.

Everything has some element of interactivity (web app) and everything has some element of consumption (website). It’s a continuum.

Sounds pretty cool, right?… it’s a neat marketing term. You’ll be hearing about these and some of the benefits of them. The way he sees it, a progressive web app is just a layering of technology:

1. Website running on HTTPS
2. Then you have a web app manifest (it’s a JSON file with Meta Data) – used to be in the <head> of our documents in our
3. Then SERVICE WORKER – it’s JavaScript but it gets installed on the user’s machine and acts as a proxy and intercepts requests. IT’s like putting a good kind of virus on your computer. Then anytime you visit a URL on that site it checks with the SERVICE WORKER first. Very powerful stuff. 

What he loves about this is you go to a website and it’s like hitting a NORMAL website. And Service Workers can ONLY ACT AS AN ENHANCEMENT. So any website can be a progressive web app. Switch to HTTPS, add a JSON file with metadata, and add a SERVICE WORKER and you’ve got a progressive web app!

With a service worker, once someone has interacted with your website once, the web ‘disappears’!!! Your website works even without an internet connection! That opens the door for all kinds of design decisions for user experience.

For example you could set a custom ‘no internet connection’ page which is good for branding but nothing too revolutionary, nothing very different than a custom 404 page.

Other use cases / examples:

resilientwebdesign.com – a free book he wrote (actually free) – and once someone has visited the site, if they go back offline they still see THE ENTIRE BOOK!.

adactio.com – Jeremy’s website: as you’re browsing his site he’s caching as you go, so if you go offline you get ‘hey you’re offline but here are some things you’ve been reading’. A more powerful pattern is where the user chooses what would be available after they go offline.

archive.dconstruct.org – they’ve put the power into the users hands to save a talk offline.

BUT, you can’t assume any of this is available, you can’t assume that SERVICE WORKER is even available. But that’s ok, because these are ENHANCEMENTS. You aren’t doing any harm by using it as long as you’re applying it in this layered way.

So, what will happen is over time more and more browsers will support these powerful APIs and your enhancements will work for more and more people.

SO YOU’RE DEVELOPING FOR THE FUTURE!!!

Things that might seem small to you can affect a user’s experience in a big way – like choosing to build in a layered way.

We are living in the future of yesterday and our present it somebody else’s future. That brings with it a lot of responsibility. Somebody predicted that this present would be a science fiction future.

Ida Rhodes delivered a talk to the electronic computer symposium. She would have been called a ‘computer’ at the time.

She presented a talk on ‘The Human Computer’s Dream of the Future’ where she basically predicted the smart home – she was already seeing a networked world of computers already. She realized the room of people she was talking to would be building this word.

PARAPHRASED QUOTE: “Most present day inventions seem sot me do not differ much from how people have been imagining them for decades…. But I doubt whether even the most fertile imagination possessed by a scientist decades ago could have predicted the electronic computers we have today…. and I envy anyone who gets to help build the future”