DEV Community

Alvaro Montoro
Alvaro Montoro Subscriber

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:

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

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
 
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
 
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 • 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 🤦

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay