WebDev

j9t, (edited )
@j9t@mas.to avatar

Contrast the attached screenshot of code for an index.html sample file with the minimal and valid alternative,

<!doctype html>
<title>My Website Home Page</title>
<h1>Welcome to my website</h1>
<p>Now hosted on Amazon S3!

But a few of you know that this is a thing of mine (and of everyone into minimal and valid HTML), so I [won’t use this as a teaser for anything 🙂].

#html

scrwd,
@scrwd@mastodon.social avatar

@j9t if you had a <script>...</script> after the </title> would to be in the head of body of the document and would it matter?

j9t,
@j9t@mas.to avatar

@scrwd, yes, if immediately following the “title” element, it would be part of the document head.

Whether it would matter, I can’t tell (please share more?)—but it is reliable in a sense of not being dependent on optional markup.

cferdinandi,
@cferdinandi@mastodon.social avatar
mahryekuh,
@mahryekuh@fosstodon.org avatar

@cferdinandi That's a spicy take in this era of React et al. addicts, and I'm all for it!

(Mandatory: these JS frameworks have a place)

cferdinandi,
@cferdinandi@mastodon.social avatar

@mahryekuh Regarding the mandatory "they have their place": I'd argue that React's ONLY place is at Facebook for their internal needs, and even though, they'd be better served by another tool.

React is a bad choice for 99% of the tasks its used for.

SteveFaulkner, (edited )
@SteveFaulkner@mastodon.social avatar

🆕 ALT LEFT

"AI can help by providing mostly accurate descriptions of images on web pages. This can be especially helpful when the image has not been provided with an text alternative, but is visible on the page."

⚠️ Nightmare image content warning.
https://html5accessibility.com/stuff/2024/05/27/alt-left/

yatil,
@yatil@yatil.social avatar

@SteveFaulkner @sarajw You’re just a much stronger person than I am, Steve.

SteveFaulkner,
@SteveFaulkner@mastodon.social avatar

@yatil @sarajw i tried to balance it out with song at end https://youtu.be/MAVmWEMhxCM

Natanox,
@Natanox@chaos.social avatar

I probably get flooded by asking this but welp, here I go:

I'm looking for a good, visual (!) #tutorial for #WebDevelopment that focuses on Codium, Firefox and other Open-Source tools. My specific interests are to learn #HTML, #CSS, #PHP and #SQL. Perhaps some minor #Javascript, however I'd like to primarily work without it.

I'm a visual learner, extended theory in text won't help me at all. As language is visual to me, so is #programming.

Anyone knows something that checks these boxes?

Natanox,
@Natanox@chaos.social avatar

@Crell Only if necessary, it makes the learning process unnecessarily convoluted (harder to scrub through a video than a website and the pace is always changing).

Crell,
@Crell@phpc.social avatar

@Natanox That's why I don't usually like videos, either. :-) What counts as visual, then? Lots of code samples?

cssbasics,
@cssbasics@hachyderm.io avatar

Switching It Up With ’s Latest Control: "After years of relying on checkbox hacks to create a “switch” control for forms that toggle between two states, HTML may be gaining a native way to go about it by adding a switch attribute to checkbox inputs." https://www.smashingmagazine.com/2024/05/switching-it-up-html-latest-control/

seaotta,
@seaotta@toot.cafe avatar

Hey crew - It's a perfect weekend to stock up on technical & educational books this weekend as EVERYTHING is 50% over at Manning Publications!

That means my book "Design for Developers" is 50% off! Snag a physical copy so you get all the pages in color (it makes a difference!)

🔗 https://www.manning.com/books/design-for-developers?utm_source=stimac&utm_medium=affiliate&utm_campaign=book_stimac_design_4_19_22&a_aid=stimac&a_bid=5f6ba095

wez,
@wez@fosstodon.org avatar

In 2024, for a locally hosted app that should feel fast, are there good reasons to prefer a pagination UX for an html table vs. showing all ~5k rows and just scrolling through them?

FWIW, I dislike the pagination UX, and resent seeing images load lazily on a 10Gbps network.

The underlying query is essentially instant; the bottleneck appears to be the browser, and I can ~solve that by batching DOM updates.

