DEV Community: Khang

Ranking Microsoft Windows versions - 2025 Edition

Khang — Sun, 20 Jul 2025 04:03:58 +0000

Everyone has their own preferences and opinions on which Windows version is the best, so in this fun little post, I'm going to rank the Windows versions from best to worst in my opinion.

As biased as this sounds, this list is actually backed by facts, statistics, and market share trends (source).

🏆 Windows 7 - the GOAT, no debate

Windows 7, without a doubt, is the best Windows version to this day. It was fast, stable, and had the best user interface. The perfect balance between performance and aesthetics. It took everything people hated about Vista and... didn't do it. Whether you were gaming, working, or just customizing the hell out of your desktop, Windows 7 made you feel like your PC got you. Even after Microsoft ended support, many users clung to it for years, including enterprises, businesses, and individuals.

If you disagree, you're against a civilization!

🥈 Windows XP - that startup sound chefs kiss

Blue skies, green hills, and a startup sound etched into memory. Windows XP was ridiculously lightweight, reliable, and compatible with almost everything. It was the first Windows version to really nail the user experience. It became the backbone of businesses, schools, and homes for years. Paint, Pinball, Clippy, Windows Media Player with custom skins. Enough said. It was the golden age of Windows.

🥉 Windows 10 - when Microsoft finally listened

Okay, this one is not on a nostalgia trip, but Windows 10 is a solid operating system. After the mess that was 8 and the "meh" 8.1, this was the comeback we needed. It brought back the Start Menu, improved performance, and finally had users agreeing on something. It was a step in the right direction, even if it had its fair share of bugs and issues.

4️⃣ Windows 98 - if you know, you know

Yet another classic. Windows 98 was the Windows for anyone growing up in the late 90s. It introduced several features which would become standard in future versions. The aesthetics it inherited from Windows 95 remained iconic. Remember Half-Life, Rollercoaster Tycoon, or Quake? Those games were the reason many of us fell in love with gaming and computers.

5️⃣ Windows 11 - trying hard to be cool

The latest version of Windows at this point in time. Windows 11 is a mixed bag. It has a sleek design, but it feels like Microsoft is trying too hard to be trendy. The new Start Menu and taskbar are... different. Some people love it, some hate it. It's fast (kinda, if you have the right hardware), but it feels like a glorified Windows 10 update. The new features are nice, but it doesn't feel like a major leap forward. It's like that friend who tries to be cool but ends up being cringy.

Honorable mentions and conclusion

🎀 Windows Vista: beautiful but slow and buggy, still a solid attempt that paved the way for Windows 7.

🎀 Windows 8.1: a decent attempt to fix the mess of Windows 8, but just not enough.

In conclusion, Microsoft has had its ups and downs with Windows versions. Some were revolutionary, while others were just... there.

But one thing is for sure: if you want to experience the best of Windows 7 and every other Windows version mentioned above, you can always check out Win7 Simu. It's the closest thing to reliving the glory days of Windows 7 without the hassle of installing it on your machine, or messing around with virtual machines and technical stuff. Just pure nostalgia and fun.

I built a Nokia Composer with AI's assistance

Khang — Mon, 10 Mar 2025 04:17:53 +0000

I have recently released a new update to Brick 1100 a few days ago, this update includes the new Composer feature allowing users to make their own ringtones in a monophonic style. It's a feature that I never thought I would be able to implement on my own, having no prior knowledge of music theory and even never having used the Nokia Composer before. However, with the help of AI, I was able to build it, in a considerably short amount of time. In this post, I would like to share the process of building the Nokia Composer and how AI has evolved remarkably to make it possible.

What is Nokia Composer?

Composer was a built-in feature on several classic Nokia phones, allowing users to create their own monophonic ringtones. It provided a simple interface where users could manually enter musical notes, defining their pitch and duration. This feature was a popular way for users to personalize their phones in the pre-polyphonic and MP3 ringtone era, enabling them to compose famous tunes, TV theme songs, or even their own musical creations.

How it works

The interface allow users to input notes using the phone's keypad. Each key corresponds to a different musical note, and additional options let users adjust the octave and duration of each note. Once a melody is created, it can be saved and set as the ringtone.

A typical composing process included:

Opening the Composer – Accessible through the phone's menu, a blank canvas would appear for users to start composing.
Composing the tune – Users could input notes using the phone's keypad:
- Numeric keys 1-7 are used to assign musical notes
- Keys 8 and 9 change the note's duration
- Key 0 adds a rest
- Key * shifts the note's octave
- Key # makes the note sharp
Editing the tune – The melody could be played back, and individual notes could be modified or deleted as needed.
Saving and setting as ringtone – Once satisfied, users could save their custom melody and assign it as the default ring

Deep dive

All possible combinations of a note's structure

Nokia Composer follows a structured approach to note input, using a simplified notation system. Below is a breakdown of the key components involved in composing a melody:

Musical notes: Each numeric key, 1-7, is assigned a specific note:
- 1 = C (Do)
- 2 = D (Re)
- 3 = E (Mi)
- 4 = F (Fa)
- 5 = G (Sol)
- 6 = A (La)
- 7 = B (Ti)
Duration: Keys 8 and 9 adjust the note's length. The default duration is a quarter note (1/4 length of a whole note), which is represented by number 4. Pressing 8 halves the duration, while 9 doubles it. The corresponding values are:
- 1 = whole note
- 2 = half note
- 4 = quarter note
- 8 = eighth note
- 16 = sixteenth note

Dotting a note increases its duration by half. For example, a dotted quarter note is 3/8 (1/4 + 1/8) of a whole note.

Octave: The * key is used to shift a note's octave, typically covering 3 octaves.
Rests: The 0 key is used to insert a rest (pause between notes). Duration keys can also apply to rests, adjusting their length accordingly.
Sharp notes: The # key is used to make a note sharp, raising its pitch by a semitone, not applicable to the E and B notes.
Tempo: The beats per minute (BPM) value to control the speed of the melody.

Example

Let's take 4c2 as an example, this represents a quarter note C in the second octave, which is also the default note for the Composer. By common convention, a quarter note equals to 1 beat, hence if we set the tempo to 120 BPM, the duration of this note would be 0.5 seconds (60 / 120 = 0.5s). In the same manner, we can interpret other note combinations:

8c2 = eighth note C in the second octave with a duration of 0.25s (half a beat)
2c2 = half note C in the second octave with a duration of 1s (2 beats)
4.c2 = dotted quarter note C in the second octave with a duration of 0.75s (1 and a half beats)
4#c2 = quarter note C# in the second octave with a duration of 0.5s
16.#d1 = sixteenth note D# in the first octave with a duration of 0.125s (1/4 beat)

How I built it

I hope the above explanation gives you a good understanding of how the Nokia Composer works, because that's something I didn't know prior to building it. I had never used the Composer feature on a Nokia phone either, so I wasn't sure if I would ever get to implement it in Brick 1100. However, the project wouldn't fulfill its purpose as a Nokia 1100 simulator without this iconic feature, and become a let down for users who were expecting it. I decided to give it a shot, and with the help of AI, anything now seems possible.

With AI's assistance

In summary, I used Cursor (an AI code editor) with the Claude 3.5 Sonnet model to build, the entire process took me 11 prompts, around 3 days to make the Composer fully functional and integrated with the project's codebase.

