DEV Community: Calin Baenen

I Got A Perfect (100%) Score in My College-Level Python Course!

Calin Baenen — Mon, 23 Dec 2024 14:45:31 +0000

Guess which furry just finished their college-level Python class with a perfect 100% score!

... That's right!
It's me! ✌️

CSS Grid-Layout Sucks, And Here's Why

Calin Baenen — Sun, 11 Aug 2024 22:27:31 +0000

So, recently, I've been playing around with CSS grid-layout, just to see how it is... and it's a nightmare to work with.

What is CSS `grid`-layout?

Before talking about why CSS grid-layout sucks, I want to briefly summarize what CSS grid-layout is and why it exists.

CSS grid-layout was originally proposed by Phil Cupp in 2011, since it can shorten code, reduce the amount of parent-child relationships, and make "more flexible" grids.

Why does CSS `grid`-layout suck?

In CSS, grids don't work in a way that I would consider intuitive.

For this section, I will use the following template when referencing a grid, where all four areas are proportionally sized:

h h h h
s c c c
s c c c
s f f f

This arrangement of letters represents a header that runs across the top, a sidebar, some content, and a footer.

Confusing Vocabulary

In CSS, a grid has three layers, so to speak – grid items, grid-cells, and grid-areas.

A "grid item" is the actual content in the grid, such as a <div>.

A "grid-cell" is the smallest unit of the grid itself – it is an area bordered by four grid-lines, two rowwise and two columnwise.

A "grid-area" is a named group of one or more grid-cells.

Sometimes, though, it feels like "grid-cell" and "grid-area" are used interchangeably when MDN Web Docs uses phrasing like the following: “More than one item can be placed into a grid cell or area and they can partially overlap each other.”.

Flow

Grid items in a grid-cell or grid-area have no flow, which means that if you try to put two <div>s in c, they will stack on top of eachother, instead of being placed and sized appropriately.

Cell/Area Sizing

Neither grid-cells nor grid-areas collapse any unused space, nor do they provide a way to – for example, shrinking the grid-item(s) to be smaller than the area will result in some wonky margins; compare the following three figures, A, B, and C.

A, the grid normally:

B, what the grid should look like with shrunken items:

C, what the grid actually looks like with shrunken items:

This can be fixed by using grid-template-columns and grid-template-rows respectively. — I used max-content for my code, and it seemed to work; however, I feel that isn't the correct solution.
[Let me know if using max-content for the sizing was the correct thing to do or not.]

Verbosity

Using grid-layout is a bit cumbersome, and somewhat obtuse.

To get the most out of CSS' grid-layout, you have to use grid-template-areas, grid-template-columns, and grid-template-rows together, or use the grid-row-* and grid-column-* properties.

For me, setting, and then maintaining, all these properties can be difficult – and it would be really nice if I could just use grid-template-areas and have the grid work exactly how I expect.

Not only is flex-layout easier, but it also has wider support, according to Can I Use.

Is `grid`-layout useless?

You might think that, with my critical views of CSS grid, I would think it has little to no use, but that guess would be wrong.

While I don't think grid-layout is particularly useful, I do think it could come in handy for grids with a higher complexity that is a necessary part of the design. — For example, you may want a logo in the top left, a header spanning the rest of the space, a sidebar, the main content, and then a footer – essentially, a modified version of the previous grid.

Here is a textual representation of the grid described above:

l h h h h
s s c c c
s s c c c
s s f f f

One good thing I definitely can say about grid-layout is that reduces the number of parent-child relationships you have to deal with, since flex-layout is one-dimensional, and thus the amount of elements you will likely need overall.

Thanks for reading!
Cheers!

Microsoft Is Holding My Account HOSTAGE!

Calin Baenen — Sat, 06 Jul 2024 01:11:33 +0000

Hello, dev.to!

It is my displeasure to announce, today, that Microsoft – yes, the multibillion dollar company – is holding my Microsoft account hostage.

I have two main questions for everyone:

How can I find and contact Microsoft employees?
How, and where, can I make a big enough splash online to get on Microsoft's radar?

And I have four main concerns I wish to address:

How I ended up where I am now.
Microsoft's lack of attention to detail when designing a log-in system.
Microsoft's slipperiness and noncooperation.
What I am trying to do to rectify this issue.

What happened?

How Microsoft Plays A Part

Microsoft's Coldness

What's next?

What happened?

Recently, my Microsoft account was hijacked, which I wrote an article about.

In summary, there was a (cleverly designed) phishing scam which got a hold of my Microsoft account by tricking me into giving them a OTP – and, as I recall, it didn't even require me to give them my email address, I was brought straight to Microsoft's log-in prompt.

