Web Directions Leaders & Web Directions Summit 2023 were hybrid events, held in person at the ICC Sydney and online streamed on Conffab.

With a monster seven content tracks at Summit this year, attendees were certainly spoiled for choice.

Once again Sample provided amazing coffee - pro tip: batch brews skip queues - and along the concourse, Lego continued to reign supreme as the hot giveaway item.

Regulars to the venue could not help but notice the Big Stonking Hole In The Ground where the Harbourside shopping centre used to be. While few lamented the building itself, most had good memories of dinners and drinks held there in the past. It did serve as a fairly dramatic reminder of the passing of time.

BSP meta notes

  • I was MC of the Frontend track at Summit this year, so the choice of sessions doesn’t reflect the diversity of the schedule and some of the notes are a little leaner than usual. I joked at one point that this might be a Medium-Sized Stonking Post…
  • There weren’t a whole lot of photos posted this year, so illustration is a bit minimal.
  • This was the first time I was fortunate enough to attend Leaders as well as Summit, so there’s an extra day of content.

Jump Menu

Themes

From the outset John made it clear that AI was a key theme this year. People spoke on the social and technical impacts of AI, particularly GenAI and LLMs, as well as how to navigate the hype cycle and harness the useful things in our work.

The potential for new technology to do harm is not new, and neither is our responsibility to anticipate and work against that harm. But we are also well-placed to guide others and go forwards through the uncertainties of change.

We have to be careful now, that we rule over the digital world, and are not ruled by it. - Dieter Rams, 2018

On a more technical level, there was a theme of questioning how we build things and what we build them with. To consider the longevity of solutions and to make greater use of the open web platform.

Less is not necessarily more. Just enough is more. - Milton Glaser

To put it another way - many people asked some form of the question JavaScript is great, but perhaps we could use a bit less of it?

Twitter usernames used to be the ubiquitous “find me later” contact point - nearly every talk used to finish with a Twitter handle. That era is clearly over with people showing a mix of website URLs, email addresses and Mastodon usernames alongside a relatively small number of Twitter/X handles. Some speakers even took a moment to suggest people to leave Twitter.

It feels like we are heading into a time of social network fragmentation; and also feels likely that someone will soon have the bright idea of creating a single client to handle them all (remember Trillian?). But it also feels like a great time to promote your own website and not a platform. Viva la Indieweb!

Disclaimer & Image Credits

  • These notes were hammered out very quickly and paraphrase what speakers were saying. If you need an exact quote, use a definitive source such as a recording or slide deck.
  • Photos are either credited or they’re my own. Slides aren’t credited (context should be clear).

Leaders

Chris Lienert - Balance in All Things

Chris is setting out to melt brains and change our view of the world…

Our brains do things we don’t necessarily notice: we find patterns, we automatically group similar things, we fill in gaps with what we think should be there. (Chris illustrates this with a series of optical illusions)

As a result our view of the world is an approximation. Some of our perception is false pattern recognition.

In 1926 the American air force measured a number of pilots, found the average size, and built plane cockpits to suit. Then in 1940 when jet fighters were introduced, they found a high rate of accidents that wasn’t explained by any mechanical cause. It was found almost none of the pilots actually met the average, and that was making it hard to operate the planes. As a result the USAF introduced a set of adjustable elements in the cockpit and the rate of mishap dropped massively.

There is no such thing as “normal”. One size does not fit all, one average size fits none.

We see this in tech, like soap dispensers that don’t work for people with dark skin, but someone with light skin gets soap. It’s not a one-off, it happens in a lot of devices… and when it’s a critical medical device, bad sensors cause deaths.

So now we have AI… BlenderBot was launched in August 2022 and couldn’t correctly answer the question of who was US president, despite having access to contemporary web data. Meta AI demo was launched only to be pulled for writing racist and inaccurate scientific literature.

But it’s not just new products… Google Translate will assign gender differently based on stereotypes like the job someone does (examples using gender-neutral Norwegian terms as input - if the job is ‘police officer’ it uses masculine words; when it’s ‘nurse’ it uses feminine words).

AI amplifies the sterotypes of society, because the bias in their training data is exaggerated even further. Despite this people try to use AI for things like recruiting, hoping to remove bias… and getting the opposite result.

We need to have our perception jolted to notice any of this going on. Until it’s made obvious, we don’t notice bias.

But diverse teams are better - happier, more productive, more effective.

Diversity of experience, background, language, thought… all of these things change your perception of the world.

What can you do?

  • encourage every voice
  • invite (constructive) questions
  • seek representation
  • collaborate
  • intervene - when something is wrong, do something

The more social power you have, the more you can influence this. Lift as you climb. Collaboration and representation is not a zero-sum game, you don’t lose by giving someone else space or respect.

@cliener

Confronting difficult conversations - Elle Meredith & Lachlan Hardy

Elle and Lachlan used roleplay of a difficult discussion to illustrate this topic: a manager talking to their own lead about a difficult member of staff, and how to handle it. The scenario is a staff member being negative, harsh and dismissive of juniors on their team.

Prompts:

  • Why are we here? → what is the problem, specifically
  • Should we have this confrontation at all? → eg. has a promise been broken, is behaviour unacceptable, are others negatively impacted?
  • Clarify what expectations are not being met. Ensure that expectations have been communicated clearly. Check that it is a pattern and not an isolated incident.

Consider…

  • what are the consequences? - who is impacted, what is happening as a result.
  • what are our priorities? - eg. need to ship things, need a happy team
  • empathy - and be aware that we will assign fault differently depending on how close we are to the problem. so ask what a reasonable and calm person would make of the situation. Try to understand how this looks to the other person. Basically you are looking for possible ’why’s for the behaviour.

There are always two sides to a story and we need to ask how we’ve contributed to the situation. In the roleplay, it comes out that the senior dev is being driven (by the manager) to focus on quality, momentum and delivery - but the manager has not been talking about mentoring juniors or building a happy team.

Most issues come down to lack of motivation or ability. Both can be analysed on personal, social and structural levels. Intrinsic motivations (satisfaction, autonomy) work better than extrinsic (money, orders), so link things to values, encourage long term thinking, highlight others, hold up a mirror so they can understand their own impact and the impact on their own repuation.

Ability - create a safe space to learn and improve; ask for permission to help them; solve it together; be an enabler; ask five whys - get to the root of the problem; consider long-term solutions.

How to actually initiate the conversation?

  • choose the right place and time - but don’t delay
  • establish mutual respect
  • establish mutual purpose
  • describe the gap
  • use the ASK approach - talk about things that are Actionable, Specific and Kind
  • ask a question/make a request

What if?

  • …what if things go wrong? If anyone gets angry or upset, ie. overly emotional, reschedule and continue when there’s been time to calm down.
  • …what if they have a bunch of excuses? Reiterate facts of the situation rather than feelings, suggest if they are unsure next time come and ask for help.
  • …what if they bring up other issues? Take a note to discuss another time, but stay focused.

Establish a new normal. Clarify what needs to be done, make a plan, decide how to follow up… and follow up.

blackmill.co

Wai Ling Ko - Management doesn’t need Managers

“Isn’t the smell of fresh bread the best thing ever?” - the process of breadmaking is so simple! Just needs good ingredients… right? But actually there’s a bunch of process as well. Learning to make great sourdough took a lot of experiments, a lot of trial and error, lots of small adjustments, and eventually you get a great loaf. But you must start with good ingredients.

So what are the ingredients for a great team?

Happy people, happy team, happy clients. - Wai Ling Ko

What does happy people look like? You can ask…

  • What do you want to get out of your work?
  • What do you expect from a great leader?

Bilue has a senior-heavy structure; and they realised seniors were playing the role of team leads. They loved the coaching aspects, but they hated the admin aspects.

Management is too important to leave to the Managers. - Jurgen Appelo

