Regular Responder vs. Polite Listener

Photo by Laura Ockel on Unsplash

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 Hi Hi ..….
Throttle Robot: Hi ……… Hi ……… Hi ……… Hi ……… Hi …………

function throttle(func, interval = 500) {
let isRunning;
return function(...args) {
let context = this;
if (!isRunning) {
isRunning = true;
func.apply(context, args);
setTimeout( _ => isRunning = false, interval);
}
};
}

Hi, I…


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)

Photo by Feelfarbig Magazine on Unsplash

There is a total of five steps.

  1. Draw table/ball
  2. Let the ball move
  3. Set player
  4. Set opponent(computer)
  5. Finalize it with scores

When we complete all five steps, you will have less than 100 lines of JavaScript excluding a small library, which is used to move a paddle.

Step 1. Draw table/ball

As the first step, you will only draw a table and a ball without any JavaScript.


Using SVG and less than 40 lines of Javascript

https://stackblitz.com/edit/medium-clock

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 clock is not easier than a digital clock. Although it takes more than a digital clock, it’s not too hard to build an analog clock. It’s more about building SVG code rather than writing Javascript.

https://gist.github.com/allenhwkim/0f14ee7f055c4c3fd4eae584ab17205f?short_path=1732725


ACE Editor, Customizable theme and language

Photo by Taras Shypka on Unsplash

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. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

<script src="//unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<pre class="editor">
function my() {
console.log('Hi, ACE Editor!');
}
</pre>
.editor {
display: block;
position: relative;
min-height: 200px;
height: 100%;
}
const editorEl = document.querySelector('.editor');
const editor = window.ace.edit(editorEl);
editor.setTheme(`ace/theme/monokai`);
editor.session.setMode(`ace/mode/javascript`);
editor.on('change', data => {
console.log('edited result', data);
});
https://stackblitz.com/edit/medium-ace-editor

For those…


Barcode

$ npm install jsbarcode --save-dev
<svg id="barcode"
jsbarcode-value="123456789012"
jsbarcode-format="code128"></svg>
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.

  • 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>
.sidebar { /* it's a mobile sidebar, blocker and content */
position: fixed;
top: 0;
left: 0;
width: 100vw; /* to cover the whole screen */
height: 100vh;
padding: 0; /* to override the default padding */
background: rgba(0,0,0, .5); /* half transparent background…


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

<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>
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}));
}
setCenter(map, lonlat) {
const center = window.ol.proj.fromLonLat(lonlat);
map.getView().setCenter(center);
}
setZoom(map, zoom) {
map.getView().setZoom(zoom);
}

As a big fan of custom elements, I have wrapped more features of Openlayers6 into a library called elements-x. To use it on your web page, simply copy/paste these two lines to your HTML Code.

<script src="//unpkg.com/elements-x/dist/openlayers/index.js"></script> …


Different Project, Different Registry

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

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
Username: <npmjs-user-name>
Password: ******
Email: (this IS public) public@email.com

This will update ~/.npmrc like the following

registry=http://registry.my-company.com/path/
//registry.my-company.com/path/:_authToken=1234-5678-90ab-cdef-ghik
//registry.npmjs.org/::_authToken=1234-5678-90ab-cdef-ghik

The above #1 setup will set your company-wide repository as the default repository. To set up a different default repository for your project, create a file, .npmrc, n your project. …


Show maps with a few lines of HTML using custom elements

Maps
Photo by Andrew Neel on Unsplash.

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 the top-right corner.


Pair Programming More than Screen Sharing

This article focuses on the following some important features of Live Share although there are lots more features than listed below. Here is a good article to introduce the full features of VSCode Live Share written by Microsoft, https://dev.to/lostintangent/visual-studio-live-share-in-pursuit-of-enjoyable-developer-collaboration-2nko

  1. Install Live Share
  2. Start Live Share
  3. Follow Participant
  4. Share Terminal
  5. Start Audio call

VS Code, Visual Studio Code, Live Share identifies a user by MS or Github account. You also can join as an anonymous with limited features. However, it’s better to have one of these accounts, to make full use of VS Code Live Share features;

  • Microsoft Account
  • Github Account

Install Live Share

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