teleren/devto huggingface dataset:
pseudo classes in CSS - part 4 (:active)
Tags: css
Published: 2022-02-12 06:31:37

Note: This is the 4th part of the 5 part series dedicated to the pseudo classes of CSS.

In this part, we'll understand the the pseudo class :active but if you want to jump to any other pseudo class, be my guest and click on the links provided below:

part 1: [pesudo class :hover](https://dev.to/therajatg/pseudo-classes-part-1-hover-28ad)

part 2: [pseudo class :link](https://dev.to/therajatg/pseudo-classes-in-css-part-2-link-47e5)

part 3: [pseudo class :visited](https://dev.to/therajatg/pseudo-classes-in-css-part-2-visited-3h2a)

part 4: [pseudo class :active](https://dev.to/therajatg/pseudo-classes-in-css-part-4-active-2m1e)

part 5: [pseudo class :target](https://dev.to/therajatg/pseudo-classes-in-css-part-5-target-3oe8)

** The :active selector is used to style the active link.**

The difference between :link, :visited and :active is very subtle. Therefore, I urge to open your code editor and start playing with these.<br/>
We can better understand the :active selector via an example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:active{
            color: red;
        }
    </style>
</head>
<body>
    <h1><a href="#">I am a link.</a></h1>
</body>
</html>

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h08ru28x2hbb9q4ib0al.gif)
👆 As you can see above the link's original color is lost as soon as we click on it and it turns red. However, **when we release** the mouse pointer, the red color is lost. 

Note: The active selector can be used on all elements and not just links.

Here's a quick summary:
1. Use the :hover selector to style links when you hover over them. It can be used on elements other than links.
2. Use the :link selector to style links to unvisited pages.
3. Use the :visited selector to style links to visited pages.
4. The :active selector is used to style the active links. It can be used on elements other than links.

LVHA: If you are using one or more of these selectors in a single page then use the link selector first then the visited selector then hover and finally active at the end.


That's all folks.

**If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.**

**I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..**

**my Twitter handle:** @therajatg

**If you are the Linkedin type, let's connect**: https://www.linkedin.com/in/therajatg/

**Have an awesome day ahead 😀!**
How to create an Accordion using CSS & Javascript
Tags: css, javascript, webdev, html
Published: 2022-02-12 06:23:16

Explained how to create, Style and Implement Expand and Collapse behaviour about Accordion using Html Css and JavaScript.

Hope you enjoy this content 
Timeline :
00:00 Teaser
00:36 Create Markup Using HTML
02:05 Style using CSS
06:00 Expand / Collapse using JavaScript
{%youtube APxbG5K_Eys%}
Tilt on hover using Vanilla-tilt.js
Tags: javascript, webdev, ui, ux
Published: 2022-02-12 06:20:33

Steps:

1. Add jQuery cdn

`<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
`

2. Add Vanilla-tilt.js cdn

`<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.2/lib/vanilla-tilt.min.js"></script>
`

3. Add Attributes according to effect you require. For eg.


- data-tilt - mark your element
- data-tilt-max="50" - max tilt rotation (degrees)
- data-tilt-speed="400" - speed of the transition


### Final code - 

```html
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div>
    <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.2/lib/vanilla-tilt.min.js"></script>
</body>
</html>

```
Global State Management in Svelte
Tags: svelte, javascript, webdev
Published: 2022-02-12 06:15:57

When we manage global states in frontend, for example, in **React**, we use *React Hooks* or *Redux* in most cases.  
But the implementation of *Rudux* is complecated and redanduncy. Although React Hooks is somewhat better in that respect, I want to do that more easiliy!

I often used to use React on my personal project a few years ago. However, the global state management is very annoying for me and that's why I decided to change the framework from React to **Svelte** (Although, strictly speaking, Svelte isn't a framework, it's a compiler).  

The management of global states in Svelte is much easier than that in React.  
Let's explain in order.  


## 0. Create Svelte project

```shell
npx degit sveltejs/template my-project
cd my-project
npm install
npm run dev
```

See the [official page](https://svelte.dev/).  


## 1. Create *stores.js* in *src* directory

First, in *src* directory, create a JavaScript file in which declares and stores global states.  
The file name is arbitrary like **stores.js** or **globalState.js**, etc.  


## 2. Declare global state variables using *writable*

```js
// src/stores.js
import { writable } from 'svelte/store';

export const myName = writable("Adam");
```

By doint this, we can use this value(*myName* here) and change it anywhere/anytime in project.

## 3. Use global states

We can use global state values by adding *prefix(**$**)* to them. For example, in *Home.svelte*:  

```html
<!-- src/routes/Home.svelte -->
<script>
    import { myName } from '../stores';
</script>

<span>My name is {$myName}.</span>
```

## 4. Update global states

It's also pretty easy to change states.
All we have to do is **import global states and assign new values to them**. For example, in *About.svetle*:  

```html
<!-- src/routes/About.svelte -->
<script>
    import { onMount } from 'svelte';
    import { myName } from '../stores';

    onMount(async () => {
        $myName = "Eve";
    });
</script>

<span>My real name is {$myName}.</span>
```

## 5. Conclusion

Once experience this, it's simple and easy enough to hesitate to use other frontend frameworks.  

It also works **SvelteKit** by the way.
Comparison between fetch and axios
Tags: javascript, beginners
Published: 2022-02-12 06:13:22


This is a memo when I compare these two methods.
## 1.GET

### fetch
```javascript
    fetch(url)
    .then((res) => {
       if (!res.ok) {
       // need error handling here
         throw Error();
        }
       // need conversion
       return res.json();
        })
    .then((data) => {
     // use this data
    })
    .catch((error) => // error handling )
    .finally(() => // this is optional);
```
### axios

You can omit .get when using GET method
```javascript
    axios.get(url)
    .then((response) => {
      const data = response.data;
      // use this data directly
    })
    .catch((error) => // error handling)
    .finally(() => // this is optional);
```
## 2. POST

### fetch
```javascript
    fetch(url,
      {
        method: "POST",
        // you can omit headers nowadays
        headers: {
           "Content-Type": "application/json",
        },
        // need conversion
        body: JSON.stringify(
         {
          tag: data.tag,
          imageUrl: url,
         })
      })
    .then((res) => { 
     // need error handling here
      if (!res.ok) {
        throw Error();
        }
      })
    .catch((error) => { // error handling });
```
### axios
```javascript
    axios.post(url,
    {
    // you can put an object directly
     tag: data.tag,
     imageUrl: url,
    })
    .then((res) => { // success operations})
    .catch((error) => { // error handling });
```
## 3. DELETE

### fetch
```javascript
    fetch(url,
      {
        method: "DELETE",
      })
    .then((res) => {
      // need error handling here
      if (!res.ok) {
         throw Error();
       }     
       // success operation
     })
    .catch((error) => { // error handling })
```
### axios
```javascript
    axios.delete(url)
    .then((*res*) => {
     // success operation
     })
    .catch((error) => setError("Delete failed"))
    .finally(() => setLoading(false));
```
### conclusion

I finally understand why a lot of developers prefer to use axios even though we need to do a cumbersome process of installing and importing. It is obvious that axios is much simpler than fetch, and we can avoid unconscious bugs because of forgetting throwing errors. Therefore, I will use axios from now on.

Thank you for reading.
I’m happy if you give me some comments advice or feedback :)

The original article is [here](https://medium.com/@lada496/comparison-between-fetch-and-axios-e9f2c4884731)
Golang: convert algorand address to public key
Tags: go, algorand
Published: 2022-02-12 06:06:33

Install Algorand SDK:
```bash
$ go get -u github.com/algorand/go-algorand-sdk/...
```


```go

import (
    "crypto/ed25519"
    "crypto/sha512"
    "encoding/base64"
    
    algocrypto "github.com/algorand/go-algorand-sdk/crypto"
    "github.com/algorand/go-algorand-sdk/types"
)


func algoAddrToPublicKey(address string) (ed25519.PublicKey, error) {
	addr, err := types.DecodeAddress(address)
	if err != nil {
		return nil, err
	}
	bytes := [sha512.Size256]byte(addr)
	return ed25519.PublicKey(bytes[:]), nil
}

func main() {
	addr := "<wallet address, 58 characters>"
	pubKey, _ := algoAddrToPublicKey(addr)
	msg := "message to sign"
	// if raw sigature is base64 encoded, we need to decode it
	sig, _ := base64.StdEncoding.DecodeString(rawSig)
	valid := algocrypto.VerifyBytes(pubKey, []byte(msg), sig)
}
```
How do I score 85/100 on my first attempt in LFCS exam
Tags: lfcs, linux, cloud, sysadmin
Published: 2022-02-12 05:46:51

### Brief about the Certification
If you want to demonstrate your system administration skills to your current/future employer then I would highly recommend to do [LFCS](https://training.linuxfoundation.org/certification/linux-foundation-certified-sysadmin-lfcs/) certification. The exam consists of performance-based items that simulate on-the-job tasks and scenarios faced by sysadmins in the real world. Candidates can select either Ubuntu 18 or CentOS 7.

### How I started
On Oct21 I have decided to take a jump in my DevOps journey and enrolled myself for [cloud engineer bootcamp](https://training.linuxfoundation.org/training/cloud-engineer-bootcamp/) provided by Linux Foundation. 
In that bootcamp there are 5 courses and 2 certifications. LFCS was one of that. If you look into there timeline, then after completing LFS201 and LFS211 you are ready to give exams. It took me 3 months i.e. till the beginning of Jan to complete both the course. ( It took me long as I have my fulltime job also as a DevOps Engineer).

After that I started looking for some blogs and other people's preparation guide on how to clear LFCS certification. 

Then I did a lot of practices on different problems of various topics. 

**Here is the checklist**
1. Essential Commands 25%
1. Operation of Running Systems 20%
1. User and Group Management 10%
1. Networking 12%
1. Service Configuration 20%
1. Storage Management 13%

Also you can get full Preparation guide from [Linux Foundation](https://resources.linuxfoundation.org/LF+Training/LF_Training_WP_CertificationPrepGuide_October2018+(6).pdf)

After having good practice I decided to give my exam on 6th Feb 2021(Sunday early Morning IST).


### How it is going!
And here is the result (:smiley:)

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



### Here are the few important things which I learned during my preparation.

1. `man -k <keyword>` is your go to guy to get any clue about any command/topic.
2. Don't memorise the command instead practice and understand the concept.
3. Keep practice on your virtual machine and not on any bare metal box. ( I have crashed my VM many times due to wrong configurations in partition  :grin: )
4. When you practice don't do google try to always look in man. Think like what if I forgot what needs to be write in config or what will be command then where I have to look.( Most probably there will be default conf under etc or you can look man).
5. Remember questions are not that much tough in the exam, It is the time where people usually fail. I myself not able to attempt 2 questions(which is of marks). So don't stick on a single question for more than 5-7 mins.


Lastly solve as much problem as you can, complete the [Practice Questions](https://training.linuxfoundation.org/wp-content/uploads/2019/10/LFCS-Practice-Questions-v1.1.pdf). All the best.
Rails App project
Tags: flatiron, ruby, beginners, rails
Published: 2022-02-12 05:17:46

(https://github.com/RoUchiha/Flatiron-Phase-3-Rails-app-portfolio-project)

This project felt a lot like the project for Phase 2, only lengthier. Most of what was required of me was fairly simple, but the amount of coding that had to be done is what made this a challenge. More code means more chances for mistakes, and I ended up catching quite a few of my own.

The Rails app I made is a TV Show Tracker that allows users to sign up, create shows, and then leave ratings/reviews for other users to see once they have finished watching that show. The most challenging part of this app was getting the routes figured out and preventing access to pages if a user was not signed in. After that was done, the next challenge was creating the Rating and Comment objects via nested resources. Thanks to some Google searching, I eventually solved the errors that kept popping up and the rest of the app was easily completed. Utilizing OmniAuth to allow users to signup/login via GitHub was easy since I followed the conventions from a previous lesson. 

```
def create 
        user = User.find_by(username: params[:session][:username].downcase)
        if user && user.authenticate(params[:session][:password])
            session[:user_id] = user.id 
            redirect_to user_path(user)
        else
            flash[:alert] = "Incorrect username and/or password. Please try again."
            render :new 
        end
    end
```

```
def github_login
        @user = User.find_by(username: auth[:info][:nickname])

        if @user.nil?
            @user = User.new(
                username: auth[:info][:nickname],
                full_name: auth[:info][:name],
                password: SecureRandom.uuid
            )
        end
        if @user.save 
            session[:user_id] = @user.id 
            redirect_to user_path(session[:user_id])
        else
            render :new 
        end
    end
```

This app utilizes a lot of has_many and has_many_through relationships that made the functionality of the app a lot smoother, and made it easy to create associations between parent and child objects. I also took advantage of Flash alerts to display errors and let users know why they cannot access a certain page.

An area I still need to improve on is making my app look nice via CSS/HTML styling. I kept everything a basic black and white barebones look so that I could finish the project as fast as possible and move on to the next Phase, but I plan on working towards getting better at styling for the next couple of projects.

This project felt like more of what would be expected of me in a "real world" situation where I need to make a website/app, and I feel like I have a strong grasp on these basics now.
CSS Image Hover Effects Zoom, Rotate, Slide.
Published: 2022-02-12 05:11:25



## Common HTML/CSS

Basically, some HTML and CSS code are actually the same for every hover effect such as width, height, margin, padding, etc. that’s why I am writing here you can add to your hover effect.

```
//HTML
<figure>
  <img src="image.jpg">
</figure>
```

```
//CSS
figure {
  width: 300px;
  height: 200px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
```

## 1. Zoom In # 1

CSS image hover effects zoom is a type of effect that enlarges the image when the user hovers over it.

This is a great way to show off high-resolution images on your site, and it also adds an element of surprise when the user hovers over an image for the first time.

```
figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
```

## 2. Zoom In # 2

Basically, this CSS image hover effects zoom is exactly the same which we have discussed above.

The zoom effect will create a magnifying glass that zooms into the image when hovered over. In this hover effect, you just have to change the width of an image and it will look different.

```
figure img {
  width: 300px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 350px;
}
```

## 3. Zoom Out # 1

This CSS image hover effects is exactly reversible of the effects which we have discussed above( Zoom In # 1).

As you can see in the image effect that zooms out the image by reducing the value.

```
figure img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1);
  transform: scale(1);
}
```

## 4. Zoom Out # 2

This CSS image hover effects is exactly reversible of the effects which we have discussed above( Zoom In #2).

This type of effect is mostly used in portfolio sites. It is useful in situations where we want to show the user details on the image.

Here’s the CSS code:

```
figure img {
  width: 400px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 300px;
}
```

## 5. Slide

The slide effect will show a slideshow of all the images in order when hovered over and back to normal when not hovered over.

If the width of the image to be used is larger than “the area you want to display + the distance you want to slide”, you scaledo not need to specify it in the sample code.

Here’s the CSS code:
figure img {
  margin-left: 30px;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  margin-left: 0;
}
https://untiedblogs.com/15-amazing-css-image-hover-effects-zoom/
How I built a product searching site from scratch with Next.js and got 937k visitors in 6 months
Published: 2022-02-12 05:03:55


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m30p46j36scs3sm5o1e.PNG)

I’m going to show you how I built a product search site using Next.js and Elasticsearch in 6 months by myself.


**How Everything Started**

The idea of making a search engine for products came to me one day when I started an e-shop selling electronics in Hong Kong. Since the shop has little reputations built yet, I adopted the strategy of being the cheapest seller in the web. I searched for the same the product online and mark it as the lowest price on the web. I thought: 

> There will be lots of enqueries and potentials buyers as most people should decide where to purchase based on the price.

Obvisouly, it didn’t turn out the way I planned. Since searching cost is high as pricing information is hard to get without spending lots of time browsing over the internet.

So as a developer I ask myself

> Why is it so hard to find the cheapest price for the same product in Hong Kong? Can I make it easy and simple?

I started to think about this problem and I came up with the idea of a product search engine which could crawl all the eshops in Hong Kong and compare the prices for the user.


**Technical Stack**

The first step was to find a technology stack that I could use to build the product. I looked into a few different options and I eventually decided to use Next.js and Elasticsearch.

Next.js is a great framework for building React applications and it makes it really easy to get started. And Elasticsearch is a great search engine for indexing and searching through large amounts of data. Moreover, Next.js has built-in support for Server side rendering, which is brilliant for Search Engine Optimization.


**The Final Product**

After 6 months of development, I finally had a product that could crawl most of the eshops in Hong Kong and compare the prices for the user. If you are interested, you may check it out at [https://moredeal.org/](https://moredeal.org/).
Ekstensi Tab Muter untuk menonaktifkan satu tab di Chrome
Published: 2022-02-12 04:37:37

Sebelumnya kita dapat mute tab individual di Chrome dengan mengaktifkan opsi <strong>Tab Audio muting UI control</strong> di <strong>chrome://flags</strong>. Setelah rilis Chrome 64, pengguna hanya memiliki opsi untuk membisukan situs daripada tab individual.

Dan ini berarti bahwa jika ingin menonaktifkan sebuah situs, maka semua tab situs lainnya juga akan dinonaktifkan. Misalnya, Jika membuka beberapa tab Google Meet di Chrome, semuanya akan dibisukan sekaligus.

Bagaimana Jika ingin menonaktifkan salah satu tab situs di Chrome? Yah, itu masih mungkin tetapi dengan bantuan ekstensi Chrome.

<h2>Mengapa menonaktifkan satu tab?</h2>
Kebutuhan untuk mute salah satu tab mungkin diperlukan, katakanlah ketika Anda hanya ingin membisukan tab Google Meet tertentu tanpa mengganggu semua sesi Google Meet lainnya. Meskipun seseorang selalu dapat menjeda atau membisukan video atau live streaming tertentu di pemutar media browser. Namun, itu tidak semulus dan secepat langsung mematikan tab individual dari antarmuka utama.

Seperti yang di lansir oleh <a href="https://hape4g.com/">Hape4G</a>, untuk bisa menonaktifkan tab tertentu di Chrome, Anda dapat menggunakan ekstensi <strong>Tab Muter</strong> atau <strong>Mute Tab</strong> untuk Chrome. Kedua ekstensi ini mengembalikan fungsionalitas <strong>Tab Mute</strong> yang pernah ada di Chrome. Sekarang mari kita lihat cara mengatur dan menggunakan ekstensi.

<strong>CATATAN</strong> : Anda perlu menginstal salah satu dari dua ekstensi tersebut. Saya pribadi menyarankan <strong>Tab Muter</strong> oleh <em>Ash Holland</em> karena ini baru dan diperbarui baru-baru ini. Pengembang juga telah mengungkapkan kebijakan privasi yang menyebutkan bahwa ekstensi tidak akan mengumpulkan atau menggunakan data Anda. Anda bahkan dapat menemukan kode sumbernya di GitHub.
<h2>Gunakan Ekstensi Tab Muter Chrome</h2>
<ol>
 	<li>Instal ekstensi <strong>Tab Muter</strong> dari Chrome Web Store di PC Windows atau Mac.</li>
 	<li>Setelah Tab Muter ditambahkan ke Chrome, buka menu Extension dan klik <strong>Pin button</strong> di sebelah Tab Muter untuk menyematkan ekstensi ke toolbar untuk akses yang lebih mudah.</li>
 	<li>Ikon speaker sekarang akan muncul di bilah alat browser Anda di kanan atas.</li>
 	<li>Untuk menonaktifkan tab dengan Tab Muter, buka tab yang ingin Anda nonaktifkan dan klik ikon <strong> <strong>Mute tab</strong> </strong>. Pada titik ini, Anda akan melihat ikon bisu pada tab bisu alih-alih ikon speaker.</li>
 	<li>Untuk membunyikan tab, klik ikon lagi.</li>
</ol>
Satu-satunya kekurangan di sini adalah Anda harus terlebih dahulu memilih tab yang ingin Anda mute dan kemudian mengaktifkan tombol mute/unmute. Sementara itu, Firefox dan Microsoft Edge secara default menampilkan ikon speaker di sebelah judul tab untuk menonaktifkan tab tertentu.