Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/polatengin/madrid
Web app similar to keycode.info
https://github.com/polatengin/madrid
devcontainer dockerfile github-actions keycodes netlify typescript webpack
Last synced: about 1 month ago
JSON representation
Web app similar to keycode.info
- Host: GitHub
- URL: https://github.com/polatengin/madrid
- Owner: polatengin
- Created: 2019-06-18T22:47:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T15:25:41.000Z (5 months ago)
- Last Synced: 2024-10-31T08:30:07.761Z (3 months ago)
- Topics: devcontainer, dockerfile, github-actions, keycodes, netlify, typescript, webpack
- Language: Dockerfile
- Homepage: https://polatengin-madrid.netlify.com/
- Size: 58.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web page similar to [keycode.info](https://keycode.info)
[](https://app.netlify.com/sites/polatengin-madrid/deploys)
[](https://github.com/polatengin/madrid/workflows/ci-and-cd)
You can use the running version of this project at [https://polatengin-madrid.netlify.com/](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](https://github.com/webpack/webpack) and [PostCSS](https://github.com/postcss/postcss)
* Experience and understand how browsers are processing keyboard events
* Create and run a pipeline with [GitHub Actions](https://github.com/features/actions)
* Gain the habit of project development within [Visual Studio Code DevContainer](https://code.visualstudio.com/docs/remote/containers)
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
```bash
npm init --force
```
Now, open a _Terminal_ window and run the following command to add the `keycode` npm package to [package.json](./package.json)
```bash
npm i keycode --save
```
Now, we can _require_ the `keycode` module in [src/index.ts](./src/index.ts)
```typescript
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.
```typescript
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.
```typescript
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](./src/index.html) file so that a table will appear on the screen.
```html
- #
- Key
- Key Code
- Shift
- Control
- Alt
```
Also, we're providing the same editor settings to the developers (_space/tab_, _end-of-line-character_, etc.) with the [.editorconfig](./.editorconfig) file.
In the [tsconfig.json](./tsconfig.json) file, we give the `compilerOptions.outDir` property value of `./dist`, so that when the [webpack](https://webpack.js.org/) compiles, the compiled files will be created in the `./dist` folder.
In the [./src/index.ts](./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.
```typescript
e.stopPropagation();
e.preventDefault();
```
We added the following `plugins` into the [webpack.config.js](./webpack.config.js) file
* With [CopyWebpackPlugin](https://webpack.js.org/plugins/copy-webpack-plugin/), we can copy files based on their extensions
* With [HtmlMinifierPlugin](https://www.npmjs.com/package/html-minifier-webpack-plugin), we can compress the html files
* With [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/), the `bundle.js` file that is generated by compiling the `ts` files, and it's added into the [index.html](./src/index.html) file
Also, with the [hash](https://github.com/jantimon/html-webpack-plugin#options) option of the [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) plugin, we added the compiled ts files into the [index.html](./src/index.html) as `bundle.js?{HASH}`.
Thanks to Multi-Layered [Dockerfile](./Dockerfile), we compile the project in [node:13.10.1-buster](https://hub.docker.com/_/node/) image, then move all compiled files to [nginx:1.17.0-alpine](https://hub.docker.com/_/nginx/) image and expose them.
At the end, we have a _Docker Image_ that takes about _20MB_ in size.
