DEV Community: Siddharth

The "well-known" Symbols in JavaScript

Siddharth — Fri, 15 Dec 2023 08:05:28 +0000

You might have stumbled upon the weird @@thingies in JavaScript before. Maybe you saw an @@iterator or an @@match somewhere

These aren't valid JavaScript (@@iterator would throw an error). They are actually internal Symbols used in
JavaScript. They are used to implement features like iteration, instanceOf, and such internally. They actually might get removed or changed

For example: you can set @@isConcatSpreadable to stop .concat from spreading arrays.

const customArray = [1, 2, 3];
customArray[Symbol.isConcatSpreadable] = false;

const concatenatedArray = [4, 5, 6].concat(customArray);
console.log(concatenatedArray); // Output: [4, 5, 6, [1, 2, 3]]

Another one, a more useful one, is @@iterator it is used internally to define iteration - ie in for loops.

const customIterable = {
    [Symbol.iterator]() {
        return {
            next() {
                // Infinite loop
                return { value: 'anything', done: false }
                // return {done: true} when done
            }
        }
    }
}

for (const item of customIterable) {
    console.log(item);
}

@@match can also have potential use cases:

class CustomDateMatcher {
    [Symbol.match](str) {
        // ...logic...
    }
}

const str = '21st of March';
console.log(str.match(new CustomDateMatcher('21/03'))); // Custom pattern matching result

More notable mentions:

@@toStringTag for converting an object to a string
@@toPrimitive for converting an object to a primitive
@@search for .search()
Full list on MDN

Do you have any ideas / suggestions for how to make use of this in code? Leave a comment!

.toLocaleString, one of the most underrated JavaScript features

Siddharth — Sun, 24 Apr 2022 06:18:55 +0000

.toLocaleString and friends are some of the most underrated features of JavaScript. I came over them through a few different wanderings through MDN and I've used them in like every project since.

Here, I'll show you how you can use them in your own code.

`.toLocaleString` is for formatting

.toLocaleString is a method present on dates and numbers, which is used to format them in a locale-specific way.

new Date().toLocaleString()
// => 24/4/2022, 10:40:00 am

By default, it will use the browser's locale, but you can specify a different one with the locale parameter.

console.log(new Date().toLocaleString('en-US'))
// => 4/24/2022, 10:40:00 AM
console.log(new Date().toLocaleString('en-GB'))
// => 24/04/2022, 10:40:00
console.log(new Date().toLocaleString('ko-KR'))
// => 2022. 4. 24. Ïò§Ï†Ñ 10:40:49

You can further customize the output by specifying the format of the date.

console.log(new Date().toLocaleString('en-US', {
    year: 'numeric',
    weekday: 'long',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false,
}))
// => Sunday, April 24, 2022 at 10:40:00

console.log(new Date().toLocaleString('en-US', {
    dateStyle: 'full',
}))
// => Sunday, April 24, 2022

console.log(new Date().toLocaleString('en-US', {
    dateStyle: 'full',
    timeStyle: 'full',
}))
// => Sunday, April 24, 2022 at 10:40:00 AM India Standard Time

console.log(new Date().toLocaleString('en-US', {
    calendar: 'indian',
}))
// => 2/4/1944 Saka, 10:40:00 AM
// I don't know what that means either

console.log(new Date().toLocaleString('en-US', {
    dayPeriod: 'long',
}))
// => in the morning

console.log(new Date().toLocaleString('en-US', {
    era: 'long',
    dayPeriod: 'long',
    weekday: 'long',
    month: 'long',
    year: 'numeric',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    fractionalSecondDigits: 3,
    timeZoneName: 'long',
}))
// => Sunday, April 24, 2022 Anno Domini at 10:00:00.124 in the morning India Standard Time

This totally eliminates the need of date formatting libraries like Moment.js in your code!

Numbers too!

.toLocaleString is also a method present on numbers, which is used to format them in a locale-specific way.

console.log(10000000..toLocaleString())
// => 10,000,000

As usual, you can specify a different locale with the locale parameter.

console.log(10000000..toLocaleString('ar-EG'))
// => ١٠٬٠٠٠٬٠٠٠
// Another language I know

This one also has options.

// currency
10000..toLocaleString('en-US', {style: 'currency', currency: 'USD'})
// => $10,000.00

10000..toLocaleString('en-US', {style: 'currency', currency: 'USD', currencyDisplay: 'name'})
// => 10,000.00 US dollars

(-11.29).toLocaleString('en-US', {style: 'currency', currency: 'USD', currencySign: 'accounting'})
// => ($11.29)

(-11.29).toLocaleString('en-US', {style: 'currency', currency: 'USD', currencySign: 'standard'})
// => -$11.29

// scientific
10000..toLocaleString('en-US', {notation: 'scientific'})
// => 1E4

10000..toLocaleString('en-US', {notation: 'compact'})
// => 10K
1234..toLocaleString('en-US', {notation: 'compact'})
// => 1.2K

1234..toLocaleString('en-US', {notation: 'engineering'})
// => 1.234E3

1234..toLocaleString('en-US', {notation: 'engineering', signDisplay: 'always'})
// => +1.234E3

0.55.toLocaleString('en-US', {style: 'percent'})
// => 55%

1234..toLocaleString('en-US', {style: 'unit', unit: 'liter'})
// => 1,234 L

1234..toLocaleString('en-US', {style: 'unit', unit: 'liter', unitDisplay: 'narrow'})
// => 1,234L

Once again, this removes the need for a ton of libraries for number formatting!

That was one of the most surprising JavaScript moments for me. Sure, I knew that JavaScript was aware of timezones, but getting access to a whole formatting library? 🤯

New in Node.js v18

Siddharth — Wed, 20 Apr 2022 06:18:09 +0000

Just yesterday, Node.js v18 was released as the current stable version. Here's a quick walkthrough of some of the new features.

Global fetch!

Node.js had a global fetch behind the --experimental-fetch flag, which would allow you to use the Browser Fetch API natively in Node.js. In v18, the experimental Fetch API is available by default.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