Bilue has Heads Of Practice to manage the work; and Heads of Function to manage the teams; and then a set of roles and initiatives to support the people.

  • There is an opt-in performance coaching system. On average people opt in to coaching sessions every couple of weeks, and if someone doesn’t turn up for a while they do a check in. Mentors grow the skills and capabilities of their mentees - they invest in the growth of others.
  • The mentoring system is based on matching people together based on what they want to learn; and they also provide some training to the mentors to help them do the role effectively.
  • They also have Platform Communities to spark curiosity, to bring practitioners together who share a common passion.

All new starters have a buddy, for things like…

  • help I am stuck!
  • navigating company events
  • fundamentals like timesheets
  • who is who

Friday Showcases - 15 minute open spot to share an idea or some expertise.

Enabling collaboration - they use CrystalKnows to plot people around DISC profiles to help people understand each others preferred approach and get a feeling for the composition of project teams.

Cadence… engagement surveys every six months, short monthly performance reviews rather than a big annual review

…

How is all this going? They have a weekly pulse check that shows staff satisfaction running around 75%, which is not bad for this kind of measure.

Happy people, happy team, happy clients… by managing the work, not managing the people. - Wai Ling Ko

Tracy Powell - Why your team needs juniors

A junior is defined here as someone who has had less than a year in their role - it doesn’t actually mean they are young. What is the structure of your team? What is the diversity of experience? You can try to run all seniors, “a team full of Batmans”, but it can be quite difficult to keep them engaged; and there is a high chance of conflict between strong opinions.

diversity === performance

Diverse teams can avoid groupthink, they are more resilient, more creative and adaptable.

You should hire a junior!

…

Common worries…

  • We don’t have time to train juniors! → All new hires need onboarding and support. Hiring juniors with a good attitude pays off quickly.
  • It’s too hard to hire juniors! → adjust your approach to hire juniors based on potential, not experience.
  • Onboarding is hard too! → this will be painful for all levels, so use hiring a junior as an opportunity to improve onboarding for everyone
  • What if they make a mistake? → build a culture that creates a safe space to learn and make mistakes; and if your systems can be taken down by accident, you need to harden the systems. Seniority is not a security strategy.

Upsides to juniors…

  • Juniors are full of enthusiasm - they are eager to learn, they aren’t scared to try something new - because it’s all new. They make great drivers of change.
  • Juniors bring a fresh perspective - they can help challenge the status quo with their fresh eyes.
  • Seniors enjoy mentoring juniors - a culture that puts knowledge sharing first will thrive. Mentoring is also great for succession planning.
  • Mentoring is reciprocal - everyone learns. Mentors become better leaders
  • Juniors who have switched careers also bring a wealth of other experience they can share with the team

Impacts of hiring juniors…

  • Being part of upskilling the next generation of engineers - as an industry we lose a lot of talent when they become disillusioned with the availability of entry-level jobs.
  • Provide opportunities to underrepresented groups - many will be looking for entry level roles to get their start
  • You can afford them! Not everyone has a FANG-level hiring budget - it’s expensive to hire seniors.

So how do you hire and onboard juniors?

  • Good hiring and career development practices form a solid foundation (they use Kaleida to help with this)
  • Advertising to juniors needs to be done carefully - make sure it’s meaningful, check it for bias, etc
  • Evaluating juniors is not about their current technical capabilities, you need to look for potential
  • Set them up for success - try to give them a win early/quickly (eg. shipping something small in the first week), allocate a buddy, schedule regular 1:1s (weekly is good for juniors)
  • Define milestones and set clear expectations
  • Train, coach, mentor, repeat (this really applies to all levels but is more obvious for juniors and grads)

Tracy finishes by noting that she loves the enthusiasm juniors bring to the team, but it’s just one of many benefits!

Jeremy Nagel - Embracing neurodiversity in the workplace

Jeremy starts by revealing his undiagnosed ADHD and Autism basically led to being repeatedly fired from jobs. Thankfully now things have stabilised, but it was a difficult period.

He now thinks back and realises he had a lot of challenges - the noise and interruption of open plan, difficulties handling social norms and office politics, and more. Plus he spent a huge amount of time and energy trying to mask and appear ‘normal’.

But he also has strengths that come from ADHD and Autism - generating ideas, prototyping, architecting solutions, debugging. Autistic people can get up to speed faster, and potentially can be 90-140% more productive than someone neurotypical.

Definitions…

  • There is no ‘normal’ but around 80% of people have brains that are similar; and this is what we usually mean by “neurotypical”.
  • Neurodivergent - the other 20% who may have one or more of a huge range traits or diagnosable conditions (ADHD, anxiety, depression are relatively well known).

Top 4 strengths

  • hyperfocus
  • creatitivy and entrepeneurialism
  • detail processing
  • authenticity - speaking without filter

Top 4 challenges

  • self care
  • concentration
  • asking for help
  • managing boundaries at work

(source: McDowell, Doyle, Kiseleva 2023)

Social model of disability… disability is contextual.

  • wrong environment = more downsides
  • right environment = more productivity

Top 6 most helpful accommodations:

  • flexible schedule
  • controlling the environment - noise, light, etc
  • two monitors (and other workstation/setup elements)
  • flexibility on policy
  • coaching to support organisational issues
  • software to support organisation and management

Try to have sensible defaults in your organisation. Nobody benefits from people taking phone calls in open plan - phone booths are better for everyone.

There are process and logistics challenges in hiring - you can make things easier by allowing people to prepare, and not setting up adversarial “gotcha” interviews. Recruit based on values alignment rather than social skills; and do pair coding interviews instead of whiteboard interviews.

Finishing with an ask - please participate in this Australian survey:

Fredy Lievano - Embedding equality within your organisation’s culture

Fredy starts with the revelation that he has a crush on the internet. It has driven his whole life!

When he moved to Australia in 2014 he experienced significant culture shock. The tech was the same but everything else was different! He turned up in a suit and thought it was weird that people didn’t shake his hand… this was really worrying to him.

He slowly got to grips with the culture - although the agency he joyed had quite a Work Hard, Play Hard culture that wasn’t necessarily his speed, he did find people that he did resonate with.

They did good work - valued quality, did a good job, wrote great code. But there was a problem - management didn’t really care for that… they just wanted to ship fast!

He found the two groups wanted to connect but did not want to deal with the differences. As he went on he saw more and more examples of people totally misunderstanding their team members, because they avoided learning about their differences and background.

When he became a manager he decided to do the opposite: embrace the differences of his team and in himself. The more he asked, the more he learned and the more tools he had in the kit.

He embraced his own #brownpower, using it as a way to create spaces of authentic communication where ideas flow and everyone has a voice. This also came with the obligation to talk about the value of diversity. To acknowledge his own ignorance of other cultures.

Always start with respect and honesty. As a lead he follows this order:

  1. listen
  2. ask
  3. connect
  4. lead

Marty Drill - Empowering High-Performing Distributed Teams

What does it mean to beep the horn of your car? For most Australians it’s an expression of danger or frustration; but in other countries it can be a polite warning they are about to go around you.

How do you build a team across regions when even just basic things are so different?

(Video: Mark Rober’s ‘happy beep’ custom horn)

You can try to put labels on everything, but in reality you need to teach people what everyone’s expectations are.

Another thought: how do you get wildly different reveiws on GlassDoor? Best place ever, and worst place ever… same company, same timeframe.

A team is not a group of people who work together. A team is a group of people who trust each other. - Simon Sinek

Trust is earned. You’re more likely to trust people you know and understand better.

How do you create an environment where people trust each other, feel like they belong and can do their best?

Two ways:

  • psychological safety
  • social contracts

Psychological safety is about an environment where speaking up or making mistakes is ok. You won’t be punished for an honest mistake or a genuine question.

Social contracts are an agreement between people about norms of behaviour. Often the “unwritten rules”, although it is very powerful to actually write them down.

These are specific to your team’s needs; but when they’re done well they create happy teams. Marty summarises it as “everyone has a voice”.

(Session incldued a live exercise where we set social contracts using a retro board)

Aside: if you are doing anything like this and someone’s not sure if they should be included… just include them. If they work closely enough to feel they should be included, invite them in.