What's the prevailing wisdom here?

preinheimer,
@preinheimer@phpc.social avatar

@wez Show me all the rows!

So many places even have drop downs "Do you want to see 10 rows, 20 rows, 50 rows, or 100 rows" and default to the smallest. I always want the biggest, or even better "all".

mwop,
@mwop@phpc.social avatar

@wez I've been playing with HTMX, and one thing I've loved is that it makes infinite scroll trivially easy and responsive. I'm finding I prefer this a ton to pagination.

NeussWave, German

Ich mag eine machen, möglichst reines 4, möglichst ohne . CSS 3 wenns sein muss, sonst eher 2.

Die Website soll möglichst auf Chrome genauso laufen wie auf Netscape (die Älteren werden sich erinnern...) und auch in Text-Browsern wie Lynx oder w3m.

tl;dr: Die Seite soll auch noch funktionieren, wenn javascript und css ausfallen.

Wie würde ich da denn "Tabs" machen? Oder was wären Alternativen zu tabs?

j9t,
@j9t@mas.to avatar

@leanpub with an unbeatable offer for all “Upgrade Your ” books 📚

Offer URL: https://leanpub.com/b/upgrade-your-html-1-5/c/B8F9F7B6A7044D16AF962B6647B04CD5

w84death,
@w84death@fosstodon.org avatar

I'm thinking of keeping sprites as set of rectangles for my bootsector games.

To test this approach I'm creating a simple painting app that will export to such format.

deshipu,
@deshipu@fosstodon.org avatar

@w84death how about something like the haiku icon format? https://blog.leahhanson.us/post/recursecenter2016/haiku_icons.html

j9t, (edited )
@j9t@mas.to avatar

I’m planning and preparing a new book, about rote learning HTML and CSS. (Will add the draft cover!)

Double question!

  1. Is “rote learning” clear?

  2. Would you be interested in such a book?

j9t,
@j9t@mas.to avatar

@sjorsrijsdam, yes, understandable :) It doesn’t seem to be a common expression, hence asking about it. Curious what the poll will show!

j9t,
@j9t@mas.to avatar

Thanks everyone who responded!

And—I’m not quite sure what to do now! 😄

docalabordage, French
@docalabordage@mamot.fr avatar

Mastodon ! Une asso dont je suis membre cherche à refaire son site internet, avec un CMS libre tant qu'à faire, plutôt sur SPIP. est ce que vous connaissez des boites qui propose des presta sur SPIP ?

Monolecte,
@Monolecte@framapiaf.org avatar

@docalabordage

Pour du travail de toute beauté : https://23forward.com/

Spécialistes de SPIP.

doefom,
@doefom@mastodon.social avatar

Here's another interesting tag. <mark> lets you highlight certain parts of your text to draw extra attention to it.

One real world example where this can be especially useful is highlighting the parts of your search results that match the search query. Or at least that's where I regularly use it.

Any more ideas on where this might be useful?

image/png

shaedrich,
@shaedrich@mastodon.online avatar

@doefom If you have comments in a text. These could be put in the title attribute and displayed as a tooltip or the like.

doefom,
@doefom@mastodon.social avatar

@shaedrich that’s a great use case indeed, thanks!

joelanman,
@joelanman@hachyderm.io avatar

not sure about loading=lazy in html, I'm sure it makes the initial page load quicker but the pop in of images is distracting

dracos,
@dracos@mastodon.social avatar

@joelanman @mac Near doesn’t have to mean in-view though, the browser can start trying to load them before they come into view if it likes. And if you’ve predefined the dimensions it should pop in smoothly. It saves our users a lot of bandwidth on https://www.theyworkforyou.com/mps/https://x.com/hdjirdeh/status/1161883719986139136

joelanman,
@joelanman@hachyderm.io avatar

@dracos @mac not getting any pop in on yours, I'm guessing because theyre really small. I'm getting noticeable pop in on mine, dimensions are set

noellemitchell,
@noellemitchell@mstdn.social avatar

I don't know why or how my #Neocities blog has 17K views, it's not that great looking lol 😂

#html #coding #blog

https://noellesbookshelf.neocities.org

quite_adept,
@quite_adept@mas.to avatar

