teleren/devto huggingface dataset:
JavaScript's Recursion Handling is Weird 🤷‍♂️
Tags: javascript, programming
Published: 2021-01-24 17:11:31

Recursion is one these things that you just have to accept before you understand it. However, once it clicked, it becomes an elegant way to solve problems, or to rephrase algorithms.

Memory-wise, recursion can be tricky. When used without care, recursion usually ends up causing stack overflow errors, as each call is added to the memory stack up on top of its ancestor - until the stack is out of space.

In order to prevent this scenario, it's preferable to use [tail recursion](https://www.geeksforgeeks.org/tail-recursion/).
This pattern dictates making the recursive call only at the very end of the recursive function. This allows the compiler (or engine, in the case of JavaScript) to optimize the function, so every recursive call frees its stack space once the next call is made.

## Where Things Become Non-intuitive

When exemplifying recursion, the first thing that comes to mind is calculating the Fibonacci numbers.
Consider these two functions:

```javascript
function fib1(n) {
  if (n === 1) return 0;
  if (n === 2) return 1;
  return fib1(n - 1) + fib1(n - 2);
};

function fib2(n) {
  return (() => {
    if (n === 1) return 0;
    if (n === 2) return 1;
    return fib2(n - 1) + fib2(n - 2);
  })();
};
```

Obviously they have the same output, although with a slight difference: `fib2` contains a call an anonymous function that just wraps the same content of `fib1`.
Apparently this minor change causes significant performance discrepancy: for lower `n` values the two function perform pretty much the same. Yet, around `n = 25`, the trend changes, so that `fib2` becomes exponentially faster:

