DEV Community: Morten @ home

AI is a Loom: The End and the New Beginning of Web Dev

Morten @ home — Thu, 28 Sep 2023 20:08:10 +0000

Web dev as we know it is deprecated. We just haven’t downloaded the latest version yet. What comes next is a metamorphosis, a paradigm shift, a revolution changing how we work, how the web works, and everything we know.

In March 2023, OpenAI CTO Greg Brockman drew a rough sketch of a website on a livestream, uploaded it to GPT, and got fully functional HTML, CSS, and JavaScript in return. That feature - dubbed “multimodal GPT” - is shipping to all ChatGPT users in the coming months. Soon you'll be able to open an app, provide some instructions, and have a fully designed and populated website with real content, an ecommerce store, and a social media marketing campaign built in minutes with the help of AI.

youtube.com

“I’m not saying coding is a dying craft; I’m saying the craft of actually writing code on a keyboard to be input into a coding environment for further processing will become a narrow specialty. Most people who write code today will not be writing code in the near future. Many of them don’t need to and shouldn’t have to write code today! Writing code instructing computers to do things when we have software that writes better code for us makes no sense, and this whole notion of everyone learning how to code feels more and more like telling highschool students their future employment hinges on their ability to master T9 texting.”—Me, in an email dated November 2021

Web development stands on the precipice of an AI-driven metamorphosis. In front of us, the demarcation line between two paradigms: The old world of human-written code aided by machines, and the new world of AI-generated code aided by humans.

For the web, AI is the Jacquard loom.

For most developers, this means transitioning from writing and debugging code to directing AI what to build and checking its work. AI represents a Jacquard loom moment for web development, transitioning our work from hand-coding the fabric of the web to using that fabric as material for building new experiences.

The implications are enormous, not just for our work but the web's future. As AI becomes part of our practice, our role shifts from writing standards-based, accessible, progressively-enhanced code to ensuring AIs use the latest, most advanced standards to build the future. If we don’t embrace this new role, progress will stall as AI biases established standards and ignores new tools and best practices.

Here's what I see:

Very soon the public will access AI services that create websites in minutes from prompts, sketches and assets. Wix teased this, and competitors aren't far behind.

I'd be shocked if Canva and Figma don't unveil full "draw it, AI builds it" services by year's end. Soon there will be ChatGPT plugins that build websites for you from scratch. This is inevitable.

When I say this out loud, the immediate response is usually some version of "AI can't write good code" or "AI doesn't understand users" or "AI makes constant mistakes." All true, and all irrelevant. This isn't about AI writing code or autocorrecting our code. AI will instead use the well-documented and well-established frameworks, templates, build processes, and automation we’ve created to make our work easier to weave together the websites and apps we ask for.
For walled gardens like Wix, this is straightforward: their back-ends, systems, and design languages allow AI to rapidly wire sites to user specifications. And that's just the start. We'll soon see new semi-agentive tools supporting various stacks, so you (with the help of an AI) can select frameworks, design systems, ecommerce platforms, etc. based on project needs without writing or knowing how to write code.

Look at what Builder is doing, and then add an agentive AI on top and you start getting the idea:

What People Want, What Automation Provides

Two massive waves of progress are converging:
Developers have spent a decade building automation tools, frameworks, and systems to improve dev experience. You can now spin up a Next.js site in GitHub Codespaces in minutes without writing a single line of code. Component-based frameworks provide code consistency and add LEGO-like block assembly to web development. Design systems, component libraries, style guides, and tokens enable rapid prototyping and consistent UX/UI. Linting, optimization, accessibility, testing, CI/CD are largely automated. Bridging layout and code is reality. Often, we just connect these pieces. AI serves well as an automated and intelligent loom weaving these pieces together into workable materials.

On the user side, people want friction-free, no-maintenance, always-on experiences. Faced with the choice between the DIY bazaar of the open web and the shiny mall of app-based walled gardens, they pick the moving sidewalk of least resistance. And they are willing to pay for that convenience; with money and by giving up their data and privacy to surveillance capitalism. Where publishing on the web used to mean standing up a WordPress site (or paying someone else to do it), today bloggers, creators, influencers, and small businesses opt for TikTok, Instagram, YouTube, Medium, Substack, Shopify, and Linktree.

The web we lost is a bygone web a larger and larger portion of the public never experienced, and concepts like self-hosting seem archaic and inefficient to the masses. Counterintuitively AI may help bridge this gap and reignite the interest in carving out your own space on the web by lowering the barriers to entry down to describing what you want and watching it manifest.

What is pushed down as these waves converge and elevate the capabilities of the web-using public is the need for traditional developers. When the options are either an AI site from Wix built from a prompt in minutes or a complex and expensive custom build that takes months to complete, there's no choice for most people and businesses. When the Jacquard machine automated weaving, hand-woven textiles transitioned from an essential commodity to a luxury art form, and the expertise of manual weaving morphed from a commodity skill into an artistic pursuit. Weavers still exist, and bespoke fabrics are still made, but the vast majority of textile products were made by machines guided by humans who spent their time designing the products instead of making the materials. That’s what comes next for the web.

AI Creates Opportunity Space

