DEV Community

Alvaro Montoro
Alvaro Montoro

Posted on

10 6

Divtober Day 14: Fancy

The word of the day is "fancy"... so here's a cartoon of a fancy-looking British gentleman with a hat, a monocle, and an umbrella:


There's a second element (not used in the drawing) with a link to a YouTube video of how it was coded (although it is a bit tough to follow with things "jumping around"):

*After recording the video, I changed the code a little. The image will look the same, but the code is a bit different (using the short notation) as mentioned in the comments below.


I did a quick second version with the man holding a cup of tea with the pinkie out:

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (15)

Collapse
 
grahamthedev profile image
GrahamTheDev

Whoop whoop another video - time to go learn some more stuff!

Also your entry today is...spiffing! (coming from a Brit!)

Collapse
 
sidcraftscode profile image
sid • Edited

The entry is peng innit bruv

Collapse
 
grahamthedev profile image
GrahamTheDev

Bruh, I’m old school so it is “lit” or “banging”, I don’t get this peng and bear malarkey 🤣

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

I'm too old... Is "peng" a thing? I thought they were asking if it was a PNG 😳

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Haha, peng is attractive I believe or something similar! 🤣 PNG I understand though! ❤️

Thread Thread
 
sidcraftscode profile image
sid

🤣

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
afif profile image
Temani Afif

why you always set the gradient, position and sizes using their properties ? 🤔 I found it difficult to manage that way.

Why not using the syntax background:gradient position / size , ... ?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I updated it following the shorthand notation. I guess it still takes some time to get used to it, but at the moment I have mixed feelings about it: It is definitely cleaner and more organized than having the background images, sizes, and positions separated... but at the same time, I find it more difficult to follow, especially for people that may not be used to that notation (like me 😓).

Collapse
 
afif profile image
Temani Afif

Yes for sure it will be difficult if you are already used to the longhand one. You are not the only one by the way, Lynn also use that notation. I don't know how you can easily find the position or the size for each gradient .. It would take me forever to find the correct one 😖

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Also, this made me remember one reason why I didn't do the shorthand notation more often: I don't know why, I would expect "image size / position" (or "image size position") instead of "image position / size" and it puts me off a little.

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

Because I'm a dodo and got used to the long notation 😳

I will try the shorthand notation, it will help making things easier and save me some time looking for things. Thanks for the recommendation.

Collapse
 
waylonwalker profile image
Waylon Walker

Pinkys out

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Pinkies out!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I'm so smart that I changed the original without realizing I hadn't forked it before 🤦

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay