Showing posts with label Ukraine. Show all posts
Showing posts with label Ukraine. Show all posts

Sunday, 14 September 2025

The Silencing of Charlie Kirk, and what this means for Social Media

The term "cancelled" has, in recent years, been taken to mean the same thing as being deplatformed, or demonetized. To remove someone's ability to reach larger audiences. To have someone fired from their jobs.

It took on new horrifying meaning this week when Charlie Kirk was murdered by an assassin's bullet in the middle of a public appearance at Utah Valley University in the USA. Kirk was a Right-wing activist who espoused ideals such as Pro-life, the Right to Bear Arms (the irony, huh?) and other typical Right-wing talking points.

Shot through
the neck.

I recognized Kirk from the news, because this guy had occasionally shown up on my YouTube feed, debating some hopelessly outmatched student or other. I never lingered overlong on those clips, simply because they just weren't very interesting. To be fair, it wasn't him, it was me. On YouTube, I have a below-average attention span unless it's tech-related.

Which in turn, begs the question: why am I even talking about this? The death of a Right-wing activist, while significant on a human level, is hardly a tech matter. On the other hand, I have spoken before about the bizarre Left-versus-Right culture wars in the USA, and the way it's played out on Social Media. I have talked before about how troubling our online discourse has become, even as I acknowledge that it's nowhere as frightening as that of the USA. And human matters are relevant in tech. Who do you think uses tech, robots?

In truth, when I wrote about the Culture Wars two months back, I was really hoping this would be the last time, at least for a bit. No such luck; the death of Charlie Kirk is pretty compelling stuff.

About Charlie Kirk

This entire episode was a tragedy, though not specifically because it was Charlie Kirk who died. According to some of the eulogies I've seen online, Kirk was quite the guy among his peers; and on the other side of the political aisle, a racist, misogynist, fascist and transphobe, among other fancy labels.

You know, I don't think any of that matters. Good guy or bad guy, Charles James Kirk was at least someone's son, someone's husband, and someone's dad. Two kids will grow up not knowing what their father was like except through those lame-ass YouTube videos and online articles, both gushing and brutal. I'm not going to sit here and act like Kirk and I were best pals or I was his biggest fan. The truth is, to me, he was just some rando on the internet whose opinions I sometimes agreed with and sometimes didn't. And he could come off as smug and condescending.

The thing is, being smug and condescending isn't grounds for public execution. Remember, Charlie Kirk was an activist who apparently ran his mouth a lot. And like most of the human race, sometimes he was prone to saying stupid shit. That's not a crime. It wasn't like he was a child molester or a serial killer. Or a Justin Bieber fan. If having an opinion and being a dick about it was reason enough for death, I know of more than a few people who should be joining Kirk in his six-foot grave. And yes, I include myself in that assessment.

If you've ever said stupid
shit, jump in here.

I've seen people use Kirk's position on the Second Amendment as justification to celebrate his death.
I think it's worth it. I think it's worth to have a cost of, unfortunately, some gun deaths every single year so that we can have the Second Amendment to protect our other God-given rights. That is a prudent deal. It is rational.


Those voices are saying that Kirk made the above abhorrent statement, and as a result we shouldn't feel too bad about him dying from a bullet to the neck. Our own Professor Donald Low literally said "Karma's a bitch" on his Facebook post. 

To be honest, that's probably one of the stupidest excuses ever. Look, you can feel morally superior to Kirk if you want. But you can't declare yourself morally superior to him and then in the same breath lower yourself to his level to justify his death. This defies all logic. Stuff like this only reinforces my deeply-held belief that Social Media is full of raving idiots acting all intellectual.

Cancel Culture

People are shocked. Goodness knows why. Maybe people are shocked because Kirk wasn't holding the front line in Ukraine, where getting shot is kind of expected. He was at an educational institute in peacetime. In one moment, Charlie Kirk went from passionate public orator to bloodied corpse. That's probably the most extreme form of Cancel Culture. After all, you can't get any more cancelled than dead, can you?

In the grand scheme of things, though, was this really that unexpected? I would argue that the shooting was merely the latest in a long time of steadily escalating aggression towards people who espouse unpopular views. Except that before this, instead of simply ending their lives, we were content with merely ruining theirs.

