I would describe it as a mashup of Mine Sweeper and a rogue-like dungeon crawler RPG.

That's right! The first playable demo is up! The game is still in active development, so expect bugs and features to change as I complete the project.

I'm Seeking Feedback

I need your help! Here's the deal, I love the game, I truly do, I think it's a blast. But I need to know if you like the game. Do you find it fun? What works for you, and what doesn't?

I Need Help!

Do you find the game fun? Share it with a friend. Share it on social. Leave a comment, favorite, etc on the itch page. All those things help.

Do you know any YouTubers/TikTokers that review small indies? Send them my way!

Play the Demo Here

You can play the early access demo on itch here:

https://joelnet.itch.io/dungeon-sweeper-a-knights-adventure-beta

Keep in mind, it's early. There will be bugs and not all the features are there today but still so excited!!! 😆

Drop your email in the Newsletter box below or subscribe on the itch page for updates! LFG!!! 🚀

This technique works well for monospaced fonts and may not work for variable-width fonts.

Failed Attempts

My first attempt was to write out text one letter at a time. But this didn't work with text that wasn't aligned to the left or text that wrapped.

My second attempt was to use a non-space white space to replace all characters. This would help with the non-left text and word-wrapped text, but then I learned not all white space is created equal.

The Figure Space

I found an amazing webpage that helped me find the correct white space to use. The space I need is called a Figure Space and is the same width as a character.

The Code

I wanted to be able to create a function that accepts a Phaser.GameObjecte.Text and automatically applies the animation.

The function would maintain the state needed to run the animation.

The function would need to be awaitable, so the caller knows when the animation is complete.

The function works by first resetting the text to empty. Then every interval, it writes out the next letter. To maintain the same letter positions, the text is kept the same length. The unseen characters are replaced with invisible characters.

/**
 * Create typewriter animation for text
 * @param {Phaser.GameObjects.Text} target
 * @param {number} [speedInMs=25]
 * @returns {Promise<void>}
 */
export function animateText(target, speedInMs = 25) {
  // store original text
  const message = target.text;
  const invisibleMessage = message.replace(/[^ ]/g, " ");

  // clear text on screen
  target.text = "";

  // mutable state for visible text
  let visibleText = "";

  // use a Promise to wait for the animation to complete
  return new Promise((resolve) => {
    const timer = target.scene.time.addEvent({
      delay: speedInMs,
      loop: true,
      callback() {
        // if all characters are visible, stop the timer
        if (target.text === message) {
          timer.destroy();
          return resolve();
        }

        // add next character to visible text
        visibleText += message[visibleText.length];

        // right pad with invisibleText
        const invisibleText = invisibleMessage.substring(visibleText.length);

        // update text on screen
        target.text = visibleText + invisibleText;
      },
    });
  });
}

Summary

I'm pretty happy with how the animation turned out and I am now calling this from within my dialog function.

If you are interested in following the game's development, toss your email into the newsletter box below.

Cheers 🍻

Name Change

I think I like the name Dungeon Sweeper: A Knight's Adventure more than Dungeon Sweep: Knight. Sure, it's a bit longer, but it's also more descriptive of what it is. The game is based on Minesweeper, So I think keeping Sweeper (as opposed to Sweep) in the name makes sense. Let me know what you think in the comments!

Giving The User What They Want

I watched a handful of people play my game and I kept giving the same instructions, "You can't drag to scroll, you have to click a tile to move to that spot."

I would repeat those instructions multiple times to the same players over and over again. They couldn't help but try to scroll the screen.

I decided to stop fighting it. If their intuition was to scroll, then I needed to add that feature.

A game that is intuitive to the user is better than forcing my way. It turns out I love the mechanic and it was worth the added time to get it into the game.

I'm Struggling with Phaser

In the beginning, Phaser was a breeze, but I'm running into a bunch of little quirks that are slowing me down.

Tween Memory Leak

I have a tween set to repeat: -1 (loop infinitely) and the target Sprite is destroyed, the tween remains. This is effectively a memory leak. I assumed Phaser was smart enough to kill the tween when the target is destroyed (Phaser does this for non-infinite Tweens). To work around this I have this block of code:

// tween must be manuall removed when sprite is destroyed
sprite.once("destroy", () => {
  scene.tweens.remove(tween);
});

My Zoom / Scale Mistakes

The pixel art I am using is 16x16 and I am scaling this up 2.5x to 40x40. In Phaser, it's really easy to set the camera zoom.

camera.setZoom(scale);

I was really happy with this early on since the camera did all the work for me. I'm paying for this mistake now.

All positioning now needs to be calculated with this scale in mind. Dragging was complex because the pixels you drag vs the pixels that must move are affected by the scale.

// Update X position of score text
score.setX(scene.cameras.main.width / scale);

// Actual distance ondrag needs to be scaled down to match finger
let diffX = Math.round(pointer.x - pointer.downX) / scale;
let diffY = Math.round(pointer.y - pointer.downY) / scale;

I could have eliminated this scale complexity by manually upscaling all my assets and using a zoom of 1:1.

Scroll on Drag Sucks

Something so simple and so complicated. The scale did not help with this either.

Because Phaser's camera is following a Sprite, I decided to modify the camera.scale.followOffset to move the screen. I'm not sure if this is the best way.

But found I had to keep saving the followOffset in my global state to run the math.

// 😥 Math is getting complicated for a simple scroll on drag

const diffX = Math.round(pointer.x - pointer.downX) / scale;
const diffY = Math.round(pointer.y - pointer.downY) / scale;

const offsetX = states.drag.followOffsetX + diffX;
const offsetY = states.drag.followOffsetY + diffY;

camera.setFollowOffset(offsetX, offsetY);

Overscrolling? So if you drag too far and hit the bounds I have set, the camera stops scrolling, which is what I want to happen. But the numbers keep going up in the followOffset. This means the user has to drag back to the visible area before the screen starts to animate again. It's kinda like a dead zone.

After I figured that out, I had to do even more math to limit the followOffset to the bounds set on the camera.

scene.input.addListener("dragend", () => {
    const knight = gameState.sprites["knight"];
    const distX = knight.x - camera.worldView.centerX;
    const distY = knight.y - camera.worldView.centerY;

    // this is needed to prevent overshooting the offset
    camera.setFollowOffset(distX, distY);
});

Fit to Screen

I ended up having problems using Phaser's fit-to-screen feature. It worked on Chrome and Android but had issues on iPhone. So now I am managing the screen size myself. I am not sure if this is the best way. Let me know in the comments.

// Phaser's fit-to-screen didn't work for me. So let's manually do it.
window.addEventListener("resize", () => {
  const { game } = gameState;
  game.scale.resize(
    document.body.clientWidth,
    document.body.clientHeight
  );
});

I'm Not Having Fun

So I'm into the part of the Game Dev that is simply not fun. I am trying to push out a demo so people can try it and provide feedback. But there are a few steps to take that I'm not enjoying one bit.

Creating an Executable

I need to create a "build". It's a simple HTML / JavaScript game so I guess I'll package this up with Electron. Electron seems popular, so sure let's use that. Well, Electron has turned my 1MB JS bundle into a 100MB exe. But hey, at least it's an executable.

Is there an alternative to Electron I can use? Help!

Code Signing Nightmares

Electron suggests Code Signing the executables. I looked into this and it's too expensive for what I am making. Everything requires an annual fee. Rough estimates on the low end of this are around $200/year.

I got excited when I found Fulcio a free Code Signing option but after wasting half a day on this, I found this line in the GitHub, "Fulcio only issues short-lived certificates that are valid for 10 minutes."

It's that 10 minutes part that makes this option unusable for me. Honestly, I am not sure what I could use this for with that short life.

