Dear Niamh,

Hello, darling daughter! I thought I'd take this time to write to you while I'm here on my own with a comfortable chair and nobody's listening.

I'm in Romania! It's great here!

Performance

First meaningful paint

…with lots of HTML

Zach Leatherman

@zachleat

Which has a better First Meaningful Paint time?
① a raw 8.5MB HTML file with the full text of every single one of my 27,506 tweets
② a client rendered React site with exactly one tweet on it
(Spoiler: @____lighthouse reports 8.5MB of HTML wins by about 200ms)

6 Sept 2019 twitter.com/zachleat/status/1169998370041208832

Code highlighting

Although the single HTML file is larger with SSR, total transfer size on the SSR version is ~10K smaller.

There is practically zero impact on parsing time even though we know the parsed HTML is twice the size when SSR is in play.

remysharp.com/2019/04/09/code-highlighting-server-or-client

Outsourcing

Alex Russell

@slightlylate

The takeaway here is that you literally can't afford desktop or iphone levels of JS if you're trying to make good web experiences for anyone but the world's richest users

14 Jun 2019 twitter.com/slightlylate/status/1159551977178591233

…so serve less…?

The network

Availability

1.1%

of people aren’t getting JavaScript enhancements

gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/

 

it’s not like this.

The proportion of people that have explicitly disabled JavaScript or use a browser that doesn't support JavaScript only makes up a small slice of people that don't run JavaScript.

gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/

it’s like this.

or worse, this.

It’s unnecessarily difficult

Increasingly, there seems to be a sense of fatigue within our industry. Just when you think you’ve got a handle on whatever the latest tool or technology is, something new comes out to replace it.

Drew McLellan, 24ways.org/2017/all-that-glisters/

I've discovered how many others have felt similarly, overwhelmed by the choices we have as modern developers, always feeling like there's something we should be doing better.

The web is incredible these days, but I'm not sure every app needs to be a React-based single-page application, because the complexity is so great in a product's infancy.

Owen Williams, char.gd/blog/2019/you-dont-need-that-hipster-web-framework

SASS, JavaScript dialects, NPM, and build tools solve some shortcomings with front-end technologies, but at what cost? I’d argue that for every hour these new technologies have saved me, they’ve cost me another in troubleshooting or upgrading the tool due to a web of invisible dependencies.

garrettdimon.com/2019/openness-and-longevity/

In the meantime, I could have broken out any text editor and FTP program and built a full site with plain HTML and CSS in the time it took me to get it all running. And the site would have been easier to maintain in the long-run.

garrettdimon.com/2019/openness-and-longevity/

I can still take a complete beginner and teach them to build a simple webpage with HTML and CSS, in a day. We don’t need to talk about tools or frameworks, learn how to make a pull request or drag vast amounts of code onto our computer via npm to make that start. We just need a text editor and a few hours. This is how we make things show up on a webpage.

Rachel Andrew, rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanishing-industry-entry-points/

page 2
					

						go to page 2
					
var Component = React.createClass({
  getInitialState: function() { return {query: ''} },
  queryChange: function(evt) {
    this.setState({query: evt.target.value});
  },
  handleSearch: function() {
    window.location = '/search/'+this.state.query+'/some-action';
  },
  render: function() {
    return (
      
); } });

why

  • component reuse
  • libraries of existing code
  • consistent starting point
  • organisational structure
  • best practices

after the fact

loss of control

loss of control

  • loss of control fetch()
  • reuse HTML virtual DOM
  • different URLs client-side routing

framework

control loading

<portal>

a quick demo

const portal = document.createElement('portal');
portal.src = 'https://jscamp.ro';
document.body.append(portal);
portal.activate();
...
const portal = document.createElement('portal');
portal.src = 'https://jscamp.ro';
document.body.append(portal);
... do whatever you want ...
portal.activate();

so for example, you could animate it