This may sound like AI replacing humans. It's not. Instead it’s a fundamental shift and refocusing of the role of the developer: From writing code to auditing AI-written code. From knowing how to wire together different frameworks to architecting the system that serves up the website. From fighting with CSS to fine-tuning AI-powered user experiences.
The people currently working as coders will take a step up the ladder to focus on higher-order capabilities, using their expertise in languages and frameworks to help AIs produce the best output instead of doing the grunt work of writing the code.

Web dev as we know it is dead. What comes next is a metamorphosis, a paradigm shift, a revolution changing everything we know.

Our new human focus as we move into this future together is to ease the persistent tensions found in the intersection between technology and humanity. AI can't conduct UX research, design novel experiences, innovate standards and best practices. That was always and will remain our territory. As AI takes over the work of weaving the fabric of the web, we do the work of making new things with those materials while improving their quality and inventing new ones.

In the short term, we'll become AI managers - customizing, configuring, ensuring user flows and information architectures make sense, monitoring the generated code to ensure the latest standards are in use, and counteracting the inherent bias of AI to repeat prevalent patterns even when they are outdated. We'll shift from writing code to deciding what the code should accomplish. To do that, we must all become experts at the bleeding edge of code, and invest our time in innovating new standards, patterns, and frameworks for the AIs to use. It’s a whole different job needing a whole new version of the skills we’ve always had.

This transformation is happening now. For consumers and SMBs, it will be lightning fast. For institutions and large enterprises it will be slower, hindered by legacy systems, institutional inertia, and resistance to change. But it's coming.

For web workers, it is no longer enough to know the core languages and established best practices. UX, interaction design, accessibility, and innovation is our new bread and butter, built on a strong foundation of modern web standards and bleeding edge HTML, CSS, JavaScript.

The future of the web belongs to those who strategically apply AI to meet user needs. With proper guidance, AI can supercharge our work, provided we put ethics, accessibility, user experience, and innovation front and center.

We build the future with every decision we make. How we decide to work with AI decides what future we get to live in.

Cross-posted to mor10.com and LinkedIn

CSS Grid Magic: A practical card example

Morten @ home — Fri, 28 May 2021 18:02:27 +0000

This example is from my talk at An Event Apart Spring Summit where I discussed modern CSS layout modules and how to incorporate them into our practices and workflows.

A Card

A graphic very similar to this one popped up in a CSS forum I follow, along with a question: How do I make this layout using CSS?

The standard answer to this is to add some extra nesting <div>s and use various layout hacks like negative margins, positioning, etc.

When I see examples like this, my first questions are always the same:

What is the simplest HTML representation of this content? Can I make this design happen using pure CSS without modifying the HTML?

This is the goal of web development after all: The complete separation of content (HTML) from its presentation (CSS).

Go to Codepen to see the complete live example.

Looking at the design, there is an image, and some text. One way of representing this in HTML is using a <figure> wrapped around an <img> and a <figcaption>. Here’s what that looks like:

<figure class="card">
  <img src="…" width="640" height="640" alt=""/>
  <figcaption>
    <blockquote>We shape our tools (…)</blockquote>
    <cite>Attributed to Winston Churchill, Marshall McLuhan(…)</cite>
    <p><strong>Caju Gomes</strong>, <a href="…">Unsplash</a></p>
  </figcaption>
</figure>

That solves the content part. Now for the presentation.

Layered layouts

The real challenge in this design is the many layers. There’s a faux shadow, then the card itself which serves as a background image. Then there is the image, the text which overlaps the image, and the image credit.

Stacking elements one on top of the other using CSS is traditionally achieved through clever hacks using either positioning, negative margins, or both. However, CSS grid allows us to place any child element of the grid anywhere on the grid, including in the same cell or cells as other elements. So if we need to stack elements on top of one another like in this design, CSS grid lets us do that in a clean and controlled way.

The first step is to figure out what the grid should look like:

Next, mark up that grid in CSS. The <figure> becomes the grid parent:

figure {
  display: grid;
  grid-template-columns: 3em 9em 1fr 1fr 6em 3em;
  grid-template-rows: 3em 9em 1fr 6em 3em;
}

With the grid defined, place items on that grid. There are many ways of doing this, the easiest of which is to just position the times based on the grid line numbers. First the image:

img {
  grid-column: 4/5;
  grid-row: 3/4;
}

Then the text which sits inside the figcaption:

figcaption {
  grid-column: 3/5;
  grid-row: 3/4;
}

This puts the text in the correct general area of the grid, and on top of the image, but the design calls for more control over the exact placement of the text.

To achieve this, add a second grid for the <figcaption> element and position the items within on that grid:

figcaption {
  grid-column: 3/5;
  grid-row: 3/4;
  display: grid;
  grid-template-columns: 3fr 1fr 2fr;
}

That gives us the image and the text, but the design also calls for a background image and a faux shadow. What to do...

Pseudo elements as grid elements.

An interesting of both grid and flex is pseudo elements become first-level children of these containers. That means if you create a grid container around a single item and then define ::before and ::after pseudo elements for that item, the grid now has three grid items: the element itself and its before and after pseudo-elements, and each will be placed in its own grid cell. This opens up an interesting new possibilities, one of which can be used to solve the current layout problem.

The design calls for both a background image and a faux shadow.

Using pseudo elements both of these can be added in a non-destructive way that will gracefully degrade to older browsers without grid support.

The background image first. For this I’ll use ::before because it should appear before the actual card content in the DOM order. Place the new (pseudo) grid item on the existing grid, and then fill it with a background image:

figure::before {
  grid-column: 2/7;
  grid-row: 2/6;
  content: "";
  display: block;
  background: white;
  background-image: url(…);
  background-size: cover;
}

Next, the faux shadow. I’ll have to use ::after for this, which technically places the shadow after the card in the DOM order and therefore ends up on top of the card.

figure::after {
  grid-column: 1/6;
  grid-row: 1/5; 
  content: "";
  display: block;
  background: #e0dde4;
}

That’s easily solved by moving the item along the z-axis using z-index:

figure::after {
  grid-column: 1/6;
  grid-row: 1/5;
  z-index: -1;  
  content: "";
  display: block;
  background: #e0dde4;
}

This last part is another important feature of CSS grid. Because grid allows us to stack things on top of each other, we are effectively working in the 3rd dimension; literally layering content on top of content like a stack of cards. This layering is done based on DOM order, so the last item ends up on top of the stack. We can use the z-index property to change this order to whatever we want. In other words, with Grid we are now for the first time able to lay out content along three axes: horizontal, vertical, and depth.

Backwards compatibility

At this point there’s a good chance you’re thinking something along the lines of “Sure, this is cool, but grid doesn’t work in older browsers, so you need to provide fallback options.”

Surprisingly, the answer is no.

This setup doesn’t require any accommodations for older browsers!

You can test it for yourself. Open the example in your favorite browser, go to the developer tools, and disable the two instances of display:grid.

What you get is the main image followed by the text. The faux shadow and background image disappear as if by magic, and the visitor gets only the content they are looking for, styled in a way that makes sense in their environment.

The “magic” at play here is basic progressive enhancement: Take advantage of whatever capabilities the current browser has without reducing the experience for those without those capabilities.

Of course we could use @supports to detect grid support and build out custom styles for browsers without grid support. If I published this on a real website, I would wrap the ::before and ::after rules using @supports to prevent older browsers from downloading the background image. But, as you see this is not necessary unless you want to add specific fallback styles.

The standard argument against this approach is that the result of doing nothing will be different users having different experiences. From my perspective, that's an argument with little substance: We have used responsive web design since 2010, so for the past 10+ years we've been shipping websites that look different on different screens. This is no different, except the responsive axes have been expanded to include not only viewport width and height but also browser capability.

At the very onset of this project I defined semantic HTML, and I said I didn’t want to make any changes to the HTML to accommodate the style. Thus every browser will get semantic parsable content that makes sense. Then I use CSS to progressively enhance the experience when grid is available in the visiting browser.

So what happens to that faux shadow and background image? Inspect your code and you’ll see when grid is disabled, they each collapse to a height of 0px. Normally when we add pseudo elements using ::before and ::after we set their width and height which would result in them showing up when grid is not present, but since I’m using grid, that’s not necessary: Given no instructions, grid’s default treatment of grid items is to stretch them to fit the cell they are presented in. As a result, the faux shadow and background image automatically stretch to fill the grid cells, and collapse to a height of 0 when no grid is present.

CSS layouts are now a platform feature

For as long as I can remember, CSS layouts were always a collection of carefully crafted hacks. That time is now over. Between grid, flex, float, multicol, and table, we have all the layout features we need built into the platform to make the layouts we want without having to modify our markup or employ clever hacks. Now it's our job to realign our way of thinking about layouts to use these modules in our daily practice. I built this example to give you a brief glimpse of what is possible and how these new modules open doors we didn't even know existed before. I invite you to join me as we explore this new future of CSS layouts together.

For more examples, and talks from many of the leading voices of our industry, head on over to An Event Apart and sign up for the 2021 Spring Summit!

Originally published on LinkedIn.

The Internet is an Essential Service.

Morten @ home — Fri, 24 Apr 2020 17:24:05 +0000

“You can consult canada.ca/coronavirus to get the best updated information about the spread of the virus.” – Justin Trudeau, April 3rd, 2020

A daily mantra rings out from government officials around the world: The call to visit official websites to get the latest information on the COVID-19 pandemic and to access essential services. Yet to many constituents, accessing the internet is not an option, because internet access is still considered a luxury available only to those who can afford it. This has to change.

Over the past two months, everything from education to work to ordering and delivery of essential goods to basic communication has moved online. COVID-19 has made one thing very clear: Internet access is a necessary condition for the ongoing functioning of our society, and every person should have access to fast, reliable, and unfiltered internet at a price they can afford.

The internet is an essential service. It is time we take political action to ensure every person has access to it.

The privilege of access

Late last year, a video surfaced on social media showing a 10-year-old boy doing his homework on a display tablet in an electronics shop. The description read “Humanity at its best...❤️ This child doesn’t have internet access at home, so a store in the shopping mall allows him to use their tablet to do homework.”

