WebDev

downey,
@downey@floss.social avatar

Dear devs,

It's NEVER ok to lock people out of a webapp because their User-Agent doesn't match your predefined list. 😡

Especially webapps they need to manage their healthcare.

(I am in fact using one of the browsers on this list, your code just isn't able to tell.)

:boost_love: Please boost for basic education.

#webdev

keithjgrant,
@keithjgrant@front-end.social avatar

@downey Most weeks I have to check the city website to see if it's a recycle pickup week... I spent the first five seconds looking at a loading spinner that says "Checking your browser..."

What's to check!? I literally just need to you show me an "A" or a "B"

kevinrns,
@kevinrns@mstdn.social avatar

@downey

Devs do as they are told, 50 years now.
Lotus 123 was the revolution in apps, bringing computing to any business.

It wasnt Microsoft's, so the rule for DOS devs was made. The Corporate app. rule.

mahryekuh,
@mahryekuh@fosstodon.org avatar

Hello, front-end developers. Here's your infrequent reminder to make websites that also work on browsers NOT Google Chrome.

Forcing anyone to use Google's glorified spyware is not cool.

alcinnz,
@alcinnz@floss.social avatar

@Natanox @DrHyde @janneke @mahryekuh A couple thoughts on this conversation:

  1. While I think filesystems could have better UX, I reckon understanding that files are a thing is empowering. The only reason it is arcane knowledge is because it has been made so. If people can understand the concept of books they can understand files.

  2. HTML/CSS is incredibly versatile & can work as well for the commandline as it is for GUIs. JS & an over focus on visuals fights against this.

strypey,
@strypey@mastodon.nzoss.nz avatar

@mahryekuh
> websites that also work on browsers NOT Google Chrome

... with graceful fallback when the client can't run JavaScript.

> Forcing anyone to use Google's glorified spyware is not cool

It's like we learned nothing from the dominance of MS Internet Exploiter in the 90s.

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.

triptych,
@triptych@social.lol avatar

I think as web developers we have been collectively brainwashed into thinking that you must use React and Tailwind to create websites, when all you really need are vanilla web standards and a text editor. We should be making it easier to make websites than it is right now. You should not need a PhD in web design to create something that you can share and express yourself. We need more tools that make web development easy, not more tools that turn it into some 10 step build process #webdev

eniko,
@eniko@peoplemaking.games avatar

@triptych WYSIWYG editors were good, actually

aral, (edited )
@aral@mastodon.ar.al avatar

@triptych Unsurprisingly, I couldn’t agree more ;)

Have you had a chance to play with Kitten?

https://codeberg.org/kitten/app

Throw HTML, CSS, and JS at it and it’ll do what a web server does. Then, if you want, progressively enhance your site/app using hypermedia with built-in support for htmx, etc., and/or Streaming HTML (see https://ar.al/2024/03/08/streaming-html/ and https://ar.al/2024/03/26/draw-together/)

(Although it exists to enable peer-to-peer web apps or the Small Web as I call it. https://ar.al/2023/02/20/end-to-end-encrypted-kitten-chat/)

erick, French
@erick@oisaur.com avatar

Je pensais avoir du boulot à partir de mi-avril mais ça tombe à l'eau et je me retrouve avec pas grand chose.
Si vous entendez parler de missions d'intégration / , je suis tout ouïe (comme les poissons).
J'aime le code propre et minimaliste, mettre en place les bonnes pratiques et j'ai des bases d' .

Le repouet repeuple les océans et les rivières de nos amis à écailles.

attacus,
@attacus@aus.social avatar

Today I built a silly webpage by hand in a couple of hours. (I’m not going to tell you what it was, except that it was frivolous af.)

I started out by looking for a template, but everything I found was way too involved, so I ended up writing the HTML and CSS from scratch, throwing it in a cloud-hosted directory, and nudging the DNS settings to point there.

This turned out to be a ridiculously nostalgic experience. I built a lot of weird little websites like this when I was about eleven years old, saving the HTML of sites that I liked so that I could access them when the phone line was being used by someone else, and changing pieces around to figure out how it all fit together.

It struck me that:
a) by this measure I’ve been doing web dev for almost a quarter-century now 😳
b) there is nothing stopping me from making websites this way. I can still write HTML and yeet it out there if I want to, no matter what it’s for. Pages load quickly. It’s not fancy. It works. Underneath it all, the web is still there.

If you feel so inclined, I can highly recommend seizing an afternoon, taking a silly webpage idea, and having a play.

attacus,
@attacus@aus.social avatar

And yeah, I realise that knowing how to make a website happen is something that requires additional layers of expertise (a lot of which I didn’t have when I was eleven).

