teleren/devto huggingface dataset:
css animation
Tags: freecodez, react, html, blog
Published: 2023-10-20 16:28:05

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**css animation**

![css animation](https://res.cloudinary.com/freecodez/image/upload/v1697819275/images/yl73z8od58gx68rqf81e.webp)

For full source code visit : [https://freecodez.com/post/nmnx3vq](https://freecodez.com/post/nmnx3vq)


```
<!-- https://freecodez.com -->
<div class="canvas">
    <div class="ninth">
        <div class="cornersWrapper">
            <div class="corner is-large"></div>
            <div class="corner is-medium"></div>
            <div class="corner is-small"></div>
        </div>
    </div>

    <div class="ninth">
        <div class="cornersWrapper">
            <div class="corner is-large"></div>
            <div class="corner is-medium"></div>
            <div class="corner is-small"></div>
        </div>
    </div>

    <div class="ninth">
        <div class="cornersWrapper">
            <div class="corner is-large"></div>
            <div class="corner is-medium"></div>
            <div class="corner is-small"></div>
        </div>
    </div>

    <div class="ninth">
        <div class="cornersWrapper">
            <div class="corner is-large"></div>
            <div class="corner is-medium"></div>
            <div class="corner is-small"></div>
        </div>
    </div>

    <div class="ninth"></div>

    <div class="ninth">
        <div class="cornersWrapper">
            <div class="corner is-large"></div>
            <div class="corner is-medium"></div>
            <div class="corner is-small"></div>
        </div>
    </div>

    <div class="ninth">
        <div class="cornersWrapper">
            <div class="corner is-large"></div>
            <div class="corner is-medium"></div>
            <div class="corner is-small"></div>
        </div>
    </div>

    <div class="ninth">
        <div class="cornersWrapper">
            <div class="corner is-large"></div>
            <div class="corner is-medium"></div>
            <div class="corner is-small"></div>
        </div>
    </div>

    <div class="ninth">
        <div class="cornersWrapper">
            <div class="corner is-large"></div>
            <div class="corner is-medium"></div>
            <div class="corner is-small"></div>
        </div>
    </div>

    <div class="circle is-first"></div>
    <div class="circle is-second"></div>
    <div class="circle is-third"></div>
    <div class="circle is-fourth"></div>
    <div class="circle is-fifth"></div>
    <div class="circle is-sixth"></div>
    <div class="circle is-seventh"></div>
    <div class="circle is-eighth"></div>

    <div class="meetingPoint"></div>
</div>
```

Source Code : [https://freecodez.com/post/nmnx3vq](https://freecodez.com/post/nmnx3vq)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
Episodio 22: El gran cortafuegos chino
Tags: podcast, spanish
Published: 2023-10-20 16:18:52

Ya esta disponible el nuevo episodio del podcast de Entre Unos y Ceros de la mano de mi amigo @jorge_avikla. En esta ocasión hablamos del proyecto Escudo Dorado que es el gran firewall que limita el acceso libre a internet por parte del Gobierno Chino hacía su población. Super interesante y vale mucho la pena escucharlo completo.

https://spotify.link/9pAZ6ZzA2Db
Use case Testing?
Published: 2023-10-20 16:08:25

Use Case testing is generally a part of black boxing and that helps developers and testers to identify the test scenarios that exercise that hole system on each transaction basic  from start to finish.
Use case testing is a functional testing technique that helps in identifying and testing scenarios on the whole system or doing start-to-end transactions. 
It helps to identify the gaps in software that might not be identified by testing individual components.
It is used to develop test cases at the system level or acceptance level.
A useless website to waste your time on [Useless Websites #1]
Tags: watercooler
Published: 2023-10-20 15:55:10

Do you want a useless website to waste some time? Are you just bored? Or addicted to the internet? Well guess what? I have a website for you! This one - [What’s My Starbucks Name?](whatsmystarbucksname.com) Ya know how Starbucks will DEFINITELY mishear your name? Well enter your name and you’ll get your name back as Starbucks might hear it with an _actual_ image of that misread name. Go waste time!
My Hacktoberfest 2023 Experience
Tags: hack23contributor
Published: 2023-10-20 15:46:15

### Intro
Hello everyone, I'm Mark. This is my second time participating in Hacktoberfest, although last year I couldn't invest as much time as I wanted to. If you're interested in my work, you can check out my GitHub profile [here](http://github.com/mark-omarov).

### Highs and Lows
This year's Hacktoberfest was a smooth experience. While I didn't have any groundbreaking revelations, I still found the event enriching. Challenges were minimal, and everything was fairly straightforward, which allowed me to focus on my contributions.

### Growth
Before Hacktoberfest 2023, my skillset was already quite broad—I'm a full-stack engineer capable of working on everything from frontend to backend, including a touch of DevOps. However, this event allowed me to delve deeper into Deno. I even participated in Deno Fest today, which was an exciting experience. As for my career and learning goals, they remain largely unchanged, but the event has definitely added a layer of refinement to my existing skills.
Decision Table Testing?
Published: 2023-10-20 15:43:12

 Decision Table Testing is a software testing technique used to test system behavior for different input combination. Example Login page 

Testcase1 :  Whether user can enter correct username and password
Testcase2 :  Whether user can enter Correct username and wrong password
Testcase3 : Whether user can enter wrong username and correct password
Testcase4 : Whether user can enter wrong username and Password
Git - Use Hooks for Custom Workflows and Actions
Tags: github, git, programming, tutorial
Published: 2023-10-20 15:30:00

Git hooks are customizable scripts that Git can run at certain points in the version control process. They allow you to automate and customize various aspects of your workflow. Git provides both client-side and server-side hooks; you can use them to perform tasks such as code validation, sending notifications, and more.

Here are a few ways you can leverage Git hooks:

1. **Pre-Commit Hook:** You can use a pre-commit hook to run checks on your code before committing it. For example, you can automatically format code, check for syntax errors, or run unit tests. If any checks fail, the commit is prevented.

2. **Pre-Push Hook:** A pre-push hook runs just before you push your changes to a remote repository. This is useful for running additional tests or checks to ensure that your code meets certain criteria before it's shared with others.

3. **Post-Receive Hook:** On the server side, a post-receive hook can be used to trigger actions after a push is received. For example, you can automatically deploy code to a staging environment or send notifications to team members.

4. **Custom Workflow Automation:** You can create custom hooks to automate specific tasks unique to your project or organization. For example, you could have a hook that triggers documentation generation, updates version numbers, or performs other project-specific actions.

To use Git hooks:

- Navigate to the `.git/hooks` directory in your Git repository. You'll find sample hook scripts with `.sample` extensions that you can use as templates.

- Create a new hook file without the `.sample` extension and make it executable (e.g., `chmod +x pre-commit`).

- Write your custom script in the hook file to perform the desired actions.

Git hooks are a powerful way to streamline your Git workflow and ensure consistency and quality in your development process. They can help automate repetitive tasks and enforce best practices for your project.
DEV Community Contributor Spotlight: @narender2031
Tags: opensource, meta, devcontributors
Published: 2023-10-20 15:24:25

As many of you know, the DEV Community is used [Forem](https://github.com/forem/forem), our community-driven open-source platform. This allows anyone to harness the power of an open community, and we've seen great examples of communities being set up for specific technologies, sports communities, gaming, and a lot more. Being an open-source project, we are indebted to the volunteers who step up to rectify bugs, enhance features, and augment the platform for everyone's benefit - especially those of us who log into DEV every day.

This week, a big thanks goes to community member @narender2031. Their remarkable contributions date back to March 2020. Most recently, they have introduced enhanced functionality to our organization pages and resolved multiple front-end issues.

The DEV Community has adapted and evolved a lot over the years - and we're excited to see that through all the changes, dedicated contributors are still giving up their time to our open-source project. Events like [Hacktoberfest](https://dev.to/devteam/hacktoberfest-2023-is-here-58bo) are great, but we're always open to contributions year-round!

If you're considering lending a hand or contributing to an issue, you're welcome to dive in! Our contributor's guide and the open issues available for contribution are at [dev.to/contribute](https://dev.to/contribute).
What to use instead of `@ember/string`
Tags: ember, javascript, strings
Published: 2023-10-20 15:13:00

---
title: What to use instead of `@ember/string`
published: true
description: `@ember/string` is discouraged from use, but what do you use if you need string transformation?
tags: ember, javascript, strings
cover_image: https://images.unsplash.com/photo-1622593587600-919f704f4ba0?auto=format&fit=crop&q=80&w=2500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
# Use a ratio of 100:42 for best results.
published_at: 2023-10-20 15:13 +0000
---

[`@ember/string`](https://github.com/emberjs/ember-string) is trying to be phased out -- I've found that [`change-case`](https://www.npmjs.com/package/change-case) is a better alternative to `@ember/string`, because it supports more transformations, is true native ESM, and can be anywhere, even outside of ember, or in plain html files!

Here is how you migrate:

## `camelize`

If you use `camelize` in `@ember/string`, use this instead:

```js
import { camelCase } from 'change-case';
```

## `capitalize`

If you use `capitalize` in `@ember/string`, use this instead:

```js
import { capitalCase } from 'change-case';
```

## `classify`

If you use `classify` in `@ember/string`, use this instead:

```js
import { pascalCase } from 'change-case';
```

## `dasherize`

If you use `dasherize` in `@ember/string`, use this instead:

```js
import { kebabCase } from 'change-case';
```

## `decamelize`

If you use `decamelize` in `@ember/string`, use this instead:

```js
import { snakeCase } from 'change-case';
```

## `underscore`

If you use `underscore` in `@ember/string`, use this instead:

```js
import { snakeCase } from 'change-case';
```

 ## `w`

If you use `w` in `@ember/string`, use this instead:

```js
let result = `long string with words`.split(/\s+/);
//  ^ ['long', 'string', 'with', 'words']
```
Django authenticate and login methods
Tags: django, python
Published: 2023-10-20 15:09:11

Django comes with a robust authentication system that handles both authentication and authorization. In this post let's talk about two of its methods `authenticate()` and `login()`.  
  
`authenticate()`  
  
The authenticate method is used to verify the user's credentials against the authentication backends defined in the project. it takes the user's credentials as arguments and returns user object if the credentials are valid and if the credentials are invalid then it returns `None`

`login()`

The `login()` function is used to create user sessions and log them in. It takes a `HttpRequest` object and a User object saves the user's ID in the session using Django’s session framework and sets a session cookie in the user's browser, allowing them to remain authenticated across different pages and requests.

Example to create a login_view using both methods


```python
from django.contrib.auth import authenticate, login
from django.http import HttpResponse
from django.shortcuts import render
from django.contrib.auth.models import User

def login_view(request):
    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return HttpResponse("Logged in successfully")
        else:
            return HttpResponse("Authentication failed. Please try again.")

    return render(request, 'login.html')

```
Lista em Java Sem Valores Repetidos
Tags: java, beginners, braziliandevs, hashset
Published: 2023-10-20 15:07:26

## Listas com objetos não repetidos

Você não precisa fazer um ArrayList e verificar se o valor já existe na sua lista, há uma forma mais simples.

**Vamos usar a interface Set e implementar com o HashSet.**

![Image HashSet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfuksizdj1x1htuw1ots.png)

**Agora vamos adicionar valores**

![Image HashSet Add](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1uxunf177d708yf2v9g.png)

_Repare que tentamos inserir o valor "Lucas" duas vezes._

**Agora vamos imprimir os valores no nosso console**

Vou apresentar a vocês duas maneiras de fazer isso:

- **Iterator**
A forma mais comum é declarar um Iterator e usar o .next() para receber os próximos valores dentro do (while).
![Image Iterator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbno5wauitas2ogzhocm.png)

- **Lambda**
A forma mais fácil (na minha opnião) é usar o forEach com expressão lambda
![Image lambda](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9hzgzlgq4vewdrys6jq.png)

### Saída
Note que o nome Lucas só irá aparecer uma vez.

![Image saida](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbbje1vuzd1u9ul4yjq6.png)

Código Fonte disponível aqui: https://github.com/antoniorws/basic-java-trail
DBeaver “embaçado” no Windows?
Tags: database, dbeaver, windows, display
Published: 2023-10-20 14:53:03

#### Se o seu DBeaver aparece com um visual estranho, meio desfocado, em seu Windows 10 ou 11, fique sabendo que provavelmente você não está precisando usar (ou trocar) seus óculos.
---
Acontece que o DBeaver não lida tão bem com uma questão envolvendo altas resoluções e zoom, o que faz com que o seu visual fique levemente desfocado. Para sanar este problema temos duas soluções, confira.

Caso você não saiba o que é e nem para que serve o DBeaver, talvez este artigo não seja para você. [Saiba mais clicando aqui](https://dbeaver.io/).

Leve em consideração que as dicas a seguir valem para os ambientes:

- Windows 10 Pro ou Home;
- Windows 11 Pro ou Home.

## Alterar o arquivo .ini
Se, por algum motivo, você não quiser usar as configurações do sistema operacional, tente aumentar o fator de escala apenas para o DBeaver, adicionando o seguinte trecho de código ao final do dbeaver.ini:

```
-Dswt.autoScale=XXX
-Dswt.autoScale.method=nearest
```

> Nota: O fator de escala real (onde se lê “XXX”, neste exemplo) depende da sua máquina. Tente definir o valor de 150 a 500 para encontrar o melhor valor.

## Alterar configurações de DPI
Quando um redesenho completo ocorre com diferentes elementos da interface do usuário com o uso de altas resoluções, em alguns casos, aplicações como o DBeaver podem aparecer desfocadas (a intensidade pode variar). A solução para isso é alterar as configurações de DPI para esta aplicação nas propriedades do executável.

1. Vá até as propriedades do mesmo (botão direito do cursor > Propriedades);
2. Navegue até a guia “Compatibilidade”;
3. Clique em “Alterar configurações de DPI alto”;
4. Marque a última caixa de seleção que diz “Substituir o ajuste de DPI”;
5. Escolha a opção “Sistema (Avançado)”.

Pronto.

---

Qualquer uma destas duas formas resolve a questão. Espero que dê certo para você!

Para uma leitura mais confortável e completa deste artigo, [clique aqui](https://blog.vinicius-stutz.com/dbeaver-emba%C3%A7ado-no-windows-5a3795017cb0).

## Fontes
- https://blog.vinicius-stutz.com/dbeaver-emba%C3%A7ado-no-windows-5a3795017cb0
- https://github.com/dbeaver/dbeaver/issues/3141
Context leaking in EmberJS tests
Tags: ember, testing, javascript, webdev
Published: 2023-10-20 14:51:32

(Unit) tests should be [FIRST](https://github.com/tekguard/Principles-of-Unit-Testing): Fast, Isolated, Repeatable, Self-Verifying, and Timely. The `I` part is important for this case, specifically:

> No order-of-run dependency. They should pass or fail the same way in suite or when run individually.

Usual case that makes `I` break is "test pollution".

## The problem

Imagine following test code:

```js
import { module, test } from 'qunit';
import { setupRenderingTest } from 'sandbox/tests/helpers';

let globalScopedProperty = 'foo';

module('Integration | Component | foo', function (hooks) {
  setupRenderingTest(hooks);

  let moduleScopedProperty = 'foo';

  hooks.beforeEach(function () {
    this.beforeEachScopedProperty = 'foo';
  });

  test('test A', async function (assert) {
    globalScopedProperty = 'bar';
    moduleScopedProperty = 'bar';
    this.beforeEachScopedProperty = 'bar';
    let testScopedProperty = 'bar';

    assert.ok(true); // just to have one assert
  });

  test('test B', async function (assert) {
    let testScopedProperty;

    assert.strictEqual(globalScopedProperty, 'foo', 'global scope');
    assert.strictEqual(moduleScopedProperty, 'foo', 'module scope');
    assert.strictEqual(testScopedProperty, undefined, 'test scope');
    assert.strictEqual(this.beforeEachScopedProperty, 'foo', 'before each scope');
  });
});
```

- Now if we happen to run `test B` first, and then `test A`, then **everything** will be **green**.
- But if we will run `test A` first and then `test B` we will get **two** of the tests **failing**.


![Asserts for "global scope" and "module scope" failed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vx0ad5ybw3iauwlhbvv.png)

This is not great. And this can and will come to bite you later on when code gets extended / refactored and unintended variable mutations will happen. It does not even have to be direct mutation of the property itself, but write operation to some nested element of an object.

## Conclusion

- Tests can and will run in random order. Maybe not now, maybe not next time you execute the tests, but eventually they will.
- EmberJS test suite will make sure that `beforeEachScopedProperty` wil get re-set before each test. 
- By the way JavaScript works `testScopedProperty` will exist only within scope of your test and will get re-set before each test even if multiple tests happen to declare variable with the same name.
- If you want to define a property that is used in _every_ test, then use `beforeEach` hook and store it in `beforeEachScopedProperty`.
- Do not try to make values from one test leak into other test. Always assume clean state.

---

Image created with Midjourney via prompt: Tomster EmberJS macot; Leaking context --aspect 16:9
> Digital Accessibility 1: WHY and WHO
Tags: a11y, wcag, learningarchives
Published: 2023-10-20 14:51:11

Digital accessibility (abbreviated as a11y) is about:

- designing and building digital products...
- so that they can be used in a meaningful and equal way...
- by as many people as possible — including those with disabilities.

---

### WHY: Why focus on it?

- Over 15% of the world's population self-identify as having a disability. By catering to them, you **broaden your audience**. (You also avoid getting a bad reputation and facing discrimination lawsuits).

- When you design for accessibility, you also **enhance the user experience for everyone else**. (This is called the [curb-cut effect](https://sketchplanations.com/the-curb-cut-effect)). 

Let me do the math for you:

```
larger audience + happier users = increased revenue
```


---


### WHO: Main groups to consider

#### 1. Visual impairments 👁️

- **Examples**: blindness, low vision, color blindness
- **Prevalence** (worldwide): 13% vision loss, 3% color blind
- **Pain points**:
  - digital products that do not work with screen reader software
  - mobile websites/apps without pinch to zoom, complex graphs and charts differentiated by colors alone
  - color contrasts that make it difficult to read text on the screen

#### 2. Mobility impairments ♿️

- **Examples**: arthritis, paralysis, amputees, seizure disorders
- **Prevalence** (worldwide): 1 in 7 people 
- **Pain points**:
  - elements that are only designed to work with the use of a mouse.

#### 3. Hearing impairments 👂🏼

- **Examples**: deafness, heard of hearing
- **Prevalence** (worldwide): 20%
- **Pain points**:
 - audio content without text transcripts
 - video content without well-synchronized captions

#### 4. Cognitive impairments 🧠

- **Examples**: Down's syndrome, autism, ADHD, dyslexia, aphasia
- **Pain points**:
 - busy interfaces that make it overly complicated to focus on the task at hand,
 - large blocks of (justified) text with minimal whitespace
 - small or hard-to-read fonts

#### +1. Others who can benefit from improved accessibility

- **Temporarily disabled**: a person with a broken leg, or with slower thinking due to medication.
- **Situationally disabled**: a person experiencing glare on a device screen or someone watching a video without sound on the train.
- **Mildly disabled**. A person needing eyeglasses to see a screen or captions to understand audio.
- **Older people** with age-related diminishing senses, eg. vision, grip, cognitive abilities.
- **Non-native speakers**: they can take longer time to understand content.
- **SEO bots**

---

**Note:** This post is part of a series on digital accessibility. The content of this series is based on various resources, including the [Learn Accessibility course](https://web.dev/learn/accessibility).
Click test in 5 second
Published: 2023-10-20 14:49:56

[5 Second click](https://cpsandtypingtest.com/5-seconds-clicker/) is the average number of seconds you click through your mouse. But the question is that how many times can you click in 5 second exactly? Is 5 second too short to test click speed? NO! NO! No! Don you know how to do that? Take the test in 5 second mode and hit your fingers on mouse buttons as fast as you can (go insane!). Click counter will count all the clicks you do in 5 second and show you the Result exactly after the 5 second is complete.
Tips to score more in 4 second click test
For a beginner, it is impossible to click more than 14-15 clicks in five second. But you will be shocked if I tell you that there are gamers who get as much as 15 clicks in just one second. Yes, that is possible! To increase your click 5 second counter rate:
you should first practice methods like Jitter click Butterfly Click , Kohi Click etc.
Keep trying the clicker test using the Restart button until you beat the highest scores of your competitors.
If you are finding it difficult to get in to your full potential, you can start with the click test in 10 second test mode and then come back and then check the test in 5 second mode.
keep practicing.