(node:82823) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
{ userId: 1, id: 1, title: 'delectus aut autem', completed: false }

You also get access to FormData, Headers, Request, and Response objects.

Access to the Web Streaming API

Node.js now has experimental support for the Web Streaming API

fetch('https://dev.to/api/articles?per_page=1000&page=1')
    .then(response => response.body)
    .then(rb => rb.getReader())
    .then(reader => {
        const stream = new ReadableStream({
            ...
        })
    })

Built in testing

Node.js now has a built-in testing framework, accesible at import('node:test')

import test from 'node:test';
import assert from 'node:assert';

test('true is not false', async t => {
    assert.strictEqual(true, !false);
});

$ node test.js
(node:83584) ExperimentalWarning: The test runner is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
TAP version 13
ok 1 - true is not false
  ---
  duration_ms: 0.000730654
  ...
1..1
# tests 1
# pass 1
# fail 0
# skipped 0
# todo 0
# duration_ms 0.074570679

The output is in the TAP format. You can use the tap or faucet CLIs to pretty print it

$ npm i -g tap
$ tap test.js
index.js 2> (node:84725) ExperimentalWarning: The test runner is an experimental feature. This feature could change at any time
index.js 2> (Use `node --trace-warnings ...` to show where the warning was created)
 PASS  index.js 1 OK 239.361ms



  🌈 SUMMARY RESULTS 🌈


Suites:   1 passed, 1 of 1 completed
Asserts:  1 passed, of 1
Time:   415.463ms
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |
----------|---------|----------|---------|---------|-------------------

$ npm i -g faucet
$ node test.js | faucet

(node:84914) ExperimentalWarning: The test runner is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
✓ true is not false
# tests 1
# pass 1
✓ skipped 0
✓ todo 0
✓ duration_ms 0.076367098

You can read the documentation to learn more

Binaries!

Users can now build Node.js with custom V8 startup snapshots, to increase performance.

In layman's terms, this means that you can cache some dependencies in the node.js source code itself, to improve startup time.

$ cd /where/is/node/source/code
$ ./configure --node-snapshot-main=marked.js # where marked.js is the source of the marked library
$ make node

// your-program.js
// globalThis.marked is now deserialized from the snapshot
// so node.js doesnt need to parse it again
// which improves startup time
const marked = globalThis.marked;
marked(/* ... */);

$ out/Release/node your-program.js

Node.js is working on JS APIs for this, which means that we can essentially build Node.js apps as distributable binaries!

Node.js v18 has some really exciting new features. I've been waiting forever for the fetch API to land and I've always wished Node.js had binaries. The testing framework is also neat!

I made a Node.js colors library in 192 bytes minzipped (+ code explanation!)

Siddharth — Sun, 06 Mar 2022 10:19:50 +0000

A few minutes ago, I published PlanckColors. It's probably the smallest node module for colors on the internet, at just 119 bytes minzipped! It's so small, here's the source code:

let p=['black','red','green','yellow','blue','magenta','cyan','white'],x={},q=['reset','bold','dim','italic','underline','blink',,'reverse','hide','strike'],s=(S='',A=30,T=p)=>T.map((a,i)=>x[a+S]=t=>`\x1b[${i+A}${B}m${t}\x1b[0m`)&&s;s()('Bg',40)('',0,q);export default x;

That's it! 🤯

Planck?

The Planck length is the smallest possible distance between two things. Anything closer than that is considered to be at the same place.

The next smallest name, yoctocolors was already taken, so I settled for PlanckColors 😎

WTF is going on in this code?!?!

let p = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white'],
        // colors
        // the colors are positioned to line up with their ansi escape;
        // black is code 30 (0), red is 31 (1), etc.

    q = ['reset', 'bold', 'dim', 'italic', 'underline', 'blink', , 'reverse', 'hide', 'strike'],
        // styles                                              A
        //                                                     |
        // same here; reset is 0, bold is 1, etc               |
        // notice the double comma. It's used to skip items in an array,
        // so we can skip index 6 which has no style associated with it.

    x = {},
        // the final object containing all the functions

    // This function is used to add new colors.
    s = (
        S = '', // a suffix to add to the color's name
        A = 30, // the number to add to each color,
                // for example, black is at index 0. 30 + 0 = 30, which is the escape code for black
        T = p   // the array from which to add colors. The default is p
    ) => T
        .map(   // using map, as it is shorter than `forEach`
                (
                    a, // color
                    i  // index
                ) => x[a + S] = // set the color to...
                        t => `\x1b[${i + A}${B}m${t}\x1b[0m`) // a function which returns colored text...
                        && s; // and return the function itself, so we can chain calls

s()          // call with all the default arguments
 ('Bg', 40)  // call with bg prefix, and add 40 so we get background escape codes
 ('', 0, q); // call with the styles array

export default x; // finally, export our colors

Should I ditch chalk and use this?

You can!

The only thing to consider is the fact that this library doesn't provide any color detection out of the box. However, since this module only provides 16 colors, it may not be such a big issue. Most terminals support 16 colors.

If you do end up using this, let me know!

MDSveX: The bridge between Markdown and Svelte

Siddharth — Fri, 04 Mar 2022 16:02:19 +0000

A few days ago, I was looking around for tools to write my blog. I knew about MDX, but I wasn't really good at React and friends, which seemed to be the only frameworks supporting MDX painlessly (correct me if I'm wrong!)

But after a bit of research, I found...

Enter MDSveX

MDSveX is MDX in svelte. It allows you to write code similar to MDX but in svelte. It integrates perfectly with SvelteKit, too!

The coolest thing is that MDSveX hooks into remark and rehype, which provides a whole ecosystem of plugins to choose from.

This makes for the perfect combo of the comfort of MDX, the efficiency of Svelte, and the ecosystem of remark.

Your usual MDSveX component looks like this:

---
title: "My blog post"
date: 2020-01-01
summary: This is my first blog post

---

<script>
    import PieChart from '$lib/Pie-Chart.svelte'
</script>

## {title}

Here's a cool Pie Chart:

<PieChart
    data={[
        { label: 'give you up', value: 10 },
        { label: 'let you down', value: 10 },
        { label: 'run around and desert you', value: 8 },
        { label: 'make you cry', value: 5 },
    ]}
/>

Pretty cool, eh? Notice how we can reference the {title} in the content. MDSveX automatically parses your frontmatter and makes it available in the content.

Layouts

If you put this markdown file at src/routes/blog/my-blog-post.svx, the content would be rendered at /blog/my-blog-post, just like the Svelte compiler renders pages. However, it only renders the content markdown by default. Usually, you would like to have some sort of metadata, navigation, and stuff on a blog page.

Enter layouts. Layouts are just regular Svelte components. They can be used to change the way a .svx file is shown. Here's what a sample MDSveX layout would look like:

<script>
    export let title;
    export let date;
</script>

<h1>{title}</h1>
<p>{date}</p>

<slot> <!-- content goes here -->
</slot>

You can even set up different layouts for different files! To learn all the details, check out the docs

Quickstart

You can install MDSveX by using the svelte-add package to easily set up MDSveX:

$ npx svelte-add mdsvex

This will create a mdsvex.config.js file in your project root, which you can use to configure your site.

The end

MDSveX helped me find a siiimple way to convert my Svelte app into a full-blown CMS-like website, all without the overhead of an actual CMS. For basic blog sites, it's perfect!

In my next post, I'll show you how to make a simple blog using MDSveX. Stay tuned!

Let's debug a node.js app using the built-in debugger!

Siddharth — Thu, 03 Mar 2022 16:42:03 +0000

It's about time we stop using console.log to debug things. While console.* are really powerful tools, it's a pain to maintain.

Most of us can use our IDEs to debug code. But did you know that Node.js comes with a built-in debugger? It's a simple terminal-based one, but extremely powerful, too. Let's check it out by debugging a sample app using the built-in debugger

The code

This is the simple program we are going to be debugging right now:

const numbers = process.argv;
const sum = (a, b) => a + b;
let out = numbers.reduce(sum);
console.log(out);

If you are a seasoned developer, you should have caught the bugs already. But forget it.

Here's some sample output from this program:

$ node index.js 1 2 3 4
/usr/local/Cellar/node/17.5.0/bin/node/Users/mac/Blog/Code/node-debug/index.js1234

Firing up the debugger.

Node.js has two ways to start the debugger.

The first way is to run node --inspect file.js. This starts a WebSocket connection to the debugger and clients can use this connection to debug the code.