It's amazing to see how AI has evolved in such a short time, enabling developers like me to build complex features without prior knowledge or experience in a certain field. I remember just months ago, AI tools like ChatGPT or GitHub Copilot are just making dumb, made-up suggestions when it comes to coding, but now they can actually provide helpful assistance. This is even more impressive with Cursor + Claude's model, which could generate for me a fully functional Composer in the very first prompt. Though to be fair, quite a few iterations were needed to refine the code, especially in handling the core logic of the Composer and integrating it with the existing codebase, but the AI's suggested code was an excellent starting point. It's not an exaggeration to say that, as a software developer, I should be worried about my job security due to the rapid growth of AI, but as an indie maker, it makes me feel like I have a superpower to build anything I want.

Without much instruction, solely from my first simple prompt, the AI agent was able to gather the necessary information of how the Nokia Composer works by searching the web, it then scanned the existing codebase to understand the structure, inspected the relevant parts for the conventions, and reused for generating the code. The result was great, the Composer was functional, but it was nowhere near perfect. There were still flaws, bugs, and inefficiencies that needed to be taken care of. It couldn't understand the way the keypad input was handled (so it improvised, but completely off the mark), the composer interface didn't fit in the overall layout, and the notes' pitch and duration were not accurate. In general, if I were to give the generated code a score, it would get a 6/10, but the most crucial and hardest part was done, so I was pretty happy with it.

Iterations and refinements

From reviewing the generated code, I knew where the problems lied, but I had no idea how to fix them at that point. Luckily, I found this version of Composer built by Serge Zaitsev, which has a rather simple and clean implementation to follow. I used this as a reference source to feed the AI agent, asking it to explain the code to me and refactor it to be more readable and follow the project's coding style.

The generated code this time addressed most of the issues related the core logic of the Composer, once again, AI has been proven to be a wonderful tool for learning and adapting as it evolves. After some manual clean-up and adjustments, the Composer was finally in a good shape, the most crucial part of the Composer's logic was then encapsulated within the below function:

/**
 * @param {Note[]} sequence The sequence of notes to play
 * @param {MediaStreamAudioDestinationNode} [destination] The stream destination to record audio
 */
function playSequence(sequence, destination) {
  const oscillator = this.audioContext.createOscillator();
  const gainNode = this.audioContext.createGain();

  oscillator.connect(gainNode).connect(this.audioContext.destination);
  oscillator.type = "square";
  oscillator.start();
  if (destination) gainNode.connect(destination);

  let currentTime = this.audioContext.currentTime;

  const setAudioParam = (param, value) => param.setValueAtTime(value, currentTime);
  const clamp = (value, min, max) => Math.max(min, Math.min(max, value));

  sequence.forEach(({ note, duration, octave, isSharp, hasDot }) => {
    const noteChar = note.charCodeAt(); // ASCII value of note
    const noteStep = ((noteChar & 7) * 1.6 + 8) % 12; // map note to the 12-tone scale
    const octaveOffset = 12 * clamp(octave || 1, 1, 3);
    const noteIndex = Math.floor(noteStep + (isSharp ? 1 : 0) + octaveOffset);
    const isRest = noteChar & 8;
    const adjustedVolume = this.volume / 10; // adjust volume based on keypad volume

    setAudioParam(oscillator.frequency, 261.63 * 2 ** (noteIndex / 12)); // convert to frequency (Hz)
    setAudioParam(gainNode.gain, isRest ? 0 : adjustedVolume);

    const noteDuration = (24 / this.tempoValue / clamp(duration || 4, 1, 64)) * (hasDot ? 1.5 : 1);

    currentTime += noteDuration * 7;
    setAudioParam(gainNode.gain, 0); // add a small pause between notes
    currentTime += noteDuration * 3;
  });

  return wait((currentTime - this.audioContext.currentTime) * 1000);
}

In simple words, the function above takes a sequence of notes and plays them back in the correct pitch, duration, and tempo. It uses the Web Audio API to generate the sound, and the function is called whenever a note is inputted or a melody composition is played. It also takes the destination stream as an optional parameter, allowing the composition to be recorded for exporting as a ringtone, an enhancement that wasn't available in the original Nokia Composer.

From this point, I just had to make some more manual tweaks to make the Composer's UI fit in the project's layout, and used a few more prompts to fix some unknown issues as they popped up when testing the feature on Android and iOS. As mentioned earlier, the total time spent on building it was around 3 days with 11 prompts, and we had a production-ready Nokia Composer in Brick 1100.

Conclusion

Building the Nokia Composer was a challenging yet rewarding experience, and it wouldn't have been possible without the help of AI. I wouldn't know where to start to get a sufficient knowledge of music theory, let alone implement a feature like this in a short amount of time. Regardless how you perceive AI, it's undeniable that it has revolutionized the way we build software, and it's only going to get better from here. I'm excited to see what other features I can build with AI's assistance, and I hope you are too.

If you haven't tried out the Composer feature in Brick 1100 yet, I encourage you to give it a go, and let me know what you think (there's also a Discord server to hang out, leave feedback, or share your creations, join us if you're interested).

[Boost]

Khang — Fri, 24 Jan 2025 04:05:55 +0000

Turning my codepen into an actual app - Brick 1100

Khang for Visnalize ・ Oct 7 '23

#webdev #javascript #android #showdev

Turning my codepen into an actual app - Brick 1100

Khang — Sat, 07 Oct 2023 05:26:48 +0000

Some time ago, in one of my very first posts on DEV, I shared a silly codepen made from learning for pure fun:

Khang

Dec 18 '20

Nokia 1100 Simulation

#codepen #html #javascript #css

173

Comments 10

1 min read

Turned out people found it interesting somehow as the post and the codepen itself was seen receiving a few interactions. Years later, after gaining more skills, and more experience, I came back to this idea to actually complete it. From a mere silly codepen that was barely functional, it has become a full-fledged app (though still in beta) and made its way to Google Play. In this article, I'm happy to share the progress, how and what I used to build it, and let's explore some cool and unique features I have brought out with this app.

A silly idea that got realized

We, developers, tend to look for project ideas where we can challenge ourselves and put our knowledge and skills into practice. Just like everyone else, when I first got myself into web dev, I had plentiful ideas of what I could build to learn coding more easily, enrich my portfolio with more useless projects, and dazzle the recruiters to land a fulfilling job. However, a little bit out of the ordinary person I am, I actually wanted to build something cool, something original that not many people had thought of and done, so I came up with the idea of replicating the look of an old phone (whoa, how innovative...) and simulate some of its functionalities (so original...). As a result, we have the "Nokia 1100 simulation" codepen above.

At that time, I stopped where I thought was sufficient for a silly idea as it was, even if I wanted to go further, my skills at that point wouldn't allow it, because I was still a NOOB! (though I still am). I just left it there and forgot about it. Sometime later, after having gained some experience working for companies and leveling up myself a bit, I revisited some past projects to see if I could advance any of them with my new abilities. The Nokia simulation was at the top of that list, considering how much traction it gained at the time (maybe not much for you, but that was a lot for a NOOB!). And here we are, a pet project that actually got finished and made it to the public.

The making process

The idea initiated in codepen was made with pure HTML/CSS/JS as I had just started learning the fundamentals. However, this time, applying the wealth of front-end development knowledge I have earned over the years, I rebuilt the project from scratch, making good use of modern web technologies and frameworks to speed up the development, and ease the feature addition and maintenance process as it grows.

I started spending my free time outside of work hours and weekends to get into it. After about two weeks, I finally made it an MVP (minimum viable product) with most of the core features covered, sort of. So far, the most prominent stuff that I used to build it:

Vue 2.7 - the main framework that empowers its UI.
Pinia - the state management library to handle shared state across components.
Vue Router - the routing library to ease the navigation within the app.
Capacitor - the MVP that helps transition a traditional web app into a mobile app effortlessly.
And lastly, the most incredible database for managing user data - localStorage 😂

