This Week Reads

What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?

I save you time if you prefer not to read this one. Presentational attributes (HTML attributes) have weaker (or lesser priority) compare to CSS attribute of the same function.


23 lesser known VS Code Shortcuts as GIF

You probably have seen a lot of similar posts, but this explains the shortcut in animated GIF, which is easier to understand!


ES6 vs ES2015 – What to call a JavaScript version?

Confuse with JavaScript version? You’re not alone. This will explain the difference between ES6 and ES2015. Hint: they are the same.


Get Hired: A New Series

This is a series of posts about getting hired, how to prep resume and go to interview. If you are looking for a job, it’s worth the time to invest in the preparation.


How to avoid infinite nesting callbacks

Ever seen (or written) JavaScript function with bunch of nested callbacks? The new `async` `await` will help you avoid that.


Monday Reading List

Blazor Server in .NET Core 3.0 scenarios and performance

Have heard about Blazor? If not, definitely check this post out. For those who already use Blazor, you can skip. Unless you also want to understand the inner working of Blazor.


Everything you need to know about resource tagging in Azure

Azure has feature to tag your resources for some times now. But, how do you use it the right way? This post will explain.


Javascript – Does taking a callback make a function asynchronous?

Interesting question and could be one of those questions as well. The answer is: it depends. Do read more to understand the details.


The Mediator Pattern In .NET Core – Part 1 – What’s A Mediator?

I came across Mediator pattern and has since been intrigue by it. This post will explain what’s it and why do you need it.


How C# 8 Helps Software Quality

The essence of writing codes is not _just_ for computer to interpret and run it. Equally, if not more, importantly is for human to understand and maintain it. C# 8 features will help to do just this by increasing the quality.


Saturday Reading List

CSS Can Do This… And It’s Terrifying!

I never thought CSS could be used to this, it’s amazing actually. From keylogger to turing, it’s all done using CSS (and in some cases, JavaScript).


Swiftly understand what versions of .NET are supported on Azure App Service

Want to know what version of .NET is supported in your Azure App Service? Check this tips out. And while you there, check out hundreds of other tips as well.


Demystifying containers, Docker, and Kubernetes

Getting started on Kubernetes? This is a must-read, cover the basic building block of Kubernetes. No code involves, just the knowledge you need to understand Kubernetes.


Azure and .NET Code Samples

You need to bookmark this link right now if you are building application using Azure, .NET, Microsoft Graph or Power Platform, especially if you don’t know how to start building application for your project. There are many available code samples for all kind of applications.


Should I use === or == equality comparison operator in JavaScript?

Ahh.. the JavaScript tricky question. There’s actually a difference between `===` and `==` and why you should use one in some cases and not the other.


Fair Distribution Algorithm

Given 5 boxes with different weight [24, 27, 17, 15, 17], distribute the weight as even as possible among 3 trucks of the same size. The trucks can fit unlimited number of boxes. The weight of the boxes can’t be transferred, for example move 4 from box 1 (originally weight 24) and transfer to box 2.

What if we have more boxes with different weight, let’s say 6 boxes with weight of [1, 2, 17, 21, 7, 6].

What if the number of truck change to 5 trucks?

What’s the most effective algorithm to distribute the boxes evenly (in weight) within all the trucks?

ECMAScript 2015 Destructuring and Spread

Destructuring

Destructuring is a way to unpack values from arrays, or properties from objects, into its own variables.

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

Spread

Spread allows collection to be expanded in places where zero or more arguments are expected (in function), or elements are expected (in array literals), or key-value pairs are expected (in object literals).

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

Reference

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Memoization, huh?

Memoization

To put it simply, it’s caching. In a fancy term.

Memoization is usually being used in function. In other words, memoization is caching in the scope of Function. The purpose of memoization is to avoid doing computation that’s needed to be done repeatedly. This essentially to save time and resources.

The way functions achieve memoization is by caching the result and returning the result if it has been computed previously.

Couple use cases of memoization

  • Pure functions that require intensive computation and called repeatedly.
  • Pure and recursive Function.

See Fibonacci example in the link reference.

Reference

https://medium.com/@chialunwu/wtf-is-memoization-a2979594fb2a

What is Event Sourcing?

Event Sourcing

Every application has a state, representing current snapshot at the moment. Event sourcing is the idea of persisting all of these states as it changes from one to another.

Imagine a workflow for an invoice goes something like: invoice is created which set the status to pending. Pending invoice then gets approved which sets it approved. Approved invoice can be denied or collected. When invoice is denied, it goes back to pending, but when it’s collected, it becomes closed. The state of an invoice is where it’s at a particular time. However, when event sourcing pattern is implemented, we will be able to see a historical timeline of an invoice, from when it’s created to the current state.

What this allows us to do is, we are able to:

  • Complete rebuild: getting rid of the current state and use events to rebuild the invoice to its current state.
  • Temporal query: we can tell what state an invoice is at particular point in time.
  • Event replay: when the past event is incorrect, we can make the change and compute it from the beginning, thus, replaying the whole series of events.

Some applications of event sourcing are:

  • Source control. Every source control uses time series where commits made change the code. By storing events for every commit, we are able to state of the code at particular point in time.
  • Redo / undo. Applications that utilize undo / redo, such as word processor, will benefit from event sourcing pattern.
  • Document history. Word processor application will also benefit from event sourcing by storing event every time changes are made.

I hope this simple explanation of event sourcing helps you to understand what it is and how we can use it. There’s definitely a lot more to it that I don’t cover here, but there are lots of resources online you can learn from.

Reference

https://martinfowler.com/eaaDev/EventSourcing.html