Plain HTML has its limitations. It’s not going to do everything for every use case.

But it sure does a hell of a lot, and there is so much fun you can have messing around with it, even without publishing your page to the web. (And when you’re ready to put your cool, weird site out there, there are plenty of places you can get help with that.)

joannaholman,
@joannaholman@aus.social avatar

@attacus It's a shame there isn't really something like Geocities anymore that's popular you can throw a half baked HTML page attempt up on. I had so much fun with that as a teen

davidbisset,
@davidbisset@phpc.social avatar

"What's one of the worst form validation errors you've ever seen?"

🤔

RupertReynolds,
@RupertReynolds@hachyderm.io avatar

@fbstj @davidbisset I was working on an internal date util that allowed "NWD", "LWDM", something that meant 'penultimate Thursday monthly' and also "Feb 31" as a shorthand for 2 days after 29th.

Very handy. But during testing I found it converted "Hello, Graham" to a date. Probably not so handy...

NormanDunbar,
@NormanDunbar@mastodon.scot avatar

@RupertReynolds
At least you tested text!

I started a new job once and was given the system, no instructions, and told to try to break it. After lunch then boss came around and asked me to stop breaking the system so well! (He was of course joking.)

I had test data where people died before they were born and other sillies. 😁

@fbstj @davidbisset

drsensor,
@drsensor@fosstodon.org avatar
RL_Dane,
@RL_Dane@fosstodon.org avatar

@hosford42 @drsensor

...

I never minded (or even knew about) rust's excessive compilation system requirements until I had no avenue to install a program but to compile it myself through cargo. Cargo does make the process pretty simple, but it's stll very painful from a system-requirements perspective. It wouldn't compile on a system with only 4GB of RAM, and that's what a lot of my machines have.

patterfloof,
@patterfloof@meow.social avatar

@drsensor webdev land needs to learn .html

5t3ph,
@5t3ph@front-end.social avatar

📝 New post:
"A Call for Consensus on Semantics"

Partly a rant, minorly educational, mostly a call for help.

https://thinkdobecreate.com/articles/a-call-for-consensus-on-html-semantics/

michelle,
@michelle@front-end.social avatar

@5t3ph Aaaaargghhh yes all of this!!! And I just learned about role=“note”, whelp 🫨 Honestly, I firmly believe HTML is the hardest part of our job

mia,
@mia@front-end.social avatar

@5t3ph 100% mood.

I see this as indictment of browsers as a "user agent". They seem so uninterested in exposing semantics in any interesting ways. Many A11y problems come from browsers failing to expose semantic info for readers. But beyond that: why do we still need a TOC?! The browser has that info, and could expose it on all sites!

If the browser showed us the semantics that would help us use the semantics.

(On the other hand, it's funny to imagine "solving semantics"…)

kizu,
@kizu@front-end.social avatar

What if I will tell you how we could solve fit-to-width text with pure #CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that!

Welcome my new article — “Fit-to-Width Text” — where I continue exploring the experimental implementations of the latest specs.

https://kizu.dev/fit-to-width-text/

A screen recording of an example showing a text written down symbol by symbol in a way, where each line fits to the width of the container. The following text is written over five lines: “What if I will tell you how we could use scroll-driven animations to solve fit-to-width text? Third line (“scroll-driven animations”) is in italic, fourth line (“to solve”) is in bold.

kizu,
@kizu@front-end.social avatar

@elly Thanks! Bought this font long time ago, mostly due to it having a lot of stylistic alternates, sometimes thinking of moving to a different font, but it is really hard to find one that would fit all the uses I have for it :D

kizu,
@kizu@front-end.social avatar

@scott Yep, there are for sure a few things to try :)

I'm planning to write another article about usage of scroll-driven animations for measuring things and all (or two? or three? too many ideas), but afterwards would return to the type if no-one would beat me to it :)

joelanman,
@joelanman@hachyderm.io avatar

In HTML, don't use type="number" use type="text" inputmode="numeric" instead.

number silently restricts input, inputmode provides the number keyboard on mobile without any of the downsides.

Error messages are far more helpful than input restriction - this goes for maxlength too

siblingpastry,
@siblingpastry@mastodon.world avatar

