DEV Community: Olzhas Askar

Spotify vs. Apple Music recommendations

Olzhas Askar — Sun, 09 Apr 2023 15:19:04 +0000

Spotify

Me: Let me listen to some of The Strokes tracks. I like "Last Nite" and "You Only Live Once".

Spotify: You know what? The Strokes has a drummer, Fabrizio Moretti, and he has a side band called Little Joy, where he plays guitar.

Me: I like Little Joy! "Don't Watch Me Dancing", "With Strangers" - I might even listen to the whole album.

Spotify: Cool! The singer of Little Joy, Rodrigo Amarante, was previously in a Brazilian band, Los Hermanos. I think you might like some songs from the other singer of Los Hermanos, Marcelo Camelo.

Me: Definitely! His songs like "Vermelho" and "Liberdade" sound great.

Spotify: By the way, you might also like some music by Camelo's wife, Mallu Magalhães. Here, try "Sambinha Bom" and "Vai e Vem".

Me: You really seem to make some quality suggestions! Nice!

Spotify: Should we try Banda do Mar?

Apple Music

Me: Let me listen to some Radiohead. I like their "Airbag".

Apple Music: Have you heard "Creep"?

Flask, AirPlay and the port 5000

Olzhas Askar — Tue, 03 Jan 2023 15:46:56 +0000

I have finally set up my VSCode to debug a Flask application. I fire a curl request to http://localhost:5000/whatever and hit the breakpoint. So far, so good. Now I want to store some request examples as a Postman collection. I import the same curl request into Postman, parametrize the domain as an environment variable, hit the “Send” button and…

403 forbidden. Ok, there must be something wrong. Let’s check! After a couple of minutes of searching I realize I should not have used the env variable, the endpoint path is now duplicated, http://localhost:5000/whatever/whatever. Whatever, let’s shorten it as it is supposed to be…

403 forbidden. It still doesn’t work. Ah, Postman is clever, it has Initial Value and Current value for the variables. Let’s manually edit the current value, restart the app out of superstition and fire the request again…

403 forbidden. Things are getting overly suspicious! Let me fiddle with the Postman headers: Content-Type, User-Agent, Accept… After switching the headers on and off in different combinations in random order I notice the response headers. They say Content-Length: 0 and Server: AirTunes/610.19.1. AirTunes doesn’t look like a Flask server, does it? I fire the curl request again in my terminal and see that the server is Werkzeug.

After some duckduckgoing I found out that Apple listens as AirPlay Receiver on the port 5000 (standard Flask port), because it wasn’t registered by Internet Assigned Numbers Authority. For some reason Apple decided 5000 will be a good port (and Flask and dotnet Core and Heroku and Docker Registry). I don’t know who was the first to claim the port and why the subsequent implementations didn’t consider the first ones. I also don’t know why curl reaches my Flask app and Postman doesn’t. It’s tiring researching absolutely unnecessary piece of information.

So I changed my Flask port and it worked. I hope it helps to you as well.

Hacktoberfest and privacy concerns

Olzhas Askar — Sat, 26 Oct 2019 07:39:17 +0000

Sooner or later it happens to everybody. To me, it happened yesterday. Before, I was just thinking about it as a funny joke to watch on YouTube.

Do you use Firefox?
Do you know there is an Mozilla-made extension to block tracking from Facebook? Have you ever wondered, why there is no such an extension to restrict Google? Because that will return you to nineties. Search bar, maps, fonts, content delivery networks, logins, analytics, ads, etc. you name it. We are very dependent on Google. And this all not mentioning Chrome, Pay, Cloud Platform, Pixel, Home and other prominent products.

What this all has to do with Hacktoberfest? First of all I want to thank Digital Ocean and Dev for organizing it. I participated for the first time and made some really inspiring contributions(inspiring for me, of course). Yesterday I received a mail about HacktOVERfest. I am sure most of you did. I was on my phone, so I couldn't really enjoy the Twitter part. When I later was on my laptop, I decided to re-read the email, because I was curious what the other people tweeted about the Fest. This was what I saw.

Liquid error: internal

Cool, I thought to myself. Really awesome contributions! Then I went to the service which would cost $1,173 per year to find out the following video on the front page.

Scary, isn't it? Especially, taking into consideration that I haven't watched Simpsons since their movie.
Previously, people were scared of Man in the Middle attacks, and we can try to deal with this concerns. We can also use a mobile VPN, but when it comes with data we entrust to a service? Well, we can only try to lower our dependencies. Use Firefox, at least to show support against the browser monopoly, use DuckDuckGo or Ecosia to support privacy/tree oriented engines, etc.. Just let's not stay indifferent. It's not about the right to remain unknown while surfing for 18+ content or using hatespeech, it's about fundamental right of choice. Everything big companies want to do with your data should be brought to you as an explicit opt-in.

Thanks again for Hacktoberfest, it opened my eyes for many things. Let's support OSS! My next posts will not be as sad.

CSS Battle #12 - Wiggly Moustache

Olzhas Askar — Mon, 16 Sep 2019 06:52:02 +0000

When it comes to CSS, I'm still back in the 00s. Have you seen Stack Overflow on the 1st of April? Or do you remember MySpace? Glitter and poisonous colors? Well, that is my level. I'd be even using <blink></blink> were I that old. So, when I discovered CSS Battle, I thought I should take it beyond the battle.
I should have fundamentally got better at CSS. Bootstrap based pages were published. New JS frameworks appeared.
But I didn't. Yet.

1. Initial Solution

This is how I've made the last battle to the 100% point. The main idea here is using pseudo classes to make rounded ends.

<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<style>
  body{
    background: #F5D6B4;
    margin: 0;
    position: relative;
  }
  #l, #r, #c{
    width: 60px;
    height: 30px;
    border: 20px solid #D86F45;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  #l, #r{
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top: 0;
  }
  #l{
    margin: 0 0 0 -130px;
  }
  #r{
    margin: 0 0 0 30px;
  }
  #c{
    margin: -50px 0 0 -50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom: 0;
  }
  #l:before, #r:after{
    content: "";
    width: 20px;
    height: 10px;
    position: absolute;
    background: #D86F45;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    top: -10px;
  }
  #l:before{
    left: -20px;
  }
  #r:after{
    left: 60px;
  }
</style>

2. Borders

Let's unify all borders to be single border-radius with four values.

border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;

This becomes a single value.

border-radius: 0 0 50px 50px;

3. Positioning

We can position everyhing as fixed, remove top and left properties which had 50% and replace them with more precise margins.

<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<style>
  *{
    background: #F5D6B4;
    position: fixed;
  }
  #l, #r, #c{
    width: 60px;
    height: 30px;
    border: 20px solid #D86F45;
  }
  #l, #r{
    border-radius: 0 0 50px 50px;
    border-top: 0;
  }
  #l{
    margin: 142px 0 0 62px;
  }
  #r{
    margin: 142px 0 0 222px;
  }
  #c{
    margin: 92px 0 0 142px;
    border-radius: 50px 50px 0 0;
    border-bottom: 0;
  }
  #l:before, #r:after{
    content: "";
    width: 20px;
    height: 10px;
    position: absolute;
    background: #D86F45;
    border-radius: 20px 20px 0 0;
    top: -10px;
  }
  #l:before{
    left: -20px;
  }
  #r:after{
    left: 60px;
  }
</style>

At this point I can probably leave it for you. You know what to do. I hope you enjoyed as I did. I learned a ton of CSS, which I am using in daily work. The whole point was learn together. And since the content I've found online usually only scratches the surface, I decided to contribute myself.
When it comes to the competitive part of it, you can ask others, lint your code and minify it. But I'd rather recommend to watch a positioning tutorial. And of course, never forget - less is more.

And this is it.
Currently I am 72nd out 21780 people who played the game. I solved 37 out 44 battles. My handle is @pheeria.
See you later, I guess?

CSS Battle #11 - Eye of Sauron

Olzhas Askar — Sun, 08 Sep 2019 14:08:58 +0000

I must admit, it is difficult to finish things. You start enthusiastically a lot of things in parallel and then realize you can finish none of them. This time I want to endure. Only two left, if you only consider the first battle. By the way, many thanks to Kushagra Gour & Kushagra Agarwal for adding new battles regularly!

1. Initial solution

This time let's try to gradually change the design of the solution, just like you would do in the real development.
Here is how solved it the first time. Three divs, each with different styles, absolutely positioned relative to body.

<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<style>
  body {
    background: #191210;
    margin: 0;
    position: relative;
  }
  #l {
    width: 60px;
    height: 30px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 20px solid #ECA03D;
    border-top: 0;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 0 0 -150px;
  }
  #c {
    width: 100px;
    height: 100px;
    background: repeating-radial-gradient(circle at 50%, #84271C, #84271C 35%, #191210 35%, #191210 100%);
    border: 20px solid #ECA03D;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -70px;
  }
  #r {
    width: 60px;
    height: 30px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border: 20px solid #ECA03D;
    border-bottom: 0;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 50px;
  }
</style>

2. Fixed position

Because we positioned all divs absolutely is our zero margin redundant. Furthermore, when we don't have a margin anymore, instead of using body, we could use a wildcard. This can also benefit us in reducing all positioning to position: fixed for all elements.

<style>
  * {   // body -> *
    // position: relative;
    position: fixed;
  }
  #l {
    // position: absolute;
  }
  #c {
    // position: absolute;
  }
  #r {
    // position: absolute;
  }
</style>

3. Share position

top and left can also be moved to the wildcard, since we are using them for every element.

<style>
  * {
    top: 50%;
    left: 50%;
  }
  #l {
    // top: 50%;
    // left: 50%;
  }
  #c {
    // top: 50%;
    // left: 50%;
  }
  #r {
    // top: 50%;
    // left: 50%;
  }
</style>

4. No z-index

We actually don't need z-index. Sometimes I add things, which seem to be correct, even though they are not necessary. Let's remove it as it only leads to confusion whomever looks at it.

<style>
  #l {
    // z-index: 1;
  }
  #c {
    // z-index: 1;
  }
  #r {
    // z-index: 1;
  }
</style>

5. Unify border radii

Instead of writing out each of the four possible border radiuses (may I please supporters of both plural types?), we can you use a shorthand with four values.

<style>
  #l {
    // border-bottom-left-radius: 50px;
    // border-bottom-right-radius: 50px;
    border-radius: 0 0 50px 50px;
  }
  #r {
    // border-top-left-radius: 50px;
    // border-top-right-radius: 50px;
    border-radius: 50px 50px 0 0;
  }
</style>

6. Share borders

Since the borders for all elements are also the same, we can move them to the wildcard as well.

<style>
  * {
    border: 20px solid #ECA03D;
  }
  #l {
    // border: 20px solid #ECA03D;
  }
  #c {
    // border: 20px solid #ECA03D;
  }
  #r {
    // border: 20px solid #ECA03D;
  }
</style>

7. Simplify background

For the central circle background, we don't really need to repeat it. One time is enough.

<style>
  #c {
    // background: repeating-radial-gradient(circle at 50%, #84271C, #84271C 35%, #191210 35%, #191210 100%);
    background: radial-gradient(#84271C 35%, #191210 35%);
  }
</style>

8. Rotate

The left and the right side of the circle are same. We only need to rotate one and place it differently to obtain the second. So we can create a common class named half and convert l and r to classes as well. Now the whole appearance will be held by half and the other two will only place and rotate. Let's look at the whole code again.