Anyone who's ever tried to get someone else cancelled. Fired. Doxxed. Called the cops on them. All because they said something we didn't like. Anyone who's ever engaged in behavior like this, or even just cheered while it happened, has contributed in some small way to the state of affairs today. Because all that provided the stepping stones of acceptable behavior.

Hello, Police? Someone hurt
my feelings on Facebook.

Come on, we had to expect that eventually, the approval of ruining someone's life or doling out of physical violence would lead to this. It was always par for the course. Once you say that it's OK to ruin someone's life because they said something you considered offensive, you make room for that next escalation.

Singapore herself isn't entirely immune to violence of this sort, though thankfully so far none of it has been fatal. Do people still remember Amos Yee? He ran his mouth a whole bunch, and famously got slapped by an outraged citizen. Kirsten Han, an outspoken activist for a whole hosts of causes I can't begin to keep track of, got death threats.

I personally consider Amos Yee a loud and annoying housefly, and Kirsten Han a bit of a wanker, but I condone neither the violence nor the threats. I can't. I like to talk shit on the internet, and don't particularly want to be shot by some putz with a gun. Not that I think I'm next in line. Plenty of people far more famous than me. If you're going to shoot someone at all, you might as well go big, eh? Still, the principle stands. All of us should be able to say what we want to say without the threat of violence hanging over our heads.

Speaking of Cancel Culture, I've seen posts online celebrating the death of Kirk, followed by threats from others to report these posts and have these users outed and punished. Just a lot of ugliness all round.  Has the USA finally stopped pretending that they give a damn about Freedom of Speech?

What's next?

Earlier, I said that this was a tragedy, and now I'm about to elaborate on why. It's not simply that Charlie Kirk was killed. Let's be real, people die every day. This isn't more or less tragic just because it's Kirk who bought the farm.

However, this particular death has stoked what looks like a new escalation in the Culture Wars. It's now no longer just being fought on Social Media. People on the Right are riled up over the murder of one of their own, and people on the Left are afraid of some nutter retaliating. 

What if this was always the plan?

Donald Trump declared Leftist extremists to be responsible for Kirk's death. But this wasn't some pissed off nutjob losing his temper and simply letting loose with a gun. This looked like a carefully planned op with a sniper.

This was planned.

Kirk has been silenced, but perhaps that wasn't the main objective. Perhaps the entire point was to stoke a Civil War. Who really wins in this scenario?

Come on, pretty sure I'm not the only one thinking this. Anyone who isn't dramatically raising their fist to the sky and declaring we will not be silenced or explaining why the world is a better place without Charlie Kirk, watching all this from a distance, is wondering if there's some other motive behind this. If you're not thinking this, you're probably too close to the action. Or you simply belong in a less complicated, less nuanced world.

On the other hand, regardless of the actual motivation behind the killing, one thing remains unchanged. Kirk's murder has opened the floodgates to what was previously unthinkable.

Public discourse is no longer safe. The perception is that Kirk was murdered for his views. This should make anyone with an opinion that they have ever shared, exceedingly nervous. Especially if that opinion was unpopular and exists somewhere on the internet.

In a world filled with AI and deepfakes, where misinformation is more readily available than information, the danger grows exponentially. Imagine a world where one can be killed for airing an unpopular opinion, and where people could be tricked into believing one aired an unpopular opinion. Do the math. The conclusions are chilling.

Finally...

People say America is the Land of the Free, and constantly compare Singapore's perceived lack of freedoms against the USA's. Land of the Free? Free what, exactly? Free Charlie Kirk's soul from his mortal shell?

I'm glad I live in Singapore. Our forefathers realized early on that with excessive freedom, we would either rise to great heights or sink to our basest instincts. As a young nation with no natural resources, no land and not that much manpower, we simply could not afford the risk. Thus, our laws are strict, and as a result, what happened to Charlie Kirk is unlikely to happen here.

If this is the result of America's much vaunted freedoms, she can keep it.

Talk about a loaded situation!
T___T

Saturday, 25 May 2024

Googlers Fired For Protesting Project Nimbus

Google is in the news again for firing people, and this time it's a little different. Just last month, Google dismissed 50 staff members for being involved in protests against Project Nimbus - Amazon and Google's cloud computing services deal with the nation of Israel. 