![Runtime differences between the two recursive Fibonacci functions](https://dev-to-uploads.s3.amazonaws.com/i/pv0qqy2qiii2okztocus.png)

With tail recursion optimization in mind, it all makes sense. However, according to [this table](https://kangax.github.io/compat-table/es6/) no JavaScript engine supports it (this conclusion is also backed by [this StackOverflow answer](https://stackoverflow.com/a/54721813/3103891)).

And so we're left with one of JavaScript's unsolved mysteries. Every now and then, when this comes across my mind, it strikes me how even [the world's most popular language](https://insights.stackoverflow.com/survey/2020#technology-programming-scripting-and-markup-languages) has its weird issues that are deep under the hood, but potentially affects countless developers and applications.
Dealing with unexpected changes 
Tags: challenge, webdev, devjournal
Published: 2021-01-24 17:10:18

Week 2 of my 'post-graduation' / 'job-hunt' journey and well here is where I am. I started off with a strong schedule I made to make sure I was working on my programming and projects.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/01arj4nsg7bpm9mhrgxn.jpg)

I found myself changing my schedule as I went because I either found a better source, needed more time on a subject, or just spent too much time applying for jobs. 

This week started out by working on the Front End Libraries curriculum from freecodecamp.org and getting through to the Redux section where I decided to go in deeper into React. I started The Net Ninja's currently ongoing series "Full Modern React Tutorial" where he goes into the hooks which let you use state and other React features without writing a class with v16.8. This has been incredibly helpful with starting a basic react app involving these hooks.  

Additionally, I started digging into the Big O; in particular about the space and time complexities. I still have a long way to go but now I have an overall understanding of how each affects the runtime.

At the end of this week I:
- Now use my schedule as more of a task list of what to work on
- Started working with hooks in react
- Started to learn about the Big O.

Sources mentioned:
[freecodecamp.com](https://www.freecodecamp.org/learn/)
[Full Modern React Tutorial](https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d)

01-24-2020,
Ken
`onClick` listener to be a function, instead got a value of `object` type.
Tags: react, javascript, nextjs
Published: 2021-01-24 16:50:28

Here is i am checking on my cart page if user is null than open login popup otherwise go directly to Checkout page.

```
 var path;
  if (user !== null) {
    path = "/checkout";
  } else {
    path = "";
  }
```

Here is the button on cart page.
```
 <button
   type="button"
   onClick={path === "" ? openModal : <></>}>
   <Link href={path}>Checkout</Link>
 </button>
 <Login showModal={showModal} setShowModal={setShowModal} />
```

But i am getting warnings on console that `onClick` listener to be a function, instead got a value of `object` type. Modal is opening but how can i fix this warning ?
10 Retro CSS frameworks to relive your childhood
Tags: css, webdev
Published: 2021-01-24 16:44:07

Prank your friends or colleagues, build a retro-looking portfolio for yourself, entertain visitors to your websites with old-school themes, or most importantly, let your creativity run wild, have fun with coding and relive your childhood with these amazing Retro CSS frameworks.

# NES.css ([Demo](https://nostalgic-css.github.io/NES.css/))
{% github https://github.com/nostalgic-css/NES.css %}

# 98.css ([Demo](https://jdan.github.io/98.css/))
{% github https://github.com/jdan/98.css %}

# BOOTSTRA.386 ([Demo](https://kristopolous.github.io/BOOTSTRA.386/))
{% github https://github.com/kristopolous/BOOTSTRA.386 %}

# Geo ([Demo](http://divshot.github.com/geo-bootstrap/))
{% github https://github.com/divshot/geo-bootstrap %}

# XP.css ([Demo](https://botoxparty.github.io/XP.css/))
{% github https://github.com/botoxparty/XP.css %}

# PSone.css ([Demo](https://micah5.github.io/PSone.css/))
{% github https://github.com/micah5/PSone.css %}

# RPGUI ([Demo](https://RonenNess.github.io/RPGUI/))
{% github https://github.com/RonenNess/RPGUI %}

# Win95.css ([Demo](https://alexbsoft.github.io/win95.css/))
{% github https://github.com/AlexBSoft/win95.css %}

# 7.css ([Demo](https://khang-nd.github.io/7.css/))
{% github https://github.com/khang-nd/7.css %}

# Pokémon GameBoy CSS ([Demo](https://timothywalter.github.io/css-pokemon-gameboy/))
{% github https://github.com/timothywalter/css-pokemon-gameboy %}
The joy of deleting code
Tags: thoughts, deletingcode, softwareengineering, softeng
Published: 2021-01-24 16:45:28

---
title: The joy of deleting code
published: true
date: 2021-01-24 16:38:29 UTC
tags: Thoughts, Deletingcode, Softwareengineering, Softeng
canonical_url: https://www.rockandnull.com/joy-of-deleting-code/
---

 ![The joy of deleting code](https://images.unsplash.com/flagged/photo-1578728890856-8bbf3883aa6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMTc3M3wwfDF8c2VhcmNofDJ8fGRlbGV0ZXxlbnwwfHx8&ixlib=rb-1.2.1&q=80&w=2000)

I consider myself a software craftsman. As every craftsman, I take good care of my craft. I create it, I augment it, and occasionally I reduce it.

Adding new features always makes me happy and I can understand why. I augment something that I really care about, making it even better. What I find difficult to understand is why I take so much joy when I am deleting code.

It just doesn't make sense. Every line of code I wrote has cost me time and/or mental effort. Sometimes a significant amount of both. I should feel bad when I figure out that I don't need this massive block of code or this feature is just useless and needs to be removed.

My only explanation is that it has to do with my mental model when building and understanding software. By default, I try to fit the entire program I am working on in my mind. By fit, I mean that, at some capacity, I try to be able to "dry run" the program myself. I can "calculate" what output the program might produce when certain inputs are given.

And I do this almost all the time while developing. When modifying a method, when refactoring some part of the code, when moving variables around. I quickly perform "tests" to ensure that I am not breaking anything.

(Ideally, software is split into self-contained modules for this exact reason: to be able to work on a module without the need to understand almost anything outside of it. But in reality, this rarely happens. Modules are rarely self-contained and small enough projects are not split into modules at all. Anyway, this is a subject for another time.)

Therefore, I suspect that the joy I get when I have to delete some code is not for the deletion per se. The joy comes from the simplification. If the codebase is reduced then it will be easier to "fit" it in my mind when trying to "dry run" it.

This better understanding leads to increased happiness when working on the codebase and the joy I am referring to. I am not happy about getting rid of something I spend time and energy on in the past. I am happy because the reduced code size will require less mental effort when working on that project.

So there you go. Go and delete that unneeded feature without feeling guilty about the joy you get. Until another feature takes its place and you are back to square 0 :)
Crack The Coding Interview With Me: Quick Sort
Published: 2021-01-24 16:35:09

# 📚 Theory:
{% youtube SLauY6PpjW4 %}
* [stackabuse.com: Quicksort in JavaScript](https://stackabuse.com/quicksort-in-javascript/)

# 👩‍💻 Code:
{% gist https://gist.github.com/olg200492/42092d7bab2d8573102757ca4f243a3b.js %}

## 🗃 Interview Questions
* [sanfoundry](https://www.sanfoundry.com/quicksort-interview-questions-answers/)
* [GeeksforGeeks](https://www.geeksforgeeks.org/quiz-quicksort-gq/)
LinguaBook - React app for learning Basic English
Tags: react, javascript
Published: 2021-01-24 16:33:39

I am building [a micro app](https://linguabook.github.io/) for learning [Ogden's Basic English](http://basic-english.org/).
It is open source project with code available on [github](https://github.com/linguabook/linguabook.github.io).

Under the hood it is heavily using my [Just-in-Time scraper](https://github.com/lingvograph/scraper) (my another open source project). This scrapper parses HTML pages from multiple sources in the browser and the parsed results are displayed on the page.

Here are some ideas for making the app even better:
* infinite feed with all words displayed as instagram-like cards
* ignoring known words
* wrapping it into mobile app using React Native or [KaiOS](https://www.kaiostech.com/)
* multi-language support
* adding more word lists for advanced users

Enjoy! EOF :smile:

Link to [original post](https://tsvbits.com/linguabook)
Finish that side project — Building my portfolio site series 
Tags: productivity, webdev, javascript
Published: 2021-01-24 16:27:30

Disclaimer: This is my first blog post on DEV.to so bare with me.

As a developer we all know that it's important to have a portfolio site up and running for yourself. I don't think anyone disagrees when I say that. So I decided to build myself one using Gatsby and Markdown. But in my opinion, having the idea for a project is just 0.1% of the job and we can give actually starting the project a percentage of about 10. Having good discipline and consistency also plays a huge role in completing the said project. All in all, I think we've all seen enough memes about starting new projects without actually finishing the one on hand. 

![Finishing A Project Meme](https://dev-to-uploads.s3.amazonaws.com/i/9c984qkobvhw0p31e9mw.jpg)

In my experience, there were some clear reasons why I was procrastinating like crazy and starting other side projects. To list some of them down below: 
* Thinking that I have to build the site in a fancy tech stack
* Thinking that I need to participate in many huge projects beforehand
* The idea that I need to finish all the parts before putting the site on production.

After figuring out these problems the next obvious step would be to find a solution. Let's go through what I thought would solve some of them.

First, to solve the issue with procrastination I decided to blog my experience in a series format. This means I will share with you some of the issues I face and also how I was able to solve them every Monday. Let's hope this keeps me disciplined. 

In regards to choosing the best stack, why not use the most simple and performant stack HTML5, CSS & Vanilla JavaScript. This way I will be able to grow my basic skills in using plain JavaScript and make the site highly performant. When the need comes for a personal blog I can easily migrate to Gatsby or any other technology. You can read more about vanilla javascript performance when compared to frameworks on [this blog post](https://medium.com/javascript-in-plain-english/javascript-frameworks-performance-60f71d321693) by Louis Petrik. 

I don't think I also need to finish the whole site before publishing it, I can have a landing page with a small description about me and my social media links. Then push features as they are finished. Besides, having the site running as early as possible will help with domain age for SEO.

Finally like what Mark Zuckerberg allegedly said based on the movie _The Social Network_, "**Let the hacking begin**"
Describing Dataset through...
Tags: machinelearning, datascience, opensource, beginners
Published: 2021-01-24 16:22:29

**Descriptive Statistics** are used to describe a data in a simple way.
A raw dataset is difficult to describe, descriptive statistics describe the dataset in a simple manner through:

* Measure of Central Tendency(Summary Statistics):Mean , Median, Mode
* Measure of Spread: Range, Quartiles, Percentile, Absolute Deviation, Variance and Standard Deviation.
* Measure of Symmetry: Skewness
* Measure of Peakedness: Kurtosis

*Measure of Central Tendency*: The goal of measure of central tendency is to come up with one single number that best describes a distribution of scores.
Choosing one of the three measure of central tendencies over one another depends on two factors:
1.*Scale of Measurement*: It is used so that a summary makes sense given the nature of the scores.
2.*Shape of Frequency Distribution*: It is used so that the measure accurately summarizes the distribution.

**MEAN**: The arithmetic average of some data is average score or value and computed simply by adding together all scores and dividing by the number of scores. It uses information from every single score.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3475nb7asmu5ap4nubs7.png)
There is another term called **Trimmed Mean** and **Geometric Mean**.
**Trimmed Mean** is obtained by deleting a percentage of the smallest and the largest values from a data set and then computing the mean of the remaining values.
**Geometric Mean** is calculated by finding the nth root of the product of n values.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c34gmuy96ci8vhlsobt9.jpg)

**MEDIAN**: There are three methods for computing the median,depending on the distribution of scores.

1.If you have an odd number of scores then, pick the middle value as median.
For example, 9 6 3 5 8 : Here the median=3.

2.If you have an even number of scores then, take the average of two middle scores.
For example, 9 6 3 5 8 9 --> 3+5/2 --> 4 : Here the median=4.

3.If you have several scores with the same number of value in the middle of distribution use the formula for percentiles.

**MODE**: If data is categorical(measures on nominal scale) then only the mode can be calculated.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q552dbofmxmyxvq9e934.png)

In next I'll be writing about dispersion measures.👨
Docker high disk space usage 💾 📈
Tags: docker, ubuntu, opensource, raspberrypi
Published: 2021-01-24 16:16:51

### Did you find an heavy disk space usage on your server and you don't know what is the root cause?

If you do some tests with Docker or you're running some containers on your machine, the cause of this abnormal disk space usage might be just Docker 🐋!

For example on my Raspberry Pi 4 I've seen an heavy space usage on `/var/lib/docker/` directory, specially on `overlay2`:

```
root@rpi4:/home/user# du -h -d 1 /var/lib/docker/
2,6M    /var/lib/docker/image
15G     /var/lib/docker/overlay2
5,2M    /var/lib/docker/containers
...
17G     /var/lib/docker/
```
To fix this issue you can employ this command `docker system prune` see an example:

```
root@rpi4:/home/user# docker system prune
WARNING! This will remove:
  - all stopped containers
  - all networks not used by at least one container
  - all dangling images
  - all dangling build cache

Are you sure you want to continue? [y/N] y
Deleted Containers:
64086f34849c92aa2aed8a8757d7c395fbd4a2d77103174bd23a9efc8e0ec333
7be7eda3b32971f39cf08629eaf6d8f42c2677d02f220e0a09a4d955fb0ff5bb
aef03c9d804ae46ed17fa3ecd602a6d335f810a025204f208b3d78186ef26864

Total reclaimed space: 14.04GB
```

###[Do you want more information or simply read this article in original language (Italian 🇮🇹)?](https://andreapavone.com/2021/01/liberare-spazio-su-docker/)
Get familiar with the SeleniumBase API
Tags: python, testing, webdev, tutorial
Published: 2021-01-24 16:13:39

SeleniumBase framework comes with a set of pre-defined [APIs](https://seleniumbase.io/help_docs/method_summary/) or helper methods for us to use. In this post, we will get familiar with some of the common APIs such as click, get_text, assert_text, etc… and understand how it works and which ones to use when.

### **💭 Why use SeleniumBase API?**
SeleniumBase API provides us with helper wrapper methods to use that are built on top of regular selenium commands. These wrapper methods make working with Selenium a lot easier as it comes with in-built smart wait features to make your tests more reliable. So, you do not have to worry about adding waits or sleeps after every other command, as all of that gets dealt with by SeleniumBase APIs.

It even comes with some additional helper methods which you typically would have to create on your own when directly using Selenium commands.

---

### **Scenario #1 – Click on a button and assert URL**

![Scenario1](https://dev-to-uploads.s3.amazonaws.com/i/u3k1ru7f6mnxoqousd9q.png)

---

### **Scenario #2 – Scroll and assert the text of the element**
   
![Scenario2](https://dev-to-uploads.s3.amazonaws.com/i/26hold5zdoumkzqz2top.png)

---

### **Check out the video below to learn more about the SeleniumBase APIs –**
{% youtube wXBT0XZ2RfA %}

---

📧 Subscribe to my [mailing list](https://automationbro.com/mailing-list) to get access to more content like this 
👍 Follow [automationbro](https://twitter.com/automationbro) on Twitter for the latest updates

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>

You can also support me by liking and sharing this content.

Thanks for reading!
Eleventy Plugin for efficient CodePen embeds | Notes
Tags: notes, eleventy, library, javascript
Published: 2021-01-24 19:25:30

---
title: Eleventy Plugin for efficient CodePen embeds | Notes
published: true
date: 2021-01-24 15:49:50 UTC
tags: notes,eleventy,library,javascript
canonical_url: https://abhi.page/notes/11ty-plugin-codepen/
---

> **Direct Links:**
> - [github.com/manustays/eleventy-plugin-codepen-iframe](https://github.com/manustays/eleventy-plugin-codepen-iframe)

Yet another 11ty plugin to embed CodePens into you pages. The other plugins that I had seen use CodePen’s preferred Javascript based embeds. It requires loading an external Javascript (though, a small one) into your page. The Codepen embed Javascript finally creates an `<iframe>` anyway!

I wanted a more efficient solution for my blog by directly embedding the Pen’s iFrame; therefore I wrote this plugin.

## Usage [§](https://abhi.page/notes/11ty-plugin-codepen/#usage)

#### STEP 1: Install the plugin:

```bash
npm install --save-dev @manustays/eleventy-plugin-codepen-iframe
```

#### STEP 2: Include it in your `.eleventy.js` config file:

```javascript
const embedCodePen = require("@manustays/eleventy-plugin-codepen-iframe");
module.exports = (eleventyConfig) => {	 
 eleventyConfig.addPlugin(embedCodePen, { tabs: "js,result"	});
};
```

#### STEP 3 – Use it in your templates like this:

```
{% CodePen "https://codepen.io/abhiweb/pen/wvzNaQM", "result", "220" %}
```

## Config Options [§](https://abhi.page/notes/11ty-plugin-codepen/#config-options)

These options set the default values for embedded Pens. They can be overridden while embedding individual Pens.

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| tabs | string | “result” | Default comma-separated string of the tabs of the codepen to display |
| height | number | 300 | Default height of Pen iFrames |
| width | string | “100%” | Default width of Pen iFrames |
| theme | string | “dark” | Default theme for all Pens |
| user | string | “” | CodePen user-id to use if only Pen-id is provided |
| class | string | “codepen” | CSS classes to add to the iFrame |

## Demo [§](https://abhi.page/notes/11ty-plugin-codepen/#demo)

Check it out live in my other post **[A Regular Expression to filter invalid names](https://abhi.page/notes/regex-to-validate-names/)**

* * *

[**Read on abhi.page**](https://abhi.page/notes/11ty-plugin-codepen/)