<div class="half l"></div>
<div id="c"></div>
<div class="half r"></div>
<style>
  * {
    background: #191210;
    position: fixed;
    top: 50%;
    left: 50%;
    border: 20px solid #ECA03D;
  }
  .half {
    width: 60px;
    height: 30px;
    border-radius: 0 0 50px 50px;
    border-top: 0;
  }
  .l {
    margin: 0 0 0 -150px;
  }
  #c {
    width: 100px;
    height: 100px;
    background: radial-gradient(#84271C 35%, #191210 35%);
    border-radius: 50%;
    margin: -70px 0 0 -70px;
  }
  .r {
    transform: rotate(180deg);
    margin: -50px 0 0 50px;
  }
</style>

9. Remove margins

We are using fixed position anyways, so margins will only mess up our layout. They collapse, they affect each other.
We better set top and left more precisely.

<div class="half l"></div>
<div id="c"></div>
<div class="half r"></div>
<style>
  * {
    background: #191210;
    position: fixed;
  }
  .half {
    width: 60px;
    height: 30px;
    border-radius: 0 0 50px 50px;
    border: 20px solid #ECA03D;
    border-top: 0;
  }
  .l {
    top: 50%;
    left: 50px;
  }
  #c {
    width: 100px;
    height: 100px;
    background: radial-gradient(#84271C 35%, #191210 35%);
    border: 20px solid #ECA03D;
    border-radius: 50%;
    top: 80px;
    left: 130px;
  }
  .r {
    transform: rotate(180deg);
    top: 100px;
    left: 250px;
  }
</style>

10. Some relativity

