teleren/devto huggingface dataset:
🎬CSS Text Typing Animation | HTML & CSS
Tags: tutorial, css, beginners, webdev
Published: 2021-08-26 20:47:01

In todays **tutorial** you’ll learn how to create a Simple Text Typing Animation using only HTML & CSS or Typewriter Text Animation.

---
{% youtube CqBEmgkR_fQ%}
---
Basically, this animation is created using JavaScript or jQuery library, but today I’ll show you how you can create this text typing animation using only HTML & CSS. 

---

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

```HTML
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Typing Text Animation | HTML & CSS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div class="static-txt">I'm a</div>
    <ul class="dynamic-txts">
      <li><span>Youtuber</span></li>
      <li><span>Designer</span></li>
      <li><span>Developer</span></li>
      <li><span>Freelancer</span></li>
    </ul>
  </div>
</body>
```

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

```CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "poppins", sans-serif;
}
body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #082032;
}
.wrapper {
	display: flex;
}

.wrapper .static-txt {
	color: #fff;
	font-size: 60px;
	font-weight: 400;
}

.wrapper .dynamic-txts {
	margin-left: 15px;
	line-height: 90px;
	height: 90px;
	overflow: hidden;
}

.dynamic-txts li {
	list-style: none;
	color: #ff4c29;
	font-size: 60px;
	font-weight: 500;
	top: 0;
	position: relative;
	animation: slide 12s steps(4) infinite;
}

@keyframes slide {
	100% {
		top: -360px;
	}
}

.dynamic-txts li {
	position: relative;
}

.dynamic-txts li::after {
	content: "";
	position: absolute;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #082032;
	border-left: 2px solid #ff4c29;
	animation: typing 3s steps(10) infinite;
}

@keyframes typing {
	40%,
	60% {
		left: calc(100% + 30px);
	}
	100% {
		left: 0;
	}
}
```
📚**Resources:**
 Pic used in the Project: https://bit.ly/37NxuuO
Why HTML is not a programming language ?? !!
Published: 2021-08-26 23:59:52

Is HTML a programming language?
As you know, html is one of the tools for site design. In fact, html is a symbol or markup language that is widely used in site design and can be used to create web pages that include photos, videos, music, videos, etc. .

Abbreviation for phrase
Hyper Text Markup Language
Becomes html !!

language:
Represents a sign language.
:Text:
Indicates that html is no more than a simple text file.
markup:
Indicates that html, unlike programming languages, lacks conditional statements, loops, and functions. Instead, this language has a simple structure called a tag.
In fact, html does not have one more type of command, and that is tags.

🚫Reasons that tell you why html is not a programming language!

No Programming Logic

No functions and variables

No Mathemathics

No if else statements

No data modifying

Can not take input and produce output

It's time to stop using html as a programming language 😉
`Proxy` all of the things! Part 1: Counters
Tags: javascript, webdev
Published: 2021-08-26 23:54:46

