diff --git a/src/components/CodeFigure.astro b/src/components/CodeFigure.astro index 978d990..60c23a5 100644 --- a/src/components/CodeFigure.astro +++ b/src/components/CodeFigure.astro @@ -21,6 +21,12 @@ const { label } = Astro.props; } :global(figure pre.astro-code) { - padding: 0 1em 1em; + margin: 0; + padding: 1em; + } + + :global(figure pre.astro-code:focus) { + outline: var(--2px) solid var(--color-link); + outline-offset: calc(var(--4px) * -1); } diff --git a/src/content/writings/2023-11-21-without-js.mdx b/src/content/writings/2023-11-21-without-js.mdx index da2dd07..a20e4e1 100644 --- a/src/content/writings/2023-11-21-without-js.mdx +++ b/src/content/writings/2023-11-21-without-js.mdx @@ -1,5 +1,5 @@ --- -title: Imagine the web without JavaScript +title: If you could not use JavaScript pubDate: 2023-11-21 description: "" draft: true @@ -7,9 +7,9 @@ draft: true import CodeFigure from "@components/CodeFigure.astro"; -The software teams I have worked with over the last 10 years have primarily developed single-page applications (SPA). That is a long period of time to practice that pattern and learn from it. Two years ago, I published the article [*Warning signs of front-end complexity*](/2022-08-30/complexity) as a way to reflect on the problems encountered with this approach and to provide a way forward. Since then, I directed two software teams on migrating their single-page architecture to a multi-page architecture. +The software teams I have worked with over the last 10 years have primarily developed single-page applications (SPA). That is a long time to practice and learn from that pattern. Two years ago, I published the article [*Warning signs of front-end complexity*](/2022-08-30/complexity) as a way to reflect on the problems encountered with this approach and to provide a way forward. Since then, I directed two software teams on migrating their single-page architecture to a multi-page architecture. -During these projects, developers frequently ask me: +During these projects, developers frequently ask me about the user interface: > Should this be a link or a button? @@ -17,41 +17,114 @@ My most effective response is simply: > How would you build this if you could not use JavaScript? -A JavaScript-less web relies on links and form submissions to handle all interactions with the server, resulting in a page refresh or redirect. +A JavaScript-less web relies on links and form submissions to handle all interactions with the server, resulting in a page refresh or redirect. Let's review some examples: -## Query string +- [Links](#links) +- [In-page links](#in-page-links) +- [Submit buttons](#submit-buttons) +- [Non-submit buttons](#non-submit-buttons) -Keys and values are shared to the server through the URL's query string, most often used in a link's `href` attribute. +## Links - +Use links when user input is not needed, such as for a website's navigation. + + ```html -Page 1 -Page 2 + ``` -## User input +If a page links to itself, it may include extra data in its query string to support dynamic server-side rendering. For example, `page` and `sort` keys could provide basic pagination functionality. + + +```html + +``` + -User input is shared with the server through form field `name` and `value` attributes. +Links can also be used to apply settings for a page. Like pagination, changing the sort order uses the `page` and `sort` keys. - + ```html - + +``` + + +The server inspects the current `sort` value in the URL and dynamically applies it to all the pagination links. - + +```html + ``` -## View resources +## In-page links + +Use in-page links with `#` to navigate to specific content on the same page. + + +```html + + +

+ + +

+ + +

+ +``` +
+ +[Skip to…] +[Back to top] +[Anchor links] + +## Submit buttons -Use a form's `get` method to view resources based on user input, such as displaying a list of items sorted in a user-specified way. +Use submit buttons with forms when user input is needed. The `name` and `value` attributes on form fields are sent to the server on submit. - +Use a form's `get` method to change the view of a page based on user input, such as displaying a list of items sorted in a user-specified way. In this particular case, the result is effectively identical to the previously described link-based solution. + + ```html -
+ - + + + +
-
- - - + + + + +
-
- - + + +
``` @@ -102,23 +172,24 @@ Hidden input fields can indicate the particular action to take on the given reso Alternatively, the hidden input fields could be replaced by a URL convention that includes the action and resource identifier in the form's `action` URL. - + ```html
- + +
- + +
@@ -129,12 +200,48 @@ Alternatively, the hidden input fields could be replaced by a URL convention tha ```
+## Non-submit buttons + +Buttons do not submit a form when they are: + +- outside a form +- within a form with the `type="button"` attribute + + +```html + + +
+ +
+``` +
+ +The only way to make these types of buttons functional is to use JavaScript. These are mostly used as a way to enhance the user experience. + +## Conclusion + +How you use links or buttons primarily depends on the need for user input and the intended default browser behavior. + +| User input | Default behavior | Use | +| :-- | :-- | :-- | +| None | Redirect or refresh | `` | +| None | Skip | `` | +| Optional | Redirect or refresh | `