I may just end up doing Android / iPhone (and no Windows / Mac / Linux), which does have some costs too, but I have already accepted this cost mentally before starting the project.

Or maybe I'll provide executables with no Code Signature. I don't know what the impact of that will be.

What are others doing? Is Code Signing that important? I don't know.

Marketing

Let me start by saying I probably couldn't be doing any worse than I am right now in this department. But what can I do?

I need a page to send people to. I have nothing right now. So I'm putting all my focus into getting a Demo live. I'm planning on getting this on itch.io. The problem with itch.io is they recommend having it as "close to ready" as possible and I need to set a price to charge. That's complicated since it's still in development.

But I have found a good compromise. I can set a price, and also provide a demo for free. So that way people can get the demo.

I thought of having two itch pages, one for the demo and then when ready, another for the paid game. I don't know the itch etiquette or how others handle this.

If you know, let me know!

Demo Soon!

Well, the demo is coming very soon! If you don't want to miss it, toss your name into that Newsletter box at the bottom. See you soon! Cheers 🍻

Ok. It's still in the "prototype" phase. The gameplay basics are there, but it's still not ready for a demo. Maybe next week? If you are looking for a Demo, hit me up on my Twitter!

UI Updates

I am liking the latest UI improvements. I added a hearts and points system to the UI. This helps indicate when a user makes a correct move as well as an incorrect one. The screen shake and buzz sound weren't enough according to the feedback I received.

There is also little floater points +10 or -50 above enemies when you make a move. This change with the instant feedback is a big improvement!

Intermission

I decided an intermission was needed before each level. Something that let you know your status (what level you are entering) as well as what enemies you would encounter. You can't see it in the screenshots, but those little guys are animated and they look great!

End-Game Report

After playing through a few hundred rounds of this game I was left at the end with no indication of how well I did. The game would simply be over and I would start again. I added an end-game report to show the player how well they did. I'll probably keep some sort of high scores for the player and then compare these scores to previous runs.

State Management

Well, I wasn't going to do it because I thought this game is just too simple to need anything complex, but I'm slowly merging in some state management and I can see immediate improvements.

Because I'm still in the keep-it-simple mindset, I went with what I felt was a simple solution. I'm using on-change to watch a game state object. on-change has a subscribe event that fires and pushes events into an EventEmitter. Now elements like hearts or player score can subscribe to the EventEmitter and update themselves. 💪

This pub/sub model eliminated some redundant code and makes debugging easier. When I update a value in the debug console, the game picks up the change and immediately reacts.

What's Next?

Following the 80/20 rule I think I'll have to spend the remainder 80% of my time to complete that last 20% 😂

The minesweeper rules are in place and working pretty well but the game is still missing potions, treasure chests, and boss fights.

I have a broad idea on how those RPG mechanics will work. My plan is to put some mechanics into the game and see how they feel. Get some feedback, adjust, repeat.

But I might work on some boring stuff like the main screen, settings, easy, normal, hard mode. Make things easier on myself and the beta testers.

Hit me up and throw your email in the box below to keep updated on the progress and when be notified when a demo arrives 🔥

Gameplay Video

I posted a Gameplay video of the prototype on my Twitter.

Graphics

I added some flair to the dungeon. Some of the walls have holes in them. Some holes ooze a green slime. Random floor tiles will have cracks. Skulls scattered throughout the dungeon. I am loving how these small improvements made the dungeon feel less homogenous and more like an actual dungeon!

Audio

I added some free sounds that I found on Pixabay. It's nice to hear the game coming together. I also added some variation to the sounds, so swinging the sword can produce multiple sounds. This minor variation added a lot more to the game than I thought it would have.

Gameplay Pivot

My initial vision was to have some type of Candy Crush-style level progression, but as I am playing, I'm not 100% sold on that design. If I made a single mistake, I'd abort the level and restart so I could get 3 stars. That's not how it's meant to be played.

From the feedback, people were also confused about their goals, since you wouldn't know how well you did until the end when they received a few or a lot of stars. In Minesweeper this is clear because if you mistake a mine, the game is immediately over. In this game, you are allowed a few mistakes.

So I am thinking of going rogue-like. The plan now is to have a health bar and points system. You keep progressing through the dungeon gaining or losing health and points until you finally meet your fate. The health bar will give the player immediate feedback when they do something wrong.

The rogue-like mechanic also allows for easier integration with items such as health magic potions, and maybe vendors.

I will also include a simple version where the player can just play a single level.

Saving State

Because I plan to use Apache Cordova to launch on mobile platforms, I need to use Cordova-friendly save states. After reviewing the options in Cordova documentation, I am going with IndexDB. It's simple enough to use and compatible across web/android/iphone.

I was able to implement IndexDB save states in a few minutes, so that also makes me happy.

Struggles with ChatGPT

I thought ChatGPT was going to make this game dev 10x faster but in reality, it hasn't. ChatGPT has been giving me wrong information or bad code. ChatGPT also isn't that familiar with Phaser3. There is also a lot more code, like game play stuff, that ChatGPT just can't help with.

ChatGPT has excelled at classic algorithms. For example ChatGPT helped me create a recursive function to traverse a Tree structure to find the entrance.

/**
 * @param {TreeNode<Container>} dungeonTree
 * @returns {Room}
 */
export function findDungeonEntranceRoom(dungeonTree) {
  if (!dungeonTree) return null;

  if (dungeonTree.leaf.room?.id.startsWith("entrance_")) {
    return dungeonTree.leaf.room;
  }

  const leftLeaf = findDungeonEntranceRoom(dungeonTree.left);
  if (leftLeaf) return leftLeaf;

  return findDungeonEntranceRoom(dungeonTree.right);
}

But a lot of the time ChatGPT would give me bad code and bad advice.

ChatGPT has been hit or miss with more missing than I'd like.

Even with these issues, if I had to do it all again from the beginning, I would still use ChatGPT.

Struggles with Phaser

The Phaser documentation leaves something to be desired. The code examples are good, but I often find the perfect example for Phaser2 and then struggle to search the docs to find the same example for Phaser3. The differences between these two have given me and ChatGPT many headaches.

I have also run into small quirks that have eaten hours of my time. Here's one example that stole a few hours of my life. If that await sleep(0) statement is removed, camera.worldView won't be set and therefore heartBar.setPosition will be set incorrectly.

So in we go, the classic setTimeout fix. 🤦

async function drawUi() {
  const { camera } = gameState;
  const heartBar = heartbar.getSprite().setScrollFactor(0);

  await sleep(0); // IMPORTANT: sleep allows camera.worldView to be set.

  heartBar.setPosition(
    camera.worldView.x - camera.scrollX,
    camera.worldView.y - camera.scrollY
  );

  gameState.layers.ui.add(heartBar);
}

Given my issues and struggles with Phaser, I would not only use it again but also recommend it. The good in Phaser far outweighs the bad. Phaser is an amazing framework.

Promotion

😭 Ugg. I don't know how to promote this thing and get it in front of eyeballs.

I'm planning on setting up an itch.io page, but I don't know if I should have two pages. I want to give the beta for free, but charge for the final game so how I go about that is unclear. One page for the beta and a separate page for the full game? I'm not sure. The itch documentation says not to make a page until the game is ready. But at the same time, I need to tell people about it and get some sort of waitlist long before the game is ready. So I don't know what to do here and if you do, comment below or hit me up @joelnet because I seriously need the help.

What's Next

I need to finish the health system and then create the rogue-like play. The basic mechanics of the game are complete so I think I'm over the difficult part.

I need to finish the health system, add treasure chests, coins, points, vendors, boss fights. You know, the fun stuff! 😁

Subscribe to my Newsletter to keep updated with Dungeon Sweep: Knight!