By setting social contracts, writing them down, circulating them… you can refer back to them when conflict occurs. Conflict is inevitable and that’s ok - disrespect isn’t ok. The social contract creates an agreement for the whole team, and things can then be done in relation to that.

Social contracts create behavioural standards, gain agreement, foster psychological safety and build trust.

Give everyone a voice!

Anthony Willis - How your architecture can inhibit or promote organisational change

The ABC does a huge amount of content, in a big range of formats (text, audio, video; consumed across lots of devices). A big challenge is to deliver very different things, in a consistent way that customers can understand.

When the ABC first went online, the internal culture was to have very separated teams; and the first web property was a rudimentary CMS managed by central IT. A lot of workarounds were created, trying to avoid central systems; and the central systems didn’t really have much attention.

There was a ‘middle age’ where things moved to a dynamic publishing system, more controls (stopping a lot of the hacks), but still with a centralised development model within the same organisational structure. The architecture was an “all in one” system with terrible workflows… it had made the organisational problems worse.

Then the ‘new age’ - all teams were moved into a single digital division, and there was sustained incremental investment in digital. Not a magic fix all, more work was required.

Started with principles -

  • trust our people
  • team autonomy
  • bias for action
  • no big bets
  • moving in parallel
  • on demand scale

They also increased bandwidth with more engineers on the CMS team; gave the frontend devs direct access to change the templates; and brought the operations team closer to the CMS team. This enabled large scale migration (100+ sites) and gave some breathing room.

They also put some attention into the different focus for different people involved - eg. content authors wanted a stable editing experience, while product teams wanted to be able to change things frequently. They moved to a headless CMS approach with solid APIs, enabling various teams to build what they needed. They also created a design system to enable consistency, quality and accessibility across these projects.

This change enabled teams to work with more autonomy, creating better workflows. They saw an organic surge of improvements to telemetry, quality and so on. Greater ownership led to better results.

Lessons learned:

  • listen to your teams. Don’t try to constrain behaviour with technology, do listen to what teams are saying and observe their behaviour.
  • stay focused. Don’t lose sight of “why”, do keep true to principles, regularly communicate the vision. Don’t add to a great success until it becomes a failure.
  • give teams functions, not tech. Don’t give people a technology to own, do give people ownership of a function (which outlasts any given tech solution).
  • depenendencies. Don’t try to remove dependencies, do focus on improving interfaces and reducing friction. When things work, people don’t see dependencies as a problem.
  • don’t force adoption of new systems, do encourage adoption but learn when teams don’t adopt (ask why, there’s usually a good reason… and if you can then win them over they can become your best cheerleaders)
  • change is hard! Don’t try to solve everything from day on, do pick your battles. Focus on what will drive the biggest change for people.

Summit

Rupert Manfredi - The Mediated Web

Rupert wants to make that case that the way we interact with the web is going to change drastically in the next 5-10 years.

Rupert’s personal mission is to make computers more humane and accessible.

Let’s consider the question What makes the web so special? There is something special about it; and he doesn’t mean JavaScript, he means deeper things like the user having a lot of control. This sets it apart from most software.

In the early days of the web, customisation of MySpace pages had a huge impact for a lot of people. They could modify their profile as extensively as they wanted to, and many people cite this as the start of their work on the web.

User control, openness and control was built into the DNA of the web - Tim Berners-Lee included relevant principles in the original RFC.

So we have the world wide web, a user agent, and the human; and there are two interfaces:

  • network interface (between the WWW and the UA)
  • human-computer interface (between the UA and the human)

This is the architecture of the web; and it’s what gives you the power to change the web by choosing a UA that works for you. That is usually a GUI browser; but it might also be a text browser like Lynx; or an assistive technology like a braille keyboard or screen reader.

Other agents exist such as spiders and web crawlers - the web doesn’t really care if there’s a human driving the UA.

The question Rupert puts to us is do you feel empowered? …and maybe you do, but maybe not partcularly? We are looking at the web through a little window… but the current web is a bit of a swamp.

The early web was simpler than the modern web. The early web basically just showed you content. The modern web has content peeking out between the ads; and now a lot of that content is AI generated.

So what happened?

  1. tech advanced
  2. the web got a business model
  3. we started using the web for everything

Mediated interface: a human-computer interface that uses an underlying system to operate anohter human-computer interface on the user’s behalf.

Example: driving a car, you need to manipulate the accelerator constantly to maintain a certain speed. A mediated interface is cruise control, where you operate the cruise control button once and not the accelerator constantly. Worth remembering the goal still isn’t to drive at a certain speed, it’s to reach a destination. A fully autonomous car is a higher level of abstraction - you set the location you want to go in an app on your phone, and a car turns up and takes you there.

As you go higher up the ladder of abstraction, the tech and complexity goes up as well. An accelerator is a piece of metal attached to a cable or wire; cruise control adds a range of sensors and controls; and autonomous cars are using neural networks.

Mediated web: a potential future for the web, whereby it is accessed not directly by users, bu rather via mediated interfaces.

Search is already a form of mediated web, where we interact more with the search engine than the web in general. It brings you closer to your intent - you want an answer to a question.

We’re obviously not going to stop there, there are some hints at the future…

quick demo of Familiar, an AI/chatbot with context about your life - asking for date ideas about your partner, and it knows what they might like. Behind the scenes it is obviously using the web to source information.

This harks back to the Semantic Web, which was trying to make the web more richly/deeply understandable; but it did require authors to do it all manually.

Fuyu-8B is working to make an AI that has better capabilities to do things like spatial reasoning.

Another example is abstracting accommodation reviews into a smart spreadsheet that can compare on a range of related information, such as walking time to other destinations.

Thinking towards a a future of malleable computing on the web.

…

Smash cut back to the current web, chock full of ads…! A lot of web content/platforms/communities currently can’t survive without ads.

So what happens to the ad-supported web if the mediated web takes off?

  • Scenario 1: it doesn’t take off, you just have some smarter search engines… the web will basically keep going as it is.
  • Scenario 2: it does take off.

In scenario 2…

  • perhaps we see more paywalled content - they close down and move to direct revenue from users. This is understandable but sad for the open web.
  • perhaps we see more content blocked from search/indexation

We could see a bigger split between the free web, and the paid web. The paid web will have more closed sites, dedicated apps, consolidated platforms. At worst you could end up with something that mirrors video streaming or cable services, which ride on specific deals with publishers and platforms; and users pay to access tiers of content. It’s not a particularly fun way to consume or publish content.

What happens to search in this world? They may work in a similar way - striking deals with publishers for them to appear in search. This would amplify the existing inequalities of search.

We’re not far from not having a Web left. It’s been so captured by pathologies of command and control that it’s falling apart at the seams and life is draining from it. Some of our load-bearing planks are quite distinctly stinking of rot and our ship is taking on water. It’s time to scrape off some barnacles and get to work. - Robin Berjon, Building the Next Web

We should not assume the web will always be here. We will have to work to keep it healthy.

…

Returning to the fundamental model:

WWW (network interface) User Agent (HCI) Human

How can we make a new web work?

We could add a (micro)payment interface, similar to a network interface - the user agent can just take care of it. This could still have a free/ad-supported approach where the UI shows the ads. This has been thought about for a long time - 402 Payment Required exists in HTTP; and there was the MPTP W3C proposal back in 1995. Micropayments could also apply to machine learning scraping.

The web has always been changing, but we should maintain the funamental elements of being open and giving agency to the user.

Where the people at Web Directions come into this:

  1. anticipate the possibilities and discuss them
  2. explore the best version of this for users
  3. work towards foundations that can keep the open web ecosystem alive

ruperts.world

Adekunle Oduye - The Dawn of Design Engineering

Adekunle will talk about the meaning of design engineering and the key roles and principles within it. His career journey took him through a range of design and development roles, giving him a great perspective.

What does the role of Design Engineer mean? It’s someone who specialises in work at the intersection of design and engineering. This is where the two roles tend to have a gap, and instead the Design Engineer builds their strengths.