After reading a couple of chapters of [Lea Verou's book][2], I was fascinated with relative units. Sure, you know relative is better than absolute. But when writing JSS modules, it is easy to neglect their power, favoring simplicity instead. So here we can set a font size to be ten pixels, which will equal to one em. All of the other measurements are bound to it as a reference. So, whenever we change the font size in one place, the whole design will scale gracefully.

<div class="half l"></div>
<div id="c"></div>
<div class="half r"></div>
<style>
  * {
    background: #191210;
    position: fixed;
    font-size: 10px;
  }
  .half {
    width: 6em;
    height: 3em;
    border-radius: 0 0 5em 5em;
    border: 2em solid #ECA03D;
    border-top: 0;
  }
  .l {
    top: 15em;
    left: 5em;
  }
  #c {
    width: 10em;
    height: 10em;
    background: radial-gradient(#84271C 35%, #191210 35%);
    border: 2em solid #ECA03D;
    border-radius: 50%;
    top: 8em;
    left: 13em;
  }
  .r {
    transform: rotate(180deg);
    top: 10em;
    left: 25em;
  }
</style>

And I think this is it. Any suggestions?

CSS Battle #10 - Cloaked Spirits

Olzhas Askar — Wed, 31 Jul 2019 16:14:26 +0000

Times don't get no better, boys. The number ten is a special one. It is the first two-digit number. It is a famous football shirt number. In fact, it is so famous, that Turks would call something on numara, number ten, in order to express admiration. As for the challenge, it is going to be fun.

1. Div Way

Let's start with defining what we'll need. Three columns, squeezed together, with circle shapes on top. So, we'll make three divisions, having one another division inside each of them. In order to differentiate them from each other let's call the outer div column and the inner one circle. Here is the markup.

<div class="column">
    <div class="circle"></div>
</div>
<div class="column">
    <div class="circle"></div>
</div>
<div class="column">
    <div class="circle"></div>
</div>

All of this needs to be on a purple background. In order to create a frame for our shapes, let's restrict them by styling body tag. Note, that I am using a zero-padding and font-size: 0. And because of declaring padding we can't use * selector.

body {
  padding: 42px 30px 30px 42px;
  font-size: 0;
  background: #62306d;
}

Then we switch to the columns. A column should have a width of 100px, a height of 150px, inline-block display obviously, otherwise, why would we be setting the font size to zero? All this on a nice yellow background with circled borders.

.column {
  width: 100px;
  height: 150px;
  display: inline-block;
  background: #f7ec7d;
  border-radius: 50px 50px 0 0;
}

The code above doesn't work quite yet, because there is always an exception to a rule. The middle shape is almost like showing us a middle finger, it needs some special treatment. It's funny how :nth-child() is not zero-indexed. Nonetheless, we adjust the height, effectively pushing the side columns down.

.column:nth-child(2) {
  height: 250px;
}

Inside of each column, we already have a division defined to represent a circle. We set width and height to the same sixty pixels and border-radius to fifty percent to get a circle. We add a border of twenty pixels and background color.

.circle {
  width: 60px;
  height: 60px;
  border: 20px solid #aa445f;
  background: #e38f66;
  border-radius: 50%;
}

Our special snowflake, the middle column, needs to be adjusted again. This time we change the background and the border color.

.column:nth-child(2) .circle {
  background: #aa445f;
  border-color: #e38f66;
}

In case you didn't know, a border color and box-shadow default to the color attribute of an element, if omitted. So, we could rewrite our colors in the following manner.

.circle {
  width: 60px;
  height: 60px;
  border: 20px solid;
  border-radius: 50%;
  color: #aa445f;
  background: #e38f66;
}
.column:nth-child(2) .circle {
  color: #e38f66;
  background: #aa445f;
}

So, this is it. You can start playing around with CSS to see how breaking things results in unexpected shapes. For example, try removing a height for columns or border for circles. Isn't it fun? Here you go with the full solution.

<div class="column"><div class="circle"></div></div>
<div class="column"><div class="circle"></div></div>
<div class="column"><div class="circle"></div></div>

<style>
  body {
    padding: 42px 30px 30px 42px;
    font-size: 0;
    background: #62306D;
  }
  .column {
    width: 100px;
    height: 150px;
    display: inline-block;
    background: #F7EC7D;
    border-radius: 50px 50px 0 0;
  }
  .column:nth-child(2) {
    height: 250px;
  }
  .circle {
    width: 60px;
    height: 60px;
    border: 20px solid #AA445F;
    background: #E38F66;
    border-radius: 50%;
  }
  .column:nth-child(2) .circle {
    background: #AA445F;
    border-color: #E38F66;
  }
</style>

2. Pseudo Way

Can we do it another way? Sure, we can. But before we do that, do you know what this (_>_) means? A nice smiley, isn't it? What if I showed you it in another context?

val ordered = seq.sort(_>_)

It means, sort by ascending. Scala has some very unusual symbols for a developer with a background of C-like languages.
Do you what this * + * means? Clearly, it is an owl. An owl selector. After reading about it on Every Layout, I got fascinated by this simple, yet powerful idea - elements position should not be its own concern, rather its parent's. Previously, an owl selector would be used to solve this problem in an elegant way. Now we have a flexible box. Let's see how our solution would look like.

We still have three columns, but this time let's use paragraphs instead of divisions. It's semantically incorrect, I know, but you shouldn't be using CSS for drawing figures either. We choose p because of it's display: block property. To the middle element, we give an id to differentiate it from the rear ones. Notice how we don't need quotes if our attribute's value consists of a single word. Here is the markup.

<p></p>
<p id=a></p>
<p></p>

To style a column we can reuse the same code from our previous solution. There are two differences, though. I used viewport height and viewport width as measurement units to be a little bit more soft coded, that is to allow some adaptiveness. And we also don't need display: inline-block.

p {
  width: 25vw;
  height: 50vh;
  background: #f7ec7d;
  border-radius: 12.5vw 12.5vw 0 0;
}

Our middle ~finger~ column is restyled when it comes to height. We select it by targeting a paragraph which has an id attribute defined.

p[id] {
  height: 62.5vw;
}

To recreate the circles, let's use pseudo-classes this time. All the same code from above, except for the addition of content: "" and display: block to make our sizing work. And of course, we overwrite background and border colors for the central column.

p:after {
  content: "";
  display: block;
  width: 20vh;
  height: 20vh;
  border: 5vw solid #aa445f;
  background: #e38f66;
  border-radius: 50%;
}
p[id]:after {
  background: #aa445f;
  border-color: #e38f66;
}

Now we should see a white background with two columns on the left side. This is not what we want. But this is what we get, for we haven't done any placement of our elements. Here comes the missing piece.

body {
  height: calc(100vh + 8px);
  background: #62306d;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

We specify a flex display, justify horizontally all columns to be in the center and align our items to the bottom of the screen. If you know why I had to add eight pixels to the whole height, and that's the only way I found so far to work, please let me know. I am curious as well.

So, here comes the whole solution.

<p></p>
<p id=a></p>
<p></p>

<style>
body {
  height: calc(100vh + 8px);
  background: #62306d;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
p {
  width: 25vw;
  height: 50vh;
  background: #f7ec7d;
  border-radius: 12.5vw 12.5vw 0 0;
}
p[id] {
  height: 62.5vw;
}
p:after {
  content: "";
  display: block;
  width: 20vh;
  height: 20vh;
  border: 5vw solid #aa445f;
  background: #e38f66;
  border-radius: 50%;
}
p[id]:after {
  background: #aa445f;
  border-color: #e38f66;
}
</style>

3. Shadow Way

I've already mentioned, that if there is one thing I learned by solving these challenges then it would box-shadow. I will try to apply it here as well.

Caution! Do not try to repeat this in production!

The idea is to position three divs absolutely in relation to the whole page. Divs are named l for left, c for center and r for right.

<div id=l></div><div id=c></div><div id=r></div>

These divs are going to be representing circles. They have the same width and height, background and border, everything like above. What makes the difference are position: fixed and specified top: 134px and left: 50px parameters.

div {
  position: fixed;
  top: 134px;
  left: 50px;
  width: 20vh;
  height: 20vh;
  background: #e38f66;
  border: 5vw solid #aa445f;
  border-radius: 50%;
}

We adjust the placement and colors for the central and right elements a bit.

#c {
  top: 34px;
  left: 150px;
  background: #aa445f;
  border-color: #e38f66;
}
#r {
  left: 250px;
}

Then we give colors to our body.

* {
  background: #62306d;
  color: #f7ec7d;
}

You may wonder, why do we use color property? After all, we don't have any text here. The color property is taken as a default value for borders and shadows, that's why.
And here comes the jewel of the solution, the mighty box-shadow.

box-shadow: 0 10px, 0 20px, 0 30px, 0 40px, 0 50px, 0 60px, 0 70px, 0 80px,
  0 90px, 0 100px, 0 105px, 0 110px, 0 120px, 0 130px, 0 135px 0 5px, 0 190px 0
    30px;

Just pile down a circle after circle after circle all the way down to the bottom. Initially, a ten-pixel distance is enough, but when the level of the left and right circles is reached, we will see a thin line, where the columns don't touch. So we make our last two circles bigger to cover the flaw.

Here is the whole solution.

<div id=l></div><div id=c></div><div id=r></div>

<style>
* {
  background: #62306d;
  color: #F7EC7D;
}
div {
  position: fixed;
  top: 134px;
  left: 50px;
  width: 20vh;
  height: 20vh;
  background: #e38f66;
  border: 5vw solid #aa445f;
  border-radius: 50%;
  box-shadow:0 10px, 0 20px, 0 30px, 0 40px, 0 50px, 0 60px, 0 70px, 0 80px, 0 90px, 0 100px, 0 105px, 0 110px, 0 120px, 0 130px, 0 135px 0 5px, 0 190px 0 30px;
}
#c {
  top: 34px;
  left: 150px;
  background: #aa445f;
  border-color: #e38f66;
}
#r {
  left: 250px;
}
</style>