Just in case you didn't read the first devlog, Dungeon Sweep: Knight is a game that will have the mechanics of Minesweeper and combine them with RPG elements.

Fog of War

The fog of war has been created and I think it mostly works! You can click on the fog to reveal either nothing or an enemy. The tile numbers will also display how many enemies are surrounding them. If you are unfamiliar with this type of game mechanic, I'd recommend playing some Minesweeper.

Double-click a tile to attack!

Animations

I'm still learning Phaser, but animations are easy enough to create. I have both an idle and run animation for the Knight. As well as a sword animation when he attacks. The zombies are also animated, though you can't see them long since they die so quickly. I'll probably make some adjustments to that.

Code Improvements

I added eslint + prettier to help maintain a sane codebase. It's still such a pain getting eslint and prettier installed and working together. Really wish that process was improved a little.

I had been scaling up each of 16x16 tiles to 32x32 manually. I just found a global camera zoom in Phaser3! That saved me a bunch of code. I'm still learning Phaser, so I'll probably make a lot of these kinds of mistakes along the way.

End Game Screen

Create a basic End Game Screen. Still need to figure out how to make buttons. A lot of graphical improvements are needed here. But it's a start.

What's Next

Need to adjust some gameplay mechanics. Wire up the end game screen and let the player retry the level or move to the next level. I'll need a start screen as well as a screen that shows all the levels and the current level you are on.

I need to add some more fun things. Different enemies, health bars, coins, treasure chests, potions, maybe some boss fights? Oh, ya and audio. Gonna need some game sounds soon too.

The idea is a variation of Minesweeper with RPG elements. I'm thinking about calling it Dungeon Sweep: Knight.

Art

I can't art, so I decided to go hunting for a ready-to-use tileset. A quick google search brought me to a 16x16-dungeon-tileset with a style that I can only describe as perfect.

Game Engine

After barely doing any research, I landed on PhaserJS. My decision primarily was it still being in active development and not abandoned yet like all the others. So let's give it a try!

I know I can use Apache Cordova to turn this into native Android and iOS. I don't know how well that process works, but that's a problem for Future Joel, not Today Joel.

Generating a Dungeon

Now that I have the perfect tileset in hand, it's time to create a dungeon. This ended up being a lot harder than I thought it would be. My initial plan was to hand-create dungeons using plain text files. Run that through a function and bam, dungeon!

