teleren/devto huggingface dataset:
Scrollable layout with height 100%
Tags: css, webdev, react, beginners
Published: 2021-10-23 10:15:00

Hello there 👋🏼, internet users. Today, I'll show you a CSS trick I frequently forget about when creating scrollable dynamic height layouts. Recently, I was developing a basic layout similar to one below. It took me a while to remember this trick, but once I did, I had a sense of deja vu and finished the layout.

There are two way to achieve this: 
# Way 1: Using css positions:

{% codepen https://codepen.io/harshboricha98/pen/zYdoXpo %}

If you look at the [code](https://codepen.io/harshboricha98/pen/zYdoXpo) above, you'll see what I mean. As you can see, there's a NAVBAR, a BREADCRUMB BAR, the MAIN SECTION, and a FOOTER all contained within a layout container with the height of `height: 100vh`. I wanted the sidebar and content-box in my main section to be scrollable.

I could set the height as a fixed value, something like `height: 800px` with `overflow-y: scroll` but then making the layout responsive will become a nightmare.

So, the question arises? 🤔. How can we apply the `overflow-y: scroll` attribute to a div with a height of 100 percent?

The solution 🧪 here is to use `position: relative` for the main section container and `position: absolute` for the sidebar and content bar, with `overflow-y: scroll`.


```css
.main {
position: relative;
height: 100%;
}

.sidebar {
position: absolute; 
top: 0;
left: 0;
bottom: 0;  /*stretch from top to bottom w.r.t .main section*/
width: 10rem;
overflow-y: scroll;
}

.content {
position: absolute;
top: 0;
left: 10rem;
bottom: 0;
right: 0; /* stretch from top to bottom, and shift 10rem from left and stretch till right */
overflow-y: scroll;
}
```

There are many other ways, to achieve this. It's just a trick i often use. If you have any alternate way please comment (I'm all 👂). Congratulations 🎉 for reading this. Hope this might help you. Thank you.

After many of you suggested there's a neat way to do this avoiding css positions. I've added another solution using css grid.

# Way 2: Using css grid

{% codepen https://codepen.io/harshboricha98/pen/mdMRXqZ %}
PF - 2 Operators
Tags: programming, beginners
Published: 2021-10-23 16:14:27

Operators in a programming language that tells compiler or interprator to perform arithmatic, relational or logical operations.

## Arithmatic Operators

1.   `+`	Adds two operands	A + B will give 30

2.   `-`	Subtracts second operand from the first	A - B will give -10

3.   `*`	Multiplies both operands	A * B will give 200

4.   `/`	Divides numerator by de-numerator	B / A will give 2

5.   `%`	This gives remainder of an integer division	B % A will give 0


## Relational Operators
1. `==`	Checks if the values of two operands are equal or not, if yes then condition becomes true.	(A == B) is not true.

2. `!=`	Checks if the values of two operands are equal or not, if values are not equal then condition becomes true.	(A != B) is true.

3. `>`	Checks if the value of left operand is greater than the value of right operand, if yes then condition becomes true.	(A > B) is not true.

4. `<`	Checks if the value of left operand is less than the value of right operand, if yes then condition becomes true.	(A < B) is true.

5. `>=`	Checks if the value of left operand is greater than or equal to the value of right operand, if yes then condition becomes true.	(A >= B) is not true.

6. `<=`	Checks if the value of left operand is less than or equal to the value of right operand, if yes then condition becomes true.	(A <= B) is true.

## Logical Operators

1. `&&`	Called Logical AND operator. If both the operands are non-zero, then condition becomes true.	(A && B) is false.

2. `||`	Called Logical OR Operator. If any of the two operands is non-zero, then condition becomes true.	(A || B) is true.

3. `!`	Called Logical NOT Operator. Use to reverses the logical state of its operand. If a condition is true then Logical NOT operator will make false.	!(A && B) is true.
Spice up your terminal using   pokemon themes 🔥
Tags: python, pokemon, terminal, linux
Published: 2021-10-24 05:48:31

Let's be honest, we all love pokemon and for most of us it plays a huge part, in shaping our childhood. So wouldn't it be cool to display them on the terminal.

![Xerneas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pz9sdnjjkmn4n1fwdxm.PNG)

Enter [Pokemon-Terminal](https://github.com/LazoCoder/Pokemon-Terminal). With few steps, you are ready to rock your terminal with pokemon themes.

1. Firstly, the default cmd prompt in windows is not supported, hence download the windows terminal from [here](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab)

2. Install python3 & pip3

3. Run the following command to download and setup the Pokemon-Terminal
```bat
pip3 install git+https://github.com/LazoCoder/Pokemon-Terminal.git
```

Once installed you should be able to execute to set the pokemon theme in the windows terminal
```bat
pokemon <pokemon_name>
```
![Arceus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fccmas8e1x994qu9xhn8.PNG)
That's it, go catch them all! 

Don't forget to star the github [repo](https://github.com/LazoCoder/Pokemon-Terminal) and appreciate the developer for the efforts.
Do you see coding as one fun step, or lots of tedious steps?
Tags: codenewbie, beginners, discuss, decodingcoding
Published: 2021-10-24 06:37:02

---
title: Do you see coding as one fun step, or lots of tedious steps?
published: true
description: How you see the act of coding shows what your true preferences and interests are
tags: codenewbies, beginners, discussion, decodingcoding
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqkjo5b1t4x4imcq8v88.jpg
---

### *How you see the act of coding shows what your true preferences and interests are*

---

Here’s a great heuristic for discovering what your true preferences and interests are, where your passion and enthusiasm is anchored in, credits to [@sivers on Twitter](https://twitter.com/sivers?s=21): 

> Imagining lots of tedious steps? Or one fun step? If we hate doing something, we think of it as hard. We picture it having many annoying steps. If we love doing something, it seems simple. We think of it as one fun step…[like for running] “Easy! You just put on your shoes and go!”

I love this. It’s so true, and so telling. What a great mindfulness and introspective practice! Indeed, anytime I notice that I am thinking ahead and ***dreading*** the many steps to get to the goal, it’s highly likely that I’m not all that enthusiastic about that goal. But during occasions when I’m super motivated and passionate to do something, I don’t think ahead so much, and just f\*\*king do it, even if objectively the steps remain the same. I don’t make as many excuses, or mope and dawdle as much. It’s like the road bumps don’t matter. Challenges are taken on the chin, without sweat and pain. 

But what if something makes you feel both? Like say with coding, I always find myself dreading all the “many tedious steps” ahead. But when it comes to the final product itself, the thought of being able to create something tangible and material that you can see or touch out, of thin air and abstract thoughts – that makes me want to get there in “one fun step”.  

How strange!

Does that imply that I enjoy making, but not coding? So do I enjoy it, or not? Is it possible to enjoy one part of a process but hate another? If so, how do I resolve this conundrum?

---

Follow my daily writings on [Lifelog](https://golifelog.com/goals/30), where I write about learning to code, goals, productivity, indie hacking and tech for good.
Quick tip: if Rust stopped formatting your code ...
Tags: rust
Published: 2021-10-24 09:06:43

Sometimes Rust Analyzer stops formatting my VS Code document and there is no message or explanation why.

This is just one ugly example - lines 46-53 are all over the place. 

![My ugly code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5yfx6wmeed3lc5b6o63.png)

No matter how many times I press `Ctrl`+`Shift`+`I` the IDE would not fix the formatting or tell me what's wrong.

Turns out there is a **simple way to find out why Rust Analyzer fails to format the document:** `cargo fmt`. It will tell you exactly what's broken.

![cargo fmt workaround](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o5mdx2uslrgjv3fcwcj.png)

In this case it was a comment on line 44 that got in the way. The document started formatting again as soon as I removed it.

![My tidy code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slqnt8gnuz2uhasdcdgb.png)

> Beware, `cargo fmt` will attempt to reformat the entire project. Read more about it in https://github.com/rust-lang/rustfmt or run `cargo fmt -- --help` for options.

I went back to several other files that were not formatting properly, ran `cargo fmt` on them and quickly fixed the problems. Happy coding!
Type of Recursion
Tags: kotlin, beginners, programming, recursion
Published: 2021-10-24 17:58:56

## Recursion

Calling same function inside function is known as Recursion.  
Every recurring function must have a breaking condition which break recursion.

## Time taken by Recursion

- **O(n)** if there is no loop inside the recursion

## Types of Recursion

### 1. Tail Recursion

- Recurring function is called at end of all the statements.
- There should not be handling of return type.
- Tail Recursion can be converted to loop easily
  #### Example:
    ```kotlin
    fun main(){
        fun1(5)
    }
    /* Example with recursion
  * Time -> O(n)
  * Space -> O(n)
  */
    fun fun1(n){
        if(n > 0){
            print(n)
            fun1(n-1) // tail recursion
        }
    }
  /*
  * Converted to while loop
  * Time -> O(n)
  * Space -> O(1)
  */
    fun fun1(n){
        while(n > 0){
            print(n)
            n--
        }
    }
    ```

### 2. Head Recursion
Recurring function is called at start before any statements, just after the break condition.  

#### Example:
```kotlin
  fun main() {
      fun1(5)
  }
  
  fun fun1(n) {
      if (n > 0) { 
          fun1(n - 1) // head recursion 
          print(n)
      }
  }
  ```

### 3. Tree Recursion
More than once the self function is called from inside the function

#### Example:
```kotlin
fun main() {
      fun1(5)
  }
  
  fun fun1(n) {
      if (n > 0) { 
          fun1(n - 1) // tree recursion 
          fun1(n - 1) // tree recursion
          print(n)
      }
  }
```

### 4. Indirect Recursion
Recurring via multiple loops, like function A calls B and B calls A

### Example:
```kotlin
fun main(){
    funA(5)
}

fun funA(n: Int){
    if (n > 0){
        funB(n-1)
    }
}

fun funB(n: Int){ 
    funA(n)
}

```

### 5. Nested Recursion
Function is calling itself with returning value and that will be used to call self function.

#### Example:
```kotlin
fun main(){
    fun1(90)
}

fun fun1(n){
  return if(n > 100){
         n - 10
    }else{
        fun1(fun1(n + 11)) // Nested recursion
    }
}

```
Quick info for JavaScript and TypeScript Code Snippets while you browse!
Published: 2021-11-03 19:14:43

*When a website includes a code snippet, Kmdr kicks in to help you understand the code. Version 5.0 of Kmdr's browser extension includes quick info for JavaScript, CSS, HTML, Bash, TypeScript, SCSS, and LESS via mouse over.*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84farwnpval4xoxhpzxz.gif)

There's a lot we're excited to share in the latest release of the Kmdr browser extension! A long time coming, version 5.0 brings support for JavaScript, TypeScript, LESS, and SCSS as well as extended coverage for CLI commands and HTML. Beyond quick info, with the new release comes a new technical base that brings cross-snippet referencing and exciting potential for future user customizations. Read on for details on what's changed and being introduced in Kmdr 5.0.

##Quick info for JavaScript and TypeScript
Prior releases of Kmdr detected JavaScript code snippets and gave users consistent syntax highlighting. Now, users can mouse over key words in JavaScript and TypeScript code snippets and get rich metadata about JS standard built-in objects, including their methods, parameters and properties. Any annotations included in snippets using **JSDoc are referenced in quick info** so that users can quickly see declarations just as they would in Visual Studio Code. **Cross-snippet referencing** is also enabled this release so that any declarations made in code snippets early on in a webpage are referenced in quick info for snippets later down the page.

##Better support for HTML and CSS
We've **improved syntax highlighting** and verbosity for HTML and CSS so that it's at parity with VS Code.  We've added quick info for HTML elements so they're as interact-able as HTML attributes in previous releases. Now, when you mouse over an HTML element, you'll see a definition for the element and a **link to trusted documentation** where you can learn more on how to use it in your code.

##Coverage for LESS, and SCSS
Code snippets that are documented as LESS or SCSS now have syntax highlighting, trusted documentation links, and quick info on mouse over! We will continue to expand on web technology coverage with more JavaScript frameworks and libraries throughout the month of November.

Today's release is a pivot from save and share features as we focused on building out the programming assistant for web developers.  Kmdr's quick info in this and the upcoming releases will help web developers review and quickly understand code examples on the web and find the best solutions on their own and with fewer tabs open. 

The Kmdr extension will automatically update for current users. New users can head [here](https://chrome.google.com/webstore/detail/kmdr/lbigelojleemicaaaogihjnabfndkdii) to install today on Chrome. When a website includes a code snippet, Kmdr kicks in to help you understand the code.
LaTeX: Customizing the Page
Tags: codenewbie, latex
Published: 2021-10-27 14:36:04

Hello, how are you? :) 

In this post I tell you how to change the position of the numbers in your document or delete them. Let's start!!!

Let me introduce you to the instruction

```LaTeX
\thispagestyle{STYLE}
```
Where *STYLE* can be 

- `empty` no header, no footer
- `plain` the page number is on the footer
- `headings` the page number is on the header

You can put that instruction in every single page of your document, or you in some of them.

[Here](https://texlive.net/run?%5Cdocumentclass%7Barticle%7D%0A%5Cusepackage%7Bamsmath%7D%0A%5Cbegin%7Bdocument%7D%0A%0A%5Cthispagestyle%7Bempty%7D%0A%0AHello%0A%0A%5Cnewpage%0A%0A%5Cthispagestyle%7Bheadings%7D%0A%0APeople%0A%0A%5Cnewpage%0A%0A%5Cthispagestyle%7Bplain%7D%0A%0AGreetings%0A%0A%5Cend%7Bdocument%7D) is an exaple, you can play with it and use all the commands. 

This is all for today, thank you!!!

Do not forget to follow me on Twitter `@latexteada`

Greetings :)
The Structure of an HTML Tag
Tags: html, beginners, tutorial
Published: 2021-10-25 16:55:20

{% youtube MHf2Fd6cxFU %}

Hey guys, this is Bhanu Stark from Public App. Today we are going to talk about the structure of an HTML Tag.

In this post, you will find the answer of –
What is HTML tag?
What is HTML element?
What is opening tag?
What is closing tag?
What is self-closing tag?
What is an attribute?
How to know everything about an HTML element?
How to know about all the HTML elements?

Read full post here or watch video above-
[The Structure of an HTML Tag](https://www.publicapp.in/the-structure-of-an-html-tag/)
Publishing The State Of The Web
Tags: conference, presentation, transcript, aea
Published: 2021-11-07 07:48:18

---
title: Publishing The State Of The Web
published: true
date: 2021-11-03 18:50:26 UTC
tags: conference,presentation,transcript,aea
canonical_url: https://adactio.com/journal/18586
---

Back in April I gave a talk at [An Event Apart Spring Summit](https://aneventapart.com/event/spring-summit-2021). The talk was called <cite>The State Of The Web</cite>, and [I’ve published the transcript](https://adactio.com/articles/18580). I’ve also published [the video](https://vimeo.com/641568337).

I put a lot of work into this talk and I think it paid off. I wrote about [preparing the talk](https://adactio.com/journal/17902). I also [wrote about recording it](https://adactio.com/journal/17934). I also published [links related to the talk](https://adactio.com/journal/18038). It was an intense process, but a rewarding one.

I almost called the talk <cite>The Overview Effect</cite>. My main goal with the talk was to instil a sense of perspective. Hence the references to the famous Earthrise photograph.

On the one hand, I wanted the audience to grasp just how far the web has come. So the first half of the talk is a bit of a trip down memory lane, with a constant return to just how much we can accomplish in browsers today. It’s all very positive and upbeat.

Then I twist the knife. Having shown just how far we’ve progressed _technically_, I switch gears the moment I say:

> The biggest challenges facing the World Wide Web today are not technical challenges.

Then I dive into those challenges, as I see them. It turns out that technical challenges would be preferable to the seemingly intractable problems of today’s web.

I almost wish I could’ve flipped the order: talk about the negative stuff first but then finish with the positive. I worry that the talk could be a bit of a downer. Still, I tried to finish on an optimistic note.

I won’t spoil it any more for you. [Watch the video](https://vimeo.com/641568337) or have a read of [<cite>The State Of The Web</cite>](https://adactio.com/articles/18580).
JavaScript Loose Equality vs Strict Equality check
Tags: javascript, webdev, beginners, programming
Published: 2021-11-04 06:10:40

Hello Everyone!

In this post we will explore the difference between JS **loose equality (==)** and **strict equality (===)** check.

Here is the simplest definition

- *Loose equality (==) checks for value only.*
- *Strict equality (===) checks for value as well as DataType.*

But wait, there is something more to it. Let's understand the workings of both of them one by one.

## Strict Equality (===)
Strict equality first checks for DataType, If datatype is same then it checks for value, else it returns false.

Ex:
```js
console.log("55" === 55);
// false - Because datatype is different even though value is same.
```

![strict-equality](https://swastikyadav.com/static/fb13ed8d7700fdecf4b32f65f7626d8d/a331c/strict-equality.png)

## Loose Equality (==)
Loose equality works similar to strict equality. The only difference is that in loose equality if datatype is different, it performs an **Implicit type conversion** and then compares the value.

Ex:
```js
console.log("55" == 55);
// true - Because implicit conversion will change string "55" to number 55 then compare value.
```

![loose-equality](https://swastikyadav.com/static/f0c2fa74185081d24515567ac66d29ec/a331c/loose-equality.png)

If you enjoyed or found this post helpful, please consider joining my weekly Newsletter below.

Thank You for reading.

--------------------------

I am starting a NewsLetter where I will share epic content on building your skillset. So, if this sounds interesting to you, subscribe here: https://swastikyadav.com
Empleos en Data y Analytics LATAM — Nov. 2021 - I
Published: 2021-11-04 16:11:56

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻.
✅[Data Analyst- Banco Pichincha (Ecuador)](https://ec.indeed.com/viewjob?jk=b307ec4fe5c94cc9&tk=1fjlrj61tn5ec800&from=serp&vjs=3)
✅[Data Scientist - Empresa Editora El Comercio S.A.(Perú)]
(https://pe.indeed.com/viewjob?jk=b982ce9ba56b8f7e&tk=1fjlr386uhim6800&from=serp&vjs=3)
✅[Data Scientist - NielsenIQ (Mexico)]
(https://mx.indeed.com/viewjob?jk=84423c86b384e9e0&tk=1fjlr6kn6t4h6800&from=serp&vjs=3)
✅[Data Analyst - Digitas (Argentina)]
(https://ar.indeed.com/viewjob?jk=e5f4eaa8c815fca7&tk=1fjlr9cbehip7800&from=serp&vjs=3)
✅[Machine Learning Analyst - BAXTER (Colombia)](https://co.indeed.com/viewjob?jk=d696bde2cdbd05e8&tk=1fjlrf3ebhim6804&from=serp&vjs=3)
✅[Data Engineer- 23people (Chile)](https://cl.indeed.com/ver-empleo?cmp=23people&t=Junior+midlevel+data+engineer&jk=a70f0e87720a81d6&q=Data+Engineer&vjs=3)

Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Visita nuestra página:
👉🌐 datahack.la
My Ideal App
Published: 2021-11-06 12:46:55

#Background

I’ve been very fortunate to have a family who supports me financially through college, but once the pandemic hit I realized how important it is to learn about personal finance. I realized that I know nothing about investments, passive incomes, stocks, or really even serious budgeting. While I have a job secured for after graduation, I have realized that personal finance is something I need to begin learning. This is the main reason why my ideal app would be a game that would teach/develop personal finance.

#Idea

The main idea would to have various mini-games or several sections that players could choose between to enhance their skills in particular areas. I believe that it would be a simulation type game where if one would want to learn about the stock market, it would provide an interactive simulation to play through. I personally find that the best way to learn things like this is hands on learning, but not everyone has money to throw around in the real world which is why a simulation game like this would be ideal. Not only would programming this application potentially create a beneficial game for many others struggling with personal finance, but also it would give me the opportunity to get a deeper of knowledge on my own along the way.

#Extra

Like many others in programming, I have had many instances of imposter syndrome. Even without these occasional doubts, I’m honestly not sure if I could say exactly what I would want to do with my skill set. I feel that I have a wide range of interests and haven’t found an exact passion/niche in programming yet.
Fastest way to learn Web dev
Tags: javascript, webdev
Published: 2021-11-04 18:58:30

If you search in the wab about full stack web development then you might get a complex roadmap for that. But is that actually true? Is the roadmap too complex?

Well the answer to both of the question is "NO". Even you might get a complex roadmap where many things are not even needed.

Now what is the actual roadmap? How many languages to learn?

So the roadmap is very simple.
Learn HTML CSS and JavaScript at first and master JavaScript very nicely. You don't need to learn any other programming language rather than JavaScript. After HTML, CSS, JavaScript, learn node.js and mongo DB as database.

That's it. If you dedicate at least 9 hours per day then it will take about 2 months being an awesome programmer.