{% embed https://dev.to/visnalize/turning-my-codepen-into-an-actual-app-brick-1100-on3 %}

Turning my codepen into an actual app -...

[Boost]

Khang

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

{% embed https://dev.to/khangnd/nokia-1100-simulation-2hef %}

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**](https://play.google.com/store/apps/details?id=com.visnalize.brick1100). 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](https://visnalize.com/brick1100/changelog.html#_0-0-1), 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:

![Brick 1100 components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65aigdwqjto881os3uax.png)

- 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:

```html
<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:

```js
// 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:

![Bridge 1100 model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cllsehc05yilq0orszfc.png)

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](https://github.com/Visnalize/bridge-1100).

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](https://github.com/Visnalize/brick-1100-apps). 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:

![Brick 1100 online apps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53cw2mjrfxzu6dpo0zwo.jpg)

## 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**](https://play.google.com/store/apps/details?id=com.visnalize.brick1100). And feel free to join [our Discord](https://discord.gg/6AQDnZa4Xm) 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 ✌

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

showdev

Visnalize

Turning my codepen into an actual app - Brick 1100

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:
* [Old version](https://web.archive.org/web/20220509014455/https://khang-nd.github.io/)
* [New version](https://khangnd.info/)

----

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](https://unios.com/) 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](https://github.com/khang-nd/7.css) [projects](https://github.com/khang-nd/win7). 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](https://khangnd.info/) 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.

{%embed https://dev.to/khangnd/comment/173o9 %}

And it turned out, people enjoyed my portfolio, [the github repo](https://github.com/khang-nd/.info/tree/v1) received around 20⭐, my comment received the most ❤ reactions at that time, and in the end, I was awarded the [Beloved Comment badge](https://dev.to/badge/beloved-comment). Totally unexpected, I was super excited, what an epic entrance I had!

![Davie504 Epico](https://c.tenor.com/wCUmKO7goKcAAAAC/davie504-epic.gif)

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](https://www.bosch.com/), 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](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), [Theme UI](https://theme-ui.com/) and [Framer Motion](https://www.framer.com/motion/).

## The process and experience

[Getting started with NextJS](https://nextjs.org/docs/getting-started) 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](https://nextjs.org/docs/basic-features/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:

![Winport's project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8qlqchfpammsoolup5t.png)

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](https://atomicdesign.bradfrost.com/chapter-2/). 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**](http://react-file-structure.surge.sh/) 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](https://theme-ui.com/getting-started/) 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](https://github.com/khang-nd/khang-nd.github.io/blob/main/src/themes/index.ts) and they could be used across all our components, making a constraint to enforce the consistency. Even better, the almighty [`sx` prop](https://theme-ui.com/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](https://theme-ui.com/theme-spec), 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
|----|----
|![Flat theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksdbpfugmrvygkupy4pc.png) | ![Soft theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n1er1xc5wve7gxms0g2.png)

_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:

```ts
// 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;
}
```

```ts
// 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](https://www.framer.com/docs/introduction/) 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](https://www.framer.com/docs/animation/#layout-animations) which manipulated the animations on components as if they transitioned from one position to another, and [AnimatePresence component](https://www.framer.com/docs/animate-presence/) which allows animations on components as they were removed from the React tree.

![Magic](https://i.pinimg.com/originals/73/e5/53/73e55358e7b0703f20602b01b408e9e6.gif)

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
|---  | ---
|![Flat old](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5setkk5r8vv0a827831.png) | ![Flat new](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb0i052968qmo2oisypo.png)
|![Neumorphism old](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4casxddwzs04npx47pw3.png) |![Soft new](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yex2z4g3cjhlku1wx5mv.png)
|![Classic old](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zo3od84unipobzchv55p.png)|![Classic new](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n084yvdvii1ehccb0mdo.png)
|![Old config panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaaexff0c1961udu1pf1.png)|![New config panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itsuny7wcj9wj52kjnwu.png)

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.

* [Old version of my portfolio](https://web.archive.org/web/20220509014455/https://khang-nd.github.io/) ([source code](https://github.com/khang-nd/.info/tree/v1))
* [New version of my portfolio](https://khangnd.info/) ([source code](https://github.com/khang-nd/.info/))

It's gonna be a long article with many boring things all about me, I believe it's fair to think that...

I rebuilt my portfolio after 2 years

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:
{% codepen https://codepen.io/khangnd/pen/powbjEL %}

In this example, I created 3 nested `div`s, 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block).*

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:
{% codepen https://codepen.io/khangnd/pen/YzQWWRG %}

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:
{% codepen https://codepen.io/khangnd/pen/MWoejWd %}

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:
{% codepen https://codepen.io/khangnd/pen/MWoerzw %}

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:
{% codepen https://codepen.io/khangnd/pen/QWgEQvy %}

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](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin).**

Example:
{% codepen https://codepen.io/khangnd/pen/rNwLdMZ %}

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:
{% codepen https://codepen.io/khangnd/pen/JjJKLaP %}

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:
{% codepen https://codepen.io/khangnd/pen/MWoeXMO %}

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:
{% codepen https://codepen.io/khangnd/pen/oNwLMXR %}

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:

{% tweet 1433999937365164032 %}

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

## References

* [Containing block (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block)
* [Percentage (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage)
* [Background position's percentages (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#regarding_percentages)
* [What are CSS percentages? - Jim Fisher](https://jameshfisher.com/2019/12/29/what-are-css-percentages/)
* [What does 100% mean in CSS? - Amelia Wattenberger](https://wattenberger.com/blog/css-percents)

Have you ever failed to understand how the percentages work in CSS? Ever wondered why it's so messed...

Understanding CSS Percentage


Hello everyone, welcome to another article in the series [Let's build something!](https://dev.to/khangnd/series/11440), 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](https://www.electronjs.org/) (with the support from [Electron Builder](https://www.electron.build/)) and [Svelte](https://svelte.dev/). 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.

![](https://dev-to-uploads.s3.amazonaws.com/i/0qk48rw1f4at61vo91mb.png)

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:

```javascript
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:

```json
{
  ...
  "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:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kncxosyx3ewvg3zrmxnn.png)

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:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nzh9o5xqgd4so7ox9ua.png)

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:

```json
{
  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`:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hy002c4kh20cmqa8eded.png)

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.

Hello everyone, welcome to another article in the series Let's build something!, a series dedicated t...

Build a desktop app with Electron and Svelte

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

![Khang's DEV stats](https://dev-stats.vercel.app/?background=efefef)

👆 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:

{% github https://github.com/khang-nd/DEV-stats %}

# The inspiration

Yes, I believe some people should have realized it, this was inspired by the [amazing idea](https://github.com/anuraghazra/github-readme-stats/) from [anuraghazra](https://dev.to/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](https://nodejs.org/en/) and [Express](https://expressjs.com/). 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](https://youtu.be/TlB_eWDSMt4) (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](https://docs.forem.com/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](https://quickchart.io/) service offered by [Ian Webster](https://dev.to/iwebst). 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.

So, I'm back again with another pet project I have just finished and would like to share with everyon...

A simple RESTful service to display DEV.to stats

In this article, I'm going to share with you how I built an **Android app with web techs using [WebView](https://developer.android.com/reference/android/webkit/WebView)**.

Yes, there are other alternative approaches, like [PWA](https://web.dev/progressive-web-apps/) or [React Native](https://reactnative.dev/) 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](https://developer.android.com/reference/android/webkit/JavascriptInterface) 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](https://developer.android.com/studio).

Start Android Studio and create a new project with an empty activity:
![android project template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns94v0kq2yeukvmhoocj.png)

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:
![android project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eamu00q7v8ygwposvus.png)

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:

```xml
<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`:

```java
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:

![create assets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbt0zsfmqp6b05aa42pk.png)

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:

```html
<!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:

```java
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:

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/802h6fwe701okeg4seac.png)

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:

```java
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:

```java
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:

```html
<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:

```java
@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.


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

Build an Android app with web techs


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](https://developer.chrome.com/docs/extensions/mv2/getstarted/) (Manifest v2)
* [Svelte - Getting started](https://svelte.dev/blog/the-easiest-way-to-get-started)
* [Build a cross-browser extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension)
* [Extensionizr](http://extensionizr.com/) - 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](https://github.com/sveltejs/template) to your machine with the name `my-extension`, and a basic structure as seen in the repository.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0qk48rw1f4at61vo91mb.png)

## 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](https://github.com/mozilla/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:

```json
{
  "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](https://developer.chrome.com/docs/extensions/mv2/manifest/).

# 3. Add functionalities

Silly things that our extension will be capable of:

* Say hello when somebody installs our extension ([background page](https://developer.chrome.com/docs/extensions/mv2/background_pages/))
* "Hack" the website's background ([content script](https://developer.chrome.com/docs/extensions/mv2/content_scripts/))
* Configure the desired background ([popup page](https://developer.chrome.com/docs/extensions/reference/browserAction/#popup))

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:

```javascript
import browser from "webextension-polyfill";

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

*More about the `runtime.onInstalled` event: [MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onInstalled).*

## 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:

```javascript
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](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local).*

## 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:

```html
<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:

```json
{
  ...
  "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:

```javascript
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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/unardrhpmbqcq78zoevm.png)

*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.


I have been learning Svelte. I find it extremely easy to work with. It is lightweight and fast, a sui...

Build a browser extension with Svelte

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:
```html
<!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:
```html
...
<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:
```html
<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](https://css-tricks.com/a-whole-website-in-a-single-html-file/)*

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

Make a website with a single HTML file

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](https://nostalgic-css.github.io/NES.css/))
{% github https://github.com/nostalgic-css/NES.css %}

# 98.css ([Demo](https://jdan.github.io/98.css/))
{% github https://github.com/jdan/98.css %}

# BOOTSTRA.386 ([Demo](https://kristopolous.github.io/BOOTSTRA.386/))
{% github https://github.com/kristopolous/BOOTSTRA.386 %}

# Geo ([Demo](http://divshot.github.com/geo-bootstrap/))
{% github https://github.com/divshot/geo-bootstrap %}

# XP.css ([Demo](https://botoxparty.github.io/XP.css/))
{% github https://github.com/botoxparty/XP.css %}

# PSone.css ([Demo](https://micah5.github.io/PSone.css/))
{% github https://github.com/micah5/PSone.css %}

# RPGUI ([Demo](https://RonenNess.github.io/RPGUI/))
{% github https://github.com/RonenNess/RPGUI %}

# Win95.css ([Demo](https://alexbsoft.github.io/win95.css/))
{% github https://github.com/AlexBSoft/win95.css %}

# 7.css ([Demo](https://khang-nd.github.io/7.css/))
{% github https://github.com/khang-nd/7.css %}

# Pokémon GameBoy CSS ([Demo](https://timothywalter.github.io/css-pokemon-gameboy/))
{% github https://github.com/timothywalter/css-pokemon-gameboy %}

Prank your friends or colleagues, build a retro-looking portfolio for yourself, entertain visitors to...

10 Retro CSS frameworks to relive your childhood

In case you missed it, last week I wrote a post about a recent side project I worked on and submitted to the DOHackathon:
{% link https://dev.to/khangnd/7-css-my-first-published-package-21fd %}

I tweeted to share it, tagging [the original creator](https://twitter.com/jdan) of [98.css](https://github.com/jdan/98.css), who was the initiator. Apparently, he would notice but surprisingly, he seemed to be amused by how I did it and asked me to blog about it. {% twitter 1345190754369593344 %}

So here I am today, blogging about how I did it, and what I learned from following in his footsteps, and the awesome [creator](https://twitter.com/adamhamdev) of [XP.css](https://github.com/botoxparty/XP.css) as well. Hope this is useful to you in some ways.

# The inspiration

I first coincidentally came across the [XP.css](https://github.com/botoxparty/XP.css) repository of [Adam](https://twitter.com/adamhamdev) as I was exploring Github. And I was totally absorbed by the uniqueness and creativity of the idea, to recreate the UI system of Windows XP on the web. Then I also got to know about [98.css](https://github.com/jdan/98.css) which was the repo where the idea originated. And as a fellow loyal fan of Windows, I started a similar project of my own for Windows 7, from a clone of XP.css.

# The way I did

After cloning XP.css to my machine, I gave my repo a new name. Some ideas were *W7.css* or *Win7.css*, but I finally decided that it should be a name as simple as its predecessors, so I went with **7.css**.

From the 98.css design system that was all wrapped up in just one CSS file, Adam scaled up XP.css to an SCSS skeleton and named it the GUI framework. It was extremely easy to work with as each SCSS file acted as a UI component where I can quickly find which file I need to modify for a certain component. So, I started "upgrading" the styles from Windows XP to Windows 7.

![GUI framework](https://dev-to-uploads.s3.amazonaws.com/i/a36sw4uaxgoxr3p30wyu.png)

## Button

The components were all basically the same as those in the formers, only one new component that I added was the Progress Bar. However, the adaptation to Windows 7 style was quite challenging and required a lot of attention to details to make it somewhat resemble the actual UI. The key factors to recreate the design of Windows 7 (which I think was known as **Skeuomorphism**, a popular design trend at the time) were **`gradient background`** and **`box-shadow`**. For instance, a Windows 7 `button` would look like this:

![A Windows 7 button](https://dev-to-uploads.s3.amazonaws.com/i/494s3kmnny9d657ik99h.png)

Notice how the gradient cut at about halfway, from a light gray to a darker gray, and a slim white border around the edges of the button. So to recreate this, the key CSS properties used were:

```css
button {
    ...
    background: linear-gradient(to bottom, #eee 45%, #ddd 45%, #bbb);
    box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
}
```

## Radio Button

For a `radio button`, it was quite trickier as the design was like this:

![A Windows 7 radio button](https://dev-to-uploads.s3.amazonaws.com/i/d5xs4jlf1btqek0gxfl3.png)

As a common method, to override the browser's default styling of radio buttons, one has to hide the actual `input` and have the `label` handle all the tough work. So in my case, I also had to use a `label`, with a `::before` pseudo-element to create the outer circle, and an `::after` to create the inner mark. Notice how there was a gray inset shadow in the outer circle, and some glowing in the upper left side of the blue inner mark. So the CSS rules and key properties used were:

```css
input[type=radio] + label::before {
    ...
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px #ddd, inset 1px 3px 4px #888;
}

input[type=radio]:checked + label::after {
    ...
    background: #7cd3eb;
    box-shadow: inset -1px -1px 0 0.5px #16638f, inset -1px -1px 0 1px #1985c0;
}
```

## Progress Bar

The looks of a `progress bar` seemed a little bit similar to a button's due to some cutting gradient, so I thought at first, it would be easy to recreate:

![A Windows 7 progress bar](https://dev-to-uploads.s3.amazonaws.com/i/flfizx2d207lry8n6z9j.png)

But hell no, it was absolutely not. Look at the CSS I had to set up and you will see:

```css
[role="progressbar"] {
    ...
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.1),
      transparent 20%,
      transparent 80%,
      rgba(0, 0, 0, 0.1)
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.6) 25%,
      rgba(0, 0, 0, 0.05) 35%,
      rgba(0, 0, 0, 0.05) 90%,
      rgba(255, 255, 255, 0.2) 95%
    ),
    #ddd;
}

[role="progressbar"] > div {
    ...
    background-color: #0bd82c;
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.2),
        transparent 20%,
        transparent 80%,
        rgba(0, 0, 0, 0.2)
      ),
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.6) 30%,
        rgba(0, 0, 0, 0.05) 30%,
        rgba(0, 0, 0, 0.05) 90%,
        rgba(255, 255, 255, 0.2) 95%
      );
}
```

Told you... So what I did was, set up two `divs`, one for the outer container, the other for the inner bar (I know some might think of using the `::before` pseudo-element for the inner bar, but you cannot dynamically progress it this way). Notice how both `divs` had the same gradient, from a lighter shade to a darker shade, only the colors are different. So to apply this flexibility, I added a `background-image` as the mask (with a lot of transparency) on them for the gradient, and add the respective `background-colors` underneath.

## Window components

And how this would be a CSS recreation of the Windows 7 design if it missed the Window components? So let's take a look:

![A complete Windows 7 window](https://dev-to-uploads.s3.amazonaws.com/i/sr89hhmq62nljhcwbe0q.png)

This was probably the most challenging part of all, I would not address all the things I did to put together a complete Window but just some major points that you might find interesting. If curious, please feel free to take a look at the code directly in [the repo](https://github.com/khang-nd/7.css/blob/main/gui/_window.scss).

In principle, it was still mostly all about **`gradient background`** and **`box-shadow`**, but more advanced, as I had to use different angles of the gradient for the glassy effect of the frame. A raw look without content would then look like this:

![A raw Windows 7 window frame](https://dev-to-uploads.s3.amazonaws.com/i/04vfwi9d9hblhrk2m5o0.png)

For the title bar's controls, the key factor was again, you've guessed it, the `gradient background`, but this time, with a combination with the `radial-gradient` to create the glowing effect at the bottom of the controls when they are hovered or active.

![A Windows 7 title bar](https://dev-to-uploads.s3.amazonaws.com/i/2w1mqxb924z3wj7tjrjx.png)

And that is some insight I could give you in the context of this article. Drop a comment if there are certain things you want to know more in detail.

# The things I learned

As the first open-sourced package I have published, I got to learn quite a lot from this side project including but not limited to the following things:

* EJS and PostCSS are wonderful techs. (But I did not know before. Shame...)
* Receiving stars to my repository is really *addictive*, it motivates me to keep working on the project, although I cannot spend the stars...
* Publishing a package to `npm` is not as hard as I thought.
* You may think of your side projects as silly things you do just for fun, but *sometimes* they turn out even more popular than the stuff you do for real.
* Share your work with the public, either via social networks, or any sites that you can promote or post about it, so that it can reach as many people as possible, to see the actual value of your work; otherwise, it remains a silly thing forever.
* [Hacker News](https://news.ycombinator.com/) was the most successful media to draw audiences to this project. (And I just got to know about it shortly before, it's not popular from where I live.)

That is all folks. Thank you for reading!


In case you missed it, last week I wrote a post about a recent side project I worked on and submitted...

todayilearned

7.css - My Case Study

🎉 Happy New Year 🎉 and welcome to another post of mine. This time, a hackathon submission and a showcase of my recent work of **7.css** - a CSS design system for building components in Windows 7's flair.

## What I built

### Category Submission: 
Program for the People

### App Link
* https://win7-css-i5fco.ondigitalocean.app
* https://khang-nd.github.io/7.css

### Screenshots
![1](https://dev-to-uploads.s3.amazonaws.com/i/d7jv5q0dc6tohqjengkp.png)
![2](https://dev-to-uploads.s3.amazonaws.com/i/gvc511w7u2xjvoxoindb.png)

### Link to Source Code
https://github.com/khang-nd/7.css

### Permissive License
MIT

## Background
I happened to come across these 2 awesome projects: [98.css](https://jdan.github.io/98.css) and [XP.css](https://botoxparty.github.io/XP.css), and as a loyal fan of Windows, this inspired and triggered my enthusiasm to work on a similar project. And here we are.

### How I built it 
The backbone and system are technically there already in the former 2 projects, I just developed on top of them. However, I got to know some cool techs they used in the projects such as the [EJS](https://ejs.co/), which is used to generate examples with embedded  JS templating, or the [PostCSS](https://postcss.org/), which is used to transform CSS with some JS plugins. Also, this is my very first open-sourced package published for use.

Enjoy :)

🎉 Happy New Year 🎉 and welcome to another post of mine. This time, a hackathon submission and a showc...

7.css - My first published package

Heya, welcome to another brief article of mine.

This time I would like to share a silly, just-for-fun, unfinished, and never-to-be-finished pen I wrote back when I first started learning web dev - a simulation of the Nokia 1100 in pure HTML, CSS, and JS. Enjoy.

{% codepen https://codepen.io/khangnd/pen/abmWpaY %}

Heya, welcome to another brief article of mine.  This time I would like to share a silly, just-for-fu...

Nokia 1100 Simulation

Henry Bui

Lại một năm nữa sắp kết thúc, sắp tới là một chuỗi những ngày lễ tết để anh em ta nghỉ ngơi, chơi bời... à mà khoan, còn một đống bug phải sửa, hàng tá thứ phải học, một rừng pet project đang còn dang dở... ôi cuộc đời dev 😢 Hi vọng mọi người đã có một năm suôn sẻ, thuận lợi và đạt được nhiều mục tiêu. Hôm nay, được tí thời gian rảnh rỗi nên ngồi lại gõ vài dòng linh tinh chia sẻ đôi chút với m...

Indie hacker - một ngã rẽ dành cho anh em cót đơ?

Quang Huy Trần

Bài viết được dịch từ dev.to. Truy cập bài viết gốc: *About criticism*.

Sau khi rời xa chiếc ghế giảng đường, bước chân vào cuộc sống bộn bề của xã hội, mỗi chúng ta đều sẽ phải tiếp tục đối mặt với nhiều vấn đề, nhất là trong môi trường làm việc, nơi mà chúng ta phải dành phần lớn thời gian mỗi ngày để học hỏi và phát triển bản thân trên con đường sự nghiệp. Do đó, có lẽ ai đi làm cũng mong m...

Criticism - Sự phê bình, chỉ trích

Xuân

Phạm Duy Vũ

Bạn là một tech lead chuyên về web nhưng bỗng một ngày bị bắt phải triển khai sản phẩm cho nền tảng di động trong thời gian ngắn? Hay là một front-end/back-end/full-stack web dev đang muốn lấn sân sang mobile nhưng không biết bắt đầu từ đâu? Hoặc bạn đang có một ý tưởng độc đáo về mobile app có thể kiếm 🍚 cho mình nhưng chỉ biết mỗi HTML, CSS và JS? Hay chỉ là một cốt đơ quèn, muốn khám phá, mở...

Capacitor - Xâm lược thế giới mobile chỉ với HTML, CSS, JS

Trương Thanh Tùng

Bạn đã chán ngấy khi làm việc với những trang web bất động? Bạn muốn thổi hồn vào những ứng dụng web của mình? Bạn muốn làm cái gì đó sinh động hơn, sáng tạo hơn. Vậy còn chờ gì mà không dùng Framer Motion? 🥳 Cùng mình khám phá vài sự thú vị với thư viện này nhé.

Một chút "background"

Framer Motion là một animation/motion library (thư viện hoạt hình/chuyển động? dịch ra nghe cứ sao sao nhỉ, t...

Framer Motion - Animation library bá cháy cho React web

Pet project (hay side project), một từ mà dân code chúng ta ít nhiều cũng đã nghe qua hoặc đã từng làm dăm ba cái để rèn luyện kỹ năng hay tiếp cận những công nghệ mới. Chủ đề này có lẽ đã được anh Hoàng (chủ blog toidicodedao nổi tiếng) khai thác và hướng dẫn triệt để, từ những lợi ích mà pet project mang lại, đến việc chọn ý tưởng để thực hiện, cũng như những cách triển khai để đưa đứa con ti...

Pet project - những lợi ích và câu chuyện bản thân

Mạnh Đàm Văn

Trong thời đại các thiết bị mobile đang ngày càng thông dụng, thì việc làm ra một website/webapp ngày càng phức tạp khi chúng ta phải chú trọng tới nhiều kích cỡ màn hình. Dù đã có nhiều framework CSS hỗ trợ sẵn nhưng việc nắm rõ CSS để không quá lệ thuộc vào framework không bao giờ là thừa. Bên cạnh kỹ thuật hỗ trợ responsive bá đạo như media queries, thì có lẽ đơn vị phần trăm là một người bạ...

CSS Percentage - Hiểu rõ hơn về đơn vị phần trăm trong CSS

Trần Xuân Thắng

Bài viết được dịch từ *Gist của wojteklu*.

Code sạch khi nó có thể được hiểu bởi tất cả mọi người trong team. Code sạch có thể được một lập trình viên khác ngoài chính tác giả đọc và cải tiến. Code dễ hiểu sẽ dễ đọc, dễ sửa, dễ cải tiến và dễ bảo trì.

Quy tắc chung

1. Tuân theo các quy ước chuẩn.
2. Suy nghĩ đơn giản thôi, viết code cũng đơn giản thôi.
3. Luôn dọn code sạch sẽ hơn lúc bạn nh...

Tóm tắt cuốn Clean Code của Uncle Bob

Có lẽ kỹ thuật này đã xuất hiện từ rất lâu và chắc nhiều người đã biết tới, nhưng thực sự thì đến giờ mình mới được biết đến, cảm thấy nó cực kỳ tiện lợi và thú vị nên muốn chia sẻ lại cho những bạn chưa biết. Chúng ta cùng tìm hiểu về Bookmarklet và xem cách tạo một tool đơn giản và tiện lợi bằng kỹ thuật này như thế nào nhé.

Bookmarklet là gì?
Khi sử dụng trình duyệt web, các bạn hẳn đã khôn...

Bookmarklet - Tạo tính năng để tương tác với trang web thật đơn giản

Nguyen Van Hung

HungHocHoi

Lữ Quang Minh



Hôm nay là một ngày Chủ Nhật cuối tuần đẹp trời  để... code. Như bao ngày cuối tuần, mình lại ngồi vào máy, bật VS Code để vọc vạch những thứ linh tinh về web, JS các kiểu. Lâu ngày mở lại cái pet project từ thời tám hoánh nào đó mà mình viết bằng HTML, CSS, JS thuần, cái thời chưa biết React, Vue là cái beep gì, lúc đấy toàn xài cái Live Server Extension để phục vụ cho việc development. Vậy ...

Live Server - Làm gì khi cái VS Code extension thân yêu trở chứng?

Lúc mới học JS, mình chỉ biết mỗi một kiểu cơ bản nhất là:
function add(a, b) {
    return a + b;
}

Đúng vậy, khi cần tách code, cứ nhóm tất cả các hàm liên quan với nhau vào một file, khi cần lôi các hàm ra dùng thì nhúng file này vào trang HTML bằng thẻ <script>, quá ez luôn. Nhưng khi bắt đầu ra lăn lộn giang hồ + sự tiến hóa không ngừng của công nghệ, mình gặp phải nhiều cú pháp ngoài hình...

JS Modules - Bao nhiêu kiểu khai báo, làm sao nhớ hết?

Trần Việt

![](https://images.viblo.asia/5c0ea105-1da9-48cb-82ab-85c4e0ffcf56.png)



Đã bao giờ bạn gặp khó khăn khi phải suy nghĩ nên đặt tên biến/hàm như thế nào trong lúc code?

Nếu câu trả lời là No, hi vọng là vì bạn đã hiểu rõ và tự tin vào cách đặt tên của mình, còn nếu No vì bạn chả bao giờ quan tâm đến cách đặt tên, thì xin chia buồn, bạn đã gián tiếp tạo nghiệp cho anh em trong team khi phải review code, hoặc những hậu bối khi phải maintain code của bạn, bởi vì, họ ...

Naming rules - Các quy tắc vàng trong làng đặt tên

AnhPT

Khi nói đến CSS Framework, chắc ai cũng nghĩ ngay đến những framework nổi tiếng và bá đạo như Bootstrap, Materialize, hay Tailwind... Nhưng trong bài viết này, mình sẽ không nhắc đến những framework chuyên nghiệp được sử dụng cho mục đích thương mại đó, mà sẽ tổng hợp các framework mà có thể bạn ít biết tới hoặc chưa từng nghe, nhưng rất có thể sau khi biết tới, bạn sẽ cảm thấy cực kỳ thích thú...

Các CSS Framework độc đáo mà có thể bạn chưa biết

Bài viết được dịch từ Dev.to. Truy cập bài viết gốc: *You don't need to know everything (but you should know something well)*

Mới đi làm được cỡ một năm rưỡi nay, tuy chưa đủ thâm niên để gọi là người từng trải trên con đường công nghệ, kỹ thuật phần mềm, nhưng thật sự có những lúc mình cảm thấy đuối, mệt mỏi, bị "overwhelmed", và đôi khi muốn bỏ cuộc khi xung quanh có quá nhiều con người tài ...

Không nhất thiết phải biết rộng, nhưng nên biết sâu

Hao Le

Huỳnh Minh Hưng

Thang Le Ba

![](https://docs.github.com/assets/images/help/repository/profile-with-readme.png)



Khi đã chọn nghề IT, dấn thân vào con đường dev khó có ngày yên nghỉ (ngơi), chắc các bạn đã không còn xa lạ với Github, nếu không muốn nói là quá quen (nếu chưa biết Github là cái gì thì bạn cần lăn lộn giang hồ nhiều nữa 😅). Với một hệ thống siêu khủng, nhiều tính năng siêu tiện ích, một đội ngũ phát triển siêu nhân thì Github đang là platform số 1 dành cho cộng đồng developer trên toàn thế...

Profile README - Portfolio cá nhân nhanh, bổ, rẻ ngay trên Github


UI components by Tran Mau Tri Tam

Nếu là một front-end developer, chắc hẳn bản thân bạn cũng sẽ ít nhiều hiểu được tầm quan trọng của UI đối với người dùng, cũng như việc một ứng dụng có giao diện đẹp, ưa nhìn sẽ giúp người dùng có cái nhìn tốt hơn và sẽ lựa chọn việc sử dụng ứng dụng của bạn nhiều hơn. Là developer, thường chúng ta sẽ không nhúng quá sâu vào công việc thiết kế UI, mà phần lớ...

UI Design - Các yếu tố cơ bản trong thiết kế giao diện

Alexander Huỳnh

Nguyễn Trần Minh Pháp

minh nhat nguyen



Hello mọi người, trong bài viết này, mình xin khái quát một số kiến thức về Svelte cũng như cách để xây dựng một web app bằng Svelte.
TL;DR
Dành cho những bạn lười đọc, vốn tiếng Anh kha khá và thích "learn by doing":
* Mọi thông tin, tài liệu của Svelte, từ cơ bản đến nâng cao đều được hướng dẫn chi tiết trên trang chủ: https://svelte.dev
* Vừa học, vừa thực hành: https://svelte.dev/tutorial...

Svelte - Tổng quan và cách xây dựng một web app bằng Svelte

Hunter Production (thosanmaytinh)

Nguyễn Hữu Kim

Truong Dang

Bài viết được dịch từ DEV.to. Truy cập bài viết gốc: *Grow up*.

Vừa qua mình có đọc được một bài viết chia sẻ kinh nghiệm của một dev trên trang DEV.to rất hay và đâu đó thấy hình ảnh của bản thân phảng phất trong những khuyết điểm được đề cập. Mình xin dịch lại bài viết để cùng chia sẻ và nghiền ngẫm những ý hay trong bài.

Những quan điểm cứng nhắc về những thứ không đáng, đây là điều đang d...

Hãy trưởng thành - Grow up

![](https://images.viblo.asia/554010d0-223f-4b56-aee0-049bf3dc23f6.png)


Hello mọi người,

Bài viết đầu tiên của mình trên VIBLO, mình muốn chia sẻ một trang web đơn giản mình đã xây dựng để liệt kê các extension hữu ích dành cho VS Code.
TL;DR
Dành cho những bạn lười đọc:
* Đây là trang web thành quả
* Đây là mã nguồn

Kỹ thuật sử dụng:
* HTML, JS
* Cú pháp ES6
* Fetch API
* Bulma CSS

Coding
Cấu trúc chính gồm có

Đầu tiên mình tạo file exts.js để chứa mảng các e...

Platform