Example early dungeon map (that didn't work):

#########################
#     #    x        P   #
#     #        x        #
#     ############      #
#   x       x       x   #
#########################

I had a lot of difficulties with this. The first is I am using # to draw a top wall, left wall, right wall, and bottom wall. The graphics were different for each wall. This was going to be difficult.

So I decided to run these problems through ChatGPT. Let ChatGPT solve this so I can get on with the fun stuff. Unfortunately, ChatGPT was TERRIBLE at this. Even worse than me. So that wasn't gonna work.

After realizing how difficult a problem I gave myself, I stepped back and did a search on NPM for dungeon generators. There were MANY on there, but one stuck out.

@halftheopposite/dungeon was exactly what I was looking for. It was configurable and I was confident I could make it work.

I ended up abandoning my custom dungeon generator for this one.

The dungeon generator used a different tileset, so I tweaked it until my tileset would work with it. This ended up being a little more difficult than I had anticipated since each dungeon tile returned was a number. So I had to map each number to a graphic. This was tedious but once it was done I fired up the game and it generated this beautiful map!

I'm trying to keep the game as a 9:16 portrait ratio so mobile view works well.

What's Next

I have a solid base for my game, engine, graphics, random dungeons that look great. Next I'll be adding the gameplay mechanics. I'll have to drop down some enemies, lay a fog of war on top.

I think I'll have the Knight run around chopping at everything, I think that could also be fun.

Cheers 🍻

Other more simple programming requests I made did seem to yield good results.

Could I use it to help me code? Can I rely on it? Where would this bot fit into my life?

Creative Writing

I decided to throw some creative writing tasks at it and had my mind blown 🤯.

I asked it to write an episode of Rick & Morty. This is a fairly complex task as the bot has to be trained on Rick & Morty content. The process of story writing isn't simple and the bot's ability to inject humor I thought was perfect.

There were a few surprises I wasn't expecting in the story and the result was too good not to share. So here it goes.

The bot even surprised me by giving the episode a name.

Rick and Morty: The Fart Cure

Disclaimer: The bot seems to have a character limit, so some lines were cut mid-sentence and I had to prompt it to continue telling the story.

The Conversation:

Write a Rick and Morty episode where Morty gets fatally poisoned by a lethal fart and they have to hunt for the anti-fart cure, which is of course another fart. They do not know which fart is the anti-fart cure and therefore Morty has to receive multiple farts, which he does not enjoy. In the end, the anti-fart cure ends up being Rick's fart, which is administered just in time at the final hour before Morty's passing. Morty's final line is "You son of a bitch."

Rick and Morty: The Fart Cure

As Morty walked into the garage, he caught a whiff of a strange odor. "What's that smell, Rick?" he asked, wrinkling his nose.

"Just a little experiment I'm working on," Rick replied, grinning maniacally.

Morty peered into the lab and saw a gas tank connected to a hose. "What is it?" he asked.

"It's a fart, Morty," Rick said, his grin widening. "But not just any fart. This is a lethal fart. One sniff and you'll be dead in minutes."

Morty's eyes widened in horror. "You can't be serious, Rick!" he exclaimed.

"Of course I'm serious, Morty," Rick said, his grin turning into a sly smile. "Now let's see how long it takes for the poison to take effect."

Morty's eyes rolled back in his head and he collapsed to the floor. Rick looked down at him with a satisfied grin. "Well, that was faster than I expected," he said.

But as he looked closer, he saw that Morty was still breathing, though shallowly. "Oh, I forgot to factor in your immunity to farts," Rick muttered, his grin turning into a frown.

He quickly grabbed a syringe and injected Morty with the antidote. "That should do the trick," he said, watching as Morty's breathing gradually returned to normal.

"What the hell, Rick?" Morty said, his voice weak and hoarse. "You could have killed me!"

"But I didn't, Morty," Rick said, his grin returning. "And now we have a new problem to solve. We need to find the anti-fart cure."

"The what?" Morty asked, his eyes still closed.

"The anti-fart cure, Morty," Rick said, his voice filled with

Please continue the story

Rick and Morty: The Fart Cure

Rick and Morty set out on a mission to find the anti-fart cure. They traveled to different planets and dimensions, searching for a fart that could counteract the lethal fart that Rick had created.

But as they searched, they encountered a problem. "How are we supposed to know which fart is the anti-fart cure?" Morty asked, his face contorted in disgust as they encountered yet another fart.

"We'll have to try them all, Morty," Rick said, his eyes gleaming with excitement. "And I'll need your help to do it."

Morty groaned as Rick handed him a gas mask and started administering farts to him. "This is torture, Rick," he said, his voice muffled by the mask.

But Rick didn't seem to care. He was too busy laughing and enjoying himself as he watched Morty suffer.

Finally, after what felt like an eternity, Rick found the anti-fart cure. "This is it, Morty," he said, grinning from ear to ear as he held up a fart in a jar.

Morty's eyes widened in shock. "That's your fart, Rick," he said, his voice filled with disbelief.

"That's right, Morty," Rick said, his grin turning into a smug smile. "Only my fart

Please continue the story

Rick and Morty: The Fart Cure

Rick administered the anti-fart cure to Morty just in time, saving him from a gruesome death. As Morty recovered, he couldn't help but feel angry and betrayed by Rick's actions.

"You son of a bitch, Rick," he said, his voice filled with disgust. "How could you do this to me?"

But Rick just laughed. "It was all in good fun, Morty," he said, still grinning from ear to ear. "Besides, think of all the knowledge we gained from this adventure. We discovered a new fart, we found the anti-fart cure, and we had a blast doing it. What's not to love?"

Morty shook his head, unable to believe Rick's words. But deep down, he knew that Rick was right. Despite the pain and suffering, he had to admit that it was an adventure he would never forget.

The end.

You forgot the final line of the story should be Morty saying "You son of a bitch." Please rewrite the last bit and include the final line.

Rick and Morty: The Fart Cure

As Morty recovered from the lethal fart, he couldn't help but feel angry and betrayed by Rick's actions. "You son of a bitch, Rick," he said, his voice filled with disgust. "How could you do this to me?"

But Rick just laughed. "It was all in good fun, Morty," he said, still grinning from ear to ear. "Besides, think of all the knowledge we gained from this adventure. We discovered a new fart, we found the anti-fart cure, and we had a blast doing it. What's not to love?"

Morty shook his head, unable to believe Rick's words. But deep down, he knew that Rick was right. Despite the pain and suffering, he had to admit that it was an adventure he would never forget.

"You son of a bitch," Morty said, his voice filled with grudging respect.

The end.

Afterthoughts

I enjoyed this dialog:

"How are we supposed to know which fart is the anti-fart cure?" Morty asked, his face contorted in disgust as they encountered yet another fart.

"We'll have to try them all, Morty," Rick said, his eyes gleaming with excitement.

As well as this:

But Rick didn't seem to care. He was too busy laughing and enjoying himself as he watched Morty suffer.

Rick's enjoyment of Morty's suffering wasn't part of my instructions, so that was a pleasant surprise and one I think was on par for a Rick & Morty episode.

I'm looking forward to seeing the future advancements of this tech, I can't wait to see what else it can create. Also, Netflix, I'm available. Call me.

It is my goal to not simply give you definitions, which are often forgotten. Instead, give you the intuition to understand the differences and why they work the way they do.

First, let's start by visualizing code the way I do.

🧠 How I Visualize Code

When I see code, I visualize the shape and connections of that code in my head. For example, this line of code...

var url = "https://joel.net"

I visualize my Application which contains a variable named url. url points to an object of type String that contains the value. The nature of a String is immutable, represented by the 🔒.

Because the url does not have a lock, the value can be re-assigned later.

Const Prevents Re-assignment of Variables

Declaring a variable with const, prevents the re-assignment of that value. The value can be only be assigned during declaration.

Let's look at some code.

const cat = {
  name: "Mojo",
  age: 11
}

This code can be visualized as:

The Application contains a variable named cat. cat is const and cannot be re-assigned later. Notice the 🔒 on cat.

cat points to an Object that contain the properties name (String) and age (Number). These values can be changed because JavaScript objects are mutable by default.

The nature of a String and Number are immutable so they're also flagged with a 🔒.

Making Object Immutable

Objects in JavaScript are mutable, meaning they are open to modification. To make a JavaScript object immutable (read-only) use the Object.freeze() method. There is also Object.seal(), which we won't be covering here. But please do research on your own.

const cat = {
  name: "Mojo",
  toys: ["Ball", "Feather"]
}

Object.freeze(cat)

Object.freeze() adds a 🔒 flag to the Object that cat points to. Notice here how toys points to an Array, which is mutable.

This means that while name and toys cannot be re-assigned, toys.push("New Toy") is valid because the Array is not immutable.

This is because Object.freeze() is a shallow operation, applying the freeze to only the Object.

Deep Freezing Objects

Because Object.freeze() is a shallow operation, applying only to the Object and not the children, a recursive function must be created to also apply Object.freeze() to those children.

// from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
function deepFreeze(object) {
  // Retrieve the property names defined on object
  const propNames = Object.getOwnPropertyNames(object);

  // Freeze properties before freezing self
  for (const name of propNames) {
    const value = object[name];

    if (value && typeof value === "object") {
      deepFreeze(value);
    }
  }

  return Object.freeze(object);
}

With deepFreeze, we can now deep freeze JavaScript objects.

const cat = {
  name: "Mojo",
  toys: ["Ball", "Feather"]
}

deepFreeze(cat)

With deepFreeze applied to cat, the 🔒 flag is now applied to Array indicating it is now immutable.

cat is now constant and deeply immutable 🔥

Summary

• const prevents the re-assignment of variables.
• Object.freeze will shallow freeze an object.
• A custom function must be created to deep freeze objects.

Subscribe to my Newsletter to continue learning about Cloudflare Workers!

Cheers 🍻

• Join my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

Cloudflare Workers Course Outline

1. Getting Started with Serverless Cloudflare Workers
2. Cloudflare Workers as a Web Server (with Webpack)
3. Making API Calls From a Cloudflare Worker
4. Key-Value Storage With Cloudflare Workers KV
5. [Bonus] Smart Routing with Cloudflare Workers

Before Smart Routing

This is what my routes look like before smart routing. Multiple imports as well as routes to manage inside of src/index.js.

// ❌ Every page is imported at the top
import allPeople from './pages/allPeople'
import index from './pages/index'
import person from './pages/person'
import files from './pages/files'
import filesPost from './pages/files.post'
import filesList from './pages/files.list'

// ❌ Every route is manually added
router.get('/', () => index(request))
router.get('/people/?', () => allPeople(request))
router.get('/people/.+', () => person(request))
router.get('/files/.+', () => files(request))
router.get('/files/?', () => filesList(request))
router.post('/files/?', () => filesPost(request))

I don't like this, there's far too much boilerplate. Fortunately with some features of webpack, this can be improved.

Also, In the previous lessons, I used a very crude method to pull parameters off the routes. A route like /people/123 would be parsed and 123 would become id.

// ❌ Gross
const person = async request => {
  const url = new URL(request.url)
  const id = url.pathname.substring(8)
  const person = await fetchPerson(id)
  /* code */
}

What I Want Instead

It would be nice to add files to the project and not have to worry about routing. I want the pages and routes to just be picked up automatically and modify less files.

Something like this (below), where the route is included in the page and not in index.js.

/**
  * ./src/pages/status.js
  */ 
import { textResponse } from '../lib/responses'

// ✅ routing is automatic
export const route = '/status/?'

const status = () => textResponse('OK')

export default status

It would also be nice if the parameterization of routes be be more idiomatic. Something like this:

// ✅ Route Parameters
const person = async ({ params }) => {
  const person = await fetchPerson(params.id)
  /* code */
}

Webpack's require.cache

Webpack keeps a cache of all files added to the project inside of require.cache. This can be exploited to build the routes automatically.

Because webpack's require.cache contains all files and not just the pages, the non-pages need to be filtered out. So the test that seems to work for this is a page must be a Module and also export a route.

This is what those tests look like:

const isModule = module => {
  if (!module || !module.exports) return false
  return Object.prototype.toString.call(module.exports) === '[object Module]'
}

const hasRoute = module => {
  if (!module || !module.exports) return false
  return !!module.exports.route
}

Next, export getRoutes. This function filters for the route pages and returns an Array of routes that include a route, method (default to get), and the module.

export const getRoutes = () =>
  Object.values(require.cache)
    .filter(module => isModule(module) && isRoute(module))
    .map(module => ({
      route: module.exports.route,
      method: module.exports.method || 'get',
      module: module.exports.default,
    }))

Auto-include Files With Webpack

Once the imports for the pages are removed from index.js, Webpack won't include them. So they have to be forced into the bundle.

This can be done by modifying the webpack.config.js and adding the files there.

The glob function returns a list of all the JavaScript files in the ./src/pages/ directory.

const glob = require('glob')

const files = glob.sync('./src/pages/**/*.js')

Include the files in the webpack's entry.

module.exports = {
  entry: files.concat(['./src/index.js']),
}

If there's a better way, let me know in the comments.

Add The Auto-Routing to src/index.js

Add the auto-routing before any catch-all routes. In this case, the notFound route should be included last.

import Router from './lib/router'
import notFound from './pages/404'
import { getRoutes } from './lib/auto-routes'

const routes = getRoutes()
const router = new Router()

routes.forEach(({ route, method, module }) => router[method](route, module))
router.all(notFound)

Creating Route Parameters

In the previous lessons, I used a very crude method to pull parameters off the routes. A route like /people/123 would be parsed and 123 would become id.

// ❌ Gross
const person = async request => {
  const url = new URL(request.url)
  const id = url.pathname.substring(8)
  const person = await fetchPerson(id)
  /* code */
}

It would be nice if I could do something like this instead:

// ✅ Route Parameters
const person = async ({ params }) => {
  const person = await fetchPerson(params.id)
  /* code */
}

This feature can be added by modifying the src/lib/router.js file to assign a params object onto the req. Find Path and add the one-liner like below.

const Path = regExp => req => {
  const url = new URL(req.url)
  const path = url.pathname
  const match = path.match(regExp) || []
  // 👇 Insert this line to create the `params` on `req`.
  req.params = match && match.groups ? match.groups : {}
  return match[0] === path
}

Since routes are already RegEx, we can use the Named Group feature for this.

// ❌ No Named Group
export const route = '/people/.+'

// ✅ Group Named "id"
export const route = '/people/(?<id>.+)'

Now code like this is possible!

// 🔥 Route Parameters
const person = async ({ params }) => {
  const person = await fetchPerson(params.id)
  /* code */
}

Summary

These improvements will simplify the the way new routes are created. It also extracts parameters from the routes.

Browse the repository at this point in history.

Subscribe to my Newsletter to continue learning about Cloudflare Workers!

Cheers 🍻

• Join my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

Cloudflare Workers Course Outline

1. Getting Started with Serverless Cloudflare Workers
2. Cloudflare Workers as a Web Server (with Webpack)
3. Making API Calls From a Cloudflare Worker
4. Key-Value Storage With Cloudflare Workers KV
5. [Bonus] Smart Routing with Cloudflare Workers

About Workers KV

Workers KV reads respond incredibly fast. According to Cloudflare, as quickly as a cached static file would.

Workers KV is an eventually-consistent database. Changes may take up to 60 seconds to propagate (though in my experience it's much less). This means KV cannot be used in applications that require atomic transactions.

Workers KV is a key-value storage. Typical of KV storage solutions, there is no search. But there are list operations.

More on How KV Works

What We'll Be Making

For this lesson, we will be using Cloudflare KV to put a key, get a key, and list keys.

Starting Where We Left Off

In case you haven't been following along with the previous lessons (you don't have to), you can start here:

# continue where we left off
$ git clone https://github.com/joelnet/cloudflare-worker-website.git
$ cd cloudflare-worker-website
$ git checkout f6a224b37010d76d694320d4748ac07cb75f7369
$ npm ci

Create KV Namespace

Namespaces are a way to segregate KV stores. This is useful if you run many applications under Cloudflare or separation within an application. For example, you might want to create LOGINS and PROFILES Namespaces. You could also do this with a key prefix like logins:<login> or profiles:<profile>.

A Namespace can be created within the Cloudflare website or with the wrangler CLI.

I'm going to create a new Namespace called FILES.

$ wrangler kv:namespace create "FILES"

The output should look something like this. Be sure to paste that bottom piece into your wrangler.toml.

🌀  Creating namespace with title "my-website-FILES"
✨  Success!
Add the following to your configuration file:
kv_namespaces = [ 
         { binding = "FILES", id = "529b4c9be8b344f59adfe89cc9765879" }
]

ESLint

Add an ESLint Global by opening .eslintrc.yml. This will prevent ESLint from complaining about the FILES global.

globals:
  FILES: readonly

The Setup

The plan is to create 3 files. One each to read, write, and list the keys. Then use KV to store markdown files and then display them as HTML.

First, setup the routing to the new files.

Open src/index.js and add the imports.

import filesPost from './pages/files.post'
import files from './pages/files'
import filesList from './pages/files.list'

Then add a new routes. /? is RegEx for optional /. .+ is RegEx for one or more character.

router.post('/files/?', () => filesPost(request))
router.get('/files/.+', () => files(request))
router.get('/files/?', () => filesList(request))

Adding a Key

Create src/pages/files.post.js. To create a key use the format: await NAMESPACE.put(key, value).

import { htmlResponse } from '../lib/responses'

const filePost = async request => {
    const { filename, contents } = await request.json()
    await FILES.put(filename, contents)
    return htmlResponse('SUCCESS')
}

export default filePost

Keys can auto-expire by setting the expiration. Expiring Keys

Reading a Key

Create src/pages/files.js. Reading a key uses the format: await NAMESPACE.get(key).

Note: There are more sophisticated ways to pull the filename off the URL, I'm using substring for the simplicity of this demo.

import marked from 'marked'
import { htmlResponse } from '../lib/responses'

import marked from 'marked'
import { htmlResponse } from '../lib/responses'

const files = async request => {
    const url = new URL(request.url)
    const id = url.pathname.substring(7)
    const file = await FILES.get(id)
    const html = marked(file)
    return htmlResponse(html)
}

export default files

Listing Keys

Create src/pages/files.list.js. The list uses the format: await NAMESPACE.list().

import { htmlResponse } from '../lib/responses'

const fileToLi = file => `
<li>
  <a href="/files/${file.name}">${file.name}</a>
</li>
`

const fileList = async () => {
    const files = await FILES.list()
    const lis = files.keys.map(fileToLi).join('')
    return htmlResponse(`<ul>${lis}</ul>`)
}

export default fileList

Lists also support paging and listing by prefix. Check the docs for more on lists.

Extra Credit

• Using the same pattern, implement a delete with the method await NAMESPACE.delete(key).

• Implement pagination on the list page to support > 1000 entries.

• Experiment with Expiring Keys.

Refer to the API for reference.

Summary

We used Workers KV to create a file upload to upload markdown files as well as display those markdown files as HTML. As a bonus there is a page that lists the FILES uploaded.

Browse the repository at this point in history.

Subscribe to my Newsletter to continue learning about Cloudflare Workers!

Cheers 🍻

• Join my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

Cloudflare Workers run on the Edge (server side), so the resulting output will be server rendered. making your page SEO (Search Engine Optimization) friendly.

Cloudflare Workers Course Outline

1. Getting Started with Serverless Cloudflare Workers
2. Cloudflare Workers as a Web Server (with Webpack)
3. Making API Calls From a Cloudflare Worker
4. Key-Value Storage With Cloudflare Workers KV
5. [Bonus] Smart Routing with Cloudflare Workers

Starting Where We Left Off

In case you haven't been following along with the previous lessons (you don't have to), you can start here:

# continue where we left off
$ git clone https://github.com/joelnet/cloudflare-worker-website.git
$ cd cloudflare-worker-website
$ git checkout ae0c7dcf533099832bc313099425d270e326148e
$ npm ci

Recommended: Use Native Fetch

I would recommend against using a library like axios and instead use the native fetch. The reason is your Worker has 1 MB limit. Adding any new libraries should be carefully considered due to this hard limit.

Cloudflare Worker code runs server side. Thus you don't have to worry about browser incompatibility with libraries.

Test other clients you may be considering. Since Workers do not run Node.js, some npm modules may not work. For example, any library that requires node-gyp will not run in a Worker.

If a library will run in the browser, it should also run in a Cloudflare worker.

Create src/api.js

I like to create an src/api.js file to hold all my API calls. This way if an underlying change needs to happen, it can happen in one file. This file will also simplifies the source for files using the API.

For this demo, I will be making two API calls, fetchAllPeople and fetchPerson.

const getJson = async url => {
  const response = await fetch(url)
  if (!response.ok) {
    throw new Error('Unexpected HTTP Response')
  }
  return await response.json()
}

export const fetchAllPeople = () =>
  getJson('https://swapi.dev/api/people')

export const fetchPerson = id =>
  getJson(`https://swapi.dev/api/people/${id}`)

