WebDev

j9t,
@j9t@mas.to avatar

All titles of the “Upgrade Your ” 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!

https://www.amazon.com/dp/B0B4SD84B2/

dlesieur,
@dlesieur@fosstodon.org avatar

Can't recommend enough the Hypermedia Systems ebook to web developers. Not only a great resource for learning and "getting" , and acquiring key best practices for using it, but it also makes the case for the classic 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/

jonas,
@jonas@tacocat.space avatar

Blogged about @zachleat's Glyphhanger and how I used it to shrink my web fonts by 90%!

https://jonas.brusman.se/glyphhanger/

jak2k,
@jak2k@mastodontech.de avatar

@jonas @zachleat
Psst, there are two secret fonts, that are even smaller: serif & sans-serif They are as small as 0 bytes and even magically adapt to the user's preference.

zachleat,
@zachleat@zachleat.com avatar

@jak2k @jonas some people like to season their chicken and that’s okay

cferdinandi,
@cferdinandi@mastodon.social avatar

🍦 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/

corycarte,
@corycarte@mastodon.world avatar

I'm curious how many tech influencers couldn't even setup a Wordpress site

urlyman,
@urlyman@mastodon.social avatar

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,
@Edent@mastodon.social avatar

🆕 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/

CTD,
@CTD@mastodon.social avatar

@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,
@travissouthard@jawns.club avatar

Data mining features that are opt-out 🙅

Data mining features that are opt-in 🤷

Data mining is banned and we are compensated for our contributions to billons of dollars in profit 🙋

getkirby, German
@getkirby@mastodon.social avatar

Warum Kirby ? 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

ayo,
@ayo@ayco.io avatar

what's the laziest dark mode implementation? is there a 3-liner code change? 😄 asking for a friend (not me)

cheeaun,
@cheeaun@mastodon.social avatar
metin,
@metin@graphics.social avatar

@ayo Put on sunglasses. 😎

raika_amaris,
@raika_amaris@mastodon.social avatar

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,
@poppacalypse@alpaca.gold avatar

✅ Added new Next.js and SvelteKit boilerplates to https://saasboilerplates.dev

84 boilerplates in total!

poppacalypse,
@poppacalypse@alpaca.gold avatar

@sarajw i have the impression those are static site generators. can they be used to create full SaaS apps too?

sarajw,
@sarajw@front-end.social avatar

@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,
@pablolarah@mastodon.social avatar

💡🌖 But what about the shadow DOM?
by Chris Ferdinandi @ChrisFerdinandi @cferdinandi
#WebComponents #shadowDOM #webdev

https://gomakethings.com/but-what-about-the-shadow-dom/

pablolarah,
@pablolarah@mastodon.social avatar

@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?

Michel Foucault, The History of Sexuality, Volume 1: An Introduction Michel Foucault, The History of Sexuality, Volume 1: An Introduction

cferdinandi,
@cferdinandi@mastodon.social avatar
leanpub,
@leanpub@mastodon.social avatar

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

poppacalypse,
@poppacalypse@alpaca.gold avatar

0 JavaScript
100% CSS

video/mp4

poppacalypse,
@poppacalypse@alpaca.gold avatar

@sarajw yes that happens on the next page 😂 i should've photographed the next page

sarajw,
@sarajw@front-end.social avatar

@poppacalypse ah awesome!

cferdinandi,
@cferdinandi@mastodon.social avatar
konnorrogers,
@konnorrogers@ruby.social avatar

@cferdinandi

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 )
@cferdinandi@mastodon.social avatar

@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,
@tdp_org@mastodon.social avatar

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:

Screenshot of a BBC World Service Mundo "lite" page with Dev Tools open showing bytes transferred and total as stated

tdp_org,
@tdp_org@mastodon.social avatar

@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,
@rasterweb@mastodon.social avatar

@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,
@christian@aldr.social avatar

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.

https://www.youtube.com/watch?v=pobWEaHNChY

cferdinandi,
@cferdinandi@mastodon.social avatar
ayo,
@ayo@ayco.io avatar

@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,
@ayo@ayco.io avatar

@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,
@pablolarah@mastodon.social avatar

🟢The wrong way to do Web Components
by Chris Ferdinandi @ChrisFerdinandi @cferdinandi
#WebComponents #webdev

https://gomakethings.com/the-wrong-way-to-do-web-components/

mikemai2awesome,
@mikemai2awesome@mastodon.social avatar

@pablolarah @cferdinandi hiding semantic elements inside the shadow dom is terrible

cferdinandi,
@cferdinandi@mastodon.social avatar

@mikemai2awesome @pablolarah truest of true!

kaiserkiwi,
@kaiserkiwi@corteximplant.com avatar

PSA for my fellow ​s:

If you ever get the "offer" to work with 6, run. Run as fast as you can. There is nothing out there that is more of a developer nightmare than this pile of junk.

95% of my gray hair comes only from Shopware.

mitelg,
@mitelg@phpc.social avatar

@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,
@kaiserkiwi@corteximplant.com avatar

@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,
@joelanman@hachyderm.io avatar

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?

tomw,
@tomw@mastodon.social avatar

@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,
@joelanman@hachyderm.io avatar

@tomw I thought you were being weirdly rude until I remembered mutt is a client

ricmac,
@ricmac@mastodon.social avatar

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,
@ricmac@mastodon.social avatar

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!"

#11tyConf #WebRenaissance #KickingAgainstThePricks

pauleveritt,
@pauleveritt@fosstodon.org avatar

@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,
@vanilla@social.spicyweb.dev avatar

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,
@vanilla@social.spicyweb.dev avatar

Don't forget to hop in our Discord server to ask questions and brainstorm ideas about this very topic!

https://discord.gg/CUuYVH7Qa9

adamsdesk,
@adamsdesk@fosstodon.org avatar

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.

https://www.adamsdesk.com/posts/website-footer-explained/

tripplehelix,
@tripplehelix@fosstodon.org avatar

@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,
@adamsdesk@fosstodon.org avatar

@tripplehelix That is terrible. Not bad a idea, just don't make as detailed as an index can be.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • webdev
  • kavyap
  • InstantRegret
  • ethstaker
  • DreamBathrooms
  • mdbf
  • magazineikmin
  • thenastyranch
  • Youngstown
  • everett
  • slotface
  • osvaldo12
  • khanakhh
  • rosin
  • Durango
  • megavids
  • vwfavf
  • GTA5RPClips
  • cubers
  • tacticalgear
  • tester
  • cisconetworking
  • ngwrru68w68
  • Leos
  • normalnudes
  • provamag3
  • modclub
  • anitta
  • JUstTest
  • All magazines