For those who've been living under a rock, Israel and Palestine are at it again. The how and when are going to need more time than you have to read this blogpost, so let's move on. Suffice to say, the concern is that Project Nimbus will have military applications, even if this is not the expressed intent of Google.

Mixed feelings about the Googlers

I'll begin by saying that yes, I agree with CEO Sundar Pichai, politics should be kept out of the workplace. If you don't like what your company is doing and can't square it with your conscience, just leave. Don't be a drama queen about it. Especially, don't use the time that the company is paying you for, to work against the company itself. Amazon employees protested Amazon's involvement as well, but at least that was only in the form of a signed petition

On the other hand, Project Nimbus sounds all kinds of dangerous. AI to profile people in Gaza? Possible military application? Huge potential for abuse. I don't blame the Googlers for not wanting any part of it. That goes double for if these Googlers are Muslim, or Palestinian. Seriously, why would Google even think it would be OK for a Muslim to aid Israel? There's only so far you can push the concept of "professional obligation".

An ominous cloud.

All that said, while their former staff might have been behaving in a manner that was less than professional, there's this part of me that thinks Google absolutely asked for it.

All these years, Google has been painting itself as this ultra-progressive place where their work shapes the world. They hired young idealistic types with self-righteous mantras such as "Don't be Evil" and "Do The Right Thing". The very kind of people who would be expected to dig their heels in if Google strayed from their perceived path of not being evil.

And now they object to this behavior? Come on, that's bullshit. Google made that bed, and now they get to lie in it.

About this whole Israel-Palestine thing...

I've had more than one person telling me that this Israel-Palestine issue should not be characterized as a "conflict" or a "war", and that doing so is disingenuous and downplays the fact that Israel is committing "genocide". OK, let's say that this is true. Let's say that the level of fuckery going on in that part of the world is off the scale.

But the Russia-Ukraine war is still going on. Pretty sure that hasn't been settled yet. People are still dying.

There's also whatever is allegedly going on in Xinjiang, China. Western media tells us it's a genocide, though at this point I trust Western media about as much as I trust China's. But again, let's assume it's true.

And Myanmar. After that coup back in 2021, the injustices are still happening, aren't they? Myanmar hasn't been somehow liberated while we weren't looking.

War is everywhere.

My question is; why do these people talk like the Israel-Palestine thing should matter to me the most? I get that if someone is Muslim or Jewish, without question, this should matter to them. And even if they're not Muslim or Jewish, they should be able to care about this issue as much as they wish.

But why me? Why do people insist that I care about this over everything else that's happening?

Human Rights violations? It's the humane thing to do? Children are dying? Shit, one could make the same argument about Russia-Ukraine, or Xinjiang, or Myanmar. I realize that this sounds horribly cold, but what makes Israel-Palestine special? Or is this just a case of "I care because I'm a good person, and if you were a good person, you'd care too"?

