teleren/devto huggingface dataset:
A solution to scoped styling of components
Published: 2021-12-18 19:29:20

Most modern web applications built with React.js or other libraries, consist of many components that have their own functionality and styles. Styling all these components can quickly turn into a disorganised situation if not done the right way, so how exactly should you style your components?
Fortunately, a methodology by the name of Block Element Modifier or BEM exists, to make it easier for you.

---

## Summary
1. [What are some common styling problems?](#what-are-some-common-styling-problems)
2. [How to solve these problems?](#how-to-solve-these-problems)
3. [Advantages of using BEM](#advantages-of-using-bem)
4. [BEM explained](#bem-explained)
5. [Generate class names using a library](#generate-class-names-using-a-library)

---

## What are some common styling problems?
- Styling out of component scope
- Over-qualifying selectors and use of !important
- Unclear what styles are exactly doing

---

## How to solve these problems?
We are going to apply the BEM methodology to solve these problems, but first you need to understand what exactly BEM is. Shortly said, BEM is a naming convention for writing cleaner and more readable CSS classes using unique class names for each component (block).

---

## Advantages of using BEM
- Creating modular and independent blocks
- Blocks are re-usable and thus reduce CSS
- Block styles remain simple and are easy to understand
- Developers spend less time styling components

---

## BEM explained
The BEM naming convention for class names is as following.
```
block__element--modifier
```

A `block` represents the wrapping element of your component, there is only one per component.
An `element` is any element within your block.
A `modifier` is used to change appearance, behaviour or state.

I strongly encourage you to read through the naming conventions rules on the original [BEM website](http://getbem.com/naming/).

Let's take a look at an example.
![Example of BEM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9gi070t3tjs6ekth1gz.png) 
[View on Codepen](https://codepen.io/joostm020/pen/vYeZEXd)

---

## Generate class names using a library
You can use the BEM methodology in your project without installing any libraries, however, to efficiently generate the class names you can use a library like `rebem-classname` that does the job for you.

1. Install the ‘rebem-classname’ package
`npm install rebem-classname`

2. Use stringify to generate BEM class names in your component:

```jsx
import { stringify } from 'rebem-classname';

import './Component.style.css';

function Component() {
    const bem = stringify({ block: 'block', elem: 'elem', mods: { mod: true } });
    return <div className={bem}>I'm using BEM!</div>;
}

export default Component;
```

Render result:
```html
<div class="block__elem block__elem_mod">I'm using BEM!</div>
```

---

## Thank you for your read!

I hope you enjoyed reading my post and have learned something, feel free to give a like, and comment below to give some feedback.
react-router-dom question: After I setSearchParamaters, why does searchParamaters.get fail to retreive current value?
Tags: react
Published: 2021-12-18 19:17:08

```
import { useSearchParams } from "react-router-dom";

//in the component:
const [searchParams, setSearchParams] = useSearchParams()

//in the render section:
<button
        onClick={() => {
          setSearchParams({
            filter: "alligators",
          });
          console.log(searchParams.get("filter"));
        }}
      >
        setSearchParams and view the value
      </button>
```

After I click the button, I do not see 'alligators' logged!  Instead, what gets logged is the previous filter value.  In order to actually see 'alligators', I have to press the button twice.  Why doesn't it work the first time I click it? Thanks!
Palindrome Linked List
Tags: 100daysofcode, programming, algorithms, java
Published: 2021-12-18 17:20:23

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

Given a singly linked list `node` whose values are integers, determine whether the linked list forms a palindrome.

**Constraints:** 

- `n ≤ 100,000` where `n` is the length of `node`

## Example 1

### Input

```
node = [5, 3, 5]
```

### Output

```
true
```

### **Explanation**

```
5 -> 3 -> 5 is a palindrome.
```

---

## Example 2

### Input

```
node = [12, 8, 12]
```

### Output

```
true
```

### **Explanation**

```
The values of the linked list are the same forwards and backwards.
```

---

# Intuition

1. find mid by using fast and slow pointer;
2. reverse the right half link
3. compare left and right

# Implementation

```java
import java.util.*;

/**
 * class LLNode {
 *   int val;
 *   LLNode next;
 * }
 */
class Solution {
    public boolean solve(LLNode node) {
        LLNode slow = node, fast = node;
        while (slow != null && fast != null && fast.next != null) {
            fast = fast.next.next;
            slow = slow.next;
        }
        // fast rest to head;
        LLNode left = node;
        LLNode right = reverse(slow);
        while (left != null && right != null) {
            if (left.val != right.val) {
                return false;
            }
            left = left.next;
            right = right.next;
        }
        return true;
    }

    private LLNode reverse(LLNode slow) {
        LLNode pre = null, curr = slow, next = null;
        while (curr != null) {
            next = curr.next;
            curr.next = pre;
            pre = curr;
            curr = next;
        }
        return pre;
    }
}
```

## Time Complexity

- Time: O(n)
- Space: O(1)

---

# Intuition

Using indexMap: `HashMap<Integer, LinkedList<Integer>> map`

1. store number's indexes;
2. and compare `index` to `length - 1 - index`

# Implementation

```java
import java.util.*;

/**
 * class LLNode {
 *   int val;
 *   LLNode next;
 * }
 */
class Solution {
    public boolean solve(LLNode node) {
        HashMap<Integer, LinkedList<Integer>> map = new HashMap<>();
        int index = 0;
        while (node != null) {
            LinkedList<Integer> indexes = map.getOrDefault(node.val, new LinkedList<>());
            indexes.add(index);
            map.put(node.val, indexes);
            index++;
            node = node.next;
        }

        int length = index;
        for (LinkedList<Integer> indexes : map.values()) {
            for (int i : indexes) {
                if (!indexes.contains(length - 1 - i)) {
                    return false;
                }
            }
        }

        return true;
    }
}
```

## Time Complexity

- Time: O(N)
- Space: O(N)
NPM vs. Composer/Laravel 8.x, and Heroku
Tags: npm, heroku, composer, laravel
Published: 2021-12-18 18:52:55

Hi, I hope this will help some people! My newest project has been giving me some headaches - but hey! Who doesn't love a challenge?
Challenges are great but when you end up getting tripped up in the details, a challenge can become a nuisance in a hurry.
For context, I am using Laravel 8.x, PostgreSQL, and PHP 7.3.  I am deploying my application to Heroku and all is great until you run into some pesky issues with the composer.json file.  Historically, I have used NPM as my default package manager and haven't run into any troubles... until now. I utilized the Laravel/UI along with the vue auth model. I used NPM as my package manager and all went well until I went to deploy the application on Heroku.  I received the following error:

>In order to use the Auth::routes() method, please install the laravel/ui package. 

I was puzzled by this and did some digging. I didn't find any "specific" info dealing with this issue - but after some trial and error (i.e. making sure that the bootstrap/cache/gitignore file was included in my repo - which did NOT work), I backed out of my latest push to Git and did the following:

1. composer require laravel/ui
2. composer install
3. composer dump-autoload
4. php artisan config:cache (eliminates cached values)
5. commit and push to git
6. deploy to heroku

This worked! Hallelujah! So with the combination of tech that I am using for this project - it looks like that you must use composer vs npm for the laravel/ui dependencies to work properly.

Hope this helps some people!!!
Free Fire CSS Concepts
Tags: beginners, css, tutorial
Published: 2021-12-18 18:27:45

Today We Will Discuss About SOME CSS Concepts. We Have a Perfect Name For This BLOG, Which is called, **_Free Fire CSS Concepts_**. Sound Cools. Because There Are Lot Of GAMERS, I Know BUT, Today Topic is not Gaming, Something Crazy. Because We Will Clear Some Concepts Here. Like `CSS Box Model`, `CSS Selectors`, `CSS Display Property `, `CSS Units`, `CSS Preprocessors`, `CSS Frameworks` . _**Let's Start**_, 

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

---

## CSS Box Model

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

In CSS, the term "box model" is used when talking about design and layout. The box model used when talking about design and layout. The box model is used to describe an element's dimensions and structure. Box Model is made up of four boxes:  content, padding , border, and margin.

---

## CSS Selectors 

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

There are different types of selectors in CSS. (i) Element Selector (ii) CSS Id Selector CSS Class Selector CSS Universal Selector CSS Group Selector.

---

## CSS Display Property 

All of Those Are Display Elements. Inline Elements Doesn’t have any fixed width & height. Examples, a/span/img tags. In CSS, the display property determines how an element looks. It is also a crucial part of the presentation of you HTML code as it has a significant impact on layouts.  

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

---

##CSS Units

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

CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width , margin , padding , font-size , etc. 

---

## CSS Preprocessors

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/688ri5qh38slqvjpcjlm.jpg)
CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are two types of css preprocessor, Sass, Less. For Able CSS Preprocessor We Have To USE CSS Compiler in Our Server. 
The benefits of CSS Preprocessor, We can write clean, easy, less code. And It’s More stable, powerful Way TO Write CODE. 

---

## CSS Frameworks

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac053f0cksof0jpw5bue.png)
CSS frameworks are pre-planned libraries, allowing a more convenient web page styling which is also compliant with standards.
GitHub is now free for teams
Tags: news
Published: 2021-12-18 18:22:25

---
title: GitHub is now free for teams
published: true
description: A thread to discuss the news that GitHub is now free for teams.
tags: news
---

GitHub CEO, Nat Friedman, [announced earlier today](https://twitter.com/natfriedman/status/1250092565090562049) that GitHub is now free for teams.

> Until now, if your organization wanted to use GitHub for private development, you had to subscribe to one of our paid plans. But every developer on earth should have access to GitHub. Price shouldn’t be a barrier.

How will they make money?  They'll continue to provide Enterprise features:
> Teams who need advanced features (like code owners), enterprise features (like SAML), or personalized support can upgrade to one of our paid plans.

You can read the [full post](https://github.blog/2020-04-14-github-is-now-free-for-teams/) for more details.

What is your reaction to the news? x
How To Fix "bash: ping: command not found" In Ubuntu Docker Containers
Tags: ubuntu, docker, ping, fix
Published: 2021-12-18 18:18:38

Even though it happens rarely, sometimes, still we need to use the `ping` command in our Docker containers. The problem with the Ubuntu Docker image is, it is not exactly similar to the regular Ubuntu desktop or server releases that we use in our PCs and servers. That means the official Ubuntu Docker image comes with bare minimum packages installed. So, unfortunately, famous tools like `ping` and `ifconfig` ([learn how to install](https://devtonight.com/questions/how-to-fix-bash-ifconfig-command-not-found-in-ubuntu-docker-containers)) commands will not be there right after we created a container using the official Ubuntu image. But we can easily install the `ping` command with the following commands.

First, we need to update the local repository of our Docker Ubuntu container.

```
apt-get update
```

Then install the `ping` command. It comes with the `iputils-ping` package.

```
apt-get install iputils-ping
```

After that, you will be able to use the `ping` command as you normally used it.

```
ping 172.20.0.2
```

Use the following command to see more available options that you can use with the `ping` command.

```
ping -h
```

Feel free to visit [devtonight.com](https://devtonight.com?utm_source=dev&utm_medium=questions&utm_campaign=how-to-fix-bash-ping-command-not-found-in-ubuntu-docker-containers) for more related content.
Different possible methods for generating a colour randomly in JS
Tags: webdev, javascript, codenewbie, css
Published: 2021-12-18 18:17:43

In this post, I will be summarising several possible methods for generating a colour randomly in JavaScript.
So, Save this article !
As you might be aware of how colours are represented, i.e, Hexadecimal code with a '#' prefix --> `#RRGGBB`
The code for Black --> `#000000`
and for white --> `#ffffff`
Hence higher the values, more the colour will be lighter and vice-versa.
Here's the different methods:
- **Method 1** 
In this approach, simply take a string of all possible hexadecimal characters, then choose from it randomly and concatenate them to form a 6 digit hex code.

```javascript
const s = "0123456789ABCDEF";
function getRandomColor() 
{
    let col = "#";
    let temp =0;
    for(let i=0;i<6;++i)
    {
       temp = Math.floor( Math.random() * s.length ); // generates number between 0-15
       col = col + s[temp];
    }
return col;
}
```
for generating lighter/Darker colours only, we can use sLight or sDark respectively.

```javascript
const sLight="789ABCDEF";
const sDark="01234567";
```

- **Method 2**
Similar to the first one but here instead of predefined string, we can use `toString(16)` to convert to HexaDecimal.

```javascript
function getRandomColor(){
    let color = "#";
    for(let i=0;i<6;++i)
        color += (Math.floor( Math.random() * 16 ).toString(16) );
    return color;
}
```
- **Method 3**
We can use the following ES6 approach :

```javascript
const getRandomHex = from => to => () =>
    Math.floor(Math.random() * (to - from) + from).toString(16);

const getRangedRandomColor = from => to => () =>
    `#${[...Array(6)].map(getRandomHex(from)(to)).join("")}`;

const getRandomColor = getRangedRandomColor(0x0)(0xf);
const getRandomColorLight = getRangedRandomColor(0x7)(0xf);
const getRandomColorDark = getRangedRandomColor(0x0)(0x7);
```
Thanks to @lukeshiru for this one, and you can find the detailed explaination for this in the comments section of my previous article [here](https://dev.to/prakhart111/random-colour-generator-js-7k7)
- **Method 4**

```javascript
function getRandomColor() {
    function c() {
      var hex = Math.floor(Math.random()*256).toString(16);
      return ("0"+String(hex)).substr(-2); // pad with zero
    }
    return "#"+c()+c()+c();
}
```
substr(-2) means take last two characters of the string.
- **Method 5**
This one is a great one liner for the same I found on StackOverflow.
```javascript
function getRandomColor() {
    return '#'+(Math.random().toString(16)+'00000').slice(2,8);
}
```
Well these were some of my picks, if you want to dive in more, you can have a look at [this thread](https://stackoverflow.com/questions/1484506/random-color-generator) on StackOverFlow.

You can save this article for future references and comment down your opinions as well !

You can follow me on:
[Twitter](https://twitter.com/PrakharTandon29)
[GitHub](https://github.com/prakhart111)
Linked List Jumps
Tags: algorithms, java, 100daysofcode, programming
Published: 2021-12-18 18:01:47

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

You are given a singly linked list `node` containing positive integers. Return the same linked list where every node's `next` points to the node `val` nodes ahead. If there's no such node, `next` should point to null.

**Constraints:** 

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

## Example 1

### Input

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

### Output

```
[2, 4]
```

### **Explanation**

```
Note that 2's next is 2 node ahead. 4's next is out of bounds, so it's set to null.
```

---

# Intuition

# Implementation

```java
import java.util.*;

/**
 * class LLNode {
 *   int val;
 *   LLNode next;
 * }
 */
class Solution {
    public LLNode solve(LLNode node) {
        int steps;
        LLNode head = node;
        while (node != null) {
            steps = node.val;
            for (int i = 1; i < steps; i++) {
                if (node.next != null) {
                    node.next = node.next.next;
                } else {
                    break;
                }
            }
            node = node.next;
        }
        return head;
    }
}
```

## Complexity

- Time: O(n)
- Space: O(1)
Dec 18th: Dev Holidays Guide ⛄️
Tags: stateofdevs, bahhumbugtip, mentalhealth, tips
Published: 2021-12-18 17:46:25

Bah Humbug Tips are my own way of coping & recovering from burnout & holiday stress.

###🎄  Bah Humbug Tip of the Day. 
{% twitter 1472253339601543168 %}

######🎁 Today's Options 
{% twitter 1472253340318797828 %}

You can find more tips here & on [Twitter](https://twitter.com/stateofdevs). Let me know in the comments if any of these tips helps.

> If you're struggling w/ burnout & open to sharing your story, please [take the State Of Devs survey](https://stateofdevs.com/helps/dev). 🗳 Thanks!
ترتیب نشان دادن
Tags: codepen
Published: 2021-12-18 17:45:18

نتایج کدهای اولیه اول نشون داده می شن
{% codepen https://codepen.io/moonlxght10/pen/NWagPEK %}

یک نکته ی مهمی ک هست اینه ک وقتی ی چیزی رو یکبار تعریف می کنیم 
مثلا 
**let age** 
دیگه لازم نیست بوسیله ی 
let 
بازم تعریفشون کنیم چوت اینجوری ارور می گیریم 
another example : 
**let adultYears** and **adultYears**
How to get Redis Connection String?
Tags: redis, database
Published: 2021-12-18 17:39:47

This article is a part of documentation for a open source discord bot template, you can check the project by clicking [here](https://github.com/FiveSquareCo/ultimate-djs-template).

Use the following steps to get your Redis connection URL,

**(Step - 1)** 
Go to [https://app.redislabs.com/#/sign-up](https://app.redislabs.com/#/sign-up) and make your free account.

![Signup form from Redis's website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb9efemuaah4ibgsyyob.png)

**(Step - 2)** 
Check your Inbox and confirm your registered email.

![Activation mail from redis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92p8n9f5qgl1lwwui0ix.png)

**(Step - 3)** 
Once you activate your account you will be redirected to this page, click 'Create new subscription'
![Redis welcome onboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyatd8xv4iwe56rymnjg.png)

**(Step - 4)**
Select 'FREE' plan, name your subscription and then click 'Create subscription'
![Create subscription on Redis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9gq1c2whqdaxsxbo1ue.png)

**(Step - 5)**
Make a new Database by clicking 'New database' button.
 ![Create new Redis database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esgr46eu2xs40wmancge.png)

**(Step - 6)**
Copy the public end point for your database and save it.
![Redis's public endpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87v7ohbv6adqqu1pv0og.png)

**(Step - 7)**
On the same page, scroll down to 'Security' section, copy 'Default user password' and save it.
![Redis's Default user password](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bmvqi1660ks9s9q7vfj.png)

**(Step - 8)**
Replace the copied values in between '{}', remove the brackets too.
`//{YOUR_END_POINT}?password={YOUR_PASSWORD}`
- Example:
`//redis-19239.c11.us-east-1-2.ec2.cloud.redislabs.com:19269?password=hXvB4iOkMjhL13tSQxelmZiTyYAE7uno`

Note: The above example URL doesn't work, it is only to give you a brief idea how the actual connection string looks like.

**Want a video tutorial??**
Watch the below video from 2:07 - 5:00
https://www.youtube.com/watch?v=ELquTSRANSs
 
#### Credits:
All the Images used in this article, belongs to its respective owners

- Cover Image : [here](https://dev.to/darkes/all-redis-eviction-policies-cheatsheet-explanation-3cj9)
Trans people analysis using stack overflow survey dataset
Tags: datascience, tableau, programming, trans
Published: 2021-12-18 17:26:11

A data-driven culture translates data into actions in the world. For data, I have chosen the dataset from Stack Overflow survey as provider. Also, I am using the trans community as my persona.

I have used the [Stack Overflow Survey Dataset](https://insights.stackoverflow.com/survey) to deeply analyze and bring insights about trans people in the IT community.

I will answer these questions below:

1. How has the number of trans people identified in the survey changed in the past three years?
2. What are the top and bottom countries by the number of trans people?
3. What is the current situation with programming skills by trans people?

I have merged all datasets from 2019, 2020, and 2021 and created a new dataset with the common columns. After that I have separated the main columns:

- Trans (Yes, No, Prefer not to say)
- Country (United States, Brazil, Netherlands, etc.)
- yearData (2019,2020 or 2021)
- mainBranch (Current situation with programming skills)

I've developed an interesting to answer these questions. You can play with it here:

[Tableau Dashboard](https://public.tableau.com/app/profile/paulo.mota3585/viz/TransPeopleonStackOverflowSurvey/trans_dash)

How can we improve the number of trans poeple in IT community? 

I really would like to hear your suggestions! 

Let's discuss about it on comments.

[Github]( https://github.com/paulowiz/trans_people_analysys_stack_overflow)