To celebrate the [long-overdue death of Internet Explorer](https://observer.com/2021/05/internet-explorer-is-officially-dead/), I'm writing a series of articles on a massively useful and underused API that's [available in every other mainstream JavaScript environment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#browser_compatibility): `Proxy`.

With a `Proxy`, you can "intercept and redefine fundamental operations" for an object, such as getters and setters.

Let's start with a simple example: **counters with a default value**.

Let's say you're implementing a simple algorithm to count the number of occurrences of each word in a text. In a language like Ruby, you could do that easily like this:

```rb
def word_counts(text)
	counters = Hash.new(0)
	
	text.split(/\W+/).each do |word|
		counters[word] += 1
	end

	counters
end

wc = word_counts 'a a a b b c' # {"a" => 3, "b" => 2, "c" => 1}
wc['a'] # 3
wc['d'] # 0
```

That `Hash.new(0)` is really neat: it gives us key-value pairs with a default value of `0` that we can increment from.

JavaScript objects, on the other hand, _can't_ be given a default value. Passing a parameter to an `Object` constructor instead converts that value itself into an object: `new Object(0)` returns [`Number {0}`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number), which isn't what we want at all.

However, we can easily mimic Ruby's `Hash.new` behavior with a proxy:

```ts
/**
 * @template T
 * @param {T} defaultVal
 * @returns {Record<string, T>}
 */
const hashWithDefault = (defaultVal) => new Proxy(
	Object.create(null),
	{
		get(target, key) {
			return target[key] ?? defaultVal
		},
	}
)
```

The `target` parameter passed to the getter is the proxied object itself — the first argument passed to the `Proxy` constructor. In this case, we use an empty object with no properties (not even those from `Object.prototype`), which we create using `Object.create(null)`.

As we didn't override `set`, setting simply works as normal — the property is set on that same `target`.

Our JavaScript `hashWithDefault(0)` now works very similarly to Ruby's `Hash.new(0)`. We can now easily and ergonomically write our word count function like this:

```ts
/** @param {string} text */
const wordCounts = (text) => {
	const counters = hashWithDefault(0)

	for (const word of text.split(/\W+/)) {
		counters[word]++
	}

	return counters
}

const wc = wordCounts('a a a b b c') // Proxy {a: 3, b: 2, c: 1}
wc.a // 3
wc.d // 0
```

Cool, no? In a future installment, we'll look at using `Proxy` with a setter function as well.
Game Programming Fundamentals
Tags: gamedev, programming, java, unity3d
Published: 2021-08-26 23:11:36

If you are looking for an answer to the question of “How to Develop a Game” , you have come to the right place. First of all, we are not going to talk about the need to learn a programming language or game engines to program video games, because developing a game is about much more than just coding and game engines. In fact, the game industry is a field that includes many different industries, including mathematics, art, psychology, and even cinema. In other words, it is never enough to just master game engines and learn a programming language. So what, exactly. do we need to know?

This beginner’s guide to video game development will cover everything you need to know to get started creating your own gaming software and apps.

Video Game Mechanics Explained
One of the biggest reasons why games reach huge audiences today has to do with game mechanics. In order to better understand what game mechanics are, we have to think of a game system. Imagine there are various sub-parts that this system controls. To picture this better, you can examine the diagram below:

Read More: https://hitechnoloy.ca/game-programming-fundamentals/
AdonisJS prldfiles
Tags: adonis, prldfile, startup, cron
Published: 2021-08-10 15:28:46

## Lets make AdonisJS run some code on start up
Super useful but often overlooked is being able to run code on start up with Adonis. This is great for starting up services like CRON jobs or event listeners. 

Adonis documentation describes how to do this in the context of their Events functionality so it can be a bit difficult to find unless you've read the whole documentation, hence this *very* short post!

### Setup
Adonis has something called prldfiles aka preload files. This is a file that can be "hooked" into the app ready event on start-up, once everything is up and running. Let's make one using the terminal

```
node ace make:prldfile someFile
```
Select your enviroments, in this case we want to select `During HTTP Server` using the space bar. 

This command will create a new file in your start folder as well as modify your `.adonisrc.js` file instructing the file to run when the HTTP server starts
```
📦 adonis-app
 ┣ 📂 app
 ┣ 📂 commands
 ┣ 📂 config
 ┣ 📂 contracts
 ┣ 📂 node_modules
 ┣ 📂 providers
 ┗  📂 start
   ┣ 📜 kernal.ts
   ┣ 📜 routes.ts
   ┗ 📜 someFile.ts <-- this is your new file 
```
In your `.adonisrc.js` you'll see this entry in the preloads property
```json
    {
      "file": "./start/someFile",
      "environment": [
        "web"
      ]
    },
```
### Examples
Ok now thats all setup lets get some code in there. open your `someFile.ts` and add a simple console log and run the server
```js
/*
|--------------------------------------------------------------------------
| Preloaded File
|--------------------------------------------------------------------------
|
| Any code written inside this file will be executed during the application
| boot.
|
*/

console.log('this is a preload file')
```
You'll notice your console log in there as there server starts. And that is basically it, you can now call any cron library, job queue or any code you desire. I use this all the time for starting Bull jobs with a cron schedule like so

`jobRunner.ts`
```js
/*
|--------------------------------------------------------------------------
| Preloaded File
|--------------------------------------------------------------------------
|
|   Job Runner simply creates a cron job on HTTP Server start
|
|--------------------------------------------------------------------------
*/

import Bull from '@ioc:Rocketseat/Bull'
import Job from 'App/Jobs/Getcustomer'
import Logger from '@ioc:Adonis/Core/Logger'

Logger.info('Preload Job Runner loaded')

Bull.add(new Job().key, data, {
  repeat: {
    cron: '* * * * *',
  },
})
```
Another use case for this is as described by the Adonis team making a Event router
https://docs.adonisjs.com/guides/events#usage

Hope this helps someone somewhere 👍
Tart up your terminal!
Tags: terminal, linux, macos
Published: 2021-08-26 22:51:25

In the last few blog entries i have about Ubuntu a lot. from building a dev environment from scratch all the way through to how it feels still using it a week on. As i'm getting more and more familiar with Linux again after so many years away from it i want to make my terminal look a little better :)

Now there is a lot of people who will say this is a waste of time and blah blah blah but its something i like doing, with the PHP and Laravel stuff i do i have a terminal window open pretty much all the time (so i don't need to open the IDE one) so making my terminal look nicer is just a personal preference.

Check out the full post: [Tart up that terminal](https://raspada-blog.co.uk/blog/tart-up-that-terminal)
How to build a Modal
Tags: webdev, javascript, html, css
Published: 2021-08-26 22:30:43

*A brief tutorial on how to build a modal using Javascript, HTML, and CSS.*
<br>

## What’s a modal?

Modals are pop-up windows or dialog boxes that display some sort of content above everything else on a web page. They usually are triggered by an event such as clicking on a button. They can also pop up automatically (which can be very annoying at times!). We’ve all probably come across one at some point while browsing the web. Many times they will display some content asking you for your email or to sign up for some sort of promotional offer. Well, today we won't be signing up for anything, we’ll be building one ourselves!

## Building a Modal

To build our modal we’ll be using plain ol’ Javascript, HTML, and, CSS. To start off we’re going to set up our HTML template. We’ll need several parts to make up our modal. An outer div element that we’ll label with the id overlay. This will be the window our modal box will sit on top of. The modal will contain all of the main content we want to be displayed once the modal opens, including a close button to hide the modal. We also need a button to actually trigger the modal to be opened. Lastly, we’ll link our CSS and Javascript files.
{% gist https://gist.github.com/CoderJay06/617ceee49d0e1427158401764f2730f5.js %}
Now we can add some styling to make our modal more visually appealing by styling our buttons and the actual modal itself.
{% gist https://gist.github.com/CoderJay06/f313d4213f4fe6a142cfabcc97b3e2f5.js %}
Let’s see what our closed modal is looking like so far.

![Green Contact Me button](https://cdn-images-1.medium.com/max/2000/1*9fRQuVRZ_h4Fy4X98_4Cng.png)

Looks great! Now we just have to hook it up using Javascript. We’ll need to listen for click events for when a user clicks the *Contact Me* button and when they close the modal.
{% gist https://gist.github.com/CoderJay06/705174a5d6ca8837c30687478528b0f3.js %}
This sets up the functionality for opening and closing our modal. Now when a user clicks on the *Contact Me* button our user will see the modal with all the contact details displayed.

![Modal with contact details](https://cdn-images-1.medium.com/max/2000/1*82mGQ5n1i7WHyiT-cNri9Q.png)

## Summary

Modals are meant to capture a user’s attention. When modals are triggered everything else on the page becomes temporarily deactivated. This creates an immediate focus on the information the modal is presenting. Sometimes this can enhance the user experience, other times it can do the exact opposite. It all depends on the use case and whether or not the modal presents useful content that’s relevant to the user.

## Learn more about Modals

* [Modal window (Wikipedia)](https://en.wikipedia.org/wiki/Modal_window)

* [How to create a Modal Box (W3 Schools)](https://www.w3schools.com/howto/howto_css_modals.asp)
Day 439 : Get Ready
Tags: hiphop, code, coding, lifelongdev
Published: 2021-08-26 21:53:38

_liner notes_:
- Professional : Had a few meetings today. Good thing I got a lot of stuff done yesterday. I did get a chance to work with Open API stuff. I've only done a little bit before, but got to do more this time. Got to demo an application I made showing some bugs were fixed and gave some feedback to the team.

- Personal : So last night, I noticed that the money I transferred to my crypto wallet finally made it into my account where I could use it to purchase the stuff I wanted to buy. Ordered the equipment and got confirmation, now to wait for my stuff to ship. Studied a little Japanese. Did some research on something I want to get into more in 2022. Watched the latest episode of Marvel's "What If...".

![A photo of Spirit Island, AB, Canada with a small island with a few pine trees in the middle of a lake, surrounded by more pine trees and mountains in the distance under very cloudy skies ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds0g2i52x2ksss1nj18m.jpg)

This week flew by! Going to work on this week's radio show. This time, I'm going to use my new laptop so that way I know I at least I have everything I need to get ready for the radio show. I'm looking to give my old laptop to my folks. I also want to work on my side project so I can do a quick demo of it for a meeting tomorrow night. Let's see how I can get done.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube XbKRWOh9GIA %}
#006: Ordenando resultados na pesquisa do Elasticsearch
Tags: elasticsearch, sort, search, hits
Published: 2021-08-26 21:45:28

Artigo super rápido e fácil. Vamos aprender a ordenar os resultados do Elasticsearch. 

```sh
GET customers/_search
{
  "query": {
    "match_all": {}
  },
  "sort": [
    {
      "age": "asc"
    }
  ]
}
```

A ordenação pode ser `asc` ou `desc`. Por padrão o Elasticsearch utiliza a propriedade `_score: desc`, ou seja do maior para o menor. Quando adicionamos qualquer outra propriedade a ordenação é ascendente, do menor para o maior. 

> ⚠️ **Atenção**:
> 
> Uma vez adicionado a ordenação o `_score` é null, uma vez que não será utilizado a relevância do documento.

O `_score` é o resultado do cálculo de relevância sobre a sua pesquisa, quanto maior `_score` mais relevante é o documento, iremos entender melhor nos próximos artigos.

Como podemos observar a ordenação é um array e podemos adicionar mais propriedade.

```json
"sort": [
  {
    "field1": "asc"
  },
  {
    "field2": "desc"
  }
]
```

Artigo super rápido, mas super importante no dia a dia.
Export from database table to Excel Workbook. Level 1
Tags: ruby, rails
Published: 2021-08-26 21:37:46

---
title: Export from database table to Excel Workbook. Level 1
published: true
tags: ruby, rails
canonical_url: https://blog.corsego.com/export-from-database-to-excel
---

Use the [gem caxlsx](https://github.com/caxlsx/caxlsx_rails) to download and format data into XLSX.

- XLS - proprietary Microsoft Excel format
- XLSX - free format

Gemfile

```
gem 'caxlsx'
gem 'caxlsx_rails'
```

/app/controllers/posts\_controller.rb

```
  def index
    respond_to do |format|
      format.html do
        @posts = Post.order(created_at: :desc)
      end
      format.xlsx do
        @posts = Post.all
        render xlsx: 'posts', template: 'posts/whatever'
      end
    end
  end
```

/app/views/posts/whatever.xlsx.axlsx

```
wb = xlsx_package.workbook

wb.add_worksheet(name: "Post") do |sheet|
  sheet.add_row ['name', 'creation date']
  @posts.each do |post|
    sheet.add_row [post.name, post.created_at]
  end
end
```

any view:

```
= link_to 'xlsx', posts_path(format: :xlsx), target: :_blank
```

That's it! Now you can export you posts to Excel!

Here is a more detailed article (that initially inspired me): [https://www.sitepoint.com/generate-excel-spreadsheets-rails-axlsx-gem/](https://www.sitepoint.com/generate-excel-spreadsheets-rails-axlsx-gem/)
JS13K: A journey through music (Day 11/12/13/14) 😧
Tags: javascript, challenge, devjournal, gamedev
Published: 2021-08-26 21:28:21

Well.

On these days I didn't manage to do much honestly.

I lost faith on my idea and I manage to learn only a grasp about oscillators. I have to study vectorial art as well.

For that I have to hurry and make something right after I have the idea, but I think to create something more based on randomization since the 13 KB limit.

Have a good day! Hope to update you soon.
How to deploy Node server on Apache2
Tags: aws, apache2, server, node
Published: 2021-08-26 21:15:00

I'm assuming that you have built an website on React/Next/Angular or Vue.js and looking for deployment process on aws or some cloud.Let's go let's deploy your code on apache2 using PM2.

Tools used here:
Node 
Frontend Frameworks
PM2
Apache2


Code and build a website in 
- React
- Next.js
- Angular
- Vue,js

There are two types of website
- Static
- Dynamic

Assuming that you know how to create a website, and build and run on local, let's move it to the internet.If don't have any idea about building website comment it I'll guide you to the clouds.

Methods to deploy 
- Netlify
- Github
- Gitlab
- AWS EC2
- Heroku

Today we will deploy Node server on apache2 

### Deploy on Apache2

Install PM2

```bash
sudo npm install -g pm2
```

Build your server files:

Assuming that you have code of some website on react.js/next.js/angular.js or Vue.js as far it builds and runs on npm it will fly.

```bash
npm run build
```

Start or Run node server with pm2 

```bash

pm2 start npm --name "app-name" -- start
```

Install Apache2 server

```bash
sudo apt install apache2
```

The Apache web server will be operating as a reverse proxy. Requests to it will be proxied to the backend NodeJS applications, managed by PM2. In order for Apache to proxy requests, the following modules must be installed and enabled.

```bash
sudo en2mod proxy
sudo a2enmod proxy_http
```

Restart the apache server

```bash
sudo service apache2 restart
```

Add running node server configuration on apache2 

cd into /etc/apache2/site-available 

and make file server.conf

```bash
cd /etc/apache/site-available

sudo nano domain.conf

OR 

sudo nano /etc/apache2/sites-available/domain.conf
```

### Port 80

```bash
<VirtualHost *:80>
    ServerName domain.com
    ServerAlias www.domain.com

    ProxyRequests Off
    ProxyPreserveHost On
    ProxyVia Full

    <Proxy *>
        Require all granted
    </Proxy>

    ProxyPass / http://127.0.0.1:3000/
    ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>
```

### Port 443 - Secure

```bash
<VirtualHost *:443>
    ServerName website.com
    ServerAlias *.website.com
    ProxyPreserveHost on
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
    LogLevel warn
    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" **%T/%D**" combined
    ErrorLog /home/ubuntu/website/error.log
    CustomLog /home/ubuntu/website/access.log combined
    SSLEngine on
    SSLCertificateFile /etc/ssl/website.tech.crt
    SSLCertificateKeyFile  /etc/ssl/website.tech.key
</VirtualHost>
```

Here :

 SSLEngine on 

Add your own certificate key-pair

and stream your log file on custom location /home/ubuntu/website/error.log and /home/ubuntu/website/access.log 

### Enable the newly created configuration

```bash
sudo a2ensite domain.conf
```

### Restart the server

```bash
sudo service apache2 restart
```

Go to [website.com](http://website.com) your custom domain.

Your website is deployed !!!
I built an extension to manage my inspiration from Dribbble, Behance, and Uplabs. 
Tags: javascript, tailwindcss, react
Published: 2021-08-26 21:12:14

Hey, y'all! 🤓

After building [my first extension](https://dropin.versoly.com/) a few months ago, I decided to do it again and do something that would help me (again).

I love coding, but I'm terrible with the design piece of anything that I try to build. 😅

### What do I do when I want to build something

1.  Go to Dribbble, Behance, and Uplabs.
2. Search for what I'm trying to build (an audio app, a Desktop app...)
3. Open hundreds of shots that I think are interesting.
4. Save them to my special folder "Idea #XXX💡" with a descriptive title: "nice navbar"/ "great buttons" / "nice hero section"
5. Keep the ones I like the most

### My solution

Since this is really boring and I'm constantly looking for inspiration there, I decided to put everything in one place.

Meet, **[Inspiring Board](https://chrome.google.com/webstore/detail/inspiring-board/ccnoapmidfaoglgpomngomeojjdbpnih).**

> ⚡️ Browser extension with a dashboard where you can add shots from Dribbble, Behance, and Uplabs.

Super simple, no ads, and all data stored locally. 😬


I even did a promotional video:
{% youtube JKZOHqLGIDs %}



### The stack
I used [this boilerplate](https://github.com/lxieyang/chrome-extension-boilerplate-react).
That comes with React, Webpack, and some nice dev tools.
I just added **TailwindCSS** on top of it. 😄



I have a ton of ideas to improve, but if you give it a try, please let me know your feedback.

Bye!