@alvaromontoro@front-end.social
@alvaromontoro@front-end.social avatar

alvaromontoro

@alvaromontoro@front-end.social

100% not an alien.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

alvaromontoro, to CSS
@alvaromontoro@front-end.social avatar

Today's comiCSS cartoon: Headaches
https://comicss.art/?id=114

And the source code: https://comicss.art/comics/114/headaches.html

#css #joke

bramus, (edited ) to random
@bramus@front-end.social avatar

What are the parts of a URL?

The tool: https://url-parts.glitch.me

The article: https://web.dev/articles/url-parts

Excellent work by my colleague @samdutton

alvaromontoro,
@alvaromontoro@front-end.social avatar

@bramus @samdutton interesting. Is there a difference between scheme and protocol? I always called protocol to the https:// or ftp:// part (including the ://)

alvaromontoro, to random
@alvaromontoro@front-end.social avatar

American company: Stock is down! We need to do layoffs and get rid of employees to meet our short-term expectations.

Japanese company: Stock is down! Let's raise employee salaries so they don't leave, and we can ensure our long-term growth.

Screenshot of Nintendo Co. Ltd. stock price in Japan stock market from February 7, 2023 to this day. In February 7 it was 5,624 yen, and today it is 7,359 yen. It has more or less gone steadily up.

sarajw, to random
@sarajw@front-end.social avatar

Ooooh. Another idea for a new project I'll never finish - inspired by a post from @chriscoyier about new.css - a no-class CSS "framework"!

I've seen a few of them around and I like them. It'd be fun to build my own. I could build color-scheme into it, and have it respond to prefers-contrast as well as prefers-color-scheme.

🤔💡✨❣️

alvaromontoro,
@alvaromontoro@front-end.social avatar

@box464 @sarajw the first one in the list is mine... The perks of having a name starting with A 😅

aardrian, to accessibility
@aardrian@toot.cafe avatar

I recommend not publishing on Medium, for starters.

Full disclosure, I opened the article to see if its 2024 recommendations were the same as the 2004 or 2014 recommendations (headings, alt text, contrast, etc.) but now I cannot be sure what new insights it contains.