The second way is to use the built-in inspector client, using node inspect file.js (note that it's a command now, not a --flag)

We can start the inspector for our app by running node inspect index.js

$ node inspect index.js
< Debugger listening on ws://127.0.0.1:9229/516c8247-4fe0-471d-9c71-a87aa191b256
< For help, see: https://nodejs.org/en/docs/inspector
<
< Debugger attached.
<
 ok
Break on start in index.js:1
> 1 const numbers = process.argv;
  2 const sum = (a, b) => a + b;
  3 let out = numbers.reduce(sum);
debug>

This gives us a debug prompt, where we can run commands to debug the code.

The basic ones are:

cont, c: Continue execution
next, n: Step next
step, s: Step in
out, o: Step out
repl: Enter a REPL in the current scope.

For now, let's press n<enter> to go to the next line.
The debugger will look like this now:

break in index.js:2
  1 const numbers = process.argv;
> 2 const sum = (a, b) => a + b;
  3 let out = numbers.reduce(sum);
  4 console.log(out);
debug>

We are at the second line now.

Now, we know that there is something wrong with the numbers array. We can take a look at its value by "watching" it. We can run the command watch('numbers') to do so. Then, we can use the watchers command to print all watched variables.

This is what it will look like now:

debug> watch('numbers')
debug> watchers
  0: numbers =
    [ '/usr/local/Cellar/node/17.5.0/bin/node',
      '/Users/mac/Blog/Code/node-debug/index.js' ]
debug>

We just spotted the bug! We forgot to get rid of the first 2 arguments in the process.argv 🤦. Silly me!

Let's fix the code. First, exit the debugger with Ctrl-d, then modify the first line:

const numbers = process.argv.slice(2);;
const sum = (a, b) => a + b;
let out = numbers.reduce(sum);
console.log(out);

...but it's still broken! node index.js 1 2 3 4 just prints 1234.

Let's try debugging again. Fire up the debugger again and head to the third line, where the addition goes on.

$ node inspect index.js 1 2 3 4 # notice how we can pass arguments
< Debugger listening on ws://127.0.0.1:9229/0db8e855-c117-4511-a022-ab5c908cff46
< For help, see: https://nodejs.org/en/docs/inspector
<
< Debugger attached.
<
 ok
Break on start in index.js:1
> 1 const numbers = process.argv.slice(2);
  2 const sum = (a, b) => a + b;
  3 let out = numbers.reduce(sum);
debug> n
break in index.js:2
  1 const numbers = process.argv.slice(2);
> 2 const sum = (a, b) => a + b;
  3 let out = numbers.reduce(sum);
  4 console.log(out);
debug> n
break in index.js:3
  1 const numbers = process.argv.slice(2);
  2 const sum = (a, b) => a + b;
> 3 let out = numbers.reduce(sum);
  4 console.log(out);
  5
debug>

Now, instead of going to the next line, we can step into the line so we know what exactly is going on.

Pressing s will move us back to the sum call. Now, we can watch a and b.

debug> step
break in index.js:2
  1 const numbers = process.argv.slice(2);
> 2 const sum = (a, b) => a + b;
  3 let out = numbers.reduce(sum);
  4 console.log(out);
debug> watch('a')
debug> watch('b')
debug> watchers
  0: a = '1'
  1: b = '2'
debug>

We just spotted the second bug! We are trying to add two strings of numbers, instead of strings. Let's fix that right away by converting all the strings to numbers:

const numbers = process.argv.slice(2).map(Number);
const sum = (a, b) => a + b;
let out = numbers.reduce(sum);
console.log(out);

Running this program node index.js 1 2 3 4 will now correctly output 10. Yay!

Wrap!

The Node.js built-in debugger can be a life-saver when you don't have a proper IDE at hand. You should take a moment to check out the official documentation for the debugger so you can understand the rest of the features. You could even build your own client!

What's your favorite debugging tool? 👀

Understand Functional Programming basics by (re)writing FizzBuzz

Siddharth — Wed, 02 Mar 2022 14:36:55 +0000

Functional programming is a way of thinking about programs by composing pure functions. It tries to avoid shared state, mutability, and side effects. This makes the code easier to reason about and easier to break apart and use for
other purposes.

Functional programming is declarative, ie. it describes what to do, not how to do it. This makes easier sense to us. (If you want to learn more about the difference between imperative and declarative programming, check out this article).

Function programming is also a bit hard to learn, as most literature related to functional programming can get a bit math-y (because FP was based on lambda calculus).

Let's take a look at Functional Programming by rewriting the classic FizzBuzz in a more functional way.

Wait a minute, pure functions?

Pure functions are functions which

Given the same input, give the same output
Have no side effects

/// PURE
const sum = (a, b) => a + b;
sum(1, 2); // 3
sum(1, 2); // still 3
sum(1, 2); // 3s not goin anywhere

/// IMPURE

// impure because the output changes with the same inputs
Math.random(); // 0.21201979699214646
Math.random(); // 0.9585542542409227
Math.random(); // 0.046208832851477144

let g = 1;

// also impure because it mutates state
const setG = x => g = x;

// a harder to spot example:
const doSth = () => {
    // we're calling an impure function, so this is also impure.
    setG(2);
    return g;
}

// exceptions are impure too
const square = x => {
    if (x < 0) {
        throw new Error('Negative numbers are not allowed');
    }
    return x * x;
}

// so is logging
console.log('I\'m impure');

So wait, you can't write a program with only pure functions?

Sometimes, we need to have side effects. Most programs can't avoid logging to the console, mutating state or throwing exceptions.

So, we can't write programs with only pure functions. The best we can do is create a clear boundary between the pure and the impure parts of our program, so we can know what to expect.

FizzBuzz?

If you know what FizzBuzz is, you can probably skip this section.

FizzBuzz is a classic programming interview question. All you have to do is write a program that prints numbers from 1 to 100, but replaces multiples of 3 with "Fizz", multiples of 5 with "Buzz", and multiples of both 3 and 5 with "FizzBuzz".

This is the "canonical" FizzBuzz answer:

for (let i = 1; i <= 100; i++) {
    if (i % 15 === 0) console.log('FizzBuzz');
    else if (i % 3 === 0) console.log('Fizz');
    else if (i % 5 === 0) console.log('Buzz');
    else console.log(i);
}

In this post, we are going to be rewriting this code in a functional way and exploring its benefits along the way.

Functional FizzBuzz

Abstracting a function

Let's start with the original FizzBuzz code. Can you see anything that could be refactored?

for (let i = 1; i <= 100; i++) {
    if (i % 15 === 0) console.log('FizzBuzz');
    else if (i % 3 === 0) console.log('Fizz');
    else if (i % 5 === 0) console.log('Buzz');
    else console.log(i);
}

The first thing which comes to mind is to refactor the divisibility check into a function. We can do that:

const divisible = (x, y) => x % y === 0

for (let i = 1; i <= 100; i++) {
    if (divisible(i, 15)) console.log('FizzBuzz');
    else if (divisible(i, 3)) console.log('Fizz');
    else if (divisible(i, 5)) console.log('Buzz');
    else console.log(i);
}

It's more readable now, but there is still room for improvement here. We can
curry the function:

const divisible = x => y => x % y === 0

for (let i = 1; i <= 100; i++) {
    const divisibleI = divisible(i); // look ma, a new function with minimal code!

    if (divisibleI(15)) console.log('FizzBuzz');
    else if (divisibleI(3)) console.log('Fizz');
    else if (divisibleI(5)) console.log('Buzz');
    else console.log(i);
}

Currying is a technique where a function returns a function. It's a way to pass arguments one at a time.

Here's an example:
const add = x => y => x + y;

add(1)(2) // 3
The benefit is that we can now make even more functions out of add.
const inc = add(1);

inc(2) // 3
Currying is a powerful technique that can make your code even more modular.

This makes it trivial to write a function that checks whether i is divisible by another number.

Cutting out imperative statements

In functional programming, it is discouraged to use imperative statements. Instead, we can replicate them with recursion or other methods.

FizzBuzz is a mapping of numbers to strings. This is exactly what functional programming is about: mapping a value to another value. We don't need a loop here, we just need to map an array of 1 to 100 to an array of "FizzBuzzes"(?).

We can do that by creating a utility function called range, similar to python's range function.

const divisible = x => y => x % y === 0
const range = (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i)

range(1, 100).map(i => {
    const divisibleI = divisible(i);

    if (divisibleI(15)) console.log('FizzBuzz');
    else if (divisibleI(3)) console.log('Fizz');
    else if (divisibleI(5)) console.log('Buzz');
    else console.log(i);
});

We can further carve some functions:

const divisible = x => y => x % y === 0
const range = (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i)
const map = f => xs => xs.map(f)

const fizzbuzz = i => {
    const divisibleI = divisible(i);

    if (divisibleI(15)) console.log('FizzBuzz');
    else if (divisibleI(3)) console.log('Fizz');
    else if (divisibleI(5)) console.log('Buzz');
    else console.log(i);
};

const mapFizzbuzz = map(fizzbuzz);

mapFizzbuzz(range(1, 100))

Once again, we used currying to make a reusable function. This made the definition for mapFizzbuzz extremely simple and clear.

Cutting out the if statements

Right now, the if statements used are quite similar: they are mostly in the form of "if i is divisible by n, the output must include str".

We can refactor these out into an object, and at the same time get rid of all the if statements too!

const divisible = x => y => x % y === 0
const range = (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i)

const reduce = f => init => xs => xs.reduce(f, init)
const map = f => xs => xs.map(f)

const CANONICAL_FIZZBUZZ = [
    {n: 3, str: 'Fizz'},
    {n: 5, str: 'Buzz'},
    // {n: 7, str: 'Duzz'} // try this out!
];

const fizzbuzz = keys => i => {
    const divisibleI = divisible(i);
    const reducer = reduce((acc, {n, str}) => acc + (divisibleI(n) ? str : ''))('');

    console.log(reducer(keys) || i);
};

const canonFizzbuzz = fizzbuzz(CANONICAL_FIZZBUZZ);
const mapFizzbuzz = map(canonFizzbuzz);

mapFizzbuzz(range(1, 100))

We can now infinitely extend our FizzBuzz by adding new items to CANONICAL_FIZZBUZZ. Nice!

Our FizzBuzz is almost complete. But we are missing one rule...

Splitting the pure and impure parts

Right now, we have the impure console.log sitting right in the middle of our pure fizzbuzz.

We can cut it out, by making fizzbuzz return the values, and moving the console.log outside.

This has two benefits:

The pure and the impure will be cleanly separated.
We can now reuse the fizzbuzz function in other parts of our code, without having to log the values.

We can do this by returning the values in the fizzbuzz function, and then using a few more functional utilities to log them:

const divisible = x => y => x % y === 0
const range = (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i)

const reduce = f => init => xs => xs.reduce(f, init)
const map = f => xs => xs.map(f)
const forEach = f => xs => xs.forEach(f)

const CANONICAL_FIZZBUZZ = [
    {n: 3, str: 'Fizz'},
    {n: 5, str: 'Buzz'},
];

const fizzbuzz = keys => i => {
    const divisibleI = divisible(i);
    const reducer = reduce((acc, {n, str}) => acc + (divisibleI(n) ? str : ''))('');

    return reducer(keys) || i;
};

const canonFizzbuzz = fizzbuzz(CANONICAL_FIZZBUZZ);
const mapFizzbuzz = map(canonFizzbuzz);

// IMPURE CODE STARTS HERE
const print = x => console.log(x)
const printEach = forEach(print);
printEach(mapFizzbuzz(range(1, 100)))

Whew.

We're done!

That's it! I'm hoping you've got a feel for functional programming. Are you going to use functional programming in your next project? Or will you stick with OOP (or some other dialect)? Let me know!

5 Secret features of JSON in JavaScript you didn't know about 🤯

Siddharth — Tue, 01 Mar 2022 10:24:19 +0000

I'm pretty sure you have used the global JSON object for a variety of things, like in fetch requests and to avoid the dreaded [object Object]. I also bet you didn't know about the rest of the largely unknown features that JSON can provide!

JSON can do cool stuff like revive data, use a custom format to encode/decode data, hide certain properties in stringified data, and format your JSON! 🤯

Sound interesting? Let's dive into it!

1. Formatting

The default stringifier also minifies the JSON, which looks ugly

const user = {
  name: 'John',
  age: 30,
  isAdmin: true,
  friends: ['Bob', 'Jane'],
  address: {
    city: 'New York',
    country: 'USA'
  }
};

console.log(JSON.stringify(user));
//=> {"name":"John","age":30,"isAdmin":true,"friends":["Bob","Jane"],"address":{"city":"New York","country":"USA"}}

JSON.stringify has a built in formatter too!

console.log(JSON.stringify(user, null, 2));
// {
//   "name": "John",
//   "age": 30,
//   "isAdmin": true,
//   "friends": [
//     "Bob",
//     "Jane"
//   ],
//   "address": {
//     "city": "New York",
//     "country": "USA"
//   }
// }

(If you are wondering what that null is, we'll come to it later)

In this example, the JSON was formatted with 2 spaces of indentation.

We can also specify a custom character to use for indentation.

console.log(JSON.stringify(user, null, 'lol'));
// {
// lol"name": "John",
// lol"age": 30,
// lol"isAdmin": true,
// lol"friends": [
// lollol"Bob",
// lollol"Jane"
// lol],
// lol"address": {
// lollol"city": "New York",
// lollol"country": "USA"
// lol}
// }

2. Hiding certain properties in stringified data

JSON.stringify had a second argument which is largely unknown. It's called the replacer and it's a function or array that decides which data to keep in the output and which not to.

Here's a simple example where we can hide the password of a user.

const user = {
  name: 'John',
  password: '12345',
  age: 30
};

console.log(JSON.stringify(user, (key, value) => {
    if (key === 'password') {
            return;
    }

    return value;
}));

And this is the output:

{"name":"John","age":30}

We can further refactor this:

function stripKeys(...keys) {
    return (key, value) => {
        if (keys.includes(key)) {
            return;
        }

        return value;
    };
}

const user = {
  name: 'John',
  password: '12345',
  age: 30,
  gender: 'male'
};

console.log(JSON.stringify(user, stripKeys('password', 'gender')))

Which outputs:

{"name":"John","age":30}

You can also pass an array to get certain keys only:

const user = {
    name: 'John',
    password: '12345',
    age: 30
}

console.log(JSON.stringify(user, ['name', 'age']))

Which output the same thing.

The cool thing is this works on arrays too. If you had a huge array of cakes:

const cakes = [
    {
        name: 'Chocolate Cake',
        recipe: [
            'Mix flour, sugar, cocoa powder, baking powder, eggs, vanilla, and butter',
            'Mix in milk',
            'Bake at 350 degrees for 1 hour',
            // ...
        ],
        ingredients: ['flour', 'sugar', 'cocoa powder', 'baking powder', 'eggs', 'vanilla', 'butter']
    },
    // tons of these
];

We can easily do the same thing, and the replacer will be applied to each cake:

const cakes = [
    {
        name: 'Chocolate Cake',
        recipe: [
            'Mix flour, sugar, cocoa powder, baking powder, eggs, vanilla, and butter',
            'Mix in milk',
            'Bake at 350 degrees for 1 hour',
            // ...
        ],
        ingredients: ['flour', 'sugar', 'cocoa powder', 'baking powder', 'eggs', 'vanilla', 'butter']
    },
    // tons of these
];

console.log(JSON.stringify(cakes, ['name']))

We get this:

[{"name":"Chocolate Cake"},{"name":"Vanilla Cake"},...]

Cool stuff!

3. Using toJSON to create custom output formats

If an object implements the toJSON function, JSON.stringify will use it to stringify the data.

Consider this:

class Fraction {
  constructor(n, d) {
    this.numerator = n;
    this.denominator = d;
  }
}

console.log(JSON.stringify(new Fraction(1, 2)))

This would output {"numerator":1,"denominator":2}. But what if we wanted to replace this with a string 1/2?

Enter toJSON

class Fraction {
  constructor(n, d) {
    this.numerator = n;
    this.denominator = d;
  }

  toJSON() {
      return `${this.numerator}/${this.denominator}`
  }
}

console.log(JSON.stringify(new Fraction(1, 2)))

JSON.stringify respects the toJSON property and output "1/2".

4. Reviving data

Our fraction example above works nicely. But what if we want to revive the data? Wouldn't it be cool if the fraction would be magically brought back when we parse the JSON again? We can!

Enter revivers!

class Fraction {
  constructor(n, d) {
    this.numerator = n;
    this.denominator = d;
  }

  toJSON() {
      return `${this.numerator}/${this.denominator}`
  }

  static fromJSON(key, value) {
    if (typeof value === 'string') {
        const parts = value.split('/').map(Number);
        if (parts.length === 2) return new Fraction(parts);
    }

    return value;
  }
}

const fraction = new Fraction(1, 2);
const stringified = JSON.stringify(fraction);
console.log(stringified);
// "1/2"
const revived = JSON.parse(stringified, Fraction.fromJSON);
console.log(revived);
// Fraction { numerator: 1, denominator: 2 }

We can pass a second argument to JSON.parse to specify a reviver function. The job of the reviver is to "revive" stringified data back into it's original form. Here, we are passing a reviver, which is the static proprty fromJSON of the Fraction class.

In this case the reviver checks if the value is a valid fraction and if it is, it creates a new Fraction object and returns it.

Fun fact: this feature is used in the built-in Date object. Try looking up Date.prototype.toJSON
That's why this works:

console.log(JSON.stringify(new Date()))
//=> '"2022-03-01T06:28:41.308Z"'

To revive the date, we can use JSON.parse:

function reviveDate(key, value) {
    const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,}|)Z$/;

    if (typeof value === "string" && regex.test(value)) {
        return new Date(value);
    }

    return value;
}
console.log(JSON.parse('"2022-03-01T06:28:41.308Z"', reviveDate))
//=> Tue Mar 01 2022 06:28:41 GMT-0700 (Pacific Daylight Time)