For many, this was their first introduction to what’s been labeled the “Homework Gap,” a sub-segment of the Digital Divide. Millions of students around the world do not have access to the internet and are therefore not able to access the full educational resources made available to them.

Flash forward a few months to today, and that electronics shop is closed, as is the school, the library, the coffee shop, and any other place that 10-year-old boy relied on to access essential online services. And he is joined by millions of others, young and old, in cities and in rural areas, all over the world, at home, without the ability to access the websites their elected representatives so urgently point them to.

Inequity is the norm

Almost half the world’s population has no access to the internet. At all. Those most affected are, as seems to be the case for most things, women, the poor, and the disenfranchised. Why? Because internet access is considered a luxury, and its availability is contingent on large media companies deeming your particular region of the world worthy of investment, and your ability to pay often excessive fees to get access to it. Somehow, in our relentless pursuit of faster connections and devices giving access to vital (and entertaining) online services, we have glossed over this inequity. COVID-19 took a steel brush to that veneer, forcing upon us the reality of how vital a fast, stable, and unfiltered internet connection has become to our lives. We have gone from tweeting about how nice that store was for letting that kid do his homework on a display device to realizing our home internet is our lifeline to information, income, connection, and entertainment. The internet has become essential to our lives, yet we treat it as a privilege afforded those fortunate enough to live where a connection can be established and wealthy enough to pay the excessive fees for access.

A public good

Late last year, a boy in an electronics store caught the attention of the internet and people started talking about providing proper equipment and connections to students. When COVID-19 hit and school children were sent home and told to attend classes online, school districts booted up ad-hoc solutions like parking digitally equipped buses at community sites to provide access for students. That’s a dollar-store band-aid on a gaping 20-year-old wound.

The digital divide causes hardship to millions of people by depriving them of essential access to the internet. COVID-19 did not create this problem – it merely made it impossible to ignore. Banks, government services, education, shopping, news and information, much of what we consider necessary conditions for functioning in modern society had already migrated online prior to COVID-19. Today the internet has become the only means of access to many of these services. It can no longer be considered a luxury, and its availability can no longer be contingent on the whims and profits of large media corporations. That’s why the World Wide Web Foundation is working to label the open web a public good, and that’s why you and me and everyone else need to demand political action to make the internet available to all.

Let’s not beat around the bush any longer:

The internet is an essential service. As such, any limitation of access to a person or group based on their physical location, income level, or any other reason is effectively an act of discrimination.

To the elected representatives of the world I say this: Declare the internet an essential service. Guarantee equitable access to fast, reliable, and unfiltered internet for all. Put plans in place today to connect the world in a way that promotes human flourishing over corporate profits.

To the media corporations who have grown fat and complacent on profits from connecting people to the things they need I say this: You’ve had your fare share and more. You succeeded in making the internet an essential service. Now you must act like it: Do your civic duty and share that wealth with the world by building solutions that put human connection above shareholder profits.

We have awoken into a new and unfamiliar world where we all feel a bit more vulnerable. It is in times like these we find solace in solidarity with other people and with ourselves. Let’s do this small thing together to better the world for everyone.

Header photo by dullhunk. CC BY 2.0

Cross-posted on LinkedIn and mor10.com

Value Neutrality and the Ethics of Open Source

Morten @ home — Wed, 11 Mar 2020 18:42:32 +0000

2019 was the year of the “ethical source” licenses – or ‘open source with a moral clause’ licenses. It was also the year many in the open source movement labeled any attempt at adding moral clauses to open source licenses not only made them not open source licenses, but were a dangerous attack on the core principles of open source.

The Ethical Source movement, exemplified by the Hippocratic License, the Anti 996 license etc, has created a deep rift in the open source community; between those who aim to protect the core values of open source ideology as defined by the Four Freedoms, and those who believe granting open source creators the capability to impose moral clauses on the use of their software is essential to ensure software is not used for evil.

The rift has opened because adding moral clauses to a license is effectively limiting the use of whatever the license is applied to, which stands against the core idea of open source as absolute freedom for the end-user.

The Tenuous Position of Value Neutrality

From my perspective this rift exposes what I’ve long felt is a central flaw in both open source licensing and open source ideology: The Four Freedoms concern themselves only with software freedom – as in the freedom of the software itself – but are in reality imposing value neutrality on whatever is licensed under them: The Four Freedoms protect the freedom of the software itself, and do not concern themselves with what the software does or how it is used. As an ideological platform, they are too narrowly scoped to hold the weight of our societal responsibilities as the designers and builders of modern reality.

Let me explain:

If evil people use open source software to do evil things, there is nothing the creator can do about it. Because doing something about it would be limiting the freedom of the software which goes against open source ideology. And in the view of many open source ideologues, it would be morally wrong for a creator to do anything about it because limiting the use, modification, and distribution of software is in itself morally wrong.

This ideological view stems from the original GNU Manifesto:

“‘Control over the use of one’s ideas’ really constitutes control over other people’s lives; and it is usually used to make their lives more difficult.”

“When there is a deliberate choice to restrict, the harmful consequences are deliberate destruction.”

These quotes capture two central ideas of the GNU Manifesto, one I think most of us agree with, another I think most of us take issue with:

