teleren/devto huggingface dataset:
Cool CSS Tricks
Published: 2022-05-22 15:45:37

Hi @all, 

So this week I come up with a new Blog “Cool CSS Tricks”. So, in this i will cover my personal used CSS Tricks which saved me all the times.

So without any further delay, let's get started.

This time we will start this with our Hope “J-Hope”

<img width="100%" style="width:100%" src="https://media.giphy.com/media/kgv1H1ypbja2NoTy9i/giphy.gif"> 

**Cool CSS Tricks :**

**Magic SetUp :** Even if we didn't  apply any CSS, still a default CSS is applied to the HTML. Sometimes, actually in my case all the times, I don't need that default CSS to my HTML. So in order to remove this  I will override this with my Magic Setup CSS which is :

```
* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}
```

**Adding … when text become too Long :**  Sometimes we want that instead of showing all the Text, it just shows three dots. This can be achieved as :

```
/* This avoids the text being rendered outside the container */
overflow: hidden;

/*This  avoid the text going to multiple lines */
white-space: nowrap;

/* This Sets the ... once the text overflows */
text-overflow: ellipsis;
```
**Use a CSS preprocessor:** There are lots of preprocessors of CSS, but my personal favourite is SCSS. This makes the use of CSS much easier while using Bootstrap with it .


**Adding a shadow:**  
One of the biggest advantages of CSS is that your design looks more professional. You might have spent 150 hours on a project, but if you work on it just an extra 5 hours adjusting the look, your effort is visible right away. This gives you an advantage when looking for better clients or better jobs, as you deliver higher quality. Shadows are one of those subtle effects that will increase your quality instantly.

One of the most simple yet powerful effects is box-shadow. The best part is you can do it using a single property. Like :

```
/* Box shadow properties */
box-shadow: h-offset v-offset blur color;
/* Box shadow example */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
```

**Resize Images to Fit a div Container :**  
One can resize an image to fit a div container using the height, width, and object-fit properties.

```
<!-- HTML --!>
<img class="image" src="imgpath or url" />

/* CSS */

.image {
 height: 100%;
 width: 100%;
 object-fit: contain;
 }
```

So that's it for today's blog. I will come with a new Blog next Week.
Styled components
Tags: react
Published: 2022-05-22 15:44:20

**Introducción**:
Los Styled Components son una nueva forma de utilizar CSS con tus componentes en las aplicaciones frontend de hoy en día. Se trata del siguiente paso a los módulos CSS, estando el código CSS asociado únicamente al componente al que pertenece, sin afectar al resto de elementos de la página.
**Cómo instalar Styled Components**
Podrás instalar Styled Componentes tanto mediante npm como mediante yarn.
ara instalar Styled Componentes mediante npm usa el siguiente comando:

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

Para instalar Styled Componentes mediante yarn usa el siguiente comando:

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

Una vez hayas instalado Styled Components podrás importar la librería en tu proyecto:



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

**Cómo Utilizar Styled Components**

En este apartado vamos a ver los conceptos más básicos de los Styled Componentes, que en general son los que utilizarás casi todo el tiempo. Lo primero, asegúrate de haber importado la librería en tu script. Además, en estos ejemplos utilizaremos los componentes que creemos junto con React

**Creación de un Styled Component**
Para crear un Styled Components basta con que uses alguna de las propiedades del objeto styled. En el siguiente ejemplo creamos las propiedades CSS de un container:

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

Y con esto ya tenemos un Container, que será un componente de React en toda regla. Para ello hemos usado la función div del objeto styled, a la que hemos pasado todas las propiedades CSS mediante la misma notación que usamos en las plantillas literales o template literals, que son una forma de declarar cadenas de texto en JavaScript mediante comillas invertidas.

En concreto, hemos usado las template tags de estas plantillas, que permiten pasar el contenido de la cadena de texto a la función que tienen como prefijo. En este ejemplo, la función asociada es la función styled.div(), que recibe como parámetros tanto los elementos textuales de la cadena definida entre comillas invertidas como las posibles variables que se usen en su interior.