5. Using revivers to hide data

Like resolvers, revivers can also be used to hide data. It works in the same way.

Here's an example:

const user = JSON.stringify({
  name: 'John',
  password: '12345',
  age: 30
});

console.log(JSON.parse(user, (key, value) => {
    if (key === 'password') {
            return;
    }

    return value;
}));

And this is the output:

{ name: 'John', age: 30 }

As an exercise, check if you can rewrite the previously shown resolvers as revivers.

That's a wrap!

Let me know if you know any other cool JSON tricks 👀

Thanks for reading!

Cracking Wordles using code

Siddharth — Mon, 21 Feb 2022 05:42:25 +0000

If you haven't been living under a rock, you probably have been playingWordle. Like a lot of people I kinda started playing it daily, and like a lot of developers I started looking for ways to algorithmically crack it. Eventually I ended up writing aWordle Solverwhich can reliably crack wordles in 4 moves or less.

I just thought I'd walk you through how I created this tool and how it works.

Finding words which match

The first thing I set out to work on was to find an algorithm which, given a word list and a guess, would filter out the words which can be possible answers to that wordle.

So I wrote this huge function to compare a guess to see if it matches:

function compareGuess(guess, color, answer) {
    const matched = [];
    const len = guess.length;

    for (let i = 0; i < len; i++) {
        if (answer[i] === guess[i]) {
            if (color[i] !== 'g') return false;

            matched.push(i);
        } else {
            if (color[i] === 'g') return false;

            if (color[i] === 'y') {
                const indexes = getAllIndexes(answer, guess[i])
                const filtered = indexes.filter(index => !matched.includes(index))

                if (filtered.length === 0) return false;

                const first = filtered[0];
                matched.push(first);
            }

            if (color[i] === 'k' /* printers */ || color[i] === 'b') {
                const allOccurances = getAllIndexes(answer, guess[i]);
                const filtered = allOccurances.filter(index => !matched.includes(index));

                if (filtered.length > 0 && !(guess[filtered[0]] === answer[filtered[0]])) return false;
            }
        }
    }

    return true;
}