How Microsoft Plays A Part

While phishing is usually thought to be the equally the fault of the scammer and the victim, certain phishing scams are more advanced than others and take advantage of a system that's already in place, which is the case here.

This scam took advantage of the vague wording of Microsoft's emails to convince me to give them a OTP under the pretext that it is a "verification code".

So, what did Microsoft's email, containing my one-time-password, look like?
This:

How could anyone fall for this?
Well, it's because of the vague wording – the use of "security code" instead of "one-time-password" or "account access code".

What's worse is that Microsoft has different types of "security code"s, which are also six-digit numbers, much like this OTP.

What else does Microsoft use these security codes for?
Verifying your email when you first sign up for a Microsoft account, verifying your email when you are talking to one of Microsoft's virtual chat agents, when confirming signins, et cetera. — While all these things are very similar, it can become confusing what code is a OTP and isn't a OTP.

While I should have maybe smelled something fishy when I got a code via email, I mistakenly thought that this code was in the vein of something like a Google Authenticator or Microsoft Authenticator code, especially due to the form and nature of the code.

Also, compare that email with this one, which does clearly state the intention of the code:

Microsoft's Coldness

Since about June fourteenth, I've been trying to get my account back; however, Microsoft has done very little to cooperate.

I tried to use both the ACSR (Automated Customer Support Representative) form and the Account Reinstatement form, but it has yielded very poor results.

At first, I was able to get Microsoft to realize that there was indeed illegitimate activity on my account.
... However, after some back-and-forth, I was emailed by a Microsoft employee, named Rhodz, that I would not get my account back due to "a severe violation of the Microsoft Service Agreement" — when I asked for elaboration, though, an employee named Luis refused to tell me what the violation was, saying “Pursuant to our terms, we cannot reactivate your account, nor provide details as to why it was closed. ”.

After talking with some more live support agents, I was told by one, named Angela, that "my account being hijacked can be the main reason the system disabled it".

What's next?

What am I going to do now...?
Well, I'm not quite sure.

I was hoping some people – along with discussing Microsoft's behavior – would be able to give me some suggestions for what to do.

Currently, the plan is just to become a hemorrhoid on Microsoft's ass, as being inert is going to lead to even poorer results.

So... what do you all think of Microsoft's actions?
Do you think they play a part in this, like I do, or no?

Thanks for reading!
Cheers!

This SUPERIOR way ov defining enums in JavaScript!

Calin Baenen — Sun, 26 May 2024 04:02:24 +0000

The Standard Way ov Defining An Enum

In JavaScript, the standard way to define an enum – according to the TypeScript compiler – is:

"use strict";
var Fruit;
(function (Fruit) {
  Fruit[Fruit["BANANA"] = 0] = "BANANA";
  Fruit[Fruit["ORANGE"] = 1] = "ORANGE";
  Fruit[Fruit["APPLE"]  = 2] = "APPLE";
})(Fruit || (Fruit = {}));

Or, if we strip the (unnecessary) mapping from number to string, we can do:

"use strict";
var Fruit = {
  "BANANA": 0,
  "ORANGE": 1,
  "APPLE":  2
};

The Better Way ov Defining An Enum

... However, there is a better way to define an enum – and the method will ensure:

the enum values are unique,
the values can't be overriden,
the definition is hoisted.

var Fruit;
{
  Fruit = Object.defineProperties((Fruit = Object.create(null)), {
    BANANA: {writable: false,  value: Symbol("BANANA")},
    ORANGE: {writable: false,  value: Symbol("ORANGE")},
    APPLE:  {writable: false,  value: Symbol("APPLE")}
  });
}

Demonstrating AI's Innocence Through Food

Calin Baenen — Mon, 06 May 2024 09:47:16 +0000

Do you think AI image-generation is scary?
Do you believe AI image-generation is art-theft?

Well, let's talk about that!

I got the brilliant idea for this post when Kat-the-Hylian on DeviantArt made this brilliant comment:

Or using a microwave dinner and calling yourself a "chef."

This inspired me to create an article that compares AI, AI-generated images, and the ethics thereov to food, in some way.

What is AI?

Let's take a second to quickly recap what AI is.

You may be familiar with terms such as "AI images", "AI-generated", et cetera, but do you know what "AI" means?
Well, "AI" stands for "artificial intelligence".

What is (an) artificial intelligence?
(A program with) Artificial intelligence is a program that is capable ov replicating some facet ov human intelligence, such as learning or providing the most acclaimed information.

