The Road To Discovering That I'm Not A Sexist Pig

It's the Year of the Pig, and thus talking about sexist pigs today seems awfully apt.

We've heard of the brogrammer culture in the USA. The sexual propositions of those in power towards female coders. The chauvinistic remarks of guys who think some girls are "too pretty to code". The list goes on. Tech is rife with sexism in Silicon Valley, and as far removed as I am from that hotbed of tech innovation, there are few things that repulse me more in tech.

I've always thought of tech work as a meritocracy. Those who are good enough need to work, and those who aren't, need to work... on themselves. When I say "good enough", I don't mean purely in terms of technical knowledge, but also in ethics, communication skills and everything a professional should have, not just a tech professional. And that is why hiring practice based on gender, whether they discriminate against males (the Affirmative Action bullshit) or females (the more traditional kind of gender discrimination), or negative stereotypes of tech workers based on gender, annoy me. None of this has any place in tech. Tech is not a male thing or a female thing. Tech is about how much value you can bring to the table regardless of race, gender or whatever.

In fact, I'm so disturbed at the thought of being sexist, that at one time, I experienced a little BSOD of my own when I suspected that some negative thoughts I had about a female co-worker, were rooted in sexism. (I've written a little about her before in The Development Process - Are you Engine Grease or a Spanner? and Five Comparisons Between Contract and Permanent Roles.)

My thoughts about this co-worker

I felt that she was opinionated and bossy. There didn't seem to be any issue within the department that she didn't want to weigh in on. She didn't play well with the team and tried way too hard to prove she was better than us. As far as I was concerned, she didn't need to prove jackshit - if management had asked, I would have given my honest assessment that she was. That didn't mean I thought she was good. I was of the opinion that I sucked, and she happened to suck significantly less.

But you see, in this day and age, a man calling a woman "bossy" reflects badly on the man. The general narrative is, men who describe women as "bossy" are insecure and unable to cope with the challenge that strong and assertive women bring to their fragile egos. I agreed with that assessment, and still do. Therefore, I tried very hard not to even think of her as "bossy". God damn it, I was a tech and I should hold myself to higher standards of behavior. If someone was better than me, that was the end of the story and the gender of that person should not matter at all.

I am woman, hear me roar.

Once she got promoted, however, it soon became apparent that I wasn't the only one who thought she was a pain in the ass. She pretty much rubbed the other people in other departments the wrong way when she tried to impose regulations on workflow. Not that the idea was wrong, but some tact and delicacy is generally required when dealing with other human beings, especially human beings who don't answer to you.

Still, I thought, maybe these other guys who had a problem with her were sexist pigs. Not my problem either way, I was out of the company in a month, and good riddance!

Four years later....

I ended up working as a contractor in a large tech firm, posted as onsite vendor to a Government Statutory Board. Among my colleagues was this insufferable dude from India. (He has a cameo in one of my previous posts, My Year in Training and Assessment.) He kept acting like he was in charge, self-promoted constantly, threw little temper tantrums and his code fucking stank. All this was probably a lot of posturing to cover up some pretty heavy insecurity. I mean, if you feel the need to toot your own horn that frequently, you're probably paranoid that no one will notice you exist.

Blow that trumpet, bro.

Boy, did I detest working with this clown. But I wasn't here to make friends. I was here to work and by God I was going to work. Like a pro, I hid my feelings well, knuckled down and did my job.

Besides, I had the nagging feeling that this wasn't the first time I had encountered someone like that.

My epiphany

These two colleagues were starting to feel very similar. Both disagreeable and authoritative, both prone to fits of drama, both determined to assert themselves and prove how good they were. Except one was female and the other male. One Chinese, the other, Indian.

And it struck me that, if I could have the same negative feelings towards a man who exhibited the same traits as the woman, then I was quite definitely not a sexist. I had considered my former female colleague an overcompensating self-promoter with self-esteem issues not because I was sexist, but because that was precisely what she was. My feelings of revulsion were consistent when the data was applied on someone of another gender. Of course, there's the possibility that I am both a sexist and a racist... but at this moment I'm quite confident that I'm not. At least, not to the point that it would affect my judgement this significantly.