I didn't expect it to be so big!

Next I just ran it through a list of all 13 thousand allowed words on wordle and then picked out the best words.

I didn't use the smaller 2k set of possible answers because I felt that the other words could provide more information (I'm not really sure of this but ¯\_(ツ)_/¯) and also because I didn't know where to find that list 🤣

This works, but there's a problem. It gives us words in alphabetic order and sometimes you can get words like aahed which don't really sound like real words and which are unlikely to be the answer.

So, I applied a sorter which sorted words with higher probability first.

You can try it out yourself by cloning the repo and running node index.js

The future

This solver is not done yet! I've got a few more ideas to implement.

I tried making an algorithm which sorts the words which cut down our list of words the most, but it ended up crashing my computer 🤣. I will try rewriting it in a more efficient language like rust, go or c and give it a try.

Do you have any ideas on how to make this more efficient? Feel free to comment!

Explained: Imperative vs Declarative programming

Siddharth — Sun, 30 Jan 2022 10:00:56 +0000

You most probably have heard of declarative vs imperative programming.

You might also have looked it up, and got something like this

In computer science, declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow.

If you're like me, that makes no sense. So let's get to metaphors!

Suppose you want a coffee.

The imperative way:

I'll grab a cup from the bottom left drawer, grab some milk from the fridge, heat some milk, pour the milk into the cup, grab some coffee powder from the top shelf and pour it into the coffee, and then pick a spoon from the table and mix the coffee.

