alvaromontoro

alvaromontoro, 10 days ago to random

New comiCSS cartoon: Framework Fans vs Framework Bros
https://comicss.art/comics/140/

It was inspired by a Pizza Cake Comic cartoon (linked in the source code).

alvaromontoro, 15 days ago to random

I made some slight changes to the toggle switch:

• Added a soft skew transform so it looks like the bear is leaning one way or the other
• Changed how the background is generated and added masks so the bear is visible in high-contrast mode (I haven't tested it though 😳)

https://codepen.io/alvaromontoro/pen/XWwrEKy

Showcase of a toggle button that looks like a bear looking from side to side (to the options "strange man" and "strange woman")

alvaromontoro, 15 days ago to random

Everyone asks women (and men) if they'd rather encounter a strange man or a bear in the woods, but no one asks the bear.

...until now... New single-element toggle switch: https://codepen.io/alvaromontoro/pen/XWwrEKy

Design inspired by this CSS toggle by Anastasia Goodwin: https://codepen.io/agoodwin/pen/gKpKqw

Demo of a toggle switch with the shape of a cartoony bear. At both sides the text "Strange Man" and "Strange Woman". The bear's face moves to one side or the other when clicked.

alvaromontoro, 19 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, 20 days ago to random

No Face from Spirited Away, drawn with CSS and a single HTML element.
https://codepen.io/alvaromontoro/pen/ZERzGWY

#webdevelopment hashtag#css hashtag#cssArt hashtag#divtober hashtag#throwBackThursday hashtag#tbt

alvaromontoro, 23 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, 25 days ago to random

"Did you know that with only 20 lines of JavaScript you can do [enter amazing thing that can't be done in 20 lines of JavaScript]? Step one: create a new project using this huge @$$ JS framework. Step two: download these dependencies (that will take 2GB in your hard drive). And step three: copy these 20 lines of JS code... And you are done! You built something amazing in just 20 lines of JS!"

alvaromontoro, 28 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 webdev

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

#webdevelopment #webdev #joke

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

Bootstrap may be considered bad now, but it has done more for web development and styling than Tailwind has done (and ever will?)

Bootstrap may be boring and all the sites look really similar, but it brought web styling to people that didn't know how to do it. Not only for developers, but for anyone building a website. People that didn't know much about web development could build nice-looking websites (something that is reflected in an estimated 20% of the web using Bootstrap).

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 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'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 CSS

New comiCSS cartoon: PR Reviews
https://comicss.art/?id=127

#css #webdevelopment #joke

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, 2 months ago to random

February Demos:

K Denerz: Electric Spinner
https://codepen.io/konstantindenerz/pen/XWQWYVW

大漠: Path Animation
https://codepen.io/airen/pen/NWJQPeE

Josetxu: Leaping Loader
https://codepen.io/josetxu/pen/yLwWMoB

J Dillon: Toggles
https://codepen.io/jdillon/pen/PoLBVmV

Giana: Scroll animation layout
https://codepen.io/giana/pen/gOEQWpR

K Denerz: Video To ASCII
https://codepen.io/konstantindenerz/pen/YzgRQZj

T Afif: Heart reveal
https://codepen.io/t_afif/pen/abMPBdg

K Kondrashova: Eye Pattern
https://codepen.io/ksenia-k/pen/poYZpyQ

B Evans: CSS Art
https://codepen.io/ivorjetski/pen/MWxPVBo

J Kantner: Bubble Loader
https://codepen.io/jkantner/details/poYZMXX

alvaromontoro, 2 months ago to random

Getting a PR rejected is not a bad thing!

A PR comment/rejection/request for change is not a personal attack. It's a learning opportunity for both reviewer and reviewee. It is a way of clarifying methods, learning better practices, and paving the path to a healthier and more maintainable codebase. But for that, you need to go with an open mind and a willingness to learn.

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, 2 months ago to CSS

I aim to code a new toggle switch each day in 2024. But work comes first, and I fell a bit behind on this personal challenge... So, I coded 8 toggle switches this weekend using a single HTML element and CSS.

Find these and many more switches on this @codepen collection: https://codepen.io/collection/aMPYMo.

#css #html #webdev

Animation showing eight different toggle switches. The demos have 4 of each in off state, on state, off state (disabled), and on state (disabled) stacked vertically. The demos are: - Smiling emoji - Metal - 3D ball - Colorful (animated) - On/Off - Growing toggle - Growing toggle 2 - Airplane Mode

alvaromontoro, 3 months ago to random

Toggle switch #28: Día de los Muertos
https://codepen.io/alvaromontoro/pen/OJqqMxe

It is a single HTML element animated with CSS styling. No images or JavaScript.

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 random

Today is comiCSS second anniversary. Two years ago, I started this "ridiculous" idea of having a comic about web development (in general) and CSS (in particular) fully coded in HTML and CSS. To celebrate, this last week I coded a daily carton (vs weekly) and collected all of them in this article: https://alvaromontoro.com/blog/68051/css-cartoons-for-comicss-second-anniversary