And if I had to choose between these two? I'd choose the former. Her code was actually decent. And no matter how much disdain I had for her politicking, she had least had a legit reason - there was promotion up for grabs, and all. The Indian dude had no such excuse because we were both contractors. No amount of politicking would have improved his position. He was not only obnoxious, but a fucking time-waster.

The stunning conclusion

Sometimes you gotta call a spade a spade. Being conscious of sexism and implicit bias is nice and all that, but if someone is objectionable, their gender is irrelevant. That's the lesson I learned from all this - to stop letting "wokeness" cloud my judgement.

Male you live in interesting times,
T___T

Web Tutorial: Hong Kong Anti-extradition Bill Protest Art

June 2019 has been one stressful week for Hong Kong. Their citizens took to the streets - at least a million of them, give or take - and carried out organized protests against a proposed Extradition Bill. At the heart of these protests was the fear that China was behind this and their civil rights were being stripped away slowly but surely.

It was an inspiring sight, seeing that ocean of determined Hongkongers, inflamed with patriotism, marching peacefully towards the Government district. Here in Singapore, opinion is divided on this one. Some think we could learn a thing or two from Hong Kong, fuck China and their autocratic bullshit. Some think the protesters are a bunch of feckless youths who have too little to do. I've got my doubts on this. Yeah, all two million or so of protesters decided one day that they had nothing better to do than take long crowded marches under the hot sun and brave tear gas, rubber bullets and beanbag rounds from the riot police? Seems legit.

Anyway, as to who I think is in the right here, I'm gonna need to be sparing with my opinion because Mrs TeochewThunder is from China and I really don't want to sleep on the couch any more than necessary.

Suffice to say, one of the things that really interests me about the Anti-extradition Protests, is the art. Or the lack thereof. During the 2014 Umbrella Movement, there was no shortage of creative imagery utilizing the symbol of yellow umbrellas. What about 2019? Very little. Perhaps it's true, the Hongkongers are really going dark with their Social Media accounts. Still, I managed to find this beauty.

It's a stylized petal of the Bauhinia blakeana flower which makes up the symbol on Hong Kong's flag. Within that petal, instead of a star, we have a chain and handcuff! Very creative.

But you know what else I was thinking when I saw this? I was thinking, shit, I have got to CSS this sucker. And that's why we're here today.

Let's get some HTML up!

<!DOCTYPE html>
<html>
    <head>
        <title>HK Anti-extradition Bill Symbol</title>

        <style>

        </style>
    </head>

    <body>

    </body>
</html>

We'll give all divs a blue border temporarily, for visibility. And start off with a div with the id symbol_container.