Writing this took a lot of time. I hope you like it. Have a nice day!

CSS Battle #9 - Tesseract

Olzhas Askar — Mon, 15 Jul 2019 15:31:25 +0000

The difference between these Series and any from Netflix is that on Netflix you get all episodes at once.
In contrast, I will need to write mine first. One post every three days. At least, that is what I wanted in the beginning. Naïve me.

Did you know there was a CSS Battle Community? Well, in case you didn't, here it is. Try to guess which kind of posts are the most frequent? Missing just a bit to 100%. The struggle is real. Thus, the series. I hope it helps.

The Solution

I need to confess. I didn't manage this one. But I am optimistic. The best I can is good enough.
Let's start with body. We make it striped by using linear-gradient. The first and the last 25% take #222730 and the middle 50% gets #4CAAB3 as a background color. The groundwork is done.



body {
  background: linear-gradient(#222730 25%, #4caab3 25% 75%, #222730 75%);
}

In the middle of the plot, we should have a rhombus. And inside, a circle. Let's mark them up. Note that you may use a p tag inside of a div instead of giving a generic division a kind of semantic meaning by attributing it with an id. After all, a paragraph is also a block element.



<div id="rhombus">
  <div id="circle"></div>
</div>

When it comes to a rhombus, we make a square and give it a size of 150 x 150, nice background color and a border of 50px to make it look cut-out. Then we center it by one of the older methods, using a fixed positioning. Note, that here as well, we could use an absolute positioning relative to its parent, but since body is the parent, fixed will bring us to the same outcome with less hassle. Finally, we also rotate the square to become a rhombus.



#rhombus {
  width: 150px;
  height: 150px;
  background: #4caab3;
  border: 50px solid #222730;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

The last one is the circle. We position it using a margin of 50px. The rest is pretty straight-forward. Size, background, and border radius.



#circle {
  width: 50px;
  height: 50px;
  background: #393e46;
  border-radius: 50px;
  margin: 50px;
}

This is the whole solution.



<div id="rhombus">
  <div id="circle"></div>
</div>

<style>
  body {
    background: linear-gradient(#222730 25%, #4CAAB3 25% 75%, #222730 75%);
  }
  #rhombus {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
    border: 50px solid #222730;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  #circle {
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 50px;
    margin: 50px;
  }
</style>

At the time of writing this, and I must admit, I've given up already, I just wanted to search for the name of the term. How would you call this thin line? Apparently, it is called bleeding. And one of the search results was promising to fix the problem. I thought, why not? And you know what? It worked. So, in order to make the code to achieve a full match, just add background-clip: padding-box to the #rhombus. What is this padding-box?

Outtakes

This one is quite funny. The code above will not work in Firefox. In fact, it will look something like this.

The very first, originally bleeding version will be like this.

And here comes the code. Keep in mind this is a non-polished version.



<div><p></p></div>

<style>
  body {
    margin: 0;
    position: relative;
    background: linear-gradient(#222730 25%, #4CAAB3 25% 75%, #222730 75%);
  }
  div {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
    border: 50px solid #222730;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-clip: padding-box;
  }
  p {
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 50px;
    margin: 50px;
  }
</style>

By the way, are you enjoying CSS Battle so far? The guys are putting in a lot of work. So, in case you wondered how you can support them, here you go:

// Detect dark theme var iframe = document.getElementById('tweet-1149229650809430016-13'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1149229650809430016&theme=dark" }

I personally find it funny how a light theme is something PRO™
But jokes aside, there are some potentially game-changing features coming like targets created by the Community and own battles. Great stuff if you want to hire a frontend frontend developer or just want to brag about your minifying skills.

CSS Battle #8 - Forking Crazy

Olzhas Askar — Mon, 08 Jul 2019 11:00:01 +0000

You know what? The title says it all. Forking Crazy!
This was by far the most challenging piece of all. Even though there is another one I couldn't solve yet.
The thing is, it is difficult to match the smallest details if you don't have any clue about the measurements. You'll see below loads of some magic numbers, which came up out of nowhere, after hours (or probably minutes, to be fair) of fine-tuning, and somehow managed to settle.
I will try to explain my only solution to this problem. By the way, this is by far the longest one character-wise, resulting in whopping 1454 characters! If you care about the score, and it only makes sense if you have something below 350 characters (otherwise you'll get a score of 600 for anything else) you should go and use battle tips. To be fair, you should only use them once you are fully aware of what you've done and what you're up to, because those are mainly exploits of the errors, which browser would forgive you, like omitting closing tags.

The solution

Let's start with styling the body tag. We obviously give it a background color first and then a padding, to frame our working space. So, we limit our figure to be 50px away from the top and 130px away from the sides. Keep in mind, that the written numbers include the standard browser margin of 8px. You can, of course, define all elements relative to the whole window using margins, thus reducing the number of characters, but I chose not to do so since there is enough complexity.
The whole figure will consist of five parts:

1. The upper part

This is the part where we define the upward facing tines. It carries the name of bg, short for the background since its background is the same as the one of the body. We limit its size to 140 x 20 and give it a font-size: 0, to make our inline-block divs more readable instead of packing them like sardines in a crushd tin box.
Inside we have four half circles, to be fair, which are looking to the top. Each of them has a size of 20px and darker background color. All apart from the very first one also have margin-left: 20px. Now that look at the solution once again, I think it might have been more elegantly solved by a flexbox. For that, you'd need to give a parent class display: flex and justify-content: space-between, to avoid ugly left margins. Hmm, maybe I'll write more solutions than I planned to.

2. The stripes

At the very beginning, I seriously considered making each one of the stripes an own div. But then a revelation of a repeating-linear-gradient came to and I understood it was nonsense. Instead of styling two repeating divs with respectively a darker and lighter blues, which is the worst, or styling only a darker div and repeating it with margins, which is better than the previous proposal, we take it a level higher. We create striped id of 140 x 70 with a gradient, which goes from the left to the right. Note that the colors are repeating at the beginning and the end of each stop in order to avoid the gradient effect and make it look like an evenly colored line.

3. Tines end

This part is very similar to the upper part. It has half circles, which have a lighter blue as their background and margins between them. The background of the whole line is darker.

4. The bottom

The bottom part is of size 140 x 90 and has rounded corners of 90px. There is nothing spectacular about the bottom part.

5. The stick

Maybe you shouldn't ask me about this last piece.

We are placing a stick relatively so that we can lift it above the bottom to avoid a weird gap at the conjunction if we were placing our stick statically. It has a size of 20 x 60 and margin-left: 60px. Then we lift it ten pixels by giving it a negative value.

<div class="bg">
    <div class="upward-circle"></div>
    <div class="upward-circle left-margin"></div>
    <div class="upward-circle left-margin"></div>
    <div class="upward-circle left-margin"></div>
</div>
<div id="striped"></div>
<div class="bg darker">
    <div class="downward-circle left-margin"></div>
    <div class="downward-circle left-margin"></div>
    <div class="downward-circle left-margin"></div>
</div>
<div id="bottom"></div>
<div id="stick"></div>

<style>
  body {
    padding: 42px 122px 0;
    background: #6592CF;
  }
  .bg {
    font-size: 0;
    width: 140px;
    height: 20px;
  }
  .darker {
    background: #060F55;
  }
  .left-margin {
    margin-left: 20px;
  }
  #striped {
    width: 140px;
    height: 70px;
    background: repeating-linear-gradient(
      to right,
      #060F55 0px,
      #060F55 20px,
      #6592CF 20px,
      #6592CF 40px);
  }
  #bottom {
    width: 140px;
    height: 90px;
    background: #060F55;
    border-radius: 0 0 100px 100px;
  }
  .upward-circle {
    width: 20px;
    height: 20px;
    background: #060F55;
    border-radius: 20px 20px 0 0;
    display: inline-block;
  }
  .downward-circle {
    width: 20px;
    height: 20px;
    background: #6592CF;
    border-radius: 0 0 20px 20px;
    display: inline-block;
  }
  #stick {
    width: 20px;
    height: 60px;
    z-index: 1;
    position: relative;
    top: -10px;
    background: #060F55;
    margin-left: 60px;
  }
