j9t, All titles of the “Upgrade Your #HTML” ebook series are now available at a lower price! 🔻
(The previous price had essentially been dictated by one of the books’ platforms, which is now being worked around by donating the difference.)
If you purchased the latest title and find the new price fairer, reach out so that I can offer you another book, free of charge!
dlesieur, Can't recommend enough the Hypermedia Systems ebook to web developers. Not only a great resource for learning and "getting" #htmx, and acquiring key best practices for using it, but it also makes the case for the classic #hypermedia system architecture, which has been somewhat disregarded over the last decade or two. Should be a worthwhile read, regardless of the framework or app architecture you intend to use.
https://hypermedia.systems/ #webdev #html
jonas, Blogged about @zachleat's Glyphhanger and how I used it to shrink my web fonts by 90%!
cferdinandi, 🍦 New Article: How to listen to multiple events in a Web Component with the handleEvent() method https://gomakethings.com/how-to-listen-to-multiple-events-in-a-web-component-with-the-handleevent-method/ #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
corycarte,
urlyman, I’ve been avoiding
display:contents
because of all the problems people like @aardrian and @eric have written about.But, coincident with this post yesterday – https://mastodon.social/@urlyman/112449897977897437 – I actually had a need to use it for a non-public facing thing.
HOWEVER…
TIL that in Firefox it completely breaks the anchoring effect of an id attribute attached to an element.
Put differently, a link to an element with
display: contents
DOES NOT WORK 🤦♂️
Edent, 🆕 blog! “Accents and eBooks”
By and large, the English language doesn't use diacritical marks. Even our loanwords are stripped of them; we drink in a cafe rather than the more pretentious café. This has a consequence for HTML and, by extension, eBooks. As a quick primer, modern computing gives us two main ways of displaying a letter with an […]
👀 Read more: https://shkspr.mobi/blog/2024/05/accents-and-ebooks/
⸻
#ebook #HTML #unicode
CTD, @Edent The second dimension to this is to find a font for your ebook that supports these natively. My reader does show the correct glyph but if it isn’t present in the actual font it uses some kind of default and that is jarring.
travissouthard,
getkirby, German Warum Kirby #CMS? Unsere Partneragentur JUNO hat aufgeschrieben, wie Kirby ihnen hilft, Websites und digitale Tools mit Freiraum, Spaß und Leichtigkeit zu gestalten. 🤩 https://juno-hamburg.com/ideas/kirby-cms #webdev
ayo, what's the laziest dark mode implementation? is there a 3-liner code change? 😄 asking for a friend (not me)
raika_amaris, After endless bafflement, trying to figure out the interlocking systems on the backend of my website, I finally fixed the navigation header. It frustrated me for YEARS, way before I bought the company, that it ate up like half the computer screen. ALL THIS TIME, it could have been solved by scaling down the logo size in the website's media library. And I am so proud of myself for fixing it. I've never run a website before, much less tried to make sense of someone else's build.
poppacalypse, ✅ Added new Next.js and SvelteKit boilerplates to https://saasboilerplates.dev
84 boilerplates in total!
poppacalypse, @sarajw i have the impression those are static site generators. can they be used to create full SaaS apps too?
sarajw, @poppacalypse True, 11ty is more static. Astro is pretty powerful now, and also has Astro DB - but you're probably right it's content-first, or was: https://astro.build/
pablolarah, 💡🌖 But what about the shadow DOM?
by Chris Ferdinandi @ChrisFerdinandi @cferdinandi
#WebComponents #shadowDOM #webdev
pablolarah, @westbrook @cferdinandi It works on Codepen, but I tried in an html file uploaded to my server without any css nor js and it has nothing.
Maybe it is because Codepen supplies default js libraries?
cferdinandi, @pablolarah @westbrook This renders locally: https://gist.github.com/cferdinandi/d34a48b32c912ed22bc9b371d964b40f
leanpub, Upgrade Your HTML I–V https://leanpub.com/b/upgrade-your-html-1-5 by Jens Oliver Meiert is the featured bundle on the Leanpub homepage! https://leanpub.com #HTML #WebDevelopment #ebooks
poppacalypse,
poppacalypse, @sarajw yes that happens on the next page 😂 i should've photographed the next page
sarajw, @poppacalypse ah awesome!
cferdinandi, 🍦 New Article: But what about the shadow DOM? https://gomakethings.com/but-what-about-the-shadow-dom/ #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
konnorrogers, FWIW, Declarative Shadow DOM has nothing to do with light DOM. It's a way to render a shadow DOM without JavaScript. Try it:
<my-element>
<template shadowrootmode="open">
<p style="color: red;">
Look mom, no JS shadow dom.
</p>
</template>
</my-element>
cferdinandi, (edited ) @konnorrogers
I know. It's shadow DOM templating, authored in the light DOM but rendered into the shadow DOM. We're saying the same thing, I believe.I stand corrected!
tdp_org, My pals in BBC World Service have been doing some awesome work on "lite" versions of their news articles (other page types to follow).
They essentially skip the Server-Side React hydration which means you end up with a simpler HTML+CSS page, no JS.
Page sizes drop significantly:
- Transferred: ~600KB -> 30KB
- Total: 1.65MB -> 135KB
Just append.lite
on a URL e.g. https://www.bbc.com/mundo/articles/crgyyvdz1dro.lite
There's no on/off UX at the moment but they're working on that too.
#WebDev #WebPerf #WebPerformance #BBC
tdp_org, @tonypconway @kravietz Yep, spot on. It might be that this is a trailblazer which prompts the .co.uk stack to adopt it, the initial case is definitely compelling IMO.
Toby mentioned he'd be talking to you folks 👍🏻
rasterweb, @tdp_org This makes me so happy. I still shrink and compress images all the time for email, web, etc. because 99% of the time a huge multi-megabyte image just isn't needed.
christian, Enhancing my JavaScript knowledge bit by bit - today with a fun short clip by @cferdinandi and @kevinpowell; explaining var, let, and const - and when/where to use them for declaring a variable.
cferdinandi, 🍦 New Article: The wrong way to do Web Components https://gomakethings.com/the-wrong-way-to-do-web-components/ #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ayo, @cferdinandi you may have to follow up on your blog post to clarify, because there's a lot of component libraries on top of Lit 🙂 and server-side rendering + progressive enhancement are well outside the scope of these libs. Meaning, you can still achieve progressive enhancement with these components too, it's just not their explicit feature.
ayo, @cferdinandi I'm not advocating for more code here, that's a twist of my words. Reality is that development teams are equally burdened with dependency rotting and inventing their own solutions which are not properly built or documented.
pablolarah, 🟢The wrong way to do Web Components
by Chris Ferdinandi @ChrisFerdinandi @cferdinandi
#WebComponents #webdevhttps://gomakethings.com/the-wrong-way-to-do-web-components/
mikemai2awesome, @pablolarah @cferdinandi hiding semantic elements inside the shadow dom is terrible
cferdinandi, @mikemai2awesome @pablolarah truest of true!
kaiserkiwi,
mitelg, @kaiserkiwi yeah, we learnt very much from the 6.5 major release, to phrase it that way 😬 It seems, we did better with the current 6.6 release.
yes, just hit me up, I'm always happy to help
kaiserkiwi, @mitelg I'm a bit afraid of the moment the customer says we go up to 6.6. But good to know you learned a lot.
I know that feeling very good. We have some terrible pieces of code at work too, that wr rework currently.
But at least it's internal and we don't have to work with thousands of customers that try their own stuff. I probably can't imagine the challenge.
joelanman, running a web service that sends emails, do you have to send plain text as well as html emails? If so, whats a good strategy to keep them in sync, content wise?
#webdev
tomw, @joelanman Probably only one person ever is actually going to read the plain text, and that person is used to getting messed up emails. Something like running strip_tags (or your language's equivalent) on the HTML mail would do.
(An "I read all my emails in plain text using mutt" person may turn up here, but they do not exist in most real email lists.)
joelanman, @tomw I thought you were being weirdly rude until I remembered mutt is a client
ricmac, Eleventy is an act of rebellion against the dark forces driving today’s internet, said its creator @zachleat at #11tyConf. Also at the lively event, we discovered that @eleventy does scale! https://thenewstack.io/static-sites-do-scale-eleventy-vs-next-js-at-11ty-event/ #WebDev
ricmac, Not sure how many people read to the end of articles these days, but I have to say I was quite pleased with my final paragraph ;)
"Perhaps it’s that feeling of being subversive — kicking against the platform pricks — and going back to our roots as a web developer community that has led to the Eleventy Renaissance. All I can say is: vive la résistance!"
pauleveritt, @ricmac Thanks for the synopsis of my talk and thanks for the point you made at the end. It's how I feel too. Let's put the web back in the web. Vive la résistance indeed.
vanilla, New video out on The Spicy Web! 🌶️
Here be a fresh (and tingly!) take on reaching for #HTML-first tools like htmx, Turbo, Unpoly, etc. and why you might just want to (spoiler alert!) go vanilla. 🍦 After all, we have so many great browser-native APIs at our disposal now! #JavaScript #WebDev
Sign in or sign up via Intuitive+ to watch:
https://www.spicyweb.dev/videos/2024/ajax-back-in-action/
vanilla, Don't forget to hop in our Discord server to ask questions and brainstorm ideas about this very topic!
adamsdesk, The Importance of a Thoughtful Website Footer
Take a deep dive in learning about a website footer in this comprehensive guide covering what one is, key design points, ideas, the purpose, and more.
tripplehelix, @adamsdesk These days, companies place a 'contact us' link in the footer which directs you to a FAQ instead of contact details. The web is a weird place.
Personally, I like to think of the footer as an index of a book.
adamsdesk, @tripplehelix That is terrible. Not bad a idea, just don't make as detailed as an index can be.