teleren/devto huggingface dataset:
Some Cool CSS Hover Animations found....
Tags: css, html, webdev, tutorial
Published: 2022-04-08 14:24:21

Here we few cool CSS Hover animations found on internet....

Here are the 10 cool CSS animations

1. Bubble coloring button

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0eyr9wtvlvqerbv14on.png) 
Code: 
https://codepen.io/comehope/pen/eKqZjy

2. Animated button with rainbow hover #pride

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ib0kn6gnaewm3351apia.png)
Code: 
https://codepen.io/althi/pen/eKdmaa

3. Button Hover Effect

![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwglgl6apaqt8q8exw0v.png)
Code: 
https://codepen.io/dan10gc/pen/LzLwWp

4. Stylized Buttons

![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tm1i4dl9v7wa9nhrz4rp.png)
Code: 
https://codepen.io/perry_nt/pen/eVboze

5. Click Me

![5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trgw51qbmnz1aq9ks7yi.png)
Code: 
https://codepen.io/avstorm/pen/oqKbLq


6. BUTTON HOVER EFFECT

![6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7a3c9zc8m4vxlmtmllq.png)
Code: 
https://codepen.io/abadu/pen/YxJgoe

7. CSS Background Color Change on Hover

![7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhhdxwvndxg5p8euqbjw.png)
Code: 
https://codepen.io/ianfarb/pen/neEWbP

8. EC card hover

![8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ht5uvajzm08xhx50ynhm.png) 
Code: 
https://codepen.io/jorgesanes10/pen/QdMEXr

9. Caption Hover Effects

![9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vo9aljpf6waff1gflko.png)
Code: 
https://github.com/codrops/CaptionHoverEffects

10. Tessellations eCommerce

![10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u92za0jxl06p8oujqhe6.png)
Code: 
https://codepen.io/andybarefoot/pen/VwZjVma


For More CSS Hover Animations Follow bellow links:
https://freefrontend.com/css-button-hover-effects/
https://csshint.com/css-hover-effects/

Thanks
Happy Coding :)
Day 4: Speedrunning jQuery in 1 hour
Tags: 100daysofcode, beginners, webdev, javascript
Published: 2022-04-08 14:22:26

*The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post*

## Editing HTML through jQuery

Up to this point, we have edited its properties, and its CSS styles. Now we're finally learning HTML manipulation with jQuery.

