teleren/devto huggingface dataset:
Copy HTTP Requests from Chrome/Edge DevTools to PowerShell/cURL/Fetch
Tags: web, powershell, node, curl
Published: 2020-09-09 19:57:51

---
title: Copy HTTP Requests from Chrome/Edge DevTools to PowerShell/cURL/Fetch
published: true
date: 2020-07-06 00:00:00 UTC
tags: web, powershell, node, curl
canonical_url: https://swimburger.net/blog/web/copy-http-requests-from-chrome-edge-devtools-to-powershell-curl-fetch
cover_image: https://swimburger.net/media/rxvdr2cv/capture-1.png?anchor=center&mode=crop&width=1000&height=420
---

As we develop websites, apps, and services, we make many HTTP requests from the browser to the server. During debugging sessions, replaying HTTP requests can take a lot of manual effort. For example, filling out multiple forms to ultimately hit that submit-button or going through a long wizard.

Google Chrome and Microsoft Edge DevTools can speed up your inner loop by copying recorded HTTP requests as PowerShell, cURL, or Fetch. Follow these steps to copy HTTP requests as PowerShell:

1. Open DevTools in Chrome or Edge by pressing 'F12' or using the options menu > More Tools > Developer Tools. Switch to the Network tab.  
 ![Screenshot of how to open DevTool on Microsoft Edge browser. Using the options menu > More Tools > Developer Tools](https://swimburger.net/media/uviif4pw/image.png)
2. Manually go through your application so the DevTools will record your HTTP requests.  
  

Enable "Preserve Log" if necessary. Preserve Log will make sure your HTTP requests don't get wiped when the pages refreshed. This is very useful when you want to debug HTTP request while going through full page refreshes.

 ![Screenshot of Edge DevTools recording HTTP Requests in the Network tab](https://swimburger.net/media/om0d53ly/image.png)
3. Right-click the desired HTTP request and click on Copy > Copy as PowerShell  
 ![Screenshot of how to Copy HTTP Requests as PowerShell in Edge DevTools](https://swimburger.net/media/hqhelhyj/image.png)
4. Open a PowerShell window and paste the contents from your clipboard and hit enter. For PowerShell, you can copy from clipboard by right-clicking the shell window.  
 ![Screenshot of PowerShell script execution of the HTTP Request in a PowerShell window](https://swimburger.net/media/5zjnfjjz/image.png)

You can copy multiple HTTP Requests in case your HTTP Requests depend on each other. Save these commands as a PowerShell script file (.ps1) if you want to reuse it in the future.

Now you can very quickly make your HTTP Requests by running a single command without manually interacting with the browser. I hope this will save you time and keystrokes when debugging server requests!
Number of Differing Bits
Tags: cpp, python, interview, career
Published: 2020-07-07 13:08:02

---
title: Number of Differing Bits
published: true
date: 2020-07-06 00:00:00 UTC
tags: cpp, python, interview, career
canonical_url: https://csposts.com/posts/number-of-differing-bits
series: Interview Problems
---

Given two integers count the number of positions where their bit representation differs. A simple approach is to use their binary representation and compare them. They can also be compared on the fly.

## Approach : XOR

Let’s take a look at the truth table of XOR operation:

| A | B | Y = A ^ B |
| --- | --- | --- |
| 0   | 0   | 0   |
| 0   | 1   | 1   |
| 1   | 0   | 1   |
| 1   | 1   | 1   |

It is evident that XOR operation gives 1 if the two bits are different (see row 2 and 3). So, the set bits in A ^ B will be the ones where the binary representation of A and B differ.

For example,

```text
A = 19 => 10011
B = 10 => 01010
---------------
A ^ B => 11001
```

Thus, the number of set bits in A ^ B will give the desired answer. We can use[Brian-Kernighan method](https://notescs.gitlab.io/brian-kernighan-algorithm-count-set-bits)to count the number of set bits.

C++ code:

```cpp
#include<iostream>
using namespace std;

int countSetBits(int n) {
    int count = 0;
    while (n > 0) {
        n = n & (n - 1); // clear the right-most bit
        ++count;
    }
    return count;
}

int countDifferntBits(int a, int b) {
    return countSetBits(a ^ b);
}

int main() {
    cout << "Number of different bits of " << 19 << " and " << 10 << " is " << countDifferntBits(19, 10) << "\n";
    return 0;
}
```

Python code:

```python
def count_set_bits(n):
    count = 0
    while n > 0:
        n = n & (n - 1) # clear the right most bit
        count += 1
    return count

def count_different_bits(a, b):
    return count_set_bits(a ^ b)

if __name__ == ' __main__':
    print('Number of different bits of', 19, 'and', 10, 'is', count_different_bits(19, 10))
```

Time Complexity: `O(log(min(a, b)))`
Space Complexity: `O(1)`

**Exercise**: Code the naive solution.
My personal git cheat sheet
Tags: git, cheatsheet
Published: 2020-07-05 22:05:56

With more than 160 commands available, becoming a git expert takes time. But everyone has a few commands that they use frequently. In this post I’ll share mine. 

### I want a clean working directory, but I don’t want to lose my current changes.


```python
# save the current state of the working directory 
git stash

# apply the latest stashed change to your current working tree
git stash pop

# list stashed changes
git stash list
```

### I messed up my last commit message.

```python
# change the latest commit's message 
git commit --amend -m "Fixed message"
```

### I accidentally pushed a file. Now I want to remove it from the remote branch (but not from my local branch).

```python
git rm --cached <file-path>
```

### I made a bunch of changes to a file but I regret it :scream:. I want to go back to the main branch version.

```python
git checkout main <file-path>
```

### I want to take a commit from one branch and apply it onto mine.

```python
git cherry-pick <commit-hash>
```

### I want my branch to be based off the most recent commit of the main branch.

```python
# 1. Get the latest version of the main branch 
git checkout main
git pull origin

# 2. Checkout your branch
git checkout <my-branch>

# 3. Replay your changes on top of the main branch
git rebase main
```

### I want to squash the commits in my branch to a single commit, before opening a pull request to main.

Before squashing, make sure your development branch is based off the most recent commit of the main branch using rebase. Then:

```python
# 1. Checkout your branch
git checkout <my-branch>

#2 squash commits
git rebase -i main

# The -i does an interactive rebase for you to move and squash commits.
```

### I merged my branch into main but I want to rollback the merge

```python
# 1. Checkout a new branch from the main branch
git checkout -b mybranch-rollback

# 2. Find out the commit hash that merged your branch to develop.
git log 

# 3. Revert the merge commit
git revert -m 1 <commit-hash>

# 4. Push the changes to your new branch
git push origin mybranch-rollback

# 5. Open a pull request to main for your new branch
```
How to Switch Logo in Dark Mode
Tags: css
Published: 2020-07-06 08:12:23

---
title: How to Switch Logo in Dark Mode
published: true
date: 06-07-2020
tags: CSS
canonical_url: https://giftegwuenu.com/how-to-switch-logo-in-dark-mode/
description: I share how I was able to switch the color of my logo in dark mode using CSS custom properties.
---

I designed my website with two versions of the logo - one for light mode and another for dark mode. In this article, I'll share how I switched the color of the logo in light/dark mode.

![Light and Dark Logo Grid](https://dev-to-uploads.s3.amazonaws.com/i/fzahkqirvfwdzzr93ow5.png)

When it came to implementing this design, I was a bit confused about how to go about switching between these two versions when either dark/light mode is selected.

I found a way to do this, and I'll share how I was able to achieve it. I'm open to hearing how you'll typically implement this if you were trying to. [You can reach out on Twitter](https://twitter.com/lauragift_) always open to learning new methods of solving a problem.

Let's dive into it!! So I've got an image tag with the dark-outline logo. It'll serve as the default logo that you see when you're on light mode.

```html
<img class="logo" src="../assets/img/logo.png" alt="original logo" />
```

## Solution: Using CSS Variables

We can use CSS custom properties(CSS Variables) to solve this problem. Here's what I did, I defined a variable in the `variables.scss` called logo for both dark and light mode and set it as the background image, which you'll see in a moment.

```css
body {
  --logo: url(logo.png) no-repeat;

}

body[data-theme="dark"] {
  --logo: url(logo-light.png) no-repeat;
}
```

Then I applied the following style to the `.logo` class on the image. It sets the background image to both versions of the logo depending on which one is selected. The background-size and height properties help position the image directly on top of the original image.

```css
.logo {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--logo);
  background-size: 60px;
  height: 80px;
  padding-left: 100px;
}
```

![switching between dark and light mode](https://dev-to-uploads.s3.amazonaws.com/i/kcyht8wrl5tiuvqt80hq.gif)

That's it! I now have two different versions of my logo for dark and light mode. If you're interested in seeing the implementation in more detail, the code for my website is open-source, and [you can check it out](https://github.com/lauragift21/giftegwuenu.dev/blob/master/src/components/Nav.vue).
Every startup needs a components library
Tags: javascript, design
Published: 2020-07-18 07:27:01

---
title: Every startup needs a components library
published: true
date: 2020-07-06 00:00:00 UTC
tags: javascript, design
canonical_url: https://maxigimenez.xyz/post/every-startup-needs-component-library
---

A bit over a year ago I attended the NgVikings Conference, among great talks, there was one about components library ([here's](https://www.youtube.com/watch?v=QtZMTRq9Ly4) the talk if you're interested). Not even 5' into the talk, I was already convinced -and thinking how- this will help us.

I always had the mindset of **reusability** , trying to come up with code that is sustainable and reusable across time and different implementations, having a component's library was taking it to the next level.

Honestly, at the beginning I was afraid of how feasible were for us to do it, mainly because the team was small and we had too many things in our plate if we decided to do it, we knew that had to be done in our spare time -usually between tickets-. Despite this, we decided to do it, and a year later, I need to say that was a great decision! 💪

![](https://media.giphy.com/media/BlVnrxJgTGsUw/source.gif)

What I'm trying to say here, is that even if you're a small team or the project is on an early stage, **just do it** , you will see the benefits almost instantaneously, the ability to **prototype faster** , **develop in isolation** , **speed up the development/design process** are just a few of the benefits of it.

Here's a list with some of our learnings:

- **Start with something simple.** This will help you to work on the set-up and preparing the groundwork for more complex things.
- **Came up with processes, conventions.** Once you have the conventions ready (how to choose component names, what CSS preprocessor use, how to test it, etc) everything will be much easier.
- Naming convention (components). Use HTML tags as reference, try to keep it semantic.
- Aim for higher test coverage, remember that **these components are the foundation of your product**.
- **Iterate** , if a component is rarely complex, create a first version of it, supporting the basic functionality and then iterate over it.
- Documentation, similar to the testing part, is the foundation of what you're building, invest time in it.
- **Don't reinvent the wheel** , use existing components, and perhaps extend it to meet your needs.

Also resources/tools that we founded useful:

- [Storybook](https://storybook.js.org/)
- [@storybook/addon-docs](https://www.npmjs.com/package/@storybook/addon-docs)
- [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
- [Jest Snapshot Testing](https://jestjs.io/docs/en/snapshot-testing)
- [Cypress for E2E testing (using Storybook)](https://www.cypress.io/)

I sincerely hope that these learnings can help you somehow, having a **Design System / Components Library** , is a one-way path.
Service Mesh with Envoy
Tags: servicemesh, envoy, microservices
Published: 2020-09-07 12:15:37

---
title: Service Mesh with Envoy
published: true
date: 2020-07-06 00:00:00 UTC
tags: ServiceMesh,Envoy,Microservices
canonical_url: https://www.loginradius.com/engineering/blog/service-mesh-with-envoy/
---

This post will cover a demo working setup of a service mesh architecture using Envoy using a demo application. In this service mesh architecture, we will be using Envoy proxy for both control and data plane. The setup is deployed in a Kubernetes cluster using Amazon EKS. Pre…

   
[Read On](https://www.loginradius.com/engineering/blog/service-mesh-with-envoy/)
Scopes in Javascript
Tags: javascript, beginners
Published: 2020-07-05 23:27:26


In this post I want to explore the scopes in Javascript making a parallelism between Javascript and the principles of federalism in political science. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ih616mzesfsy71achg1w.jpeg)
Let's say that the scope of variables are defined in a similar way to how a jurisdiction works in a federal system such as the one in Argentina or the United States: the global sphere (let's say the National State) sanctions laws that rule over all the sub-national states. Furthermore, the sub-national states dictate laws that rule over their territory, and so on, the counties or interior departments sanction laws that rule over their jurisdictions. 
Hence, the scope of the laws rules from top to bottom (National -> State -> County) and not the other way around. A county regulations has no authority at the state level, and a state regulation has no authority at the national level.


The scope of variables in Javascript works the same way: a bind defined at the most global level has “jurisdiction” over the whole program. And so, a bind declared in a function has no global reach. It only has “jurisdiction” within the scope of the function in which it was defined and in functions nested within it. A variable defined in a nested function within another function only has jurisdiction in the scope of the nested function where it was defined, but has no reference in external functions or scopes, just like a county regulation has no authority at the state level. 

Finally, it is important to note that the parallelism only occurs when the variables are defined with let or const words. When the variables are defined with the word var it is necessary to look for another scenery because they are visible throughout the whole program, no matter where exactly they are defined.

Hope you find it intresting and useful.
Ms. Class Python I
Tags: beginners, python, functional, oop
Published: 2020-07-05 22:30:06

Most people have difficulties to understand classes, 
little warriors you're not alone. In this post, I'll try to teach you, how to understand class and apply it in your life!

```python 
class Drinks:
    kind = "Drink"
    def __init__(self,name):
       self.name=name
one = Drinks("Orange juice")
two = Drinks("coca-cola")
three = Drinks("water")
print(two.kind)
print(two.name)
```
0. You create the class variable **kind**  to share the attribute.
1. We use the **__init__** to initialize the instance.
2. **name** its an attribute of an object.
3. And all immutable objects: **one, two, and three.**

Thanks for reading! ;))
#030 Kubernetes - Minikube
Tags: kubernetes, devops, tutorial
Published: 2020-07-05 22:16:12

# Introduction

this is part 30 from the journey it's a long journey(360 day) so go please check previous parts , and if you need to walk in the journey with me please make sure to follow because I may post more than once in 1 Day but surely I will post daily at least one 😍.

And I will cover lot of tools as we move on.
***

# What is Minikube

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

Minikube is like an virtual machine contain a Linux operation system and have 1 node as master also in same time as worker.
and you can communicate with it using kubctl using a configuration file.
***
# Install on Linux

```bash
curl -Lo minikube https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64 \
  && chmod +x minikube
```

```bash
sudo mkdir -p /usr/local/bin/
sudo install minikube /usr/local/bin/
```

this commands will install minikube on Linux , also we need to install kubctl 

Download latest version
```bash
curl -LO https://storage.googleapis.com/kubernetes-release/release/`curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt`/bin/linux/amd64/kubectl
```
then make it excutable
```bash
chmod +x ./kubectl
```
move the excutable to bin so we can access it directly from terminal
```bash
sudo mv ./kubectl /usr/local/bin/kubectl
```
to make sure that installation successful
```bash
kubectl version --client
```

for other platforms check [minikube](https://kubernetes.io/docs/tasks/tools/install-minikube/) and [kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl/)

***
# Start the action

first we need to start minikube 
![minikube](https://dev-to-uploads.s3.amazonaws.com/i/zyqbu1rbo3r666q8w2vm.png)
```bash
minikube start --driver=virtualbox
```
I am using driver virtualbox because I got some problem with driver docker , and lazy to fix them.

after successfully starting it. We can see that a cluster have been made , to see it type
![configs](https://dev-to-uploads.s3.amazonaws.com/i/gzbp8kvfwvuobyzh2es8.png)
```bash
cat ~/.kube/config
```
for windows users , it's in c>Users>your_username>.kube>config

We can see we have a cluster with name minikube , and user with name of minikube.

We can setup our own clusters in this file but we are going to do later on this journey.

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

```bash
kubectl get nodes
```

We can see that we have minikube ready and it's role is master also workder in same time.
4 easy steps to Custom Object Classification using Tensorflow Lite
Tags: machinelearning, python, android, linux
Published: 2020-07-05 22:04:16

---
title: 4 easy steps to Custom Object Classification using Tensorflow Lite
published: true
description: We use an easy method to retrain a pre-trained model for object classification. Transfer learning is an easy and quick method to retrain a model for good classification of objects.
tags: ml, python, android, Linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6r7tmctpl9glvosxwglq.jpg
---

{% youtube mF-iqKqKQsY %}

We use an easy method to retrain a pre-trained model for object classification. Transfer learning is an easy and quick method to retrain a model for good classification of objects.
React JS in Simple terms
Tags: react, webdev, tutorial
Published: 2020-07-05 21:53:43

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

-->React is a Javascript library(not a framework) that allows us to create user interfaces .In practice it's a library that focuses only on the view, which is what we see on the screen.
Imagine a web page as series of objects, which have their own designand perform certain actions.React allows us to create these objects(also called as components) and assign them a status
(information about the components can be modified) through props(which are called properties).



-->Now ,STATE AND PROPS are two forms of data being passed into a view.
-->Same data passed into a view will always result in the same outputted view.
-->Different data passed into a view will result in different ouputted view.
Hence for Every action there is REACTion.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d9252dg9rilh1vrhd8we.gif)

Now moving on to the point what makes it so popular and why so many developers are shifting to it ?
React has low learning curve and allows us to have a lot of flexiblity by giving us the opportunity to integrate other frameworks.I recommend it as first framework to study (obviously after you have studied JS)
There are many reasons to it which are listed below-
-->JSX: It makes it possible to bring HTML directly into your JS which allowing us to create a new UI feature and see it in real time.
-->Components: It allows us to break our web app into individual simple objects (such as navbar ,footer , div ,other elements like that) and work on them easily.
-->Props-It makes us possible to populate components using custom data.
-->State-It makes us possible to store all the changes in one section.
-->Virtual DOM- DOM is programming concept which used to make HTML pages interactive.Virtual DOM makes app fast and user experience superlative.
Reusable components,easy data flow,easy debugging,easy testing,SEO friendly ..did i miss anything ? drop it down in comments.
Thanks for reading! :)
Mobile Apps & Ruby
Tags: ruby, android, ios, beginners
Published: 2020-07-05 20:15:42

During my journey studying & learning Ruby, to my surprise, Ruby is a beautiful user-friendly language as many of you have come to realize and love! Like any specific field of study, we come across difficult concepts to master. With programming, be it any programming language, our thought process changes. Currently when I look at projects/objects in life, I no longer take them for granted, I now see the mind that built and engineered the idea. I have an appreciation for the mind and our seemingly endless capabilities.

For this reason, when I looked at website and mobile apps, I see the strenuous work that went behind it to make it come alive. This led me to ask myself more about mobile applications and how they work. I researched how to develop mobile apps and what it takes to create one. From the device OS, native OS programming language, cross platforms programming language (how to build apps for multiple Devices with one language), to how can ruby be implemented to build mobile apps.

I have good and bad news:

#The Good
There is a method of developing mobile apps that has come to the forefront compared to other alternatives for Ruby, It is called Ruby Motion. This is a cross-platform native app builder, if you don’t realize how big a deal that is…. let me explain bit further! We can build apps for Android && IOS at the same time with one build. Yes, there are other cross platforms like React (which requires learning JavaScript) & Flutter (which requires learning Dart programming language). Ruby Motion is built specifically for Ruby. Personally I love Ruby for its easy of programing. Ruby Motion has a slack channel to stay up to date with any ongoing.

#The Bad
Ruby Motion is for development on OS X (Mac Desktops) only, Windows and Linux developers miss out on the fun. This will hurt Ruby Motion on the long term. Ruby Motion has a real shot at becoming adopted in mass if they include other OS systems. I hope to see them expand, Ruby is a beautiful user-friendly language and future developers will have fun with this cross-platform app builder. Meanwhile Ruby Motion has a slack channel to stay up to date with any ongoing.
I need the solution about java I/O  file problem 
Tags: java
Published: 2020-07-05 20:13:30

Define methods move(x), read(), write(y). Here x is a number and y is a letter. All the
methods are in the context of a file whose name is “abc”. The method move(x) will move
the file pointer at xth location. The read() will return the letter pointed by the file pointer.
The method write(y) will write the letter y at position pointed by the file pointer. Let the
contents of file “abc” are “hariisgood” then move(5);t=read();move(7);write(t) will make
the file contents as “hariisgsood”.