September 29, 2024

Share:

Sep 29, 2024

I finally bit the bullet and learned to use SwiftData and it turned out to be simple to use (as a beginner).

I’m playing around to try and learn how the data is modeled.

I could go from ephemeral to persistent storage in a couple of hours.

~ updated at: 2024-09-29T14:59:30.158Z


Excerpts from Using Progressive Enhancement by GOV dot UK

“Progressive enhancement is a way of building websites and applications based on the idea that you should make your page work with HTML first.”

HTML and CSS layers are fault-tolerant (browsers will ignore declarations that it doesn’t understand).

Javascript must only be used to enhance user experience in necessary parts of data that are already in HTML.

“Where possible the JavaScript should enhance HTML and CSS that provide the same core functionality. For example, an autocomplete could enhance an element, or something similar. This still lets the user do what they need to do, even if the JavaScript fails.”

HTML and CSS offer the bottom layer (Layer 1) where things can happen but rather slowly. Javascript layer to exist to make a certain action faster. If the javascript layer is to be removed, the required functionality would still be possible albeit slowly as initially intended.

This way, no process is “blocked” during Javascript-based failures, etc.

“If you believe your service can only be built using JavaScript, you should think about using simpler solutions that are built using HTML and CSS and will meet user needs.” For example, if you want to use JavaScript to provide interactive graphs, other options are to:

Display the data in a table Allow the data to be exported so that it can analysed in another application Pre-render the graphs as images

If the core functionality of your service cannot be provided without JavaScript, you’ll need to consider how users can access your service through other channels. This might be telephone calls or in-person visits to offices.

Looks like the UK gov prefers in-person processes rather than injecting Javascript into government websites. This a highly opinionated decision.

If you do choose to use client-side JavaScript frameworks, be aware that although they can be helpful when building a service with a complex user interface, they can introduce problems.

Using a client-side JavaScript framework can:

Increase the overall size of your code base and push processing to the client side, causing performance issues for users with a slower network connection or lower-powered device Create a reliance on third-party code that your developers do not have control over, requiring you to make major changes to your service to stay up to date with changes in the framework make it difficult to find people with the skills required to maintain the code, if the frameworks lose popularity over time If you use a JavaScript framework you should:

Be able to justify with evidence, how using JavaScript would benefit users Be aware of any negative impacts and be able to mitigate them Consider whether the benefits of using it outweigh the potential problems Only use the framework for parts of the user interface that cannot be built using HTML and CSS alone design each part of the user interface as a separate component

Having separate components means that if the JavaScript fails to load, it will only be that single component that fails. The rest of the page will load as normal.

I can understand this approach, keeping things light and simple is a win, and keeping the user base in mind (literally everyone in the country in this example), it’s important to ensure stability and dependency-less design.

The userbase for a normal corporate may or may not be the same, so the design for the userbase is a good way to think about problem-solving.

“If you use JavaScript, it should only be used to enhance the HTML and CSS so users can still use the service if the JavaScript fails.”

“Some users may deliberately turn off features in their browsers. You should respect their decision and make sure those users can still use your service. Some users may deliberately turn off features in their browsers. You should respect their decision and make sure those users can still use your service.”

A user can turn off JavaScript in their browsers AND direly need certain services.

“Do not build your service as a single-page application (SPA). This is where the loading of pages within your service is handled by JavaScript, rather than the browser.”

A subset of users using accessibility features may get a sub-optimal or dead-end experience. The heavy use of back and forward buttons and page refresh can cause states that they don’t intend or understand.

The UK government has written another piece on why progressive enhancement is good (I agree in favor of incremental improvements as good engineering practice):

Quoting architect of gov dot uk

“Progressive enhancement is about resilience as much as it is about inclusiveness.”

~ updated at: 2024-09-29T04:39:18.497Z


Find more posts from following topics