Firstly, `text()` and `html()` functions.
```js
$("#textblock1").text("🍰 ipsum dolor sit amet ice cream.");
$("#smol-text").html("<em>A wild Pokemon appears.</em>");
```
They add contents inside of the targeted element. The difference is that `text()` only allows plain text, while `html()` allows HTML tags to be rendered (kinda unsafe against [XSS](https://owasp.org/www-community/attacks/xss/)).

Secondly, `remove()`, `appendTo()`, and `clone()`.
```html
<div id="food">
    <p id="joe">Mama</p>
</div>

<p id="dessert">Crepe, mousse, parfait, etc.</p>
<p id="people">kids 🙌</p>

<script>
    $("#joe").remove(); // remove JOE MAMA
    $("#dessert").appendTo("#food"); // Move dessert into food
    $("#people").clone().appendTo("#food"); // Put kids as foods
</script>
```
Note that `clone()` don't actually *duplicate* them, it's mostly used with `appendTo()` to actually work.

And thirdly, `parent()` and `children()`.
```js
$("p").parent().css("background-color", "black");
$("body").children().css("color", "pink");
```
`parent()` refers to its direct parent, and `children()` refers to *all* of its children (Hint: children in plural).

What's amazing is how to refer to specific elements in a class or element type. Here we can use this (kinda unknown to me) CSS selector: `element:nth-child(n)`, where `element` is a class or element type, and `n` is a number (which is one-indexed, so gonna remember that 😉).
```js
$("body:nth-child(3)").text("I'm number 3 lol");
```
Or if you feel fancy, use `:odd` or `:even`:
```js
$(".list:odd").css("background-color", "red");
$(".list:even").css("background-color", "blue");
```
This count is *zero-indexed*, which must be remembered.

## Afterwords

Yay, I got a lot done today 🥳. A productive day indeed. We're gonna do SASS next, which is short, and I'm already using it. Gonna plow through it (and maybe even add a bit of React tomorrow! 👀)

Follow me on [Github](https://github.com/Kemystra)!
Also on [Twitter](https://twitter.com/kemystra)!
🕵🏽 Debug VS Code Keyboard Shortcuts
Tags: vscode, productivity, debugging
Published: 2022-04-08 14:20:44

_Sharing an article I originally wrote [here](https://www.upsync.dev/2022/04/08/vs-code-keybindings.html)_

## Problem
* Whilst using VS Code my `Cmd` + `N` keyboard shortcut stopped creating a new file
* I was stumped on how to figure out what was causing the issue

## Solution
* Looking around on Stack Overflow people suggested looking at the Keybindings as installed plugins can cause keyboard shortcut conflicts
* In VS Code go to `Preferences` > `Keyboard Shortcuts`
* Whilst poking around here I discovered a handy little feature of VS Code where you can type a keyboard shortcut and find out what it's mapped to.
* You just have to click the little keyboard icon (1)
![VS Code Keyboard Shortcut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swtx93ero6gzebn6puya.png)
* I typed in `Cmd` + `N` and lo and behold it popped up with two entries and I found the source of the conflict and deleted the conflicting one

👋 Hope it helps someone figure out their issues. If you'd like to keep up with technical blog posts on a variety of topics please feel free to join me on [upsync.dev](https://www.upsync.dev/) 😎
Autism and UI/UX
Tags: webdev, a11y
Published: 2022-04-08 14:14:44

When most people think about accessibility in product design, web design, and other fields, they might think about those with visual disabilities, or those in a wheelchair. However there are many other disabilities and divergencies that might need accommodating. This month, April, is National Autism Awareness Month in the United States. I was interested to learn what autistic people had to say about their accessibility needs. 

One main symptom of autism is sensory processing difficulties or differences. This means that autistic people interpret sensory input such as sounds, textures, or visual data differently. In some cases, this sensory input can become overwhelming, leading to fatigue, anxiety, meltdowns or shutdowns. Autistic people and their advocates have written about ways to prevent this reaction through UI/UX design. Livingautism.com, a British site, wrote that people on the autism spectrum "have difficulty interacting with text-heavy or cluttered web pages, so clearly delineated text areas, simple page design and clear images go a long way. Pop up elements and complicated image overlays are best avoided, while simple navigation and clear page identifiers will help the user feel more comfortable and in control of their web experience." Although these tips are designed to help those with autism, they are also good advice for more general audiences. 

One thing I saw repeated in several articles and blog posts about this subject was the important of customization. With accessibility, it is probably impossible to accommodate everyone with one design. That is why responsive design, breakpoints, and buttons to adjust things like text size are so useful.
What to do as a junior programmer to be better for a job?
Tags: discuss, beginners, webdev, programming
Published: 2022-04-08 13:59:03

## My story
I'm a 21 years old programmer and software engineering student, but everyday living in this country is like hell to me and I'm trying hard to get out of here as soon as my study finishes.
I worked for more than a year for a company but at last they didn't pay me a penny and they stole my codes, after that I decided to get out of this country as soon as possible. sometimes I wonder what if I was born in a first world country.

## The question
 I'm sorry about the sad story above but as a junior programmer i try hard everyday to be better and learn things that will help me to apply for a visa sponsorship job after my study so here is my question: **What should I do more to be better?**

## Final words
Again sorry for the sad story and if you have a summer internship opportunity in your company that is not remote i'll be happy to apply.
My portfolio: [https://westernal.me/](https://westernal.me/)
svelte-i18next
Tags: svelte, javascript, webdev, programming
Published: 2022-04-08 13:32:09

Presenting the svelte wrapper for i18next.
This library, based on i18next, wraps an i18next instance inside a svelte store and observes the i18next events like `languageChanged`, `resource added`, etc. to be able to render our svelte components.

## Package:
{% embed https://www.npmjs.com/package/svelte-i18next %}

## GitHub:
{% embed https://github.com/NishuGoel/svelte-i18next %}

The implementation looks like this:
The package creates a Svelte writable of i18next and listens to the events triggered by any updates on the i18next instance.
For example, if an application loads a new namespace for their translations, the svelte_i18next package will trigger the
`i18next.on(‘loaded’, function(loaded) {})` event.
Check the [i18next](https://www.i18next.com/overview/api#events) events here.

Usage:
_i18n.js_


```
import i18next from "i18next";
import { createI18nStore } from "svelte-i18next";

i18next.init({
   lng: 'en',
   resources: {
     en: {
       translation: {
         "key": "hello world"
       }
     }
   }
});

export const i18n = createI18nStore(i18next);
```

_App.svelte_

```
<script>
  import i18n from './i18n.js';
</script>

<div>
    {$i18n.t('key')}}
</div>
```

See a example usage here: [Svelte example](https://github.com/NishuGoel/svelte-i18next/tree/main/example)
You could also use namespaces as you would using i18next and the svelte wrapper will re-render the translations based on the namespace provided.

```
import { createI18nStore } from 'svelte-i18next'
const i18n = createI18nStore(i18n_instance) 
i18n.loadNamespaces(['example']) // this triggers the re-render and loads translations from the provided namespace.
<div>
    {$i18n.t(key)}
</div>
```

Into svelte? Dealing with localisation?

## [Show some love @svelte-i18next](https://twitter.com/intent/tweet?text=%40sveltejs%20wrapper%20for%20i18next%20%0Ahttps%3A%2F%2Fgithub.com%2FNishuGoel%2Fsvelte-i18next%0Avia%20%40TheNishuGoel%20%20&hashtags=i18next,sveltejs,svelte,javascript,webdev) ❤
What is Github Actions? How does it simplify CI/CD?
Tags: devops, devjournal, devrel, cloud
Published: 2022-04-08 13:29:22

## Github Actions 

**Github Actions** is a Continuous Integration and Continuous Development(CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.

GitHub Actions goes beyond just DevOps and lets you run workflows when other events happen in your repository.   
For example, you can run a workflow to automatically add the appropriate labels whenever someone creates a new issue in your repository.

- GitHub Actions makes it easy to automate all your software workflows, with CI/CD. 
  - Build, test, and deploy your code right from GitHub. 
  - Make code reviews, branch management, and issue triaging work the way you want.  

- Workflow is triggered by an event.
  - Workflow contains jobs which can have multiple steps - Each step can be associated with an action or a script.  

- Code - defined workflow - 
  - A workflow can contain actions created by the community, or you can create your own actions directly with your application's repository.  

- Support for Python, Java, Node.js, Ruby, PHP, Go, Rust, .NET apps.  

- Great starting point for smaller projects.

- Deploy to cloud.  

I have added a github actions workflow in my personal website repository to automate random changes and commits and run the workflow to deploy the changes successfully. You can checkout the repository [here](https://github.com/abrahamalen/alen-abraham.github.io).  

Thank you for the read.
[Conceito] - Vertical & Horizontal Scaling de Bancos Relacionais
Published: 2022-04-08 13:14:06

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1512206396783177730)

---

Dev,

Conhecer possibilidades de escalonamento de bancos relacionais é um assunto fundamental!

Só escala verticalmente? Dá pra escalar horizontalmente tbm?

Hoje vamos conhecer a história de Amy e como as dificuldades a fizeram muito mais forte.

cc @sseraphini @_amyport
 
🧵

![img](https://pbs.twimg.com/media/FPxvs9eVsAcDN-v?format=png&name=900x900)

---

Amy era uma típica banco de dados relacional muito tranquila, com um padrão de acesso equilibrado entre leituras e escritas.

Atendia muito bem a uma demanda pequena.

![img](https://pbs.twimg.com/media/FPxvtT5VsBU5BBN?format=jpg&name=large)

---

Um dia, Amy ficou sabendo que a empresa onde trabalhara receberia alguns bilhões de investimento e isso faria com que o padrão de acesso fosse alterado drasticamente.

Amy sabia de suas limitações – era pequena para tal demanda.

![img](https://pbs.twimg.com/media/FPxvt0aVsAwmgYx?format=jpg&name=large)

---

Amy era muito estudiosa e manjava dos paranauês – logo colocou-se a pensar numa solução.

Com a expansão da empresa, o padrão de acessos seria diferente. A demanda por escrita seria intensa e constante. Entretanto, a demanda por leitura seria sazonalmente intensa.

---

Amy sabia que para escrita é muito complicado escalar um banco relacional horizontalmente (adicionar novos nós); sabia que teria que escalar verticalmente para poder atender a alta demanda de escrita.

Começou a malhar loucamente para crescer e ganhar mais CPU, Memória, Disco.

![img](https://pbs.twimg.com/media/FPxvuo9VsAMmCKW?format=jpg&name=medium)

---

Amy – que agora era Maromba – ainda precisava resolver a questão da sazonalidade das leituras intensas.

---

Amy Maromba sabia que, ao contrário da escrita, para leitura era possível adicionar nós conforme necessário para distribuir a carga. Ela sabia que poderia escalar horizontalmente para leitura, pois existem mecanismos de sincronização de dados para as instâncias!

![img](https://pbs.twimg.com/media/FPxvvW9VsBkmNip?format=png&name=small)

---

Além do mais, Amy sabia da necessidade de segregar as conexões que seriam para leitura e para escrita. Um load balancer talvez fosse uma boa solução – pensou.

---

Depois de pronta a solução, Amy olhou orgulhosa para seu trabalho – ela sabia que tinha resolvido o problema que o crescimento traria.

![img](https://pbs.twimg.com/media/FPxvv_9VsA0xCSA?format=jpg&name=4096x4096)

---

Essa thread foi inspirada numa entrevista que fiz anos atrás em que uma das perguntas foi "Como você escalaria um banco de dados relacional?" Respondi seco "Verticalmente!". Senti que alguma coisa estava errada em minha resposta. Ela estava apenas meio certa.

---

Gostaria de agradecer imensamente a 
[@_amyport](https://twitter.com/_amyport) por ter topado pagar esse mico e pelas ideias! Segue ela também.

E você dá um abraço aqui por ter lido tudo! 🤗
Daytime Protocol RFC-867 in Golang
Tags: go, networking, protocols
Published: 2022-04-08 12:54:05


---
canonical_url: https://dpnkr.in/blog/daytime-protocol-golang
description: Implementing Daytime Protocol RFC-867 in Golang.
---

> Daytime service is a useful debugging and measurement tool. A daytime
> service simply sends a current date and time as a character string
> without regard to the input.
> Based on [RFC-867](https://tools.ietf.org/search/rfc867)



We will be building a Daytime service using TCP in this short example. We will create a server listening for TCP connections on TCP port 13, after the connection is established we will send back the date response.

Sounds easy? Because it is! I have ignored handling errors in the code to make it simple.

```go
package main

import (
  "net"
  "time"
)

func main() {
  addr := ":13"
  tcpAddr, _ := net.ResolveTCPAddr("tcp", addr)
  // listens on PORT 13
  listener, _ := net.ListenTCP("tcp", tcpAddr)
  for {
    // wait for client to connect
    // when client connects, the accept call returns connection
    conn, err := listener.Accept()
    if err != nil {
      continue
    }
    daytime := time.Now().String()
    // writes data to the connection
    conn.Write([]byte(daytime))
    conn.Close()
  }
}
```

Then run this code and test it out using `telnet` you will see the response.

```bash
telnet 127.0.0.1 13
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j84qxo2qvb4czd6o2cxc.gif)

Hope you’ve learned something new, thanks for reading this tiny blog!
PlannedBudgetLimits Cloudformation Example
Tags: aws, cloudformation, finops
Published: 2022-04-08 12:46:41

While working with an enterprise finance department to establish planned budget alarms in their multi-account environment, I reached for Cloudformation to help me avoid manually entering 1200 monthly budgets. 

The AWS documentation for planned budgets is fine, but the lack of an example and some explicit call-outs caused me to spin wheels while trying to find examples that would explain the error messages I kept getting. 

It's my hope the following sample will prove helpful to anyone else trying to do the same: 

```
Resources:

  # If you're managing multiple accounts, you'll probably want this resource name
  # to reflect the name of the target account.

  BudgetAccountNameHere:
    Type: "AWS::Budgets::Budget"
    Properties:
      Budget:
        TimeUnit: MONTHLY
        BudgetType: COST
        PlannedBudgetLimits:
          # Unix Timestamp of Start of Month, UTC.
          # You must provide a full 12-month list, starting with the current month.
          "1648771200":
            Amount: 100.00
            Unit: USD
          "1651363200":
            Amount: 100.00
            Unit: USD
          "1654041600":
            Amount: 100.00
            Unit: USD
          "1656633600":
            Amount: 100.00
            Unit: USD
          "1659312000":
            Amount: 100.00
            Unit: USD
          "1661990400":
            Amount: 100.00
            Unit: USD
          "1664582400":
            Amount: 100.00
            Unit: USD
          "1667260800":
            Amount: 100.00
            Unit: USD
          "1669852800":
            Amount: 100.00
            Unit: USD
          "1672531200":
            Amount: 100.00
            Unit: USD
          "1675209600":
            Amount: 100.00
            Unit: USD
          "1677628800":
            Amount: 100.00
            Unit: USD
        CostFilters:
          LinkedAccount:
            - YOUR_ACCOUNT_ID_HERE
      NotificationsWithSubscribers:
        - Notification:
            NotificationType: ACTUAL
            ComparisonOperator: GREATER_THAN
            Threshold: 99
          Subscribers:
            - SubscriptionType: EMAIL
              Address: YOUR_EMAIL_HERE
```
Dev.to VS Hashnode VS Medium: Pick ONE
Tags: devto, hashnode, devjournal, discuss
Published: 2022-04-08 12:46:31

In the world of writing articles to share our knowledge, experience, learning from the community, which of the three popular developer platforms do you prefer?

All are wonderful sites and hold much value in their own ways. Each of the three have a magnificent community that could never be replaced. But if you had to choose one and only one to stick by for the rest of your developer career - to learn from, to share on, etc. - which would it be and why?

Happy coding!
Learn the latest software development trends that can bring value to your business in 2022 and beyond.
Tags: softweare, development, trends
Published: 2022-04-08 12:44:55

An unstoppable digital transformation has already affected hundreds of spheres, from supply chain management, e-commerce, public sector, to fintech, healthcare, and retail. Companies worldwide strive to embrace the latest tech to remain competitive, increase customer loyalty, and accelerate revenue streams.

The business world is transforming in front of our very eyes, due to daily upgrades of what automation and software development can do. Amidst this change, a true entrepreneur understands how crucial it is to keep their hands on the pulse of tech breakthroughs. After all, if you do not deliver a product that is fresh and reflective of where the industry’s headed – someone else will.

The knowledge of new technological possibilities is a useful element of your company’s toolbox and a valuable weapon in the competitive market. So, let us sharpen that blade with a top ten of software development trends for the nearest future.

Read software development trends at article: [https://innovecs.com/blog/software-development-trends/](https://innovecs.com/blog/software-development-trends/)
How the TypeScript Extract Type Works
Tags: typescript, javascript, webdev, tutorial
Published: 2022-04-08 12:43:50

The `Extract` utility type lets us check a union type for a specific members, and returns a new type based on what is left over. It's quite [similar in format to the Exclude type](https://fjolt.com/article/typescript-exclude-type).

Let's find out how it works.

### Utility Types
Utility Types are types defined in TypeScript to solve particular problems. If you're new to defining custom types in TypeScript, read my [guide on defining custom types here](https://fjolt.com/article/typescript-creating-custom-types).

## How the Extract Type works in TypeScript
In TypeScript, we can define a specific type called a union type. A union type is a list of possible values for something. An example is shown below, where the type myUnionType means variables and other outputs can only be one of four values: 🥒, 🥔, 🌶 or 🌽

```javascript
type myUnionType = "🥒" | "🥔" | "🌶" | "🌽"

// This works since 🥒 is a member of "🥒" | "🥔" | "🌶" | "🌽"
let myFirstVariable:myUnionType = "🥒"

// This doesn't work since "my-string" is NOT member of "🥒" | "🥔" | "🌶" | "🌽"
let mySecondVariable:myUnionType = "my-string"
```

### The Extract Type
If we want to remove specific elements from a union type, we can use the [Exclude Type](https://fjolt.com/article/typescript-exclude-type) - but there are other ways we can manipulate union types.

The Extract Type lets us define a new list, and returns a new type if any items in that list exist in our original type.

Let's look at a quick example:

```javascript
type myUnionType = "🥒" | "🥔" | "🌶" | "🌽"

let myFirstVariable:Extract<myUnionType, "🥒" | "🥔"> = "🥒"
//  ^
//  └ - - Type is "🥒" | "🥔"
```

When we write Extract, Extract checks myUnionType for `"🥒" | "🥔"`. If they exist, it makes a new type containing the items that exist. Since both 🥒 and 🥔 exist in our union type, we end up with a new type - `"🥒" | "🥔"`.

If we define members in our `Extract` statement which don't exist in our original union type, then they will be ignored in the new type. For example:

```javascript
type myUnionType = "🥒" | "🥔" | "🌶" | "🌽"

let myFirstVariable:Extract<myUnionType, "🥒" | "🥔" | "🍇"> = "🥒"
//  ^
//  └ - - Type is STILL "🥒" | "🥔" since "🍇" is not in myUnionType
```

Using Extract does not affect the original type, so we can still use it if we want:

```javascript
type myUnionType = "🥒" | "🥔" | "🌶" | "🌽"

let myFirstVariable:Extract<myUnionType, "🥒" | "🥔" | "🍇"> = "🥒"
//  ^
//  └ - - Type is "🥒" | "🥔"

let mySecondVariable:myUnionType = "🌶"
//  ^
//  └ - - Type is "🥒" | "🥔" | "🌶" | "🌽"
```

Extract therefore is a great tool when we want to limit our original union type to a set number of defined members for specific variables or outputs. It gives us flexibility in letting us define types on the fly, which we can use anywhere in our code.