Pure CSS - Road Trip After Sunset

Hao — Fri, 27 Aug 2021 02:43:06 +0000

A small project for the latest CodePen Challenge. Hope this one sparks some inspirations :D

Lollipop Loading with @property

Hao — Mon, 12 Apr 2021 05:46:33 +0000

Recently I created a lollipop loading circle using only css.

Usually I would create it with SVG, but now @property is a thing so now it's possible with only css!

The @property is still an experimental technology and currently only works for Chrome, Edge and Opera.

But hope soon it will be shipped to most major browsers!

Have fun coding!

Simple DIV Image Cropper

Hao — Tue, 20 Oct 2020 07:02:08 +0000

A rather simple image cropper. Using only js/css. No canvas/SVG included.

Hope it brings inspiration :)

Exploiting the generator to make a pause/resumable flow.

Hao — Thu, 05 Mar 2020 03:13:55 +0000

Sorry English is not my primary language, please bear with me :p

Recently I've come up with an idea that I've never seen anyone has used it before.

That is, to use generators as a linear flow control.

Such as you have a liner program, but sometimes you need to pause it somewhere and resume it later when some condition is met or waiting for an user input.

You don't want to make that program separate functions since it's messy and can fall into the callback hell easily. Also, that not looks linear at all!

So I came up with this monstrosity:

const next = (_=((function*() {
  // ...
})())).next.bind(_);

Essentially it's just this, but in one line:

const generator = function*() {
  // ...
}
const iterator = generator();
const next = iterator.next.bind(iterator);

What does this thing do? Let's have an example.
Such as this interactive dialog. The first time when you run next(), it will print the first dialogue, and stops at yield.

Then you call the next() function again. It starts where it was before, and print out the next dialogue. how cool is that?

const sarahStyle = 'color: orangered; margin-right: 1em;'
const yourStyle = 'color: lime; margin-right: 1em;'

const next = (_=((function*() {
  console.log('%cSarah:', sarahStyle, 'Hello, my name is Sarah. What is your name?');
  yield;

  console.log('%cYou:', yourStyle, 'Hi, my name is James. Nice to meet you.');
  yield;

  console.log('%cSarah:', sarahStyle, 'Wanna go out for a walk?');
  console.log('%cSarah:', sarahStyle, 'Since it\'s such a nice weather outside.');
  yield;

  console.log('%cYou:', yourStyle, 'Sure, why not?');
})())).next.bind(_);

next();
next();
next();

But you might ask, why not just use await like this?

console.log('%cSarah:', sarahStyle, 'Hello, my name is Sarah. What is your name?');
await somethingIsDone();
console.log('%cYou:', yourStyle, 'Hi, my name is James. Nice to meet you.');
await somethingIsDone();
console.log('%cSarah:', sarahStyle, 'Wanna go out for a walk?');
console.log('%cSarah:', sarahStyle, 'Since it\'s such a nice weather outside.');

That's a very good question.

I think the generator solution has 2 major advantages:

the next() function returns a state object, which looks like this: {value: undefined, done: false}. So you can easily determine whether this flow is done or not. But for async functions, you have to get the instance of the promise first.
It resumes itself by just calling the next() function again. If you're using a promise instead, you have to find a way to resolve the promise to make the flow continue, which is less straightforward.

Here's an example that I use this technique to create an installation simulator:

Hope you find this is useful, happy coding :)

Light Switch

Hao — Wed, 20 Nov 2019 08:09:49 +0000

Using only css and html. A switch that turns the light on and off :)

Pascal's Grapes

Hao — Tue, 18 Jun 2019 02:34:43 +0000

A pen for CodePen Challenge: June 2019.

FOOD FIGHT 🍔 - FRUITS AND VEGGIES

Uninstall Boi

Hao — Fri, 14 Jun 2019 04:08:29 +0000

You monster!

Interactive Wheel Menu

Hao — Wed, 12 Jun 2019 09:37:21 +0000

Using javascript and css(non-svg) to make an hold-and-drag wheel menu. Much like an Overwatch/League of Legends style menu.

DEV Community: Hao