Four principles

  • Value - am I bringing value to my customers? Am I solving their problems?
  • Usability - can users figure out how to use this thing?
  • Feasibility - can this solution be built within current constraints?
  • Business viability - will the solution benefit the business? This is required for a sustainable solution!

There are conflicts with being a “unicorn”

  • People try to impose their limitations on to others - as the seventh kid in his household, Adekunle was adept at doing what he wants anyway :)
  • It isn’t easy!

If you’re passionate, you can learn anything. - Eddie Lou (Design Engineering Handbook)

Pareto Rule (the 80/20 rule - 80% of effect comes from 20% of cause). When applied to skills, you can focus on the 20% to get a good start or understanding.

Design must-knows:

  • line
  • colour theory
  • space
  • shape
  • typography

Engineering must-knows:

  • data types
  • operators
  • conditionals
  • functions
  • objects

So how to learn these things? Learn one thing at a time to avoid getting overwhelmed. Johnny Kim managed to be a navy seal, doctor and astronaut - and he got there by doing them one at a time!

As products get more complex, the separation between design and engineering grows wider. It makes it ever more important to be able to communicate effectively between these two disciplines.

Positives of working as a design eng:

  • improve communication
  • reduce friction
  • allow exploration of innovative ideas

Improving communication comes from bridging the different worlds.

(Slide: the balance/focus for design/design eng/eng - showing that DE is strong in the gap the other two leave empty, particularly in prototyping; but also in UI design & implementation)

Design Eng key roles: * design technologist * UI/UX engineer

Design technologists focus on rapid prototyping ideas in order to validate them for future features. They focus a lot on tooling, eg. Figma and associated tools to optimise the design process.

UI/UX engineers focus on production code - making it accessible, performant and scalable.

Design Eng focus areas: * Tooling * Prototyping * Design systems

…

Example of a way to use tooling to help a design outcome: * a Mailchimp Slack bot that could output the brand colours with name and hex code. * Bench - a prototyping tool, you could bootstrap a design quickly using the design system

How does Design Eng reduce friction? Incorporate design engineers into the organisation - ensure they are in a place they can collaborate with specialist roles. You can do this in a centralised or decentralised way; both have pros and cons. It is possible to create a hybrid model, so long as the central team is strict on consulting with teams without taking on their work.

How does Design Engineering help with exploration and innovation? They can work well in any model of design ideation; they can help use a design “handshake” process rather than a one-off design handoff. Regularly work on designs together through the process, rather than trying to do it one big go.

Being comfortable with ambiguity is a must. Having a growth mindset is important when working with diverse colleagues.

If a picture is worth 1000 words, a prototype is worth 1000 meetings. - IDEO

Prototyping is great to find issues and edge cases earlier. (Ran through a range of prototyping methods)

Use the Design Engineer role to create spaces for hybrids and specialists to thrive!

Adekunle’s slides

Matt Colman - Whose Job is Animation?

You might find when you ask “whose job is animation?” …you realise you don’t even know who is doing animation on your team.

Matt started his career working in motion graphics; but career changed into Flash games development; and that evolved into HTML Canvas animation. Then after that he went more into development. So he does have a lot of experience in this area!

What is animation? Any movement or transition in your web app; as well as more overt animation or micro-interactions (like a small button-click animation).

Why even do animation? If done well they help the user understand your app, draw attention to important elements, add a layer of quality and encourage engagement. Apple landing pages are the classic example of being very animation-forward; and the iPhone itself has a lot of fine detail in its animations. But there are less-glamorous examples like the Netflix zoom animation, which smooths off the experience and avoids a sudden jump cut.

(Example: fast demonstration of animation principles applied to a bouncing ball)

Some elements of animation are so subtle and familiar we don’t really notice them - there are drop shadows everywhere, and we don’t ask where the light is coming from…! But there are rules that you need to remember, like big things needing to move more slowly than small things.

Matt asked his coworkers at Atlassian who they thought did animation, and 85% said they didn’t have a formal process for animation. Animations just seem to happen. One said “Jira doesn’t do animations!”… which is a compliment and a problem. The best animations are the ones you don’t notice! But Jira does have animations… so who created them?

In the Jira deployments view there are a lot of animations, but the circumstances that required them often weren’t obvious. Matt doesn’t expect designers to anticipate every possible situation. He tends to create animation during the build, with a bit of trial and error to find things that feel good.

(Video: discussion with a designer where they prototyped some changes in Figma, including being able to share an animation curve that can be used in code. It also shows the way you make lots of hand gestures to illustrate what you are trying to describe.)

But these examples relied on a bit of luck - having someone on the team that knows and cares about animation. What happens to teams that don’t have that?

Finally answering the question: it’s everyone’s job! …wait, no, that’s a lame answer.

In reality animation lives in the intersection between design and development… and when something is everyone’s job, it tends to be nobody’s job. But if you collaborate, you can create amazing things.

Tips to collaborate:

  • encourage designers and developers to extend their animation expertise (relevant to their role)
  • empower devs to suggest animations and iterate with the designer - devs are usually the first ones to see the thing working for real, and if it doesn’t feel right you should be able to do something about it
  • add animation into your design system
  • introduce a process for animation

Design hot tips:

  • record animation in quicktime and go frame by frame to identify problems like flashes during loading
  • think about where the elements live in physical space - you can paper prototype animations! (if you can’t explain an animation it’s probably bad…)
  • make animations quick, although allow a little more time for larger elements (people often start building animations at a second long… and that is wayyy too long)
  • don’t make people motion sick with animation!
  • stay on brand

Dev hot tips:

  • CSS is your go-to for animation, always prefer it
  • For JS use inline styles, they’re performant
  • If you need really complex animation, reach for a library like Framer, Greensock or Lottie

@matt_colman

Steve Harrison - What’s New in CSS in 2023

Steve took us on a rapid tour of the huge amounts of new CSS that’s available.

There is so much, it’s amazing!

Fully supported - you can use them now:

  • Container queries! This is huge, we can finally respond to the width of the parent element
  • Wide-gamut colour spaces
  • 3D animation
  • Advanced :nth-child selectors
  • Accent colours - this is a great way to quickly customise your form inputs
  • Individual transform properties
  • small, large and dynamic viewport units - this handles the way device viewports change significantly, making pure viewport height and width insufficient
  • CSS Layers - this is particularly useful for design systems integrating with project-specific code
  • Native CSS nesting

Partially supported - use an enhancement/use soon:

  • Scoped styles
  • :has - very powerful as you can respond to the type of content being used. Note that it is an “unforgiving” selector
  • :where and :is - while not new in 2023, they are powerful and not well known. They can reduce the amount of code required for some verbose cases; and also they have zero selector weight which can be very handy.
  • Scroll-based animation in CSS - you can do things like the old apple Cover Flow animation in pure CSS
  • View transitions - look out for Phil Nash’s entire talk on this tomorrow!
  • initial-letter - finally one for the type nerds among us
  • Popover API - and this includes support for top-layer, so you don’t have to wrangle z-index any more; and it has accessibility baked in, and light-dismiss behaviour
  • You can animate display
  • text-wrap:balance - your designers will love you for this one

Experimental - use later/give feedback to the draft process:

  • Anchor positioning
  • selectmenu (experimental flag in Chrome)

With so much new stuff available, you need to get into your tools and try them! For things that are coming soon, give feedback in the standards process.

Alex Moore - How the Web can still win on mobile

Open Web Advocacy is a nonprofit with two goals:

  • fair and effective browser competition on all operating systems
  • feature parity between native apps and web apps

OWA work with regulatory bodies around the world (eg. the ACCC in Australia), and have input and help from a lot of developers.

It’s important work because anticompetitive behaviour around browsers and apps costs consumers billions of dollars per year. These costs are revealed in many ways:

  • more expensive development drives up cost, reduces quality and slows innovation
  • platform profit cuts further drive up the cost
  • friction getting to market can prevent apps being launched at all