If you are curious about why I create the getJson abstraction this way and want to know more, I have created a video on this topic.

Create src/pages/allPeople.js

This page will display a list of all available people. The SWAPI API features pagination, which we'll ignore to keep this demo short. Feel free to implement the pagination on your own 👍

import { fetchAllPeople } from '../api'
import { htmlResponse } from '../lib/responses'

const personToLi = (person, index) =>
  `<li><a href="/people/${index + 1}">${person.name}</a></li>`

const allPeople = async () => {
  const { results } = await fetchAllPeople()
  const persons = results.map(personToLi)
  const html = `<ul>${persons.join('')}</ul>`
  return htmlResponse(html)
}
export default allPeople

Create src/pages/person.js

This page will display the individual person. There are more sophisticated ways of pulling the id from the URL, but I'm just going to use substring for simplicity of this demo.

import { fetchPerson } from '../api'
import { objectToTable } from '../lib/objectToTable'
import { htmlResponse } from '../lib/responses'

const person = async request => {
  const url = new URL(request.url)
  const id = url.pathname.substring(8)

  const response = await fetchPerson(id)
  const table = objectToTable(response)
  const html = `${table}
    <a href="/people">&lt;&lt; back</a>
  `

  return htmlResponse(html)
}

export default person

Support files

Create src/lib/objectToTable.js. This will convert an Object to an HTML table for this demo.

I don't care for looking at raw JSON, even if it's just a demo. So I'm gonna pretty it up a bit.

export const objectToTable = obj => {
  const rows = Object.entries(obj)
    .map(([key, value]) => `<tr><th>${key}</th><td>${value}</td></tr>`)
    .join('')
  return `<table>${rows}</table>`
}

Add Pages To The Router

Now I need to add the routes to the src/index.js Router.

Import the new pages at the top of src/index.js:

import allPeople from "./pages/allPeople";
import person from "./pages/person";

Then add the router code for those pages:

router.get('/people/?', () => allPeople(request))
router.get('/people/.+', () => person(request))

Run The Cloudflare Worker Locally

$ npm run preview

After the browser opens, navigate to /people.

Click on any person to view the /people/{id} route.

View the source to confirm the application is rendered on the server.

<ul>
  <li><a href="/people/1">Luke Skywalker</a></li>
  <li><a href="/people/2">C-3PO</a></li>
  <li><a href="/people/3">R2-D2</a></li>
  <li><a href="/people/4">Darth Vader</a></li>
  <li><a href="/people/5">Leia Organa</a></li>
  <li><a href="/people/6">Owen Lars</a></li>
  <li><a href="/people/7">Beru Whitesun lars</a></li>
  <li><a href="/people/8">R5-D4</a></li>
  <li><a href="/people/9">Biggs Darklighter</a></li>
  <li><a href="/people/10">Obi-Wan Kenobi</a></li>
</ul>

Summary

Pulling data from an API and rendering the content from the server side is key for application that are require SEO. Cloudflare Workers let's us do this with very little code.

Browse the repository at this point in history.

Subscribe to my Newsletter to continue learning about Cloudflare Workers!

Cheers 🍻

• Join my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

This is the second article in a series I am doing on Cloudflare Workers. I am excited about the Cloudflare Workers platform and if you are too, subscribe to my Newsletter and get a notification for the next article!

Cloudflare Workers Course Outline

1. Getting Started with Serverless Cloudflare Workers
2. Cloudflare Workers as a Web Server (with Webpack)
3. Making API Calls From a Cloudflare Worker
4. Key-Value Storage With Cloudflare Workers KV
5. [Bonus] Smart Routing with Cloudflare Workers

Generate a Cloudflare Worker Website

If you already have wrangler installed, you can skip the npm install step.

$ npm install -g @cloudflare/wrangler
$ wrangler generate my-website
$ cd my-website

Configure Webpack

Webpack supports the webworker target output with this webpack.config.js.

I also move index.js to src/index.js. I like to keep all my source files in an src directory so they aren't hidden by all the configs in the root.

module.exports = {
    target: 'webworker',
    context: __dirname,
    entry: './src/index.js',
    mode: 'development',
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
        ],
    },
}

I am also installing the html-loader to include html files in the bundle.

$ npm install --save-dev html-loader

Change The Worker Type to Webpack

Change the type to webpack and add webpack_config with the value webpack.config.js.

Don't forget to set theaccount_id.

name = "my-website"
type = "webpack"
account_id = "1234567890" # set the account_id here!
workers_dev = true
route = ""
zone_id = ""
webpack_config = "webpack.config.js"

Add HTML Files

Create an html directory and add an index.html and 404.html.

index.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>
    <h1>Hello Worker!</h1>
</body>
</html>

404.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>
    <h1>404 Not Found</h1>
</body>
</html>

Loading Routes

Modify the src/index.js file to import the HTML files and then in handleRequest, return either the index.html or the 404.html.

import index from '../html/index.html'
import notFound from '../html/404.html'

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Respond with hello worker text
 * @param {Request} request
 */
async function handleRequest(request) {
  const { pathname } = new URL(request.url)

  if (pathname === '/') {
    return new Response(index, {
      headers: { 'content-type': 'text/html' },
    })
  }

  return new Response(notFound, {
    headers: { 'content-type': 'text/html' },
    status: 404,
  })
}

At this point let's preview and make sure it's all working.

$ wrangler preview --watch

If all goes well, then a window should popup like this one showing our index.html page.

Smarter Routing

Routing with if statements is pretty primitive. I'm gonna improve this.

Copy the router.js from cloudflare / worker-template-router or (2) and paste it into src/lib/router.js.

Switch back to src/index.js and import the Router at the top of the file.

import Router from './lib/router'

Now I can change the routes inside handleRequest.

async function handleRequest(request) {
    const router = new Router()

    router.get(
        '/',
        () =>
            new Response(index, {
                headers: { 'content-type': 'text/html' },
            }),
    )
    router.all(
        () =>
            new Response(notFound, {
                headers: { 'content-type': 'text/html' },
                status: 404,
            }),
    )

    const response = await router.route(request)
    return response
}

It might not seem like a big change, but the route is now checking the path for / and the method for GET. This will give me great flexibility in my planned future.

Refactoring

At this stage the Website is working pretty well, but I always like to do a little bit of refactoring in the end. It just makes me happy.

Responses

First, I'm going to move the responses into a new file.

/**
 * src/lib/responses.js
 */
import notFoundHtml from '../../html/404.html'

export const htmlResponse = html =>
    new Response(html, {
        headers: { 'content-type': 'text/html' },
    })

export const notFoundResponse = () =>
    new Response(notFoundHtml, {
        headers: { 'content-type': 'text/html' },
        status: 404,
    })

Now I can import these from src/index.js

import { htmlResponse, notFoundResponse } from './lib/responses'

Then my handleRequest function cleans up like this.

async function handleRequest(request) {
    const router = new Router()

    router.get('/', () => htmlResponse(index))
    router.all(() => notFoundResponse(notFound))

    const response = await router.route(request)
    return response
}

Pages

I like having the concept of pages, similar to how Next.js works. All my logic can't be written inside of src/index.js and I like to break this out early.

