teleren/devto huggingface dataset:
What is ::before and ::after in CSS?
Tags: css, html, webdev, beginners
Published: 2021-12-19 10:24:29

## What is ::before and ::after in CSS?

In CSS ::before and ::after is a type of pseudo-elements. This allows us to add something before or after an element without the use of HTML.

We use these types of pseudo-elements at different times when designing a website. The simplest example to understand, the bullet mark in front of the list. This way you can add text before or after an element if you want using pseudo-elements.

In this tutorial, we will discuss with examples, how to use ::before and ::after pseudo-elements to sort content on a web page. This tutorial will give you a good idea of how to use :: before and :: after pseudo-elements in CSS.

## Pseudo Element in CSS

Pseudo-elements are visible elements on a web page that are not "in DOM" or created from HTML but inserted directly from CSS. It plays a helpful role in various web page designs. It beautifully supports different browsers. 

A CSS pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected element. For example, ::first-line can be used to change the font of the first line of a paragraph. Since,  ::first-line, ::first-letter, ::before, and ::after is a pseudo-element. That's why we need to know about pseudo-element first. So, we are discussing about this. 

To use pseudo-element you must enter, As a rule, double colons (::) after selector. 
Like this syntax - 

**```
selector::pseudo-element { 
property: value; 
}

```**

## ::before Pseudo-Element in CSS

The ::before selector inserts something before the content of each selected element. The ::before pseudo-element adds content that appears before an element on a web page. In most cases, it is used to add text before an element.

The ::before pseudo-element syntax is - 

**```
selector::before { 
property: value; 
}

```**

## ::after  Pseudo-Element in CSS

The ::after selector inserts something after the content of each selected element. The ::after pseudo-element adds content that appears after an element on a web page. In most cases, it is used to add text after an element.

The ::after pseudo-element syntax is - 

**```
selector::after  { 
property: value; 
}

```**

## Conclusion

The ::before and ::after pseudo-elements allow you to add content to a specific part of an element you have selected in a CSS rule. The simplest example, the ::before selector could be used to add text before a link. The ::after selector could be used to add a bullet sign after a paragraph of text.

## Reference

1. [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS) 
2. [W3Schools Web Docs](https://www.w3schools.com/w3css/)

## Thanks for reading

**Reach out to me on:**

1. [Portfolio](https://nasirul-islam.netlify.app/)
2. [GitHub](https://github.com/Nasirul-Islam)
3. [LinkedIn](https://www.linkedin.com/in/nasirul866/)
Log4j 2: New vulnerability on DoS in 2.16.0 and below
Tags: log4j, vulnerability, security, dos
Published: 2021-12-19 10:22:23

[Log4j](https://logging.apache.org/log4j/2.x/) 2.17.0 was released due to security reason. It fixes DoS vulnerability in 2.16.0 and below on v2.

As to the new vulnerability on DoS (denial-of-service), it's safe with a default Pattern Layout where a Context Lookup such as `$${ctx:loginId}` are NOT used in logging configuration.
Otherwise, the CVSS score is 7.5 and the severity is high.

On Log4j 2 with custom Pattern Layout with Context Lookups such as `$${ctx:loginId}`, updating its version to 2.17.0 is recommended to fix the vulnerability called [CVE-2021-45105](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-45105). It can cause service down.

Alternatively, it can be mitigated to replace Log4j 2 non-default Context Lookups with Thread Context Map patterns (%X, %mdc, or %MDC) or to reduce references to them in configuration,
thanks to [The Apache Software Foundation](https://www.apache.org/) effort and information:
https://logging.apache.org/log4j/2.x/security.html

---

This post is based on [the tweets by my company](https://twitter.com/scqrinc/status/1472485935573266437).
How to Code Faster in VSCODE 2022 | Visual Studio Code Best Shortcuts for Beginners 2022
Tags: vscode, codenewbie, webdev, beginners
Published: 2021-12-19 10:11:52


In this vPost, you will learn about how to code faster in vscode 2022 and visual studio code best shortcuts for beginner web developers, vscode fast coding shortcuts, and vscode fast coding tips. In this VS Code tutorial I will show you how to use visual studio code 2022 and the top 15  visual studio code 2022 pro tips and tricks for fast coding.

In this visual studio code 2022 YouTube Tutorial, I will show you vs code must know Keyboard shortcuts for visual studio code keyboard shortcuts change and How to Change vs code keyboard shortcuts on mac and windows. You will also know about the vs code bracket pair color change and vs code wrap text, how to change fonts in vscode, and how to find vscode Errors and warnings.

**Video Tutorial:**
{% youtube q4su3pgtYSI %}

Video Chapters:
00:00 Introduction
00:33 Change the color of pair Bracket in VS Code
01:07 Add padding at the top and bottom VS Code editor
01:58 visual studio code keyboard shortcuts change
03:33 VS Code wrap text
04:20 how to change fonts weight in vscode?
05:20 Find vscode errors and warnings in terminal
06:10 How to toggle sidebar in VS Code?
06:40 vscode full screen mode toggle shortcut
07:10 Code folding VS Code
07:46 Multiple cursors edit in VS Code
08:55 Copy/duplicate line up/down Quickly VS Code
09:23 Move code lines position Up/Down VS Code
10:00 Transform text in VS Code
10:35 VS Code IntelliSense: trigger the available Suggestions
11:15 Match and replace text in VS Code
If you found this video helpful please share the video and SUBSCRIBE to this youtube channel. Please share your thoughts and queries in the comments below!

****************************
- 𝗧𝗵𝗲 𝗯𝗲𝘀𝘁 𝘁𝗼𝗼𝗹 𝗳𝗼𝗿 𝗬𝗼𝘂𝗧𝘂𝗯𝗲 𝗥𝗮𝗻𝗸𝗶𝗻𝗴, 𝗚𝗲𝘁 𝗮 𝘀𝗽𝗲𝗰𝗶𝗮𝗹 𝗱𝗶𝘀𝗰𝗼𝘂𝗻𝘁 𝗻𝗼𝘄!
     Link:  https://bit.ly/2XrNfWS
****************************
- 𝗦𝗼𝘂𝗿𝗰𝗲 𝗖𝗼𝗱𝗲 𝗟𝗶𝗻𝗸 (𝗬𝗼𝘂 𝗺𝗮𝘆 𝗵𝗮𝘃𝗲 𝘁𝗼 𝘀𝗲𝗮𝗿𝗰𝗵 𝘁𝗵𝗲 𝘁𝗶𝘁𝗹𝗲 𝗼𝗳 𝘁𝗵𝗶𝘀 𝘃𝗶𝗱𝗲𝗼)!
     https://www.hmablogs.com/
Angular for Beginners
Tags: beginners, angular
Published: 2021-12-19 10:08:39

I am a beginner with Angular. Currently I am doing a task which is Unit testing, I am having problem writing unit test for this function:
ngOnInit(): void {
     this.heroService.getHeroes()
       .subscribe(heroes => this.heroes = heroes.slice(1, 5));
   }
Generate Random Colors using JavaScript
Tags: javascript, html, css, webdev
Published: 2021-12-19 10:05:32

Suppose if you want to generate a random colour for any element in your HTML and want to use that colour in real-time. 

The above code snippet will help you do the needful. This code also has a feature to generate different colours in **rgb(???,???,???)** format in a time frame say _1-second_ or _n seconds_.

- HTML

```
<!DOCTYPE html>
<html lang="en">

<head>

  <body><button class="btn">Look how the colors are changing</button>
  </body>
</head>

</html>
```
- JavaScript

```
const randomNumber = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);

const randomColor = () =>
  `rgb(${randomNumber(0, 255)}, ${randomNumber(0, 255)}, ${randomNumber(
    0,
    255
  )})`;

const btn = document.querySelector('.btn');

const assignRandom = () => {
  btn.style.color = randomColor();
  btn.style.backgroundColor = randomColor();
};

assignRandom();
setInterval(assignRandom, 1000);
```
- CSS

```
.btn {
  display: inline-block;
  font-size: 20px;
  font-family: inherit;
  font-weight: 500;
  border: none;
  padding: 10px 20px;
  border-radius: 10rem;
  cursor: pointer;
}
```

> Result will be something like this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmaxfho47kptoroh2okj.gif)

I hope this will help someone.

_P.S. This is my first post, hoping for some feedback._
Random Background On clicking button in JS || 10 JS Project Challenge #1
Tags: javascript, webdev, beginners, tutorial
Published: 2021-12-19 10:01:49

## Hello 👋
In this post I will show you how to make Random Background, when you click a button in JavaScript.

This is Part 1 of the 10 JS Project Challenge.

So let's get into it.


First, here is the video tutorial:

{%youtube https://youtu.be/0qmonH9goN8 %}

### So let's start coding.

First, we need to create 3 files in our folder.

- index.html

- style.css

- home.js

Once we have those files created, we can start coding.

Here is the code for index.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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <button">Click Me</button>
    <script src="home.js"></script>
</body>
</html>
```
We are just creating a basic HTML structure and a Button. We need to link our CSS and JS files too.

Now, let's do style.css.
Here is the code:

```
body{
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
}
button{
    padding: 14px 24px;
    font-size: 24px;
    border: none !important;
    outline: none !important;
    border-radius: 20px;
    background: white;

}
```
In CSS, we are just styling our body and a button.

And finally, let's make our JavaScript.
Add this code to your home.js:

```
function changeBg(){
    document.body.style.backgroundColor = 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
}
```

What this code does is make a function, and in this function is setting and body Background Color to RGB(Random, Random, Random). And that is how we can achieve a Random Color Generation.

We ain't done yet, we need to add this function to our button, so when we click, a background color will be randomly chosen.
You can achieve this simply by adding a onclick fucntion to the button in our index.html.

`<button onclick="changeBg()">Click Me</button>`

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

And now we are done! You should see a color change every time you click a button. Great Work.

Thanks for reading my post, and I hope I will see you next Time.
CSS BLOG
Published: 2021-12-19 10:01:18

CSS Dimension
 Css dimension is basically height,width,max-min height,max-min width etc.
Implement css height and width :
  .Container{
    Height:”30px”
Width:”60px”

}
Width and height take more values like rem, em, pt, cm etc
CSS Media Queries
Media Queries are used to make a responsive web page that can respond in different devices with different type ratios.
The break point for some devices are as follows;
Smartphones (portrait and landscape)
Max-width=480px min-width 320px
Smartphones (portrait) 
Max-width=320 px
Tablets 
Max-width =786 px
Laptop and desktop
Min-width=1224px
For larger devices
Min width =1824px

CSS Gradiant
CSS gradient is a way to implement animation to an image. there are 2 types of the gradient in CSS. those are linear gradient and radial gradient.
Linier gradient is implemented by 
linear-gradient(direction, color-stop1, color-stop2, ...)
  Linear gradient style two colours must be declared. The more complex effect may be applied through the linear gradient.
Radial gradient is implemented by 
radial-gradient(shape size at position, color-stop1, color-stop2, ...);

CSS CURSOR
CSS cursor property is used to define the specific action based style to the mouse cursor.
There are a few types of cursor effects based on interaction with the website. And they are 
Cursor Default
Cursor Pointer
Cursor help
Cursor wait
Cursor progress
Cursor move and so on.
How to check if an ES6 Map or Set is empty?
Tags: javascript, beginners
Published: 2021-12-19 09:50:07

While working with normal objects in Javascript we’re able to check if the object is empty. The same with a typical array.

We can use Object.keys() which returns an array and then we can check the length of that array.

```js
const userObject = { name: 'Calvin', age: 200};

console.log(Object.keys(userObject));
// [ 'name', 'age' ]

console.log(Object.keys(userObject).length === 0);
// false
It doesn’t seem too common to do the same thing with arrays but Object.keys() still works.

const userArray = ['Calvin', 200, 1000]

console.log(Object.keys(userArray));
// [ '0', '1', '2' ]

console.log(Object.keys(userArray).length === 0);
// false
```

When working with Maps and Sets, we’re not able to check the data using Object.keys(). We’ll continuously get back an empty array with a length of 0 🙁

```js
const userMap = new Map()
userMap.set('Calvin', {age:200, height:1000})

console.log(Object.keys(userMap))
// []
console.log(Object.keys(userMap).length === 0)
// true
console.log(userMap)
// Map { 'Calvin' => { age: 200, height: 1000 } }
```

This is where we can use size property. Both Maps and Sets come with the size property and it returns the length of these two ES6 data types.

```js
const userMap = new Map()
userMap.set('Calvin', {age:200, height:1000})

console.log(userMap.size)
// 1

const userSet = new Set()
userSet.add('Calvin')
userSet.add(200)

console.log(userSet)
// Set { 'Calvin', 200 }

console.log(userSet.size)
// 2
```
Preeeety useful.
How To: Delete property from an Object using spread operator
Tags: javascript, beginners
Published: 2021-12-19 09:47:01

[Original Post and more Here](https://www.calvintorra.com/blog/how-to-delete-property-from-an-object-using-spread-operator)  

Everyday there’s something new to learn with Javascript.

I was trying to manipulate an object and remove one of the properties but I didn’t want to mutate the original object. I knew there must be a cleaner way than to use the [delete operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete).

That got me thinking about the spread operator and it turns out you can remove properties while spreading the rest of the values into a new object.

```js
let user = {
    name: 'Calvin',
    age: 200,
    country: 'Spain',
    food: 'Pizza'
}

const {name, ...restOfUser} = user

console.log(restOfUser)
console.log(name)

// { age: 200, country: 'Spain', food: 'Pizza' }
// Calvin
```

I now get the removed property value and also a new object with all the rest of the values.
Convert Array to Object Keys
Tags: javascript, beginners
Published: 2021-12-19 09:43:47

[Original Post and more here](https://www.calvintorra.com/blog/convert-array-to-object-keys)  

I wanted to take an array of elements and turn them into an object. The elements in the array would need to be the keys of the object with some default empty strings as the values to be changed later.

```js
['name','age','city', 'town', 'country']

{
  name: "",
  age: "",
  city: "",
  town: "",
  country: ""
}

// end result I was looking for
```

In the end I discovered that we could use Array.reduce (which I used to avoid before learning how to use it).

We can create an empty object, pass over the array items and use them to dynamically create object keys.

```js
const userChoices = ['name','age','city', 'town', 'country'];

const result = userChoices.reduce((acc, curr) => {
    acc[curr] = ""
    return acc
}, {})

result.name = "calvin"

console.log(result)

// { name: 'calvin', age: '', city: '', town: '', country: '' }
```

The empty object is used as the accumulator which is passed back into the function and filled with the next item in the array.

acc is the thing we’re trying to fill up and return while curr is the current item we’re working with in the data that we’re iterating over.
How To: if statements in Javascript Switch case?
Tags: javascript, beginners
Published: 2021-12-19 09:38:59

[Original Post and more here](https://www.calvintorra.com/blog/how-to-if-statements-in-javascript-switch-case)

A situation came up where I had to check for keyboard events and I wanted to include WASD as well as the arrow keys.

I decided on a switch statement but ended up having 8 cases and only 4 outcomes that I actually wanted to happen.

Then I wondered if it was possible to use and if statement in a switch case….turns out it’s better to use a fall through pattern.

Here’s a basic set up of what I would have had to do.

```js
switch(value){
  case 'ArrowUp':
  // do 3 things
  break
  case 'KeyW':
  // do 3 things
  break
  case 'ArrowDown':
  // do 3 things
  break
  case 'KeyS':
  // do 3 things
  break
  // and more
}
```

Here is the “fall through” method. I know I had seen this before, but I’ve never used it out in the wild, so here it is to remind my future self.

We can simply specify several cases that we want to watch for, bunch them all up together and give a single outcome.

In the case below, I want to check if the value is Either the ‘ArrowUp’ key OR the ‘KeyW’ key. If either of those two occur, they’ll be treated the same.

```js
switch(value){
  case 'ArrowUp':
  case 'KeyW':
  // do those things
  break
  case 'ArrowDown':
  case 'KeyS':
  // do those things
  break
}
```
Remove Duplicates in Linked List
Tags: java, algorithms, 100daysofcode, programming
Published: 2021-12-19 09:26:42

# [Description](https://binarysearch.com/problems/Remove-Duplicates-in-Linked-List)

Given a singly linked list `node`, remove nodes with duplicate values while maintaining relative order of the original list.

**Constraints:** 

- `n ≤ 100,000` where `n` is the number of nodes in `node`

## Example 1

### Input

```
node = [1, 2, 1, 3]
```

### Output

```
[1, 2, 3]
```

---

## Example 2

### Input

```
node = [1, 1, 2, 2]
```

### Output

```
[1, 2]
```

---

# Intuition

1. A Set to store node values
2. two pointers to remove duplicates

# Implementation

```java
import java.util.*;

/**
 * class LLNode {
 *   int val;
 *   LLNode next;
 * }
 */
class Solution {
    public LLNode solve(LLNode node) {
        HashSet<Integer> hashSet = new HashSet<>();
        LLNode pre = node, curr = node;
        while (curr != null) {
            if (hashSet.contains(curr.val)) {
                pre.next = curr.next;
            } else {
                hashSet.add(curr.val);
                pre = curr;
            }
            curr = curr.next;
        }
        return node;
    }
}
```

## Time Complexity

- Time: O(n)
- Space: O(n)
Setup and Customize Bootstrap styles in Next.js
Tags: nextjs, react, bootstrap, reactbootstrap
Published: 2021-12-19 09:25:25

### Prerequisites

This tutorial assumes that you have the following:

* Basic knowledge of Node.js
* Node 12.22.0 or later installed on your machine, 
* Any code or text editor of your choice 

To create a new NextJS project, type and run:
```
npx create-next-app@latest < Your APP's NAME >
```
Steps to follow:

> *Installing Bootstrap*

Let's start by installing the required NPM packages.

```
npm install bootstrap react-bootstrap sass
```

**Sass Support**, for more information [check this link](https://nextjs.org/docs/basic-features/built-in-css-support).

Next.js allows you to import Sass using the extensions .scss and .sass. You can use Sass at the component level through CSS modules and the extension .module.scss or .module.sass.

> *Creating a Custom SCSS*

Let us now create a custom scss file in the styles/scss directory, and name it < ANY-NAME-OF-YOUR-CHOICE >.scss. In this file, we need to import Bootstrap’s bootstrap.scss. For the sake of simplicity, let us override the default colour system provided by Bootstrap.

```
$primary-color: #64FF00;

@import '/node_modules/bootstrap/scss/bootstrap.scss';
```

> *Configuring Next Config*

The best part about the newer versions of Next is that they provide built-in support for SASS / SCSS. All we need to tell Next is where our styles are stored by setting next.config.js and adding the following code snippet: 

```
const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}
```
> *Importing Bootstrap*

The final step is to import our custom Bootstrap into our project. Based on where we need to use the custom styles, we can import our global.scss. In this example, let us configure it to be used by the entire project.

In pages/_app.js file, we need to add the following code:

```
import 'styles/scss/< ANY-NAME-OF-YOUR-CHOICE >.scss'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp
```
### conclusion

We learned, how to configured Bootstrap in our next NextJS project.

Feel free to check the code on [GitHub Repository](https://github.com/workforweb/NextJS-Bootstrap-Project.git), if you had any trouble following this tutorial.

If you have any questions or comments about this article, please do not hesitate to reach out.

Thank you for reading. 

### Credits

Next.js, The React Framework for Production: https://nextjs.org/

Bootstrap, the world’s most popular framework : https://getbootstrap.com/

React-Bootstrap, Bootstrap framework for React.js : https://react-bootstrap.github.io/
How I made my own text editor like VSCode
Tags: javascript, react, webdev, programming
Published: 2021-12-19 09:09:50


 `Hello World!` I am back with a new article 🎉....

Today, I am going to talk about the editor which I have made 👉 **tiny editor**; which is very helpful to write code on web browser and many more..

So, **How I made?**
### Libraries / Frameworks

- React JS
- CodeMirror
- Monaco Editor
- [tiny-unique-id](https://www.npmjs.com/package/tiny-unique-id)
- FontAwesome Icons
- react-sandbox-editor

### Database (to save code and auth)
- Cloud Firestore (Firebase)


### How I made code input / editor?
- To make the Editor / Input I have used **CodeMirror**
![Classic Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no9nx2s8w2vmd9wn22z1.png)
```js
<ControlledEditor 
            onBeforeChange={handleChange}
            value={value}
            className="code-mirror-wrapper"
            options={{
                lineWrapping: true,
                lint: true,
                mode: language,
                theme: 'material',
                lineNumbers: true,
                autoCloseBrackets: true,
                matchBrackets: true,
                autoCloseTags: true,
                matchTags: true,
            }}
/>
```

- And for VSCode Editor, I have used Monaco Editor
![VS Code Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w51jf9yuehjsv15ckzz7.png)
```js
<Editor
     defaultLanguage="javascript"
     theme="vs-dark"
     value={js}
     onChange={setJs}
     className='editor'
   />
```

### How output is shown
- To show output, I have used `iframe`
```js
<iframe
      srcDoc={srcDoc}
       title="output"
       sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals"
       frameBorder="0"
       width="100%"
       height="100%"
      />
```

### How code saves / update?
- To save the code, I have used **Cloud Firestore (Firebase)** which saves the code in **JSON**
  ![Cloud Firestore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9cpc7w0gl7reqjv6awl.png)

This is how I made my own text editor like VSCODE.

***
I have made a video on showcasing it, so make sure to check out the video and don't forget to check out my [Youtube Channel](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ)

{% youtube https://www.youtube.com/watch?v=dF_ysbWp9d8 %}
basic auto type writer effect
Tags: codepen, typewriter, autotype, github
Published: 2021-12-19 09:00:19

<p>this is a basic type writer effect using a libarary in github known as type writer.</p>

## CODEPEN LINK:
{% codepen https://codepen.io/Abhi7raj/pen/eYGWgmx %}

**guys this is a simple method for using auto type writing effect in website**

for any doubt ask ?