So it costs business and consumers more when anticompetitive practices aren’t challenged.

What future DO we want?

  • secure
  • fast and frictionless
  • interoperable
  • write once
  • open and rent free

The current reality does not match up to that vision. Mobile OS gatekeepers have seized control from consumers and developers; they have all the control and very little accountability. Mobile OSes are non-interoperable by design. Apple doesn’t release iMessage on Android because it would enable people to give cheaper devices to their kids.

Meanwhile the web gets better every year. More powerful, more secure, faster… and still remains open and rent-free. Most apps on your phone could be written as a PWA and you wouldn’t see a meaningful difference, if any at all. Plus you wouldn’t have to spend time updating the apps, they just load when you want them.

The security of the web is better than that of mobile apps - because it has to be. The web is a big, dangerous place; so its sandbox model is set to Full Paranoid levels. There’s also a myth that the code of app store applications is deeply reviewed before publication, but the practicalities of that precludes it in reality. There are too many apps with too many updates, and not enough humans to actually read all of that code.

The web is write once! The browser handles an incredible amount of things for you, and yet works on a staggering array of devices.

In terms of open and rent free - we don’t tolerate gatekeeping and rent-taking on desktop, why are we so willing to do so on mobile?

…so… why can’t the web compete effectively on mobile?

Curiously, Steve Jobs vision for apps was the same as OWA’s vision.

(Video: Steve Jobs talking about how developers could expand the iphone while keeping the device secure and fast… the vision was to embed the Safari engine in the iPhone, so you can write “Web 2.0 + AJAX apps”… and fundamentally he was describing PWAs.)

Unfortunately Apple decided not to go with that model. Instead they opted for a walled garden taking a 30% cut from developers. They also banned other browsers, by requiring all “apps that browse the web” to use WebKit. Hence all browers on iOS are really just reskinned Safari. This sets a ceiling for all apps on all OSes, because Android devs are unlikely to add extra functionality that they can’t provide all users.

This also means there is no alternative when there are security vulnerabilities in WebKit. If WebKit gets a security bug on iOS all you can do is wait for the patch, you can’t use another browser in the meantime.

…

For the web to truly compete, we need some key features… particularly the same installation prompts as native apps - native apps can be installed easily, but PWAs require some deep menu digging. It’s intentionally buried.

Regulatory bodies around the world are recommending that Apple needs to change this. But keep in mind Apple reportedly has a legal budget of over $1b per year, so they won’t cave easily - particularly when the fines could be up to 10% of global revenue (it’s just business..).

How can you help?

  1. write to OWA about anti-competitive behaviour
  2. tell OWA what you are missing from web apps
  3. follow OWA for updates

The web can still win on mobile, and with your help it will!

open-web-advocacy.org

Lachlan Hunt - Taking advantage of AI to help you write code

AI is exploding at the moment, not just to generate general content but to help you author code. Tools like ChatGPT, Github Copilot and many more… “it’s like pair programming, but with someone who knows how to code”.

How do these tools really generate code in a real world example?

Lachlan’s test case will be “Fizzbonacci” - combined fibonacci and fizzbuzz challenges, trying to avoid easily pre-canned answers.

He put the Fizzbonacci challenge to a range of AI tools, and recorded their one-shot/first-shot answer:

  • ChatGPT - it got it mostly right but forgot to return the first two results
  • Bing Chat - initially just repeatedly output the same value
  • Google Bard - also forgot the first two results
  • GH Copilot - also forgot the first two results
  • Amazon Codewhisperer - just gave a fibonacci solution
  • Tabnine - just gave a fizzbuzz solution
  • AskCodi - had the worst UI but returned best code

Lachlan also ran through further prompts/iteration; and eventually most can produce a working solution. But it was certainly a pretty mixed set of results and none were a flawless experience.

What are online AI tools good for?

  • ideation
  • generating boilerplate
  • implementing well-known or clearly described function - saves time
  • code review and debugging

What are the IDE extensions good for?

  • test suite generation
  • same cases as the online tools but with contextual awareness - IDE extensions have access to your full codebase

Limits and risks

  • there’s no guarantee the code will work or even run
  • you remain responsible for your code (it’s an assistant, you are the author)
  • their context is much more limited than what’s in your head
  • risk of security problems
  • legal issues like violating NDAs

There is a class action against Github at the moment, alleging that Copilot infringes copyright. The legal precedents are yet to be fully set, as to who owns generated code.

Prompt Engineering is the “secret sauce” for getting the most out of your AI:

  • Zero shot prompting - simple prompt that you expect to get right immediately
  • *Few shot prompting - where you provide some exampes of output
  • Chain of thought prompting - a more conversational approach, where you use a series of either zero or few shot prompts. You can prompt by saying “let’s think about this step by step”. This can produce a more accurate result for more-complex problems.

Demo: using ChatGPT to build a calculator app.

  • It did a lot of things quite well, particularly setting up the basics very quickly; and it did neat things like put the numbers in “calculator order”.
  • But it did give a black box algorithm to actually do the calculations; and Lachlan wanted to learn the internals - particularly Reverse Polish Notation, Shunting Yard Algorithm. So he pushed on trying to build that from scratch with AI help.
  • ChatGPT produced something that looked pretty good, but wasn’t checking the precedence of operators. Lachlan had to identify that problem, explain it and then ChatGPT corrected it.

How effective are these tools? Github published a blog post about developer productivity and happiness with Copilot - they concluded that people were significantly faster and happier using Github Copilot. They talked about more than just raw speed - they looked at things like reducing frustration and increasing satisfaction.

Obviously you don’t just want to take the vendor’s word for it, there are a range of academic papers that conclude these tools are beneficial; eg. The effect of generative artificial intelligence (AI)-based tool use on students’ computational thinking skills, programming self-efficacy and motivation.

@lachy@mastodon.au

Shivay Lamba - WebML: State of Machine Learning for Frontend Developers

Shivay shows a quick live demo of a live video filter built in the browser, with surprisingly little code thanks to a pose detection library. Shivay’s code can concentrate on the mathematics of overlaying images, and not worry so much about the (complex!) matter of pose detection.

(Surveying the audience - not a massive amount of people have actually worked with AI and ML in JavaScript. Shivay is keen for more people to try it!)

We are in an innovative period where there are a lot of AI and ML tools appearing, but so much of it is in python… but not everyone wants to go learn a whole new stack! JS is incredibly popular and available across all kinds of devices, including IoT devices.

There are JS APIs and SDKs for some of the popular systems like OpenAI. Obviously you rely on their servers, so this might not work for all cases. But you can even move your ML workflow into JavaScript as well - ONNX, MediaPipe, TensorFlow.js, Transformers.js…

ML in the browser means lower latency, high privacy, lower serving cost; also for loads too large for the client, there is support for NodeJS and IoT devices. The performance of NodeJS is comparable with Python.

TensorflowJS allows you to run existing models, retrain existing models with transfer learning, or write models from scratch in JS.

(Example of using COCO-SSD - pull in three libs, add in the UI, and the actual image detection call happens in just a couple of lines)

JS is amazing, but of course it is not perfect - there are issues with performance, and complex mathematics can be done better in other languages. So you can build up an overall solution moving the crunching to WASM, WebGL, WebGPU.

(Demo: Shivay was running ermine.ai transcription in the browser all along…!)

If you are interested in LLMs - look into AI.JSX, which can be used to build things like chatbots in JS. Also Web LLM.

It’s also worth considering using Web Workers if you are using these tools, to take heavy things off the main thread.

@HowDevelop | Shivay’s slides

Maggie Appleton - The Expanding Dark Forest and Generative AI

Maggie notes that the content on AI is up to date as of a week ago… so don’t get upset if it is out of date!

The dark forest hypothesis is the idea we are sitting in the dark and don’t know if we haven’t been destroyed because there aren’t any predators to notice us, or because predators are there but haven’t noticed us.

Reference: sci-fi trilogy The Three Body Problem