So I'm going to create a pages directory and create my two routes.

/**
 * src/pages/index.js
 */
import { htmlResponse } from '../lib/responses'
import index from '../../html/index.html'

const home = () => htmlResponse(index)

export default home

/**
 * src/pages/404.js
 */
import { notFoundResponse } from '../lib/responses'

const notFound = () => notFoundResponse()

export default notFound

In src/index.js I import the new routes and remove some old imports.

import index from './pages/index'
import notFound from './pages/404'
// import index from '../html/index.html'
// import notFound from '../html/404.html'
// import { htmlResponse, notFoundResponse } from './lib/responses'

Then my handleRequest turns into this. Notice how I am passing the request into each page. It's unused now, but I will eventually have a route that will need it.

async function handleRequest(request) {
    const router = new Router()

    router.get('/', () => index(request))
    router.all(() => notFound(request))

    const response = await router.route(request)
    return response
}

Source Code

Check out the project over on my Github repo.

https://github.com/joelnet/cloudflare-worker-website

Summary

Configuring Cloudflare Workers to work as a web server is pretty simple using the webpack project type.

I was able to import HTML using the html-loader Webpack plugin and serve pages based on custom routing.

Subscribe to my Newsletter to continue learning about Cloudflare Workers!

Cheers 🍻

• Join my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

Cloudflare Workers Course Outline

1. Getting Started with Serverless Cloudflare Workers
2. Cloudflare Workers as a Web Server (with Webpack)
3. Making API Calls From a Cloudflare Worker
4. Key-Value Storage With Cloudflare Workers KV
5. [Bonus] Smart Routing with Cloudflare Workers

Advantages

Server Side Rendering - Better SEO compared to a static site host.

Automatic Scaling - Scaling is not an easy problem to solve and can be a PITA.

Fast - Cloudflare Workers are geographically distributed, so they're fast wherever your users happen to be.

0ms Cold Starts - Unlike AWS Lambdas, Azure Functions, and Google Cloud Functions, Cloudflare Workers have no startup time.

Price - The price is amazing and the FREE plan might even be enough for your needs.

Disadvantages

CPU Runtime - 10ms (free) and 50ms (paid). You won't be running any CPU intensive tasks using Cloudflare Workers. So those will have to be offloaded to another server or service. Idle time isn't counted against this, so wait time for long API calls won't count against this.

Simultaneous Outgoing Requests - 6. If you make a lot of API calls from your workers, you could easily hit this limit. So you'll have to be smart about caching.

It's not Node.js - Cloudflare Workers do not run in a Node.js environment. There may be some Node API's or NPM modules that don't work in the Cloudlfare environment. But I have found that if it run inside a web browser, it's likely that it will also run in a Worker.

What Does It All Mean?

Cloudflare Workers are not a replacement for Lambdas, or Cloud Functions. You likely won't be able to port your code from one to a worker. You will also need to design your application around the strengths and weaknesses of Workers.

With that being said, I am incredibly excited about the Cloudflare Worker platform. I have been working on some PoC projects on Cloudflare Workers and have been pretty impressed with the experience so far.

Let's Get Started

Install the wrangler CLI.

$ npm install -g @cloudflare/wrangler

Use wrangler to generate a new site.

$ wrangler generate my-worker
$ cd my-worker

Make sure it works

$ wrangler preview --watch

If all goes well, a window should popup looking a bit like this:

Congratulations, your Cloudflare Worker is running locally!

Create an API Token

Sign into Cloudflare and go to the api-tokens page and click Create Token then select Use Cloudflare Workers template.

My permissions looks like this:

Copy your Token and keep it somewhere safe, like a password manager. It will not be shown again.

Now launch wrangler config and enter in your API Key.

$ wrangler config

There are other ways to authenticate, read the documentation for more details, but an API Token is my preference.

Publish Your Project

Open your wrangler.toml file and populate your account_id. Then use the publish subcommand.

$ wrangler publish

After publishing, I get a message with the URL of my new Worker.

More

I will be creating many more articles and videos talking about Cloudflare Workers. Please subscribe to my 📰 Newsletter to be notified when new articles come out.

Read further: Cloudflare Docs - Getting Started

Cheers 🍻

• Join my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

Photo by Rakicevic Nenad from Pexels

Even worse are the debates on social media about best practices and anti-patterns that are also without context.

It's the context that is missing and is so important in making these decisions.

Context is King! 👑

Do I Really Write Code Differently?

Absolutely. There's a quote somewhere that goes something like this:

"A Junior Developer knows not of design patterns. A Senior Developer knows when to apply design patterns. A Master Developer knows when not to apply those design patterns." -- Unknown Author

There isn't a single design pattern that has a rule that says it should be used in 100% of scenarios. But sometimes we treat them like they should be.

With all codes, patterns, practices, use your best judgment.

Project Types

There are a few ways I classify the projects that I work on. The project type usually determines how I design the software.

This is by no means an exhaustive list and may include overlap. Your list may be different.

Proof of Concept

A Proof of Concept (PoC) project's priority is development time. A PoC project should be created as fast as possible.

You may be tempted to write the code in a way that could be re-used if the project moves out of the PoC phase, but you would be sacrificing the main priority, which is speed of development.

Do you struggle with flex grid when you could bang out a <table> in 3 seconds? Okay, use a <table>.

Would setting up React take too long when you could do the same in jQuery in a minute? Okay, then use jQuery!

Redux vs a Global? Okay... you get it now.

Testing, Logging, Metrics, Monitoring, Performance, Scaling? Not in the PoC. Just make it work.

Whether it is successful or not, this code should be mostly discarded.

Personal (Pet Projects)

This is my favorite type of project because there are no rules. The project's priority is me! Do I want to go with a functional (FP) design? I'm gonna go for it. Do I want to learn a new technology? Hell ya!

This is usually where I explore. I find some new technology and I explore it as much as I can in my own personal pet projects.

I typically apply more care for readability (compared to a PoC) in my Personal projects because I tend to pick them up again after years and still want to be able to understand them.

I don't care too much about testing or design patterns. I'm usually just exploring here.

I also like to include a README.md to remind me how to start/debug/deploy the project. This has saved my ass more than once.

Open Source

The priority of an Open Source project should be readability. The audience of this project is people who will use the code as well as people who will read the code.

You will be judged by the quality of your source, so keep it tight, clean, and well documented.

The higher the code coverage the better on an Open Source project. Give contributors the confidence of seeing green tests to know they didn't break anything. Also give yourself confidence to merge requests.

It's good to have some design patterns and practices laid out in a CONTRIBUTORS.md. This will clear up how contributors should write code and give you something to point to when a merge request deviates from the standard.

Code should be crafted with consideration, care, and impact.

Libraries

Library code should focus on the developer experience.

The focus should be on creating documentation and example code. The projects I love all have great documentation.

I also spend a little extra time to focus on input validation and verbose Error messages. You don't know what values a developer is going to pass into your code. So a little extra attention at this step can go a long way.

The focus on input validation can be the difference between good errors and bad errors.

// ❌ Error: Cannot read property 'toString' of undefined
// ✅ Error: Options must include a 'url' property. more info: https://<url-to-docs>

I try to optimize the code since I do not know how or where the code will be used and don't want to be the bottleneck in someone's application.

I also consider supporting TypeScript types. It's nice when you type dot and the editor will IntelliSense complete your code.

Enterprise Applications

The main focus of an enterprise application is uptime and performance.

Extra time needs to be spent to catch bugs before reaching production. This means unit tests, integration tests, cicd, etc.

Logging, Metrics, Monitoring, and Alerting all become critical to identify and debug issues.

Care must be taken when handling API keys and other secrets which could be leaked from source code.

