This is what we’re building today. It seems simple, doesn’t it? Heck yeah, I love it simple. We will also focus only on the barebones and ignore animations and all the flashy stuff. But first, here is the soundtrack for the rest of this post.

Get some structure

Since starting a house by the ceiling often leads to a bad outcome, let’s just sketch a basic HTML structure for this thing. Now I’m feeling this wizards has a bunch of steps, so that’s probably a good starting point. A step has two things: a number (or a ✔) and some text. I’ll add some basic styling but nothing fancy. We’ll go over the fancy bits later. This is what I came up with.

This seems pretty dumb, but getting the foundation right is the first step to a solid work.

Make me pretty

This is when we grab the CSS hammer and start playing with it until we’re happy with the result. As far as the wizard is concerned, it means rounding the round thingy, and centering the text thingy, as well as all the components.

What? centering and CSS on the same paragraph, what is this madness?

Why yes, let me show you a little thing called…. FLEXBOX! So if you don’t know FLEXBOX!, you should not read the spec, but instead absorve all the knowledge from this Complete Guide to Flexbox. Now let’s get serious, read the spec if you have time, at least diagonally to grasp why things are the way they are.

The first thing you need to know about flexbox is it centers stuff. And is pretty good at that. Just slap these three magic lines:

.some.div.boy {
  display:flex;
  align-items:center;
  justify-content:center;
}

and BA-BAM, you have yourself an element centered both vertically and horizontally. We are totally overusing flexbox here but I don’t really care. It’s easy, looks cool and CSS is already pretty hard as is.

Absolute that boy

Now this is where we roll our sleeves because we have an issue to solve. Our approach has some things that were not well thought. What will define the width of the step is the size of the text. That means we have two problems to tackle:

• The steps are not evenly spaced if the text has different widths.
• The center of the step is not on the center of the round thingy, which means that is not trivial to center other content like the step separator that designers love.
• That separator will also look tacky because it cannot overflow the text.

Ideally we would float the object so it’s position would be relative to the parent. We can do that with a beautiful position: absolute. That will remove the text from the document flow, while keeping it close enough to the round thingy. Of course we have to add enough space to the container since the text height is not taken into consideration for the total height of .steps . We could be smart with variables so everything would be “automatic” but you know what? I’m feeling lazy.

This is also why we didn’t use semantics with <ol> <li>…</li> </ol> . We would have the same problems with the separator and would have to render the numbers in the li:after . Regardless, here is a final solution that uses a more semantic approach.

Drawing the rest of the owl

And guess what? It’s 90% done. How easy was this? very. The smart part was a position absolute mixed with flexbox. more like flexboss am I right?

Anyway, the most satisfying part comes now. You did the thing. The CSS is simple enough with (apparently) no hacks. We just beautify the thing so the designer doesn’t kill us and 🛳 it! We’ll add some classes for the different states but that just for completeness.

And this is it. Just the basics. No JavaScript. No animations. Just a solid foundation with some nice decisions. Hope you enjoyed reading this post as much as I enjoyed writing it. Until next time, if they don’t cancel the series after one episode.

João Campinhos is a Senior Internet Connoisseur Extraordinaire disguised as a Frontend Developer. Emoji expert since the day he was born, João soon developed a love for all things web, including internet memes. If you find him in the wild, his default behaviour revolves around screaming at his screen because CSS refuses to cooperate, React is rendering everything 100 times, or the tests are failing. In reality, he just doesn’t know how to quit vim.

Lets Build: 1, 2 step was originally published in Feedzai Techblog on Medium, where people are continuing the conversation by highlighting and responding to this story.

If you are paranoid about performance, use hex when declaring your colors and short hex whenever possible. If you need transparency use RGBA and stay the hell away from HSL(A).

Let’s face it, performance is important.
And although we now have incredible internet speeds in developed countries, we can’t neglect the rest of the world.

And what’s better than a blazing fast website? Nothing I say. We already minify and gzip our assets, and distribute them over a CDN, but there is a lot more we can do.

Let’s start this series with a simple and cheesy one: colors. I say cheesy because we can argue that the way we specify our colors won’t hurt our loading times. I’m inclined to agree, but I can think of some use cases that require extreme optimization, and for those use cases this might be useful.

The problem

There are a lot of ways to specify colors in CSS. for example this color

can be specified like this:

The question is: Which one should we use? If we approach this from a size perspective, #639 is the smallest and therefor the best! But is it always like that? let’s analyze this further.

Tests

To test this, I used jsperf to automate the process.
I used the following browsers:

• Safari 9.0.3
• Chrome 47.0.2526
• Chrome Mobile 49.0.2592

And I created three revisions to test three different things.

Rev 1

• named color
• short hex
• long hex
• RGB
• HSL

Rev 2

• RGBA
• HSLA

Rev 3

• lower case hex
• upper case hex

You can check the tests and results here.You can even run the tests yourself to compare with my results.

Results

Note that those are my results with my machine and my browsers. Your mileage may vary.

Rev 1

This is the base of our tests. And we can see that the short hex is always the best option followed by long hex. The difference between Named color and RGB is marginal on Desktop Chrome, but it’s noticeable on Safari and Chrome Mobile. HSL is a disappointment.

Rev 2

HSL was worse on the first test and when we add alpha to the game, HSLA loses again, hard. Use RGBA always.

Rev 3

As I suspected, lower case vs upper case hexadecimal notation is just a matter of preference that don’t alter performance at all.