The first idea is that creating something and releasing it into the world changes the lives of ourselves and of others. That is what we design and build software, and that is why being a creator means taking on a moral responsibility for how we change the world.

The second idea is that imposing any restrictions on anything is inherently harmful. This is neither true nor how the world works. Though restrictions can be harmful, they are mostly introduced to prevent harm. The restriction on how loud your headphones can be or the permitted level of toxins in food-safe plastics are in place to prevent harm, and removing the restrictions could in itself be harmful.

I think it is in the tension between these two ideas – creation as a moral act and restriction as a moral wrong – we find both the current dilemma of open source and morality and a potential path forward.

The weight of responsibility

When I publish anything under an open source license, be that GPL or MIT or any other license ratified by the Open Source Initiative (OSI), it takes on a life of its own. It can be used and modified and distributed by anyone for any reason, with or without my involvement, but I cannot restrict it. That’s the whole point of open source ideology.

The problem is this effectively abdicates me of responsibility for my own creations: By releasing software with an open source license I relinquish control over who uses my software or what it is used for. Thus I cannot be held responsible for the software or its consequences. And if I can’t be held responsible there is no incentive for me to make sure my software, when used or modified or distributed by others, doesn’t cause harm or can be used to cause harm.

This is what I mean when I say open source licenses imply value neutrality. And it is here I think the Ethical Licensing movement found its root.

From this perspective one can argue closed source (proprietary) licenses hold the moral high ground over open source licenses because closed source licenses imply responsibility: If a company knowingly releases software that can be used for harm, they can be held liable because they are the only moral actor capable of modifying and distributing the software.

Moral clauses to the rescue?

The big question then is if adding moral clauses to open source licenses can help solve this problem. As much as I hate to say it, I think the answer is no, for two reasons:

First, like the Hippocratic Oath in medicine, breaking a moral clause in an open source license does not have any consequences. Doctors swear to uphold the code of ethics defined by the Hippocratic Oath, but if they cause harm their actions are judged through the legal framework of medical malpractice. A “do no harm” clause in an open source license carries moral weight, but without enforceable consequences and mechanisms to appeal a judgement of harm being caused, it has no teeth.

Second, applying moral clauses to a license does not solve the problem of value neutrality because it is a problem of ideology, and the license is merely a manifestation of that ideology.

If we want to go down the path of the Hippocratic Oath, we need a Code of Ethics for Open Source and a framework for enforcement and adjudication of breach of those ethics. That’s a huge undertaking, and not one I see bearing fruit any time soon.

Toward a New Ethos of Open Source

If we want to take on the issue of ethics in open source on a shorter timeline, we need to take a hard look at the ethos, the core ideals, of open source ideology and ask some tough questions about where the ideology comes from and whether that picture of the world meshes with our lived reality. Open source aims to grant everyone the capability to use, modify, and distribute software. That does not mean open source ideology cannot also embrace the moral and societal responsibilities of the creator, the user, and even the creation itself. To get there we need to broaden our ideological platform, consider what “freedom” means in our current context, and work together to figure out how the Four Freedoms can become part of the larger spectrum of rights and freedoms afforded to us.

Originally published on mor10.com

ASPIRE: An Acronym for Better Web Practice

Morten @ home — Thu, 17 Oct 2019 17:24:08 +0000

Sometimes interesting things happen on Twitter. A short time ago, Scott Jehl proposed ASPIRE as an acronym for the practices we should follow as web designers and developers. From the resulting blog post:

Great websites should aspire to be:

Accessible to folks with varying cognitive and physical abilities and disabilities
Secure and reliable for storing, manipulating, and transferring information
Performant on average devices and in constrained or unreliable network conditions
Inclusive to diverse audiences and produced by diverse teams to create better experiences
Responsive in adapting the user interface contextually to any screen
Ethical in how users’ preferences and data are handled I'm interested in the last one: E for Ethical.

What constitutes "ethical" web practice?

While we have pretty well established standards and practices for the first five; Accessible, Secure, Performant, Inclusive, Responsive; we have yet to establish what "Ethical web design and development" means, what it looks like and how it is practiced.

Part of the problem is the term "ethics" is often equated with statements like "do no harm" or practices to avoid legal issues. In reality, ethics refers to the principles and practices we agree upon as a society to judge the goodness and rightness of acts. The Markkula Center for Applied Ethics describes it like this:

"ethics refers to well-founded standards of right and wrong that prescribe what humans ought to do, usually in terms of rights, obligations, benefits to society, fairness, or specific virtues."
In short, ethics is about practice, how we conduct ourselves and how we judge our actions.

Ethics cannot be summed up as "do no harm" because that leaves the door open to moral relativism: what is harm, to whom is this harm being done, who decides this is harmful, etc.

So what then is ethical practice in relation to web work? Here's my rough draft to start a conversation about a definition:

Ethical web design and development practice: Work focused on human flourishing through ethical practice and methodology and centered on the rights, capabilities, and agency of the end-user.

What is "ethical practice?" Design and development practice rooted in ethical principles.