There are a few other packages and libraries that enhance the developer experience and contribute to the feature feasibility, e.g several Capacitor plugins wiring up certain native mobile features for the app, dayjs providing out-of-the-box utils to work with date and time, or voca for handy string utils without the needs of reinventing the wheel.

Breaking down the components

At a high level, the app is composed of the following major building blocks:

The container, which is just a freaking image, is layered below the other components. It also holds the responsibility of resizing the app to adapt to the device/browser window's size.
The screen plays a vital role in rendering what would be otherwise visible to the users.
The keypad/numpad is in charge of the interactivity of the whole app. The pattern here is that with the help of Pinia, the keypad/numpad would emit respective global events as the users interact with it and the other components then behave accordingly. It is easily the toughest part that I had to deal with as meticulously as possible, to capture the essence of a nostalgic feeling back when we all still used these pads to operate a phone.

Here's an outlook on how the above design is implemented for your reference:

<template>
  <phone-container>
    <phone-screen :state="state">
      <menu-screen title="Menu" :index="index">
        <menu-select
          class="main"
          :items="items"
          :current="index"
          @[Event.Back]="handleMenuBack"
          @[Event.Select]="handleMenuSelect"
          @[Event.Change]="handleMenuChange"
        />
      </menu-screen>
    </phone-screen>
    <phone-keypad />
    <phone-numpad />
  </phone-container>
</template>

A simplified snippet of the keypad/numpad implementation:

// PhoneKeypad.vue

export default {
  data() {
    return {
      startTime: null,
      timer: null,
      isHolding: false,
    };
  },
  computed: mapStores(useKeypadStore),
  methods: {
    clearTimer() {
      clearTimeout(this.timer);
      this.timer = null;
    },
    press(key) {
      if (this.timer) this.clearTimer();

      this.keypadStore.press(key);
      this.startTime = Date.now();
      this.timer = setTimeout(() => this.hold(key), HOLD_TOLERANCE);
    },
    release(key) {
      this.clearTimer();
      if (Date.now() - this.startTime < HOLD_TOLERANCE || this.isHolding) {
        this.keypadStore.release(key);
        this.isHolding = false;
      }
    },
    hold(key) {
      this.isHolding = true;
      this.keypadStore.hold(key);
    },
  },
};

// keypad.js

export const useKeypadStore = defineStore("keypad", {
  state: () => ({ key: null, event: "", _diff: 0 }),
  actions: {
    _set(event, key) {
      this.key = key;
      this.event = event;
      // workaround to observe the keypad interaction,
      // as the key before and after the interaction may be the same key.
      this._diff++;
    },
    press(value) {
      this._set(Gesture.Press, value);
    },
    release(value) {
      this._set(Gesture.Release, value);
    },
    hold(value) {
      this._set(Gesture.Hold, value);
    },
  },
});

Adding some twists

While the project originally aimed to replicate the phone experience faithfully, it also presented an opportunity to add unique twists that, to me, might turn out to be the selling points for the app to be more useful: a collection holder of mini-games/apps where newbie devs can also learn coding by submitting to this collection.

Due to the simplistic nature of the app and its design, I have a strong belief that it can be perceived as a code playground where people can get their ideas implemented in the rawest form, text-based apps, or apps with pixelated, monotonic graphics. Let's take a look at the simple model below:

Brick 1100 was built in a way that we could easily extend its functionalities with external games/apps. These external games/apps can communicate with Brick 1100 itself back and forth via an interface called Bridge 1100, you can read more about that in this Github repo.

It's nothing sort of any kind of innovation (as expected from a noob). Those external apps/games are just being gathered and pulled from this Github repo. By the time of this article, you can see from that repo, there are only 2 apps available:

Pwd Generator - a simple password generator from a length input.
Randomizer - a simple randomizer app that outputs a random result each time depending on the selected mode.

Both of them are super simple, plain text-based apps that can be completed in no time. However, they were developed using different web techs, with the first one using pure HTML/CSS/JS while the latter using the Mithril.js framework. This gives you the freedom of choice when it comes to the web tech that you want to learn by making and takes relatively little of your time and effort to complete an app idea.

How those apps show up in Brick 1100:

Final words

Despite how silly and ridiculously simple this project looks, I had a really great time building it and felt super proud to see a pet project that actually came to light and got installed on a few user devices. If it has somehow captured your interest and want to try it out, you can install it from Google Play. And feel free to join our Discord to have some little chit-chat, or if you want to build something on it but getting stuck somewhere, I'm happy to help out there.

And now, if you will excuse me I have an app to develop, and some users to satisfy. Thank you for reading ✌

I rebuilt my portfolio after 2 years

Khang — Sat, 16 Apr 2022 04:40:24 +0000

It's gonna be a long article with many boring things all about me, I believe it's fair to think that some of you just want to see my portfolio. So here you go:

So, after 2 years in the software industry, I officially hit the first milestone of pursuing my passion for front-end development. I was offered the front-end developer role at an Australia-based company at the beginning of this year. It was a pleasant coincidence for which I neither searched nor applied for the role I was offered, and the guy who reached out to me was neither an HR nor recruiter, he was a fellow developer who was simply impressed by my silly pet projects. He is now a colleague and a senior who is always supportive and proactively helps me out in my work. And even better, the working culture here is surprisingly flexible and respectful, I have full control over my time and save a lot of commuting cost and time, as I'm working remotely from home, connecting with the Aussie team via MS Teams, or whenever I feel like to, I'm always welcome at the local office in Vietnam. Lucky me!

Anyway, that was a little bit sharing of my current status, and you may be wondering, why the hell did I rebuild my portfolio if I wasn't looking for a change of job? Yep, that's a valid question, I rebuilt my personal portfolio website after 2 years, not to impress the recruiters, not to find a new job, but to pick up the new tech stack I use at my current job, a whole lot of things that I have never used before, and because it's enjoyable. So in this blog post, I would like to share with you the experience, and of course, to show off the final product which I feel so proud and happy to realize how far I have progressed with my skills 😊.

A little bragging/motivation

Back when I joined DEV community in late October of 2020, I made my entrance by leaving a comment on the 96th Welcome Thread to introduce myself with my portfolio.

Khang • Oct 21 '20

👋🤓 Hello all,
Here to say what I said, do what I'm about to do: introduce myself through my portfolio - khang-nd.github.io. I'm glad to be part of the greatness, and all the best to everyone reading any comment here.

And it turned out, people enjoyed my portfolio, the github repo received around 20⭐, my comment received the most ❤ reactions at that time, and in the end, I was awarded the Beloved Comment badge. Totally unexpected, I was super excited, what an epic entrance I had!

But yeah, that's that. Just to say I built the first version of my portfolio nearly 2 years ago, and again, it was not to impress the recruiters as I was already working at my former company, but rather, I was learning React and tried to find something to practice its fundamental concepts. I had no experience with React prior to joining that company, all I knew was HTML, CSS, JS, and some jQuery, just basic stuff huh. React at that time was something foreign, something fancy to me. In fact, even during the whole time I worked at the former company, we rarely needed to build anything that was complex enough to apply any library or framework, other than jQuery, as most of those things we worked on were just automation scripts and simple plugins. But anyhow, we were still allowed the freedom to apply any new library/framework we preferred in our work per our team's competency skills development policies. And that was the motivation for me to build my first portfolio in React.