The web has all kinds of problems. We have twitter pile ons, public shaming, and piles of inauthentic rubbish content. It can feel hard to find sincere, coherent, community-building content.

So we are wandering around the dark (web) forest and need to go somewhere safe. So we retreat to the “Cozy Web”, or further into completely private group chats. We get away from the reply guys and pile ons, but we also lose benefits like collective knowledge building or simply the ability to search.

Now with GenAI the dark forest is expanding. The tools are easy to use and readily accessible.

But the content type Maggie is most worried about is marketing content, including social media marketing. It means you can pump out vast quanties of information…or misinformation… and it’s all SEO optimised and will spread. Then you can promote it across social media with a few clicks.

We are learning how to build and improve Large Language Models (LLMs). They are producing increasingly-convincing content that’s hard to differentiate from human-generated content.

Why is this a problem for the web?

It’s cheap and fast to pump out content, so we are about to drown in a sea of information garbage.

You can search for As an AI language model - it’s a ‘tell’ for AI talking about its capabilities; and you’ll find large amounts of content that obviously wasn’t even read before posting because the phrase wasn’t removed.

So what’s the good news? Well… it might not be a problem. if you don’t need to achieve anything sincere, or fact-based, or human, you’re fine!

Oof.

People ask why it matters if a generative model creates content instead of a human? In many cases they are as accurate or more accurate than a human. Well…

  1. connection to reality
  2. social context
  3. human relationship potential

LLMs don’t have the same connection to reality as a human, and in some cases their connection is totally unhinged. We politely call the results “hallucinating” when they make up total rubbish.

They also don’t have a social context. AIs take their character from your prompts - not their surroundings and not your surroundings. Also they were mostly trained on english-speaking web content… which is only a very small part of human history.

Generative models also can’t become friends with people. Humans can go for coffee.

…of course we need to reference the film Her which explores the idea of an AI agent and a human having an intense parasocial relationship. Some people aren’t getting the point that this movie was a warning, not a suggestion… and they are creating AI “companions”.

…

Possible Futures

  • We will need to get good at passing the reverse turing test - how do we prove we’re human to machines?
  • Human centipede epistemology - people’s knowledge is based on generated information, and fed back into generators… there are published academic papers that include telltales of AI generation! Some people are listing ChatGPT as an author, to be transparent. But bad actors could easily create paper mills to churn out fake academic papers.
  • Retreat into the cozy web, and spend less time on the open web… this will require better gatekeeping to ensure all participants are real.
  • The meatspace premium - we will doubt all people online, and meet offline to prove they are real. This is at odds with an increased remote working and living trend… and really undoes some of the equality provided by the web.
  • Decentralised human authentication - human verification on the blockchain? Pay $30 to twitter for the purple “totally a human” tick?
  • The filtered web - we’ll have a personalised set of LLMs to help us manage the content we access. We may get to a point where it’s super weird if you just browse the “raw” web without that filter. This is likely to maximise things like echo chambers and polarisation.

Which of these possible futures would you like to make happen? GenAI is not the destructive force, the way we choose to use GenAI is.

Build products that…

  1. protect human agency
  2. treat models as reasoning engines, not sources of truth
  3. augment cognitive abilities rather than replace them

Tactics/notes:

  • Use a human as a locus of agency - it’s slower but safer.
  • Build models with data we know and trust, then run small and understandable tasks with them.
  • Avoid the “black box oracle” approach.
  • The output is not your final, publishable content.
  • Use models to do things we can’t do, not things we’re good at and want to do.

So far we have been very quick to think of AI as scary aliens. Perhaps we should think of AI as a new companion animal species, not alien minds.

@mappletons | Maggie’s slides

Mark Pesce - Steam Engine Time

(Standard caveat: Mark’s talks are best experienced not read about. If you have access, go watch it.)

Thirty years ago Mark was consulting with Apple on his consumer VR startup… and having some extra cash ended up with a Next box, and installed NSCA Mosaic… at the time he could surf the entire web in a week of after-work sessions! Back then the web was small, so it was possible.

Even just one year later that was already impossible, the web had already grown beyond any one person’s ability to consume it.

Just ten months and twenty-six days ago, we were here discussing AI… and we didn’t know that day that we were just about to see the explosion of AI.

(Video: smash cut of AI headlines, set to Beastie Boys ‘Sabotage’ :D)

Part I. The Common Crawl

We all start (as infants) as a blank state, all of our experiences leave a mark. This happens at a deep level - every experience leaves a mark physically and neurologically. At the start our neurons aren’t wired to anything, they’re just firing off. But over time we learn, groups of neurons begin to fire together.

Neurons that fire together, wire together.

Recognition - re cognition - to think on something again. Over time a sense of self emerges. Physical association and coordination build. We learn to crawl, the self is aware and begins to actively seek experience instead of simply experiencing things passively.

We still await repetition, and continue to form associations… and some of those will be good, and some mistakes. We begin to experience more complex emotions like expectation, surprise, disappointment…

Eventually we also develop a sense not just of self, but of ‘other’. The first big category has been established.

Then the number and types of categories we set in our world grows… and our model of self, other and how we categorise grows. We build language at a phenominal rate.

Biology then calls again - the neurons without links start to be deleted. The body unemotionally removes them. This all strengthens the model.

Part II. F*** Off and Find Out

There is no such thing as “artificial intelligence”. The term was created by a small group of men in 1956, as a velvet rope to keep another set of ideas out.

Earlier, Norbert Wiener had set down a set of axioms in the book “Cybernetics”. It established an area of research that was engaged in cross-discipline meetings, trying to understand learning, information and how this was emerging in computing.

Some researchers at Dartmouth wanted nothing to do with this. They didn’t want to be mixed up in all the mess of psychology, anthopology, zoology… so they created a new domain more amenable to clean, pure mathematical description.

They created their own clubhouse, and it hasn’t worked very well. The field of AI has consistently and spectacularly over-promised and under-delivered.

It wasn’t until people modelled neural networks that AI really began to ‘work’. Excluding other disciplines had ultimately slowed progress.

Tensors the lie close together fire together.

Where does the machine learning end, and our own learning begin? We are already driving ourselves to distraction with this question.

What we are seeing now is the birth of a new category… we don’t have a name for it yet, but it’s here.

Part III. Multilarity

The introduction of the steam engine came from a solution to pump water out of coal mines (Newcomen’s atmospheric engine); but immediately people found other uses.

The problem was that steam engines frequently exploded, becoming a massive shrapnel explosion which killed anyone nearby. This happened regularly.

You never turned your back on a steam engine - you tended it from as safe a distance as you could imagine. But of course the threat of sudden death did not deter people from using steam engines, they were just too useful. This went on for sixty years.

Then James Watt came along. And he looked at steam engines as a system, and realised you could use the output of that system as its future input. He invented the “governor”, which allows steam engines to self-regulate. It was the first modern cybernetic system.

Suddenly steam engines were more efficient and didn’t explode so much. We tend to credit James Watt as the father of the steam age, and we even use his name as the unit of power!

Imagine a world completely without mechanical power. Nearly everything around us is the output of a process that used mechanical power. Mechanical power is now only noticeable to us if it stops or disappears.

James Watt was an inventor, not an engineer. He tamed steam empirically - by trial and error. It was another sixty years before we understood the physics of energy transfer, thermodynamics.

…

Sometimes Generative AI suddenly explodes. We are in the sixty years between Thomas Newcomen and James Watt. We are waiting for our James Watt.

When the steam engine entered common use, people wondered if the value of human labour would disappear. It didn’t, but it changed what was in demand.

The same principle will apply to human learning. We will be navigating our own learning amidst a world that’s learning around us. That’s the world that is already happening.

Looking back to thirty years ago… the past doesn’t repeat but it does rhyme.

So, some questions for us: if we could go back and revisit the choices we made thirty years ago, what might we do? Did we imagine that the web would write us, as much as we wrote it?

@mpesce@arvr.social

Alex Danilo - The Soul of a New Application

First thing… forget the web. You’re building an application! Browsers are so capable, you need to shed the old mindset; and understand that you are building an app and the browser is the platform.

