DEV Community: Mainasara Al-amin Tsowa

Gecko: Making a programming language is hard 😮‍💨

Mainasara Al-amin Tsowa — Wed, 26 Jun 2024 22:07:19 +0000

Seemingly every programmer has a dream, making a programming language. It's not a bad idea, really, making a programming language fuelled by your ideas of what makes the 'perfect language' is exciting but... the process is not for the faint at heart.

The Idea

I first thought of making a programming language back in 2018 and made something that's compiled to a custom bytecode format

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

I was very happy and continued to work on it but after a few experiments, I found the bytecode approach a bit much because not only did I have to compile the initial code to the byte code, I also had to write an interpreter for the new bytecode. So I took a break to think more on the project

About 18 months later I came back to it with a new approach, "A better C" (control yourself)

That was the obvious way, surely a programming language that worked like C but had friendly syntax and protections for typing and memory made sense, it made so much sense that it did not occur to me that many other people have had the exact same idea... but we move.

The idea was to have Go-like modules but typescript like type definitions and strong C-interop

package main

cimport "stdio.h"

declare func printf (format: string, value: unknown): void

const PI: float = 3.14159

external func main (argc: int, argv: [char]) {
    let PI: float = 3
    const value: float = PI * 2
    const vertices: [4][4][3]int = [
        [
            [10,10,10],
            [20,20,20],
            [30,30,30],
            [40,40,40]
        ],
        [
            [10,10,10],
            [20,20,20],
            [30,30,30],
            [40,40,40]
        ],
        [
            [10,10,10],
            [20,20,20],
            [30,30,30],
            [40,40,40]
        ],
        [
            [10,10,10],
            [20,20,20],
            [30,30,30],
            [40,40,40]
        ]
    ]
    printf("%s\n", value)
}

It's nice to have an idea, but what about the implementation? How does this get compiled to something "that worked like C"?

Simple... Just use LLVM

LLVM Dragon, please let me pass...

If it wasn't obvious with the way I mentioned it, let me do so now, explicitly. LLVM is hard to use, very hard.

To use LLVM, one needs to understand low level concepts like the stack, registers, code sections and more. Luckily I had a bit of experience with ASM and was able to pick up a few concepts but it became obvious that LLVM is a completely different beast (huh, that Dragon makes a bit more sense now)

I began with trying to transpile gecko code into LLIR which makes it relatively easy to compile it into machine code using the LLVM llc program. LLIR though, has a deceptive simplicity. The following LLIR produces a valid program.

; Declare the string constant as a global constant.
@.str = private unnamed_addr constant [13 x i8] c"hello world\0A\00"

; External declaration of the puts function
declare i32 @puts(ptr nocapture) nounwind

; Definition of main function
define i32 @main() {
  ; Call puts function to write out the string to stdout.
  call i32 @puts(ptr @.str)
  ret i32 0
}

When the program is compiled (and linked with LibC), the program runs and prints "hello world"

So I try to compile the code into some LLIR, here's the gecko code and the generated IR

package main

declare external variardic func printf(format: string)

let GLOBAL_INT: int = 30

func main (): int {
  let hello: string = &"Another number %d\n"

  printf(&"A number %d\n", 90)

  printf(&"A string %s\n", &"HH")

  printf(hello, GLOBAL_INT)

  return GLOBAL_INT
}

@.str.62155066001881480236677007312335 = private global [19 x i8] c"Another number %d\0A\00"
@.str.07706532071200013720435667563218 = private global [13 x i8] c"A number %d\0A\00"
@.str.57386676364818780036674824687336 = private global [13 x i8] c"A string %s\0A\00"
@.str.05610270252163716520553770318821 = private global [3 x i8] c"HH\00"

declare ccc void @printf(i8* %format, ...)

define ccc i64 @main() {
main$main:
    %0 = getelementptr [19 x i8], [19 x i8]* @.str.62155066001881480236677007312335, i8 0
    %1 = getelementptr [13 x i8], [13 x i8]* @.str.07706532071200013720435667563218, i8 0
    call void @printf([13 x i8]* %1, i64 90)
    %2 = getelementptr [13 x i8], [13 x i8]* @.str.57386676364818780036674824687336, i8 0
    %3 = getelementptr [3 x i8], [3 x i8]* @.str.05610270252163716520553770318821, i8 0
    call void @printf([13 x i8]* %2, [3 x i8]* %3)
    call void @printf([19 x i8]* %0, i64 30)
    ret i64 30
}

And yes, it runs!!!

With that done, the rest should be easy right?

Skill Issues

This is where my knowledge tapped out, I can figure out how strings are represented in memory but I already had enough issues figuring out variardic functions exist. So it became very evident very quickly that I am not suited to figure much more out.

Something like... branches.

As of writing this, I still have not figured out how branches are to work as I made a few wrong assumptions about them and the github branch (how poetic) still has ongoing rework.

But what's worse than branches? Arrays!

As I mentioned earlier, LLIR is deceptively simple.

Given the following C code...

#include <stdio.h>

char* get_hello() {
  char* r = "Hello";
  return r;
}

int main(int argc, char** argv) {
  char* names[3] = {"One", "Two", get_hello()};
  printf("name: %s, arr[0]: %s\n", argv[3], names[1]);
}

The following LLIR gets generated

@.str = private unnamed_addr constant [6 x i8] c"Hello\00", align 1
@.str.1 = private unnamed_addr constant [4 x i8] c"One\00", align 1
@.str.2 = private unnamed_addr constant [4 x i8] c"Two\00", align 1
@.str.3 = private unnamed_addr constant [22 x i8] c"name: %s, arr[0]: %s\0A\00", align 1

; Function Attrs: noinline nounwind optnone ssp uwtable(sync)
define ptr @get_some() #0 {
  %1 = alloca ptr, align 8
  store ptr @.str, ptr %1, align 8
  %2 = load ptr, ptr %1, align 8
  ret ptr %2
}

