teleren/devto huggingface dataset:
Vite - found the missing part
Tags: vite, react, testing, jest
Published: 2021-12-21 07:26:53

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
The meaning of vite comes to the French word for "quick" 🇫🇷.
I love 😍 vite but something was missing 😕. how to run tests?
Yesterday vitest was open source 🍾. 
Vitest is a blazing fast new unit test framework powered by Vite.
Given Jest's massive adoption, Vitest provides a compatible API that allows you to replace Jest in most projects. 
Vitest includes the most common features required when setting up your unit tests (mocking, snapshots, coverage). 
Vitest cares a lot about performance and uses Worker threads to run as much as possible in parallel.

Lets take vitest for a ride 🏎.

First we create new vite project ``` pnpm create vite ```
lets add vitest ``` pnpm i -D vitest```
in src directory we will add a test file App.test.js
we will add a simple test to check its works
```
it('basic', () => {
    expect('JOHN'.toLowerCase()).to.equal('john')
  })
```
in package json we will add 2 scripts
```
"test": "vitest",
"coverage": "vitest --coverage"
```
lets run ``` npm run test``` and we check step one.

How can we test react component?
We can use react-test-renderer or testing-library/react.
I prefer testing-library.
For that please install ``` pnpm i -D @testing-library/react ```
and happy-dom or jsdom.
We need to rename the test file from js to jsx.
We need to edit vite.config.js and add
```
test: {
    environment: "happy-dom", // or 'jsdom', 'node'
  },
```
now let's create simple react component
```
function SimpleText () {
  return <h1>Hello World</h1>
}
```

```
it('basic react with testing library', () => {
    const { getByText } = render(<SimpleText />)
    expect(getByText('Hello World')).toBeTruthy()
  })
```
That all. it's working.