<!DOCTYPE html>
<html>
    <head>
        <title>HK Anti-extradition Bill Symbol</title>

        <style>
            div {outline: 0px solid #0000FF;}
        </style>
    </head>

    <body>
        <div id="symbol_container">

        </div>
    </body>
</html>

Here's some styling for it. We make it a deep red square, and place it in the middle of the screen using the margin property. The overflow property is set to hidden because stuff might get out of this box.

        <style>
            div {outline: 1px solid #0000FF;}

            #symbol_container
            {
                width: 600px;
                height: 600px;
                margin: 5% auto 0 auto;
                background-color: #AA0000;
                overflow: hidden;
            }
        </style>

Off to a good start!

The next thing we need to do is create the main shape of the white flower petal. To do that, we should first define a container for it. This is a div with a class of petalbody.

        <div id="symbol_container">
            <div class="petalbody">

            </div>
        </div>

Here's the styling for it. It's 400 by 400 pixels and set vertically center of symbol_container, but flush right.

            #symbol_container
            {
                width: 600px;
                height: 600px;
                margin: 5% auto 0 auto;
                background-color: #AA0000;
                overflow: hidden;
            }

            .petalbody
            {
                width: 400px;
                height: 400px;
                margin: 100px 0 0 auto;
            }

We need another two divs inside this one. Style them with petalbody_left and petalbody_right.

        <div id="symbol_container">
            <div class="petalbody">
                <div class="petalbody_left">

                </div>

                <div class="petalbody_right">

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

These divs both take up the full height of the parent, while taking up only half of the width. petalbody_left floats left while petalbody_right floats... well, right. petalbody_left has overflow set to hidden and petalbody_right to visible. You'll see why soon.

            .petalbody
            {
                width: 400px;
                height: 400px;
                margin: 100px 0 0 auto;
                /*-webkit-transform: rotate(15deg);   
                transform: rotate(15deg);*/
            }

            .petalbody_left
            {
                width: 200px;
                height: 400px;
                overflow: hidden;
                float: left;
            }

            .petalbody_right
            {
                width: 200px;
                height: 400px;
                overflow: visible;
                float: right;
            }

Here, you will see that the two divs take up exactly half of their parent each.

Let's start working on the div styled by petalbody_left. Insert another div, and style it using the CSS class whitepart. This is named because it's meant to be a white semicircle and will make up the main part of the petal.

                <div class="petalbody_left">
                    <div class="whitepart">

                    </div>
                </div>

Now style this. The background color is set to white. It's round, so the border-radius property is set to 50%. We'll give it the same height and width we gave petalbody.

            .petalbody_right
            {
                width: 200px;
                height: 400px;
                overflow: visible;
                float: right;
            }

            .whitepart
            {
                background-color: #FFFFFF;
                border-radius: 50%;
                width: 400px;
                height: 400px;
            }

Since the overflow property has been set to hidden for petalbody_left, what results is a white semicircle!

Now we work on this part. Three divs within this div, and style them using cutout_top, cutout_middle and cutout_bottom, respectively.

                <div class="petalbody_right">
                    <div class="cutout_top">

                    </div>

                    <div class="cutout_middle">

                    </div>

                    <div class="cutout_bottom">

                    </div>
                </div>

Now let's style these guys. Each of them have differing heights but the same widths.

            .whitepart
            {
                background-color: #FFFFFF;
                border-radius: 50%;
                width: 400px;
                height: 400px;
            }

            .cutout_top
            {
                width: 200px;
                height: 100px;
            }

            .cutout_middle
            {
                width: 200px;
                height: 150px;
            }

            .cutout_bottom
            {
                width: 200px;
                height: 150px;
            }

Stay with me here, things are about to get interesting!

Modify their margin-left properties.

            .cutout_top
            {
                width: 200px;
                height: 100px;
                margin-left: -20px;
            }

            .cutout_middle
            {
                width: 200px;
                height: 150px;
                margin-left: -25px;
            }

            .cutout_bottom
            {
                width: 200px;
                height: 150px;
                margin-left: -50px;
            }

Because the overflow property of the CSS class petalbody_right is set to visible, this is what we see.

Now let's add styling for the before pseudoselector  of cutout_top. Set the display property to block and content to an empty string. The width will be 40 pixels and height is the full height of its parent. Next, set float property to left. And let's set the background color to, hmmm, yellow?

            .cutout_top
            {
                width: 200px;
                height: 100px;
                margin-left: -20px;
            }

            .cutout_top:before
            {
                display: block;
                content: "";
                width: 40px;
                height: 100%;
                background-color: #FFFF00;
                float: left;
            }

            .cutout_middle
            {
                width: 200px;
                height: 150px;
                margin-left: -25px;
            }

There... we needed the width to be 40 pixels because its parent is offset 20 pixels left, and we need the middle of this yellow box to set flush on the flat side of the white semicircle.

Now what if it wasn't a rectangle, but round?

            .cutout_top:before
            {
                display: block;
                content: "";
                width: 40px;
                height: 100%;
                border-radius: 50%;
                background-color: #FFFF00;               
                float: left;
            }

Then we'd have a yellow oval. Trust me, we're getting there.

Let's do something similar for cutout_middle and cutout_bottom. Style their before pseudoselectors. The settings are the same as before, but the width will be double the left offset of their parents.

            .cutout_middle
            {
                width: 200px;
                height: 150px;
                margin-left: -25px;
            }

            .cutout_middle:before
            {
                display: block;
                content: "";
                width: 50px;
                height: 100%;
                border-radius: 50%;
                background-color: #FFFF00;
                float: left;
            }

            .cutout_bottom
            {
                width: 200px;
                height: 150px;
                margin-left: -50px;
            }

            .cutout_bottom:before
            {
                display: block;
                content: "";
                width: 100px;
                height: 100%;
                border-radius: 50%;
                background-color: #FFFF00;
                float: left;
            }

Now we have three yellow ovals!

But what if the top one was deep red, the middle was white and the bottom one was also deep red?

            .cutout_top
            {
                width: 200px;
                height: 100px;
                margin-left: -20px;
            }

            .cutout_top:before
            {
                display: block;
                content: "";
                width: 40px;
                height: 100%;
                border-radius: 50%;
                background-color: #AA0000;
                float: left;
            }

            .cutout_middle
            {
                width: 200px;
                height: 150px;
                margin-left: -25px;
            }

            .cutout_middle:before
            {
                display: block;
                content: "";
                width: 50px;
                height: 100%;
                border-radius: 50%;
                background-color: #FFFFFF;
                float: left;
            }

            .cutout_bottom
            {
                width: 200px;
                height: 150px;
                margin-left: -50px;
            }

            .cutout_bottom:before
            {
                display: block;
                content: "";
                width: 100px;
                height: 100%;
                border-radius: 50%;
                background-color: #AA0000;
                float: left;
            }

Oh damn, that looks like a flower petal taking shape!

Next up, the handcuff!

We'll do pretty much the same thing we did for petalbody_right. We'll be putting divs in petalbody_left. First up is a div styled using the CSS class handcuff.

                <div class="petalbody_left">
                    <div class="whitepart">
                        <div class="handcuff">

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

This is the style for handcuff. It takes up 50% of the width of its parent, and full height. And it's floated left. Since it pretty much occupies the space of the white semicircle, you won't see anything when you refresh. It's just a container for the divs we're about to add.

            .cutout_bottom:before
            {
                display: block;
                content: "";
                width: 100px;
                height: 100%;
                border-radius: 50%;
                background-color: #AA0000;
                float: left;
            }

            .handcuff
            {
                width: 50%;
                height: 100%;
                float: left;
            }

Inside this div, another div is to be inserted. It is styled using the CSS class cuff.

                        <div class="handcuff">
                            <div class="cuff">

                            </div>
                        </div>

cuff draws a small square. With an offset in pixels that I've specified here.

         
            .handcuff
            {
                width: 50%;
                height: 100%;
                float: left;
            }

            .cuff
            {
                width: 40px;
                height: 40px;   
                margin-top: 140px;
                margin-left: 55px;       
            }

See this? Good job.

Now let's use the before pseudoselector. We'll use it to draw a deep red ring 5 pixels thick. The circle will have a 30 pixel diameter. 30 pixels, plus 5 pixels on both sides, is exactly 40 pixels, and this ring should sit snugly in its parent without any offset required.

            .cuff
            {
                width: 40px;
                height: 40px;   
                margin-top: 140px;
                margin-left: 55px;       
            }

            .cuff:before
            {
                display: block;
                content: "";
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 5px solid #AA0000;           
            }

Our cuff is taking shape.

Now use the after pseudselector. Use it to draw a tiny yellow rectangle, and offset it almost flush to the right.

            .cuff:before
            {
                display: block;
                content: "";
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 5px solid #AA0000;           
            }

            .cuff:after
            {
                display: block;
                content: "";
                width: 5px;
                height: 20px;
                background-color: #FFFF00;
                margin-top: -15px;
                margin-left: 30px;   
            }

See this yellow rectangle? We're about to do things to it.

First, we rotate it counter clockwise...

            .cuff:after
            {
                display: block;
                content: "";
                width: 5px;
                height: 20px;
                background-color: #FFFF00;
                margin-top: -15px;
                margin-left: 30px;   
                -webkit-transform: rotate(-35deg);       
                transform: rotate(-35deg);   
            }

Getting there...

Then we turn it white!

            .cuff:after
            {
                display: block;
                content: "";
                width: 5px;
                height: 20px;
                background-color: #FFFFFF;
                margin-top: -15px;
                margin-left: 30px;   
                -webkit-transform: rotate(-35deg);       
                transform: rotate(-35deg);   
            }

So now we have something that resembles a cuff!

Add another div, and style it with the CSS class cufflink.

                        <div class="handcuff">
                            <div class="cuff">

                            </div>

                            <div class="cufflink">

                            </div>
                        </div>

This one sits directly below the cuff.

            .cuff:after
            {
                display: block;
                content: "";
                width: 5px;
                height: 20px;
                background-color: #FFFFFF;
                margin-top: -15px;
                margin-left: 30px;
                -webkit-transform: rotate(-35deg);       
                transform: rotate(-35deg);               
            }

            .cufflink
            {
                width: 150px;
                height: 20px;   
            }

Yep, this is what you should see.

Again with the before pseudoselector. Make a 20 by 20 pixel deep red square.

            .cufflink
            {
                width: 150px;
                height: 20px;       
            }

            .cufflink:before
            {
                display: block;
                content: "";
                width: 20px;
                height: 20px;
                background-color: #AA0000;   
            }

See that deep red square left of the div?

Let's position this. Right in the middle.

            .cufflink:before
            {
                display: block;
                content: "";
                width: 20px;
                height: 20px;
                background-color: #AA0000;   
                margin: 0 auto 0 auto;   
            }

Looking good, but it could be better.

Shift its parent upwards by 5 pixels.

            .cufflink
            {
                width: 150px;
                height: 20px;   
                margin-top: -5px;
            }

Viola!

Finally, the chain. Add one more div. Style it using chain.

                        <div class="handcuff">
                            <div class="cuff">

                            </div>

                            <div class="cufflink">

                            </div>

                            <div class="chain">

                            </div>
                        </div>

Here's the style for it. It's tall, offset like so, and has its overflow property set to visible, for a reason which will be clear soon.

            .cufflink:before
            {
                display: block;
                content: "";
                width: 20px;
                height: 20px;
                background-color: #AA0000;   
                margin: 0 auto 0 auto;   
            }

            .chain
            {
                width: 80px;
                height: 200px;
                margin-left: 90px;
                margin-top: -30px;   
                overflow: visible;       
            }

See this? Good.

You guessed right, we'll use the before psudoselector. Make a round shape. This round shape has a 5 pixel thick dashed deep red border. It's larger than the box, but because its parent's overflow property is visible, even though the size pushes it out of the box, we still see it!

            .chain
            {
                width: 80px;
                height: 200px;
                margin-left: 90px;
                margin-top: -30px;   
                overflow: visible;       
            }

            .chain:before
            {
                display: block;
                content: "";
                width: 100%;
                height: 230px;
                border-radius: 50%;
                border: 5px dashed #AA0000;   
            }

So yes, we get that dashed effect, but how do we get rid of the lines we don't need?

By specifying that only the left side of the round div has that border.

            .chain:before
            {
                display: block;
                content: "";
                width: 100%;
                height: 230px;
                border-radius: 50%;
                border-left: 5px dashed #AA0000;   
            }

OK, but now it tapers off at the top, which is ugly....

So specify the same for the top border as well.

            .chain:before
            {
                display: block;
                content: "";
                width: 100%;
                height: 230px;
                border-radius: 50%;
                border-left: 5px dashed #AA0000;
                border-top: 5px dashed #AA0000;
            }

I know, this introduces a new problem, right? No problem at all.

Turn it transparent!!

            .chain:before
            {
                display: block;
                content: "";
                width: 100%;
                height: 230px;
                border-radius: 50%;
                border-left: 5px dashed #AA0000;
                border-top: 5px dashed transparent;
            }

Problem solved.

Now we just need to rotate it like so...

            .chain:before
            {
                display: block;
                content: "";
                width: 100%;
                height: 230px;
                border-radius: 50%;
                border-left: 5px dashed #AA0000;
                border-top: 5px dashed transparent;
                -webkit-transform: rotate(-25deg);       
                transform: rotate(-25deg);       
            }

Beautiful, isn't it? It's about to get even more awesome.

Now get rid of all the blue lines.

div {outline: 0px solid #0000FF;}

Nice! One last thing to do.

Rotate the whole damn thing clockwise by 15 degrees.

            .petalbody
            {
                width: 400px;
                height: 400px;
                margin: 100px 0 0 auto;
                -webkit-transform: rotate(15deg);   
                transform: rotate(15deg);
            }

Well, here it is! I know it's not pixel-perfect, but this is a good base for more adjustments till we get it to a point where it is good enough.

Can you hear the people sing?

Thankfully, not from where I am. But here's wishing Hong Kong all the best whatever happens.

Riotous regards,
T___T

Spot The Bug: A Login Disaster

The bugs are back, and so is Spot The Bug. Thanks for joining me for yet more bug-hunting goodness as we explore just how big of an idiot I can be sometimes.

Coder: 1 - Bugs: 0

This one appeared when I was writing a proof-of-concept for a login screen in PHP that would have, wait for it, hard-coded accounts. Why hard-coded? Well, it was just a throwaway POC and I really didn't want to go through the trouble of setting up a database for it because that wasn't the point of the POC.

What was the point of the POC, then? The point was, well... you know what? That isn't the point of today's bug-hunting session either. The point is that a bug appeared. And as bugs went, that was pretty elementary.

I had a HTML interface that was basically a login screen....

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>POC Login</title>
    </head>

    <body>
        <form action="login.php" method="post">
            <label for="id">ID: <input name="id" id="id"> </label>
            <br />
            <label for="password">Password: <input name="password" id="password" type="password"> </label>
            <br />
            <button>Login</button>
        </form>
    </body>
</html>

And yes, it was ugly as sin. Kiss my ass.

...and some PHP code that would process the form. Note that this is not the proper way a login should be handled, bug or no bug.

login.php

<?php
$id = $_POST["id"];
$password = $_POST["password"];

$users =
[
    "test1" => ["password" => "password", "role" => "user"],
    "test2" => ["password" => "password", "role" => "user"],
    "test3" => ["password" => "password", "role" => "user"],
    "adm1" => ["password" => "password", "role" => "admin"],
    "adm2" => ["password" => "password", "role" => "admin"]
];

if (isPasswordMatch($id, $password, $users))
{
    echo "Welcome, " . $id;
}
else
{
    echo "Your password did not match.";
}

function isPasswordMatch($id, $password, $users)
{
    if (array_key_exists($id, $users))
    {   
        return $users[$id]["password"] = $password;
    }
    return false;
}
?>

What went wrong

Well, I had five user accounts in there. Upon logging in successfully, the code was supposed to check if the submitted id/password combination was valid.

Unfortunately, it appears that no matter what password I entered, the screen would still welcome the user! Let's try with password "xyz"...

Why it went wrong

This one was relatively easy to track down, least of all because a coder with all my years of experience simply has no business making a mistake like this. It was in the isPasswordMatch() function.

Look at the return statement, in particular. There's only a single "=" operator. That basically meant that the function would always return true.

index.html

    if (array_key_exists($id, $users))
    {   
        return $users[$id]["password"] = $password;
    }

How I fixed it

Yes, that's all it took. An extra "=" operator.

index.html

    if (array_key_exists($id, $users))
    {   
        return $users[$id]["password"] == $password;
    }

Now, once I enter any string other than "password", which is the password for all the hard-coded accounts (another bad practice), the script responds appropriately!

Conclusion

This one is basic. When testing for equality or equivalence in PHP (or similar languages), use "==". When trying to assign value, use "=". Those are two different operations altogether.

That said, it's still a sucky way to handle logins, so don't do it. But the bug that resulted from it could happen anywhere a "==" operator is required.

Not all bugs are made equal,
T___T