The declarative way:

Mom, I want a coffee!

Now, you want to book a cab to the office. You could either tell the driver all the exact turns and roads to take to reach the office, or you could just give them the address.

See? The imperative way is about laying out the exact steps of how to do something, while the declarative way is about just saying what we want to do.

Note: declarative programs are just an abstraction over imperative. In the end, someone needs to do the imperative work. Mom needs to make a coffee the imperative way. The cab driver needs to know the way to your office.

Alright, let's make the jump from the metaphorical world to our code and try declarative code ourselves. Here's a quick test: write a function that sums all the even numbers in an array

Time's up! I've seen many people write the answer like this:

function evenSum(numbers) {
    let result = 0;

    for (let i = 0; i < numbers.length; i++) {
        let number = numbers[i]
        if (number % 2 === 0) {
            result += number;
        }
    }

    return result;
}

This is imperative; this is laying out every single step.

Here's a more declarative solution:

const evenSum = numbers => numbers
    .filter(i => i % 2 === 0)
    .reduce((a, b) => a + b)

Here we are asking JavaScript to do what we want: filter out even numbers, then add them. We could make our function even more declarative by using a few more functions.

const isEven = n => n % 2 === 0;
const sum = (a, b) => a + b;
const evenSum = numbers => numbers.filter(isEven).reduce(sum);

Note: You must have noticed by now that functional programming is a subset of declarative programming!

You must have started seeing the benefits already. If not, here's a list:

Declarative programs are way more readable. I only see "filter by even and reduce by sum", not some kind of loop which I need to manually step through to make sense of.
Declarative programs are reusable. In the final code we have 3 seperate functions which we can reuse throught the codebase. Since imperative code heavily depends on state it may be hard for it to be reusable.
Declarative programs are concise.

🚀 A powerful drag and drop implementation in just 16 lines of JavaScript

Siddharth — Thu, 25 Nov 2021 06:44:02 +0000

Drag and drop is a very useful tool in applications as it can simplify a large part of the process for users. It's also a common task we delegate to other libraries which may bloat your app when you just need a very simple implementation when you can use the Drag and Drop Web API. Today, I'll show you how you can do just that!

What we are making

This is the basic implementation we are aiming to build:

That was made in just 16 lines of JavaScript!

And with a few more lines we can add a lot more bonus features! Here's a demo with some more features!

Play around with it, you will see that we can

Drop elements only in certain places
Style the element in which we are dropping
Style the original copy of the dragged element
(With a little trickery) even style the dragged element!

All this with just 30 lines of code!

It works on almost all desktop browsers with partial support all the way back to IE 6(!) which should be enough for this to work, but it doesn't work on some mobile browsers.

You can see the up-to-date CanIUse data here:

Dealing with libraries for this very basic functionality has been a pain for me, and to save you the trouble I thought I'd document the process here!

HTML structure

Places to drag into

You need some drop targets to be able to drag something into them right? We can add these using regular divs:

<div class='drop'></div>
<div class='drop'></div>
<div class='drop'></div>
<div class='drop'></div>

Note: I'll be referring to the places we can drop into as drop targets in this post

You can add as many of them wherever you like, as long as an element has the drop class we will be able to drop into them.

We can also add some basic styles for them to look nice.

* {
    box-sizing: border-box;
    font-family: sans-serif;
}

.drop {
    width: 220px;
    height: 45px;
    background: #2563EB;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 3px;
}

The element to drag

For an element to be draggable, we need, well, an element! We can place the element in one of the drop targets we made before. This is how it should look like

<div class='drop'>
    <div id='drag' draggable='true' ondragstart='event.dataTransfer.setData('text/plain', null)'>
        Drag me!
    </div>
</div>
<div class='drop'></div>
<div class='drop'></div>
<div class='drop'></div>

Notice how we also set the draggable attribute to true. Every draggable element needs to have the draggable attribute set for it to be draggable.

Also, not every element can be dragged even if the draggable attribute is set. We need to explicitly say that the element is draggable by listening to the dragstart event in the HTML. There we are setting null as we don't have any data to share and we are setting the data type text/plain.

We can (again) also add some basic styles for them to look nice.

#drag {
    width: 200px;
    height: 25px;
    border-radius: 3px;
    background: black;
    color: white;
    display: grid;
    align-items: center;
    justify-content: center;
}

Note that as long as an element has the draggable attribute set to true and the drop targets have the drop class, the below code should work everywhere

The minimal implementation

For our drag and drop to be functional, we just need 3 different event listeners. Everything else is a bonus.

First, we need to store the element we are dragging. We can do this by listening to the dragstart event.

let dragged;

document.addEventListener('dragstart', event => {
    dragged = event.target;
}, false)

Whenever an element is dragged, this will store the dragged element in a variable.

Next, we can listen to drop events so we can drop elements.

document.addEventListener('drop', event => {
    // Prevent default behaviour (sometimes opening a link)
    event.preventDefault();

    if (event.target.className === 'drop') {
        dragged.parentNode.removeChild(dragged);
        event.target.appendChild(dragged);
    }
}, false)

Whenever we drop an element, if the element is a drop target (has the drop class) we will append the dragged element to the drop target.

We're almost done, but we need to do one more thing to make this work.

By default, dragging elements does nothing, so to prevent the default behavior we need to call event.preventDefault whenever we drag over the drop target.

This is easy to achieve with a oneliner:

document.addEventListener('dragover', event => event.preventDefault(), false);

That's it! In 16 lines we have functional drag and drop!

Here's a video of it in action:

Adding more features

Even if this drag and drop works, it's not very nice. It doesn't seem very "natural". Luckily, in a few lines of code, we can make this drag and drop even better!

Styling the original dragged element

Whenever we drag an element, the original copy of the element doesn't change its style. It would look better if we could add a different style to these dragged elements, like making them transparent to show that it is being dragged.

