teleren/devto huggingface dataset:
Understanding :is() by Examples
Tags: webdev, css, pseudoclass, frontenddev
Published: 2022-10-17 06:05:34

The :is() a functional CSS pseudo-class. Originally it was named :matches() and :any(), now this selector is renamed to :is().

**What does it do?**
It takes a selector or a collection of selector(separated by comma) as argument and select any single element or group of elements based on the argument.

Let's go to clarify the concept through examples.

**_Example 1_**
normal nesting. Make a group of child element.


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


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

⚠ Be careful about space between main and :is().If there is no space, nesting will not work. What will happen when without space, it will be discussed after few moment later.

_**Example 2**_
Apply the same styling to more than one element. That is the beauty of :is().Make a group of parent element.


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


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


_**Example 3**_
Multiple use of :is() for complex nesting. Here parents elements and child elements are different but combine them in a single line.


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

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

_**Example 4**_
It is also possible to same lavel styling using :is().There is no space before :is().


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



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

🤞Hope, with this example, you may have clear idea when to put space or not before :is().



_**Example 5**_
Use combinator(>, +, ~) with :is().


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

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


Here, anchore tag(`<a>`) doesn't change the color, because it is not a direct child. But other child works well because :is() has "forgiving selector" feature. 

⚠⚡:is() does not work with pseudo-elements.

`:is(::before, ::after) {...}` is invalid.

**Specificity of :is()**
The specificity of :is() will be the highest specificity of the selector from selector list in its argument.

`:is(selector1, selector2, .className)`--> specificity is 10 beacuse .className.
`:is(selector1, #idName, selector2, .className)`--> specificity is 100 because #idName.