1
12
13
14
15
16
17
18
19
2
20
2024
21
22
23
24
26
27
28
29
3
30
4
5
6
8
@binding
abbacchio
accurate-requests
anime
api-development
api-testing
api-testing-tools
array
automated-testing
bad-habits
base64-decoder
base64-encoder
biography
blog
blogging
books
browser
bulma-css
bulma.io
bulmacss
button-swiftui
chatgpt
chrome
clipboard
code
code-block
code-navigation
code-snippet
codecoverage
comparison
compile
computer-networks
configuring-debugger-for-django-in-vs-code
configuring-launch.json-for-python-debugger
copy
copy-to-clipboard
copy-to-clipboard-neovim
css
current-date
current-time
current-timestamp
database
debugger-setup-in-visual-studio-code
debugging-django-app-in-visual-studio-code
debugging-python-code-in-visual-studio-code
debugging-python-programs-with-visual-studio-code
debugging-python-with-virtual-environment-in-vs-code
december
developer-productivity
developers
development-workflow
django
django-rest-framework
dom
dynamic-sitemap-in-nextjs
encryption
engineering-dashboard
enumerate
experience
fiction
flowcharts
generics
git
git-diff
github
global-keyboard-shorcut
global-shortcut
go-hugo
go-programming
go-test
go-to-line
go-tool
go1.18
golang
golang-development
golden-wind
good-habits
gorilla-websocket
gpt
gpt-3.5
gpt-4
gpt-4-api
guide
gumroad
habits
habits-tracker-notion-template
hamburger-menu
hotkeys
html
hugo
ide
image
image-sharing
image-tool-for-ios
imagerenderer
include-timestamp
integrated-development-environment
ios
ios-16
ios16
iphone
iphone-13
iphone-13-pro
iphone-13-pro-max
javascript
jojos-bizzarre-adventure
jump-to-definition
keyboard-shortcut
leonardo-da-vinci
lessons
linux
logging
ls
lsp
macos
map
markdown
markdown-code
mental-programming
menu
menubarextra
mergesort
mermaid-syntax
mistake-tracker-notion
mobile-view
modifier
modulo-operation
navbar
navigationlink
navigationstack
neovim
nested-functions
next.js
nextjs
nextjs-markdown
nextjs-sitemap
nextjs-sitemaps
nice-shot
nice-shot-pro
notion
notion-api
notion-api-python
notion-budget
notion-budget-template
notion-budget-tracker
notion-bug-report-tracker
notion-dashboard
notion-expense-manager
notion-habits
notion-habits-dashboard
notion-habits-template
notion-habits-tracker
notion-habits-tracker-template
notion-issue-tracker
notion-mistake-tracker
notion-product
notion-product-dashboard
notion-product-roadmap
notion-product-roadmap-dashboard
notion-tasks
notion-tasks-dashboard
notion-tasks-template
notion-tasks-tracker
notion-template
notionworkspaces
november
october
openai
osx
pagination
personal-ifttt-framework
photospicker
photospickeritem
phpickerfilter
postgres
postman-capabilities
postman-request
pre-request-script
product-roadmap-notion-template
product-roadmap-template
productivity
programming
python
python-api
python-debugger-tutorial-for-vs-code
python-debugging-mode-in-vs-code
python-notion-api
python3
reading
real-time-communication
rehype
remark
request-data
running-debugger-in-visual-studio-code
running-django-app-in-debugging-mode
running-program-in-debugging-mode-in-vs-code
running-python-code-in-debugging-mode
safari
screenshot-app-for-ios
screenshot-app-ios
screenshot-ios
screenshot-tool-for-ios
september
set-current-timestamp
setting-up-debugger-in-vs-code-for-python
share-extension
sharelink
sharepreview
sharesheet
simple-websocket-server
sitemap
slice
slices
slider
sort
sorting
space-complexity
sql
ssh
step-by-step-guide
stocks-profits-tracker
stocks-profits-tracker-template
stocks-tracker
struct
sustained-vigilance
swift
swiftui
swiftui-button
swiftui-button-action
swiftui-button-style
table-of-contents
tasks-tracker-notion-template
tcp
test
testing
textfield-swiftui
til
tim-sort
time-complexity
timeliness
timestamp-integration
timsort
transferable
triggers-and-actions
tutorial
unittest
unix
us-stocks
usa-stocks
useful-ios-features
using-breakpoints-in-python-debugger
using-virtual-environment-with-python-debugger
vanilla-javascript
variable
vim
visual-mode
visual-studio-code
vs-code
vscode
vscode-go-to-line
walter-isaacson
web-sockets-in-go
websocket-client
websocket-programming
websocket-server
white-screen-of-death
wsod
xcode
xss