A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

4 年前
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. title: Journal-Lightweight
  2. url: https://adactio.com/journal/16797
  3. hash_url: 24f52bba99b1423102f93cf86b948c5b
  4. <p>It’s been fascinating to see how television programmes have adapted to The Situation. It’s like there’s been a weird inversion with the YouTube asthetic. Instead of YouTubers doing their utmost to emulate the look of professional television, now everyone on professional television looks like a YouTuber.</p>
  5. <p>No more lighting or audio technicians. No more studio audiences. Heck, no more studios.</p>
  6. <p>There are some kinds of TV programmes that are showing the strain. A lot of comedy formats just fall flat without the usual production values. But a lot of programmes work just fine. In fact, some of them might be better. Watching <a href="https://www.theguardian.com/books/2020/apr/15/margaret-atwood-showcase-gothic-puppet-show-mary-beard-bbc">Mary Beard present <cite>Front Row Late</cite></a> from her house is an absolute delight. It feels more direct and honest without the artiface of a television studio. It kind of makes you wonder whether expensive production costs are really necessary when what you really care about is the content.</p>
  7. <p>All of this is one big belaboured metaphor for websites.</p>
  8. <p>In times of crisis, informational websites sometimes offer a “lite” version. Max has even made an <a href="https://mxb.dev/blog/emergency-website-kit/">emergency website kit</a>:</p>
  9. <blockquote>
  10. <p>The site contains only the bare minimum - no webfonts, no tracking, no unnecessary images. The entire thing should fit in a single HTTP request. It’s basically just a small, ultra-lean blog focused on maximum resilience and accessibility. The Service Worker takes it a step further from there so if you’ve visited the site once, the information is still accessible even if you lose network coverage.</p>
  11. </blockquote>
  12. <p>Eric emphasises the importance of performance in his post <a href="https://meyerweb.com/eric/thoughts/2020/03/22/get-static/"><cite>Get Static</cite></a>:</p>
  13. <blockquote>
  14. <p>I’m thinking here of sites for places like health departments (and pretty much all government services), hospitals and clinics, utility services, food delivery and ordering, and I’m sure there are more that haven’t occurred to me.  As much as you possibly can, get it down to static HTML and CSS and maybe a tiny bit of enhancing JS, and pare away every byte you can.</p>
  15. </blockquote>
  16. <p>Tom Loosemore offers this <a href="https://twitter.com/tomskitomski/status/1241009376653012993">advice to teams building new coronavirus services</a>:</p>
  17. <blockquote>
  18. <ol>
  19. <li>Get a 4 year-old Android phone, and use it as your test/demo device.
  20. </li><li><a href="https://design-system.service.gov.uk">https://design-system.service.gov.uk</a> is your friend. </li>
  21. <li>Full React isn’t your friend if it makes your service slow &amp; inaccessible</li>
  22. </ol>
  23. <p>Remember: This is for everyone.</p>
  24. </blockquote>
  25. <p>Indeed, Gov.uk are usually a paragon of best practices in just about any situation. But they dropped the ball recently, as <a href="https://twitter.com/dracos/status/1251836594509791232">Matthew attests</a>:</p>
  26. <blockquote>
  27. <p><a href="https://coronavirus.data.gov.uk">coronavirus.data.gov.uk</a> is a static site, fetching and displaying remote data. It is also a 100% client-side JavaScript React site.</p>
  28. <p><a href="http://dracos.co.uk/made/coronavirus.data.gov.uk/">http://dracos.co.uk/made/coronavirus.data.gov.uk/</a> is 238K vs 770K (basics) on load. I’ve removed about 550K of JavaScript. It seems to work the same.</p>
  29. </blockquote>
  30. <p><a href="https://tom.loosemore.com/2020/04/19/shonky-coronavirus-react/">As Tom says</a>:</p>
  31. <blockquote>
  32. <p>One sign that your website isn’t meeting the needs of all your users is when <a href="http://dracos.co.uk/">Matthew Somerville</a> gets sufficiently grumpy about it to do a proper version himself.</p>
  33. </blockquote>
  34. <p>It’s true enough that Matthew excels at creating lightweight, accessible versions of services that are too bloated or buggy to use. His <a href="http://www.dracos.co.uk/odeon/">accessible Odeon</a> project from back in the day is legendary. And I use his slimline version of the National Rail website all the time: <a href="https://traintimes.org.uk">traintimes.org.uk</a>—it’s a <a href="https://traintimes.org.uk/notes/performance">terrificly performant</a> progressive web app.</p>
  35. <p><a href="https://twitter.com/dracos/status/1168856479782379520">It’s thankless work though</a>. It flies in the face of everything considered “modern” web development. (If you want to know the cost of “modern” framework-driven JavaScript-first web development, <a href="https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/">Tim has the numbers</a>.) <a href="https://twitter.com/adactio/status/256551142">But Matthew is kind of a hero to me</a>. I wish more developers would follow his example.</p>
  36. <p>Maybe now, with this rush to make lightweight versions of valuable services, we might stop and reflect on whether we ever really needed all those added extras in the first place.</p>
  37. <p>Hope springs eternal.</p>
  38. <p><strong>Update</strong>: Matthew has written about his process in <a href="http://dracos.co.uk/wrote/coronavirus-dashboard/">Looking at coronavirus.data.gov.uk</a>.</p>