DEV Community: JavaScript Joel

Dungeon Sweep: Knight -- devlog 001

JavaScript Joel — Tue, 25 Apr 2023 22:27:29 +0000

I recently decided I wanted to make an indie game. I have had this idea for a while and I think it's about time.

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 🍻

Creating a TypeWriter Effect in Phaser.js v3

JavaScript Joel — Mon, 24 Apr 2023 18:30:02 +0000

I recently added some dialog options for my indie game, Dungeon Sweeper: A Knights Adventure and wanted to create a TypeWriter effect for the dialog text.

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 on http://joel.net.

Cheers 🍻

🧠 I Code Differently Depending on These 5 Project Types

JavaScript Joel — Tue, 03 Nov 2020 17:54:29 +0000

There are a lot of articles out there talking about best practices, patterns, principles, etc. When I say a lot, I really mean an overwhelming soul crushing amount of articles. But few of them talk about when these practices should be applied.

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

FREE JamStack / Static Site Hosting with Keybase.io

JavaScript Joel — Mon, 26 Oct 2020 18:10:33 +0000

Keybase offers secure messaging and file sharing. Included in the file sharing offering is 250GB of storage which can also be used to host public JamStack / Static Websites.

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

Custom Array Sort Algorithms in JavaScript

JavaScript Joel — Thu, 22 Oct 2020 21:05:22 +0000

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

This Week in JavaScript by Joel 2020-10-16

JavaScript Joel — Fri, 16 Oct 2020 17:46:24 +0000

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.