</style>

And let's try to optimize it! We start it by using a shiny flexbox. By the way, make sure you know how flexbox and grid work if you are applying for a frontend position.

Our bg class now is a flexbox which would evenly distribute its content, creating an appropriate space in between.

.bg {
  width: 140px;
  height: 20px;
  display: flex;
  justify-content: space-between;
}

You can safely remove left-margin classes next to the upward-circle and see exactly the same outcome on that part of our figure. Suddenly, the tine-body conjunction now looks broken. Let's fix that. We reduce our width to 100px and 20px padding from both sides to recreate our figure from before.

.darker {
  width: 100px;
  padding: 0 20px;
  background: #060f55;
}

Now we can remove left-margin class completely from both HTML and CSS. And font-size: 0 as well. 1409 characters and counting. Do you feel the unbearable lightness of being yet? This is not exactly how you reduce your bundle size (you do it by removing left-pad), but that is something to keep in mind.

We can still lose some weight, though. Or, speaking more accurately, width. Since we enclosed our figure with padding from all around, let's just go and delete all that width: 140px everywhere. The elements will just take all the available space. 1355 characters.

There are two colors used throughout the task - light and dark blue. We have to have declared at least once each, but there is definitely room for improvement when you look at the current state. Light blue has to be used for body in order to give us the wanted background. What if we every other element to have a dark blue as a default background?

* * {
  background: #060f55;
}

* * means everything which is inside of the body element would have our dark blue. bg gets broken, but let's remove background: #060F55 from the other elements. That would be .darker, #bottom, .upward-circle and #stick. Now we can fix bg by specifying the lighter blue background: #6592CF. This will break the downward facing half circles and so we set background: #6592CF for darker class. 1343 characters.

upward-circle and downward-circle read like a lot of characters, especially if you reuse them lots of times. Let's extract the common logic and rename the classes. We know, that this is the main shape:

.circle {
  width: 20px;
  height: 20px;
  display: inline-block;
}

and these are the things that give the direction and color:

.up {
  border-radius: 20px 20px 0 0;
}
.down {
  background: #6592cf;
  border-radius: 0 0 20px 20px;
}

In order to shovel away just a little more, we can define border-radius of the up class to be in circle instead, thus eliminating the need of up as a separate class. down will still remain the same. If you remove 4 usages of up class in the markup, you will have only 1223 characters remaining.

Since we know exactly how much space we have in our disposal, having a fixed width and height of 400 x 300 pixels, we can rephrase our stick. We fix the position and set top and left values instead. 1200 characters.

#stick {
  width: 20px;
  height: 60px;
  position: fixed;
  top: 240px;
  left: 190px;
}

I hope you enjoyed the journey just as much as I did. Even though this challenge is basically solved using one solution, I believe this time it was deeper thought sharing. We reduced our solution by 254 characters, in which some crazy CSS hackers can fit 4 solutions of the first challenge, and it is still semantically correct, readable and maintainable. Unless you've told me there is another more elegant solution, we can be proud of ourselves.

CSS Battle #7 - Leafy Trail

Olzhas Askar — Mon, 01 Jul 2019 06:49:58 +0000