@joelanman Also worth noting that maxlength is not described by screen readers (either when it's reached, nor afterwards to indicate that typing produces no input).

jamigibbs,
@jamigibbs@hachyderm.io avatar

@joelanman We (the VA.gov design system team) recently changed our number input web component based on the same advice from this article. Thank you! 🙌

https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

mariyadelano,
@mariyadelano@hachyderm.io avatar

Hi, I need your help. (Please boost for more reach)

I am running a for a client - we're researching the experiences and frustrations that developers experience job searching (We’ll create a public report with our findings)

Please contribute if you're a who’s been job hunting or frequently look for work

Here's the link: https://tally.so/r/nrOWll

mariyadelano,
@mariyadelano@hachyderm.io avatar

By default, you'll remain fully anonymous. If you wish to be quoted / get the report / do an interview, there's an option to leave your information. But we will not compromise anyone's privacy.

We will also not try to sell you anything. Right now we are simply looking to understand how dev job seekers actually feel and share what we find in public.

Also, I welcome feedback on the survey questions so share your thoughts if you have any!

mariyadelano,
@mariyadelano@hachyderm.io avatar

Thank you all for sharing the survey! Here are my two favorite answers so far 😂

If you freelance, where do you usually find projects? They seem to find me, which is terrifying.

caolan,
@caolan@hachyderm.io avatar

Dear fediverse, please recommend me a modern software development podcast that's not just hyping the framework of the week.

lufthans,
@lufthans@mastodon.social avatar

@caolan I'm well behind on @changelog but it might fit the bill for you

changelog,
@changelog@changelog.social avatar

@lufthans @caolan yes, please give us a listen and let us know what you think!

https://changelog.com/podcast

combatwombat, German
@combatwombat@hachyderm.io avatar

netbeep - An annoying little Chrome extension that beeps on each network request. Plays different sounds for different request types.

Get an audio summary of your websites performance. Makes you appreciate simple, clean sites and ad blockers :>

https://github.com/combatwombat/netbeep

Feedback welcome. The sound sometimes stops on slower machines.

#webdev

video/mp4

pierstoval,
@pierstoval@mastodon.social avatar

@combatwombat
Somebody: opens a random news website
The extension: plays Rush E twice speed

angelikatyborska,
@angelikatyborska@mas.to avatar

Based on my experiences in various frontend codebases that were written without a frontend expert on the team (including my own old projects 💩), I compiled a list of 9 most common signs of frontend code quality issues that affect users https://angelika.me/2024/04/13/9-signs-your-frontend-code-has-quality-issues/

angelikatyborska,
@angelikatyborska@mas.to avatar

@syntaxseed For each point, I added links to my favorite articles that explain the topic and what's the correct thing to do. I believe a full article is necessary for each point - a single sentence is not enough to explain the nuance of some of these topics.

syntaxseed,
@syntaxseed@phpc.social avatar

@angelikatyborska Oooo. I thought the links were for the proper use of the misused elements... not the proper way to do the thing being attempted. 😁

Joy_intl,
@Joy_intl@mastodon.online avatar

I'm going to throw this out there:

I'm looking for a internship for 6mos to complete my bachelor's here in France - this can be remote, I mainly hope for kindness.

I've worked with & more - I'm very open :)

Edent,
@Edent@mastodon.social avatar

🆕 blog! “I can't use my number pad for 2FA codes”

This has to be the most infuriating bug report I've ever submitted. I went to type in my 2FA code on a website - but no numbers appeared on screen. Obviously, I was an idiot and had forgotten to press the NumLock button. D'oh! I toggled it on and typed again. No numbers appeared. I […]

👀 Read more: https://shkspr.mobi/blog/2024/04/i-cant-use-my-number-pad-for-2fa-codes/

#HTML #javascript #security #ui #ux

simon,
@simon@fosstodon.org avatar

@Edent typo: "Develops often use"

ben,
@ben@mastodon.bentasker.co.uk avatar

@JohnJBurnsIII @Edent My other current bug-bear is things like credit-card forms that won't submit unless the javascript has seen an update event for each field.

So you have your password manager fill in the card details, only to have to go into each file, make a change and revert it.

Validate the content not what you think I have or haven't done...

weirdwriter,

Short PSA to do not, do not, enable overlays! I was just on a website where the AccessiBe toolbar actually made text completely disappear and turn plain text paragraphs into a DIV, somehow, and a hidden element. I'm telling you, seek out an accessibility ready theme instead. has hundreds, and Shopify has them now too. You. Are. Wasting. Your. Money. On these toolbars.

dhamlinmusic,

@weirdwriter National Braille Press moved their store to shopify, it's actually unusable with .

js,
@js@social.lol avatar

@weirdwriter At a previous job, one of our quarter goals was to make our website more accessible, something I was passionate about and had been asking to work on. Then suddenly one of these toolbars appeared on the site and the task was marked complete.

It tanked our site's performance, and we ended up doing all kinds of hacky shit to mitigate it as much as possible. A few weeks later I read an article about how these toolbars usually make your site harder for people with disabilities to use. 🙄