Now at the new workplace, in the role I have been yearning for, having a chance to build UI stuff from the beautiful designs prepped by a strong and professional design team, I'm really enjoying myself here. However, at the same time, I also feel overwhelmed, due to the fact that those 2 years of experience I had barely fit in the new workplace. I'm now helping build a bigger thing, using more advanced and complex web techs, minding about responsiveness and accessibility while sticking to the designs. All brand new experience to me, which is why I need to keep striving, little by little, and the idea of rewriting my portfolio from scratch using the same tech stack the project is using is part of the effort (FYI, our project is using React/NextJS, TypeScript, Theme UI, Framer Motion for the front-end, Storybook for component documentation, and PostgreSQL as the database, Strapi, Prisma, GraphQL for the back-end, and dozens of other packages). Therefore, for this second incarnation of my portfolio, I applied NextJS, TypeScript, Theme UI and Framer Motion.

The process and experience

Getting started with NextJS was simple and straightforward, just like any other frameworks whose existence is to ease our life as developers. With just a few commands, I got the all the necessary stuff up and running.

TypeScript came integrated with NextJS, I didn't have to worry about anything like the steps to set up or config TS. By enabling the --ts flag in the create-next-app command, NextJS did all the necessary stuff, simple as that.

Deciding the file/folder structure is probably not a bothersome thing to consider for this kind of project, if not worthless. But still, as someone who prefers things organized and tidy, I did spend quite some time looking up guidelines, best practices and some reference resources. In the end, this is the final structure as of this writing:

For simplicity, the direction I went for was file separation by types, React components were placed in the components folder, hooks grouped together in the hooks folder, contexts in contexts and so on. Anything else that didn't make sense to group with the others was dumped in misc. The components folder was further divided using Brad Frost's Atomic Design method. I can imagine this is a subjective matter with a never-ending argument when working in a team, as even if it was just me with this project, I still had trouble being firm and decisive and sometimes ended up moving files around. I suppose this makes so much sense after experiencing it myself. All in all, my takeaway is that just pick one template/boilerplate of a project with the same type as yours (there are plenty out there) and get right onto it, or don't waste time defending your ideal if it's not a big deal or causes major refactoring. We have 💩 to do, a lot of it.

