This is a TL;DR version of the above article in a format of Q & A. I highly recommend reading the article.

There is a total of 12 points. The more points you have, the closer you are into a crisis.

1. Does my company encourage developers to become high performers without reviewing their code?

If so, +1. If not, what is the system…


Regular Responder vs. Polite Listener

Throttle 1 Second

Hello, I am a robot. As long as you keep calling me, I will answer you but 1 second each. I just love to reply at exact intervals. It would be like this;

Annoying Me: Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi…


Using SVG/HTML/CSS(Not Canvas) and JavaScript

Pong is a table tennis-themed arcade game released in 1972, featuring simple 2D graphics. In this tutorial, this game will be developed with HTML, including SVG, not with canvas for maximum simplicity(by avoiding focus on canvas graphics)

There is a total of five steps.

  1. Draw table/ball
  2. Let the ball move


Using SVG and less than 40 lines of Javascript

An analog clock can visualize the passage of time as it happens, making them more aware of this moment relative to the past and future. It gives a feel for how long it takes to complete certain tasks and plan accordingly.

However, when it comes to HTML coding, an Analog…


ACE Editor, Customizable theme and language

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. …


Barcode

Install

$ npm install jsbarcode --save-dev

HTML

<svg id="barcode"
jsbarcode-value="123456789012"
jsbarcode-format="code128"></svg>

JS

import jsbarcode from 'jsbarcode';
jsbarcode("#barcode", "Hi Barcode!");


Slide Animation, Swipe, and SPA-friendly

Sidebar is a way of page navigation, especially convenient for mobile SPA applications, which ensure that certain page elements are always in view.

HTML

  • Blocker is used to covering the full screen in a half-transparent mode in mobile devices
<div class="sidebar">
<div class="blocker"></div>
<div class="content">
Sidebar Content
</div>
</div>

CSS

.sidebar {…


Free, No Key, No Limit, No Effort, and Openlayers6

Import Library/CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.0/build/ol.js"></script>
<div class="map"></div>

Code

const map = new ol.Map({ target: this.querySelector('.map') });
setLayers(map)}));
setCenter(map, [40.6892, 74.0445]);
setZoom(map, 15);
function setLayers(map) {
const layers = [new ol.layer.Tile({source: new ol.source.OSM()})];
map.addLayer(new window.ol.layer.Group({layer}));
}…


Different Project, Different Registry

This article shows how to work with multiple registries for different projects

1. Setup a user-wide registry and credentials

For both company-wide registry and public registry both

$ npm config set registry https://registry.my-company.com/path$ npm login --registry=https://registry.my-company.com/path
Username: <company-user-name>
Password: ******
Email: (this IS public) userid@my-company.com
$ npm login --registry==https://registry.npmjs.org …


Show maps with a few lines of HTML using custom elements

Maps

This article is to introduce you to a simple way of having a map on a web page. To do so, please add these two lines of HTML to your webpage:

<script src="//unpkg.com/elements-x@1.4.4/dist/mapbox"></script>
<x-mapbox center="Toronto, Canada" access-token="xxxyyy"></x-mapbox>

To switch between satellite mode and terrain mode, click a square icon on…

Allen Kim

Front-End Engineer/Tech-Lead

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store