No solamente podrás crear divs, ya que también existen elementos input, section, button, a y toda la gama de diferentes etiquetas HTML.

Lo que usas no es otra cosa que código CSS, por lo que podrías personalizar tu botón con todo tipo de código CSS que sea válido. No existen limitaciones, por lo que si quieres también puedes anidar elementos o usar media queries:


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

Tampoco te tendrás que preocupar de los prefijos css o vendor prefixes particulares de cada navegador, ya que se agregarán automáticamente cuando compiles el código.
Use k8s hostPath volumes in Docker Desktop on WSL2
Tags: kubernetes, docker, wsl2
Published: 2022-05-22 15:37:20

Kubernetes allows to easily mount volumes based on a path on the node. This can be useful in local development as tools like Docker Desktop make it convenient to spin up a Kubernetes cluster on your local machine.

```yaml
apiVersion: apps/v1
kind: Deployment
spec:
  ...
  template:
    spec:
      containers:
          image: alpine:latest
          volumeMounts:
            - mountPath: /secrets
              name: secrets-volume
      volumes:
        - name: secrets-volume
          hostPath:
            path: ???
```
But when you are using Kubernetes with Docker Desktop on WSL2 on a Windows machine, the above can become tricky as many paths will not behave as expected.

After failing to mount regular paths - both inside and outside WSL2, I condensed a long google search into finding that paths under `/mnt/wsl` are available to be used when referenced as `/run/desktop/mnt/host/wsl`.

Consider the following example: We want to mount the file `secret.env` from a local WSL2 folder into a Kubernetes pod. To do so, we first create the file locally:

```bash
mkdir /mnt/wsl/secrets
echo "thisissecretdata" > /mnt/wsl/secrets/secret.env
```

We then mount this via the `deployment.yaml`:

```yaml
...
    spec:
      containers:
          image: alpine:latest
          volumeMounts:
            - mountPath: /secrets
              name: secrets-volume
      volumes:
        - name: secrets-volume
          hostPath:
            path: /run/desktop/mnt/host/wsl/secrets
```

Now inside our pod, we can access the file at `/secrets/secret.env` and will get the data originally stored in `/mnt/wsl/secrets/secret.env`.
How to add Emmet autocomplete for .js files in React
Published: 2022-05-22 15:36:31

I recently ran into a problem where Emmet autocomplete would work for files ending with the `.jsx` extension but break break for files with the `.js` extension. 

To solve it, do the following
1. Click on the settings icon on the bottom left corner.
![vscode settings icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwa4vf7itaelulrlui3d.png)


2. Click on the document icon to access the settings json file
![vscode settingsjson icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7a6n7fjopdqdijw0s3r.png)


3. Add the following lines to the end of the settings.json file

```javascript
"emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true
```

and voila, Your autocomplete should work as expected.

![emmet autocomplete gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sp3jlb3onu9zn7abz3c8.gif)
How to add image-border to your text.
Tags: css, html, learn, tutorial
Published: 2022-05-22 15:16:08

Below is an Hmtl and css code which you can follow up in adding border to your text. simple and easy.

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

**<u>Here is the result  </u>**


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

**<u>let me leave the css coding here for you.</u>**
*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    background-color: aquamarine;
}

.container{
    border: 100px solid black;
    width: auto;
    height: auto;
    padding: 15px;
    margin: 8px;
    border-image: url(./image/border1.jpg) 30% round;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: red;
    color: white;
    margin-top: 13em;
}
[CSS design] I think about specifying z-index difficult to break
Tags: css, design
Published: 2022-05-22 14:47:04

## Summary

Defines the `z-index` value to be specified for each component.

## Motivation

- I want to avoid `z-index` conflicts
- Want to clarify the reason for specifying `z-index`
- Don't want to increase `z-index` each time more components are added

## Prerequisites

