alvaromontoro

alvaromontoro, 6 months ago to random

A dev friend is going through an "interesting" experience at work. She got a new manager a few months back and, since then, he has blocked her from getting training, blocked her from leading projects (or getting a promotion), only allow her to do training he supervises and decides (gets mad if she does training on the side, even if it's free or paid by her), and now is giving her surprise tests on different topics (React, JS, TS, C#...) trying to get her to fail and have a reason to fire her.

alvaromontoro, 5 months ago to random

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, 1 year ago to random

I was using Kudoboard, when I noticed the GIFs didn't move. Then I realized the "reduce motion" setting was active on my computer. Deactivating it makes the GIFs move again (after reload). I don't know if that's a feature by Kudoboard or Giphy, but it's pretty cool.
👏👏👏

alvaromontoro, 7 months ago to random

You have seen "using a div as a button," but how about "using a button as a div"? Forget about complex CSS centering solutions. Center all your content vertically and horizontally with a single HTML tag:

<button type="button">I am centered</button>

Boom! Text centered! Short and sweet 🤯🧐🤣

alvaromontoro, 1 year ago to random

This is tomorrow's cartoon for comiCSS. I like the version without the explanation of what HWB stands for because it looks cleaner, but I don't think it's clear enough without the description. Suggestions/recommendations?

Cartoon titled 'Coffee Style Script'. And a subtitle: "Using the HWB color function to describe coffee. hwb(hot-water, lightness/milk, blackness/coffee)" Below there are different types of coffee described as CSS colors: - Black coffee is hwb(0 0 100%), - Americano is hwb(50% 0 50%), - Lungo is hwb(50% 0 50%), - Cafe au lait is hwb(0 50% 50%), - Latte is hwb(0 66% 33%), - Macchiato is hwb(0 33% 66%), - Cappuccino is hwb(0 66% 33%), - Espresso is hwb(0 0 33%), and - 'Need more coffee!' is hwb(0 0 0).

alvaromontoro, 8 months ago to accessibility

Accessibility question: I've published videos lately without anyone talking (just background music with animations and text). What would be a way to make those videos accessible to blind people? I added a "transcription" in the description. Would closed captions help?

#a11y #question

alvaromontoro, 1 month ago to random

My latest single-element toggle switch is Pac-Man themed: https://codepen.io/alvaromontoro/pen/OJGzBqe

An animated toggle switch with pacman eating dots inside.

alvaromontoro, 2 months ago to random

I don't understand people defending Tailwind like their honor is on it. Did I miss a memo or a check in the mail or something? WHO TOOK MY TAILWIND HUSH MONEY????

alvaromontoro, 2 months ago to random

<div class="max-w-[calc(var(--width-7xl)+2px)]">...</div>

^If you add that class to the code, I'm rejecting the PR. No matter how modern that CSS is.

alvaromontoro, 10 months ago to random

With Twitter sinking rapidly, I may spend a little bit more time here... But don't know how much honestly. Mastodon is not my favorite social network; Bluesky looks nice, but it's still in diapers (and that's been generous); Facebook, nope; LinkedIn, probably? But that will be like staying at work late (working there is spoiling my experience on that platform). Definitely will continue posting on my website, but that's like shouting into the void and unidirectional...

alvaromontoro, 22 days ago to random

Some recent changes in the comiCSS website:

• Removed YouTube embedded videos and Google fonts (=no trackers/cookies)
• Added thumbnail pictures to comic pages
• Updated the URL structure: no more https://comicss.art/?id=136 (which will still works), now it'll be https://comicss.art/comics/136
• Updated the JavaScript to the new URL structure. The site will work without JS!... But it makes the experience faster and better. So there's that.

Next:

• Add social media sharing links
• what else should I do?

alvaromontoro, 1 month ago to random

Yesterday, I did a small workshop about drawing with CSS and my experience drawing a comic about CSS in CSS at the Nerdearla conference. As part of the workshop, I created a small meme for comiCSS: https://comicss.art/?id=132

A Tailwind version may be coming out soon :P

alvaromontoro, 1 month ago to webdev

New comiCSS cartoon: Dungeon
https://comicss.art/?id=135

#webdevelopment #webdev #joke

alvaromontoro, 3 months ago to random

Design question: should a toggle switch have a pointer cursor? And a follow up: how about if the design is "not standard"?

I was leaning towards "no" based on checkboxes/radio-buttons not having a pointer cursor and pointer being for links. But then, if it's a custom design that is not standard, it may not be obvious that the element is interactive.

alvaromontoro, 8 months ago to random

I coded a drawing of a bat (the animal, not the baseball stick) with HTML and CSS. Here's how it went... https://youtu.be/dDPREg-1K-E

alvaromontoro, 3 months ago to random

A 3D-CSS animation I created over the weekend (click on the start/close buttons to animate).
https://codepen.io/alvaromontoro/full/dyrgyxx

It was inspired by "Mobile navigation system" by Dzianis Rakhuba (linked in the source code).

alvaromontoro, 3 months ago to CSS

New comiCSS cartoon: winner
https://comicss.art/?id=119

#css #joke

alvaromontoro, 18 days ago to random

I got complimented at the grocery store by how quick and efficiently I bagged the stuff. Maybe I should leave software development and focus in my true calling: bagging groceries at the supermarket.

alvaromontoro, 3 months ago to random

Has Chrome changed something on how the fonts are rendered? (Especially the bolds). It upgraded and now many sites (not all) look weird: bold text looks darker and thicker than on Safari or Firefox.

alvaromontoro, 27 days ago to random

Every time I post a comiCSS cartoon that mentions Tailwind, I get some push back and complains from people. I should have been the bigger man and not reply to this comment... But I did.

On the bright side, it gave me an idea for a new cartoon with Tailwind as main topic. So I got that goin' for me, which is nice.

alvaromontoro, 1 month ago to ukteachers

Last night, I was re-elected as Vice-President of the Patsy Sommer Elementary PTA. Working alongside the PTA to coordinate and participate in school events has been an incredibly fulfilling and enriching experience. I can't wait to see what this new year will bring for our school community.

#PTA #communityinvolvement #education #volunteering

alvaromontoro, 1 month ago to random

Someone somewhere some time in the past: "Yeah, let's call this CSS concept 'specificity.' It's the perfect word: descriptive enough so people understand what it is; yet weird enough so that non-English speakers (and some native too) won't be able to pronounce it correctly."

[Probably followed by a loud "Mwahahahahahaha" and some more evil laughter over a background of a stormy night and lightning.]

alvaromontoro, 2 months ago to random

I'm working on a new single-element toggle, and I honestly don't know what Safari is trying to do here. 🤷‍♀️

Demo of a toggle button with the shape of a soccer field. When activated a foot appears and kick the ball from one side to the other to indicate the on/off state. It works fine on Chrome; but on Safari, the ball keeps growing and growing. When changing the code to define a height instead of an aspect-ratio:1 value, the ball doesn't grow and the toggle behaves the same way in Chrome and Safari.

alvaromontoro, 2 months ago to random

I said this before: given the number of teachers moving from teaching into software development. I'm surprised not to see panels at conferences with former teachers discussing their path from teachers to developers, and sharing their successes and missteps.

It feels like it would be one of the most useful talks in the conference (no offense to other speakers). That's a difficult transition full of uncertainty. First-hand guidance would be insightful and help steer away from bad experiences.

alvaromontoro, 6 months ago to random

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.)