So how do you go about building a next-gen application? Consider some approaches…

Local-first software - skip the cloud. Make something that won’t disappear if a cloud service goes offline. Let people work on files on their computer. Crazy right? But it is a powerful model for privacy and control.

Progressive Web App (PWA) - perhaps forget this and think Web Platform App (WPA) instead. Build forwards. This is a decade-old vision for Alex, he’s been thinking about it since 2011. In particular thinking about a private document editing solution for a lawyer taking an ipad to court.

What browser feature do we have to realise this vision?

  • WASM
  • WebRTC
  • File System Access API
  • …and lots more like this

These are built in to the browser and ready to go.

Layout is a pain point for reproducible editable content on the web. WASM + canvas can handle this.

A word document is a zip file containing a lot of XML files and assets like images. The style tree looks a whole lot like the DOM. Alex does in fact BYOD - bring your own dom!

JS UI → BYOD+logic in WASM → canvas → back to the JS UI

Demo: pagez.app …uses this model, just to show it is possible.

Text is all and well, how do you handle images? You could compile libjpg into the WASM module, but why do that when you can use the browser? It can already handle common formats like JPG; and you can use JS renderers for less common things like WMF.

WebShare - you can set a manifest to share the document more easily.

…

Moving forward with this you have to think about the user experience; and the challenges of documents - eg. they can be 1000 pages long and people still need to work on them. You can use the DOM in workers, use Comlink, use offscreen canvas… the idea here is to keep the UI thread responsive and offload heavy operations to other threads.

Operational Transforms (OT)… “OT is dead, long live the CRDT!”. OT is a lot like sequential source control (SVN) while CRDT is more like Git where you can commit locally.

…

So why would you do this? It’s a lot of work to unpack a word doc in the browser?! Word is a format that predates the web. If Pagez disappears, users still have word documents that they can keep editing.

Isn’t this all cutting edge? WASM is 7 years old, WebRTC is 12 years old, canvas is 14 years old! These things are established and stable.

The message here is to think about the web not as distinct from the native operating system, but to think of the browser as a platform.

@alexanderdanilo

Ben Taylor - Web Components: Another Tool in your Toolbox

Ben has been using Web Components in production for about five years, and when he has a weird problem he tends to reach for web components… but he doesn’t see his peers do so.

Why don’t we see Web Components as just another tool in your toolkit?

Confusion:

  • what are they?
  • is it like React?
  • is it a framework?
  • how come they have dashes?

(Part of the web platform, no, no, and dunno, thanks for coming!)

In 2013 the Extensible Web Manifesto was published and signed by a lot of big names in the industry.

(Ben then broke the audience laughing as he read the manifesto in a Guy Fawkes mask)

Key callout:

Expose low-level capabilities that explain existing features, such as HTML and CSS, allowing authors to understand and replicate them.

extensiblewebmanifesto.org

The basic idea of web components is that if you need to create your own HTML element, you can.

Ben wishes there was a standard HTML input for typing maths. It doesn’t exist (he checked MDN!) but someone built one (cortesjs.io/mathlive), which takes LaTex (a format academics use “because they hate themselves!”).

Because it’s HTML you don’t have to do any clever tricks to use it anywhere you can render HTML.

Is this difficult to use? No! Custom elements are really easy. You can also use Shadow DOM, which is … a little more confusing.

Ben built a custom element to handle text highlighting of audio transcripts - this requires a lot of elements as every word and sentence has to be wrapped. He was able to put all the logic of breaking up the text into the element, which might seem crazy but it means it will outlive any frontend framework. It has encapsulated functionality… and it’s easier and nicer to work on the DOM when you are in the DOM.

You can also avoid some really complex mutation observer code, but using WC lifecycle callbacks (quite similar to React’s useEffect).

Ben’s mental model is that Custom Elements are helper functions for HTML. But in MathLive the real work is going on in the Shadow DOM. When you inspect the custom element, there is a child shadow-root which contains a great deal of HTML.

There are three faustian pacts with Shadow DOM!

  1. Style from outside does not apply inside
  2. Style from inside only applies inside
  3. Elements are concealed from DOM APIs

This gives encapsulated elements.

It is reasonably straightforward to summon a shadow DOM; and you can style with encapsulation (some conditions apply).

What Ben did with this is create Runno, to do things like run Python examples, with an editor, right in the browser. All you have to write as a consumer is:

<runno-run runtime="python" editor controls>
    print("Hello, World!")
</runno-run>

So the summary is:

  • Custom elements let you make your own elements
  • Shadow DOM lets you encapsulate your CSS and HTML
  • These are useful techniques that you can use
  • It’s not a big deal, you can write a Web Component

It’s all part of the browser, that makes it part of your toolkit!

@taybenlor

Phil Nash - CSS Between the Pages

Phil is here to talk about the view transitions standard.

There are two sides to this:

  • SPA transitions - for javascript single-page apps
  • MPA transitions - Multi Page App is a slightly odd way to say “websites”

The idea of page and element transitions isn’t new, it’s been around since Internet Explorer invented them! But that version has fallen away, probably for the best, as nobody else ever implemented it.

Why do we need the View Transitions API? We have invented vast amounts of JavaScript to avoid seeing a momentary flash of white between views. It’s understandable, it does seem a little jarring. It’s all about state, and controlling state so we can change just the things we want to change; and not the things we didn’t.

To transition between two elements in the browser, both need to be present. This is a problem moving between pages, because the new page isn’t present yet. SPAs handle this by re-rendering parts of a single page to simulate moving to a new page, hence the name. Even then, you need to do a lot of work to make that transition feel smooth and not just be a smash cut between different elements.

The SPA transition spec makes things much easier - a single line of code will add in nice transitions (default is a pleasant crossfade). Behind the scenes the browser takes a snapshot of the old DOM, renders the new DOM, then visually transitions between them.

You can apply CSS to the view transition pseudo elements, and build up custom transitions. But you do need to be careful not to recreate the white flash problem - you can create named sections of the page and apply different transitions (in the demo, avoiding having the header and footer moving around).

Debugging - there is an animations tab in dev tools that enables pausing, reduced speed and step-through style debugging for animations.

You can create entrance and exit animations by using the only-child selector combined with the view-transition-old and view-transition-new pseudos.

Remember to put all this behind a media query; or disable transitions for prefers-reduced-motion.

Browser support - it’s currently in all chromium browsers, so you can add it for about 65% of users right away. You can also detect support and keep doing old school transitions for browsers that don’t have the new API yet.

…

The MPA transitions spec is really the most exciting thing - we’ve been doing SPA transitions for a long time!

MPA transitions are currently an experimental feature that need to be enabled in the browser.

To use them, add this meta tag… <meta name="view-transition" content="same-origin"> …and now your website has transitions!

Behind the scenes the process is the same - the browser creates two snapshots and transitions between them.

Phil believes this is the future for a lot of web development! We have spent so much time and effort on SPAs to avoid a flash of white… and now we can just add a meta tag!

The difference between a web site and a web application can come back into play, without a key tradeoff. Web sites are great at putting content up at URLs, and we have a lot of cases where that’s what you need.

If you’ve created a website with an SPA framework it can seem very muddy, many sites were built like apps. This brought the same risks as apps into play, but for the use case of sites where they maybe weren’t the biggest risks.

Consider the principle of least power - the web platform itself is the simplest way to achieve big results.

So View Transitions can give us the ability to get SPA-style experiences on websites, but with a hugely reduced amount of code.

Phil has been having fun buiding out a suite of “unnecessary view transitions”… blinds, wipes, spirals… there is a lot of potential to have fun.

There are other ones - see deathbyjavascript.com, astro-records.pages.dev

Make the right choices - think about what you need to do, and what you need to do that. URLs and MPAs are cool and will be cool again!

philna.sh

Nishu Goel - Breaking up Long Tasks

(Note - as MC I had some administrative distractions during this session, so these notes are heavily truncated)