Working with TypeScript turned out to be surprisingly pleasant. Surprising in a sense that I actually have learned and tried static-typed languages before (Java, C# back in the days I was still in college) and didn't quite like those languages due to their complexity from my personal perspective. I grew attached to JavaScript after learning about web dev as it offered the freedom to define and use variables in any way I wanted, I didn't have to worry about what type I should assign or no longer the nightmares of trying to understand the concepts associated to those static types (OOP, polymorphism, abstraction, anyone?). I guess at that point, my brain was not mature enough to accept them as well as the great advantages they bring. As a result, I never expected that I would come back to like static type one day. However, TypeScript changed my mind, the longer I worked with it, the more benefits I could realize and enjoy. There are just way too many benefits that I could easily get obsessed with. But again, this is still my personal experience, it may not be the case for everyone, the key takeaway is that, to learn and realize the benefits of something fully and thoroughly, the only way is to see it for yourself, experience it, and feel.

Theme UI was an awesome toy to play the "organized" game. All the styling variables, such as spacings, sizes, colors, breakpoints were centrally defined in one place and they could be used across all our components, making a constraint to enforce the consistency. Even better, the almighty sx prop brought a lot of benefits, such as inline styling for our components, and made the pain of coming up with the class names disappear. And as the name implies, Theme UI is perfect for, you know, theming the UI, it was designed for that and did that job flawlessly. It supported dark/light mode out of the box and offered the hooks to manipulate the color modes so easily. However, my portfolio was slightly unique in the way that it offered several different themes that didn't simply rely on the color mode, but also on some features of the UI.

Flat	Soft

The Flat theme has the navigation link in a square shape, while the Soft theme has it mildly rounded with some shadow shades

To solve this, I made a super simple hook that validated the current theme and use it to style the component correspondingly as below:

// useMatchTheme
import { useContext } from "react";
import { GlobalContext } from "../contexts/GlobalContext";
import { ThemeMode } from "../themes";

export default function useMatchTheme(target: ThemeMode) {
  const { theme } = useContext(GlobalContext);
  return theme.val === target;
}

// NavLink.tsx
const linkStyle: ThemeUICSSObject = {
    bg: "primary",
    color: "textReverse",
    display: "flex",
    // some more styles here

    ...(useMatchTheme(ThemeMode.Soft) && {
      fontSize: isHomePage ? "2px" : "1px",
      borderRadius: "10%",
      boxShadow: (theme) => `inset 3em 3em 3em rgba(255, 255, 255, 0.5), 1em 1em 4em 3em ${theme.colors?.shadow}`,
    }),

    ...(useMatchTheme(ThemeMode.Classic) && {
      fontSize: isHomePage ? "2px" : "1px",
      borderRadius: "8%",
      boxShadow: "inset 0 0 0 2em #000, 3em 3em 0 #000",
    }),
  };

Framer Motion was another animation library designed specifically for React and it did it job really well. It was a little tough to get a hang onto at the beginning since I had little experience with React and literally zero experience with any animation library. But once I got a hang of it, I absolutely loved it. The animations are super clean and realistic, I guess it was thanks to these so-called spring and bouncing physics (don't talk to me so deep into Math 😢). The API was simple to use as well as the good documentation with practical examples. (Staring at the old animations in my old porfolio, so fkn 💩). What made Framer Motion even more extreme, from my experience, were these Layout animation which manipulated the animations on components as if they transitioned from one position to another, and AnimatePresence component which allows animations on components as they were removed from the React tree.

As the goal at the beginning was simply to apply a different tech stack to rebuild my portfolio and learn a thing or two out of it, I didn't want to deviate much from the existing core design, but in the end, I felt that there could have been a lot of improvements from the old version, so I think it's interesting to share the look of those differences:

Old	New

Aside from the improvements on how it looked. There were a couple of other improvements behind the scene, including accessibility, new config options (hide taskbar, reduce motion), hiding the config panel on unfocused, and an entire Blog section which pulls the article lists from my contributed blogging platforms using their public APIs.

Final words

I've got a confession to make. All of this blog was just to brag about my new portfolio, to make a big fuss out of it as I invested a lot of my spare time doing it 😋 But I still hope it's helpful and somehow serves as an inspiration for your new portfolio or your next one. Thank you for reading.

Understanding CSS Percentage

Khang — Wed, 08 Sep 2021 08:28:31 +0000

Have you ever failed to understand how the percentages work in CSS? Ever wondered why it's so messed up and has zero logic sometimes? Well, I do. That's why I'm writing this post to share my understanding through my researches and readings with you.

Percentage of what?

As a percentage, obviously there should be a target taken as a reference source. Most answers to this are the parent block of the element we assign the percentage. This is correct, but does not entirely cover all the cases. The most correct answer should be the containing block, meaning the block that contains our element and it doesn't have to be the direct parent.

Let's take a look at the below example:

In this example, I created 3 nested divs, which are 3 squares with the following characteristics:

The outmost grandparent div has a lightgray color with a size of 4x4
The parent div has a darker gray with a size of 2x2
And the red child div which I assigned the size of 50%

If the percentage unit took the parent as the source, the size of the child should have been 1/2 of it, but no, the child actually has the size equals to the parent and 1/2 of the grandparent as you can see. The reason is the grandparent div is the true containing block of the child div, due to the fact that the child has position: absolute, corresponding to position: relative I have set in the grandparent.

Therefore, to identify which is the actual containing block of an element, it's entirely based on the position property of the element itself. You can read more on MDN.

However, for certain properties, the reference source for the percentage unit is neither the parent nor the containing block, instead, it is itself - self element.

Percentage by property

`width`/`height`

Pretty straightforward, as you have seen in the example above, when an element is assigned a percentage value to its width, the width of the containing block is taken as the reference source. Likewise, height of the element refers to the height of the containing block.

`padding`

For padding, either vertical (padding-top/padding-bottom) or horizontal (padding-left/padding-right) refers to the width of the containing block.

Example:

In this example,

The parent div has a size of 6x4.
The child div has a size of 0, but with padding-top and padding-left given 50%

The result is that the child has a size equivalent to 1/2 width of the parent, which is a 3x3 square.

`margin`

Similar to padding, the percentage of margin (both vertical and horizontal) refers to the width of the containing block.

Example:

In this example,

The parent div has a size of 6x4.
The child div with margin-top and margin-left given 50%

The result is that the child is positioned 3 units away from the top and left margins of the parent (1/2 width of the parent).

`top`/`bottom`/`left`/`right`

For these properties (usually come with position), the vertical ones (top/bottom) refer to the height and the horizontal ones (left/right) refer to the width of the containing block.

Example:

In this example,

The parent div has a size of 6x4.
The child div has position: absolute with top and left given 50%

The result is that the child div is positioned 2 units away from the parent's top edge (1/2 height of the parent), and positioned 3 units away from the parent's left edge (1/2 width of the parent).

`transform: translate()`

An incredible property for animation/transition, it also supports percentage value. However, this one does not refer to its containing block, but instead refers to itself.

Example:

In this example,

The parent div has a size of 6x4.
The child div has a size of 2x1 with transform: translate(50%, 50%)

The result is that the child div is positioned 0.5 unit away from the parent's top edge (1/2 height of itself), and positioned 1 unit away from the parent's left edge (1/2 width of itself).

`background-size`

The background-size property brings the complexity of percentage unit to a new level 😄
The percentage value of this property now refers to the background positioning area, which I interpret as similar to the containing block, but with an addition of these 3 factors:

Block with only content (content-box)
Block with content and padding (padding-box)
Block with content, padding and border (border-box)

The 3 factors are given by the background-origin property. You can read more on MDN.

Example:

In this example,

The parent div has a size of 6x4.
The child div has a size of 3x2, no padding, no border
I used a DEV logo (with the ratio of a square 1:1) as a background-image for the child div, with the background-size property set to 50% 50%

The result is that the background image has been stretched to have a size of 1.5x1, corresponding to 1/2 size of the child.

`background-position`

Similar to background-size, the percentage of the background-position property also relies on the background positioning area.

Example:

In this example, the same image and layout was used as the previous. As we changed the value of background-position, some observations we can see:

Without any value (by default, the value is 0 0), the background image is positioned at the top left corner.
With background-position: 0 50%, the background image is positioned left center.
With background-position: 50% 50%, the background image is positioned in the center.
With background-position: 100% 100%, the background image is positioned right bottom.

Note: background-position: 0 50% is equivalent to:

background-position-x: 0

background-position-y: 50%

Apparently, there are some calculations behind the percentage of this property, instead of just the distance between the image's top and left edges to the child's. Through some researching and testing, it appears that the background-position property relies on the following calculation before yielding an actual value:

offset X = (container's width - image's width) * background-position-x

offset Y = (container's height - image's height) * background-position-y

In this case, with

container as the child div
image's width/height is the resulting size of background-size

`font-size`

For font-size, the percentage value solely refers to its direct parent block.

Example:

In this example, I use the same layout as the very first example, with the font-size assigned as below:

13px for grandparent
26px for parent
50% for child

As a result, we can clearly see that the font-size of the child is now equivalent to the grandparent and is 1/2 of the parent, ignoring the fact that the position: relative is assigned to the grandparent, not the parent.

`line-height`

While might not be as popular, I also mention this property as it also supports percentage. The percentage value of line-height relies on the font-size of itself.

Example:

In this example,

The paragraph has 11 lines
font-size is set 20px
line-height is set 150%

The actual height of the whole block is ~329px,

The line-height in this case is: 20 * 150% = 30px.
The height is then: 30 * 11 = 330px, approximate to the actual height.

Takeaways

Hope the article cleared up some of your understanding regarding the percentage value in CSS instead of making things worse 😅

I also tweeted a cheatsheet to summarize what is written so far, maybe it will come in handy to remember the meanings at first:

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

And this is a collection of all the examples in the article: https://codepen.io/collection/xKwgdW

References

Build a desktop app with Electron and Svelte

Khang — Sat, 27 Mar 2021 17:08:49 +0000

Hello everyone, welcome to another article in the series Let's build something!, a series dedicated to building, well, something that involves several techs (techniques and technologies) mostly in JavaScript. In this article, I would like to share my first experience building a desktop app with Electron (with the support from Electron Builder) and Svelte. If you have never heard of any of them, simply click on the links to get to know the awesomeness. Now, let's just dive in.

1. Setup

The setup step is pretty simple and straightforward, we're going to start from a Svelte template as it already contains a lot of dependencies gathered in one boilerplate, then we integrate Electron into our app to get started.

1.1. Initiate a Svelte project

If you have seen my previous post with the browser extension, you should be familiar with this step already. From the CLI, run npx degit sveltejs/template electron-app-svelte. This will make a copy of the Svelte template to your machine with the name electron-app-svelte, and a basic structure as seen in the repository.

Run npm install to install all necessary dependencies in the template's package.json.

1.2. Integrate Electron

Now we install the Electron package by running npm install electron --save-dev. Once done, let's create our index.js file at the root with the following content:

const { app, BrowserWindow } = require("electron");
const path = require("path");

app.on("ready", () => {
  const mainWindow = new BrowserWindow();
  mainWindow.loadFile(path.join(__dirname, "public/index.html"));
  mainWindow.webContents.openDevTools();
});

This is the minimum content required for Electron to create a window and attempt to load our entry HTML file from the public folder.

Next, let's make some changes in our package.json to get it to work:

{
  ...
  "main": "index.js"
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "electron .",
  }
}

So, what I did was adding a new field main and pointing it to the index.js file we've just created, and also modifying the start script to invoke Electron to load our compiled code in the app's window. Now, we just need to run npm run dev to compile our Svelte source code, and subsequently, the start script will be called automatically (as predefined in our Rollup config). Let's try it to see if it already works:

Nope, our app appears blank with some errors in the Dev Console. Apparently, the relevant resources could not be loaded due to the incorrect path, this is due to the fact that we are not serving our resources through any kind of host. The workaround is fairly simple, let's open our index.html file and remove all the / at the start of the links, this should fix it. Try running it again:

Awesome, we now have our Electron + Svelte app ready for development 🎉

2. Development

Once done with the setup, you can now continue the development just like you do with the web apps. The only difference is that our app is now run inside a window instead of a web browser (though they're still partially the same as the window is also using the V8 JavaScript engine under the hood to render web content).

Simply run npm run dev to start the development. Any changes in our source code are tracked and automatically re-compiled, we only need to press Ctrl+R to refresh our window and reflect the changes.

3. Build and distribute

After finishing the development, the next thing we must care about is obviously how to distribute our desktop app, how different it might be from the usual distribution of a web app?

For sure it is different, but not so hard at all. Let's see how this works:

Literally, all we need is an electron-builder package, so let's install it first with npm install electron-builder --save-dev. Next, in our package.json, add a new script as below:

{
  scripts: {
    ...
    "dist": "npm run build && electron-builder"
  }
}

And that's it. Our dist script will produce a built version of our Svelte source code and trigger the electron-builder command to produce a complete distributable desktop app. Let's try it now and see what it gives us, run npm run dist:

Look, a dist folder appears as a result, and inside of it, there are a lot of things, but we only need to concern ourselves with those 2 highlights:

The .exe installer package (as Windows was my target OS), which is what we need to distribute our app to the users.
Upon installing, the .exe package will just extract exactly what is inside the win-unpacked folder to the users' machine and the app can then be used. Therefore, alternatively, you may also compress this folder and distribute it to the users, which still delivers the same outcome.

A complete repository you can find at: https://github.com/khang-nd/electron-app-svelte

And that is all in this sharing article, thank you for reading and see you in the next one.

A simple RESTful service to display DEV.to stats

Khang — Thu, 11 Mar 2021 23:41:58 +0000

So, I'm back again with another pet project I have just finished and would like to share with everyone in this article:

👆 This is it, an image generated dynamically from a RESTful service that allows me to easily display my statistics from DEV.to anywhere. Interesting? Read on to see some background and what I learned from making this, or if you want yours, head right to my repo for instructions on how to deploy one for your own:

khang-nd / DEV-stats

Display DEV.to stat card anywhere

DEV Stats

👆 That's mine, want yours? It's easy! Follow these steps:

Star this repo (optional, but it makes me 🙂)
Select one below to deploy this repo to your platform of choice
Generate your DEV API key
Add it as an environment variable named API_KEY (for Heroku you need to configure this variable in the settings after deployed)
Deploy and enjoy the result!

Options

The service accepts these query parameters as inputs to customize the stat card:

lang=en - localize the card. Add your language in i18n.json
background=fff - set the card's background color
text=000 - set the card's text color
chartColors=dc67ab,dc67ce,a367dc,6771dc,67b7dc,fff - set the chart colors, the last one is the labels' color

Examples:

Dark theme:

![](https://dev-stats-khangnd.herokuapp.com?background=19252f&text=fff)

Customized chart colors:

![](https://dev-stats-khangnd.herokuapp.com?chartColors=3bf5c6,28d8ab,23bf97,1ca280,23886e,333)

Contributing

I would appreciate it, feel free to open pull requests to contribute if you like it and…

View on GitHub

The inspiration

Yes, I believe some people should have realized it, this was inspired by the amazing idea from anuraghazra which allows us to dynamically generate our Github stats and display it easily anywhere as an SVG image. I find it interesting how he could manage it, so I went and checked out his source code, and attempted the same method for my DEV stats.

The techs

As a developer with little experience in backend, I'm just simply amazed by the idea of using the RESTful API as such, to generate an SVG image that is capable of dynamically display your data from other sources.

This is also a great start for me to get into the world of server-side JS, powered by NodeJS and Express. So thanks to the love for JS, I was familiar with most of the things already, and after taking some hours to learn the basics about Node from a 1-hour course by Mosh (which I really recommend), and read through some docs and articles, I got things up and running without so much trouble.

The data for my DEV stats are provided thanks to the DEV API. Though still in a beta stage, the API is already capable of providing a handful of information that, after some simple processing, can be displayed as statistics.

The key factor for the success of this idea is how to represent the data dynamically, in the simplest way where it may be used anywhere, and that factor is by using SVG. I also went through some guides and articles about SVG to proceed and in the end, from making this, I got to learn the basic structure of an SVG document and some common elements. The pie chart, which shows the most commonly used tags in the articles, is a little tough for my current capability, so I went and picked a simpler workaround by using the awesome QuickChart service offered by Ian Webster. QuickChart is really convenient, be sure to check it out.

Deploying to Vercel/Heroku was also not so bad of an experience for a beginner. I also created 2 buttons for convenient instant deployment in the repository. So in summary, check out the repo and I would welcome any contribution to improve or extend it. Thank you for reading, and see you in the next post.

Build an Android app with web techs

Khang — Sat, 27 Feb 2021 09:20:40 +0000

In this article, I'm going to share with you how I built an Android app with web techs using WebView.

Yes, there are other alternative approaches, like PWA or React Native where web techs or the likes are involved to possibly achieve the same outcome, but due to the fact that a solution or approach may have the upperhand over the other depending on the context, it's always good to know more than just one solution. In this case, WebView provides us more interaction with our Android through the Javascript Interface and the learning path for this solution might be flatter if you already have some basic knowledge in Java/Kotlin and proficient in web development. Now let's get started:

1. Basic setup

1.1. The Android app

Download and install Android Studio.

Start Android Studio and create a new project with an empty activity:

Select Java as the development language (or Kotlin if you are familiar with it)

Once done, the main structure of our app is as follows:

A lot of things, but let's just put our focus on the MainActivity class, where we write our code and the activity_main.xml, where we construct the app's layout.

In activity_main.xml, remove everything under the root and add:

<WebView
    android:id="@+id/webapp"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

This creates a WebView container which will display a web page in our app. The width and height are set to match_parent which fills up the whole screen.

In the MainActivity class, add the following lines to onCreate:

WebView webView = (WebView) findViewById(R.id.webapp);
webView.getSettings().setJavaScriptEnabled(true);

This searches for the WebView with the id webapp from our layout that we defined and enables its JavaScript.

Now create an assets folder under the root app as shown in the screenshots below:

The assets folder will contain the web resources we use in our app.

If the web resources are composed of plain HTML, CSS and JS, you can add them directly here, if they have a more complex composition such as some frameworks and bundlers, you might need to put the built version here instead, so the app will be of an optimal size.

1.2. The web page

Now that we had our Android app ready to display a web page, we need a web page. I keep this guide simple and easy by just adding an HTML file directly in the assets folder with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Good day!</h1>
    <p>You are viewing this web page from Android!</p>
</body>
</html>

Then add the following line to your MainActivity class to load this page locally:

webView.loadUrl("file:///android_asset/index.html");

If you are going to serve the web page on a host, you may then replace the URL to point to the target host:

webView.loadUrl("https://mydomain.com");

Now try running your app on a simulator or connected device, you should be able to see the result:

And that's it, we have just finished creating our Android app which is mainly constructed with web contents.

2. Interacting with Android

I did mention that using this WebView approach, our web page has the possibility to interact with our Android through the JavaScript Interface, correct? Let's see how it works:

Under the same package as the MainActivity, create a new class called WebAppInterface with the following contents:

package com.example.androidwebapp;

import android.os.Build;
import android.webkit.JavascriptInterface;

public class WebAppInterface {
  @JavascriptInterface
  public String getAndroidVersion() {
    return Build.VERSION.RELEASE;
  }
}

Our function to get the Android version is marked with the @JavaScriptInterface annotation and will be available to our web page in a few more steps.

In our MainActivity class, add:

webView.addJavascriptInterface(new WebAppInterface(), "Android");

This exposes any function we defined in the WebAppInterface class to the web page's JavaScript under the "Android" alias.

And finally, in our HTML page, add the following script:

<script>
document.body.append("Your device is using Android " + Android.getAndroidVersion());
</script>

Try running again and you should be able to see the Android version of your simulator or device.

A thing to note about this technique is that, due to the differences between Java/Kotlin and JavaScript, only primitive data types may be shared through the interface. For instance, exposing the function that returns a Java array as follows will resolve to undefined in JavaScript:

@JavascriptInterface
public int[] getJavaArray() {
  return new int[] { 0, 1, 2 };
}

A complete repository you can find at: https://github.com/khang-nd/android-web

And this concludes my sharing article, thank you for reading, see you in the next one.

Build a browser extension with Svelte

Khang — Sun, 07 Feb 2021 12:11:52 +0000

I have been learning Svelte. I find it extremely easy to work with. It is lightweight and fast, a suitable option for building small-scaled apps and websites. I've also been learning about how a browser extension is made. Then I find it a perfect playmate for Svelte, and the learning paths crossed. So today I would like to share my process of building a complete cross-browser extension with Svelte.

Before reading on, make sure that you're familiar with a browser extension and how to construct one with pure HTML/CSS/JS, and how to work with a front-end library/framework in a NodeJS environment. Otherwise, here are some resources to get you started:

Chrome Extension - Getting started (Manifest v2)
Svelte - Getting started
Build a cross-browser extension
Extensionizr - Chrome extension structure generator

1. Setup

1.1. Initiate a Svelte project

From the CLI, run npx degit sveltejs/template my-extension. This will make a copy of the Svelte template to your machine with the name my-extension, and a basic structure as seen in the repository.

1.2. Install dependencies

Run npm install to install all necessary dependencies in the template's package.json.

To build a cross-browser extension, the webextension-polyfill is required. Therefore, run npm install --save-dev webextension-polyfill to install it.

2. Prepare the Manifest

Now that we have things ready. Let's create the heart of a browser extension, the manifest.json.

Create manifest.json and place it inside the public folder. A bare minimum content of a manifest is:

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
}

And depending on the purpose and functionality of the extension, other fields may be specified. For a complete list of supported fields, refer to Chrome's manifest file format.

3. Add functionalities

Silly things that our extension will be capable of:

Say hello when somebody installs our extension (background page)
"Hack" the website's background (content script)
Configure the desired background (popup page)

Now let's dig through.

3.1. Background page

The background page will be loaded whenever the extension is active, and react to the events we set. In our case, the extension reacts "say hello" to the event "somebody installs the extension".

Create background.js inside the src folder and add the following script:

import browser from "webextension-polyfill";

browser.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === "install") {
    alert("Hello");
  }
});