In the sense ov image creation, we can assume an artificial intelligence is any program which seeks to replicate the part ov the human brain which allows us to draw (well), including the motions our hands do.

How does an AI make new images?

An image-generation program that uses artificial intelligence is typically trained on images that are paired with captions or visual descriptions so it can make a connection between the descriptors and the, abstract, figures in the image.

These images (and their paired captions) are called "training-data".

Those who maintain the AI can get training-data in a number ov ways, including making their own training-data, or purchasing training-data from others.

Think about it like this: it's like someone taking store-bought food (which is already assembled/prepared) and trying to make a new [food / meal] out ov it.

Are AI-generated images stolen?

Not inherently.

Maybe you've heard a scandal about AI stealing your images and such.

Is it true that some who maintain an AI can, and may, steal art?
Yes – it is certainly a possibility.

Does this mean everyone who maintains an AI will steal art?
No – those who maintain an AI have the option not to steal.

Let's think about this using grocery stores.

There isn't The Grocery Store™ that you go to once a week — likely, instead, you find yourself at one or more stores, such as Target, Walmart, or Cub Foods.
In the same way, there is no one artificial intelligence — you have DALL·E 2 by Open AI, Midjourney by... Midjourney Inc, et cetera et cetera.

If Walmart was found to be stealing stuff, Target wouldn't get the blame.
We must understand AI-technology (and its branding) the same way — we should view each AI in isolation from eachother (except ones with the same maintainer(s)).

Are AI-generated images art?

As Oxford English Dictionary defines "art", art is “the expression or application of human creative skill and imagination, typically in a visual form such as painting or sculpture, producing works to be appreciated primarily for their beauty or emotional power”.

By this definition, AI-generated images do not meet the qualifications to be "art".
However, they can still be the basis for (new) art.

[NOTE: Just because you enter a prompt and upload the best looking result does not mean you are an artist.]

Are AI-generated images original?

In the context for this post's inspiration, Kat-the-Hylian insinuates that taking an AI-generated image, uploading it, and calling yourself an artist is equivalent to buying a microwave dinner, heating it up, and calling yourself a chef — I believe this is an amazing comparison.

Could you modify the microwave dinner?
Ov course, but this still does not necessarily make you a chef.

Now, if you get a microwave dinner with some mashed potatoes and some steak strips and turn that into cheesy mashed potatoes with bacon and seasoned steak strips with gravy, then maybe we can start discussing your chef status.

The line between not being modified enough and being modified adequately is blurry, and mileage may vary.
(I believe this is in part because what is adequate is subjective.)

Who owns the copyright to AI-generated images?

It depends – and there is currently no legal standard in place. [24/05/06]

If the AI's training-data is entirely open-source or royalty-free, then the copyright should belong to no one.
If the AI's training-data is comprised entirely ov proprietary or licensed images, then copyright should belong to the person(s) that made the image (as appropriate).

Copyright only gets more complicated as we consider the possible modifications that could be made to the generated image.

Will artificial intelligence take my job?

No.
AI will not take your job.

Let's say AIs are restaurants (or microwave dinners) and artists are home-cooks who like to make homemade meals for their family.

Will the family want to go out to eat every now and then at their favorite restaurant?
Ov course, but fast-food probably won't outright replace your homecooking.

A Safe(r) AI

It may not be perfect, but I think I know a decent AI.

If AIs were restaurants, Leonardo AI would be a buffet.

Why?
Because Leonardo lays out all the food for you, and you get to pick what you eat.

Trained on LAION-5B, Leonardo allows you to compile your own training-data and generate your own images using that.

Over all, I think while AIs can do harm, and come with a lot ov confusing implications ethically and legally, but I believe this technology is the future, and that it can be a helpful tool to aid in the creation process (when used correctly and in good faith).