What are "ethical principles?" Principles derived from well-established moral philosophies including Consequentialism (specifically Utilitarianism), Duty Ethics, Virtue Ethics, and Capability Approach. I wrote a huge article for Smashing Magazine about how to use these in web design, and also done some talks on the topic:

Bottom line, ethical practice is about the doing and being of the practitioner, whether they see their users as ends or means to an end, whether they put "ought" before "can", and prioritize the agency of those they act upon. It's about how we judge the goodness and rightness of our work.

I'm really excited about this conversation, and I hope we can get together as a community and figure out what ASPIRE means to us, and how we want to define Ethical web design so we can come together around shared principles and practices and carve meaningful paths into the future for other people and for ourselves.

Cross-posted to LinkedIn.

Cover photo by Łukasz Łada, Unsplash.

Where We Go From Here: 10 Thoughts on the Immediate Future of the Web

Morten @ home — Thu, 10 Oct 2019 17:47:58 +0000

I was asked to close out WordCamp Vancouver with a short 20 minute keynote on something interesting. After some thought, I put together a list of 10 trends I see in the web community and where we are headed in the immediate future._

0. The Future Keeps Arriving

In my +15 years working on and with the web, the one major lesson I've learned is the future keeps arriving, sooner than you think, and often the future is already here. The web, the internet, and the technologies and communities powering them are evolving ever more rapidly, and what we consider future possibilities today often becomes practical realities the very next day. The future keeps arriving. Keep this in mind as you read on.

1. WordPress Themes are Dead. Long Live WordPress Themes.

If you're of the WordPress persuasion, you'll know about the Block Editor, nee "Gutenberg," and how it's changing everything. Even if you don't work with WordPress, even if you don't care about WordPress, this transition from the content blob to each piece of content being its own "block" with its own properties and attributes is changing everything about how we think of content on the web. Why? Because WordPress powers a full 34% of the web meaning what WordPress does impacts everyone, even those who don't use it.

Why does this matter? The front-end of pretty much every WordPress site up until this moment is a template displaying content in a relatively rigid way. With the Block Editor, that paradigm is all but dead. Right now, blocks are confined to the "content area," meaning the post or page content itself. That's about to change. In the foreseeable future - probably within the next 12 months - the block concept will spill outside the content area to take over the whole view. This article and video from Matias Ventura gives us an early preview of this future.

Exactly what this all means is still up for debate, and the debate is happening right now: See Ben Gilbanks' "The End of WordPress Themes Is In Sight" and Justin Tadlock's "Rebirth of Creativity: Gutenberg and the Future of WordPress Themes" for two contrasting views.

Bottom line: What we think of as a "WordPress theme" is already an outdated concept. The future has arrived, we're just waiting for the practical implementation.

2. Gatsbyfication of the CMS Ecosystem

If you don't know what Gatsby is, you will soon. The emergence and popularity of static site generators like Gatsby, 11ty, Nuxt, Jekyll, Hugo, and more is the beginning of a communal shift from delivering server-side rendered front-ends to delivering static or faux-static front-ends, often powered by JavaScript frameworks powerful APIs, and new query languages like GraphQL (see below for more on that). Gatsby and its ilk sit adjacent to traditional CMSes pulling data from them through APIs and presenting it to the user in new and more performant ways. And they can combine data in ways those old CMSes can not. More on that later as well.

What's driving the Gatsbyfication of the CMS ecosystem? Several things:

The idea of the monolithic end-to-end CMS solution is old and outdated. We no longer consume data from single sources, and giant monolithic CMSes like WordPress, Drupal that try to do everything for everyone etc are becoming dinosaurs.
Performance is the new Black, and CMS-generated just-in-time server-rendered sites just don't cut it. Static site generators pulling data from CMSes is the natural progression from caching server-rendered content.
Delivering content on the "Edge": The web is global, yet CMS-based content delivery is most often confined to one server in one location. Content Delivery Networks (CDNs) have long been used to try to remedy this issue, with mixed results. Static site generators like Gatsby allow content to be computed and rendered on the "edge" - closer to the end-user, and in a more performant way.
JavaScript is the new wine. Nobody likes PHP any more. Love it or hate it, JavaScript is the place to be, and static site generators are soaking in it.

Bottom line: I call this trend the "Gatsbyfication" because right now Gatsby has more wind in its sails than any competitor and money is pouring into the project. Does that mean Gatsby will reign supreme? I have no idea, but I think a Gastby-type solution will reign supreme in our immediate future.

3. With the APIfication of the Web, REST is ceding to GraphQL

REST APIs have been around since forever. I remember going to a web conference in 2009 where almost every talk was about RESTful APIs. REST gave us the tools and infrastructure to evolve the web beyond single-source-of-content solutions and paved the cowpaths leading to the client-side content rendering which is now the default for content rich sites including LinkedIn, YouTube, Facebook, and sites powered by static site generators like Gatsby (see above).

The problem is the REST concept is old, and it doesn't provide the necessary tooling to do the things we want to do today.

Enter GraphQL, a new query language which approaches the same problem REST tried to solve in a new and more modern way. I won't bore you with the details of how GraphQL works (we have courses for that at LinkedIn Learning if you're interested!. Suffice it to say GraphQL allows developers to combine data from different API sources and make it available in ways that benefit them and make previously impossible or very hard things practically possible.