CSS perf: Colors was originally published in Sad developer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Coders love their tools don’t they? As they should. Whether it’s a bloated IDE or a minimal text editor, a huge opinionated framework or a simplistic library, tools are a critical part of a programmer’s job. I love them too, but sometimes it’s easy to be overwhelmed by the huge amount of tools around us. And if you do any kind of front-end development, it gets even worse. Any developer that is not living under a rock can sense the insanity in the air.

The first question pops up immediately

Why?

There are a bazillion tools out there because everyone has a different workflow. Allow me to explain this one further. Let’s take a look at package managers. Bower wins the popularity contest here, but you end up with a lot of unnecessary files. So you use a task runner like Grunt or Gulp to copy, concatenate and minify everything. Or you might want to do something completely different with other tools like Webpack. Or even use Webpack with your task runner. Can you see where I’m going with this?

But why does this happen?

Well, partly because the web is pretty new and people are still figuring shit out. Everyone were just doing basic static HTML pages and then some crazy guy appeared with the ajax magic. Out of the blue dynamic pages were a thing. Now we have to deal with the mobile web, responsive shenanigans, single page applications, web sockets, a bunch of API’s AND I CAN’T TAKE IT ANYMORE!

This is really funny. tell me more about this insanity

It’s not just a matter of workflow. Just like this post states my opinion, frameworks are opinionated as fuck, and with MVwhathever frameworks, the situation is hilarious. We actually need a website to keep track of every combination available, and there are currently 64 applications with different frameworks and/or languages that compile to Javascript.

But even CSS can’t run away from this madness. There are pre-processors; post-processors; boilerplates; libraries; frameworks; mostly because CSS is stupid and everything most pre-processors do CSS should do by default.

I'm new to front-end and am now crying in a corner

Good. Don’t go out there trying to learn the flavor of the month. Focus on technologies. Did you learn rails without having a solid knowledge of how ruby works? You did? Oh… well, sorry to hear that. Focus on JavaScript. Everyone knows the best JavaScript flavor out there is vanilla. if you know JavaScript you can pick up any framework your crazy project manager throws at you, even the most esoteric ones. The same goes for CSS. If you know your CSS you can ditch the bloated frameworks and develop your own that covers your necessities.

Then you can publish it so everyone can use your framework for that specific use case. Instead of 300 frameworks we’re now sitting at 301. And you're probably super proud of it. You piece of shi…

These aren’t the tools you’re looking for was originally published in Sad developer on Medium, where people are continuing the conversation by highlighting and responding to this story.

“Why you’re good if you can be better?” — Mom

That’s one quote that’ll never forget. And although it feels like something out of a self-improvement book, to me it was always a big burden.

What she was saying — willingly or not — was to never be happy with yourself. You’re not allowed to be happy of your achievements because tomorrow you need to do better; you need to BE better. And if you’re doing something where you get better with time, that makes a lot of sense.

If you’re into running, tomorrow you can run one more meter than today. You improved yourself, and that’s something to be proud of. Well, believe it or not, life doesn’t work that way. I tried to be the best in what I was doing, and since I was 7 or 8, that was school. And I was good at it. I felt the improvement every day and that worked for some years. Until It didn’t. I kept doing the same thing I was doing but didn’t improve. I couldn’t understand why that absolute truth suddenly wasn’t true anymore. A lot of kids were having way better grades than me and I felt really sad. Then it hit me: I was just an average guy.

When you’re 15 years old the sky is the limit. You not only think you’re always right, but you also know you’re going to have the most bad ass life ever. Imagine my head exploding while I was trying to cope with the fact that I was just and average guy. Ordinary people don’t make history. Extraordinary people do.

Now let me throw at you another baffling truth. The majority of people on earth are not extraordinary. I went ahead and did the math and it says right here that you are probably an average guy/girl as well.

As it turns out the best thing you can do is to accept your averageness. Now I’m not saying to quit your life and go live in the wilderness. But maybe there are some things you can do to adjust your lifestyle to who you are. Allow killer mike to flood you with his wisdom.

But how to celebrate it?

The keyword here is happiness. You need to do what makes you happy. If that is pursuing something that you will never achieve, then so be it. But since I believe my average reader has a bit of sense inside their head, then allow me to tell you what I do, because if it works for me then chances are it works for you too.

Lower your ambitions

Like killer mike says, if you lower your ambitions, them chances are you are going to achieve things faster. Don’t fall for that “Shoot for the moon. Even if you miss, you’ll land among the stars.” shit. If you are going to shoot for the stars ad æternum even though you know you’ll never reach them, then shoot for the fucking moon in the first place.

Know when to quit

That’s a hard one. I took me years to accept that sometimes it is OK to quit. Sometimes you’re wasting energy in something that is just not worth it, or that you know it will never work. Quit now! Don’t waste time on something you know is never gonna happen. Focus your energy on what’s achievable and really important. I’m not saying that scientists that are involved in theories for decades are stupid, but maybe if they spend 20 years without any palpable progress, then maybe it’s best to accept the truth and move on.

Little victories are victories too

This might feel a bit sad, but I tend to celebrate a lot of meaningless things. Like when I start writing, I feel really good once I have the first paragraph done. It might seem stupid, but it really gives you the feeling of progress. Not only that but the fact that you’re happy and proud of what you did helps you feel that you’re doing the right thing.

Be happy

At the end of the day, the important thing is to be happy with what you did and know that you gave it your best. Trying to push harder every day is going to stress you. As that stress gets bigger it leads to sadness and unhappiness that eventually leads to a shitty life. So embrace your averageness and celebrate it, because it’s part of who you are.

Originally published at blog.campinhos.pt on December 14, 2015.

Celebrating Average was originally published in Fēlīx Culpa ‎ on Medium, where people are continuing the conversation by highlighting and responding to this story.