Here is the seventh one. Half of the challenges are behind. This one is the first to reuse the colors of the previous task, number five, to be precise. Anyways, I really like the composition of the colors used throughout the battles and hope one day to be cool with colors.

1. Z-Index

The first solution relies on the precise placement of the divs. First we describe a common div with its width, height and border-radius and afterward, we use position: absolute to allow positioning regardless of the neighbor elements. The absolute here can be safely replaced by fixed to save some characters if you fancy. Now to stack the elements we use z-index yet again. You know, the higher the number, the more is the element on the front. And since we already defined our content box with padding: 75px on the body, our only movements will be playing around with the left margins.

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

<style>
  body {
    margin: 0;
    background: #0B2429;
    padding: 75px;
  }
  div {
    width: 150px;
    height: 150px;
    border-radius: 100px 0;
    position: absolute;
  }
  #a {
    background: #1A4341;
    z-index: 1;
  }
  #b {
    background: #998235;
    z-index: 2;
    margin-left: 50px;
  }
  #c {
    background: #F3AC3C;
    z-index: 3;
    margin-left: 100px;
  }
</style>

2. Box Shadows

If somebody will ask, what I've learned from doing the CSS battle, I'd probably respond with "Box Shadows". This single technique keeps appearing throughout the challenges, often resulting in shorter solutions. And mostly these solutions also appear more idiomatic to me personally.
Here again, we use box shadows. The only gotcha here is that each subsequent shadow is placed behind the previous one, so to achieve the wanted appearance we should start with the rightmost leaf.
Notice how some of the values are defined with vh and vw - that is to save the battle characters. In the end, 50vh is one character shorter than 150px and doing this trick 4 times in our case, we save 4 characters.

<div></div>

<style>
* {
    background: #0B2429;
}

div {
    background: #F3AC3C;
    width: 50vh;
    height: 50vh;
    border-radius: 25vw 0;
    margin: 75px 167px;
    box-shadow: -50px 0 #998235, -25vw 0 #1A4341;
}
</style>

Which one of these solutions would you prefer? Do you know any others?

CSS Battle #6 - Missing Slice

Olzhas Askar — Wed, 26 Jun 2019 08:56:09 +0000

Now that I am a Frontend Developer™, I visit Berlin.JS. Last time I was there, Cassie Evans gave a wonderful talk on animations using SVG.

// Detect dark theme var iframe = document.getElementById('tweet-1142050104569999362-540'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1142050104569999362&theme=dark" }

So I thought to myself, "why not?" Apart from that, Cassie told me to use SVG, because divs were never meant to be used for drawing, SVG was. Besides that, you still need to style SVG.
Not that fast. CSS Battle doesn't allow SVGs.
Sad.
Let's solve number six the usual way.

1. Padding

Three divs, squeezed together to avoid a hack like font-size: 0, are placed in the middle of the content using paddings. Inline-blocking does the trick. We could as well used margins (that's actually how I did initially), but this time we will not.

<div id="a"></div><div id="b"></div><div id="c">
</div>
<style>
  body {
    padding: 42px 92px;
    background: #E3516E;
  }
  div {
    width: 100px;
    height: 100px;
    display: inline-block;
  }
  #a {
    background: #51B5A9;
    border-radius: 100px 0 0;
  }
  #b {
    background: #FADE8B;
    border-radius: 0 100px 0 0;
  }
  #c {
    background: #F7F3D7;
    border-radius: 0 0 0 100px;
  }
</style>

2. Transformations

But do we really need that much HTML markup? After all, this is CSS Battle. So, let's at least try to reduce the character count. We know, that a div can have a border radius to make it round. We also know that we can selectively modify each of the border sides. And that the border will replicate the side shape. So, we can make a circle, with four different colored borders. But the circle itself, we actually don't need it. What if we don't define it? So, a division of no height or width. This might work.
If you tried to that, you may notice, that the colors are not exactly turned the way we'd need. Well, here is where transform: rotate(45deg) comes in play. I just looked at possible units for rotation, just in case we win some more characters: deg, rad, grad and turn. But we don't.
When it comes to the border colors, your eyes might stumble upon something odd.
#0000, what art thou?
Initially, I wanted to make that part transparent. rgba(0, 0, 0, 0) is the solution. 16 freaking characters! Can't we do better? Sure, try transparent. It also works. But still long though. What about #00000000, where that 00 stands for opacity: 0? Much nicer! But it turns out that [4 character RGBA is supported too][4]!

<div></div>
<style>
* {
  background: #E3516E;
}

div {
  margin: 50px 92px;
  border-radius: 100px;
  border: 100px solid;
  border-color: #FADE8B #0000 #F7F3D7 #51B5A9;
  transform: rotate(45deg);
}
</style>

This is the first post, where I try to reduce the number of characters. Do not try to do this at home!
Anyways, which one of these solutions would you prefer? Do you know any others?

CSS Battle #5 - Acid Rain

Olzhas Askar — Sun, 23 Jun 2019 15:00:08 +0000

Well, this one is pretty easy. Actually, I solved it first the naïve way and it came much later to me, that I could also use the box-shadow. But we have already used box-shadow twice. So let's add something more.

1. Z-Index

The naïve way is to use an outer div, centered with margins, or if don't want to pollute the markup, use the padding for the same goals. Every div placed inside of it shall have the same width and height and, here comes the interesting part, position: absolute;. This will not only an easier positioning with margins relative to the outer div, but also the usage of z-index. We pile up the shapes as in the task and set up border-radius.

