teleren/devto huggingface dataset:
Create A Loading Spinner with CSS Keyframes
Tags: css, webdev, tutorial, beginners
Published: 2022-02-04 20:13:05

A great way to level up any application your building is to create a simple loading animation. Today, we're going to make use of free resources and pure CSS to create a loading animation of our own.

Of course, this is not integrated with anything. Integrating the spinner with actual loading time in the app is a whole other tutorial, but for now, we're going to worry about creating the actual spinner!

![Spinner Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/558m0ct1fjq7s5o4ao0m.gif)

For this spinner I got this simple spinner of [Pixabay](https://pixabay.com/illustrations/circle-rainbow-logo-color-spectrum-1613999/) (thanks [gorkhs](https://pixabay.com/users/gorkhs-268986/)).

We start with just a very simple structure in our html.

    <div class="spinner">
      <img src="./rainbow.png" class="img"/>
    </div>

Tip: *Make sure you include the correct path and name to your image*.

To create the animation, we will use keyframes and the transform property. Below, we'll create a keyframe animation called `spin`:

     @keyframes spin {
       0% {
         transform: rotate(0deg);
       }
       100% {
         transform: rotate(360deg);
       }
     }

Now, let's style our actual spinner!

![Stylish Alien](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn2s6iuthhp01237j3p4.gif)
 
We created a div that contains the image in our HTML file, and assigned it the class of `spinner`. We will give it the following properties:

     .spinner {
       height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
     }

Now, for the actual image:

     .img {
       height: 150px;
       animation: spin 2.5s linear infinite;
     }


Now we have a working spinner!



Want to see the full tutorial? Watch the YouTube video below or watch in on [CodeCast](https://play.codecast.io/PbwpyNMmQG0l-pure-css-spinner) to get access to all the code in the Player!

{% youtube 3GhvMX0N-No %}

For more of my content, follow me on like [Twitter](https://twitter.com/amyeoulton) & [CodeCast](https://www.codecast.io/users/amy)! 

You can also read my last blog here:
{% link https://dev.to/amyoulton/create-a-portfolio-website-with-only-html-css-5bki %}.
Animating Composables (animateDpAsState)
Published: 2022-02-04 19:56:04

For this Series, We're going to animate the size of a box based on changing sizes. 
We'll try to create something like a size palette.

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

This follows same procedure as animateColorAsState but here we specify a Dp instead.

```
// --> 1
 val realCardSize = remember {
        mutableStateOf(100)
    }

//-->2
    val stateCardSize = animateDpAsState(targetValue = realCardSize.value.dp )


// --> 3
    Column(modifier = Modifier.fillMaxSize()) {
        Card(
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .padding(10.dp)
                .size(stateCardSize.value),
            backgroundColor = Green,
            elevation = 3.dp
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(text = "Current Size : ", modifier = Modifier.align(Alignment.Center))
            }
        }

// --> 4
        val cardSizes = listOf(100, 300, 500)
```

1. Declare the size of the box as an Integer(this could also be in Dp primarily so there's no need for conversion)

2. Define animateDpAsState variable and give it a targetValue of *realCardSize*

3. Here we create a Column parent view to host the Card and the list of size buttons.

4. We then declare a list of sizes we want the Box to take.


Let's now build the Chips **sizeButtonItems** at the bottom of the card


```
@ExperimentalMaterialApi
@Composable
fun ChipSizeItem(
    index: Int,
    isChecked: Boolean,
    size: Int,
    onChecked: (index: Int, size: Int) -> Unit
) {

// --> 5
    val chipColour = animateColorAsState(targetValue = if (isChecked) Green else White)
    Card(
        backgroundColor = chipColour.value,
        elevation = 3.dp,
        shape = RoundedCornerShape(100),
        modifier = Modifier.padding(5.dp).toggleable(value = isChecked,onValueChange = {
           // --> 6
            onChecked(index, size)
        })
    ) {
        Text(text = "$size.dp", modifier = Modifier.padding(horizontal = 20.dp, vertical = 5.dp))
    }
}

```

1. Set the chip Color based on the current selected chip size.
2. Return the index and size of the box when a chip is selected.

```
// --> 7

        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
            var currentIndex by remember {
                mutableStateOf(0)
            }

            cardSizes.forEachIndexed { cardIndex, cardSize ->
                ChipSizeItem(
                    index = cardIndex,
                    isChecked = cardIndex == currentIndex,
                    size = cardSize
                ) { index, size ->
                    currentIndex = index
                    realCardSize.value = size
                }
            }
        }

```

7. Add Code block 7 under cardSizes.

Get Full Code At: 
[GitHub link](https://github.com/develNerd/AnimatingCompoables/blob/main/app/src/main/java/ebook/iak/compose/series1/AnimateDpAsState.kt)
Github as a CMS for your blog?
Tags: blog, webdev, svelte, javascript
Published: 2022-02-04 20:02:15

# About this blog
![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99hetg2e1u7fwpww6asu.gif)

This blog uses Github as the CMS, meaning github hosts the markdown and media files for the blog.

## Demo
https://mframe.ca/blogs

## Source Code
https://github.com/MarcDAFrame/SvelteGithubBlog

## Why?
This is nifty because 
1. you don't pay for a CMS / hosting
2. your blogs can be version tracked
3. you can write blogs with the same workflow as you write your code

## How?
It's really dead simple

The blog uses the `Github Rest API` to query all the files in a repo, it then iterates through all the markdown files, building a tree view which is viewed on the `/blogs` page.

When a user clicks on the a blog they are linked to `/blog?file=[SOME FILE IN THE REPO]` where a call is made to the `raw.githubusercontent.com` endpoint to fetch the content for that file.

The only complicated part of this is how images and links are handled. A custom `SvelteMarkdown` renderer was created for both the Image and the Link which translated the image `src` to be fetched from the `raw.githubusercontent.com`, and translated the Link `href` to be relative to the currently open file, linking to the relevant `/blog?file=[SOME FILE IN THE REPO]` (if it was a relative link).

## Caveats
An individual, unauthenticated user can only make 60 requests an hour, which means the user can only refresh the page 60 times and can only view 60 blogs. The rate limiting is separate between the two domains (raw and api) which means viewing a blog, and viewing all the blogs have different rate limits.

However, this isn't much of an issue as an individual user isn't going to be reading / refreshing your blog that much - and if they are then they probably deserve to be rate limited.
SEO - Crawled - currently not indexed - Help
Tags: seo, google, help
Published: 2022-02-04 19:57:25

Google has crawled by site about a week ago, and only marked 5 pages as "valid". The majority of my pages are marked as "Crawled - currently not indexed".

Google says that means that "the page was crawled by Google, but not indexed. It may or may not be indexed in the future; no need to resubmit this URL for crawling."

Why did Google tag most of my pages as this, and how long will it take before they are added to the index (And is there anything I can do to speed up the process)?

Thanks!

EDIT: My robots.txt file. All the files that are not showing up in the index are inside of the “webhosting” folder, not mentioned in the file below. 

~~~

User-agent: *
Disallow: /admin
Disallow: /menu
Disallow: /menu.html
Disallow: /login
Disallow: /login.html

Disallow: /shop/*?page=$
Disallow: /shop/*&page=$
Disallow: /shop/*?sort=
Disallow: /shop/*&sort=
Disallow: /shop/*?order=
Disallow: /shop/*&order=
Disallow: /shop/*?limit=
Disallow: /shop/*&limit=
Disallow: /shop/*?filter_name=
Disallow: /shop/*&filter_name=
Disallow: /shop/*?filter_sub_category=
Disallow: /shop/*&filter_sub_category=
Disallow: /shop/*?filter_description=
Disallow: /shop/*&filter_description=
Animating Composables Made Easy 
Published: 2022-02-04 19:24:24


Animations in android hasn't always been straight forward to implement. The introduction of jetpack compose makes animations a bit more enjoyable and easier to implement.

In this article we'll be looking at the **animateValueAsState**  api. Values currently supported are Color,Float,Dp,Rect,Int,Inoffset and Instize.

Let's take a look at animating color states for this series. We'll be creating something like this


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

```

// --> 1

val Purple = Color(0xFF6200EE)
val Orange = Color(0xFFFF5722)
val White =  Color(0xFFFFFFFF)
val Blue =  Color(0xFF4052B8)
val Green =  Color(0xFF4CAF50)
val Yellow =  Color(0xFFFFEB3B)



// --> 2
 var currentColor by remember {
        mutableStateOf(White)
    }

// --> 3
    val colors by remember {
        mutableStateOf(listOf(White, Orange, Purple200, Blue, Green,Yellow))
    }

val cardBackground by animateColorAsState(targetValue = currentColor)


    Box(modifier = Modifier.fillMaxSize()) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
                .height(200.dp),
            onClick = { 
                // --> 4
                currentColor = colors.random()
             },
            backgroundColor = cardBackground,
            elevation = 3.dp, indication = rememberRipple()
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(text = "Click to Change Color", modifier = Modifier.align(Alignment.Center))
            }
        }

    }
```

1. We declare the colors we want to set the box as we click it.
2. _Animate*AsState_ requires a target state that is mutable.
NB : _Animate*AsState_ in it self needs immutable
3. Make a list from all defined colors
4. Assign *currentColor* a new value on click


**Happy Coding, See you in the next series !**
[Code Link](https://github.com/develNerd/AnimatingCompoables/blob/main/app/src/main/java/ebook/iak/compose/series1/AnimateColorAsState.kt)
TIL: `font-weight: 1 999;` is a thing
Tags: sass, css, variablefonts
Published: 2022-02-04 18:47:36

There's no way anybody uses variable fonts without just setting:

```css
@font-face { 
   font-weight: 1 999; 
}
```

...right? It's the same .woff2 file in the end so it seems like it should be the same performance. Otherwise, you gotta do the @font-face rules for every single declaration:

```css
@font-face { 
   font-weight: 200; 
}
@font-face { 
   font-weight: 400; 
}
//...etc
```

Just learned that the `1 999` syntax existed today in a tiny section on a blog post on Digital Ocean. [There's some better examples on there](https://www.digitalocean.com/community/tutorials/css-variable-fonts#using-variable-fonts-with-font-face). Seems useful 😝
How to Install Java on Manjaro Linux
Tags: linux, java, tutorial, installation
Published: 2022-02-04 18:01:00

## Table Of Contents
* [**Install OpenJDK with "Terminal"**](#chapter-1)
* [**Install OpenJDK with “Software Manager”**](#chapter-2)
* [**Check Java Version**](#chapter-3)
* [**Check Javac Version**](#chapter-4)

## Install OpenJDK with "Terminal" <a name="chapter-1"></a>
* Open your **Terminal**
* Type `pamac install openjdk` on your terminal and then press **[ENTER]** 
* Wait for the downloading and installation progress.

<img src="https://miro.medium.com/max/720/1*R2k3pT05EblDTZMIa1NkLg.webp" alt="Installing Java using Terminal" border="0">
<figcaption>Installing Java using Terminal</figcaption>

## Install OpenJDK with “Software Manager” <a name="chapter-1"></a>
* Open **Add/Remove Software**
* On the **Search Box**, type `openjdk` and then press **[ENTER]**
* Use the appropriate one for whichever Java version you wish to install.

<img src="https://miro.medium.com/max/720/1*h-3U_aJWUnc8sUXws1d-Sw.webp" alt="Installing Java from Add/Remove Software" border="0">
<figcaption>Installing Java from Add/Remove Software</figcaption>

## Check Java Version <a name="chapter-3"></a>
You can check if Java is installed and see what version you’re running by executing this command:
`java -version`

<img src="https://miro.medium.com/max/720/1*vg4XEsRzN9E-_iy1voUlLA.webp" alt="Check java version command" border="0">
<figcaption>Check "java version" command</figcaption>


## Check Javac Version <a name="chapter-4"></a>
You can check if Javac is installed and see what version you’re running by executing this command:
`javac -version`

<img src="https://miro.medium.com/max/720/1*ppA6JCYPrfj5YcYhtJ5lTQ.webp" alt="Check javac version command" border="0">
<figcaption>Check "javac version" command</figcaption>

Finish.
What is HTML 5?
Tags: html, web, design
Published: 2022-02-04 17:58:35

So if you’ve been paying attention to chatter on the Internet these days, especially geeky chatter, you may have heard the term [HTML 5](https://www.coderepublics.com/HTML/html5-tutorial.php). Well, what is that HTML stands for? Forget it. But it’s the behind-the-scenes coding language that makes us able to see stuff online. Since the original HTML was invented with the web over 20 years ago, it has gone through many updates, but it’s been more than a decade since the last one.

And in web terms, that’s pretty much forever. I mean, like, ten years ago, we all still loved our digital watches, Calculator. So HTML has been a few steps behind changes on the web for quite some time.

For example, when the video came along, there was no way to integrate it naturally into HTML, so different companies developed their own video players to work around it. These worked okay, but they were all external plugins, meaning that you had to download them and this was, well, annoying and potentially risky.

Html 5 is adding capabilities to deal with this stuff like video right into its code so that plugins hopefully won’t be necessary, and there are plans to add a bunch more cool stuff that previously was tricky or even impossible to implement with HTML alone. 

The overall hope is that someday it will create a standard, consistent web experience across all devices and browsers. Html Five is still being developed and as of early 2012 isn’t 100% finalized, but the browsers are starting to implement some of its features, and together they are working hard to get HTML Five fully ready for someday in the future.

**Also Read:**
> [What is linux](https://www.coderepublics.com/linux/what-is-linux.php)?
> [Python Tutorial](https://www.coderepublics.com/Python/python-tutorial.php)
VYou offers Password Manager software
Tags: saas
Published: 2022-04-26 17:16:13

---
title: VYou offers Password Manager software
published: true
date: 2022-02-04 16:39:58 UTC
tags: SaaS
canonical_url: https://vyou-app.com/en/vyou-offers-password-manager-software/
---

On average a person spends more than 10 hours per year resetting passwords. Almost every website you visit, from social media apps to hyper-secure banking sites, requires you to create a user account and set up a password. Our human memory just can’t keep up with dozens of passwords. Some people just use the simplest possible passwords, things that are easy to remember, like 123456789 or name of their daughter or anniversary date, etc. Others memorize one random password and use it for everything, actually more than 50% of people reuse passwords across business and personal accounts.Either way is highly risky and can lead to identity theft. People apply these bad password habits because they have to use too many passwords every day and onebody could possibly remember unique passwords for every login they use.

## Password Privacy Management 

Password privacy management is essentially an encrypted digital vault that stores secure password login information you use to access apps and accounts on your mobile device, websites and other services. Actually with a tool like [VYou](https://vyou-app.com/en/) you just have to remember one password and VYou offers [SSO](https://vyou-app.com/en/single-sign-on-benefits-with-vyou/) and allows you to enter all your platforms with one set of credentials.

When you find yourself constantly getting locked out of one online account or another because you’re drawing a blank when you try to log in, it’s time to consider password privacy management, which can help you with access management while maintaining password security. With password privacy managegement, you don’t have to remember strong, unique passwords for all your accounts.

Taking into account that on average employees use more than ten apps every hour, eliminating multiple logins can save a company considerable time and money.

## VYou provides Password Privacy Management

VYou makes it simple to use a strong, unique password for all your online accounts. VYou offers a single point of access. One login and you access all your apps using the same VYou account. Reduce risk and increase productivity with an SSO solution that works for you and your users.

VYou provides greater control, superior security, and ease of use. It makes you scale.

VYou eliminates the frustration of having to reset forgotten passwords and helps in improving productivity, management, and security control reducing the risk of lost, weak or forgotten passwords. It offers frictionless registration and login solution which authenticates users across all of your applications & brands with a barrier-free, customizable experience. Moreover, VYou provides a dashboard to turn on and off access centrally for all your apps.

[Request a DEMO](https://vyou-app.com/en/contact/) and try a powerful user and access management solution ready from day one with fast implementation and easy integration.
:first-child en CSS
Tags: css, html, spanish
Published: 2022-02-04 17:57:19

La pseudoclase `:first-child` nos ayuda a dar estilos al primer elemento de una lista de selectores. Por ejemplo, imagina tener una lista en HTML con `ul`-`li` o simplemente una lista de los mismos selectores como enlaces (etiquetas `a`) o párrafos (etiquetas `p`) y en cualquiera de estos casos buscamos pintar, por ejemplo, al primero elemento hijo de esta lista en color rojo. Esto lo lograremos agregando la pseudoclase `:first-child` a nuestro selector.

HTML
```HTML
<ul>
    <li>Primer hijo</li>
    <li>Segundo hijo</li>
    <li>Tercer hijo</li>
</ul>
```

CSS
```CSS
ul li:first-child {
   color: red;
}
```

Si te gustó el post, cuéntame en [Twitter](https://twitter.com/ramez_cesar) 😀
Five* JavaScript concepts for your next interview
Tags: javascript, node, webdev, tutorial
Published: 2022-02-04 17:49:32

Hey There! 👋🏾

Hope you are doing well. 

Have you worked on several projects that use **JavaScript**, **Node.js** or **React.js** before but never found the time to actually study the core concepts of the language?

OR 

Do you have an interview coming up and need a quick revision?

Do not worry. You are not alone! 

In today's article, we look into some super important concepts related to the language that make or break an interview. 

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

---

### 1. Event propagation
This is an interviewer's favourite and checks your concepts related to **event handlers**, **bubbling** and **capturing** of events. Here is a quick summary:

{% youtube 0cYZjrUkZ5o %}

### 2. Scope
Next up is the concept of scope in JavaScript. This is important too because it forms the basis for understanding other advanced concepts like closures. 

{% youtube FSAQxiwqeG0 %}

### 3. Closures
This is the all-time interviewer favourite and it is so for a reason. This concept checks several other underlying concepts and an in-depth understanding of the language. 

{% youtube e8_bZ3zhYPE %}

### 4. Prototypal inheritance
The kind of inheritance in JavaScript is different from that in other languages like Java and c++ and that is what makes it all the way more important to understand how that works.

{% youtube e8_bZ3zhYPE %}

### 5. Strict mode
Did you know there is a strict mode in JavaScript? Although rare, this question still comes up sometimes in an interview and it is a good idea to have some clue regarding what it is all about. 

{% youtube H5VV5Ebd8Yg %}

### Bonus: !! Operator
This is a bonus concept and maybe it would never get asked in any interview but is still an interesting concept to know about the language!

{% youtube hjG-o-sWHq0 %}

Hope you found all those helpful. 🙌🏾

Go rock your next **JavaScript** interview!

Cheers!
JavaScript's prototype vs __proto__
Tags: javascript, webdev, beginners, programming
Published: 2022-02-04 17:49:24

If you're a JavaScript developer, you might have come across the word **"prototype"**. But have you come across **"\__proto__"**? If yes, ever wondered what's the difference? If not, let me fill you in.

### Prototype
 It is an object that contains certain properties and methods, which by default in JS automatically get associated with an object(remember that functions, dates, arrays, etc are all considered as objects) created in your JavaScript code.

**Prototypes** are like a blueprint for a constructor function (functions that create new objects) containing all features that should be inherited by all the instances (objects produced by that class constructor).

So in short, it's a master blueprint containing various properties and methods for a class constructor, and every object created from that constructor will inherit those properties and methods.

Now the question is, how does one access those methods and properties inherited by that object (which got created by a constructor)? Yes! through **"\__proto__"** object.

### \__ proto __
It is an object that points to the prototype it was created from. So "__proto__" is the prototype of that particular object now.

For example, if you create an array using `new Array` constructor, that array's `__proto__` will point to the prototype of Array constructor, and since array is also considered an object in JS, Array constructor's `__proto__` will point to the Object constructor's prototype. Prototype of `Object` constructor is the master blueprint and its prototype doesn't point somewhere (will return null)


![Acting Director.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643996692974/3-MWREEC4.png)

Want to learn this concept with an amazing example and further clarity? Check out this [amazing article](https://javascript.plainenglish.io/proto-vs-prototype-in-js-140b9b9c8cd5) by Andrew Chung on the same.

Happy coding :)

#10daysofJSfundamentals (DAY 8)