Only one sentence is visible (“I recommend the MDN Docs tutorial for HTML for starters”) before it fades into the Medium overlay requiring you to create an account to read the rest.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@aardrian Medium tracks the free article reads using cookies. To read the article even after you've hit the limit, open the link in a new private window, and you'll be able to read the article.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@aardrian I repost my articles on Medium behind a paywall (setting my blog as canonical, where the article is free and more accessible). If people prefer medium as a platform (it's pretty) and they are willing to pay to read even when the article is freely available on my blog, who am I to stop them? It's a nice extra income.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@NatureMC If I recall correctly, the publishers don't get paid for unregistered user reads, so if I wasn't going to get paid anyway, at least someone read it. (Yes, I am a small publisher at Medium and still share this trick.)

alvaromontoro,
@alvaromontoro@front-end.social avatar

@NatureMC I must be a weird person, but I actively recommend people reposting on Medium (not posting directly there, but resharing). They allow canonical URLs, and when you hit a minimum number of subscribers, they let you monetize the articles. Cross-posting on Medium pays for my personal blog hosting, domain, and all the other silly web pet projects I have. So I can't complain.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@NatureMC "I think that your topics are great for Medium, so you get your target audience." Ouch!

simevidas, to random
@simevidas@mastodon.social avatar

I found a web page that literally causes my Moto G4 to freeze. Not just the browser, the entire OS. Devtools says 8.5 MB of JavaScript.

https://www.nationalgeographic.com/premium/graphics/egypt-mummy-saqqara-excavation-golden-age-feature

alvaromontoro,
@alvaromontoro@front-end.social avatar

@simevidas ok... Let's check it....

alvaromontoro,
@alvaromontoro@front-end.social avatar

@simevidas I can't. The page flashed several times while I was reading the banner. There are some shenanigans going on there.

alvaromontoro, to random
@alvaromontoro@front-end.social avatar

Creating Progressive Enhanced @CodePen Links and Embeds
https://alvaromontoro.com/blog/68048/creating-progressive-enhanced-codepen-links-and-embeds

Inspired by a question by @lea, I created a progressively enhanced component that turned CodePen links into cards with CSS, and into embedded demos with JS. This article explains how I did it.

If you prefer other reading platforms, the article is also available on:

DEV: https://dev.to/alvaromontoro/creating-progressive-enhanced-codepen-links-and-embeds-26bb
Hashnode: https://alvaromontoro.hashnode.dev/creating-progressive-enhanced-codepen-links-and-embeds
Medium: https://alvaromontoro.medium.com/creating-progressive-enhanced-codepen-links-and-embeds-512d00f8f550

alvaromontoro,
@alvaromontoro@front-end.social avatar

@simevidas @lea The demo I used does not have JS, so there's no difference between JS enabled and disabled. A more JS-oriented codepen demo will load the <iframe> and then show a blank when hitting the "run" button, providing a poor experience. But even with my non-JS demo, the CodePen embed depends on JavaScript to interact with the HTML/CSS/JS/Result tabs, so that functionality won't be available either. In that case, keeping the link (as text or a card) may still provide a better experience.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@simevidas @lea @5t3ph I get that. For HTML+CSS-only demos the iframe works best... but demos that are dependent on JavaScript will not run in an iframe either. So why have an iframe at all? Wouldn't actually the iframe provide a worse experience for the person?
My component is more theoretical than practical (and probably not that great either way), and it casts a net over all the CodePen links, even the ones that don't have JS. But developers may not know if those demos have JS or not.

stephaniewalter, to random
@stephaniewalter@front-end.social avatar
  • How do you like your coffee?
  • In a micro-wave proof cup, because I will forget about it and re-heat it at least twice
  • I meant: sugar, milk?
  • oh...
alvaromontoro,
@alvaromontoro@front-end.social avatar

@stephaniewalter oh! Hey! Long time no see 😅

alvaromontoro, to random
@alvaromontoro@front-end.social avatar

I came to dislike the word "user" in software development and IT. It feels impersonal and dehumanizing even when it is the correct term (they are using our software). It turns them into a weird entity that you don't really have to care about. I prefer to use "person" or "people."

Which may not me the correct term anyway as many actors that will interact with our products won't be people or human anyway. It just makes it easier for me to keep the person in mind when designing/developing things.

css, to CSS
@css@front-end.social avatar

Are you looking for a new CSS loader for your next project? Look no further!

👉 https://random.css-loaders.com

One click and you get a nice loader from the biggest online collection ever 🤩

As a bonus, you get a unique link to your favorite loader. Share the one you got 👇

⚠️ This feature is powered by the :has() selector so Firefox users need to wait until the end of the year to enjoy it 🤞

Overview of different CSS loaders generated randomly

alvaromontoro,
@alvaromontoro@front-end.social avatar

@css do you accept collaborations?

alvaromontoro,
@alvaromontoro@front-end.social avatar

@css people submitting loaders to add to the site. Like buttons.cool does (or kind of)

alvaromontoro,
@alvaromontoro@front-end.social avatar

@css fair enough. I didn't know you were running ads (I cannot see them with Brave... sorry)

alvaromontoro, to Humor
@alvaromontoro@front-end.social avatar

What happens when you share a demo online? Today's comiCSS tries to answer that question with a pinch of humor. Check the cartoon at https://comicss.art/?id=108

And, because it is coded in CSS, you can also review the source code at: https://comicss.art/comics/108/sharing-demo.html

simevidas, to random
@simevidas@mastodon.social avatar

Is it not possible to view an element’s ::first-letter styles in the browser’s DOM inspector?

It seems you have no other option but to manually search for rules containing ::first-letter in the style sheets.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@simevidas Chrome puts those styles at the bottom in the inspector.

sarajw, to random
@sarajw@front-end.social avatar

Assuming I live to 80, as of today I am squarely middle-aged.

alvaromontoro,
@alvaromontoro@front-end.social avatar

@sarajw happy birthday! 🥳🎉

css, (edited ) to CSS
@css@front-end.social avatar

The 19/12/2023 will be an important Day 👀

@firefox will release its version 121
✅ The :has() selector
✅ The @​property (edit: the caniuse data was wrong and @​property will not land in the V121: https://front-end.social/@nicolaschevobbe@mozilla.social/111413959163449306)

https://whattrainisitnow.com/release/?version=121

No more Chrome-only demos for a while 😌

alvaromontoro,
@alvaromontoro@front-end.social avatar

@css Finally!

alvaromontoro, to random
@alvaromontoro@front-end.social avatar

New comiCSS cartoon: Reactions (meme)
https://comicss.art/?id=107

I must admit that this meme is not my favorite (it degrades valid views and experiences), but it was fun to code a version in CSS.

Maybe I should have added more details, but I like its simplicity (both visual and in code.)

alvaromontoro,
@alvaromontoro@front-end.social avatar

And because it is coded in CSS and super-easy to change and create variations... here's a second version inspired/suggested by Ricardo Oliva Alonso 😉

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