teleren/devto huggingface dataset:
Pure CSS Animations : A Walkthrough [no-library]
Tags: css, webdev, beginners, design
Published: 2022-10-17 16:25:12

This is a walkthrough of what's possible to do animation-wise with only CSS. 
It’s a good idea to reduce the use of third-party packages or modules, in order to keep a project light-weighted and stable. 
That’s the reason why a developer might need to watch out for those pure CSS tricks that allows to do almost anything that's needed, and it's  easy to implement in any web project.

---

## • Keyframes Control

```
@keyframes my-animation-title {
  0% { transform: scale(1); }
  100% { transform: scale(1.3); }
}
```

Use the **@keyframes at-rule controls** to set different steps through time. Those steps will be displayed on a timeline based on the value in percentage before each set of properties. 
You can set as many steps as you want.

> in the example above, 0% and 100% can be replaced by _from_ and _to_

To use it, declare the identifier in a css animation property, also as the duration.

---


## • Animation property

```
animation: my-animation-title 1s; 
```
Those 2 values are sufficient to begin to see something moving but there's a lot more that's possible to set. This property is **a shortend for 8 animation-related properties** that are :
- `<animation-name>` corresponds to the @keyframes identifier. 
- `<animation-duration>` is the time between the 0% and the 100% steps.
- `<animation-timing-function>` indicates the progress of an animation through time. Possible values will be _linear_,  _ease-in-out_ but also _steps(3, jump-start)_. In that case, the animation will mark 3 stops, excluding the 0% step.
- `<animation-delay>`, expressed in seconds, can be either positive or negative. It corresponds to the delay before an animation starts, and a negative value here will cut off the start of the movement.
- `<animation-iteration-count>` is the number of times the sequence will be repeated. It's possible to either use a number or to use _infinite_ keyword.
- `<animation-direction>`: by default, the animation is going from 0% to 100%. Here you can set a reverted direction or you can alternate between _normal_ and _revert_ by using _alternate_.
- `<animation-fill-mode>`: when the animation is finished, do you need to reset the initial position of your element or would you rather want it to stay at it's new state ? This is what can be set here, possible values are for example _forwards_ or _backwards_.
- `<animation-play-state>` here, only 2 values are available: _running_ or _pause_. Use pause to interrupt anytime while keeping current position.

There's no need to follow a certain order, just place values inline and the corresponding properties will be recognized.

> You can use multiple animations for the same selector, by separating each group of values by a comma.

Here's a Sandbox where you can experiment everything listed above.
Have fun with it !