<div id="o">
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
</div>
<style>
  body {
    margin: 0;
    background: #0B2429;
  }
  #o {
    margin: 30px 80px;
    width: 250px;
    height: 240px;
  }
  #o div {
    width: 120px;
    height: 120px;
    position: absolute;
  }
  #a {
    z-index: 1;
    margin: 0px 120px;
    background: #F3AC3C;
    border-radius: 60px;
  }
  #b {
    z-index: 2;
    margin: 60px 60px;
    background: #998235;
    border-radius: 60px 0px 60px 60px;
  }
  #c {
    z-index: 3;
    margin: 120px 0px;
    background: #F3AC3C;
    border-radius: 60px 0px 60px 60px;
  }
</style>

2. Box Shadow

This one is inspired by the shortest solution of the very first battle. We make two divs, one of them will be a circle. The second one has a squared border on one side and a box shadow. No need for z-index, because every next box-shadow is placed behind the previous. Five values, two mandatory ones for X and Y offsets, Blur, spread, and the color. By now you should have somehow realized what you gotta do. This is really the main part of the solution, other things like cascading, overwriting and nth-of-type() are nothing more than an attempt to reduce the amount of code in a "smart" way.

<div></div>
<div></div>

<style>
* {
  background: #0B2429;
}

div {
  width: 120px;
  height: 120px;
  margin: 30px 192px;
  border-radius: 60px;
  background: #F3AC3C;
}

div:nth-of-type(2) {
  margin: -30px 72px;
  box-shadow: 60px -60px #998235;
  border-radius: 60px 0 60px 60px;
}
</style>

3. Sixty

Just for the sake of trying out something new and noticing quite a relationship of all of the values to sixty, I decided why not. We don't need SASS, we need much less – custom properties. We define a property --sixty and place to the wildcard so that it is available through cascading. Then we do some calc() magic and the rest is the same as above.

<div></div>
<div></div>

<style>
* {
  background: #0B2429;
  --sixty: 60px;
}

div {
  width: calc(2 * var(--sixty));
  height: calc(2 * var(--sixty));
  margin: calc(0.5 * var(--sixty)) calc(3 * var(--sixty) + 0.2 * var(--sixty));
  border-radius: var(--sixty);
  background: #F3AC3C;
}

div:nth-of-type(2) {
  margin: calc(-0.5 * var(--sixty)) calc(var(--sixty) + 0.2 * var(--sixty));
  box-shadow: var(--sixty) calc(-1 * var(--sixty)) #998235;
  border-radius: var(--sixty) 0 var(--sixty) var(--sixty);
}
</style>

Which one of these solutions would you prefer? Do you know any others?

CSS Battle #4 - Ups n Downs

Olzhas Askar — Wed, 19 Jun 2019 19:09:40 +0000

This one is pretty neat. The shape is the same three times, only the directions and positions differ. Let's use that for our first solution.

1. Absolute Positions

We create three divisions and give them arbitrary ids of a, b and c. If you don't want to do that, you can :nth-of-type() selector. Then we style our figure, however it is called. We give it a width and height, a background color, position it absolutely and round the lower side of the rectangle. Afterward, for each of the given divs we give a proper top and left positions and in case of the first shape, we also rotate it 180 degrees to point upwards.

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<style>
  * {
    background: #62306D;
  }
  div {
    width: 100px;
    height: 100px;
    background: #F7EC7D;
    position: absolute;
    border-radius: 0 0 50px 50px;
  }
  #a {
    top: 50px;
    left: 150px;
    transform: rotate(180deg);
  }
  #b {
    top: 150px;
    left: 50px;
  }
  #c {
    top: 150px;
    left: 250px;
  }
</style>

2. Using Margin/Padding

Div o, which stands for outer, serves as a wrapper here to cut off all of the space. This way we may avoid absolute positioning, thus remaining within a normal document flow. In this outer box, we style three divs to be inline-block (notice how all of them are glued together to avoid unwanted spaces). Finally, their positioning is achieved by using margins.

<div id="o">
  <div id="a"></div><div id="b"></div><div id="c"></div>
</div>
<style>
  body {
    margin: 0;
    background: #62306D;
  }
  #o {
    width: 300px;
    height: 200px;
    margin: 50px;
  }
  #o > div {
    width: 100px;
    height: 100px;
    background: #F7EC7D;
    display: inline-block;
  }
  #a {
    margin: 0 100px;
    border-radius: 50px 50px 0 0;
  }
  #b, #c {
    border-radius: 0 0 50px 50px;
  }
  #c {
    margin-left: 100px;
  }
</style>

There is another variation of the same solution where we do not have to create an outer box. Instead, we use the padding of the body element to restrict the content area. This way we achieve the same effect as in the above code without needing to create an extra div.

<div id="a"></div><div id="b"></div><div id="c"></div>
<style>
  body {
    margin: 0;
    padding: 50px;
    background: #62306D;
  }
  div {
    width: 100px;
    height: 100px;
    background: #F7EC7D;
    display: inline-block;
  }
  #a {
    margin: 0 100px;
    border-radius: 50px 50px 0 0;
  }
  #b, #c {
    border-radius: 0 0 50px 50px;
  }
  #c {
    margin-left: 100px;
  }
</style>

3. Pseudo Elements

Here we are using pseudo elements. You know, we have three figures and each element can have ::before and ::after, which makes exactly three. So, we only need one division, which we place with the help of margins. We give it its border-radius pointing upwards and the background color. It should also be inline-block and this style should be applicable for its pseudo elements as well.
Then we are using the cascading ability of CSS to overwrite the border-radius for the pseudo elements. It is worth noting, that content property needs to be set, even if only as an empty string.

<div></div>
<style>
  body {
    background: #62306D;
  }
  div, div::before, div::after {
    margin: 42px 142px;
    width: 100px;
    height: 100px;
    background: #F7EC7D;
    display: inline-block;
    border-radius: 50px 50px 0 0;
  }
  div::before, div::after {
    content: "";
    border-radius: 0 0 50px 50px;
    margin: 100px -100px;
  }
  div::after {
    margin: -200px 100px;
  }
</style>