[Hell, even this post's cover-image is a modified AI-generated image saved as a low-quality JPEG.]

Thanks for reading!
Cheers!

5 Productivity Hacks to Supercharge Your Coding Sessions

Calin Baenen — Wed, 01 May 2024 20:20:21 +0000

Are you a programmer who struggles to stay focused and productive during long coding sessions?
Well, I'm not – so I am here to deliver you all some motivation in the form ov five 'hacks' that should boost your performance.

Prepare Your Mind

1. Prepare your mind.

It is always good to be prepared for what is to come, even if you know what's coming.

There are many ways to prepare yourself, such as meditation or yoga.
Are you a coffee-drinker? Have some pre-coding coffee, then!

Do something that will make you feel better.

Calm Yourself

2. Calm yourself.

Programming can be stressful, so don't sweat it when you find that you aren't making ample progress.

If you are feeling frustrated or annoyed, put on something calming, like whitenoise, some music, or even your favorite content creator.
If you are feeling stuck, try relieving the block by getting some inspiration from somewhere, such as your favorite content creator.

Do something that will relax you.

Keep Focused

3. Keep focused.

Being distracted is a large contributing factor to a lack ov productivity.
(I should know — I can be a bit torn between projects.)

Try to close unnecessary browser tabs, such as YouTube, Bluesky, Reddit, et cetera.

Do something that will keep you on task.

Stay in The Zone

4. Stay in the zone.

It can be hard to remain focused – and, sometimes, you may become fidgety.

Sometimes, to be in your most focused state, you have to take breaks — it can be good to watch a video here and there, or (re)check your emails.

Do something that will keep your mind refreshed.

Ask for Help

5. Ask for help.

We all run into problems we can't solve by ourselves at first – and that is perfectly fine.
We don't have to face these challenges alone though.

While you may want to be seen as the "alpha-Chad" programmer, you shouldn't pressure yourself into waiting for an answer to tumble to you... like a tumbleweed.

Ask for help.
It is much easier to find a solution to something if you at least prompt the answer to come to you.

Do something that will help others help you.

Implementing these five productivity hacks can have a beneficial effect on your coding sessions.

Thanks for reading!
Cheers!

Spark v2.2.0 is here!

Calin Baenen — Mon, 08 Apr 2024 04:30:19 +0000

Spark has had some tweaks made to it since its last revision.
Now things are glowing brighter than ever!

So... what's changed?
Here's what:

(most) properties can now be cascaded via data-cascade
Spark now has a logo
the <body> no longer has a flex layout by default
removed data-sticky
removed data-fullwidth
removed the iblock and inline values for data-flow
removed the (re)sizing for h1-h6 in text/heading.css
added the indented value for data-textstyle
made hanging an adjective to indented
changed the default style of <hr>s in text/text.css
removed the .code class in favor of the code value for data-textstyle
added code value for data-textstyle
removed data-pixelated-children and data-crisp-children in favor of the data-cascade attribute

Please, check out Spark and tell me what you think!

Announcing Spark: an easy-to-use CSS library for complex styles.

Calin Baenen — Thu, 28 Mar 2024 14:26:02 +0000

Today, I am unveiling a project I've had sitting in the shop for a while... Spark!
https://github.com/CalinZBaenen/Spark

What is Spark?
Spark is an easy-to-use CSS library that takes advantage ov HTML's data--attributes, and some default attributes, to easily apply complex or boilerplate styling to an element, making it easier to focus on just the layout.

Here is an example ov how I made the table shown in this post's cover-image.

<table>
  <caption>Colors</caption>
  <tr>
    <td data-cutout></td>
    <th scope="col">Red</th>
    <th scope="col">Green</th>
    <th scope="col">Blue</th>
  </tr>
  <tr>
    <th scope="row">Lightened</th>
    <td style="background-color:#FF8080;"></td>
    <td style="background-color:#80FF80;"></td>
    <td style="background-color:#8080FF;"></td>
  </tr>
  <tr>
    <th scope="row">Normal</th>
    <td style="background-color:#FF0000;"></td>
    <td style="background-color:#00FF00;"></td>
    <td style="background-color:#0000FF;"></td>
  </tr>
  <tr>
    <th scope="row">Darkened</th>
    <td style="background-color:#800000;"></td>
    <td style="background-color:#008000;"></td>
    <td style="background-color:#000080;"></td>
  </tr>
</table>

As you can see, the first cell is... well... cut out, and you notice that I am using data-cutout.
data-cutout's job is to make a table-cell act as if it were not present by making none ov its content display and hiding itself, which allows you to do some pretty cool things, like making pixel-art ov Mario:

(Yes, this is actually an HTML table - you can see it in table.html file in the examples directory.)

I'm hoping my library will find some merit, somewhere and will catch on...
... or at least inspire newcomers to HTML (orwith CSS) to dive deeper.

Anyways, that's all for today.

Thanks for reading!
Cheers!

RuntDeale DevLog : ...1?

Calin Baenen — Thu, 15 Feb 2024 05:40:02 +0000

While there have been previous posts pertaining to RuntDeale, I'm just going to ignore those and call this the first official RuntDeale devlog.

Today, I was able to use composition to improve my WorldQuery-types, changing duplicate struct-definitions into beautiful multilayered component cakes.
(See the differences on GitHub.)

Here are some screenshots ov the game so far:

Recruiting Rust Game-Developers

Calin Baenen — Fri, 09 Feb 2024 07:49:49 +0000

Is there anyone here that knows Rust and the Bevy game-engine that could help me work on RuntDeale?

I would love to continue to do it alone with small tidbits ov help from the Bevy Discord server, but it's becoming very difficult with many personal factors, primarily school.
I need someone who can help me write code for different facets ov the game and can periodically do tests, such as helping me get the UI to work properly, et cetera.

Here's some info about RuntDeale: https://www.deviantart.com/kattytheenby/journal/My-game-RUNTDEALE-927344461

It's an UnderTale inspired fangame that will be fighting "monster"-like creatures and all that jazz, but instead you're literally fighting depression.
This game has a story that is reflective of experiences I've had, and how getting over things can be tough but is doable.

RuntDeale will be the same 2.5D bullet-hell type game we all know, love, and have come to expect from UnderTale and DeltaRune.
However, this tries to spice things up by adding new soul types.

Hit me up if you are interested.

Thanks for reading!
Cheers!

Why couldn't the egotistical programmer get far in C?

Calin Baenen — Fri, 26 Jan 2024 00:23:00 +0000

Why couldn't the egotistical programmer get far in C...?

Because they didn't want to get any pointers about their code.

Spark-CSS Syntax : What do you think?

Calin Baenen — Fri, 08 Dec 2023 02:26:33 +0000

This is the conceptualized syntax for Spark-CSS, which is already well in development:

<header data-fullwidth data-flow="flex row evenly-spaced-children">
  <a href="/documentation/">Documentation</a>
  <a href="/demos/">Demos</a>
  <!-- ... -->
</header>

<main data-flow="flex col">
  <section>
    <h2>First Section</h2>

    <p>Lorem ipsum.</p>
    <p>This webpage is for testing purposes only!</p>
  </section>

  <section>
    <h2>Text Styling</h2>

    <p data-textstyle="justified">
      Today, I just found out that Spark has a lot of potential — thanks to all the unique 'marker attributes', adjusting the styling of an
      element has never been easier.<br/>
      This text <u>should</u> be justified...
    </p>

    <p>This text has an <span data-textstyle="s u o">underline, strikethrough, and overline.</span>.</p>
  </section>
</main>

The library, and, by extension, its syntax, is meant to make replacing trivial, boilerplate CSS (and certain HTML styling elements) with easy to read data-* attributes.
The attributes themselves are named in a way that attempts to be intuitive and concise; the values ov the attributes are meant to provide a decent amount ov flexibility, and, in some cases, work together to create something.

For example, take the data-flow="flex row", which represents a flex-container that has a flex-direction ov row.
Why isn't it flex-row? /rt
Well, row (and col) can both be used with a grid flow instead; using a grid with row or col sets the grid-auto-flow property to row or column respectively.

Another thing about this library is that it aims to work on as many browsers as possible... even the outdated ones that no one uses anymore, such as Internet Explorer!
For browsers that don't support certain things, sensible fallbacks are provided.

Here's a snippet ov the CSS:

*[data-flow~="flex"] {
  display:inline-block;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}

With all this information, I ask this: what do you (all) think ov my CSS library and its syntax? Does the idea seem promising?

Thank you for reading!
Cheers!

DEV Community: Calin Baenen

I Got A Perfect (100%) Score in My College-Level Python Course!

CSS Grid-Layout Sucks, And Here's Why

What is CSS grid-layout?

Why does CSS grid-layout suck?

Confusing Vocabulary

Flow

Cell/Area Sizing

Verbosity

Is grid-layout useless?

Microsoft Is Holding My Account HOSTAGE!

Table of Contents

What happened?

How Microsoft Plays A Part

Microsoft's Coldness

What's next?

This SUPERIOR way ov defining enums in JavaScript!

The Standard Way ov Defining An Enum

The Better Way ov Defining An Enum

Demonstrating AI's Innocence Through Food

What is AI?

How does an AI make new images?

Are AI-generated images stolen?

Are AI-generated images art?

Are AI-generated images original?

Who owns the copyright to AI-generated images?

Will artificial intelligence take my job?

A Safe(r) AI

5 Productivity Hacks to Supercharge Your Coding Sessions

Prepare Your Mind

Calm Yourself

Keep Focused

Stay in The Zone

Ask for Help

Spark v2.2.0 is here!

Announcing Spark: an easy-to-use CSS library for complex styles.

RuntDeale DevLog : ...1?

Recruiting Rust Game-Developers

Why couldn't the egotistical programmer get far in C?

Spark-CSS Syntax : What do you think?

What is CSS `grid`-layout?

Why does CSS `grid`-layout suck?

Is `grid`-layout useless?