Web page similar to keycode.info

You can use the running version of this project at https://polatengin-madrid.netlify.com/

The reason I made this project;

• To learn how to inject javascript and css into an html page by configuring Webpack and PostCSS

• Experience and understand how browsers are processing keyboard events

• Create and run a pipeline with GitHub Actions

• Gain the habit of project development within Visual Studio Code DevContainer

Technologies I used in this project are;

• Typescript
• WebPack
  • PostCSS
• GitHub Actions
• Docker
• Netlify
• DevContainers

To create the project, let's run the following command in an empty directory

npm init --force

Now, open a Terminal window and run the following command to add the keycode npm package to package.json

npm i keycode --save

Now, we can require the keycode module in src/index.ts

const keycode = require('keycode');

By attaching to the keydown event of the window global object, we can capture all the pressed keys in the entire browser window.

window.addEventListener('keydown', (e) => {
});

By calling the stopPropagation() and preventDefault() methods in the event handler, we prevent the keys from being processed by the browser.

var index = document.createElement('li');
index.innerHTML = `${currentIndex}`;

var key = document.createElement('li');
key.innerHTML = keycode(e);

var keyCode = document.createElement('li');
keyCode.innerHTML = `${e.keyCode}`;

var shift = document.createElement('li');
shift.innerHTML = e.shiftKey ? '✓' : '⨯';

var control = document.createElement('li');
control.innerHTML = e.ctrlKey ? '✓' : '⨯';

var alt = document.createElement('li');
alt.innerHTML = e.altKey ? '✓' : '⨯';

var item = document.createElement('ul');
item.appendChild(index);
item.appendChild(key);
item.appendChild(keyCode);
item.appendChild(shift);
item.appendChild(control);
item.appendChild(alt);

article.insertAdjacentElement('afterbegin', item);

So, even if the keys like F5, F12 are pressed, the browser will not process them.

We add the required html code into the ./src/index.html file so that a table will appear on the screen.

<main class="row title">
  <ul>
    <li>#</li>
    <li>Key</li>
    <li>Key Code</li>
    <li>Shift</li>
    <li>Control</li>
    <li>Alt</li>
  </ul>
</main>
<article class="row item">
</article>

Also, we're providing the same editor settings to the developers (space/tab, end-of-line-character, etc.) with the .editorconfig file.

In the tsconfig.json file, we give the compilerOptions.outDir property value of ./dist, so that when the webpack compiles, the compiled files will be created in the ./dist folder.

In the ./src/index.ts file, we capture all keydown events via the window.addEventListener() method.

We use the following two lines to prevent any keydown events we capture from being captured by the browser.

e.stopPropagation();
e.preventDefault();

We added the following plugins into the webpack.config.js file

• With CopyWebpackPlugin, we can copy files based on their extensions

• With HtmlMinifierPlugin, we can compress the html files

• With HtmlWebpackPlugin, the bundle.js file that is generated by compiling the ts files, and it's added into the index.html file

Also, with the hash option of the HtmlWebpackPlugin plugin, we added the compiled ts files into the index.html as bundle.js?{HASH}.

Thanks to Multi-Layered Dockerfile, we compile the project in node:13.10.1-buster image, then move all compiled files to nginx:1.17.0-alpine image and expose them.

At the end, we have a Docker Image that takes about 20MB in size.