portal {
    position: fixed;
    width: 100%;
    height: 100%;
    transform: scale(0.3);
    transform-origin: 90% 90%;
    transition: transform 300ms ease-out;
    box-shadow: 3px 3px 5px black;
}
portal.expand {
    transform: scale(1);
}
const portal = document.createElement('portal');
portal.src = 'https://jscamp.ro';
document.body.append(portal);
portal.classList.add('expand');
portal.addEventListener('transitionend', evt => {
    portal.activate();
});

solve actual problems

separate pages?

forgets the scroll position ☹

<frameset>?

 

<frameset>?

doesn’t change the URL ☹

SPA?

all of this talk up to now ☹

a bunch of hacky JS?

<portal> and postMessage

another demo

no code in the pages.

no change to the pages.

just enhance how they work.

if your browser supports it.

if ("HTMLPortalElement" in window) {
    document.querySelector("aside").addEventListener("click", function(e) {
        if (e.target.nodeName.toLowerCase() == "a") { e.preventDefault(); }
        let sidebarScrollPosition = document.querySelector("aside").scrollTop;
        var portal = document.createElement('portal');
        portal.hidden = true; var u = new URL(e.target.href); u.hash = "";
        portal.addEventListener("message", e => {
            portal.activate({data: {sidebarScrollPosition: sidebarScrollPosition}});
        })
        portal.src = u.href;
        document.body.appendChild(portal);
    }, false);
    window.addEventListener("portalactivate", function(e) {
        if (e.data.sidebarScrollPosition) {
            document.querySelector("aside").scrollTop = e.data.sidebarScrollPosition;
        }
    }, false)
    if (window.portalHost) {
        window.portalHost.postMessage({done: true, frm: location.pathname});
    }
}
Debruceifier Negative
<script src="vue-status-indicator.min.js">>/script> <script> for (let el of document.querySelectorAll("td.status")) { new Vue({el: el, components: { VueStatusIndicator: VueStatusIndicator } }); } </script>

HTML: smarter than it used to be

<datalist>

<input list="thelist">
<datalist id="thelist">
    <option>Bruce</option>
    <option>Stuart</option>
</datalist>

<fieldset disabled>


CSS scroll-snap

parent { scroll-snap-type: y mandatory; }
child { scroll-snap-align: start; }

Ana Tudor

@anatudor

Just because you don't understand a simple little CSS solution, it doesn't mean it's "weird"/ "crazy". Goes the other way as well. Adding a ton of extra elements just for the sake of having a pure CSS solution when updating a value from the JS would suffice is just silly.

14 Sept 2019 twitter.com/anatudor/status/1172891778032316416

stay in touch

flaki

@slsoftworks

Not knowing stuff is normal.
Not using new and shiny tech is okay.
Feeling bad for all of these is common.
You are not alone.
But you are also completely and perfectly fine, and
you
are
adequate.
💖

15 Sept 2019 twitter.com/slsoftworks/status/1173224870362021888

fight the good right fight

the great thing about standards

the leading edge

So, O darling daughter, you asked, and you probably got a longer answer than you bargained for!

So, O darling daughter, you asked, and you probably got a longer answer than you bargained for!

Still, now you know!

So, O darling daughter, you asked, and you probably got a longer answer than you bargained for!

Still, now you know!

It’s valuable, what we do as an industry.

So, O darling daughter, you asked, and you probably got a longer answer than you bargained for!

Still, now you know!

It’s valuable, what we do as an industry.

We have the power to bring knowledge to the whole world.

Still, now you know!

It’s valuable, what we do as an industry.

We have the power to bring knowledge to the whole world.

To connect people together (when they want it),

It’s valuable, what we do as an industry.

We have the power to bring knowledge to the whole world.

To connect people together (when they want it),

to be the greatest repository of information that’s ever been known.

We have the power to bring knowledge to the whole world.

To connect people together (when they want it),

to be the greatest repository of information that’s ever been known.

I want to keep it that way.

To connect people together (when they want it),

to be the greatest repository of information that’s ever been known.

I want to keep it that way.

That's what I think is important about

the web.

I want to keep it that way.

That's what I think is important about

the web.

 

I love you.

the web.

 

I love you.

 

Daddy.

the web.

 

I love you.

 

Stuart.