this post was submitted on 10 Apr 2024
19 points (95.2% liked)
Web Development
3434 readers
1 users here now
Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development
What is web development?
Web development is the process of creating websites or web applications
Rules/Guidelines
- Follow the programming.dev site rules
- Keep content related to web development
- If what you're posting relates to one of the related communities, crosspost it into there to help them grow
- If youre posting an article older than two years put the year it was made in brackets after the title
Related Communities
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
Wormhole
Some webdev blogs
Not sure what to post in here? Want some web development related things to read?
Heres a couple blogs that have web development related content
- https://frontendfoc.us/ - [RSS]
- https://wesbos.com/blog
- https://davidwalsh.name/ - [RSS]
- https://www.nngroup.com/articles/
- https://sia.codes/posts/ - [RSS]
- https://www.smashingmagazine.com/ - [RSS]
- https://www.bennadel.com/ - [RSS]
- https://web.dev/ - [RSS]
founded 1 year ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
view the rest of the comments
Step 1: remove user agency.
I get that it's hard to come up with a good example of using
<base>
, but I wouldn't show a user-hostile example before ... cutting the element from Chapter 1 entirely. The only time I've ever used<base>
was when I had to deploy multiple versions of a multi-page static site to a subdirectory for its staging environment, but to the public root for the production environment. Even then, the solution wasn't, "use<base>
," it was, "sort shit out later with nginx."Step 2: confuse the use case of anchors and buttons.
I understand that it's just an example but it's never just an example. Use appropriate landmarks or break your snippets down to the point where it's obvious that what you're pointing out isn't the whole thing. You don't need
<body>
or<ul>
or<li>
, just split the snippet in two, like this:Step 3: Introduce Javascript to restore the native functionality you broke in step one.
Don't do that. I mean, don't really do any of this example, but really don't do this last part. Adding
class="native"
is as cumbersome as addingtarget="_blank"
, while also being more brittle. [I edited out a considerable amount of swearing here.] I think this is just a symptom of a bad example gone way too far.If the client insists on opening all external links in new tabs, get it in writing and then do this:
~~
<base target="_blank" />
~~You can use querySelectorAll with a prefix attribute selector like
'a[href^="http"]'
instead of a typical class selector. This lets you grab all the anchors with hrefs that start with "http" without adding extra syntax where it doesn't really belong. Once you've got your external links, iterate through that NodeList with forEach and tack ontarget="_blank"
using setAttribute. That way, you're not re-implementing default behavior, you're only mildly annoying users with HCI devices, and if JS gets blocked all your links suddenly behave predictably.Even this is bad! Just don't! It's so easy to not!
Other notes
<meta>
vsmeta
. If they have to guess, they'll guess wrong. Suffix with "element" to really beat them over the head with it.class="foreign"
. If you can't, suffix it with "attribute.""false"
.rel
attribute, for example, maybe don't.Thank you for the great feedback! This is one of the benefits of undertaking a project such as this in the open. I hear you with the
<base>
element. I was in two minds whether I should even include it. I am thinking now that I should, but introduce it merely for completeness and recommend not using it. I wonder if it will ever be deprecated.