- [The stacking context - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
- [isolation - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/isolation)

## Rules for `z-index`

- Do not use `z-index` as much as possible.
- Use `z-index` from `0` to `4`.
- As a rule, do not use negative numbers such as `-1`.

## Layer Stack rules

- Define the `z-index` value that a component should have on a layer (hierarchy) for each role.
- Increase the `z-index` value as the layer stacks up.

### Layer Stack 4 : `z-index: 4`.

Element to be placed on top in any state.

- Modal
- Drawer
- Overlay

### Layer Stack 3 : `z-index: 3`

Elements that are always placed on top.

An element that is always placed on top.

- Global header (e.g., fixed header to follow)

### Layer Stack 2 : `z-index: 2`.

- Tooltips
- Pop-overs
- Floating buttons (e.g., arrow buttons for carousels, etc.)

### Layer Stack 1 : `z-index: 1`.

Placed on top of an element that does not have a stack.

- Badge

## Define `z-index`.

```css
:root {
  --layer-stack-1: 1;
  --layer-stack-2: 2;
  --layer-stack-3: 3;
  --layer-stack-4: 4;
}

.modal {
  z-index: var(--layer-stack-4);
}

.modal-in-modal {
  z-index: calc(var(--layer-stack-4) + 1);
}
```

## Rules for `isolation`

There may be a case where the `z-index` conflicts between components in the Layer Stack definition alone, resulting in unintended overlapping. In such a case, you can solve the problem by using `isolation` to **generate stacking context** in the root of the component.

```css
.special-components {
  isolation: isolate; /* generate stacking context */
  position: absolute;
}

.special-components__item {
  position: absolute;
  z-index: 100;
}

.modal {
  position: absolute;
  z-index: var(--layer-stack-4);
}
```

Basically, it is preferable to use an HTML structure with no problems with just a `z-index` specification, but there is a high possibility of unintended overlap with other components when a specification such as `z-index: calc(var(--layer-stack-2) + 1);` is used. It is preferable to specify `isolation` for the root of a component whose child elements have a `z-index` specification.

Incidentally, before the advent of `isolation`, there was a hack to generate stacking contexts by specifying `transform` without side-effects (e.g. `transform: scale(1)`).

---

{%codepen https://codepen.io/hiro0218/pen/BaYpExz %}

## Summary

- Specify `z-index` according to **Layer Stack rules**.
- Specify `isolation: isolate` for component root
Productivity (pomodoro) timer with focus on breaks
Tags: showdev, svelte, pomodoro
Published: 2022-05-22 14:43:10

The main point is to define “activities” to do during breaks ( 2 different sets for short/long breaks). 
Personally I find it beneficial:
* short breaks - to do some light exercises targeting legs and back to counter “side effects” of sittings
* long breaks - just make & drink tea

Having music playing in the background, low volume and without human voice, can help to concentrate. That’s why I added a radio player to the app. And it’s nice just to go to the webpage and start working without needing to install apps when switching to a different machine (PC, laptop). 

[live](https://focus.delphic.top/)
[repo](https://github.com/diogenesofweb/focus)
Someone who doesn’t care about your company: that’s a candidate you want
Tags: discuss, career, startup, management
Published: 2022-05-22 14:19:41

One of the first things a candidate learn is to be hyped about the company and research every bit and piece before applying,

Meanwhile, an HR recruiter is trained to recognize and pick candidates that show more of that hype toward the company.

## It doesn’t matter who you work for

In business school, one of the things I’ve learned and still remember is that it shouldn’t matter whom I work for, or what sector or niche they are in. The work will be the same.

Sure, there are specificities to each company, sector, and niche… but those have to be learned one way or another.

## It holds especially true for developers

Few places would actually matter where you work, and for programmers, even the programming language or frameworks shouldn’t matter.

But since we already filter positions by language, then by front, back, DevOps, ML, embedded…

The CRUD will still be a CRUD and the div will have to be centered regardless of where a person is working, all that changes are the business rules, which are different for each new thing anyway.

This is why StackOverflow is something so big in the community: programming is (or should be) like math in the sense that the same input generates the same outcome.

## The advantages

Someone new will always bring something to the table, someone without the hype will be seeing all the bad practices that someone with hype might ignore and will have a more objective view of the team, platform, product, and company… not everyone will be vocal about it, so it’s your job to pick everything you can from them.

### Exceptions?

I’m not saying to pick someone outright hostile to the company or product. 

Someone with rose-tinted glasses will see nothing wrong, but at least will bring everyone’s spirits up, but someone hostile will see everything wrong and be a bother every step of the way.

## The cherry on top

That’s why you want someone “in the middle”, not hyped but definitely not hostile. 
If they see something as a good idea, that’s a bonus point for it. 
If they have concerns, so will your potential clients.

And that’s how it starts, they don’t care where they work.

Afterward… that’s on you!

If you can’t make your employee hyped with your company… then how do you expect to make customers hyped with it?

A customer will see the company and the defects, they will have doubts or complaints… but will just leave. 
Meanwhile, you have an employee with all of those, one who wants to help the company grow!

---

Cover Photo by [Piret Ilver](https://unsplash.com/@saltsup?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/scales?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)


[![https://buymeacoffee.com/noriller](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2oxsipz3edzcyliqrufw.png)](https://buymeacoffee.com/noriller)
How to learn html,css and JavaScript easily.
Tags: html, css, javascript, web
Published: 2022-05-22 14:18:37

Becoming a **programmer** is not what you can just rush, you will need to take your time in learning it as my mentors **OsMaxin Developers** said. you can check them up if you want to have a very knowledgeable impact and experience in web development. 

Firstly, Am gonna tell you how i started my journey into becoming a programmer, i must tell you.. it wasn't an easy journey but when you have a good mentality(positive),then you will see every **_code_** as a normal simple thing, and make sure you schedule a plan,Have a time table and follow every branch topic gradually till your mind tells you, you are done.

**Html:**
Html should normally be the beginning of any programmer, you will have to start from the top, down to the bottom. 
my mentor **OsMaxin Developers** was said.. is not about learning this, 

> _"is about knowing what you want and using what you learn to achieve."_

So, i learnt Html for a while then they noticed i was ready,so i moved to **css**

**Css:**
I found **_css_** hard to me, then later on by the help of my mentors and tutorials .. i was able to meet up even with the help of **W3.school**, then i learnt css, but i was able to learn it because i had a guardian and youtube tutorial... so i will consider you watching tutorials on youtube or you check up **OsMaxin Developers** for tutorials..

**JavaScript**
JavaScript is the level am in now, and i will have to follow up with the routine or to follow up the steps i used in achieving **html** and **css** then it will be goodluck to me.
What is Variable? How to declare? and Legal and Illegal variables declaration in JavaScript?
Tags: javascript, beginners, programming
Published: 2022-05-22 14:13:07

## **What is variable ?**
Variables is the placeholder or the box, container that contains the values i.e. Letter(Strings), Number(integers, decimal), Characters(Special Symbol), Boolean(true and false), Object etc.

## Data type : 
Data type which defines the variable type or what kind of value can be store in the variable.(integer, string, number, symbol, Boolean, Object etc.)  

## **How you can declare the variable in JavaScript**
keyword specifier/Identifier   = value (Data type)

#### **Example :**

```
var name = "Sadiq Shah";
var age = 23;
```
(I pass the value string to the variable named as name and age into number)


## **What is Legal and Illegal variable in JS?**

### Legal Variables : Can be declare 
  

```
  var myname = "Sadiq Shah";
    var myName = "Sadiq Shah";
    var my_name = "sadiq shah";
    var _my_name = "sadiq shah";
    var $my_name = "sadiq shah";

```
### Illegal Variables : Can not be declare

```
  var @myname = "Sadiq Shah";
    var 123myName = "Sadiq Shah";
    var my name = "sadiq shah";
    var month&year = "saadiq shah";
    var birth-year = "1990";

```
New Landmove platform redesign, what do you think?
Tags: css, responsivedesign, javascript, css3
Published: 2022-05-22 14:12:02

The Landmove team have launched our new modernised land marketplace website. [Landmove](https://www.landmove.net) website.
The redesign features a new, modern clean design, We would love to hear some feedback from our dev.to family.
6 Tips for Staying Focused When Studying for Programming Interviews
Tags: career, programming, codenewbie, help
Published: 2022-05-22 14:04:36

Staying focused when studying for programming interviews can be very difficult. It is no easy task trying to learn things like dynamic programming, heaps, and graphs.

I put together a list of 6 things you can do to help you stay focused when studying which include -

- Finding a study partner or community to hold you accountable
- Setting realistic goals
- Understanding you will make mistakes

**[Check out the full article](https://www.hackpack.io/blog/interview-tips/6-tips-for-staying-focused-when-studying-for-programming-interviews)**

### **Join the Community**

**[Hackpack.io](https://www.hackpack.io/)** is the most active community of developers studying for programming interviews. You can apply on the site!

**[Big Tech Interview Tips Newsletter](https://fangprep.substack.com/)**
Let's Create an FAQ section with HTML and CSS only (Detail tag explained)
Tags: css, html, beginners, webdev
Published: 2022-05-22 13:57:25

Using `<detail>` and `<summary>` HTML tags you can create a simple accordion or toggle between hiding and showing secondary text on your website.

These codes are enough to create an accordion.
```
<details>
  <summary>How do I create accordion?</summary>
  <div>
 The tags <em>details</em> and <em>summary</em> have you covered.
  </div>
</details>
```

`detail` tag has an attribute called `open` which by default is set to `false` and if you set it to true your detail with be expanded by default. 

{% codepen https://codepen.io/phelixdusengimana/pen/JjpbzLL %}

Let's see how we can style our accordion.

{% codepen https://codepen.io/phelixdusengimana/pen/ExQNMME %}

Do you have an question ping me via [twitter](https://twitter.com/felix__dusenge)
Data Structures and Algorithms - Quick Sort
Published: 2022-05-22 13:40:29

The next intermediate sorting algorithm we'll discuss is Quick Sort.  The general idea of Quick Sort is to choose a "pivot" point for comparison, and this can be any item in the array.  Then what we do is compare the other values to that and smaller ones get placed to the left and larger ones you guessed it get placed to the right.  Once completed we can now assume that our pivot point is in the right place of the array.  So we break down our initial array into 2 arrays based on their values being larger or smaller than our selected pivot value.  Then in these newly formed arrays we select a new "pivot" point and we repeat the process.  As you guessed it since we are repeating over and over again the best way to do this would be to use recursion, and again completely understanding this one gets very tough very fast.  It is much harder to conceptualize it than Merge Sort (in my opinion).  Ideally you should use the same pivot index in each call, I like to use the first or last element of the array however you can use any.  Here is a quick visualization of how this algorithm works.  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xeegoznifyoo7ymcc9al.png).

Similarly to MergeSort we'll need to create a helper function so that we can do the comparisons with out pivot value and the array that is passed in.  This pivot helper should accept three values, an array, a start index, and and an end index.  Well then grab the pivot point from the start of the array, and again you can choose any point I'll just use the beginning for consistencies (ideally you'd choose the median value, however you might not know it so this will work, in fact any position will work).  We will then loop through the array from the start to end index and compare our pivot value (index of 0) to the next value.  If that value is greater we need to swap those 2 values and increase the pivot index, which for use will be 0 by 1.  At the end of this function we'll return the pivot index.

So after watching videos over and over again and reading many different posts about Quick Sort I can 100% say that I just don't understand it.  I can 100% talk about it and how it works but if anyone ever asked me to implement it from scratch I'd be in some serious trouble.  I feel like with Merge Sort I could rebuild it based on just being able to talk about it where with this algorithm, I just cannot break it down to a point where it makes sense to me.  So for you it might but I got nothing.  I'm gonna keep trying and if I somehow manage a breakthrough with this I will definitely come back and revisit this post.  But my interview with the big "G" is happening Wednesday and I cannot take time that I don't have to try and learn this particular concept better.  [QuickSort](https://github.com/bradisrad83/javascript-data-strucutres/blob/main/Algorithms/QuickSort.js)