In conclusion, I'm very happy about vetest.
It feels like the missing piece was found.
For more information
[Home | Vite] (https://vitejs.dev/)
[Home | Vitest](https://vitest.dev/)
[Example | vite test via vitest] (https://github.com/yanirmanor/vite-test-vitest)
Enjoy 🥃.
CSS Shopping cart Icon with number of items.
Tags: css, shoppingcart, header, icon
Published: 2021-12-21 13:05:49

## Introduction

Every eCommerce website, need to display the number of items the customer has put into the shopping cart. Let me show you how easy it is to display this using a bit of html and CSS.


![shopping cart icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t88g6wbh14mjjcfrvb8u.JPG)

### STEP 1 Include the font awesome stylesheet CDN 

We need this to get the awesome font image for the shopping cart.  Include this in the `<HEAD>` section of your html page.

```
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

```
### STEP 2 lets write the style for the badge using CSS

A badge is the round circle with the number of items the customer have added to the shopping cart so far.  

```
	.badge:after{
		content:attr(value);
		font-size:12px;
		color: #fff;
		background: red;
		border-radius:50%;
		padding: 0 5px;
		position:relative;
		left:-8px;
		top:-10px;
		opacity:0.9;
	}
```

Explanation :

We will display the value passed to the badge, the value here is the number of items in the cart.   we are using white font color, with a background of red.  We are using :after to indicate we want the badge to be displayed after displaying the cart icon.

###  STEP 3 Writing the html portion 

```
<i class="fa badge fa-lg" value=5>&#xf290;</i>
<i class="fa badge fa-lg" value=8>&#xf07a;</i>

```
 
Explanation :

We using html list item i to display the cart.  we are displaying the cart icon with a font size of 24px.  

`&#xf290;` is for the shopping bag
`&#xf07a;` is for the shopping cart

[You can find more free font awesome codes by clicking this link
](https://fontawesome.com/v5/cheatsheet)

I have included the entire code here

```
<html>
<head>
	<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
</head>
<body>

<style>
	.badge:after{
		content:attr(value);
		font-size:12px;
		color: #fff;
		background: red;
		border-radius:50%;
		padding: 0 5px;
		position:relative;
		left:-8px;
		top:-10px;
		opacity:0.9;
	}

</style>
<body>
<i class="fa badge fa-lg" value=5>&#xf290;</i>
<i class="fa badge fa-lg" value=8>&#xf07a;</i>

</body>
</html>

```

## Conclusion

With simple HTML and CSS, we can build an awesome display for the shopping cart icon with items in it.  Note, you will have to use either PHP or .JS in real scenario to provide the number of items as they cannot be static as shown in the above example.
Functions
Tags: javascript, functional, programming, tutorial
Published: 2021-12-21 12:56:28

A Function is a way yo bundle code so that it can be reused. Functions allow us to run the same piece of code from multiple places in a program without having to copy paste the code repeatedly.

### The Basic Anatomy of a function
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81pz0j1e5b0sm52utttc.png)
The code between the curly brackets is called the function body.

### Creating A Simple Function
Lets create a simple function. Enter the following code in the browser console.

> Hello World!
 
```
const firstFunction = function () {
console.log("Hello World!);
}
```

### Passing Arguments into Function
firstFunction just prints the same line of text every time you call it, but you will probably want your function to be more flexible than  that. Function argument allow us to pass value and change to function behavior.
Lets create function with argument

```
const secoundFunction = function (name) {
console.log("Hello" + name "!");
}
```
We can send multiple argument also .
```
const secoundFunction = function (firstName, LastName) {
console.log("Hello" + firstName + LastName"!");
}
```

More Information Updating Soon.
Metaverse vs. Multiverse:
Published: 2021-12-21 12:17:55

While the Metaverse has been a factor in the world of gaming A different, but remarkably similar idea is being revealed in The Multiverse.

While they look similar on the surface it is clear that there’s a vast distinction between the two concepts. The main difference is that the Metaverse is simply a set of virtual universes while the Multiverse literally means multiple universes’ merging into one single concept.

It is interesting to note that both concepts form part of the Omniverse which is an umbrella term that covers the details of our virtual and physical existence. For a more precise explanation, we’ll go over the fundamental concepts behind the Metaverse and the Multiverse and find out what sets them apart from one another and how they will each influence how the world’s future shapes shifts.
Things one needs to know as a javascript developer-part-2
Published: 2021-12-21 12:12:38

Inheritance 
Inheritance is a concept of abject oriented programing. With this concept, we can 
base a function or class to a new class
class person {
    constructor(name, weight) {
        this.name = name;
        this.weight = weight;
    }

In the above code we declared a class of a person that takes persons name and weight as argument. And gives name and weight as value. To implement this in inheritance we need to call the function with the name and value of weight as a parameter of the class. We can create multiple objects from this one constructor.
To initiate the constructor 

const person = new person('George', '160Kg'); 
With the help of inheritance, we can create multiple objects from a single class in javascript.
This Keyword 
is a keyword of function that indicates the function where it was declared. This keyword indicates the global object. 
The syntax is 
“ This “
Example:
 Function Func(){this.console.log('This Keyword")}:

The above code prints “this Keyword” from the func function.
DOM 
The Full meaning of DOM is the document object model. DOm basically means javascript to interact with HTML documents. with the help o dom-manipulation user, interactive websites can be created. There are a few Built-in Syntax for javascript DOM manipulation. 
 Document.inner HTML 
Document.Inner text
Document. Style
Add event listener
With the help of document. inner HTML we can set HTML code to create a new section or element with javascript. With inner text, we can change the inner value of any Html element.
And with event listener, we add Events to the HTML document to interact with users for this page. Interaction such as onclick, hover and many more.
Fetch 
Fetch is a javascript method that makes HTTP requests from the server and loads needed data from the server to document.
API
Full form of API stands for Application Programming Interface. Fetch uses API to make HTTP requests API is like a messenger to the back end and front. Api interacts with the database and gives the required data is needed t perform any operation, its popular lightweight way of transferring data
What is Postman is a Client tool to work with APIs 
to send requests to get responses.
Header: exists in both request and response, 
is metadata about the request.
Content-Type: in the request header: to specify what kind of data 
we are sending to the server 
in response header: what was the content type we got  a response
Performant Pulse Animation in CSS!
Tags: css, tutorial
Published: 2021-12-21 09:29:15

Hey **fellow creators**

You'd like to add a button with a *pulse animation* to your app? You can learn how to do it in CSS in less than a minute!

##1. Create a button
This is a really simple step, but create a button in your HTML file:
```html
<button>Go</button>
```

&nbsp;
##2. Let's style the button

Center the button as well as the text inside it, and make it a circle:
```css
body{
	font-family: Arial, Helvetica, sans-serif;
	background: #333;
}

button{
	position: absolute; /* centering */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex; /* centering the content */
	justify-content: center;
	align-items: center;
	width: 100px; 
	height: 100px;
	border-radius: 50%; /* make it a circle */
	font-size: 20px;
	border: none;
       cursor: pointer;
}
```

&nbsp;
##3. Create the pseudo-element.

Some are using box-shadow to achieve that stuff, me included before I knew it was bad for performance.
So I simply replaced box shadow by a pseudo-element that grows and disapears at the same time with the performant "transform" and "opacity" properties.

```css
button::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;  /* behind the parent */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f1f1f1;
    top: 0;
    left: 0;
    animation: pulse 1.4s infinite ease-out;  /* animation configuration */
}
```

&nbsp;
Create the keyframe:
```css
@keyframes pulse {
    to {
        transform: scale(1.4);
        opacity: 0;
    }
}
```
&nbsp;

And, there you go, the pseudo element will expand and hide at the time, thus creating what we want, with good performance (no repaint). 🔥 

&nbsp;
Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*See you soon!*

Enzo.
Mulesoft Training (30% Off) MuleSoft Online Training Course


Published: 2021-12-21 12:01:57

Mulesoft is the most used data integration platform that connects different sources of data & applications on cloud and on-premise. Learn MuleSoft in real-time with IT Guru Experts practically.

****Course Overview**

[Mulesoft Online Training](https://hkrtrainings.com/mulesoft-training-certification) gives you the best knowledge on the Mulesoft approach to know the benefits of Any point platform, ESB, etc from live experts. Learning MuleSoft Course makes you a master in this subject that mainly includes basics of Mule applications, building, testing of mule apps, etc. Our Mule 4 Training module will provide you a way to earn MuleSoft Certification. So, join hands with HKR for accepting new challenges and make the best solutions through Mule Training. Learning MuleSoft Architecture Certification basics and various models will make you an expert in Mule functions to deal with real-world tasks. HKR provides the best MuleSoft Online Training Hyderabad, where you will come to know how Mule software works in the real world scenario. Online MuleSoft Training at HKR will help you get your online training. Moreover, Mule ESB Training at HKR provides the solutions to know about each component to build Mule applications. And Mulesoft Online Training in India also explains its contribution towards the enhancement and latest opportunities in a Mule environment in a practical way by live industry experts.
I render this code like a pro
Published: 2021-12-21 11:39:53

In the past, I struggled so many times trying to properly render a piece of code, considering the indentation, the coloring syntax, and so on.

Then I discovered PrismJS, a lightweight Javascript library that generates the HTML tags needed to wrap code snippets with a wonderful rendering.

It simply uses `<pre>` and `<code>` existing tags and the language specified in the CSS class name.

Hmm, what about making this feature reusable by using a component on Entando, the Application Composition Platform? 

Of course! Not only is this feature available to me, but also our entire community can easily access it by installing an existing component collection!

To help explain, I created this quick and nifty video below.  We’ll walk through becoming a developer, to a developer-contributor and save time (and our sanity) for future solutions. 

Step by step, we’ll explore in detail: creating your components, defining bundle descriptions, and sharing on a GitHub repository to use in a sample blog page. The bundle will then be installed and deployed on an Entando instance.

After watching this video, drop a quick comment and share what THE one component is that you would like to share with the community.

Tune in next time as we continue our adventures in this composition world!

{% youtube tTGhs7P55mo %}



## Additional resources

Start with Entando components: [https://dev.entando.org/v6.3.2/docs/ecr/ecr-bundle-details.html#overview](https://dev.entando.org/v6.3.2/docs/ecr/ecr-bundle-details.html#overview)

Start with our JHipster generator, the Entando Component Generator:

[https://dev.entando.org/v6.3.2/docs/component-generator/component-gen-overview.html](https://dev.entando.org/v6.3.2/docs/component-generator/component-gen-overview.html)

Learn more about the Entando Component Repository:

[https://dev.entando.org/v6.3.2/docs/ecr/ecr-overview.html](https://dev.entando.org/v6.3.2/docs/ecr/ecr-overview.html)
Loading Animation with CSS only
Tags: webdev, beginners, css, tutorial
Published: 2021-12-21 11:28:19

Hello Everyone, Today we are going to create cool loading animation with CSS only. So, let's get started.

Our final result will look like this
{%youtube d0-QyIYldbY%}

In the end of this post I attached Codepen Pen.
Firstly we have to write some HTML 

```html
<body>
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span> 
</body>
```

We just created 7 `<span>` and now it's time to write CSS part for this loading animation effect.

First set margin and padding to 0

```css
*{
  margin:0;
  padding:0;
  font-weight:bolder;
}
```

Now set `body` `display:flex` and `justify-content:center` and `align-items:center` to center the LOADING word.

```css
body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background-color:#333;
  }
```

Now set `font-size` to a desired value and set `margin` to create some gap inbetween .

```css
span{
  font-size:30px;
  margin:5px;
}
``` 

Now target the individual letter with `nth-child()` pseudo selector to animate them. Set `animation-delay` of each child to some random value. So, there is a difference in their timing.

```css
span:nth-child(1){
  color:red;
  animation:l 1s linear infinite;
}

span:nth-child(2){
  color:blue;
  animation:l 1s 0.11s linear infinite;
}

span:nth-child(3){
  color:green;
  animation:l 1s 0.33s linear infinite;
}

span:nth-child(4){
  color:red;
  animation:l 1s 0.47s linear infinite;
}

span:nth-child(5){
  color:orange;
  animation:l 1s 0.24s linear infinite;
}

span:nth-child(6){
  color:cyan;
  animation:l 1s 0.3s linear infinite;
}

span:nth-child(7){
  color:magenta;
  animation:l 1s 0.19s linear infinite;
}
```   
Create a keyframe to animate them.
```css
@keyframes l{
  0%{
    transform:translateY(-14px)
  }
  50%{
    
    transform:rotateY(90deg);
  }
  100%{
    transform:translateY(-14px);
  }
}
```
{% codepen https://codepen.io/godzillaa/pen/dyVRazQ %}

If we change `transform` with respect to Y axis to X-axis the final result will look like this.
Codepen:
{% codepen https://codepen.io/godzillaa/pen/Bawddzx %}

I hope you love this post. 
[Support me](https://buymeacoffee.com/devrohit) if you can.
You Missed the Most Important Detail in This Video!
Tags: testing, aws, devops, cloud
Published: 2021-12-21 11:05:59

{% youtube 7_vWwjSHs64 %}

There is a hidden gem in this video. Pause at 0:10, and you'll see the command: 

`npx sled-test-runner`

What the heck is this?

To allow our developers to do their best work, we removed the hoops they would usually need to jump through to get their code into production.

Obviously (well, at least in retrospect), we needed to cut out QA. Dev servers are also out.

Wix decided to trust its developers to push code to production directly from their local dev machines.

Are we crazy? Yes. But not in that way.
How can we cut out these parts without compromising on the robustness of our production apps? How can we allow vast amounts of developers on different continents to push code to interdependent apps without breaking or stuff or negatively impacting performance? 

Hundreds of millions of people rely on our online services to run their businesses!

Obviously, we will need some serious testing, but with each developer doing their own deployments, this means thousands of deployments per day, with each one triggering thousands of tests!

This means MILLIONS of unique test executions PER WEEK!
How can we possibly handle this? How long will developers have to wait for all these test results? We can't make them wait an hour every time they merge into the master branch, just to find out if their code passed inspection!

Luckily we found a way to do all of this in just about the same amount of time it takes to run a single test on your local machine!

Meet Sled.
SLED is our end-to-end testing platform.

Leveraging cloud computing to run all project test files in parallel, Sled allows us to run end-to-end browser tests against production without sacrificing speed.

We even run each test multiple times in parallel with itself so that we don't need to spend time rerunning flaky tests!

SLED uses open source technologies such as Chromium, Jest, and Puppeteer to orchestrate the parallel run of hundreds of concurrent tests using AWS Lambda as the underlying compute. 

In addition, SLED is integrated into developers’ machines to deliver a completely seamless developer experience that responds as if the test was executed locally.

Developers at Wix can invoke upwards of a thousand different browsers, running a thousand different tests, and get the results from their laptops in two or three minutes!
Interested in learning more? Check out this video that outlines the architecture we use!

{% youtube hbz63Ve-eIY %}

Wanna try it out? It sounds complicated, but it's actually not that hard to implement!

{% youtube AsUAA8jsDAo %}

In this talk, Tom explains how this solution works and how you can adapt its core components to make it work for your project. 

Tom will walk you step-by-step through an open-source project on Github that you can clone, experiment with, and even adapt to your own needs.
Introduction to fundamentals of programming
Tags: javascript, python, beginners, webdev
Published: 2021-12-21 10:57:25


## Introduction

In this blog article, we are going to touch on basics of programming. This will be featured in Modern JavaScript Primer. You may preorder the book at [Modern JavaScript Primer for beginners](https://naftalimurgor.gumroad.com/l/modern-javascript-primer-for-beginners?_ga=2.254535885.452951391.1640080113-1815393575.1634632506&_gl=1*1aw98ju*_ga*MTgxNTM5MzU3NS4xNjM0NjMyNTA2*_ga_6LJN6D94N6*MTY0MDA4MDExMy4yMC4xLjE2NDAwODA4NzguMA..) . An early preview of the book will be released on 7/01/2022.

Let's jump into the basics. In the book, we shall cover the following topics as part of the basics:
1. Introduction to Data types and basic data structures
2. controls structures
3. Loops
4. Functions
5. Program construction basics

### Variables and constants
Variables are values referred to by a label that may change within the program execution. Introducing a variable in your program is known as variable declaration. Creating a variable and assigning an initial value is known as variable declaration and initialization.

```typescript
let output // declaration, this will will hold value 'undefined'
let input = 0.16 // declare and initialize with 0.16
```
Variables change within the program execution and may be reassigned to new values as the program exectes.

#### Note: 
Programs are executed sequentially, line by line (except for mutlithreading) from the first line to the last line or when the program finds a `return` keyword. Termination of the function/program terminates and `return`s a value to the calling function which may return or continue exectuting.

### Constants
Constants are like variables with exception that once declared, they can never be reassigned to hold new values. They represent entities that will never change during the program execution. 
#### Note:
It's good practice to use constants with meaningful names than magic constants as they become hard to read as program grows in complexity. 
It's common to give constant name in upperase seperated by an _ underscore, to show that they are constants.

```typescript
const VAT_RATE = 0.16
const POINT_OF_VIEW = 45 // camera point of view
const ASPECT_RATIO = 2.0 // aspect ratio
```
These examples use modern JavaScript for demo. In other languages (statically typed languages), one has to provide a type for the variable. For instance in C++:
```
String catName = "Nancy";
```

### Summary
Programming majorly involves manipulating data, storing the data, sending the data over the HTTP or displaying them nicely to a user assuming web/Frontend or mobile development.

1. Use meaningful and descriptive names.
2. use named constants instead of magic constants.

Merry Christmas 🎄🎄🎄