WRITING LESS DAMNED CODE

@heydonworks

How to write code

~~How to write code~~

How to not write code

~~How to write code~~

~~How to not write code~~

How to avoid writing code

Loosely based on
heydonworks.com/article/on-writing-less-damn-code

approx 1000 words

Simplicity
Performance

+ fringe benefits...

You can leave out comments
There's nothing to maintain
Can use a combination of tabs and spaces

DON'T CODE SOMETHING AT ALL

You're welcome, Twitter.

— Carousels —

How do I support touch here?

What should be the accessible name for this?

What are these things even called?

ALL THE WRONG
QUESTIONS

"How do I get out of coding this thing everybody hates?"

“Almost all of the testing I’ve managed has proven content delivered via carousels to be missed by users. Few interact with them.” — Adam Fellowes

“Carousels pose accessibility issues for keyboard and screen reader users that simply cannot be adequately addressed by markup or hacks. Carousels are this decade's <blink> tag.” — Jared Smith

“We have tested rotating offers many times and have found it to be a poor way of presenting home page content.” — Wider Funnel

Unprogressive
Non-enhancement

"Carousel"

— Social media buttons —

You're welcome, Redditers.

<a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fwww.heydonworks.com%2Farticle%2Flook-at-this-shitty-tweet-button&amp;ref_src=twsrc%5Etfw&amp;text=Look%20At%20This%20Shitty%20Tweet%20Button%20%7C%20HeydonWorks&amp;tw_p=tweetbutton&amp;url=http%3A%2F%2Fwww.heydonworks.com%2Farticle%2Flook-at-this-shitty-tweet-button&amp;via=heydonworks" class="btn" id="b"><i></i><span class="label" id="l">Tweet</span></a>

It's just a link.

<a href="https://twitter.com/share?url=http://www.heydonworks.com/article/look-at-this-shitty-tweet-button&amp;text=Look At This Shitty Tweet Button">Tweet</a>

BUT DOES ANYBODY
USE IT?

10K + tweet button = 50K

IF YOU HAVE TO POO YOUR PANTS,
AT LEAST USE YOUR OWN POO

— Helpful™ popups —

— WAI-ARIA —

The First Rule of ARIA
is Don't Use ARIA

Stop hitting yourself, ARIA!

<div role="heading" aria-level="2">Subheading</div>

<h2>Subheading</h2>

<div role="button" tabindex="0">click me</div>

<button>click me</button>

<div class="image" role="img" aria-label="picture of
 cat" style="background-image:url(images/cat.png)"></div>

<img src="images/cat.png" alt="picture of cat">

ARIA isn't for making HTML accessible. It's for making inaccessible HTML accessible.

heydon.github.io/beadz-drum-machine/

No need for ARIA semantics
No need for JavaScript state changes
Usable interface without CSS

— Text resizing —

"But what if the user doesn't know about these?"

Want to support the vision impaired?

Relative units for everything
```
user-scalable=no
```
Avoid fixed/absolute positioning

"We should have a text resizing widget to help people with low vision!"

— CAPTCHAs —

"Completely Awful and Pointless Traps set by Computers that hate Humans, Apparently"

<div class="invisible">
  <label for="test">Test</label>
  <input id="test" tabindex="-1" 
  aria-hidden="true">
</div>

You could just...

— Device break points —

BE FLEXIBLE;
BREAK WHERE
THE CONTENT BREAKS

Adjusting font-size for viewport width automatically

html {
    font-size: calc(1em + 1vw);
}

This really saves on breakpoint code

— Grids —

position: fixed

START MOBILE FIRST
AND STAY THERE.

✘ Grid systems / multi-column layouts

✓ Putting things next to things

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -.5em;
}

.grid > * {
  margin: .5em;
  flex: 1 0 10em;
}

Pretty much all you need:

Breakpoint free!

/* display: flex; */

https://github.com/Heydon/fukol-grids

93b minified

Dependency management?

Just copy/paste!

OR...

— Single-page apps —

= 1.2MB

:target

:target

https://my-app.io#view1

<div class="view" id="view1">
  <!-- view content -->
</div>

.view { display: none }

.view:target { display: block }

View change events are as simple as

onhashchange

No back button woes!

LESS IS MORE

LET'S INVESTIGATE THIS FURTHER...

LESS IS LESS

LESS WEIGHT

LESS COMPLEXITY

LESS DISTRACTION

LESS BOTHER

LESS BULLSHIT

AND LESS TALKING
Thank you!

WRITING LESS DAMNED CODE

approx 1000 words

— Carousels —

"How do I get out of coding this thing everybody hates?"

Unprogressive Non-enhancement

"Carousel"

— Social media buttons —

— Helpful™ popups —

— WAI-ARIA —

The First Rule of ARIA is Don't Use ARIA

ARIA isn't for making HTML accessible. It's for making inaccessible HTML accessible.

— Text resizing —

"But what if the user doesn't know about these?"

Want to support the vision impaired?

"We should have a text resizing widget to help people with low vision!"

— CAPTCHAs —

— CAPTCHAs —

— Device break points —

Adjusting font-size for viewport width automatically

— Grids —

Pretty much all you need:

Breakpoint free!

93b minified

Dependency management?

— Single-page apps —

View change events are as simple as

Unprogressive
Non-enhancement

The First Rule of ARIA
is Don't Use ARIA