[]((https://dev.to/swyx/amplibox-a-self-hosted-file-storage-app-with-aws-amplify-1f6g)

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

Simulated Function Overloading in JavaScript

JavaScript Joel — Thu, 15 Oct 2020 05:54:29 +0000

JavaScript may not support Function Overloading, but we can simulate the behavior.

What is Function Overloading

function overloading or method overloading is the ability to create multiple functions of the same name with different implementations. -- Function overloading

Other Languages

In other languages, an overloaded function can be created by adding another function with the same name.

// C#

void doThing(int x)
{
    Console.WriteLine("int x");
}

void doThing(string y)
{
    Console.WriteLine("string y");
}

This can't be done in JavaScript because the 2nd function will overwrite the 1st function.

Simulate the Behavior of Function Overloading

What I would like to do is to have a named argument function, but also support traditional arguments. So I would like to be able to call my function both of the following ways and have it work.

// Traditional
doThing(3, 4);

// Named Arguments
doThing({ x: 3, y: 4 });

One method of simulation this behavior is to detect the function argument types.

function doThing(x, y) {
    // detect named argument object
    if (typeof x === 'object' && x != null) {
        return doThing(x.x, x.y)
    }

    console.log({ x, y })
}

// ✅ Now both styles work!
doThing(3, 4);
doThing({ x: 3, y: 4 });

In this example, the first argument x is tested to see if it is of type object. If it matches, the the function is called with the parameters pulled from x.

Recommended Behavior

Because JavaScript doesn't natively support Function Overloading, it is usually recommended to create two separate functions and not attempt to overload functions.

// Sometimes it is better to create two separate functions.
function readFile(fileName) { /* code */ }
function readFileContents(contents) { /* code */ }

But because I just want to support named arguments as well as maintain backward compatibility with traditional arguments. So in this instance, I find the Simulated Function Overloading above an acceptable solution too.

tl;dr

JavaScript doesn't natively support Function Overloading, but we can simulate this by checking the parameter types. Prefer creating two separate functions for the different behaviors. But in some cases, Simulated Function Overloading is also a good solution.

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

Cheers 🍻

Photo by israel palacio on Unsplash

How I Setup My Own Personal CDN using Cloudflare and S3

JavaScript Joel — Tue, 13 Oct 2020 00:49:01 +0000

What is a CDN?

According to Cloudflare a CDN is:

A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content.

A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

A properly configured CDN may also help protect websites against some common malicious attacks, such as Distributed Denial of Service (DDOS) attacks.

-- What is a CDN?

tl;dr A CDN is a network of computers around the world that deliver content efficiently.

What Can a CDN Provide?

Caching to reduce the load on my webserver
Geographic Distribution for speedy delivery regardless of where you are
DDoS Protection from sudden spikes in traffic
Compression of files for faster delivery for user on slow internet

Why Did I Want a CDN?

I often find myself needing to host public static files. I want to do so in a way that is fast, efficient, reliable, and scalable.

Recently an article of mine hit #1 on the HN main page.

I also found out it was trending on Reddit and who knows where else. So long story short. My domain had a load of traffic in the blink of an eye.

I was lucky enough to have recently moved joel.net to Hashnode just weeks earlier. My previous web host would not have been able to handle that amount of traffic. Even during this blast of traffic joel.net was online the entire time.

Since I also host other files, I better be prepared. So I plan on going full CDN.

Cloudflare

This is where Cloudflare comes in. I use them to host the DNS for joel.net. Cloudflare will provide these CDN features by default through their DNS offering, which is also FREE. 🔥

Now all I need is a place to host static files.

AWS Simple Cloud Storage (S3)

You could use any static web host, but I'm choosing S3 for this because it's what I am already familiar with.

It just needs to be online and also allow a custom domain name.

Setting Up My S3 Bucket

The S3 bucket name must match the domain name. In this case, I am using cdn.joel.net for my bucket name.

Click Next a bunch of times until you see this screen.

Be sure to uncheck Block all public access. Then check the acknowledge popup above.

Keep clicking Next until you can click Create Bucket.

Now I need to configure this bucket for Public access. So I head over to Permissions, then Bucket Policy.

I insert my bucket name, cdn.joel.net, into Resource and then paste this into the Bucket policy editor.



{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cdn.joel.net/*"
        }
    ]
}

Next, I setup Static website hosting under Properties.

I check Use this bucket to host a website and set up my index.html and also my 404/404.html. I will create a directory for my 404 so that I can host assets related to the 404 in there as well.

At this point, I can upload a file and make sure it works by accessing the Endpoint from this page.

Configuring Cloudflare

The last step is to set up my Cloudflare DNS to point to my freshly created S3 bucket.

I do this by adding a new CNAME record with the name cdn and the target set as the domain for the S3 bucket.

At this point, I should be able to access my bucket using my custom domain name. So let's test my 404 page http://cdn.joel.net. Looks like it's working!

Now just to check one last thing, I open the Developer Console, click the Network tab, click the request cdn.joel.net and go to Headers.

Here I can see content-encoding: br. That means the HTML was compressed using the Brotli compression algorithm all automatically for me by Cloudflare.

End

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

Cheers 🍻

This Week in JavaScript by Joel 2020-10-08

JavaScript Joel — Sat, 10 Oct 2020 21:28:34 +0000

This Week in JavaScript I talk about the things I found interesting.

Hacktoberfest 2020

Hacktoberfest has started. Well, it actually started a week ago. Just in case you have been under a rock and don't know what Hacktoberfest is...

Hacktoberfest is an annual event held every October held by Digital Ocean where developers are rewarded for making Open-Source contributions. While Hacktoberfest 2020 has been Full of Drama, I would still recommend giving it a go.

🔗 https://hacktoberfest.digitalocean.com

How To Contribute To Open-Source Projects As A Beginner

Do you want to contribute to Open-Source but aren't sure where to start? Getting that first step can be intimidating if you have never made a contribution before.

@Catalin Pit has created a step-by-step guide for creating that first Open-Source contribution. Follow this guide and become an Open-Source contributor!

🔗 How To Contribute To Open-Source Projects As A Beginner

Remix

We are all looking forward to the launch of Remix, a new React Framework by the creators of react-router, Ryan Florence and Michael Jackson.

It looks so simplify React Apps with features like File Routing and improved async with React Suspense.

Follow the blog to keep up to date with the development of Remix.

🔗 https://remix.run

Mocky

Mocky makes the claim of being "The world easiest & fastest tool belts to mock your APIs" and they might just be right.

When creating an application, sometimes the APIs we need aren't ready but we need something now. Mocky can be used to create an instant mock API. No signup. Free. Unlimited.

No need to create mocks in your app or spin up a local mock API. Try Mocky!

🔗 https://designer.mocky.io

I can't write a for loop and it does not matter

Sebastien Lorber says he can't write a for loop and it doesn't matter. He goes on to say...

I've been using JavaScript daily for 7 years, and I'm not able to remember the syntax of a JavaScript for loop.

Despite this fact, I'm a rather successful freelance developer. - Sebastien Lorber

I often find the main argument against functional programming being "it's too difficult compared to non-functional code". I believe this argument to be flat out wrong, instead it is unfamiliar code that you find difficult.

If you happened to learn functional programming first, you would find it equally difficult to learn non-functional code. That is exactly what Sebastien Lorber articulates in his article.

🔗 I can't write a for loop and it does not matter

Community Shout Out

Shout out to Software Engineer, Content Creator, Teacher, Certified Nerdy Girl, Sidney Buckner and the weekly tech content on her blog and YouTube.

Recommended subscribe 👍

🔗 YouTube: SidneyBuckner
🔗 Twitter: @sidneybuckner18
🔗 Web: https://www.sidneybuckner.com

Connect with Me

📧 Subscribe to my mailing list at the top of the page

📺 Check out my YouTube, Joel Codes

💭 Chat with me me on Twitter @joelnet

#SadJavaScript Comics Are Now Open Source!

JavaScript Joel — Fri, 09 Oct 2020 18:03:10 +0000

Recently I had tweeted out a handful of #SadJavaScript comics.

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

The flow of the #SadJavaScript comic has two coffee cups are laughing at JavaScript's quirks. The next panel reveals a sad JavaScript, trying to explain how they are misunderstood.

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

I thought this would be a fun and cute way to talk about some of the parts of JavaScript that people often lulz at.

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

I was also trying to point out some things like how 0.1 + 0.2 == 0.30000000000000004 is not a bug but the correct behavior.

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

I had a lot of fun making these and I hope you enjoyed reading them.

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

Today, I am leaving a blank comic up for you to download, modify and make your own!

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

The #SadJavaScript Comic Template

So go at it and make your own! Remember to tag me so I can see what you've made. Cheers 🍻

https://cdn.joel.net/joel.net/images/sad-javascript-template.png

How One Guy Ruined #Hacktoberfest2020 #Drama

JavaScript Joel — Tue, 06 Oct 2020 16:19:22 +0000

Hacktoberfest

If you aren't familar, Hacktoberfest is an annual event that occurs every October. It is held by Digital Ocean and encourages developers to submit Pull Requests to Open Source repositories and as a reward you get a T-Shirt.

There's almost no limits, so if your request is merged into any Open Source repository, you qualify. Amazing.

The Fallout

Twitter starts going nuts. Not soon after October begins, we see many popular open source maintainers taking to Twitter complaining about low quality PRs bordering on SPAM.

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

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

Some more honest than others

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

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

Even a Covid19Tracking Repo is under attack

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

A whole new Twitter account @shitoberfest was created to track this

The Cause

This flood of low quality PR spam appears to come from a YouTuber with an audience of 672K where he demonstrates how easy it is to make a Pull Request to a repo.

Where he went wrong was demonstrating a low quality PR, thus setting the bar low for his viewers who went on to copy exactly what he did.

To avoid linking to his YouTube and giving him views, I'll link to this Twitter of the action moment:

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

The Response

The response from CodeWithHarry was weak at best. It offered no apology and instead links to many instances where he avoids responsibility by linking to areas in the video where he encourages quality PRs.

A humble request to everyone to not open spam pull requests on GitHub repositories!
Some people think that I am hurting the open source community.
The purpose of this video was to encourage participation in the events encouraging open source participation and to teach people what a pull request is and how a pull request works!
People understanding Hindi can watch the video but for people who are non Hindi speakers and for some reason think that I am requesting people to open spam pull requests, all I have told throughout the video is to make legit contributions to the open source.
I have said nowhere in the video to open spam pull requests.
I have made it clear in the video several times (for instance in the video at 00:55 - that you have to earn it by making contributions that count, 07:51 - Make legit contributions, 10:58, 11:10, etc).
Also at 05:33 - I avoided an actively maintained project and instead opened pull request on a project which was not being maintained just to demonstrate how contributing to an open source repository actually works.
I have not encouraged spam pull requests in bulk!
I also agree with the fact that events like hacktoberfest can be made better by making only the legit merged pull requests count. But that has been a topic of debate since years when hacktoberfest was launched.
I would also like to mention that many people opened their GitHub account, learned to make pull requests and made some amazing legit contributions to the open source too! I am proud of them and would like the entire developer community to act in a responsible manner.

Thanks,
Harry 🙏

But this pinned comment is the least amount of effort he could have done to slow this shit storm.

How Do You Know CodeWithHarry Was Really The Cause?

Here's a screenshot of some pull requests from the repo micromtn.

Every request looks something like this:

This looks remarkably similar to the PR that was demonstrated in the video.

A search for "improve docs" shows 319,251 issues.

A search for "Amazing Project" is now showing 21,177 issues.

CodeWithHarry

CodeWithHarry is not a bad guy, I don't want to cancel or shame him personally. After all, we're all human. With a following that big, he's definitely helped a lot of people. But he made a mistake here and he's going to have to be responsible for the outcome, which so far isn't looking great.

At the moment of this writing, his GitHub is 404. Was it taken down? Made private? Renamed?

It's only day 1.

Digital Ocean

Even Digital Ocean has chimed in on this fiasco.

We’ve traced the majority of this year’s spammy contributions back to a participant with a large online audience who openly encouraged their community to take part in spammy activities, including ideas on how to game the system.

Wait and See

So Lots of drama today. I guess all we can do is wait and see.

Hello HN 👋

This article hit #1 on HN. Go read the comments there for more.

https://news.ycombinator.com/item?id=24658052

Follow Me

Subscribe to my newsletter on joel.net

Find me on Twitter @joelnet or YouTube JoelCodes

Cheers 🍻

Update

Response from GitHub:

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

Response from Digital Ocean:

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

This Week in JavaScript by Joel 9/30/2020

JavaScript Joel — Thu, 01 Oct 2020 16:32:17 +0000

During this week in JavaScript, I found some Epic React training, a React framework for CloudFlare Workers, a replacement for Redux, my YouTube hit 1,000, and a special shout out to a tech community member.

Epic React Training

Kent C. Dodds and team have released Epic React training.

Epic React includes 19 hours of video training, workshop excercises, 10 hours of video conversations with React experts.

Prices vary from $83 to $419. It's pricey, but considering the quality of Kent C. Dodds's other content, it'll be worth every penny.

Flareact

Flareact is an edge-rendered React framework built for Cloudflare Workers.

I have been spending some free time exploring Cloudflare Workers and have even build a POC React framework for it. I am now considering throwing that all in the bin and replacing it with Flareact. I am very excited for this project!

Zustand

Zustand is state management library for React and claim to have a comfy api based on hooks and I would agree. The code looks incredibly simple and I am looking forward to replacing a bunch of my React boiler plate with this.

1,000 Subscribers 🎉

My YouTube Channel, Joel Codes, has reached 1,000 subscribers!

Such a big milestone and I am so thankful for everyone who has subscribed. It means so much to me. So thanks again!

Community Shout Out

Congrats to @SimonHoiberg for his Twitter API Client making it to number 4 on the GitHub trending list for TypeScript.

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

Follow Me

Subscribe to my newsletter on joel.net

Find me on Twitter @joelnet or YouTube JoelCodes

Cheers 🍻