And if the answer is, no, I don't have to choose, I should care about all this equally? Sorry guys, I don't have the kind of bandwidth required to study the history of all these conflicts. I actually have a job, unlike those former Googlers (low blow, couldn't resist, heh heh) and shit I need to handle. At some point, we all need to choose what to spend our time and energy on. Yes, this sounds like a cop-out, but that doesn't make it any less true.

If they want people to prioritize this, a compelling reason is needed. And no, "be on the right side of history" (whatever that dumb shit even means) does not count. You guys realize that there is no "right" side of history, right? No matter what you do, or don't do, a hundred years from now, some snot-nosed kid is going to read a history book and judge you for it. The same way youngsters are now judging the likes of Abraham Lincoln, Lee Kuan Yew, and so on.

Conclusion

No two ways about it - in this story, everyone's an asshole.

Google, not for their business dealings with Israel. Project Nimbus is pretty disturbing, yes, but they're a company and they don't owe anyone an explanation as long as it's legal. But for hiring woke and passionate people who will absolutely put their passion over common sense, almost encouraging them to act that way, and then having the unmitigated gall to take exception when they inevitably do so? Total dick move.

The people who got fired, also did their best to make it happen. Shit, how did they think it was going to go down? Did they think Google was going to cave in to the pressure and beg for forgiveness? Google's been laying people off; they were probably grateful for the excuse.

No silver lining in this cloud!
T___T

Monday, 6 March 2023

What we think we deserve, does not matter

There is one word that has been bothering me in recent years. It is the word "deserve". It is usually used in the context of what people should have, as opposed to what they do have.

And that is problematic.

What people think they deserve, varies from person to person. Do you think you deserve to be paid more than you are currently? Perhaps, but your employer is almost certainly going to disagree. Who's right? Who has the authority to decide? Is there an objective measure to determine exactly what each person deserves?

Short answer: no, there isn't. The world is not fair, nor was it ever supposed to be. Put on your big boy pants and deal with it.

You may be legally entitled to something. That's an entirely different kettle of fish from saying you deserve something. Saying "x deserves y" carries connotations of morality, and as we all know, morality is subjective. Whose moral scale do we use? Mine? Yours? The Dalai Lama's? The Pope's? We have to define those things before any of these "deserving" statements would even begin to make sense.

Who decides what
you deserve?


So, who gets to judge?

Examples

Another problem I have with the word "deserve" being used, is that there's almost always an element of emotionality involved.

"I deserve better because I'm a good person."


This is a useless statement. What's "better"? What's "good"? None of these are measurable. And thus, no steps are actionable.

I've been good.

Also, what does being "good" have anything to do with deserving something? Saying you deserve something implies that it should be handed to you without any action on your part. And that is a denial of reality.

"Tell me why you deserve to get paid this much."


This question sometimes appears during job interviews, and has the effect of making me eye-roll really hard.

Oh FFS. If you just want me to sell myself to you, just come right out and say it. Fact is, no one "deserves" a high salary, and to claim otherwise is ridiculous. How much employers pay me is pretty much dependent on what they can afford to pay, what they are willing to pay and (let's just be real here) what they can get away with without getting in trouble with the law. The rest is just fluff.

"You deserve to be loved for who you are."


Self-proclaimed life coaches and their ilk seem to use this constantly. It's a mollycoddling refrain that says it doesn't matter how flawed your character is, you deserve to be loved like everyone else. Nobody died and made me God, so I'm not going to judge that statement. But I am absolutely going to judge the fuck out of what that statement implies.

This statement, intentionally or otherwise, implies that you are perfectly flawed just like everyone else, and discourages people from working on themselves. Why would they? If I decide that I am the way I am and anyone who chooses me is just going to have to live with it, what's there to work on? Sure, I still deserve to be loved... but this severely limits my options. That is the reality.

"People deserve to live, too."


This is usually some self-righteous rubbish from people who need some kind of external validation from the people listening to them. I really don't have time for that.

I usually hear this in the context of the ongoing Russia-Ukraine war, and that level of moral posturing is nauseating. Should people have to suffer the hardship of war? No one is arguing that they should. It is, however, an unfortunate fact that there is a war going on at this moment and that statistically, there are casualties in war. Saying that "people deserve to live, too" is useless self-serving rhetoric that does nothing for anyone. Like, does anyone on this planet not understand that people deserve to live? How is this helpful?

Actions instead of words

Life is not about what you deserve and don't deserve. It's about what you can and can't get. Anyone who tells you different, is probably trying to sell you something.

What people eventually get, tends to be a function of what they can get as opposed to what they deserve. Focusing on what is possible is more productive than focusing on what is desired.

Foreign software developers
in Singapore.

Are you in an environment where your desired outcomes aren't possible? Go elsewhere. Why else do you think foreign software developers ply their trade in Singapore? Because they love being shit on by locals?

Is there a surfeit of people who would love what you are? Look in the proverbial mirror and try to work your issues out. The onus is on you.

Do your skills have market value? If not, get new skills. For example, I could be a QBasic guru, but if there's a limited market for antiquated programming language, I'm not going to get very far. It is what it is.

Concerned about war? Maybe send some money to Ukraine (or Russia, if that's how you wanna roll) and spend less time grandstanding on Social Media. The money is infinitely more practical than your thoughts and prayers.

Last words and just desserts

The question is not "do I deserve this?"; rather, the question should be "can I get this, and how?" Once we fix that first step, the rest naturally falls into place.

Deservedly,
T___T

Thursday, 3 March 2022

Web Tutorial: Ukraine Protest Art Generator

By now, the entire world will have heard of the catastrophic news regarding Russia's invasion of Ukraine. And regardless of your personal opinion on the actors in the world political stage, most of us would agree on one thing - neither the civilians of Ukraine, or Russia for that matter, deserve this level of fuckery.

So in solidarity, I searched out some protest art on the Clubhouse app, and as it turns out, most of it is a variation on the theme of Ukraine's blue-and-yellow flag.


This gave me the idea to create a simple graphic generator to create Ukraine invasion protest art!

Here's some HTML, and in it we will give the divs a red outline so we can see what we're doing. We also set some font styles. And before I forget, we also want to declare the function generateGraphic(), which has a parameter, section.
<!DOCTYPE html>
<html>
    <head>
        <title>#IStandWithUkraine</title>

        <style>
            div {outline: 1px solid red;}

            body
            {
                font-family: arial;
                font-size: 10px;
                line-height: 3em;
            }        
        </style>

        <script>
            function generateGraphic(section)
            {

            }
        </script>
    </head>
 
    <body>

    </body>
</html>


Now we set up two divs - one for the image and one for the dashboard. Their CSS styles will be named accordingly.
<body>
  <div class="image">

  </div>

  <div class="dashboard">

  </div>

</body>


Here's the styling. As you can see, the divs take up roughly half of the screen width, and they are floated to opposite sides.
body
{
  font-family: arial;
  font-size: 10px;
  line-height: 3em;
}        

.image
{
  width: 45%;
  height: 600px;
  float: left;
}

.dashboard
{
  width: 45%;
  float: right;
}


Simple so far. Only the div styled using image is a box, and that's because we specified the height.




Inside that div, we add two more divs, styling them with top and bottom. And in each of these divs, there is yet another div. They will have the id message1 and message2 respectively.
<div class="image">
    <div class="top">
        <div id="message1"></div>
    </div>

    <div class="bottom">
        <div id="message2"></div>
    </div>
</div>


Now, top and bottom will both take up full width, with 300 pixels height. Text will be aligned center. As with the Ukrainian flag, the top half has a blue background and the bottom half has a yellow background. This is reversed with the color property, and a lowered opacity.
.image
{
    width: 45%;
    height: 600px;
    float: left;
}

.top
{
    width: 100%;
    height: 300px;
    text-align: center;
    color: rgba(255, 255, 0, 0.8);
    background-color: rgba(0, 0, 200, 1);
}

.bottom
{
    width: 100%;
    height: 300px;
    text-align: center;
    color: rgba(0, 0, 200, 0.8);
    background-color: rgba(255, 255, 0, 1);
}


.dashboard
{
    width: 45%;
    float: right;
}


Oh there it is, right there.




Now let's concentrate on the dashboard. We want a fieldset here. Let's create a legend for it, with the text "1st Message".
<div class="dashboard">
    <fieldset>
        <legend>1st Message</legend>
    </fieldset>        
</div>


Here's some styling for the fieldset and legend tags. It's not necessary, but things will look nicer.
.dashboard
{
    width: 45%;
    float: right;
}

fieldset
{
    width: 90%;
}

legend
{
    font-size: 2em;
    font-weight: bold;
}


This is how the fieldset looks like.




Let's add a label and textbox. The id will be text1, we add a value and a placeholder attribute, then specify that if the value changes, the generateGraphic() function will be run with "1" passed in.
<fieldset>
    <legend>1st Message</legend>
    <label for="text1">Message: </label>
    <input id="text1" value="I stand with" onchange="generateGraphic(1)" placeholder="Top Message" />

</fieldset>


Here, we just set a standard width for labels. Again, not necessary, but it will be neater.
fieldset
{
    width: 90%;
}

legend
{
    font-size: 2em;
    font-weight: bold;
}

label
{
    display: inline-block;
    width: 10em;
}


Going good!




Next, we add a break and put in a drop-down list, with an id of font1. Again, we make sure that if the value changes, the generateGraphic() function will be run with "1" passed in.
<fieldset>
    <legend>1st Message</legend>
    <label for="text1">Message: </label>
    <input id="text1" value="I stand with" onchange="generateGraphic(1)" placeholder="Top Message" />
    <br />
    <label for="font1">Font: </label>
    <select id="font1" onchange="generateGraphic(1)">

    </select>

</fieldset>


Add some options here. You can add more options if you feel that the list is really limited, but these are just a few.
<fieldset>
    <legend>1st Message</legend>
    <label for="text1">Message: </label>
    <input id="text1" value="I stand with" onchange="generateGraphic(1)" placeholder="Top Message" />
    <br />
    <label for="font1">Font: </label>
    <select id="font1" onchange="generateGraphic(1)">
        <option value="arial">arial</option>
        <option value="georgia">georgia</option>
        <option value="impact">impact</option>
        <option value="verdana">verdana</option>

    </select>
</fieldset>


Here's the drop-down list!




We'll create a range input next. The id is size1. You can fill in whatever values you want for the value, min and max property, but these are what I recommend. However, the step property should be 1.
<fieldset>
    <legend>1st Message</legend>
    <label for="text1">Message: </label>
    <input id="text1" value="I stand with" onchange="generateGraphic(1)" placeholder="Top Message" />
    <br />
    <label for="font1">Font: </label>
    <select id="font1" onchange="generateGraphic(1)">
        <option value="arial">arial</option>
        <option value="georgia">georgia</option>
        <option value="impact">impact</option>
        <option value="verdana">verdana</option>
    </select>
    <br />
    <label for="size1">Size: </label>
    <input type="range" id="size1" value="28" min="8" max="35" step="1" onchange="generateGraphic(1)" /> px

</fieldset>


So far so good...




Here, we add two checkboxes, bold1 and italic1. We follow the same model for the rest of the elements we've created so far.
<fieldset>
    <legend>1st Message</legend>
    <label for="text1">Message: </label>
    <input id="text1" value="I stand with" onchange="generateGraphic(1)" placeholder="Top Message" />
    <br />
    <label for="font1">Font: </label>
    <select id="font1" onchange="generateGraphic(1)">
        <option value="arial">arial</option>
        <option value="georgia">georgia</option>
        <option value="impact">impact</option>
        <option value="verdana">verdana</option>
    </select>
    <br />
    <label for="size1">Size: </label>
    <input type="range" id="size1" value="28" min="8" max="35" step="1" onchange="generateGraphic(1)" /> px
    <br />
    <label for="bold1"><input type="checkbox" id="bold1" onchange="generateGraphic(1)" /> Bold</label>
    <br />
    <label for="italic1"><input type="checkbox" id="italic1" onchange="generateGraphic(1)" /> italic</label>

</fieldset>


Beautiful!




Copy the entire fieldset and paste it.
<div class="dashboard">
    <fieldset>
        <legend>1st Message</legend>
        <label for="text1">Message: </label>
        <input id="text1" value="I stand with" onchange="generateGraphic(1)" placeholder="Top Message" />
        <br />
        <label for="font1">Font: </label>
        <select id="font1" onchange="generateGraphic(1)">
            <option value="arial">arial</option>
            <option value="georgia">georgia</option>
            <option value="impact">impact</option>
            <option value="verdana">verdana</option>
        </select>
        <br />
        <label for="size1">Size: </label>
        <input type="range" id="size1" value="28" min="8" max="35" step="1" onchange="generateGraphic(1)" /> px
        <br />
        <label for="bold1"><input type="checkbox" id="bold1" onchange="generateGraphic(1)" /> Bold</label>
        <br />
        <label for="italic1"><input type="checkbox" id="italic1" onchange="generateGraphic(1)" /> italic</label>
    </fieldset>

    <fieldset>
        <legend>1st Message</legend>
        <label for="text1">Message: </label>
        <input id="text1" value="I stand with" onchange="generateGraphic(1)" placeholder="Top Message" />
        <br />
        <label for="font1">Font: </label>
        <select id="font1" onchange="generateGraphic(1)">
            <option value="arial">arial</option>
            <option value="georgia">georgia</option>
            <option value="impact">impact</option>
            <option value="verdana">verdana</option>
        </select>
        <br />
        <label for="size1">Size: </label>
        <input type="range" id="size1" value="28" min="8" max="35" step="1" onchange="generateGraphic(1)" /> px
        <br />
        <label for="bold1"><input type="checkbox" id="bold1" onchange="generateGraphic(1)" /> Bold</label>
        <br />
        <label for="italic1"><input type="checkbox" id="italic1" onchange="generateGraphic(1)" /> italic</label>
    </fieldset>

</div>


Make these changes. We want this fieldset to be for the second message, so change the ids and the argument passed into the function call for generateGraphic().
<div class="dashboard">
    <fieldset>
        <legend>1st Message</legend>
        <label for="text1">Message: </label>
        <input id="text1" value="I stand with" onchange="generateGraphic(1)" placeholder="Top Message" />
        <br />
        <label for="font1">Font: </label>
        <select id="font1" onchange="generateGraphic(1)">
            <option value="arial">arial</option>
            <option value="georgia">georgia</option>
            <option value="impact">impact</option>
            <option value="verdana">verdana</option>
        </select>
        <br />
        <label for="size1">Size: </label>
        <input type="range" id="size1" value="28" min="8" max="35" step="1" onchange="generateGraphic(1)" /> px
        <br />
        <label for="bold1"><input type="checkbox" id="bold1" onchange="generateGraphic(1)" /> Bold</label>
        <br />
        <label for="italic1"><input type="checkbox" id="italic1" onchange="generateGraphic(1)" /> italic</label>
    </fieldset>

    <fieldset>
        <legend>2nd Message</legend>
        <label for="text2">Message: </label>
        <input id="text2" value="Ukraine" onchange="generateGraphic(2)" placeholder="Bottom Message" />
        <br />
        <label for="font2">Font: </label>
        <select id="font2" onchange="generateGraphic(2)">
            <option value="arial">arial</option>
            <option value="georgia">georgia</option>
            <option value="impact">impact</option>
            <option value="verdana">verdana</option>
        </select>
        <br />
        <label for="size2">Size: </label>
        <input type="range" id="size2" value="28" min="8" max="35" step="1" onchange="generateGraphic(2)" /> px
        <br />
        <label for="bold2"><input type="checkbox" id="bold2" onchange="generateGraphic(2)" /> Bold</label>
        <br />
        <label for="italic2"><input type="checkbox" id="italic2" onchange="generateGraphic(2)" /> italic</label>
    </fieldset>             
</div>


And there's your second fieldset!




Now let's work on the generateGraphic() function. We first declare message by using section along with "message" to get the div. Same for text, font, size, bold and italic.
function generateGraphic(section)
{
    var message = document.getElementById("message" + section);
    var text = document.getElementById("text" + section);
    var font = document.getElementById("font" + section);
    var size = document.getElementById("size" + section);
    var bold = document.getElementById("bold" + section);
    var italic = document.getElementById("italic" + section);

}


Next, we populate message with the value of text. We set the font and font size using the values of font and size respectively. Then we set bolding and italicizing using the checked properties of bold and italic respectively.
function generateGraphic(section)
{
    var message = document.getElementById("message" + section);
    var text = document.getElementById("text" + section);
    var font = document.getElementById("font" + section);
    var size = document.getElementById("size" + section);
    var bold = document.getElementById("bold" + section);
    var italic = document.getElementById("italic" + section);

    message.innerHTML = text.value;
    message.style.fontFamily = font.value;
    message.style.fontSize = size.value + "px";
    message.style.fontWeight = (bold.checked ? "bold" : "normal");
    message.style.fontStyle = (italic.checked ? "italic" : "normal");

}


And after that, let's make sure generateGraphic() is run twice upon page load, the first time with "1" passed in, and the second time with "2" passed in.
<body onload="generateGraphic(1); generateGraphic(2);">


Now reload. You see that the messages now appear in the blue and yellow halves of the graphic.




Play with the controls by changing the text, adjusting sizes and checking or unchecking the boxes!




But we want the top half text to be next to the line. So add this to the CSS. The padding-top property should take care of this.
.bottom
{
    width: 100%;
    height: 300px;
    text-align: center;
    color: rgba(0, 0, 200, 0.8);
    background-color: rgba(255, 255, 0, 1);
}

#message1
{
    padding-top: 270px;
}


.dashboard
{
    width: 45%;
    float: right;
}


Yes!




And just remove the red outline.
div {outline: 0px solid red;}


Here we go.




And all of this means jackshit unless we can print the result. So add this media class to the CSS. When printing, dashboard will be invisible and image will take up full width.
label
{
    display: inline-block;
    width: 10em;
}

@media print
{
    .dashboard
    {
        display: none;
    }

    .image
    {
        width: 100%;
    }
}


Try to print it!




Standing with Ukraine

Politics is a dirty business, but it's the people who suffer most. So hey, if you've got enough to spare, send some money over to help save lives!

#StandWithUkraine,
T___T