This is very easy to do. Just add the styles in the dragstart event listener.

document.addEventListener('dragstart', event => {
    // ...

    event.target.style.opacity = 0.5;
    // add more styles as you like...

    // ...
});

But we also need to reset the style once we finish dragging. We can do that by listening to dragend:

document.addeventListener('dragend', event => event.target.style.opacity = '', false)

Styling the drop targets

We can also style the drop target by listening to the dragenter event:

document.addEventListener('dragenter', event => {
    if (event.target.className === 'drop') event.target.style.background = '#2c41cc';
}, false)

Once again, we need to reset the styles once we leave the element. We can do that by listening to dragleave:

document.addEventListener('dragleave', event => {
    if (event.target.className === 'drop') event.target.style.background = '';
}, false)

We also need to reset the styles once we drop the event. We can edit the drop event to achieve this.

document.addEventListener('drop', event => {
    // ...

    if (event.target.className === 'drop') {
        event.target.style.background = '';
    //...
})

Styling the dragged copy

With a bit of trickery, we can style the dragged copy too! Maybe we can rotate the element a bit to make it a bit more natural.

We can do this by styling the original copy and immediately undoing those styles in the dragstart event so that the users don't see it.

listen('dragstart', event => {
    // ...

    event.target.style.transform = 'rotate(-2deg)';
    setTimeout(() => event.target.style.transform = '', 1);
})

Now the dragged copy will appear to be rotated when we are dragging it!

You now have a fully functioning drag and drop implementation!

Here's a video of it in action:

Here's a Gist with all the source code for reference

Conclusion

We took a task for which we very commonly delegate to libraries and implemented it ourselves, with surprisingly little code.

I hope this opens your eyes to how much you can do with just vanilla JS. You don't need libraries every time.

Have you ever tried implementing drag and drop on your own? Share in the comments!

A PURE HTML/CSS functional calendar?! 😲🤯 (+CSS APIs and all the fun things we can do with them)

Siddharth — Thu, 04 Nov 2021 14:31:11 +0000

Yesterday I went back to my frontend experiments after a load of JavaScript work. I experimented with the CSS custom property toggle trick (more on that later) which can allow me to have if/else logic in CSS, and with a bit of experimenting I made this CSS only calendar!

(It's embedded in a CodePen, if you wanna see the real thing go over to https://experiments.siddu.tech/css-api/)

It shows the current month, year, day and date completely in CSS! And it also updates (check it tomorrow and see!). It can even handle leap years! 🤯

Before I tell you what's really happening, go over to the site and inspect to see what you can find. Once you are done with your experimenting, scroll.

Spoilers in:

Alright, here's how it works: I'm including an external stylesheet with the data. The data is generated by a GitHub action which runs a Deno script which creates a CSS file with the data in custom properties (see below).

(Yeah I know I kinda lied, but not really because the site is still 0 JS 😋)

This opens up a whole new door of CSS APIs which can be used to do stuff like change color themes based on the season (spooky theme in October, grass theme in March, you get the idea), or maybe even expose content with content: var(--content)!

That explanation too quick for you? Here's some more detail on how I did it.

Now that we have the data in CSS custom properties, we need to somehow change the data into content in the HTML. To understand how I did it, it will be nice to take a look at the CSS which was generated.

:root {
    --year: '2021';
    --november: ;
    --monday: ;
    --day-1: ;

}

This is the CSS which was generated for the day I'm writing (Nov 1 2021, Monday)

With this CSS we can easily embed the year with :after, but the other properties look strange. Those properties are totally valid according to spec (the properties contain a value which is " ") and we can use them to make if else logic.

Here's a simpler CodePen showing how the thing works:

(Open the pen in a new tab and resize to see the full effect)

Let me explain:

There is a breakpoint setup here at 350px. This is where the variable --color changes from initial to an empty space.
When the browser window is wider than 350px, the value of --color is initial
- That makes the variable --color-when-small contain the value initial red which is invalid.
- So when we actually set the color and call that variable like background-color: var(--color-when-small, var(--color-when-big));, the second value (the fallback) is used because the first is invalid.
When the browser window is narrower than 350px, the value of --color is a space.
- That makes the variable --color-when-small contain the value (space)red, which is valid
- So when we actually set the color and call that variable like background-color: var(--color-when-small, var(--color-when-big));, the first value is used

So, now we can flip the color between two values by changing a placeholder variable. I hope that clicks for you.

I used the same trick in this calendar too. I first added a bunch of spans with all my months:

<span class='january'>January</span>
<span class='february'>February</span>
<span class='march'>March</span>
<span class='april'>April</span>
<!-- ... --->

Then in the CSS I set the display value in the same way as above:

.january {
  --display-when-correct: var(--january) block;

  display: var(--display-when-correct, none);
}

.february {
  --display-when-correct: var(--february) block;

  display: var(--display-when-correct, none);
}
/* ... */

So when --january is set to " ", --display-when-correct becomes (space)block, which is valid. And since --february, --march all don't exist, they become invalid (and so they are display: none.

If this trick seems confusing (or helpful) then I'll write another detailed post on it!

I did a similar thing for highlighting days and dates, here's how:

.monday {
    --bg: var(--monday) #1abc9c;
    --fg: var(--monday) white;
    --space: var(--monday) 5px;

    background: var(--bg, initial);
    border-radius: var(--space, initial);
    padding: var(--space, initial);
    color: var(--fg, initial) !important;
}

It's the same old trick, just a few extra things to add.

And also there is a fix for leap years and some other minimal stuff which you can learn by reading the source

CSS APIs

We can apply the same trick I used to generate this data to make more stuff like a fun fact generator, or for having different color themes like a seasonal color palette which changes (I think GitHub uses this trick for their Halloween theme, if not they should 😉)

Also, if you are up for a challenge, try implementing what I just used to make a site with a different color palette every season and share it over here! It's going to be much easier than building a calendar, trust me!

If you think this can be helpful in the real world, spread the word so that more people can use it in real world situations.

If you love my content, follow me on twitter or over here to stay updated on my blog posts!