Build Static Blog with several lines of HTML and MD

Chell — Tue, 24 May 2022 11:05:17 +0000

I've been working on a frontend project recently called Nimblog. It arose from my need to fast publish Markdown docs from HTML.

I took it a step further by converting Markdown links ending in '.md' and '.txt' and with the 'text/markdown' content type to blog pages, which made it a lightweight static blog generator.

Writers can put all files under the same folder like

index.html
your_essay_1.md
your_essay_2.md
your_pic_1.jpg
...

and write Markdown in index.html.

<!DOCTYPE html>
<html lang='en'>
<head>
    <link rel="stylesheet" href="https://unpkg.com/nimblog/dist/production/nimblog.css">
    <meta charset='UTF-8'>
    <title>Nimblog</title>
</head>
<body>
# [Your Blog](/)
- [your essay 1](your_essay_1.md)
- [your essay 2](your_essay_2.md)
<script type='module' src='https://unpkg.com/nimblog/dist/production/nimblog.js'></script>
</body>
</html>

My goal is to make it qualified for:

📌 Being hosted by static hosting platforms like GitHub Pages, so Nimblog works on frontend. (done)
📌 Customizable themes. (done)
📌 Extensions.

You can check out its demo built with Nimblog:

https://nimblog.vercel.app/

What’s your advice on this project? Any feedback and GitHub stars ⭐️ are welcome. 😉

https://github.com/imchell/nimblog

Steam-like Card Interaction by Vanilla JS and CSS

Chell — Wed, 15 Dec 2021 04:02:00 +0000

Steam trading cards are randomly collectible cards during gameplay. It's not a pleasure to have all cards collected since players have to exchange their cards with others (or buy them), but interacting with cards on the game page can be interesting.

I made a similar interaction with a few tweaks.

Four parts of the trading card are changing — size, perspective, filter, and shadow.

Perspective

To reproduce the effect, the powerful CSS 3D transform feature has to be involved. The dynamic perspective of the card will imply hovering and moving actions.

There are two ways to activate 3D mode for an HTML element, by perspective or transform: perspective() in CSS. The former one is used by the parent element, which creates a 3D space for its child elements, while the latter one is for a single element. David DeSandro has a great series explaining CSS 3D, go check that if you want to go down the rabbit hole.

transform: perspective(400px) rotateY(45deg)

perspective: 400px

Rotation

As their names suggest, rotateX(), rotateY(), and rotateZ() can be used to rotate an element in 3D space. If perspective is not enabled, rotate functions will only perform a parallel projection, which is not the case we desire.

The rotation degree adjusts proportionally to cursor position and mousemove, which is fired at an element when a mouse is moved while the cursor's hotspot is inside it, is the event to detect that. It is different from mouseenter, which indicates the moment the cursor moves in an element.

card.addEventListener("mousemove", function (event) {
  card.style.transform = `perspective(1000px)
  rotateY(${rotate(event.x, centerX)}deg)
  rotateX(${-rotate(event.y, centerY)}deg)`;
})

The rotation degree can be calculated by the relative position of the cursor and card center. A threshold is needed here to avoid a large rotation degree, in which case the card may turn very thin and impossible to hover above.

function rotate(cursorPosition, centerPosition, threshold = 20) {
  if (cursorPosition - centerPosition >= 0) {
    return (cursorPosition - centerPosition) >= threshold ? threshold : (cursorPosition - centerPosition);
  } else {
    return (cursorPosition - centerPosition) <= -threshold ? -threshold : (cursorPosition - centerPosition);
  }
}

Brightness

As you slide up and down on the card, you will notice a change in the reflection effect. This is not some kind of gradient color overlay effect, but a brightness filter.

function brightness(cursorPositionY, centerPositionY, strength = 50) {
  return 1 - rotate(cursorPositionY, centerPositionY)/strength;
}
// ...
card.style.filter = `brightness(${brightness(event.y, centerY)})`;

Shadow

The shadow is a key part of this interaction and is oriented in the opposite direction of the cursor. I applied a large blur-radius here as Steam does.

card.style.boxShadow = `${-rotate(event.x, centerX)}px ${-rotate(event.y, centerY)}px 80px 0px rgba(48, 65, 0, 0.5)`;

Add transition in CSS to make everything feels smooth.

#card {
    transition: .2s;
}

When everything is finished, make sure the card restores to the initial look after the cursor leaves the area.

card.addEventListener("mouseleave", function (event) {
  card.style.transform = `perspective(500px)`;
  card.style.width = `120px`;
  card.style.height = `160px`;
  card.style.filter = `brightness(1)`;
  card.style.boxShadow = `0 0 0 0 rgba(48, 65, 0, 0.5)`;
})

Thank you for reading this. You can view the result below: