teleren/devto huggingface dataset:
The First known Computer bug.....
Tags: programming, javascript, codereview, python
Published: 2021-07-03 22:57:21

      Have you ever wondered where the term computer bug originated from ?

      well i have , the first bug to be discovered was actually a bug(insect).....

     On September 9, 1947, a team of computer scientists and engineers reported the world’s first computer bug. A bug is a flaw or glitch in a system. Thomas Edison reported “bugs” in his designs as early as the 1800s, but this was the first bug identified in a computer. Today, software bugs can impact the functioning, safety, and security of computer operating systems. “Debugging” and bug management are important parts of the computer science industry.

The team at Harvard University in Cambridge, Massachusetts, found that their computer, the Mark II, was delivering consistent errors. When they opened the computer’s hardware, they found ... a moth. The trapped insect had disrupted the electronics of the computer.


  well , an advice from me to you, if you try debugging your code all day and nothing positive seems to be happening ,worry not , you only have to check your computer hardware for real bugs.....


   who knows you might also be the first to discover something new
Front-End vs Back-End Development
Tags: webdev, frontend, backend, discuss
Published: 2021-07-03 22:57:12

A front-end dev deals with format, plan and intuitiveness utilizing HTML, CSS and JavaScript. They take an idea from the drafting board and switch it into the real world. 

What you see and what you utilize , like the presence of the site , the sink menus and subsequently the content, are completely united by the front-end dev, who composes a progression of projects to tie and construction the climate , make them look great and add intuitiveness. These projects are gone through a program. 

The backend designer designs what's going on in the background. this is frequently where the information is put away, and without this information, there would be no frontend. The backend of the online comprises of the worker that has the site , an application for running it and an information base to contain the data . 

The backend dev utilizes PC projects to ensure that the worker, the machine and hence the data set run as planned together. this kind of dev had the chance to break down what an organization's necessities are and supply effective programming arrangements. to attempt to this load of astonishing stuff they utilize a spread of worker side dialects, as PHP, Ruby, Python and Java.
How can we use authentication token if cookie is blocked by user.
Published: 2021-07-03 16:56:19

## Authentication Token

