Some developers use their weekends to develop cool and grandiose projects to learn new technologies and to double down as second (or third) sources of income… instead, I used this past weekend, to develop a small and silly project.

I coded a web page that calculates how much money Jeff Bezos makes while you read it: Bezos’ Calculator (https://bezoscalculator.com).

It is a mixture of tongue in cheek and social criticism (bubbles pop up with milestones comparing it to other salaries and goods.) …

The Wonderful Wizard of Oz is one of the books I have read recently. So I decided to draw the story’s main characters in a minimalist/vectorial way, just using 8 colors, HTML, and CSS.

Here’s a demo on Codepen:

I tried to keep the drawing simple and to the minimum, so each character only has four sections:

• Cowardly Lion: mane, face, ears, and nose.
• Dorothy: face, hair, dress, and hair bows.
• Scarecrow: hat, face, necktie, and straw.
• Tin Woodman: hat, face, jaw, and bowtie.

The drawings are done with clip-path, using the polygon() function. So the process was a…

This post is going to be a little bit of showing off (sorry). It is a personal project that I did over 2 years ago -before joining DEV-, and that CSS {IRL} reminded me about today.

It is a collection of drawings of The Simpsons characters done in CSS. I learned a lot coding them, and I’ve learned even more since… so I’m scared of looking at my own code now.

Here are some of the drawings (there are 10 in total):

Bart Simpson

This was the first one I did for a CodePen challenge with the colors red, blue, and yellow…

In this post, we are going to see different methods to draw a triangle in CSS. We will focus on three in particular: the traditional method using borders and two more modern options with clip-path and linear-gradient().

Using border

This is the “classic” way of drawing a triangle in CSS, and it seems like the most popular one by far. It consists of having a single colored border, leaving the others transparent. These are the steps to achieve it:

1. Set a width and height of 0.
2. Set the border color to transparent.
3. Set the top border to 0.
4. Set the side borders…

I have a dream job. It’s at a big company (I won’t say the name), on a small and collaborative team full of talented and supportive people, with exciting challenges, room to grow, and cool perks.

…and that dream job was in 2008.

What does that mean? Did I get it? Did I not get it? Did the dream become a reality? Did it shatter into pieces? Did the dream become a nightmare?

And to that, I have to say, “ Wow! that’s a lot of questions” and the answers are: many things, yes, also yes, kind of, kind of…

You have a website, and you are gaining some momentum and visitors. So you may get the thought, “Can I make some money out of this traffic?” And the answer is “Yes.” But how?

Captain Obvious’s statement: Nobody likes to see ads on a website. They worsen the user experience, slow things down, pose security problems, and often don’t match the site’s general style. Not to mention that sometimes, they may be totally inappropriate.

So let’s not go the ad route and ignore the ad servers. …

allow

The allow attribute defines a policy with the features available within the iframe. Some of the values that it can have: accelerometer, fullscreen, microphone, USB...

“allow” redefines how features are included in the iframe. It is the way moving forward and leaves the attributes allowfullscreen or allowpaymentrequest for legacy.

Example of use:

<!-- 
The page in the iframe will be able to use the camera,
accelerometer, gyroscope, and geolocation; but it won't be
able to use the microphone or the magnetometer, for example.
-->
<iframe src="/url-to-load" 
        title="demo"
        width="700" 
        height="400"
        allow="accelerometer; camera; geolocation; gyroscope">
</iframe>

cite

This is an interesting attribute for…

It has been snowing and freezing in Texas lately (it still is)… and that was the inspiration for this quick animation of snow falling done with HTML and CSS in less than 10 minutes (video at the bottom of the page).

Note: we used Pug and Sass/SCSS to simplify the repetitive parts of HTML and CSS respectively, but they are not needed. You can extrapolate the code so it’s only HTML and CSS (for simplicity, we will show both in the article.)

This is how our animation will look in the end ( demo via CodePen):

Setting the background

Let’s start by…