Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/polatengin/rome
Matrix style rundown
https://github.com/polatengin/rome
devcontainer dockerfile github-actions netlify typescript webpack
Last synced: about 1 month ago
JSON representation
Matrix style rundown
- Host: GitHub
- URL: https://github.com/polatengin/rome
- Owner: polatengin
- License: mit
- Created: 2019-08-18T15:41:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T15:25:56.000Z (5 months ago)
- Last Synced: 2024-10-31T08:29:36.706Z (3 months ago)
- Topics: devcontainer, dockerfile, github-actions, netlify, typescript, webpack
- Language: Dockerfile
- Homepage: https://polatengin-rome.netlify.com/
- Size: 3.48 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Matrix-style rundown
[](https://app.netlify.com/sites/polatengin-rome/deploys)
[](https://github.com/polatengin/rome/workflows/ci-and-cd)
You can use the running version of this project at [https://polatengin-rome.netlify.com/](https://polatengin-rome.netlify.com/)
The reasons 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)
* To understand the steps of loading and using a custom font into a web page
* Create and run a pipeline with [GitHub Actions](https://github.com/features/actions)
* Gain the habit of project development within [VS Code DevContainer](https://code.visualstudio.com/docs/remote/containers)
* Develop _keyframe_ animations with _CSS_
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
```
First of all, we're gonna create [./src/index.html](./src/index.html) file and then add a _div_ element in it with `scene` _id_ value.
```html
```
Now we can create [./src/index.css](./src/index.css) file and make all _body_ element has [Matrix Code NFI](https://www.cufonfonts.com/font/matrix-code-nfi) as font.
```css
@font-face {
font-family: 'Matrix Code NFI';
font-style: normal;
font-weight: normal;
src: local('Matrix Code NFI'), url('matrix_code_nfi.woff') format('woff');
}
body {
margin:0;
padding: 0;
background-color: #000;
font-family: 'Matrix Code NFI';
font-size: 3em;
overflow: hidden;
}
```
Also, we need to define _keyframe_ animation in the [./src/index.css](./src/index.css) file and we'll apply the animation to all elements that have `.fall-down` css class.
```css
@keyframes fall-down {
from {
transform: translateY(-2em);
}
to {
transform : translateY(100vh);
}
}
.fall-down {
animation: fall-down 3s linear forwards;
}
```
Now, we can create [./src/index.ts](./src/index.ts) file, we're gonna have have 2 main methods in this file.
* `createRunDownColumn()` method will create columns
```typescript
function createRunDownColumn(): HTMLDivElement {
const div = document.createElement('div');
div.className = 'column';
scene.appendChild(div);
return div;
}
```
* `createRunDownAnimation()` method will add rundown animations in columns.
```typescript
function createRunDownAnimation(div: HTMLDivElement) {
const interval = (Math.random() * 10) + 200;
setInterval(() => {
let randomCharacter = 32;
if (Math.random() > 0.45) {
randomCharacter = Math.floor(Math.random() * 25) + 97;
}
const span = document.createElement('span');
span.style.opacity = (Math.random() + 0.2) + '';
span.innerText = String.fromCharCode(randomCharacter);
span.className = 'fall-down';
if (Math.random() > 0.85) {
span.classList.add('white');
}
div.insertBefore(span, div.firstChild);
let spans = div.getElementsByTagName('span');
for (let index = spans.length - 1; index >= 20; index--) {
div.removeChild(spans[index]);
}
}, interval);
}
```
All we need to do is calling `createRunDownAnimation()` method as much as we want.
```typescript
for (let index = 0; index < columnCount; index++) {
const div = createRunDownColumn();
createRunDownAnimation(div);
}
```
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 a value of `./dist`, so that when the [webpack](https://webpack.js.org/) compiles, the compiled files will be created in the `./dist` folder.
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_ and _Multi-Staged_ [Dockerfile](./Dockerfile), we compile the project on [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.
In the end, we have a _Docker Image_ that takes about _20MB_ in size.
If you want to try it on your machine;
```bash
git clone https://github.com/polatengin/rome.git
cd rome
docker build -t rome:latest .
docker run -d -it -p 8080:80 rome:latest
```
or
```bash
docker run -d -it -p 8080:80 polatengin/rome:latest
```
