And with that, the launch of Kybercode is here! Welcome to your home for software and website development content.
I won't bore you with fancy buzzwords and PR jargon. All that is already on our official about page. Let's get into the nitty-gritty:
Let's address the elephant in the room. This whole site is in monospace
.
The main idea for this site's design was to mimic a terminal or command line. Hence the #000000 background color and bright #FFFFFF monospace text.
While monospace is probably harder to read than your typical sans-serif font, I like it and feel it fits the vibe of the site. I might change it down the line though.
If it makes you feel any better, I intentionally chose Azeret Mono because I believe it is at least a bit more legible than most browser defaults. And it looks cool.
<p class="default-mono">This is the default monospace font.</p>
<p class="azeret-mono">This is the Azeret monospace font.</p>
/* Azeret Mono font-face */
@font-face {
font-display: swap;
font-family: 'Azeret Mono';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/azeret-mono-v17-latin-regular.woff2') format('woff2');
}
.default-mono {
font-family: monospace;
font-size: 1.2rem;
}
.azeret-mono {
font-family: "Azeret Mono", monospace;
font-size: 1.2rem;
}
false
You can also probably notice that Azeret Mono is slightly bigger...for whatever reason.
As of January 19, 2025, this site has switched from using Roboto Mono to Azeret Mono. To me, the latter has more character to it and is easier to read, hence why I switched fonts.
Aside from that, I did my best to make the site unique while still feeling like a traditional magazine.
Some of you frontend developers might also notice the desktop navbar! In particular, it was inspired by CSS-Tricks v17's navbar. I really liked the idea of having massive, centered icons above the link text. It's so untraditional for desktop navbars but I love it!
Eleventy. I'm a big fan of static sites because they're so simple yet so powerful. No need for a complicated dynamic server with lots of backend logic. Just generate some HTML files and you're all set.
Aside from Eleventy, I also make use of the following open source projects:
- Luxon for handling dates
- MiniSearch for the search page
- Prism for syntax highlighting, along with the Eleventy Syntax Highlighting Plugin
- Lodash for some behind the scenes stuff like paginated tag pages
- Cheerio for some other behind the scenes stuff
- Eleventy-Plugin-Reading-Time for determining the reading time of articles
- Eleventy RSS Plugin for this site's RSS feed
- RemixIcon for icons
- Azeret Mono for this site's font
The site is also hosted on Netlify and I bought the domain on Namecheap.
Note that this tech stack can change at anytime. Maybe by the time you're reading this, the font has changed. Or we're using different icons. Or maybe we're not even using Eleventy anymore. I'll do my best to keep this list up-to-date, but no promises.
This site has two types of posts: articles and shared articles. The former is for original, long-form articles, and the latter is for sharing other cool articles I found or responding to others' articles.
I've considered adding a third kind of post for short quick bits of information. I'm talking only a few sentences. Kind of like tweets before they were renamed to xeets (or whatever they're called now).
The Verge has something like this on their homepage and needless to say I'm a big fan.
I thought calling these "bits" would be cool, because they are quick bits of information. And bit is also a computer science term and therefore fits the theme of this site.
These would be useful for sharing cool stuff I learn or read that wouldn't be long enough for the other two post types.
The main reason I didn't go about adding this is because:
- They feel too similar to the other two post types we have.
- I really don't like the name "bit" because it is not very self-explanatory. "Articles" and "shared" get the point across well, but "bits" would just confuse people I'd imagine.
- Would require making a whole new post type for the archive and other browse pages.
- Technical debt.
That being said, maybe I'll go about adding this in the future!
So a few days later, I ended up adding bits! I decided that I have lots of stuff I want to spout out that aren't long enough to make a whole article. See the news here.
My main goal with this site was to put privacy first. As of the publication of this article:
- This site doesn't track you (no analytics)
- This site doesn't serve ads
- This site doesn't embed third-party scripts
I even decided to go about self-hosting everything to be extra sure not one of you are not being tracked. No cookies. No tracking. This site is just a free piece of content, funded by my wallet.
I can't promise things will stay this way forever. Check our Privacy Policy for the most up-to-date information on how we handle your data.
The future plans for this site are simple:
- Learn new stuff and document it here
- Read more stuff and share it here
And with that, I hope you enjoy Kybercode! This is a project I put countless hours into, so it feels so surreal to finally be launching it!