Forem: XING

Getting Name from Latitude and Longitude - Google Geocode API

XING — Mon, 02 Nov 2020 04:38:15 +0000

I wrote this utility function that tells me the approximate location given a latitude and longitude in the form of a promise holding a string. You just have to put in the latitude, longitude and API key. It also contains a cache holding onto all queried latitude and longitude.

How does it work?

The utility function to query the API is an async function for obvious reasons (we do not want the main thread to wait for the response). I used axios to issue a HTTP GET request to the API endpoint, and parsed the response to get the formatted address. This is then returned as an awaited string. The end result? We get a Promise that returns a String which we can then handle and set it to the state accordingly. Since the demo is written in React, changing the state will trigger a rerender of the component and our new string is now displayed.
https://codesandbox.io/s/google-geocoding-api-demo-ipyfx?file=/src/utils.js

Ideally, the API key should be loaded from the environment, but hey, this is just a demo. I also did zero error handling for the same reason :)

You can get the API key and documentation from the official google site:
https://developers.google.com/maps/documentation/geocoding/overview

What is Web Components

XING — Wed, 05 Aug 2020 11:50:35 +0000

While being the future of web development, web components are also my new favorite web paradigm and also one of the least talked about. It grants many features to developers and allows us to write extremely reusable components that are declarative and easy to consume. Let's take a look at it today.

The Specification

Web components is a suite of standard web specifications. Their existence means developers can create light-weight, reusable and powerful UI components for the web. Consuming a web component could be as simple as importing a JavaScript module and writing a HTML tag. The main specifications are:

Custom Elements - allows developers to write custom HTML tags (more on this later)
Shadow DOM - provides a black box for developers to write obstructed logic
HTML Template - kinda cool, but it has limited use case

I will talk mainly about Custom Elements today since it is the pillar that holds up the web component specifications.

Some things about Custom Elements

Platform Agnostic 👍

Custom elements are implemented with a JavaScript class and consumed by simply writing a HTML tag. This means you can use them anywhere. You can use them on your bare index.html file or within AngularJS, ReactJS, VueJS, literally anything else that runs on a .html file.

No tooling required 👍

In essence, everything on the Front-end can be categorized into 3 types of logic: HTML, JavaScript and CSS styles. Custom elements embrace this sense of minimalism. To write a custom element, all we need is a JS class to declare a class (the implementation), a single line of JavaScript to define the custom element (the declaration) and calling <my-new-custom-element /> on the index.html file (the consumption). Unlike React or Angular, the tooling is optional. We can introduce tooling for optimization or specify types or linting, but they are essentially optional.

Easy consumption 👍

Since custom elements are just user-defined HTML tags, they are incredibly easy to consume. We can just use them as normal HTML elements, passing configurations as attributes and not having to worry about the underlying complexity and implementation.

Too lightweight 👎

Out of the box, custom elements only offers a handful of lifecycle events. This is a very slim selection as compared to the React components of the world. To combat this, tooling such as StencilJS and Polymer exist to provide a higher-level API while being very performant since they eventually compiles down to a Custom Element.

Who else is using Web components?

Github

In a blog post from 2018 titled "Removing jQuery from GitHub.com frontend", GitHub engineers talked about how certain UI widgets are implemented with Web Components.

Ionic framework and design systems in general

Digital design systems are the perfect use case for web components. Once it is written, the individual UI components should as much as possible, across as many platforms as feasible. Writing or exporting them to Web Components means they can be used anywhere regardless of front end framework. I wrote a piece about my internship experience at Staizen and mentioned how they utilize StencilJS (a web component based abstraction) to write their design system while exporting the components to ReactJS apps. Check it out here.

How future proof is this?

Front-end frameworks are constantly changing. This is one of the biggest gotcha that all front-end developers face. As a consequence, we often see developers showcasing their blogs on dev.to, talking about how they write their blogs without a JavaScript framework. I understand where they are coming from and this is where web components shine. Since web components are browser specifications adopted by W3C and WHATWG, they are here to stay. This means custom elements I write today will still be maintainable for quite a while with minimal effort. I cannot say the same about my tooling-heavy React applications.

Additional Reads

https://developers.google.com/web/fundamentals/web-components/customelements

https://css-tricks.com/an-introduction-to-web-components/

https://www.robinwieruch.de/web-components-tutorial

https://stenciljs.com/docs/introduction

https://stenciljs.com/docs/overview

This blog post was originally posted on xingzhi.dev

VSCode mass extension installation

XING — Wed, 20 May 2020 11:51:52 +0000

How many ways are there to install a couple of public essential VSCode solutions for new members of a development team?

Note: ideally, the installation will be part of the onboarding process, so using workspaces is not very feasible since it is only restricted to one project.

Publish/Use an extension pack on the market place

Make an extension pack + publish it on the marketplace

Pros	Cons
user can just search on the market place and install	fully public
requires the team to maintain a VSCode market place account

Run a command

VSCode has a --install-extension option on the CLI where you can install extensions with their marketplace id.

example: code --install-extension dbaeumer.vscode-eslint --install-extension dbaeumer.vscode-eslint

https://code.visualstudio.com/docs/editor/command-line#_working-with-extensions

Pros	Cons
0 maintenance of any accounts or code	VSCode needs to exist on the system PATH (i.e. zip versions need extra work)

Let's discuss any other options that exist!

Chaining terminal commands in PowerShell

XING — Wed, 20 May 2020 05:39:47 +0000

TIL, you can chain multiple commands in PowerShell through a semicolon ';'.

example, to clone a repo and do npm install and npm start :

git clone example.com/repo.git ./awesome-repo;cd ./awesome-repo;npm install;npm start

What is hydration?

XING — Wed, 20 May 2020 04:19:43 +0000

I came across the term "hydration" while reading up on redux. Anyone mind explaining to me the difference between hydration and serialization + parsing?

What is hydration?

XING — Wed, 20 May 2020 04:19:05 +0000

I came across the term "hydration" while reading up on redux. What is the difference between hydration and serialization + parsing?

Not a git tutorial

XING — Mon, 04 May 2020 07:45:38 +0000

Git is the dominant version control system today. Why did Linus Torvalds write it back in 2005, what were the problems he was trying to solve, how does it have such huge market share and what are some of its design considerations?

This will not be a tutorial about git, instead, it will be a summary of the knowledge that I know about git.

What is the purpose of Version Control?

There are 3 primary objectives of Version Control.

Work is done concurrently, not sequentially
Work between people has to have minimal race conditions
We want to see the history, who did what, when and why

Work is done concurrently, not sequentially.

The same code base has to be worked on by multiple developers at the same time. Developers in Singapore and Switzerland has to be able to work on the same code base independently of each other.

Work between people has to have minimal race conditions.

The same pair of developers in Singapore and Switzerland have to be able to put their code together when their day ends. The code should work well and without errors. If there are significant and breaking changes, the Version Control software should be able to resolve these conflicts easily.

We want to see the history.

Every line of code should be traceable to a developer, with the time it was written alongside the consideration and circumstances behind the piece of code.

Git vs Other Version Control Systems Today

Git has the largest market share in the version control category for many years. Due to its opensource nature, it has many more hosting providers, front-end client programs and is built into many tools such as IDEs (Integrated Development Environments) and CICD pipelines (Continuous Integration and Delivery). Most software developers will have to understand and use git to be proficient at their job, regardless of their software stack and area of expertise.

The trailing Version Control Software is SVN, Apache Subversion. Adopting a Centralized model, it is architecturally different from the decentralized and distributed model from git. This comes with many trade-offs, making git a better option when trying to achieve the 3 primary objectives of version control.

What did Torvalds expect from a Version Control System?

Linus Torvalds set out to write a Version Control System to manage the Linux Kernel. He was unsatisfied with the market offerings at that period in time. To manage such a complex project with thousands of developers, he had some requirements for his version control system:

The system has to perform well when showing the difference between commits up to thousands of lines.
Decentralized system - the user has to be able to clone the entire project locally.
Trusting the code - history of the code must be verifiable.
Branches have to be performant, easy to manage and local.

How does git represent code changes

The entire git is a huge tree:

Every commit is a node connected to a previous node.
We can split away from the existing tree to create new a new branch.
Each commit is an entire snapshot of the project.
When you revert to a specific commit in the git tree, you get the entire project at that specific instance.

Each commit (node in the tree) will have the following details:

Commit Hash - The repository goes through a hashing algorithm and generate a hash value. It acts as an ID for the commit and allows us to trust the history of the project.
Commit Message - Every developer will write a succinct message to explain what they changed.
Changes from the previous commit - Git provides a diff feature, allowing us to see changes line by line. Git also understands context. When we rename a file, git understands and acknowledges that; Rather than thinking we removed and added a new file with a different name, the diff will show that we renamed the file instead.

Every git tree is local

A git tree refers to the entire repository of a project. Since the entire repository contains all snapshots of a project from the initial commit to the latest, it is effectively the entire tree if you also have all of the branches. Having a local tree brings many advantages:

Work can be done offline.
The changes you make can be vetted locally or externally before you submit it to the collaboration tree.
You can make as many branches as you want; Since trees are local, branches are local too. That means all local branches will not be shared with the collaboration tree unless you want to.
Every diff and branching operation is faster because no network access is required.

This post was originally posted on xingzhi.dev

How does DNS work

XING — Thu, 09 May 2019 06:49:11 +0000

I was trying to explain the concept of a Domain Name Server to a friend who has very minimal networking background.

How does web pages work

When you open a website like google.com, your browser will download the web page and render the content for you to see and interact.

Where do IP addresses come in

When you key in a domain name (such as google.com), your computer does not understand where to find it. It relies on a phone book, a service known as Domain Name Server. Like a phone book, it translates the google.com to an actual IP address such as 172.217.194.113 where your browser will go in and download the web page before displaying it to you. Your browser does not know where is google.com, but it knows where to find 172.217.194.113.

Where is this Domain Name Server

All of that happens in the background, your computer interacts with other elements on the network and make that happen, all transparent to you (the user). Typically, the router provided by your ISP (Internet Service Provider) will point to a DNS that is hosted by your ISP. In some cases, the connection might be slower as compared to a public DNS. In other cases, the DNS you are trying to access might not have the domain you want due to piracy, security or censorship concerns set by the DNS host (the admin body of the DNS).

Why use a public DNS instead of the default

There is generally no harm in using your default DNS provided by your ISP. As mentioned before, it could be slower, but it has most of the sites you will want to access. In some parts of the world, certain websites could be censored by a governing body for censorship or security concerns. Some do it at a DNS level and others do it at a firewall level.

In other use cases, the default DNS server might not be as efficient as a public DNS such as those from Cloudfare or Google, thus serving results at a slower rate.

DNS could be used to log your network activity. By mapping the user and the DNS results provided, the DNS provider could keep a log of all your network activity (there are other ways your ISP could do this, DNS is just one of the ways). Carefully choosing and using a public DNS could reduce the risk on this front.

Should all of us just rush out and change our DNS right now?

In most countries, changing your DNS alone might not be enough to circumvent the censorship laws. For most home users, changing the DNS might not appear to improve your network speeds since the network will be bottle-necked elsewhere anyways (like the 6 year old WiFi access point).

In summary, if you really need that slightly faster speeds brought by the Public DNS providers or the security promised by these providers, go ahead and change your DNS. Just like all network related configuration, make sure you fully understand the technology and proceed with caution.

The scope of this article does not serve to provide as a guide to changing your DNS.

Credits

What is DNS? - https://www.cloudflare.com/learning/dns/what-is-dns/

What is Firewall? - https://www.cisco.com/c/en/us/products/security/firewalls/what-is-a-firewall.html

Why use 1.1.1.1 ? - https://www.cloudflare.com/learning/dns/what-is-1.1.1.1/

Cloudfare DNS - https://1.1.1.1/

Google Public DNS - https://developers.google.com/speed/public-dns/

For the LOLs - https://lmgtfy.com/