More about the runtime.onInstalled event: MDN.

3.2. Content script

The content script has direct access to the current web page. Therefore, it is a perfect solution to "hack the website's background".

Create injection.js inside the src folder and add the following script:

import browser from "webextension-polyfill";

const key = "background";
browser.storage.local.get(key).then((data) => {
  document.body.style = `background: url(${data[key]})`;
});

More about the storage.local API: MDN.

3.3. Popup page

The popup page is literally the front end of the extension, where users can interact with our extension. In our case, we give users the possibility to "configure the desired background". And this is where Svelte comes into the play.

Remove props: { name: 'world' } from main.js.

Replace content in App.svelte with the following script:

<script>
  import browser from "webextension-polyfill";

  let image = "https://images.unsplash.com/photo-1586074299757-dc655f18518c?fit=crop&w=1268&q=80";

  function change() {
    browser.storage.local.set({ background: image });
  }
</script>

<main>
  Image URL: <input type="text" bind:value={image} />
  <button on:click={change}>Change</button>
</main>

3.4. Add to the Manifest

Now modify the manifest.json we created earlier to include these functionalities:

{
  ...
  "permissions": ["storage"],
  "background": {
    "scripts": ["build/background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["build/injection.js"]
    }
  ]
}

4. Config Rollup and build