Deployments tend to be slower due to the coordination and QA involved. So it's nice to be able to change configuration values without redeploying the application.

There is a lot of care that goes into an enterprise application to make sure it's always up.

Summary

It can be overwhelming reading and navigating tech articles today. Take them all with a grain of salt and context. There are times to use them, there are also times to not.

There is no one size fits all. It all depends on the context.

Cheers 🍻

• Join my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

Photo by Markus Spiske on Unsplash

Install Keybase

Keybase Sites are accessed through their software so you'll have to head over to Keybase.io and follow the directions for your operating system to install.

After installing the Keybase client, navigate to the Files tab. You should see a screen similar to this.

Follow the directions to Enable Keybase for the file system for your operating system. This will give you native file system access to your Keybase secure file share.

Once the Keybase File System has been installed you should be able to access your files at /keybase for Mac/Linux and K:\ on Windows.

If everything is setup correctly, under /keybase you should see three directories.

/keybase
    /private
    /public
    /team

The Keybase Subdomain

All Keybase accounts are given a subdomain with the format <username>.keybase.pub. For example, my username is joelnet, so my subdomain is joelnet.keybase.pub. This is where my static files will live.

Copying Files to Keybase

Files can be added to the Keybase Subdomain by copying them into /keybase/public/joelnet (K:\public\joelnet on Windows). All files copied here are PUBLIC and everyone has read access to them.

I have prepared a Gatsby site that I am going to copy to /keybase/public/joelnet (K:\public\joelnet on Windows).

Your website has been deployed! Open up a browser and visit your new site. My site is now up and visible on joelnet.keybase.pub 🔥

Custom Domain Names

Keybase also supports custom domain names, but the process is a little different.

The site needs to be deployed under /keybase/private/<username>,kbpbot/<site> (K:\private\<username>,kbpbot/<site> on Windows). <site> can be any name. This gives you the flexibility to host multiple sites on Keybase.

The next step is setting up the DNS.

Create a CNAME to point to kbp.keybaseapi.com.

Next create a TXT record. If your site is at my-site.example.com, then prefix the record with _keybase_pages..

This is what my DNS records look like:

After copying your files, your website should be accessible on your custom domain!

End

More information about Keybase Sites can be found here.

• Join my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

Cheers 🍻

Photo by Killian Eon from Pexels

JavaScript's Default Array Sort

JavaScript's Array.sort defaults to a String sort. This catches many people off guard when attempting to sort an Array of type Number.

// ❌ Default search is a String search
const numbers = [10, 1, 3, 15]
numbers.sort() // [ 1, 10, 15, 3 ]

In the above example, each Number is converted to a String and then sorted using a String sort.

At first, this can seem like a WTF JavaScript moment, but this happens because an Array can contain mixed elements and JavaScript doesn't know how it should sort. So sort defaults to a String sort.

const array = [1, 2, 3, 'Joel', 4, { userId: 123 }]

When we want something other than a String sort, we have to be explicit.

Custom Sort Compare Function

Creating a custom sort compare function is pretty easy. The function takes two elements, then we return -1 if the first is lower and 1 if it's higher. 0 for the same.

const compareFunction = (a, b) => {
    // Pseudo Code
    if (a is less than b) return -1
    if (a is more than b) return 1
    return 0
}

Then pass that function to the sort method.

myArray.sort(compareFunction)

This flexibility will allow us to be creative with our sorting algorithms.

Number Sort

To sort a Number Array we could create a custom compareNumbers function and pass that into Array.sort.

const compareNumbers = (a, b) => a - b

const numbers = [10, 1, 3, 15]
numbers.sort(compareNumbers) // [ 1, 3, 10, 15 ]

Custom Object Sort

Let's say we had some data that looks like this:

const customers = [
    { id: 1, orders: ['a-1000', 'x-2000', 'c-8000'] },
    { id: 2, orders: ['a-1010'] },
    { id: 3, orders: ['a-1040', 'c-8050'] },
]

Our requirement is to sort by the number (length) of orders. So the order should be 2, 3, 1.

We can do that with a custom compareOrderLength function that will sort by customer.orders.length.

const compareOrderLength = (a, b) => a.orders.length - b.orders.length

customers.sort(compareOrderLength)
/**
 * [
 *   { id: 2, orders: [ 'a-1010' ] }, 
 *   { id: 3, orders: [ 'a-1040', 'c-8050' ] }, 
 *   { id: 1, orders: [ 'a-1000', 'x-2000', 'c-8000' ] }
 * ]
 */

Complex Custom Sorting

I recently had a use case where an API was returning data that looked like this.

// API Response
["1", "10", "2", "BLA", "BLA2", "3"]

The Array contained all String items, but the business wanted the items to display like "1, 2, 3, 10, BLA, BLA2".

That meant, I had to detect when the String was a Number and Sort the "numbers" first and the text after.

As complex as that sounds, the sort algorithm wasn't too bad.

const isNumeric = (num) => !isNaN(num)

const customCompare = (a, b) => {
    if (isNumeric(a) && !isNumeric(b)) return -1
    if (!isNumeric(a) && isNumeric(b)) return 1
    if (isNumeric(a) && isNumeric(b)) return a - b
    return a < b ? -1 : 1
}

// [ '1', '2', '3', '10', 'BLA', 'BLA2' ]

End

So just remember the default Array sort is a String sort. To sort by anything else, you must create a compare function and pass that into sort.

• Check out my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

Cheers 🍻

Photo by Kelly Sikkema on Unsplash

Why Tailwind CSS

Why Tailwind CSS is an interesting piece by swyx making the case for Tailwind.

What makes this article interesting is that he started as a non-believer even making such remarks against it:

Tailwind caused ugly unreadable classname soup and said zero-runtime CSS-in-JS could do more with a lower learning curve. -- swyx

After shipping a few projects with Tailwind, he's now done a full 180.

I was wrong on 2 counts: Tailwind is easier to learn than I thought, and CSSinJS's flexibility can be a negative. -- swyx

From naysayer to believer, it's an interesting read if you are on the fence with Tailwind.

🔗 Why Tailwind CSS

Testing Non-Exported Functions in JavaScript

Testing Non-Exported Functions in JavaScript by samantha_ming solves the problem of testing non-exported functions.

Typically these function either go untested or become exported just for testing.

Now you can leave those functions un-exported and still run your test suite against them.

🔗 Testing Non-Exported Functions in JavaScript

RSLint

RSLint is an extremely fast JavaScript linter written in Rust focusing on ease of use, customizability, and speed.

RSLint is still a Work in Process and ESLint is still the recommended linter for JavaScript, but this is still an interesting project that I'm tracking.

🔗 RSLint

Amplibox

Amplibox is a Self Hosted File Storage App with AWS Amplify also by swyx.

The demo looks incredible and it's pretty easy to setup.

🔗 Amplibox

Remix

Remix is at it again! This time with a coding tutorial from Ryan Florence on caching.

If you were ever curious about what an etag is, cache-control headers and how the browser reacts to these. Then I I would highly recommend watching this:

🔗 Remix

Community Shout Out

Devs Like Us is a brand spanking new YouTube channel with only 80 subscribers so far!

They have got a bunch of Podcast style content and discuss topics like Work Life Balance, Self-Taught vs Bootcamps vs College, etc.

Their content is fantastic and they deserve way more than 80 subs. So head over to their YouTube and hit that SUBSCRIBE!

📺 Devs Like Us YouTube

🌐 https://devslike.us

End

• Check out my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

So here it is, stay up to date with my 📰 latest articles or 📺 YouTube videos!

Be Sure To:

• Check out my 📰 Newsletter
• Subscribe to my 📺 YouTube, JoelCodes
• Say hi to me on Twitter @joelnet

Photo by Jeremy Bishop from Pexels