If you don't believe me, look no further than the WordPress project: After an enormous undertaking of creating a proper REST API for WordPress, tools like Gatsby choose instead to use the custom WPGraphQL to query and consume data from the source.

Bottom line: The APIfication of the web has been happening for a while, and future web services will need to serve up comprehensive APIs to stay relevant. GraphQL-type query languages will replace REST as the standard interface, and as a result consuming content from single sources will become an anti-pattern (see below).

4. Content Streams and the Content Mesh

Back in 2013, David Gelernter published an opinion piece in Wired Magazine titled "The End of the Web, Search, and Computer as We Know It" where he talks about the concept of a "lifestream":

a heterogeneous, content-searchable, real-time messaging stream.

Sound familiar? If you have one of those talking thermos cans at home and asked it "Hey Corporate Surveillance Device, tell me about my day" you know that's pretty much were we live today. Except the web hasn't quite caught up to the trend yet.

Enter the “Content Mesh” — the infrastructure layer for a decoupled website — introduced by the Gatsby team and pretty much the manifestation of what Gelernter talked about all those years ago.

The Content Mesh, if we choose to adopt this language, is the idea of building a front-end that consumes and interacts with data from multiple sources. So instead of having one monolithic WordPress site trying to do blogging and ecommerce and forums and forms and everything else, you have one unified front end that brings in blogging from WordPress, ecommerce from Shopify, pages from Contentful, forms from Google Forms, etc. Literally meshing together content.

Bottom line: The current idea of the content mesh is an evolution of the single-source website concept. That's where we're headed right this moment. In the slightly more distant future, the content mesh will be served by our personal assistants, configured by the individual user, and the website as we know it will be a quaint anachronistic thing some people choose to spend their time on.

5. The Rectangular Screen as Main Content Delivery Modality is Already Dead

Here's the new trailer for the dystopian near-future sci-fi show Black Mirror:

Just kidding. This is an ad for Facebook Horizon - a virtual world reminiscent of the OASIS predicted in the book Ready Player One, except it's run by IOI (you don't need to read the book or see the movie btw. If you haven't, just read on).

AR/MR/XR/VR/CR whatever we end up calling it, the idea of computers in some way augmenting our reality by introducing virtual layers in the form of visuals, audio, or other sensory inputs, is now a reality. All the major tech firms are fighting to be the first to inject their own ad-fuelled reality as a layer on top of our own. If you have one of those aforementioned talking orporate surveillance thermos cans, or a modern phone or computer or TV with a voice assistant, you are already living in this future.

The world in which our main tool for accessing information over the internet is a rectangular glass screen is already in the past. We are merely experiencing the late-stage residuals. The second the Fruit Company rolls out their first set of iGlass AR-powered glasses, and the Search Company follows suit with AR-powered contacts, the focus for web content delivery will shift from "how do we cram as many ads into the viewport of a mobile browser" to "how do we cram as many ads into the field of view and range of hearing of the human experience?"

Don't believe me? Watch Marley Rafson's talk "The Case for Augmented Reality on the Web" from JSConfEU 2019 and draw your own conclusions:

Bottom line: The APIfication of the web, and the Content Mesh, will become more important than ever because we'll need to design and deliver our content to new interfaces which don't even exist yet in the immediate future. Also, unless we actively resist the urge to AR everything and put ads everywhere, our AR world will be an insufferable hellscape reminiscent of Keiichi Matsuda's "HYPER-REALITY" for the next decade.

6. CSS Changes Everything

On a positive note, CSS is evolving and changing in extraordinary ways, and the future of CSS is even more extraordinary. In our modern web dev world already have magical tools like flex, grid, custom properties, animations, and filters. Soon our CSS toolkit will expand exponentially thanks to CSS Houdini. Look no further than Una Kravets' JSConfEU talk "CSS Houdini & the Future of Styling" to see where we're headed next:

As if that wasn't enough, the canvas in which we do our work is about to change as well. Right now, Adam Argyle is working on his VisBug Chrome extension.

Sold as a visual browser development tool that makes your browser viewport work more like a design tool, I think this thing is a peek at what the future will bring in terms of web design: The browser itself being the design canvas, and server-powered tools like WordPress' Gutenberg editor being old hat.

7. Open Source Ideology is D/Evolving

Open source rules the web world. Open source is also experiencing some long-overdue internal strife. Without going into too much detail, Richard Stallman, considered the originator of open source ideology, has stepped down from his various leadership roles in the open source and free software communities due to accusations of decades of problematic behavior. You can read more about this in various news outlets and opinion pieces (and you should, this stuff is important).

Here's my abbreviated take: It's high time problematic characters like Stallman are removed from their positions of power in the open source community because their influence has been detrimental to the participation in these communities for many marginalized groups. Moreover, it opens the door to a deeper conversation about the core ethos of open source ideology and whether the radical understandings of terms like "freedom" by a group of entitled white men is a sound foundation to build equitable and inclusive communities moving forward.