The final step involves some configuration for Rollup to generate the background.js and injection.js to the build folder, so that the Manifest could recognize.

By default, the rollup.config.js file only outputs the main.js entry to the build folder under the alias bundle.js. To include the other scripts, modify the config as follows:

export default [
  {
    input: "src/main.js",
    ...
  },
  {
    input: "src/background.js",
    output: {
      sourcemap: true,
      format: "iife",
      file: "public/build/background.js",
    },
    plugins: [resolve(), commonjs()],
    watch: {
      clearScreen: false,
    },
  },
  {
    input: "src/injection.js",
    output: {
      sourcemap: true,
      format: "iife",
      file: "public/build/injection.js",
    },
    plugins: [resolve(), commonjs()],
    watch: {
      clearScreen: false,
    },
  },
]

This will output multiple entries, including the background.js and injection.js to the build folder, and resolve any dependencies in our scripts.

And finally, run npm run build to compile our project and everything will be available in the public folder. We may then load our extension in Chrome and see the result:

A complete repo you can find at: https://github.com/khang-nd/browser-extension-svelte

Thank you for reading, and see you in the next post.

Make a website with a single HTML file

Khang — Sun, 31 Jan 2021 16:46:20 +0000

There is a clever way to create a whole website with just a single HTML, some CSS, and no JS. Did you know?

Step 1

Create an empty HTML5 website:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Step 2

Add some anchors and sections with ids for the pages:

...
<body>
    <nav>
        <a href="#home">Home</a>
        <a href="#blog">Blog</a>
        <a href="#about">About</a>
    </nav>

    <main>
        <section id="home">
            <h1>Home</h1>
            <p>This is the homepage!</p>
        </section>
        <section id="blog">
            <h1>My Blog</h1>
        </section>
        <section id="about">
            <h1>About Me</h1>
        </section>
    </main>
</body>

Step 3

Add some CSS to toggle the pages:

<head>
...
    <style>
        section {
            display: none;
        }

        section:target {
            display: block;
        }
    </style>
</head>

Step 4

There is no step 4. All that left is to customize it.

And that's it. You have a website ready in just a few steps, no JS used, no complex framework, just an HTML file, and a text editor. The magic behind this is by utilizing the anchor links and the :target pseudo selector to switch between the pages without the help of any JS.

The :target pseudo selector matches when the hash in the URL and the id of an element are the same.

Reference: CSS-Tricks

10 Retro CSS frameworks to relive your childhood

Khang — Sun, 24 Jan 2021 16:44:07 +0000

Prank your friends or colleagues, build a retro-looking portfolio for yourself, entertain visitors to your websites with old-school themes, or most importantly, let your creativity run wild, have fun with coding and relive your childhood with these amazing Retro CSS frameworks.

NES.css (Demo)

nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク

日本語 / 简体中文 / Español / Português / Русский / Français

NES.css is a NES-style(8bit-like) CSS Framework.

Installation

Styles

NES.css is available via either npm (preferred), Yarn, or a CDN.

via package manager

npm install nes.css
# or
yarn add nes.css

Our package.json contains some additional metadata under the following keys:

sass - path to our main Sass source file
style - path to our non-minified CSS

AltCSS(sass, scss...)

// style.scss
@import "./node_modules/nes.css/css/nes.css"

JavaScript

// script.js
import "nes.css/css/nes.min.css";

You need to install css-loader.

HTML

<!-- index.html -->
<html>
  <head>
    <link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
  </head>
  <body></body>
</html>

via CDN

Import the CSS via a <link /> element:

<!-- minify -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="

…

View on GitHub

98.css (Demo)

jdan / 98.css

A design system for building faithful recreations of old UIs

98.css

A design system for building faithful recreations of old UIs.

98.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.

Be sure to check out XP.css and 7.css as well.

Installation / Usage

The easiest way to use 98.css is to import it from unpkg.

<!DOCTYPE html>
<html>
<head>
  <title>98.css example</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://unpkg.com/98.css" />
</head>
<body>
  <div class="window" style="margin: 32px; width: 250px">
    <div class="title-bar">
      <div class="title-bar-text">
        My First VB4 Program
      </div>
    </div>
    <div class

…

View on GitHub

BOOTSTRA.386 (Demo)

kristopolous / BOOTSTRA.386

A vintage 1980s DOS inspired Twitter Bootstrap theme

Bootstrap/386 is a Twitter bootstrap v2/3/4/5(in progress) theme to make webpages look like they are from the gentler, less distracting time of the 1980s.

See A Demo By Clicking Here

Download for your favorite bootstrap version with all the necessary JS and CSS to get started right away:

BOOTSTRA/386 ][ (2013) demo 144KB
BOOTSTRA/386 iii (2015) 423KB
BOOTSTRA/386 4 (2020) - demo remaining issues - current build
ブートストラップ/386 5.0 (2023) - In progress

bootstrap.mp4

     ____  ____  ____  _____________________  ___    ____        __   _____ ____  _____
    / __ )/ __ \/ __ \/_  __/ ___/_  __/ __ \/   |  / __ \     _/_/  |__  /( __ )/ ___/
   / __  / / / / / / / / /  \__ \ / / / /_/ / /| | / /_/ /   _/_/     /_ </ __  / __ \ 
  / /_/ / /_/ / /_/ / / /  ___/ // / / _,

…

View on GitHub

Geo (Demo)

divshot / geo-bootstrap

A timeless Twitter Bootstrap theme built for the modern web.

Geo

Geo is a timeless Twitter Bootstrap theme built for the modern web.

Usage

Download bootstrap.css or bootstrap.min.css from /swatch. Replace the default Bootstrap stylesheet with one of these files.

To use the image backgrounds download the graphics inside /img. Graphics used on our test page can be found inside /img/test.

Customization

Geo was built with Bootswatch Swatchmaker.

To customize Geo edit /swatch/variables.less and /swatch/bootswatch.less. Refer to the Swatchmaker README for instructions to regenerate the Bootstrap stylesheet.

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to…

View on GitHub

XP.css (Demo)

botoxparty / XP.css

A CSS framework for building faithful recreations of operating system GUIs.

XP.css

A design system for building faithful recreations of old UIs.

XP.css is an extension of 98.css. A CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.

Installation / Usage

The easiest way to use XP.css is to import it from unpkg.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>XP.css example</title>
    <meta charset="UTF-8" />
    <!-- Windows XP Theme (include only one theme at a time) -->
    <link rel="stylesheet" href="https://unpkg.com/xp.css" />

    <!-- Windows 98 Theme (include only one theme at a time) -->
    <link rel="stylesheet" href="https://unpkg.com/xp.css@0.2.3/dist/98.css" />
  </head>

  <body>
    <div class="window" style="

…

View on GitHub

PSone.css (Demo)

micah5 / PSone.css

🎮 PS1 style CSS Framework, inspired by NES.css

PSone.css

Please feel free to submit a pull request, no matter how small. I love getting them.

At the moment there's just a CSS file that you can link to:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/98mprice/PSone.css@master/PSone.min.css">

I hope to add some JS eventually to help with progressbars etc.

Reference

Container

From FF7

<div class="container">
  <label class="title">Default</label>
  <p>Kick! Punch! It's all in the mind.</p>
</div>
<div class="container dark">
  <label class="title">dark</label>
  <p>You see, the island is the site of a secret nuclear
   weapons disposal facility.</p>
</div>
<div class="container light">
  <label class="title

…

View on GitHub

RPGUI (Demo)

RonenNess / RPGUI

Lightweight framework for old-school RPG GUI in web!

Israel is under a brutal attack from Gaza on multiple fronts Hundreds of innocent civilians were murdered and kidnapped from their own homes. Hundreds are still missing.

I won't show any gore and horrific photos here. But here's some more information.

Please support Israel in these dark times.

RPGUI

Lightweight framework for old-school RPG GUI in web!

Live examples here

What is it?

This framework provide out-of-the-box GUI for web games with old-school RPG style. Once including this lib all you need to do is start adding regular html elements with RPGUI classes, and RPGUI will do all the rest!

(Image is slightly outdated.)

Key Features

The following are the key features of RPGUI:

Using RPGUI don't require coding at all! Just using css classes.
A complete and whole CSS…

View on GitHub

Win95.css (Demo)

AlexBSoft / win95.css

Responsive Bootstrap 4 windows 95/98 theme & landing page template

Win95.CSS

Make your bootstrap look like Windows 95/98.

Demo
Documentation will be soon.

Features

Windows 95 button styles
Windows 98 cards
Windows 98 icons (256-color)
Fully Responsive
Bootstrap 4

Some screenshots

How your sites can be:

Sources:

Webamp https://github.com/captbaritone/webamp
Clippy.js https://www.smore.com/clippy-js

View on GitHub

7.css (Demo)

khang-nd / 7.css

A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.

7.css

7.css is a CSS framework that takes semantic HTML and styles them to the Windows 7 design It is built on top of XP.css, which is an extension of 98.CSS.

It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.

📦 Installation / Usage

Directly via unpkg:

<!DOCTYPE html>
<html>
  <head>
    <title>7.css example</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/7.css" />
  </head>
  <body>
    <div class="window" style="margin: 32px; width: 250px">
      <div class="title-bar">
        <div class="title-bar-text">My First Program</div>
      </div>
      <div class="window-body">
        <p>Hello, world!</p

…

View on GitHub

Pokémon GameBoy CSS (Demo)

luttje / css-pokemon-gameboy

A CSS-framework based on the gameboy color version of the original Pokémon games.

Pokémon GameBoy CSS

Inspired by: https://github.com/nostalgic-css/NES.css

This is a joke CSS-framework and it is not intended for use in production. You can see a demo here. The demo performs poorly on mobile devices or small resolutions.

Using the distribution

Download the latest release
The css is in the styles directory. All other assets are inlined into the css.
The release contains a template.html to get your started.

-OR-

Append the following include on the page where you want this style:
```
<link rel="stylesheet" href="./styles/css-pokemon-gameboy.css">
```
See the demo, index.html or .scss-files for all possible classes and effects.

Compile it yourself

Compiling

Start a terminal/command prompt in the root directory of this repository
Run npm install to install the dependencies
To build the demo run npm run build to build the distribution files to the dist directory (preview the demo with npm run…

View on GitHub

DEV Community: Khang

Ranking Microsoft Windows versions - 2025 Edition

🏆 Windows 7 - the GOAT, no debate

🥈 Windows XP - that startup sound *chefs kiss*

🥉 Windows 10 - when Microsoft finally listened

4️⃣ Windows 98 - if you know, you know

5️⃣ Windows 11 - trying hard to be cool

Honorable mentions and conclusion

I built a Nokia Composer with AI's assistance

What is Nokia Composer?

How it works

Deep dive

Example

How I built it

With AI's assistance

Iterations and refinements

Conclusion

[Boost]

Turning my codepen into an actual app - Brick 1100

Khang for Visnalize ・ Oct 7 '23

Turning my codepen into an actual app - Brick 1100

Nokia 1100 Simulation

A silly idea that got realized

The making process

Breaking down the components

Adding some twists

Final words

I rebuilt my portfolio after 2 years

A little bragging/motivation

The process and experience

Final words

Understanding CSS Percentage

Percentage of what?

Percentage by property

width/height

padding

margin

top/bottom/left/right

transform: translate()

background-size

background-position

font-size

line-height

Takeaways

References

Build a desktop app with Electron and Svelte

1. Setup

1.1. Initiate a Svelte project

1.2. Integrate Electron

2. Development

3. Build and distribute

A simple RESTful service to display DEV.to stats

khang-nd / DEV-stats

Display DEV.to stat card anywhere

DEV Stats

Options

Contributing

The inspiration

The techs

Build an Android app with web techs

1. Basic setup

1.1. The Android app

1.2. The web page

2. Interacting with Android

Build a browser extension with Svelte

1. Setup

1.1. Initiate a Svelte project

1.2. Install dependencies

2. Prepare the Manifest

3. Add functionalities

3.1. Background page

3.2. Content script

3.3. Popup page

3.4. Add to the Manifest

4. Config Rollup and build

Make a website with a single HTML file

Step 1

Step 2

Step 3

Step 4

🥈 Windows XP - that startup sound chefs kiss

`width`/`height`

`padding`

`margin`

`top`/`bottom`/`left`/`right`

`transform: translate()`

`background-size`

`background-position`

`font-size`

`line-height`