; Function Attrs: noinline nounwind optnone ssp uwtable(sync)
define i32 @main(i32 noundef %0, ptr noundef %1) #0 {
  %3 = alloca i32, align 4
  %4 = alloca ptr, align 8
  %5 = alloca [3 x ptr], align 8
  store i32 %0, ptr %3, align 4
  store ptr %1, ptr %4, align 8
  %6 = getelementptr inbounds [3 x ptr], ptr %5, i64 0, i64 0
  store ptr @.str.1, ptr %6, align 8
  %7 = getelementptr inbounds ptr, ptr %6, i64 1
  store ptr @.str.2, ptr %7, align 8
  %8 = getelementptr inbounds ptr, ptr %7, i64 1
  %9 = call ptr @get_some()
  store ptr %9, ptr %8, align 8
  %10 = load ptr, ptr %4, align 8
  %11 = getelementptr inbounds ptr, ptr %10, i64 3
  %12 = load ptr, ptr %11, align 8
  %13 = getelementptr inbounds [3 x ptr], ptr %5, i64 0, i64 1
  %14 = load ptr, ptr %13, align 8
  %15 = call i32 (ptr, ...) @printf(ptr noundef @.str.3, ptr noundef %12, ptr noundef %14)
  ret i32 0
}

declare i32 @printf(ptr noundef, ...) #1

I tried a lot of ways to generate similar LLIR but there were a lot of errors getting any of it to run/compile properly. This, also as of writing, is currently unresolved.

So, if my attempt to use LLVM is bringing more issues than progress, what can I do at this point?

The C Backend

Up until this point, gecko has only transpiled to LLIR but since that is becoming a problem, I decided to transpile to C instead. Something I understand and can implement multiple features for, struct-based classes, loops, branches, lists and more.

But the AST and compiler were so heavily expectant on the backend being LLVM that I needed to do a whole rewrite of the interface between the AST, Compiler and whatever does the transpiling.

About a thousand loc later, I managed to move the LLVM implementation into a backend interface but that was just part one. I needed to implement the C backend, and a few hundred more lines of code later, I had a C backend that could use clang/gcc to compile the code into machine code.

With this, I tested classes and C interop.

Given the following gecko code

package std.types

declare external variardic func printf(format: string!): int

class String {
  private let _str: string = &""

  public func init(str: string): String* {
    let self: String
    self._str = str
    printf("Init string '%s'\n", str)

    return &self
  }

  public func size(self: String*): int {
    return sizeof(*self)
  }

  func printSelf(self: String*): void // An idea I was experimenting with (methods with no bodies are virtual and need implementing)
}

Compiling the code into an object file, it generates the following header file (Gecko code compiled as libraries generate an object file and a corresponding .h file. gecko/gecko.h being the little gecko std lib I made)

//Gecko standard library
#include <gecko/gecko.h>
int printf(const string format,...);
typedef struct {
string _str;
} std__types__String;
std__types__String* std__types__String__init(string str);
int std__types__String__size(std__types__String* self);
void std__types__String__printSelf(std__types__String* self);

And by compiling the following C code along with the output object file...

#include "./class.gecko.h"
#include <stdio.h>

void std__types__String__printSelf(std__types__String* str) {
  printf("My string '%s'\n", str->_str);
}

int main() {
  std__types__String* str = std__types__String__init("Hello world");
  str->_str = "Second Hello World";
  int sizeOfString = std__types__String__size(str);

  std__types__String__printSelf(str);
  printf("Size of Gecko String %d\n", sizeOfString);
}

It runs!!!

Conclusion

That's where I am. Making a programming language has been an educational but seriously difficult process and all that I've discussed is only in regards to what I have experienced in the language implementation details.

But the bugs... the bugs.. Oh God.

Golang Nil Errors

Golang has an annoying habit of giving you a gift box with nothing inside and then complaining that the box has nothing inside when you give it back. This inspired me to create a package to have rust-like errors in Golang.

I need to refactor a lot of the code to use this package (plus I called it go-option not go-result).

EDIT: Finally renamed it to go-result

Refactoring & Rewrites

I've rewritten this language three times

Once because I forgot to factor in loops into the AST and compilation until the codebase was spaghetti and needed fixing
Once I rewrote it into C++ because I thought Go was the problem
And finally rewrote the code in Go again because I figured out I was the problem

And refactored more than I remember

Refactored code lexing once
Refactored transpiling and compiling the code
Used a custom CLI parsing library I made
Refactored the CLI parsing into a new library
Refactored the C++ lexer to use a state machine

Final Thoughts

Making a programming language is exciting but if you are not in it for the long haul, you can get very demotivated and the passion can drain.

So please, before you start. Learn a bit of how to make a programming language and read what I think people believe is the unofficial manual on making programming languages.

Oh, and celebrate your little wins! :)

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

psst, hey. if you are interested, I have a new blog where I sometimes post things that don't get on here. Consider subscribing to it's RSS ;)

When does proprietary code become too proprietary?

Mainasara Al-amin Tsowa — Thu, 09 Jan 2020 23:14:53 +0000

Proprietary code is very useful in cases where security and optimization are the most important factors of a given software but having too much proprietary code in a codebase can significantly hurt maintainability. So, once again, when does proprietary code become too proprietary and where does someone draw the line?

What Is Concurrency In Node JS?

Mainasara Al-amin Tsowa — Sun, 28 Apr 2019 17:33:04 +0000

Javascript is a single-threaded language, this in certain situations can be very limiting because the process is stuck executing on one thread and can't fully utilize the CPU it is running on but thanks to concurrency, it's single-threaded nature is less of a problem.

But wait, what is concurrency !?