I'm going to write more about this in a separate post, but my long-held opinion on open source ideology (and I say this as an open source creator, contributor, and proponent) is open source in its present iteration is exclusionary and privileged. Why? Because it's based on the assumption that those who have something worthwhile to contribute also have the time, money, and necessary tools and access to be able to contribute. From there follows that anyone who is not contributing, for whatever reason, does not have anything valuable to contribute (which is utter nonsense) and that those who contribute the most (usually because they are paid by corporations to do so - see below) are the best people to lead the project. "Decisions are made by those who show up" really means "decisions are made by those with enough privilege to show up" which is not an equitable nor inclusive base to rest an entire ideology on. Follow Christie Koehler for more on that story.

Then there's the whole "open source is value neutral" and "open source licenses can't have morality clauses" thin which deserves an entire article its own. Follow and support Coraline Ada Ehmke in their efforts to debunk that nonsense.

Bottom line: Open Source ideology is being redefined right now. Your participation in that conversation decides whether it'll be an evolution or a devolution. Your voice matters, so use it! Forward the equitable and inclusive open source revolution!

8. Corporate Control of Open Source is the New Black

Guess what: Open Source is super valuable. No wonder large corporations want their piece of the pie. Actually, they want all the pieces of the pie and they want you to bake it, for free! Yes, yes, I work for LinkedIn which is part of Microsoft etc. But I'm believe in open source, and I'm deeply concerned about the corporatization of the open source space.

Here's the gist: The core idea of free libre open source software was to effectively flood the commons with free (as in you don't pay) open source software so the large corporations who sold expensive licenses for proprietary software went out of business. Don't believe me? Go read the [GNU Manifesto](https://www.gnu.org/gnu/manifesto.en.html0 (and keep in mind everything I said above). The idea was we would use open source software in the capitalist world to earn money, thereby keeping the software itself without value and only putting value to the services rendered with the software.

So what happened? Corporations figured since all the open source contributors didn't derive value from their software, the corporations could do it instead! And without paying a dime for it. Literally get people to work for free and then make money from that work.

Sure, that's an oversimplification, but it is also the reality on the ground. The corporatization of open source, in particular large projects like WordPress and Drupal and NPM, is a reality, and it's only going to get bigger. If there is value in a project, a big corporation will be made to turn some of that value into cold hard cash. See the aforementioned Gatsby.

Some say this is a good thing. Some say it's not. I think we need to start thinking more about where we want to go than how we can turn free contributors into cash cows.

Bottom line: The open source community has failed in its mission to change the status quo, choosing instead to double down on good old capitalism. If you don't like it, do something about it. Also, go read Cory Doctorow's "Walkaway".

9. The Tech Ethics Reckoning

The Pope felt it necessary to invite Silicon Valley to the Vatican to talk to the tech industry about morals, ethics, and the common good:

Shannon Vallor

@shannonvallor

Pope Francis’ address to us in the Common Good in the Digital Age conference has this call to action: “Your work will continue until no one remains the victim of a system, however advanced and efficient, that fails to value the intrinsic dignity and contribution of each person.”

08:18 AM - 27 Sep 2019

26 80

Unless you've been living under a rock, you know #techethics is hot shit, and for good reason: Turns out moving fast and breaking things breaks people, communities, even our democracy.

Here's the problem: The tech and design communities are largely autodidact. There is no board of ethics for tech or design, and everyone is allowed and encouraged to do whatever they want in the name of disruption, innovation, and creation. Put bluntly, we are working in a non-ethical industry.

Why does this matter? Because in lieu of the tech and design industries regulating themselves, or at the very least adopting and enforcing some basic form of ethics, governments will regulate us without our input. Which is what's happening right now.

This is especially bad for open source because unlike large corporations and their walled gardens, who spend millions on lobbyists to sway politicians to lock everything down and hand the keys to the highest bidder, open source developers live in some reality dysfunction where they think politics and political involvement are irrelevant.

Trust me when I say they are not. They are the life blood of modern civil society, and choosing to stand aside and let things happen without your input is the same as letting other people carve out the path you need to follow into your future.

Bottom line: Unless we figure out the whole ethics thing for tech and design right now, we are going to be regulated into a walled garden of corporate surveillance of our own making.

10. The Next Generation

Looking around at my industry I see two things:

Old white men like myself wringing our hands and saying "man, we really messed this up, I wish we could roll back the clock and do some things differently."
Young diverse community members trying to make make a living out of an industry emerging from its adolescence and realizing it now runs the world and needs to do a better job at it.
This gives me hope.

I believe in the next generation of creators on the web, and I believe they have what it takes to turn this chaotic mess we call "tech" into what it can be: A new path forward for a more equitable and diverse society with values rooted in the idea of common goods distributed through free and open commons.

Bottom line: The future keeps arriving. The future is already here. It is our job to ensure the next generation gets to experience the same freedom of creation and discovery on a free an open internet so they can build a robust and inclusive society for all of us.

Postscript: Your turn

This is what I see. I'm just one person, and I have strong opinions about things. To move forward, a discourse is required. We need to share our thoughts, ideas, hopes, and concerns, and figure out how to move forward together.

What do you think about all this? What trends are you seeing? Where are we headed next, and where do you think we should be headed?

Add your thoughts and let's find paths into the future we design together!

Originally posted on LinkedIn.