@noellemitchell

sorry that was me, I opened your site in 17k new tabs... but probably a lot of it is from web crawlers, at least I believe most of the traffic on my sites isn't real people based on the numbers and distribution...

noellemitchell,
@noellemitchell@mstdn.social avatar

@quite_adept I kind of figure it isn't real traffic either. Hardly anyone clicks on links 😆

doefom,
@doefom@mastodon.social avatar

Do you know the tags 'details' and 'summary'? I didn't until now.

The combination of those two let's you toggle content with default HTML behavior. This is one of those things you will probably not use in production because it just doesn't look so nice but as always, for quickly prototyping something like an FAQ section this might just fit in perfectly.

image/png
image/png

lyokolux,
@lyokolux@fosstodon.org avatar

@doefom What stops you from using it in production? They are great toggle to display more content after a user interaction.

doefom,
@doefom@mastodon.social avatar

@lyokolux Nothing and you’re absolutely right! I just don’t like the little arrow, it looks a bit „old“ I think but that definitely is not a deal breaker for sure. Maybe you can even change the arrow? Don’t know

cferdinandi,
@cferdinandi@mastodon.social avatar
mobileatom,
@mobileatom@flipboard.com avatar
joelanman,
@joelanman@hachyderm.io avatar

Got a Playwright question - in my tests I'm clicking a button which in the backend sends an email. I tried to use Jest to mock that function in the backend so it doesn't send an email, but that doesn't seem to work. Should it?

I could check for NODE_ENV in the backend and not send an email, but I'd like access to the email contents in my playwright test, but without actually sending an email.

Am I thinking about this all wrong?

#webdev #nodeJS #playwright

joelanman,
@joelanman@hachyderm.io avatar

I'm thinking maybe if NODE_ENV is test, save emails to a folder instead of actually sending them. Then you can access them from tests

rogerlipscombe,
@rogerlipscombe@hachyderm.io avatar

@joelanman I've done that in the past, yeah.

kubikpixel, (edited )
@kubikpixel@chaos.social avatar

I'm a and try learning / , what is the "best" stable distro about? I don't like @manjarolinux any more.

@rockylinux vs. @opensuse

:BoostOK:

inlovewithpda,
@inlovewithpda@chaos.social avatar

@kubikpixel @fedora KDE Plasma also works, but I was never a KDE guy. Personally like gnome more. And this is the great thing about Linux ... you have the choice

kubikpixel,
@kubikpixel@chaos.social avatar

@inlovewithpda @fedora yes‼️ ✌️🤓👍

thudfactor,

See, there are still awesome sites on the Internet. Here you can test-drive roughly 100 monospaced programming fonts. https://www.programmingfonts.org/

I don't have time to look through all of them, so let me know what your favorites are.

jonikorpi,
@jonikorpi@mastodon.gamedev.place avatar

@thudfactor definitely Intel One Mono: designed to be accessible for people with poor vision, so it feels great for everyone

cferdinandi,
@cferdinandi@mastodon.social avatar
mobileatom,
@mobileatom@flipboard.com avatar

Best Practices For Naming Design Tokens, Components, Variables, And More. #WebDesign #WebDev

https://www.smashingmagazine.com/2024/05/naming-best-practices/?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

kaiserkiwi,
@kaiserkiwi@corteximplant.com avatar

I just realized that I've been doing the #WebDev stuff professionally* for about 18 years now. Holy cow.

*Aka: I earn money with it. When I started with 16 I definitely did nothing that I would call professional 😅

kaiserkiwi,
@kaiserkiwi@corteximplant.com avatar

Now that I realize it, I would love to take a break for a few months… Just live my life and not solving luxus problems of other people day by day. Just doing my own thing for some time.

Unfortunately, I don't have rich parents, nor have I inherited wealth from anyone else. So that remains a dream...

boolat,
@boolat@mastodon.social avatar

Once I thought, what if there was a CSS file that makes the document look like it is a command line interface... So I made one, but I really don't know what it could be used for :)

video/mp4

Meyerweb,
@Meyerweb@mastodon.social avatar

@boolat Perfection.

boolat,
@boolat@mastodon.social avatar

@Meyerweb Thank you )

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