{% codepen https://codepen.io/clemboss_/pen/vYjoGQv %}

Banner Image: **Etienne Jules MAREY**, _Cavalier Arabe_
TU-Sofia Masters - Web Dev Lab Exercises
Published: 2022-10-17 15:47:36

## Introduction

In the series *[Web Development](https://dev.to/kotov/series/20167)* I will upload articles related to Web Development course for TU - Sofia Lab Exercises. 

---

## Въведение

В серията *[Порграмиране за интернет](https://dev.to/kotov/series/20167)* ще се качват статии свързани с Програмиране за интернет за ТУ - София Лабораторни упражнения.
Create an amateur space rocket using Luos by Alexis - Video
Tags: microservices, opensource, programming, luos
Published: 2022-10-17 15:47:30

As we saw last week, Alexis Gorlier integrated Luos in his project to create an amateur space rocket and break the current European altitude record of 32km.

{% embed https://www.youtube.com/embed/QaeYkqoellQ %}

He created a proof of concept that allows the ejection of parachutes while measuring the events on flight. Let’s discover what he did in a short video.
First Web3 smart-contract
Tags: webdev, react, web3, blockchain
Published: 2022-10-17 15:45:47

Hi, so this week i just started a bootcamp, and i have been learning how to deploy a contract.


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

Currently i have been working on this project called Tickr, space where you can buy Tickets for shows but in Portuguese.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3exijitnq226k8l37ksj.png)

This is the backbone of my contract simple, but since i have good grasp of blockchain been easier for me to learn.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0y3sjgxfg108q7twmouk.png)
AI And ML in E-Commerce And Retail: Trends And Tendencies in 2022
Tags: ai, mlh, datascience, database
Published: 2022-10-17 14:47:18

E-commerce is retail trade – industries that very often depend on external factors. Changes in trends, economic conditions, moods, or even a pandemic – all depend on the trends of industries. So, according to the publication Statista, in 2021, the amount of 5 trillion dollars was successfully exceeded and the e-commerce industry accounted for 3% of the total share of retail trade. 

It is certainly possible to accurately predict that the use of AI and ML will become even more popular. Many retail and e-commerce companies are already incorporating technology into their development processes. Let’s take a look at the predictions for 2022:
– Analytics of user behavior
– Image recognition
– Inventory management
– Automation.
– Virtual dressing rooms
– AI-driven mood detection
– Augmented and Virtual Reality
– The Emergence of Headless E-commerce
– Drone delivery

AI and ML continue to develop without losing their pace. They enable stores and services to grow by providing them with revolutionary solutions to improve their business. Artificial Intelligence offers a flexible and high-quality development strategy for companies, thanks to which they can better understand their customers, maintain contact with them and find an individual approach. In consequence, you will increase your income and gain leadership among competitors.
[Learn more about the potential of Machine Learning and Artificial Intelligence by reading our articles.](https://amazinum.com/2022/09/ai-and-ml-in-e-commerce-and-retail-trends-and-tendencies-in-2022/)
¿Cuánto gana un Frontend Developer en España?
Tags: spain, programming, javascript, career
Published: 2022-10-17 15:40:30

En España, según datos de la web de employer branding [Jobquire](jobquire.com), el salario medio de un [frontend developer](jobquire.com/salarios/front-end-developer) es de unos 32.200 € brutos anuales. La media de experiencia laboral de los front-end que aportaron datos al portal es de 4 a 5 años.

Si miramos a los extremos, el máximo sueldo que aparece es de 53.000 € para un front con 4-5 años de experiencia que trabaja en la empresa [BBVA Next Technologies](https://jobquire.com/empresa/bbva-next-technologies) en Madrid. Mientras que en la parte baja tenemos 18.000 € brutos para un perfil con un año de experiencia y trabajando en Murcia, la empresa no se ha especificado.

## ¿Qué salario puedes esperar como desarrollador frontend?
Hemos visto que el principal factor para establecer un rango de sueldos para un desarrollador front-end es la localización geográfica. Luego, dentro de la ubicación prima la experiencia, aunque el rango se estabiliza.

Si eres un recién titulado sin apenas experiencia, deberías esperar un sueldo cerca de 20.000 € sin importar la posición geográfica. Para los siguientes niveles de experiencia, entre 3 y 5 años, el rango en el que te vas a mover es amplio. Por encima de 20.000 € brutos y por debajo de 40.000 €. Aquí la localización es un factor clave. Por último, en los perfiles de más experiencia, entre 6 y 10 años, la variación del rango de salarios crece todavía más y se mueve entre los 24.000 € y los 50.000 € brutos.

Por localización, si trabajas en Madrid, el sueldo medio para un desarrollador front-end es de 43.000 €, mientras que en Barcelona es de 33.600 €. En ciudades más pequeñas como Cadiz, A Coruña o Valencia, los sueldos no superan los 30.000 € brutos para diferentes niveles de experiencia.

En resumen, como desarrollador fron-end si quieres un sueldo alto debes estar dispuesto a moverte a una gran ciudad. Si ya vives en una, esa suerte que tienes. También puedes esperar un crecimiento muy rápido del salario, esto es, empezar en torno a los 20.000 € y en poco tiempo ponerte en el rango de 30.000 € a 40.000 €. A partir de ahí, la subida salarial queda limitada a ciudades como Madrid.
Convert html to pdf with a retry mechanism
Tags: html, puppeteer, handlebars, htmleer
Published: 2022-10-17 15:36:22

Now that you know what is HTMLeer.dev we can learn how to use it.

## Get your API key
If you don't have an account, just head to [Register page](https://app.htmleer.dev/register). 
After registration go to API keys using navigation bar and create new one.

## API documeentation
You can find available options [in our swagger documentation](https://api.htmleer.dev/).

## Usage of the API
It's really simple, all you need to do is call HTMLeer API with your API key. Here's an example how you can create and download pdf file using HTMLeer API (with a help of p-retry in case of any failures).

```
import pRetry, { AbortError } from 'p-retry';

const generatePDF = async () => {
    const response = await fetch('https://api.htmleer.dev/v1/generate/pdf', {
        method: 'POST',
        body: JSON.stringify({
            savePdf: false,
            filename: 'my-file',
            html: `<div>Hello {{ name }}!</div>`,
            arguments: { name: 'HTMLeer' },
            options: { format: 'A4' }
        }),
        headers: {
            'content-type': 'application/json',
            'api-key': process.env.HTMLEER_API_KEY
        },
    });

    // we are stopping retrying because its custom api error
    if (!response.ok && response.status < 500) {
        throw new AbortError(response.statusText);
    }

    if (!response.ok) {
        throw new Error(response.statusText);
    }

    return response.arrayBuffer();
};

try {
    const result = await pRetry(generatePDF, { retries: 5 });
    const blob = new Blob([result], { type: "application/pdf" });
    const objectUrl = URL.createObjectURL(blob);
    window.open(objectUrl);
} catch (err) {
    console.log(err);
}
```

What do you think?
Day 11-12
Published: 2022-10-17 15:05:22

I finally created my first full stack project, I used NextJS and firebase. The project includes user authentication, liking recipes, and removing recipes. I really like this project because it is officially full-stack. It has a real database and liking features. I am currently working on adding styling touches and making sure that if the recipe is already liked, it shows a unlike button. Thank you and have a great day!
TS: Remove dead code
Tags: typescript, cleancode
Published: 2022-10-17 15:00:10

Quick tip for anyone that wants to clean up unused Typescript code. 

In your project folder run:

`npm install ts-prune -g`

Followed by:

`ts-prune`

You now get an overview of code that is not used, it still has a few issues when using barrel imports (index.ts files) so make sure to double check references using VSCode or your favourite editor before removing code.

Happy cleaning! for more info see: https://github.com/nadeesha/ts-prune
[Conceito] - Race Condition
Published: 2022-10-17 14:15:22

> Conteúdo original em https://twitter.com/zanfranceschi/status/1582011511270100994

---

Ei dev,

Você sabe o que é RACE CONDITION?

Essa thread é pra quem não sabe o que é. E pra quem sabe também!

Queria propor um formato diferente de thread e contar com a colaboração das pessoas mais experientes para que me ajudem a explicar RACE CONDITION.

cc @sseraphini

↓

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

---

Antes das explicações, um rápido contexto sobre cenário e efeito:

RACE CONDITION é algo que geralmente acontece em aplicações que lidam com alto volume concorrente/paralelo de requisições. Se não for tratada, RACE CONDITION pode deixar o estado da aplicação inconsistente.

---

Bom, agora é com você que gostaria de colaborar explicando para as pessoas iniciantes o que é RACE CONDITION! Vamos lá, use sua melhor didática! Se for com exemplos, melhor ainda!

Bora ajudar as pessoas iniciantes?

Muito obrigado! ❤️

---

Acesse https://twitter.com/zanfranceschi/status/1582011511270100994 para ver as explicações!
What are your Goals for the week" (Hacktoberfest week 3)
Published: 2022-10-17 14:23:00

It's Monday, What are your goals for this week? 

It's also Hacktoberfest, are you contributing  to or maintaining projects this year? 

Have you done so previously?

- What are your goals for the week?   
- What are you building? 
- What will be a good end result by week's end?
- Are you working on Hacktoberfest?
- Did you meet your goals last week?

**Last Week's Goals**
 How did I do?

- [:white_check_mark:] **Continue Job search.** Sent DMs, talked to some people, filled out a few applications. 
- [:white_check_mark:] **Get a more PR accepted for HacktoberFest.** Two more PRs accepted,  so now 3/4 for Hacktoberfest goal. One PR waiting on being approved. Working on another, Maintainer like what's done so far, had some suggestions. 

- [:white_check_mark:] **Create CSS art.** Made some Halloween Themed art. I'll post it Wednesday.

- [:x:] **Blog on any CSS art.** Have not written the blog yet. I did blog on HacktoberFest update.

**This Week's Goals** 

- Continue Job search.
- Get more PRs accepted for HacktoberFest.
- Create CSS art.
- Blog on any CSS art.
- Update content on a web site.
- Trip this weekend. 
- Decorate for Halloween. Rained this weekend so didn't do it.


```
-$JarvisScript git push
```

{% twitter 1582014575301754882 %}
shirates-core 1.1.0 released
Published: 2022-10-17 14:07:59

## Shirates (shirates-core)
Shirates is an integration testing framework that makes it easy and fun to write test code for mobile apps.
shirates-core is core library.

[shirates-core 1.1.0](https://github.com/ldi-github/shirates-core/releases)

### New functions
- [Branch function (ifImageExist, ifImageExistNot)](https://github.com/ldi-github/shirates-core/blob/main/doc/markdown/basic/function_property/branch/ifimageexist.md)
- [Branch function (ifImageIs, ifImageIsNot)](https://github.com/ldi-github/shirates-core/blob/main/doc/markdown/basic/function_property/branch/ifimageis.md)
Typical Java-Spring microservice
Tags: java, spring, microservices
Published: 2022-10-17 13:59:59

## Overview
We often create new typical microservice with Java-Spring and many technologies around this stack. Of course, nobody remembers the full structure of all configurations for a project like this. Nobody doesn't write manually configuration of maven plugins or string of DB data source or OpenAPI specification. Anyone always google it, and then paste and edit it for their own case. That's because I created a simple template project for quick access to examples. 

## Technologies

In this project setup and configured the next technologies.

- Java 17
- Spring Boot 2.7.4
- Maven
- Liquibase
- H2
- JPA
- Git
- Lombok
- Actuator / Prometheus
- OpenAPI

## Template project

[Source code on GitHub](https://github.com/AnatoliyKozlov/typical-java-microservice)
Music Monday — What are you listening to? (Live DJs Edition)
Tags: watercooler, discuss, music
Published: 2022-10-17 13:53:52

_cover image source: [The Get Down](https://giphy.com/gifs/netflix-the-get-down-thegetdown-3oz8xtsmgSk9BCJ2P6)_ 

**I know we've done live music [before](https://dev.to/music-discussions/music-monday-what-are-you-listening-to-live-music-edition-28ad), but I figured we could fulfill @citizen428's request [here](https://dev.to/citizen428/comment/21m0b) and put the spotlight on <u>live DJs</u>. So, let's hear it, who are your favorite live DJs?! By the way, if you have a genre/theme request, let me know in the comments... always down for feedback on what we might cover next.**


![real image of a Tiger, sliced up to make it look like they are dj'ing a cartoon turntable.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc56b8cj3x6v0ixllpei.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions.

If you like talking about music, consider following the org [#music discussions](https://dev.to/music-discussions) for more conversations about music!

{% embed https://dev.to/music-discussions %}

***

Alright, let's hear some live DJs! _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

I look forward to listening to y'all's suggestions! 👂 🎶
Editor4J 2022.4: The lost release :)
Tags: news, opensource, showdev, beginners
Published: 2022-10-17 13:53:50

Hello!

Its been a while since I've done anything Editor4J related. So I thought I'd dust off the old code base, open the old project and talk about version 2022.4.

A while back I made a 2022.4 release that adds some cool stuff like 

- Fixing issues regarding File I/O
- New svg icons for the languages
- Persistence, the editor remembers opened files and reloads them
- A copy path feature CTRL-W
- An improved error logging system
- UI refinements
- Support for Lua
- Optional OpenGL acceleration (requires restart)
- Unsaved file warning
- Optional Embedded MenuBar (requires restart)

to the editor. I kinda forgot to tell anyone since I was pretty busy.😅 

I wish I had time to work on Editor4J to really implement the courses feature but alas I don’t find myself with much time these days. Hopefully that’ll change in the future.

Anyway, try it out and have fun! 

https://github.com/skyloft7/Editor4J-new
How do you define CRM?
Tags: salesforce, beginners, tutorial
Published: 2022-10-17 13:49:52

 CRM stands for Customer Relationship Management. It lets you manage your relationships with your clients and potential customers and keep track of data that is related to all your interactions. It also lets teams collaborate both internally and externally, collect data from social media platforms monitor important metrics, and also communicate through social, email, phone and various other channels. Are you seeking to learn about more about Salesforce Administrator Exam (ADM 201) and the Platform App Builder (CRT 403) certification exam.? Check out [Salesforce certification](https://www.edureka.co/salesforce-administrator-and-developer-training).

CRM or customer relationship management (CRM) can be described as a full software solution that can manage customer relations, however it's not a one-stop solution. A broad range of cloud-based solutions that can support each point of interaction with customers is essential to efficiently control, analyze, and improve your customer relations. So, the CRM solution should include the sales cloud or service cloud, a commerce cloud, as well as marketing cloud, in addition to the customer data platform (CDP) that is able to combine online offline, as well as third-party data sources to give you the most current and complete view of your customers.

The CRM system gathers data, connects and analyzes all data related to customers, including details about customers as well as interactions with representatives from the company and customers, purchase requests assets, offers, and service requests. The system allows users to access the data and analyze what's taking place at every touchpoint. Based on this knowledge, an accurate profile of the customer is built and a long-lasting connection is created to the client.
1832. Leetcode solution in CPP
Tags: cpp, chiki1601
Published: 2022-10-17 13:45:39

```cpp
class Solution {
public:
    bool checkIfPangram(string sentence) {
        set<char> letters;
        for (char ch : sentence) {
            letters.insert(ch);
        }
        return letters.size() == 26;
    }
};
```
#Leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/check-if-the-sentence-is-pangram/description/
Java Type Comparison
Tags: java, programming, tutorial
Published: 2022-10-17 13:41:15

> Original post: [Flashreads Blog - Type Comparison](https://theflashreads.com/type-comparison/)

The most common way to determine if a given object is an **instance** of a given class, superclass or interface, is by using the binary operator `instanceof`. It includes implicit null check and generates a compile-time error if the types are not related. But it doesn't allow primitives and requires the types to be know at compile time. 

## If you want to check dynamically at runtime
Use the equivalent method `boolean isInstance(Object obj)` in `Class`. It also includes null check, but allows for primitives:

```java
    a instanceof B 
    // returns false for null
    null instanceof B

    a.getClass().isInstance(b);
    // commonly used for generics
    Class<T> type = b.getClass();
    type.isInstance(a);

    // Note that the parameter is autoboxed to type Integer
    int x = 4;
    Integer.class.isInstance(x);
```

## Check compatibility of two types
When you need to check subtyping relation use the method `boolean isAssignableFrom(Class<?> cls)` in `Class`. It may throw _NullPointerException_.

```java
    // is it possible to B b = new A()
    Class<?> aClass = CharSequence.class;
    Class<?> bClass = String.class;
    bClass.isAssignableFrom(aClass());

    // works for arrays
    CharSequence[].class.isAssignableFrom(String[].class); // true
    Integer[].class.isAssignableFrom(String[].class); //false
```

## Pattern Matching (Java 14)
```java
    if(a instanceof B b) {
        // b is casted
        b.toString();
    }
```

## Special types
```java
    // Enums
    enum Color { WHITE, GRAY, BLACK }

    Color.class.isEnum(); // Enum.class.isAssignableFrom(Color.class); 
    Color.WHITE instanceof Enum; // true

    // Arrays
    String[].class.isArray();
    // get the type of the variables in an array (null if obj is not an array)
    Class<?> componentType = obj.getComponentType(); 

    // Primitives
    int.class.isPrimitive();
```
What is Landing Zone?
Tags: landingzone, aws, beginners
Published: 2022-10-17 13:19:26

## Pre-study image

You may have never heard of it.

## Research

### What is a Landing Zone?

Landing Zone is a mechanism to deploy accounts created based on AWS best practices.
Landing Zone is not a service but a mechanism.
Landing Zone is not a service, but a mechanism to maintain a certain level of security for a large number of accounts.

### Landing Zone Features

- Create an account with all necessary initial settings completed
- Issue administrative privileges, creating permissions to manage accounts
- Manage account access via SSO
- Ensure network baselines are in place
- Centrally store AWS logs
- Install guardrails

### How to use the Landing Zone

- Using Control Tower

Control Tower is an easy to set up Landing Zone implementation.

- Implement on your own

Use Organizations, config, etc. to build your own.
It can be customized freely, but it is difficult to set up.

## Image after study

It feels more like a Control Tower feature...
Is that right?
What is IPAM?
Tags: ipam, beginners
Published: 2022-10-17 13:17:13

## Pre-study image

I've seen the word on the AWS website, but I don't know what it is.
Is it related to IP address?

## Research

### What is IPAM?

IPAM stands for IP Address Management.
In Japanese, it is called IP address management.

IPAM refers to the centralized management of IP addresses in a network and software for such management.
It collects IP addresses in cooperation with DHCP servers, DNS servers, etc. that exist in the network, and
The DHCP server systematically allocates IP addresses.

In the past, when IP addresses were planned, planning was done using Excel.
When changes were made, modifications were often made.
However, this was sometimes unusable due to omissions or loss of tracking of work.
IPAM will do that automatically.

## Image after study

It's definitely going to be in an Excel table or something... it's not going to be usable. 。。。。