So what is a long task? Demonstration of recording a performance profile, throttling to 4x slowdown to record a realistic profile… and some tasks are highlighted with a red comment flag. These are the long tasks. The threshold for a long tasks is 15ms.

Digging in to what these tasks are doing, you can find that a task may have blocking time, ie. blocking the main thread, which the user experiences as input delay.

In core web vitals First Input Delay is being replaced by INP, which gives a more realistic picture. Which may make you sad if you used to get a good score on FID…

So what do you do? Break down the long tasks into small tasks, and add a yield function to avoid blocking the main thread. In future we will be able to use the scheduler.yield API to help manage (the Scheduler API is in origin trials at the moment).

In React you can use the useTransition/startTransition API. You can execute urgent tasks right away, then put non urgent tasks inside a startTransition call. Keep in mind this means the non urgent task will now take longer than it would have otherwise.

For more on this topic from Nishu: Breaking up long tasks | Planet Performance

@TheNishuGoel

Quynh-Chi Nguyen - Fantastic Load-Time Savings and Where to Find Them

QC came back to work from a break once, and was told the web app had to load 10x faster - just a small task…! Stile is an educational web app, it’s an editable textbook style of experience. The frontend is mostly React.

Being in education, their customers are limited in technology - they may not have new browsers, they may have slow internet.

So to make things faster, you need to download less stuff. This gets more challenging when you move to continuous deployment, where you can easily force people to re-download more stuff, more often.

So how did QC find savings, and what tools did she use to find them?

  • code-splitting (don’t just ship one huge bundle)
  • loading code on demand (only load chunks of code when you need them; you can use React lazy loading and dynamic imports. avoid require.ensure as it’s deprecated.)
  • use bundle analysis tools to explore your app’s dependency tree (QC used statoscope.tech) - this can explain mysteries of why dependencies get pulled into the main bundle when they should not be
  • next - webpack-bundle-analyzer, which can make it easier to find duplicate chunks; and generally understand where the size of your bundle is coming from
  • caching - pay attention to what doesn’t change… and content hashes are your friend

In many ways, you’re asking what do you know about your code… do you have:

  • highly-coupled modules?
  • code with different release cadences
  • third party dependencies
  • code that never changes
  • code that compresses well

So, code splitting is nice and all… but sooner or later you find the spooky bits. With bonus Vim promotion…

By inspecting code directly, she found that some code that didn’t change was being bundled in a different order each time; so it was getting a new hash every time. She traced it to the way Webpack generated chunk hashes. The moral of the story is “don’t trust your bundler”.

But there was more! Their icon font was being generated in each build, which included a creation timestamp embedded in the font. Which again created cache churn.

Next, get into your browser tools - QC spent a while staring at the network tab, and realised there was an image downloading every single time. It turned out to be an S3 hosted image that was not set to cache - they turned on caching and yay! Savings.

Not wanting to act like it’s all cache or splitting… more splitting! HTTP1 has limits on parallel downloads, while HTTP2 supports multiplexing… it’s faster in other words. This means you can split your code into more chunks with HTTP2.

There needs to be a balance between having too few large chunks and having too many small chunks. Also the way bundles are generated can introduce extra boilerplate or reduce the effectiveness of compression. There is no one true answer - you will need to test what works for your solution.

You can also use speculative loading - preload/modulepreload/prefetch/etc … this can make the experience feel faster even when more is loaded overall.

Sins of the past… while looking in the network tab QC also noticed an old progressive image fallback. They were loading three small images and layering them, but it turns out the three small ones added up to the same weight… so instead of saving time, it effectively doubled load time.

Results of all the savings:

  • 45% reduction in JS download size
  • 43% page weight reduction on login page
  • more caching
  • CEO was happy

A learning here was that they could have used better metrics from “before”. They use debugbear.com now; but had they had that up front they’d have had more comparison data. They now monitor performance regularly to ensure they are aware of any regressions.

@priority_q

Alex Russell - Frontend’s Lost Decade & The Market for Lemons

Earlier in Alex’s career javascript was a big of a “special occasion food”… we perhaps didn’t expect JavaScript to become such a focus!

People didn’t create PWAs for fun, they created them so the the web could actually compete with mobile.

The market for lemons refers to Akerlof’s “The Market For Lemons” paper from 1970, which explains the irrational motives that can emerge in markets.

Frontend sitrep… people believe some things that aren’t true.

People believe CPUs are fast now - is it true? It was when desktop dominated, but browsing flipped in 2016 - there is more usage on mobile. Next thing to note is that most people are using android devices. In the room at web directions, we mostly have current or recent models of iPhone; not a budget Android. We’re weird, in other words.

The average price of a phone has been stable around US$300 for years. This is the volume point, and phones in this range are simply not as powerful as an iPhone. This is the performance inequality gap.

Similarly… most people don’t use a Mac as their desktop or laptop either. People use cheaper devices - laptops in the US$250-300 range, which are painfully slow.

Median phone lifespan is 3-4 years; PC lifespan is 5-8 years. So even if people had a device that was fast when they bought it, by now it probably isn’t fast any more.

So. No, people don’t have fast CPUs. They most have old devices, mostly mobiles, that weren’t fast in the first place.

…but you’ll say our users have fast CPUs. That may be true, good luck… but it probably isn’t! And you won’t be able to grow into markets other than “rich people”. Did your senior management sign off on that?

…

Next thing people believe is that everyone has fast internet. Is that true?

Every 4G user is a 3G user some of the time - Ilya Grigorik, paraphrased

Globally more people still have 2G than 5G and that won’t change for a long time yet. There is a very real digital divide when it comes to the speed and cost of internet.

And even in markets where the average top speed is high, people don’t have that top speed all the time.

…

Next fiction: we got this! we’re fast!

Alex showed some real world tests…

Sites that rely on speed to make money have stayed fast. They have skipped the JavaScript SPA era. Sites that have bought in to SPAs are slower across the board.

Our addiction to JavaScript is costing us.

…

A lost decade?

eCommerce is not a new category. We have been selling things online for a long time now. But Alex sees all the fallout where adoption of heavy JS solutions had destroyed speed, and reduced profit as a result. Losing massive amounts of money.

People believed fictions about fast CPUs and fast internet… and many teams experience real pain and harm, when launches get scrubbed or delayed because they find at the end the thing is just slow.

Many launch anyway because they are so committed they have no choice, but they don’t achieve their goals. And now you’re stuck with a complex solution you can’t work on rapidly.

…

At Microsoft, more and more of their products are delivered as web apps. So Alex works with these teams to try to keep them fast.

The Edge team is of course highly aware that a slow browser loses users. And some internals of Edge are web apps

edge://browser-essentials is a web page; and it had to be rebuilt to get load time down from 1.7s on that cheap laptop, to .5s. This might not seem like much, but Alex showed them loading side by side… and you really notice the difference.

…

We need new lenses as an industry. We have been looking at our feet. People didn’t mean to do anything harmful, people want to do good work. It’s no fun to spend time and money rebuilding something, only for the new version to be slower than the old one.

Some tactics -

  • Make PMs and Managers use cheap devices
  • Get developers to emulate cheap devices in their dev tools
  • Think about more options than SPAs

Manage for minimum client complexity. That means the ratio of what we do in CSS and HTML should be higher, and we should use less JavaScript if we can. Many of the sites we publish don’t need it!

Performance management maturity is a ladder. Many teams aren’t using the right tools to succeed, they’re not working with the right data.

Stop hiring people to create problems in JavaScript, start hiring people to solve them in HTML and CSS. There are a lot of people out there who want to do this kind of work!

infrequently.org

Tea Uglow - All the Things That Seem to Matter

“From the big bang to the heat death of the universe…” Tea took us on a brilliant journey through time, philosophy, ethics and difficult choices.

Notes are always a poor substitute for the real thing; but sometimes I bail out and put the laptop away entirely. Simon Wright was sitting next to me and saw me do this, and wrote down the word “unstonkable”.

This was unstonkable. Sometimes you need to be there. See you next year!