estelle,
@estelle@front-end.social avatar

Today the <blink> element was officially removed from MDN.

https://github.com/mdn/content/pull/26904

It was an awful element, but, oh, so many memories.

brawaru,
@brawaru@mstdn.social avatar

@estelle "haha if only these stupid methods could disappear from javascript now that they're entirely useless. haha just kidding! unless?.. 😳".blink().big().anchor()

CyrilBrulebois,
@CyrilBrulebois@mamot.fr avatar

@estelle @zhenech Blinking labels on that particular issue would be such a nice easter-egg/tribute…

kentbrew,
@kentbrew@xoxo.zone avatar

Speaking as someone who used to hand-whittle SVGs with a text editor: this is brilliant. https://www.nan.fyi/svg-paths

cohomologyisFUN,
@cohomologyisFUN@mastodon.sdf.org avatar

@kentbrew In another life (former math professor) I used to make TikZ graphics by hand. (TikZ, whose name is a recursive acronym for “TikZ ist kein Zeichenprogramm”, is a LaTeX package for vector graphics which has a lot of similarities to SVG.)

Netux,

@kentbrew cool find.

mattwilcox,
@mattwilcox@mstdn.social avatar

#CSS Colour.

1990’s - 2010: pick a colour. Use hex. Done!

2010 - 2023: oh, you can have alpha too. Use rgba. sighs ok, or hsl you art nerd.

2023: buckle up fuck-nut, do you even know what a colour model is? Well then how can you pick the right one for your design requirement then? What’s your gamut? Idiot! Do you even HDR? “Green please?” Simpleton. Get out.

mattwilcox,
@mattwilcox@mstdn.social avatar

“Why are you trying to put a chroma value higher than 0.37? Humans can’t see that, fool! Of COURSE it makes sense for chroma to go from 0 to infinity, what are you talking about? Elves need to see their special magic colours too and you’d know that if you were not a dunce!”

colour has gone a bit OTT, and the end result in some cases is more on the “need a degree in colour theory” end of things than the “a syntax people will intuitively understand and use” side.

soller,
@soller@fosstodon.org avatar

@mattwilcox If your monitor isn't calibrated for 1000000% wide-gamut RGB color space with 69 bits per channel HDR at 420% accuracy why did you even buy it, throw it directly into a landfill noone else should have to look at that thing

tdp_org,
@tdp_org@mastodon.social avatar

If you run a publicly available website/service, keep an eye on https://www.cve.org/CVERecord?id=CVE-2023-44487.

It'll be announced at midday UTC today (10th Oct 2023).

If there isn't an update you can deploy quickly for your affected services immediately (there should be for the better known software, they've had advance notice) then you should consider disabling the affected element until there is.

Can't share more right now but it's important so don't forget (& tell your friends!).

tdp_org,
@tdp_org@mastodon.social avatar

To add a little detail I should have included initially:

This is a web server/proxy software issue - it's a generic issue (rather than software-specific) so it's going to affect lots of software implementations.

tdp_org,
@tdp_org@mastodon.social avatar
weirdwriter,

I’m begging web developers to make search fields edit fields again instead of this popular combo box/drop down thing but you can still type into it. I just tried to look for a product on a website, and because the search field was not an edit box, the iPhone keyboard would not display so I just gave up and close the browser. That company just lost a customer. How did we get here?

jernej__s,

@weirdwriter Also, stop turning keywords in input fileds into buttons (or whatever they're called). If I'm typing an e-mail address, and make a typo, I'd like to be able to fix that typo without having to delete and retype the whole thing – what even is the point of turning text into those blobs?

maggiemaybe,

@weirdwriter oh, that’s why that happens? I thought my phone was having issues lol thank you!

independentpen,
@independentpen@mas.to avatar

Hey fam, my agency is looking to hire a full stack web developer fluent in css & js (including React), on a contract basis. Company located in the Pacific NW, remote work no prob, great culture, lots of potential work. DM me!!!

Please boost, everyone! #pleaseBoost #job #webDev

sharan,
@sharan@metalhead.club avatar

@independentpen boosted. Good luck!

matthiasott,
@matthiasott@mastodon.social avatar
matthiasott,
@matthiasott@mastodon.social avatar

@nilsbinder @mxbck Yes, he seems to have great ideas 🤗

julesbl,
@julesbl@mastodon.me.uk avatar

@matthiasott Good article! I'm a back end developer, so database, php, js etc but I like seeing the front end move forward too, I remember coming back after the dot com crash and table design and the font tag had gone in the bin and things were so much better, hope this step forward is as good.

  • 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