All examples' live code 
{% codepen https://codepen.io/sampad-sarker/pen/OJZqGXd %}


That's all 🎉
Thanks for reading till the end.👍
Hacktoberfest - PR#2
Tags: opensource, css, hacktoberfest
Published: 2022-10-17 05:51:14

### My second PR

For my 2nd PR for Hacktoberfest I've been working on project [QuickWiki](https://github.com/kartik3805/QuickWiKi), which I find quite useful. It displays a short summary for any Wikipedia article in seconds.

### Issue

The [issue ](https://github.com/kartik3805/QuickWiKi/issues/25) I've been working on asked me to center the search input and other content at the middle of the screen, so that the user would get better UX.

### Solution

The way I solved this issue by adding div around the elements that will be placed in the center. After that, I applied certain styles to this div.

Styles that I applied to the element :

```
.center-container {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 100%;
 }
```


### Overview

My [PR](https://github.com/kartik3805/QuickWiKi/pull/31) wasn't much of code, but it was a useful improvement for the project. I'm really glad I made it look prettier.

I really enjoy working on open source projects, all of them are so different and most of them have some value to present.

Keep up !

Have a great Hacktoberfest, there is more to come :)
SEO VS PPC: WHICH IS THE BETTER OPTION?
Tags: seo, ppc
Published: 2022-10-17 05:44:18


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

**Read More: ** https://absyz.com/seo-vs-ppc-which-is-the-better-option/
How to Bootstrap a New Project Using NestJS and React
Tags: javascript, webdev, tutorial, react
Published: 2022-10-17 05:33:32

NestJS is an efficient, scalable framework on Node.js for building server side applications. It is quickly growing in popularity, and currently is my favorite server side framework (Rails will always have a place in my heart though).

![nestjs cat and react atom logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ye0jfe8paggowlltdgt9.png)

Before we get started, you're going to need to install Node.js and npm. I highly recommend using a package manager like [**nvm**](https://github.com/nvm-sh/nvm) if you don't have one already.

---

A great use for Nest is to pair it with a React frontend because your whole codebase can then be in the same language. No need to find a Ruby dev for the backend and a PHP dev for your front end. Typescript baby! 

Anyways, getting started with using NestJS and React is super simple and I'll walk you through it.

Note: Nest is written in Typescript, so if you haven't already made the transition from Javascript well--[here's why you should](https://dev.to/omerwow/why-you-should-learn-typescript-today-dmo)

## Setting up
First, you're going to want to create seperate folders for your frontend and backend so

```shell
$ mkdir frontend && mkdir backend
```

Now let's initialize a new Nest project. If you haven't already, you need to download @nestjs/cli. To do this:

```shell
$ npm i -g @nestjs/cli
$ nest new backend
```

Great! Now, for the frontend we're actually going to use Create React App. It's an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

```shell
$ npx create-react-app frontend --template typescript
```

Awesome! Now, we have downloaded everything for a good start. 

## Dev servers
You can start the development for the backend by using:
```shell
$ npm start:dev
``` 
and the frontend development server with:
```shell
$ npm start
```

Make sure you're in their respective directories, of course.

## Testing

If you haven't set up testing for your app, now is the time. By default, Nest uses [Jest](https://jestjs.io/). In order for Jest to transpile Typescript you will need to install ts-jest.

You can do so with:

```shell
$ npm i -D @nestjs/testing ts-jest @types/jest
```

If you're having problems you might need to make a config file so Jest knows what files to transpile:

```shell
$ npx ts-jest config:init
```

And that's it! If you have any problems, definitely check out the official documentations here:

[NestJS](https://docs.nestjs.com/)
[Create-React-App](https://create-react-app.dev/)
[Jest](https://jestjs.io/)
[ts-jest](https://kulshekhar.github.io/ts-jest/)

And, as always, you can [clone the repo](https://github.com/professorjrod/nestjs-reactjs-blog) if you'd like

For my next blog post I'll probably setup another interesting stack! This stuff is definitely nice to have in one source. Hope this helps and HAPPY CODING!!!
Top Crypto Launchpads
Tags: webdev, news, blockchain, security
Published: 2022-10-17 05:24:22

An [Initial DEX Offering](www.brugu.io) (IDO) launchpad is a crypto crowdfunding platform that utilizes decentralized crypto exchanges (DEXs) for token listing and liquidity. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3pszf6fi04ncttouvxu.png)
Software Documentation
Tags: beginners, programming, devops, tutorial
Published: 2022-10-17 05:19:20

A software program's accompanying textual, visual, or video instructions are referred to as documentation. Its objective is to give the recipient details on various facets of the program. It could specify how the software works or go into detail about the license and legal issues.

Software documentation often provides instructions on how to use a service or an application. Reliable documentation is always required for programmers. The existence of documentation enhances the quality of a software product and makes it easier to keep track of all parts of an application. Development, maintenance, and the dissemination of knowledge to other developers are its primary objectives. Whatever its intended use, documentation needs to be organized, simple, and clear.

The two main categories of software documentation are as follows:
- Product Documentation 
- Process Documentation

**PRODUCT DOCUMENTATION**: Explains the product that is being created and offers guidance on how to use it to carry out different activities. Requirements, technical specifications, business logic, and manuals are all common components of product documentation.

The two primary categories of product documentation are:

- System Documentation 
- User Documentation

***System documentation*** refers to documents that describe the system and its components. It contains requirements documents, design decisions, architecture descriptions, program source code, and frequently asked questions.

***User documentation*** includes manuals written primarily for product end users and system administrators. Tutorials, user guides, troubleshooting manuals, installation manuals, and reference manuals are examples of user documentation. User documentation is created for product users, as the name implies. It is also known as user assistance. However, their classifications may differ. As a result, you should structure user documentation based on the various user tasks and levels of experience. In general, user documentation is divided into two broad categories:

- End Users 
- System Administrators

**PROCESS DOCUMENTATION**: Encompasses all activities associated with product development. Process documentation encompasses all documents created during development and maintenance that describe the development processes. Standards and project documentation, such as project plans, test schedules, reports, meeting notes, or even business correspondence, are common examples of process-related documents. The importance of maintaining process documentation is that it helps to organize and plan development. This type of documentation necessitates some planning and paperwork both before and during the project's development. Process documentation also helps to make the entire development process more transparent and manageable.

The primary distinction between ***process*** and ***product*** documentation is that the former records the development process while the latter describes the finished product.
How To Code Like A Pro!?
Tags: tutorial, beginners, programming, career
Published: 2022-10-17 05:12:56

I won't make this long. Here is a list of 3 things you can do, to code like a PRO!

---

### 1. Follow A Style Guide
The number 1 thing, is to write **CLEAN** code.
Clean code really goes a long way, as I've stated before:

> Code that's hard to **understand** is hard to **maintain**
> 
> Code that's hard to **maintain** is **useless**

To write the cleanest code possible, you have to follow **Style Guides**.

A style guide, is a list of best practices you can do as a dev.
Every language/framework has one. Just type in your web browser
"_`Name Of Your Coding Language` **Style Guide**_".

In fact, I'm doing a series( on my YT Channel) on style guides for all the languages and frameworks I know! You can watch it [here](https://www.youtube.com/playlist?list=PLixIQkC7_0uk4NpSmv_eBhpt7Zho8Z41G).

---

### 2. Make And Follow A Structure
Now that you're following the best practices for your coding language, it's time you make a workflow.

A workflow, is just a fancy word I use meaning, the environment where you code and how you go about coding.

You need to be in a headspace where you're in the zone. You need an environment that you learn to distinguish as the place where you code!

You can experiment with this, but what I've found most effective is:
* Having LoFi background music
* Tea( Coffee gives me too much energy)
* Being Distraction Free( No Phone, Notifications Off)
* Posting On GitHub Constantly( Pet peeve of mine)
* Having a Notion page with a Detailed Structure & Code Base for my project

---

### 3. Practice!
Now that you follow the best practices & have an environment where you're in a zone, the **only** thing that's left, is **constant practice**

**Just keep on coding!**
[Solved]Flutter PackageManger depreceated
Published: 2022-10-17 05:01:49

I'm facing an issue after changing the github branch. This issue is getting when we change the compile sdk version to 33. 
This issue solve by flutter service team.
Just set the pubspec.yaml below code. 

`packagemanager: any
` 
[How to solve the flutter packagemanager deprecated](https://flutterservice.com/flutter-packagemanager-has-been-deprecated/)
How To Hide And Show Div In jQuery
Tags: jquery, javascript, hide, show
Published: 2022-10-17 04:22:45

In this article, we will see how to hide and show div in jquery. jQuery show method and jQuery hide method are used to display and hide elements with different effects.

For jQuery to show and hide effects, you need to add different parameters like speed, animation, etc.

Here you can use jQuery effects with different types of events like a mouse click, mouse hover, button click, and many more to show methods in jquery and hide methods in jquery.

The .show() method is the simplest way to display an element. The matched elements will be revealed immediately, with no animation. 

This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
3. Linux commands
Published: 2022-10-17 04:15:48

**who**
- Login name of user
- Date and time of login
- remote host name of user

**whoami**
- Display system's username

**id**
- Displays user identification
(real and effective group ids)

**groups**
- Displays the groups for which user belongs

**Ways to become sudo user in Linus OS**

1. sudo -i
2. sudo -s
3. sudo su -
4. su -root
5. su -

**users**
- Displays username of all users currently logged in

clear

lastlog
- detail of recent logged in user

**File and Directory commands:**

**pwd**
- present working directory

**ls**
- list directories

**mkdir**
- create directory

**rmdir**
- remove directory

-p : refers for parent
-v : verbose output for the processed direct

**touch**
- create file

/ root diretory
~ home directory

**Installing packages**
yum install package_name

Info about package
yum info package_name

Remove package
yum remove package_name

Installing package from a localfile
./filename

**Disk usage command**
du pathofdirectory
- find out disk usage summary

du -h pathofdirectory
- bring info in human readable format

du -sh nameofdirectory
- find out total disk usage

ah -sh nameofdirectory

**System and hardware information**

uname -a
- all user

uname -s
- know kernel name

uname -r
- release of kernel

uname -m
- print architecture

uname -o
- print operating system name
Difference between VM (Virtual Machine) & Containers
Tags: devops, database, linux, cloud
Published: 2022-10-17 03:41:41

**What is a container?**

Containers are lightweight software packages that contain all the dependencies required to execute the contained software application. These dependencies include things like system libraries, external third-party code packages, and other operating system level applications. The dependencies included in a container exist in stack levels that are higher than the operating system.

**What is a virtual machine?**

Virtual machines are heavy software packages that provide complete emulation of low level hardware devices like CPU, Disk and Networking devices. Virtual machines may also include a complementary software stack to run on the emulated hardware. These hardware and software packages combined produce a fully functional snapshot of a computational system.


**Difference Between VM vs Containers**

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

Points:

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mp6jbis9j3msgc04zc9k.png)
sites giving small gig projects for earning.
Tags: webdev, productivity, programming, web3
Published: 2022-10-17 03:25:49

At dev to platform only, I recently read (some months back) a comment under one article about a site which gives some amount of money for helping them fix their small small tasks or help them in implementing some small functionality on their platform, but I can't that article now, neither that site too now.

if anyone knows such site or any similar site, please let me know in the comments.

thanks in advance.
New React Multiselect NPM Package
Tags: react, multiselect, reactmultiselect, reactawesomemultiselect
Published: 2022-10-17 02:48:40

Hello ReactJs Folks,
Here i tell you new **react multiple select npm package** which is literally awesome.

Package is **[react-awesome-multiselect](https://www.npmjs.com/package/react-awesome-multiselect)**

**Also**, you can check example of this package on codesandbox.
**[Codesandbox Example Link](https://codesandbox.io/s/react-awesome-multiselect-95fotz)**

That's all for this topic.
Use it in your project!!
Tips For Using "Nested If" In Programming
Tags: javascript, webdev, programming, beginners
Published: 2022-10-17 02:48:26

This time we will discuss simple tips for making programs. We can implement these tips in any programming language, but this short article will demonstrate using the Javascript language. The discussion this time is about nested if in a function.

Sometimes we meet cases that require us to make decisions in decisions, for example, this:

![Figure 1 If Hell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/867iugwh5tn14m10i5s8.png)

The example above is that we want to return the string "Hallo" if the signedIn variable is true, and the userId variable is not null. It might seem normal at first glance, but it would be terrible if there were so many condition checks, not just the two in the example above. it will look like "[callback hell](http://callbackhell.com/)"

the clean way to do it in the code example above is like this

![Figure 2 If Hell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmdvcicil6clwnoqzme3.png)

or in the Javascript language you can also use a short way to be like this:

![Figure 3 If Hell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlhb1jdas7fsah9r0pwr.png)

by using this method, there are no longer nested if, and avoid "callback hell". This method can also be done in other programming languages with customized modifications.

---

## Epilogue ☕

Thank you for reading this article, I hope this article is useful for you, if you learn something new from this article, please provide feedback on this article, or give us criticism, suggestions so that it can be even better. Maybe you want to buy me a cup of coffee?

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/catur.dev)
Creating an Indie Game -- Week 1
Tags: gamedev
Published: 2022-10-17 02:32:22

Hello!

This is week one of making an indie game. The style is a 2D pixel art platformer. I'm not going to reveal much yet, but I'm hoping to have 3 stages, with the first stage being a grassy/forest environment, the second being in the caves, and the third being some sort of magma/mordor type environment.

So far I've made some tilesets for the game (I'm really trying to get better at pixel art during this time), added it into the game, added player physics, colliders to the blocks, and a dark shrine with a nice animation (this will come into play later).

Here are some screenshots of what I accomplished in a little under a week.


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

I still need to add more art, a player sprite, a background, and some post processing/lighting for the scene to look better. However, I'll hopefully be posting weekly updates on my development so follow me to stay tuned for that! I'm looking forward to sharing my progress!

{% user stcollier %}
ParallelChain Testnet 3 is LIVE. Earn up to 1,500 $XPLL for your contribution!
Published: 2022-10-17 02:28:58

👉What is Testnet 3: https://www.parallelchain.io/parallelchain/mainnet#testnet

👉What you can do on Testnet 3:

- Develop smart contracts

- Transfer tokens between accounts (EtoE)

- Account To Contract calls (EtoC)

- Cross Contract calls (CtoC)

👉**Incentives**

You can receive up to 1,500 XPLL tokens for your participation, depending on your level of engagement and contribution on the following criteria:

Review sdk; provide feedback on what essential features are missing; suggest features which are required to implement your app(s); referral; and spread the word and share about the Testnet and what you've built!

⭐️ To join the incentivized early access, please fill in this questionnaire: https://forms.gle/uafgFABJYvq2TU196 so we can get a better understanding of your project and craft a better experience for you.

Sign-up for early access will open until 21 October 2022.
Clone Hero on Steam Deck
Tags: tutorial, gaming, steamdeck, clonehero
Published: 2022-10-17 02:05:49

The following should get you setup easily to use [Clone Hero](https://clonehero.net/) on a [Steam Deck](https://store.steampowered.com/steamdeck).

1. Enter desktop mode on Steam Deck (hold power button down and navigate to option)
2. There are two ways to install, but we will go with the easiest way, which is via Lutris. Navigate to Discover, which is your graphical package manager, search for Lutris and install
3. Open Lutris and search for Clone Hero
4. Select the newest version and install (you can change where you want this to be installed if you want, personally I install Clone hero on my sd card as well as all the songs), I would also check the options to add to your Steam Library as it will pull in graphics for the big picture/library mode.
5. Now, wherever you installed it to, navigate to that folder, ensure there is a `Songs` folder (case matters here), and then you can drop in all your songs folders inside of there (I wont go into detail about songs as there's plenty of writeups about it)
6. You can now exit desktop mode and go back to gaming mode which you can do by selecting the shortcut on the desktop that says "Return to Gaming mode"
7. Launch Clone Hero via Steam
8. Use keyboard or on screen keyboard (steam button + X) to hit Space bar, where you can configure your controller(s), i personally use a Wii Guitar with Raphnet adapter. Map each button to your controller.
9. After that is done, hit Done, then press Select (whatever you mapped it to), select a profile or create one
10. Then go down to Settings, and under first tab of options, go to scan songs, hit yes, and after a while (or maybe not) it should import all your songs.
11. VOILA! now you have a portable Clone Hero setup that you can connect via USB-C dock and have a Clone Hero party anywhere! Most controllers are pretty plug and play as well thanks to Steam, and if not you can find either community control mappings or map your controller by yourself easily!