Authentication Token is a non human readable text which contains some encrypted data. It is used to authenticate user for API access.
[read-more-about-it](https://www.okta.com/identity-101/what-is-token-based-authentication/)

## SPA

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.
[wiki](https://en.wikipedia.org/wiki/Single-page_application)

## Way to authenticate users using token

1. User signin with `id` and `password`
2. Server sends a `token` if user is authenticated
3. On next `http` request, user sends `token` as header, query-parameter or by whatever way to authenticate with API's.

## The way we store token in browser

1. localStorage
2. sessionStorage
3. cookie

You can read about advantages and disadvantages over [here](https://stackoverflow.com/questions/48712923/where-to-store-a-jwt-token-properly-and-safely-in-a-web-based-application)

## What's next?

All the above storage mechanism are depended on `cookie`. If cookie is blocked by user then your application will not function properly or it might break.

Suppose, user clicks on `signin` url and your server sends a token to the user in response. After getting the token, you will store the `token `on browser storage. But <span style="color:  #202124;;">unfortunately your application can not store token, because user has blocked cookie and you might get error like below.</span>
<span style="color:  #202124;;">![Error image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4fugrxtwjasiv3k0c7i.png)</span>

<span style="color:  #202124;;">Your application will break here if you are not </span>handeling them with `try and catch `
<br>
``` javascript
// set
try{
	localStorage.token = "...";
}catch(e){
	//
}

// get
try{
	console.log(localStorage.token)
}catch(e){
	//
}
```

<span style="color:  #202124;;"> </span>

If you are handeling web storage with `try and catch `then either you can prompt user to enable cookie or leave user as not authenticated. If user went on any other page and that page require authentication then again user has to  come at signin page.

**Process continue...**
<br>
```
Sign-in page > Authenticated page
Authenticated page -> Sign-in page
Sign-in page > Authenticated page
Authenticated page -> Sign-in page
....
```

## The Solution

We have currently two solutions to this problem

1. Redux or any other state management library
2. `Window` global variable

If you are using **redux**   then you need to write a lot of code.

If you are using **window** then you don't need to write...
<br>
## Example

1. Make a **POST** request to the server
2. Get the token and store it in a variable `(token)`
3. Assign it to **window** `window.token = token`
4. Now, you can use this any where..
React page routes made easy!!
Tags: javascript, react, gatsby, html
Published: 2021-07-03 22:42:16

    Ever wondered how to implement page routes in a complex react application?
worry not cuz i ve'gat a solution for y'all

   an npm package @dev_hills/easyroutes ,it makes routing between pages as easy as easy!!

   npm i @dev_hills/easyroute and you are all set-up, it accepts a single prop which is basically an array of objects.
   
 
//[{path:"/about",component:"About"}]

   you can as well pass in any number of objects to the array , thats all you need as property to get up and running with this cool package ..

   check it out guys
Bogo sort algorithm
Tags: algorithms, computerscience, codenewbie, python
Published: 2021-07-03 22:31:26

Hi, today, I'm going to talk about ridiculous sorting algorithms which are called *Bogo sort*

## Definition of Bogo sort

Bogo sort: called also *stupid sort*, *slow sort*, *monkey sort* is a type of sorting algorithms, it works by shuffling randomly array elements until the array is sorted.

## Time & Space complexity

Time complexity: <br />
+  Best case: O(n)
+  Average case: O(n!) 
+  Worst case: infinte ( *because there is no guarantee that a randome suffling will ever produce a sorted array* )

The space complexity of *Bogo sort* is O(1)

## Implementation of Bogo sort using Python

for getting a random integer to shuffle the array we need to import **randint** from the random module
```python
from random import randint
```

### Shuffle function

```python
def shuffle(arr: list):
    for i in range(len(arr)):
        randomInt = randint(0, len(arr) - 1)
        arr[randomInt], arr[i] = arr[i], arr[randomInt]
```

### isSorted function

we should implement a function that checks if the array is sorted, if the function returned True, It means the array is sorted and we need to break the loop, else (*returned False*) we'll shuffle it again until the array will be sorted.

```python
def isSorted(arr: list) -> bool:
    for i in range(len(arr) - 1):
        if arr[i] > arr[i + 1]:
            return False
    return True
```

### Bogo sort 

this function shuffles the array randomly until it is sorted.

```python
def BogoSort(arr: list) -> list:
    # while the array is not sorted
    while not isSorted(arr):
        shuffle(arr)
    # if the array is sorted
    return arr
```

### Final Code 

```python
from random import randint

def isSorted(arr: list) -> bool:
    for i in range(len(arr) - 1):
        if arr[i] > arr[i + 1]:
            return False
    return True

def shuffle(arr: list)  :
    for i in range(len(arr)):
        randomInt = randint(0, len(arr) - 1)
        arr[randomInt], arr[i] = arr[i], arr[randomInt]

def BogoSort(arr: list) -> list:
    while not isSorted(arr):
        shuffle(arr)
    return arr
```

Have an amazing day!

## References and useful resources

+ [https://www.geeksforgeeks.org/bogosort-permutation-sort/](https://www.geeksforgeeks.org/bogosort-permutation-sort/)

+ [https://rosettacode.org/wiki/Sorting_algorithms/Bogosort](https://rosettacode.org/wiki/Sorting_algorithms/Bogosort)

+ [https://www.youtube.com/watch?v=DaPJkYo2quc](https://www.youtube.com/watch?v=DaPJkYo2quc)

\#day_21
Javascript Hacks
Tags: javascript, react, reactnative
Published: 2021-07-03 20:08:16

There are many amazing features in javascript that can make your life much simpler, In this blog, I have added 20 features that every javascript developer should know.

1.Resize the Array using an array. length.
{% gist https://gist.github.com/bykoding/e1dfed9ebe65d0c3ad14b57173b1aa05 %}

2.Swapping of two Numbers.
{% gist https://gist.github.com/bykoding/eb532a13566c73abb4f2a09aa9aba5d7 %}

3 Concatenating two or more arrays without causing server overload.
{% gist 
https://gist.github.com/bykoding/41093e5c5deac014e893e0e387ec4cd4 %}

4.Use Filter in a different way.
{% gist
https://gist.github.com/bykoding/3f1e4f89b24a3ddb0d90f6835c02bc90
%}

5.Iterate on the map from 0 to n.
{% gist
https://gist.github.com/bykoding/32487dedf05486d781d2ea0fdff57d15
%}

6.Replace all occurrences of a word in a string
{% gist 
https://gist.github.com/bykoding/01b5321135f4786848f5b2bc77383651
%}

7.Shortcut for conditions.
Here, I am explaining basic two examples we can implement in multiple ways.
{% gist 
https://gist.github.com/bykoding/a1f4303a272a21055d7a761eb8309287
%}

8.String to number / Number to string.
{% gist 
https://gist.github.com/bykoding/7cc8f05eaf0f9e7142c5ddeb1d7bafc0
%}

9.Use the console in different ways.
{% gist 
https://gist.github.com/bykoding/5444417be12a942c2269352a78efe423
%}

10.Use console.table
{% gist 
https://gist.github.com/bykoding/482147e9ff4edbf02588266e8d41eb70
%}

11.Get the items near to last index of an array.
{% gist 
https://gist.github.com/bykoding/56bb36aaf6eaacaa0e2d19aecc82e54b
%}

12.Get n power of any number.
{% gist 
https://gist.github.com/bykoding/ec10ddb53540e9ba33d55d4eb2e627ea
%}

13.Check the falsy or truly value.
{% gist 
https://gist.github.com/bykoding/8a3448e0e130d92497371e723b897094
%}

14.Call a function by its name stored in a string using eval function.
{% gist 
https://gist.github.com/bykoding/3e64f10d2357089382603bb1df8b2c74
%}

15.typeof Operator.
{% gist 
https://gist.github.com/bykoding/c02f1a87607bb30bb24ced66f27bf78a
%}

16.yeild keyword
{% gist 
https://gist.github.com/bykoding/bc11185d8ec947c3d2733772f439fb37
%}

17.function* in javascript.
{% gist 
https://gist.github.com/bykoding/8d73bd8127475a21d207e4381bdde74a
%}

18.new.target in javascript
{% gist 
https://gist.github.com/bykoding/8f4dd14406d355014afc0ee483f8d57e
%}

19.label statement.
{% gist 
https://gist.github.com/bykoding/d1b3133f5ca3ec0c447bb196fe0f34e5
%}

20.Rest parameters Syntax.

{% gist 
https://gist.github.com/bykoding/98edf0a27dc3cf723a17f93b7e9b20a3
%}

Conclusion:
Thanks for reading it, In this blog I have explained some of the most used features of javascript, I will explain more features in next blog,
Please give feedback in responses.
Are you blocking any trackers manually?
Tags: watercooler
Published: 2021-07-03 21:11:57

Do you check whether you access domains you don't want and then block them?

For example, the android app of n26 has [quite a lot](https://reports.exodus-privacy.eu.org/en/reports/de.number26.android/latest) of trackers like:

1. [Button](https://www.usebutton.com) (and [Branch](https://branch.io) that [is now part of Button](https://blog.usebutton.com/button-and-branch-join-hands-to-help-brands-unlock-mobile-growth-in-the-affiliate-channel))
2. [Adjust](https://www.adjust.com)
3. [Mixpanel](https://mixpanel.com)

Similarly, [ynab](https://reports.exodus-privacy.eu.org/en/reports/com.youneedabudget.evergreen.app/latest) has:

1. [Braze](https://www.braze.com)
2. [mparticle](https://www.mparticle.com)

I didn't expect a bank app and especially a personal finance app to track me so much.

They are now in my nextdns denylist along with the [nogoogle](https://github.com/nickspaargaren/no-google) privacy filter of nextdns until I get rid of these apps.
Map running container port to the Host
Tags: docker, firewall, iptables, network
Published: 2021-07-03 21:06:52

We recently ran to a situation that we have a running container (MySQL) but we liked to access it from internet and this container didn't have any port mapping between host and container. 

> We spawn up the container with docker compose

One solution for this situation is to stop the container, remove it and execute docker run with `-p <hostPort>:<containerPort>` but we didn't want to create new container.
Second solution is using `iptables` to do the port mapping. 
In the following example, you see how we achieved routing calls to the `host:3306` to the `mysqlContainer:3306`.
You should run this on the host machine.

```
sudo iptables -t nat -A DOCKER -p tcp --dport 3306 -j DNAT --to-destination MysqlContainerIP:3306
sudo iptables -t nat -A POSTROUTING -j MASQUERADE -p tcp --source MysqlContainerIP --destination MysqlContainerIP --dport 3306
sudo iptables -A DOCKER -j ACCEPT -p tcp --destination MysqlContainerIP --dport 3306
```
Easy way to manage multiple git accounts using ssh
Tags: ssh, github, managesshkeys, bitbucket
Published: 2021-07-03 20:58:53

If you’re having problems managing different ssh keys for your different git accounts, This article is for you! follow below steps to do it easily.

**Requirements**: Nodejs, Npm

You will need to install and use npm package called ssh-keyman. [(Click here to view docs)](https://www.npmjs.com/package/ssh-keyman)

## Step 1 — Installation
Run below command to install ssh-keyman package.
```sh
$ npm i -g ssh-keyman
```

## Step 2 — Initialisation
Now initialise ssh-keyman using below command
```sh
$ ssh-keyman -i
```

By running above command, this package will setup everything up in your system. It will create a default environment in your system & copy your current ~/.ssh/ content to default environment.

Now let’s assume we‘ve two different repositories from two different github profiles **githubx** and **githuby**.

## Step 3 — Create environment for your account.

Now let’s create two environments, One for githubx and other for githuby.

```sh
$ ssh-keyman -c githubx
```

Above command will create a profile called **githubx** in your system.

![Create githubx environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32dgjae4izx4vx61d1y6.png)

Similarly, Create another environment for our another github account githuby.

```sh
$ ssh-keyman -c githuby
```

![Create githuby environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ec5am3x13batnbsl8ug9.png)

Now we’ve both environments setup for githubx and githuby.

## Step 4 — Setup SSH Keys.

Let’s now create ssh key for your githubx account. For that we need to switch to githubx environment.

To switch to githubx environment run:

```sh
$ ssh-keyman -s githubx
```

![Switch githubx environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tno94c3qwv1145wcj50h.png)

Now we’re in githubx environment, Let’s generate ssh keys for githubx.

```sh
$ ssh-keygen -t rsa
```
once the key is generated, use that key in your GitHub account, copy contents of ~/.ssh/id_rsa.pub and paste it in github’s ssh key section.

![Github add key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzdp2kn2x6wmzs7png1x.png)

**Repeat the above process for githuby account.**
I.e
+ Switch to githuby environment
```sh
$ ssh-keyman -s githuby
```

+ Generate key for githuby environment.
```sh
$ ssh-keygen -t rsa
```

+ Similarly login to githuby account in the browser and add the contents of ~/.ssh/id_rsa.pub to github create key’s key section.

## Step 5 — Start using and switching.

So, If you want to work in repos from githubx account, simply switch to githubx environment using

```sh
$ ssh-keyman -s githubx
```
Now when ever you push or pull the code from git, keys for githubx will be used.

Similarly if you want to work in repos from githuby account, simply switch to githuby environment using

```sh
$ ssh-keyman -s githuby
```
And when ever you push or pull code from git, keys for githuby will be used.
Git Conflict resolution made simple
Tags: git, productivity, lifehack
Published: 2021-07-03 19:58:37

Have you ever tried to merge a Pull Request and it seems to have a conflict on file that you changed intentionally?

When it comes to conflict resolution, it can be a painful experience sometimes, even when you all you’re doing is accepting the incoming changes.

Git can be intimidating sometimes, and most people tend to prefer a GUI to manage their versioning and source control. But sometimes using the CLI can be the better option.

I’m the kind of weird that likes to do things on the CLI when possible, so I have a small life-hack that has saved me so much time during conflict resolution.

In this example we are going to imagine we are trying to make a PR from `development` to `staging`, once you’ve created the PR you notice there is a few conflicts and the PR can’t be merged right away. Don’t panic, we can fix this with the power of the CLI! 

Make sure you have the latest version of your destination branch (in this case `staging`) checked out on your local environment.

Go to your source branch (in this case its `development`) and run: 

`git pull origin staging —strategy ours`


This will accept the history of the source branch over the destination branch and resolve the conflicting files  for you. Now you can safely push the resolution to your remote and the PR you submitted should now be mergeable.


The CLI can be an intimidating place, but sometimes it can be the fastest way to achieve a task. Merge strategies are one of the most powerful options you can use from the git source control system, and there’s many more strategies that allow you to get even more flexibility from these options, I’ll leave a couple of links below where you can learn more about git merge strategies, thanks for reading!


Links: 

- https://git-scm.com/docs/merge-strategies
- https://www.atlassian.com/git/tutorials/using-branches/merge-strategy
How to add vanilla bootstrap to nextjs 
Tags: nextjs, webdev, javascript, beginners
Published: 2021-07-03 19:07:53

I was recently setting up a project in nextjs , and had the same question **How to add vanilla bootstrap to nextjs?**.  On searching above question on google , i got blogs and documentation on **How to add react-bootstrap to nextjs?**. Although adding vanilla bootstrap to the nextjs project is very easy , but its easy only when you know it . And being a newbie to nextjs i had to struggle a bit , so i thought of writing a blog and explain you the steps.

Step 1: Add bootstrap package in your project , using 
```javascript 
npm install bootstrap@next
```

Once , you install bootstrap , it would be seen in your package.json file under dependencies. And all the files related to bootstrap would be present in **node_modules** folder.

Step 2: As bootstrap is used by both components and pages , bootstrap should be added to **pages/_app.js** file

```javascript
import 'bootstrap/dist/css/bootstrap.min.css';

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
```

Once it is added to the **pages/_app.js** file , the bootstrap classes can be accessed from components and pages folder.
Sometimes we choose inefficiency
Tags: softwareengineering, coding, softwaredeveloper, thoughts
Published: 2021-07-03 19:09:53

---
title: Sometimes we choose inefficiency
published: true
date: 2021-07-03 19:05:51 UTC
tags: Softwareengineering, coding, softwaredeveloper,Thoughts
canonical_url: https://www.rockandnull.com/sometimes-we-choose-inefficiency/
---

 ![Sometimes we choose inefficiency](https://images.unsplash.com/photo-1554863838-764b29f1ad1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDIxfHxlZmZpY2llbnR8ZW58MHx8fHwxNjI1MzM4Njgy&ixlib=rb-1.2.1&q=80&w=2000)

Engineering, in general, is all about finding efficient solutions to problems. Software engineering is no different; we are always looking for efficient architecture for our apps, efficient algorithms for our business logic, efficient programming languages, etc.

The one thing different though is that sometimes while developing software we choose "inefficient" solutions on purpose. I don't mean that in a bad way. It's not that engineers are not good enough to find the optimal solutions. It's that efficiency is defined based on one property that we choose to optimize. So choosing to optimize for something that's not the usual property (e.g. technical efficiency) might look like we choose inefficient solutions.

Let me give you some concrete examples to help you understand what I am talking about.  

Code repetition is considered awful and condemned in code reviews. Code reusability indeed is one of the basic principles of software engineering. Therefore having repeated code when sending out code to be reviewed looks bad. But in large/huge codebases optimizing for readability is sometimes more important than never having a line of code repeated. Having (a small amount of code) repeated might reduce the context switching (i.e. jumping to a method and back) thus improving the overall readability of the codebase. Easier to parse codebase is especially important in big companies where people come and go. So sometimes being technically "inefficient", as having the code repeated, is preferable.

Another example I encountered, which is a quite popular architectural choice in big projects, is the microservices paradigm. If you think about it, having a monolith (i.e. all the teams contribute to a single binary) is way more efficient and performant than any form of microservices architecture. Microservices have digital communication overhead; each RPC has latency cost. In addition, there's the physical communication overhead; teams need to be in sync for having their services to talk to each other. Still, all this described inefficiency is preferable to having to coordinate a big number of people into submitting code to the same huge binary. When optimizing for velocity, technical inefficiency is preferable.

My point here is that software engineers should not be obsessed with technical efficiency. Be thoughtful on what is the optimized property before choosing the ideal solution. There are cases that the most technically efficient solution is not what is needed. Sometimes we choose inefficiency and that's fine.

Happy coding!