I am glad you asked (Even if you didn't ask just pretend you did and we will move on 😉)

Basics

Concurrency means two or more processes running together in one thread but not at the same time, a lot of us have come across concurrency in Node JS but might not have noticed it (Prime example = me 😅).

Example:

You can run this code!!


    const fs = require('fs');

fs.writeFile('./file.txt', 'Hello World!!', function(){
    console.log('Wrote "Hello World!!" into file.txt');
});

console.log('Writing "Hello World!!" into file.txt');

The code in the example above must be familiar to most of us, but did you know this is a prime example of concurrency?. We all agree that line 7 is executed before line 5 right, Well that is concurrency!, multiple separate processes running in the same thread by taking turns to execute code.

These are the steps taken during execution.

fs.writeFile calls an underlying function which acts as a proxy between JS and C++
The function calls C++ code which creates a process on the event loop that will handle the write operation
console.log('Writing "Hello World!!" into file.txt')
The process writes content to file.txt
The process returns and our callback is executed
console.log('Wrote "Hello World!!" into file.txt')

This is great and all but there is one side effect to writing code with concurrent behavior and it is affectionately called the "Callback Hell"

Example:

Writing a file and then reading from it.


    const fs = require('fs');

fs.writeFile('./file.txt', 'Hello World!!', function(){
    console.log('Wrote "Hello World!!" into file.txt');
    fs.readFile('./file.txt', function(err, data){
        if(err){
            throw new Error(err);
        }
        console.log('Read "', data.toString(), '" from ./file.txt')
    })

});

console.log('Writing "Hello World!!" into file.txt');

This gets exponentially worse the more you need to use data provided by such a function but the entire ordeal can be avoided when you use Promises.

Promises

Promises are javascript structures that "Promise" the resolution/failure of asynchronous code and help us handle their successes/failures in a syntactically synchronous manner.

Example:


    const fs = require('fs');

const readPromise = function(){
    return new Promise(function(resolve, reject){
        fs.readFile('./file.txt', function(err, data){
            if(err){
                reject(err);
            }
            resolve(data);
        })
    });
}

const writePromise = function(){
    return new Promise(function(resolve, reject){
        fs.writeFile('./file.txt', 'Hello world!!', function(err){
            if(err){
                reject(err);
            }
            resolve();
        })
    });
}

writePromise()
.then(() => {
    return readPromise()
})
.then(data => 
 console.log(data.toString()))
.catch(err => console.log(err));

The above code does not look that much better but with promises also come along the async/await keywords which will be extra helpful in cleaning up our code.

The await keyword helps us retrieve data resolved by a promise as if it were directly returned from a synchronous function, but await only works from within an asynchronous function and this is where the async keyword comes in, it helps us define asynchronous functions where we can use await.

Example:


    const fs = require('fs');

const readPromise = function(){
    return new Promise(function(resolve, reject){
        fs.readFile('./file.txt', function(err, data){
            if(err){
                reject(err);
            }
            resolve(data);
        })
    });
}

const writePromise = function(){
    return new Promise(function(resolve, reject){
        fs.writeFile('./file.txt', 'Hello world!!', function(err){
            if(err){
                reject(err);
            }
            resolve();
        })
    });
}

async function start(){
    await writePromise();
    // data returned as if it were from a synchronous function
    const data = await readPromise();
    console.log(data.toString());
};

start()

Now that is clean asynchronous code!!

Taking it further

Now that we can create promises and await them, we no longer need to use callbacks. Here are some general examples.

Note: The default libraries in Node JS don't have great support for promises so we will be using third-party libraries for the async examples

API calls

Using callbacks


    const http = require('http');

http.request('http://jsonplaceholder.typicode.com/todos/1', function(res) {
    let data = '';
    res.setEncoding('utf8');
    res.on('data', function (chunk) {
        data += chunk;
    });
    res.on('end', function(){
        console.log(JSON.parse(data));
    })

}).end();

Using promises


    const fetch = require('node-fetch');

async function start(){
    const response = await fetch('http://jsonplaceholder.typicode.com/todos/1');
    const data = await response.text();
    console.log(JSON.parse(data));
}

start();

Spawn processes

Using callbacks


    const { spawn } = require('child_process');
const ls = spawn('echo', ['Hello World!!']);
let data = '';
ls.stdout.on('data', (_data) => {
    data += _data;
});

ls.on('close', (code) => {
    console.log(data);
});

Using promises


    const spawn = require('spawn-promise');

async function start(){
    const out = await spawn('echo',['Hello World!!']);
    console.log(out.toString());
}

start();

Conclusion

Concurrency is a beautiful thing, especially in large scale applications where speed is a huge priority and I hope this post helped you learn a bit more about it and how best to apply it.

Thanks for reading!!!

Consider giving me a follow on Twitter and you can check out my previous post here

How To Avoid Javascript Bugs

Mainasara Al-amin Tsowa — Thu, 04 Apr 2019 20:44:51 +0000

Being a javascript programmer is great but we can never avoid the dreaded stack trace! 😡, most of these bugs are just one Google search away from being solved but sometimes Google can't help and you become stuck with this headache-inducing bug, but do not worry because I have some tips that will help you avoid most bugs.

1. Know your Sources and Sinks

First of all, what are Sources and Sinks, a Source is a process that generates a piece of information and a Sink is the consumer of this information.
Example:


    
function doSomething(randomPercentage){
    const percentString = randomPercentage + "%";
    console.log(percentString);
}

const randomPercentage = Math.random()*100; // Math.random is the Source here.

doSomething(randomPercentage); // And the doSomething function is the sink.

This looks very trivial and from the surface, everything looks fine but looks can be deceiving, the function appears to only add a "%" at the end of the number and displays the resulting string, But when the code is executed you will get something similar to this 17.64650669753125%. That does not look good.

This is a classic example of what can go wrong if you don't carefully check your sources or sinks.

The reason why the percentage is not a whole number comes from the Math.random function because it only generates floating point numbers which we did not Math.floor. So let's fix that


    

function doSomething(randomPercentage){
    const percentString = randomPercentage + "%";
    console.log(percentString);
}


    
const randomPercentage = Math.floor(Math.random()*100);

doSomething(randomPercentage); // And our sink now receivs correct data.

The main point is to find data used before/by our function and work our way up the stream until we find the point where wrong/unexpected data is generated.

2. Avoid `undefined`

Sometimes we can be lazy and leave some variables undefined and expect that by the time we use them, they will be initialized. In some cases, such code is required but when the time comes to use them, it is best to have a default value.

Examples

Wrong usage.


let laterUsed;

doAsyncTask().then(()=>{
    useVariable(laterUsed); // ❌ It could still be undefined
})

Correct usage.

let laterUsed;

doAsyncTask().then(()=>{
    useVariable(laterUsed || externalAlternativeValue); 
    // ✅ Another value is used when the original value is undefined
})

Even more correct usage

doAsyncTask()
  .then(result => {
    useVariable(laterUsed)
  })
  .catch(e => {
    // handle whatever happens when doAsyncTask() goes wrong
  })

And also, avoid

communicating between asynchronous processes using global variables.
using undefined to indicate an error state. Or an absence of value.

3. Know your PASTA!

There are many different ways to write code and these styles have pasta based categorization that you need to understand in order to know which styles to use.

Spaghetti code

Avoid this, it does not matter that real spaghetti is delicious 😋, spaghetti code is characterized by tangled and messy code without any real structure/pattern you know.... like spaghetti and this code style is prone to a lot of bugs which are very hard to solve due to the aforementioned tangled messiness that is the code base.

Ravioli code

This coding style is in a very nice middle ground where the program is broken down into components that work well together but can also function as good on their own. Whether or not you write Ravioli code is based on how your program is structured.

Lasagna code

The holy grail of javascript development, well-structured components separated into layers to perform specific tasks through well-defined interfaces. Use this whenever you can because it reduces the risks of bugs and if they occur, they will be confined to a specific layer.

Another thing to note is please use type-checking when necessary.

4. Don't do too much at once

Sometimes we tend to write a lot of code without testing it each step of the way, this is very dangerous because when an error occurs you can't tell which new code caused this issue and will make you debug parts of your code that you don't need to which wastes time and can be stressing.

So each time you add a new feature or decide to route your app data differently, always run the code to make sure that part is okay.

4.5. Use linters

Please use linters! They really are good at helping enforce a good coding style and catch errors for you.

Conclusion

These are some tips I have for you so you can avoid as many bugs as possible and some of them apply to other languages apart from javascript.

Fun fact: I came up with number 4 because I wrote too much code without testing and spent 7 hours trying to debug it

Thanks to these wonderful people for their great advice.

[Deleted User]

David WickesFollow

British. Strong opinions held weekly. No, that's not a typo. Teaches when and where and what I can.

Thanks for reading!!

Consider giving me a follow on Twitter and you can check out my previous post here

Avoiding Weird Javascript Behaviour (true + true === 2 but true !== 1)

Mainasara Al-amin Tsowa — Mon, 11 Mar 2019 19:15:38 +0000

Every single programming language is designed to be intuitive and Javascript is no exception, but it does have some crazy quirks that make it stand out, one of which is its weird behavior with types and I am pretty sure you have seen the memes.

This can be traumatizing the first time you see it but it does not have to be, so I want to shed a little light on it and help you avoid running into such.

How Javascript types work

Javascript is a very very loosely typed language, this is not bad at all but in some situations, it can cause very bad head scratching. One of these moments occurred when I first saw this a few years back.



true + true === 2 // => true

true !== 1 // => true

At first glance, it looks very wrong but don't fret there is nothing wrong here, that is just how javascript works. Javascript handles types in a very different way, it has only 6 primitive types and all the code you write is represented by one of them.

boolean
number
string
object
function
undefined

This alone is not enough to cause such strange behavior but the way they are handled does, javascript always converts types to best fit what they are being used for, this is called Type Coercion and sometimes it changes value types to those not intended by the developer, this is why true + true === 2.

The binary + operator is primarily meant to add numbers but when it is faced with boolean values it's forced to convert them to numbers thus true becomes 1 which makes true + true become 1 + 1 and the expression is turned into



1 + 1 === 2 // => true

But the second expression true !== 1 seems to defeat what I just explained above but it really makes perfect sense too. The !== operator performs a strict comparison so it checks both value and type but since true is a boolean and 1 is a number they are not strictly equal thus the expression is true.

Truthy and Falsy

Every value in javascript has its own boolean value (truthy/falsy), these values are used in operations where a boolean is expected but not given, you have most likely used this feature before but never knew what was going under the hood.

Example:



const array = [];

if(array){
    console.log('Truthy!');
}

In the code above, array is not a boolean but because the value is "truthy", the if block will be executed.

Falsy vs `false`

Falsy values are values with an inherent boolean false, the following are falsy values.

0
'' or ""
null
undefined
NaN

Example:



const zero = 0;
const emptyString = "";

if(!zero){
    console.log("0 is falsy");
}

if(!emptyString){
    console.log("An empty string is falsy")
}

console.log(NaN || 1); // => 1
console.log(null || 1); // => 1
console.log(undefined || 1); // => 1

Note that the value false is falsy but falsy values are not false and the right way to differentiate them is by using strict comparison operators.

Example:



0 == false // => true
0 === false // => false

Truthy vs `true`

Every value that is not falsy is considered truthy, these include

strings
arrays
objects
functions

Example:



function somethingIsWrong(){
    console.log("Something went horribly wrong")
}

function callback(){
    console.log("Hello From Callback");
}

const string = "Hello world!"
const array = [1,2,3];
const object = {};

if(string){
    console.log(string) // => "Hello world!"
    const functionToCall = callback || somethingIsWrong
    functionToCall() // => "Hello From Callback"
    console.log(array || "That was not meant to happen")
    console.log(object || "This is strange")
}

Type coercion

Type coercion is the process of converting one type to another and every value in javascript can be coerced.

There two types of coercion:

implicit: This is done automatically when the need arises e.g



"0" + 5 == "05" // => true

The above example shows implicit coercion in its most recognizable form, the + operator is not only used to add numbers but strings too so when it is told to add a number to a string it has to convert the number to a string first, which changes 5 to "5" and the expression becomes.



"0" + "5" == "05" // => true

explicit: This is when a developer converts types by writing the appropriate code to do so e.g



"0" + String(5) == "05"

Type conversions

When a value is coerced, it undergoes one of three conversions.

ToString: This is triggered implicitly by the + operator and explicitly by calling the String function e.g



const height = 5.8;
console.log("Hello I am " + height + "ft tall") // => "Hello I am 5.8ft tall"

The + operator implicitly converts the floating point number to a string before concatenating them.



const height = 5.8;
console.log("Hello I am " + String(height) + "ft tall") // => "Hello I am 5.8ft tall"

Here we use the String function to explicitly convert the floating point number to a string.

ToBoolean: This is triggered implicitly by either their context or by logical operators (!, || and &&) and explicitly by the Boolean function.



if(3){
    console.log("Implicitly by context")
}

if(Boolean(1)){
    console.log("Explicitly by the 'Boolean' function")
}

console.log(!0) // => true

console.log(0 || "Hello") // => "Hello"

console.log(4 && 5) // => true

Note that the || operator does not return the truthy value of "Hello" but the actual string itself

ToNumber: Numeric conversion is very tricky because it is triggered by a lot of operators > < <= >= | & ^ ~ - + * / % != ==. Note, that binary + does not trigger numeric conversion and == does not trigger numeric conversion when both operands are strings.

There is a lot more on coercion that I can't explain here, so here is a link to an excellent post on javascript type coercion.

Avoiding this behavior

The best way to avoid this behavior is by type checking and an easy way to do this in vanilla javascript is by using a strict equality operator === when comparing values or checking a variable's type with the typeof keyword.

Example:

without type checking



const number = 21;
const string = "21"

function add100(number){
    console.log(100 + number)
}

add100(number) // => 121
add100(string) // => "10021"

with type checking



const number = 21;
const string = "21"

function add100(number){
    if(typeof number == "number"){
        console.log(100 + number)
    } else {
        console.log("Need a number, not a "+typeof number);
    }
}

add100(number) // => 121
add100(string) // => "Need a number, not a string"

Unfortunately, the examples above can not help you with checking classes, for that you need to use the keyword instanceof.



class ImportantClass {
    constructor(){
        this.importantValue = 1;
    }

    doImportantStuff(){
        console.log(this.importantValue);
    }
}

function useImportantClass(value){
    if(value instanceof ImportantClass){
        value.doImportantStuff();
    } else {
        console.log("Value needs to be of type ImportantClass, not "+typeof value)
    }
}

const value = new ImportantStuff();

useImportantClass(value); // => 1
useImportantClass("Not important"); // => Value needs to be of type ImportantClass, not string

But by far the easiest way to avoid this is by using Typescript. If you haven't heard of it, Typescript is a typed superset of javascript that compiles to normal javascript. In short, Typescript and its compiler help you write code that is very deterministic and I encourage you to click the link if you want to know more because the site explains more than I can.

Thanks for reading!!!

Consider giving me a follow on Twitter

Using CSS Selectors In Javascript

Mainasara Al-amin Tsowa — Mon, 04 Mar 2019 16:07:03 +0000

In CSS, selectors are patterns used to select the element(s) you want to style, but as you can tell from the title above, selectors are also useful in javascript and below are some examples on how to use them.

Basics

Using a selector in javascript

Use the .querySelector method

const div = document.querySelector("div") // => First occurence of a div element in the document

const p = div.querySelector("p") // => First occurence of a p element in the div

To get all matching elements, use the document.querySelectorAll method

document.querySelectorAll("div") // NodeList of all div elements

By IDs

To get an element by its ID, use a # before the element ID

document.querySelector("#id") // => document.getElementById('id')

By classes

To get elements by class, use a . before the class name

document.querySelectorAll(".myElementClass")

By tag name

To get elements by tag name, just input the tag name

document.querySelectorAll("body") // => document.getElementsByTagName('body')

Replicating `.getElementById` and `getElementsByTagName`

Replicating .getElementById

document.querySelector("#myDivId") // => document.getElementById('myDivId')

Replicating .getElementsByTagName

document.querySelectorAll("a") // => document.getElementsByTagName('a')

All elements

To get all elements use *

document.querySelectorAll("*") // => NodeList[...]

Using multiple selectors

To use multiple selectors, we seperate each of them with a ,.

<html>
    <body>
        <p>Hello i am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

document.querySelectorAll("p, a") // => NodeList[p,a,a]

More with elements

In the above examples, we made basic queries, but other things can be done like getting elements by order or parent.

Getting element children

There are two variants of this, one gets an element's child no matter how deep it is down the tree, and the other gets an element's direct child.

<html>
    <body>
        <p>Hello i am a paragraph</p>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <p>
                Hello i am a paragraph and here's
                <a href="https://anotherplace.com">a link</a>
            </p>
        </div>
    </body>
</html>

With the above HTML as an example, we will look at these two variants.

Direct child

document.querySelector("div > a") // => <a href="https://awesomeplace.com">Hey I am a link</a>

All children

document.querySelectorAll("div a") // => NodeList[a,a]

Getting elements by order

There are two ways to do this also. Consider the following HTML.

<html>
    <body>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <pre>I should intervene but i wont</pre>
            <p>Hello i am another paragraph</p>
        </div>
        <p>Hello i am a paragraph</p>
    </body>
</html>

Placed after

document.querySelector("div + p") // => <p>Hello i am a paragraph</p>

Preceded by

With ~, it does not matter the element immediately behind matches.

document.querySelector("a ~ p") // => <p>Hello i am another paragraph</p>

and we can see that the pre element did not affect the result because it does not matter if the pre was there in the first place. But the following selector will fail because it checks the element immediately above it.

document.querySelector("a + p") // => null

Getting elements by attribute

An attribute selector starts with [ and ends with ] and is used as such

<html>
    <body>
        <p style="color:blue;">Hello i am styled</p>
        <p>Hello i have no style</p>
    </body>
</html>

document.querySelector("p[style]") // => <p style="color:blue;">Hello i am styled</p>

Check attribute value

To check an attribute value we use the = symbol.

<html>
    <body>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

document.querySelector('a[href="https://awesomeplace.com"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>

More with attribute values

Check if attribute starts with...

document.querySelector('a[href^="https://awesome"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>

Check if attribute ends with...

document.querySelectorAll('a[href$=".com"]') // => NodeList[a,a]

Check if the attribute contains a substring

document.querySelectorAll('a[href*="place"]') // => NodeList[a,a]

Advanced selectors

:focus

This selects the element that currently has focus

:visited

This is used with a tags and selects links that have been visited

:link

This is also used with a tags but in this case, selects links that have not been visited

:enabled

This selects elements that are enabled(not disabled)

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>

document.querySelectorAll(":enabled") // => NodeList[p,p,a,a]

:disabled

This selects elements that have been disabled

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>

document.querySelector(":disabled") // => <button disabled="true"> I have been disabled </button>

:first-child

This selects the element that is the first child of its parent

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

document.querySelector("p:first-child") // => <p>I am a paragraph</p>

:last-child

This selects the element that is the last child of its parent

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

document.querySelector("p:last-child") // => <a href="anotherplace.com">I am another link</a>

el:first-of-type

This selects the element that is the first child of its parent and is the same type as el

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

document.querySelector("a:first-of-type") // => <a href="https://awesomeplace.com">Hey I am a link</a>

el:last-of-type

This selects the element that is the last child of its parent and is the same type as el

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

document.querySelector("p:last-of-type") // => <p>I am another paragraph</p>

:not(selector)

This selects elements that don't match the selector

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>

document.querySelector(":not(a)") // => <p>I am a paragraph</p>

:nth-child(n)

This selects the element that is the n th child of its parent.

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
    </body>
</html>

document.querySelector("div:nth-child(2)") // => <a href="https://awesomeplace.com">Hey I am a link</a>

:nth-last-child(n)

This selects the element that is the n th to the last child of its parent.

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
    </body>
</html>

document.querySelector("div:nth-last-child(1)") // => <a href="https://anotherplace.com">I am another link</a>

Mix and match

These selectors can be mixed together to perform some complex checks. e.g

A disabled button of class 'btn'

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
        <button disabled="true">I am disabled</button>
        <button disabled="true" class="btn">I am also disabled</button>
    </body>
</html>

document.querySelector('button.btn:disabled') // => <button disabled="true" class="btn">I am also disabled</button>

All disabled buttons in a form

<html>
    <body>
        <form method="POST">
            <input type="text" name="firstname" placeholder="firstname"/>
            <input type="text" name="lastname" placeholder="lastname"/>
            <button disabled="true">Clear inputs</button>
            <button type="submit">Submit</button>
        </form>
        <button disabled="true">I am disabled</button>
        <button disabled="true" class="btn">I am also disabled</button>
    </body>
</html>

document.querySelector('form > button:disabled') // => <button disabled="true">Clear inputs</button>

All disabled buttons in a form and all buttons outside it

<html>
    <body>
        <form method="POST">
            <input type="text" name="firstname" placeholder="firstname"/>
            <input type="text" name="lastname" placeholder="lastname"/>
            <button disabled="true">Clear inputs</button>
            <button type="submit">Submit</button>
        </form>
        <button>I am not disabled</button>
        <button class="btn">I am also not disabled</button>
    </body>
</html>

document.querySelectorAll('form > button:disabled, form ~ button') // => NodeList[button, button, button]

All links to external pages

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
        <a href="/otherpage.html">I will to the other pages</a>
    </body>
</html>

document.querySelectorAll('a[href^="https://"]') // => NodeList[a,a]

And to get links that are not to external pages, use

document.querySelector('a:not([href^="https://"])') // => <a href="/otherpage.html">I will to the other pages</a>

Conclusion

These are just some of the ways you can use selectors in javascript and if you want to know more, here is a link to a CSS selector reference on w3c.

Thanks for reading!!!

Do We Need To Compile Website Components?

Mainasara Al-amin Tsowa — Tue, 26 Feb 2019 15:33:35 +0000

Using components as building blocks for a website is very popular these days because of tools like @angular/cli, @vue/cli and create-react-app but all these tools can only be used from the command-line.

This is acceptable because the syntax these libraries use is not supported in browsers and need to be compiled but what if we could use these building blocks without the need of a compiler.

I personally created a proof-of-concept library that does this and I want to know if such an approach needs to be taken to solve the issues that compilers bring like unreadable minified code, complex build processes, and poor debugging experiences or even if compilers bring issues to begin with.

Really hope to hear from the community.

My proof-of-concept contains some documentation

The JS developer's view of WASM in 2019

Mainasara Al-amin Tsowa — Mon, 18 Feb 2019 15:04:16 +0000

Webassembly is a great innovation but the majority of modules are made with C++, Rust or GO, and as javascript developers having to maintain two codebases for one project is hard, fortunately that is where AssemblyScript comes in, assemblyscript compiles typescript to wasm and this opens up webassembly to all javascript developers.

Before assemblyscript arrived we had to learn C++ before we could use webassembly but now we have the means of getting into the webassembly ecosystem.

To better understand this environment we will need to ask ourselves a few questions.

1: What can we gain from webassembly?

A huge plus we get from webassembly is the performance boost, webassembly is up to 32x faster than javascript and this allows javascript apps to run at near-native performance.

Native apps made with javascript are often criticized for being slow and unresponsive, especially in low power devices despite the constant performance improvements being shipped by the developers, so having webassembly will allow these apps to run a lot faster.

2: What can we do with webassembly?

There are a lot of things that can be done with webassembly, some of which include

Data Science.
Graphic Design.
Game Development.
Virtual Reality.
Platform Emulation. There is a Windows 2000 virtual machine that is written in webassembly

This list can go on for a while but that will make this post too long, so here is a link to its use cases.

3: How is support for webassembly?

Webassembly has a very active community behind it, there are a lot of developers working on great projects like.

ASM-DOM: A webassembly virtual DOM for building C++ SPAs
Blazor: An experimental web UI framework using C#/Razor
Yew: A rust framework for making web apps
go-vdom-wasm: An experimental virtual DOM for golang and WASM
Asmble: Webassembly to JVM bytecode compiler
Wasmer: A standalone JIT WebAssembly runtime A similar project is wasmjit
pywasm: A webassembly interpreter written in python
wac: A webassembly interpreter written in C. Supports SDL!

This means our modules can also fit into a bigger picture and practically run everywhere

4: How do we get started?

The only way to get started is by using assemblyscript and it is very easy to set up.

Step 1: install

We install assemblyscript by running

$ npm i AssemblyScript/assemblyscript -g

This installs a few commands.

asc: This is the assemblyscript compiler, it compiles typescript files to wasm binaries.

$ asc -h
SYNTAX
  asc [entryFile ...] [options]

EXAMPLES
  asc hello.ts
  asc hello.ts -b hello.wasm -t hello.wat
  asc hello1.ts hello2.ts -b -O > hello.wasm

asinit: Sets up a new assemblyscript project or updates an existing one

$ asinit -h
Sets up a new AssemblyScript project or updates an existing one.
For example, to create a new project in the current directory:

  asinit .

Step 2: Initialize project

To initialize a project we run

$ asinit my-project

This creates a new project for us, but we have to manually install dependencies

$ cd my-project && npm install

Step 3: Build

The asinit command takes care of adding build scripts to our project so all we have to do is run

$ npm run asbuild

Examples

1: Pointers

Web assembly uses a stack-based virtual machine and this means it uses an array-like structure called a stack to store variables, a problem with this is that we will eventually run into pointers and javascript does not play well with pointers.

Scenario: We have a wasm library compiled from assemblyscript that returns a very important string.

export function return_string(): string{
    return "Important stuff";
}

And we use it in our javascript file like this

const wasmModule = await WebAssembly.instantiateStreaming(fetch('simple.wasm'), {})
const importantResult = wasmModule.instance.exports.return_string();

console.log(importantResult); //=> 8

The code above will run with no issues but what gets logged in the console is not the string but a pointer to the string and if we look at our memory, we will find that it looks like this.

"\0f\00\00\00I\00m\00p\00o\00r\00t\00a\00n\00t\00 \00s\00t\00u\00f\00f";

Instead of loading the wasm binary directly via WebAssembly.instantiateStreaming, we can load it with assemblyscript itself and that will help us with those pesky pointers.

import { instantiateStreaming } from "assemblyscript/lib/loader";
const wasmModule = await instantiateStreaming(fetch('simple.wasm'), {})
const importantResult = wasmModule.getString(wasmModule.return_string());

console.log(importantResult); //=> Important stuff

Example 2: DOM

As a javascript developer, using the DOM is essential but webassembly has no straight forward way of doing this, so different languages have different ways of getting around the problem.

C++ (emscripten)

auto root = emscripten::val::global("document").call<emscripten::val>(
      "getElementById",
      std::string("root")
    );

GO (syscall/js)

var root = js.Global().Get("document").Call("getElementById", "root")

Rust (wasm_bindgen)

let document = web_sys::window().unwrap().document().unwrap();
let root = document.get_element_by_id("root").unwrap();

We can also achieve this but it will take a bit more effort. The first thing we need to do is provide the module a method it can use to manipulate the DOM.

import { instantiateStreaming } from "assemblyscript/lib/loader";
const wasmModule = await instantiateStreaming(fetch('simple.wasm'), {
    index: {
        changeDiv: (id, value)=>{
            var div = document.getElementById(wasmModule.getString(id));
            div.innerHTML = wasmModule.getString(value);
        }
    }
})

Then use it in our module

declare function changeDiv(id: string, value: string): void;
export function set_hello_message(): void {
    changeDiv("helloDiv","Hello from WASM");
}

Conclusion

WASM is fast, safe and reliable so having a way to use it without leaving our comfort zone is very encouraging.

Thanks for reading!!!!

The original version of this post was, in all honesty, a very sour look at the situation and I am glad @jtenner pointed that out. I hope this shows a better view

Web Components, for when VueJS is too much

Mainasara Al-amin Tsowa — Mon, 11 Feb 2019 16:40:26 +0000

These days when you want to make a website you just can't avoid the words "VueJS" or "ReactJS" and for very good reasons, these libraries make developing a website much easier thanks to their component-based architecture and how they handle data/properties and update the relevant parts of your site accordingly it's like magic!! ✨.

But for times when I need a simple component or the element I want does not have dynamic data, I ask myself "Do I really need React/Vue for this? 🤔", well that is where web components come in.

Web components are features (not the elements themselves) that help you do a lot of things, one of which is to create a custom element that can be used just like input, div and the rest.

Let's start!.

Step 1: Define our component

One way to do this is by creating a class that implements the HTMLElement interface and give it a tag name by using the customElements.define function.

According to MDN.

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

//component.js

class MyComponent extends HTMLElement {
    constructor(){
        super();
        console.log("My component works!");
    }
}

customElements.define("my-component", MyComponent); //Register the new element

Notice that the component name is hyphenated, this is because we are not allowed to make a component called something like coolcomponent, the name needs to resemble x-cool-component or cool-component

Now when we include component.js in our HTML file we can use the component we've just created.

<!-- index.html -->

<body>
    <h1>Hello world!</h1>
    <my-component></my-component>
</body>

And if we check the console we will see the message "My component works!", That means our component is working fine.

Step 2: Element lifecycle

Just like in Vue there are lifecycle callbacks namely

connectedCallback: this is called just after our element has been rendered.
disconnectedCallback: this is called when our element is about to be removed.

//component.js

class MyComponent extends HTMLElement {
    constructor(){
        super();
        console.log("My component works!");
    }

    connectedCallback(){
        console.log("Mounted!")
    }

    disconnectedCallback(){
        console.log("Unmounted!")
    }
}

customElements.define("my-component", MyComponent);

We now add a button to index.html which removes our element so we can test all the lifecycle callbacks.

<!-- index.html -->

<body>
    <h1>Hello world!</h1>
    <my-component id="mycomponent"></my-component>
    <button onclick="document.getElementById('mycomponent').remove()">Remove Component</button>
</body>

Now when we press the button our component is removed and we see the message "Unmounted!" in the console.

Step 3: Let's make something

Now that we have the basic knowledge on how to make a custom element let's use it!. A good example of this is a clock element.

Warning!!!!, CODE BOMB INCOMING!!!!! 💣💣💣

//component.js

class ClockElement extends HTMLElement {
    constructor(){
        super();
        // Time update interval id
        this.intervalID = 0;
    }

    pad(str){
        if(str.length == 1){
            str = "0"+str
        }
        return str;
    }

    //Check if hour is pm or am
    pmOrAm(hour){
        return Number(hour) < 12 ? "am" : "pm";
    }

    getTimeString(){
        const date = new Date();
        const seconds = date.getSeconds().toString()
        const hours = date.getHours().toString()
        const minutes = date.getMinutes().toString()

        var hoursNumber = Number(hours)
        var regularHOurs = hoursNumber-12<=0? hoursNumber : hoursNumber-12;
        return this.pad(regularHOurs.toString())+":"+this.pad(minutes)+":"+this.pad(seconds)+" "+this.pmOrAm(hours)
    }

    disconnectedCallback(){
        //Clear the timer interval
        clearInterval(this.intervalID);
        console.log("Unmounted")
    }

    connectedCallback(){
        //Start the timer
        this.intervalID = setInterval(()=>{
            this.innerHTML = this.getTimeString()
        },1000);
        console.log("Mounted")
    }
}

customElements.define("x-clock",ClockElement)

Let me explain what is going on here,

We have renamed the element to ClockElement and registered it as x-clock
There is now an interval id used to identify and eventually clear the interval declared in connectedCallback
The pad method is used to add a 0 to numbers that are single digit, this makes the time look like 00:09:16 when it would look like 0:9:16
The pmOrAm method returns the appropriate suffix for the time based on the hour
The getTimeString method looks complicated but it actually is not, we just get the current hour, minute and second and convert it into a nice string showing the time in 12-hour format
In the connectedCallback, we start a timer that sets the innerHTML of our element to the current time every 1000ms (1 second)
In the disconnectedCallback we clear the timer.

Now that we understand that code, let's add the element to our website.

<!-- index.html -->

<body>
    <h1>Hello world!</h1>
    <x-clock></x-clock>
</body>

Step 4: Attributes

Our clock looks good so far but it can be better, we will now make it display either 24-hour or 12-hour format based on an attribute of our choice. I personally like this syntax :

<x-clock military></x-clock>

so we will aim at using the existence of the attribute as a boolean.

    getTimeString(military){
        const date = new Date();
        const seconds = date.getSeconds().toString()
        const hours = date.getHours().toString()
        const minutes = date.getMinutes().toString()

        if(typeof military == "string"){
            return this.pad(hours)+":"+this.pad(minutes)+":"+this.pad(seconds)
        } else {
            var hoursNumber = Number(hours)
            var regularHOurs = hoursNumber-12<=0? hoursNumber : hoursNumber-12;
            return this.pad(regularHOurs.toString())+":"+this.pad(minutes)+":"+this.pad(seconds)+" "+this.pmOrAm(hours)
        }
    }

    disconnectedCallback(){
        //Clear the timer interval
        clearInterval(this.intervalID);
        console.log("Unmounted")
    }

    connectedCallback(){
        const military = this.getAttribute("military")
        this.innerHTML = this.getTimeString(military)
        this.intervalID = setInterval(()=>{
            this.innerHTML = this.getTimeString(military)
        },1000);
        console.log("Mounted")
    }

If you pay attention to the new code added in getTimeString you will see a very strange statement typeof military == "string", this is there because when we set the attribute like this:

<x-clock military></x-clock>

we get the value of the attribute as "" which in javascript is equivalent to false, so if(military) will return false even if the attribute exists

Now we can now choose to display either in 12-hour or 24-hour format by adding an attribute !!

<!-- index.html -->

<body>
    <h1>Hello world!</h1>
    <x-clock></x-clock>
    <x-clock military></x-clock>
</body>

Step 5: Reactive state

Our element currently does not change state in runtime even if our attribute has, that looks like it can be improved upon. So we will now make the element reactive to attribute changes.

To do this we use a MutationObserver, this helps us watch for any changes to our element.

A good place to put this is in the element constructor. The MutationObserver constructor returns a MutationObserver that invokes a specified callback whenever there are changes to our element.

    constructor(){
        super();
        // Time update interval id
        this.intervalID = 0;
        this.observer = new MutationObserver((mutations)=>{
            for(var mutation of mutations){
                if(mutation.type == "attribute"){
                    // React to changes
                }
            }
        });

        this.observer.observe(this,{
            attributes: true // Only listen for attribute changes
        });
    }

We assign the observer to this.observer instead of const observer because we need to clean up the listener in our disconnectedCallback.

    disconnectedCallback(){
        //Disconnect observer
        this.observer.disconnect();

        //Clear the timer interval
        clearInterval(this.intervalID);

        console.log("Unmounted")
    }

When the attribute changes we need to display the accurate time format, and for that, we also need to change const military to this.military so we can access the variable from the MutationObserver.

    constructor(){
        super();
        // Time update interval id
        this.intervalID = 0;
        this.observer = new MutationObserver((mutations)=>{
            for(var mutation of mutations){
                if(mutation.type == "attribute"){
                    // React to changes
                    this.military = this.getAttribute("military");
                }
            }
        });

        this.observer.observe(this,{
            attributes: true // Only listen for attribute changes
        });
    }

    //Other code

    connectedCallback(){
        this.military = this.getAttribute("military")
        this.innerHTML = this.getTimeString(this.military);
        this.intervalID = setInterval(()=>{
            this.innerHTML = this.getTimeString(this.military);
        },1000);
        console.log("Mounted");
    }

We are done 🎉🎉🎉🎉🎉🎉🎉🎉

Not only have we just made our custom element but we made it react dynamically to changes. This only scratches the surface of what web components can do and I can't wait to see the great things you guys will use it for.

Once again this is not a replacement for VueJS (Or it's counterparts), it is only an alternative for when Vue is overkill

DEV Community: Mainasara Al-amin Tsowa

Gecko: Making a programming language is hard 😮‍💨

The Idea

LLVM Dragon, please let me pass...

Skill Issues

The C Backend

Conclusion

Golang Nil Errors

Refactoring & Rewrites

Final Thoughts

When does proprietary code become too proprietary?

What Is Concurrency In Node JS?

Basics

Promises

Taking it further

API calls

Spawn processes

Conclusion

Thanks for reading!!!

How To Avoid Javascript Bugs

1. Know your Sources and Sinks

2. Avoid undefined

3. Know your PASTA!

Spaghetti code

Ravioli code

Lasagna code

4. Don't do too much at once

4.5. Use linters

Conclusion

[Deleted User]

David WickesFollow

Thanks for reading!!

Avoiding Weird Javascript Behaviour (true + true === 2 but true !== 1)

How Javascript types work

Truthy and Falsy

Falsy vs false

Truthy vs true

Type coercion

Type conversions

Avoiding this behavior

Thanks for reading!!!

Using CSS Selectors In Javascript

Basics

Using a selector in javascript

By IDs

By classes

By tag name

Replicating .getElementById and getElementsByTagName

All elements

Using multiple selectors

More with elements

Getting element children

Getting elements by order

Getting elements by attribute

Check attribute value

More with attribute values

Advanced selectors

Mix and match

Conclusion

Thanks for reading!!!

Do We Need To Compile Website Components?

The JS developer's view of WASM in 2019

1: What can we gain from webassembly?

2: What can we do with webassembly?

3: How is support for webassembly?

4: How do we get started?

Step 1: install

Step 2: Initialize project

Step 3: Build

Examples

1: Pointers

Example 2: DOM

Conclusion

Thanks for reading!!!!

Web Components, for when VueJS is too much

Step 1: Define our component

Step 2: Element lifecycle

Step 3: Let's make something

Step 4: Attributes

Step 5: Reactive state

2. Avoid `undefined`

Falsy vs `false`

Truthy vs `true`

Replicating `.getElementById` and `getElementsByTagName`