teleren/devto huggingface dataset:
My First Contribution Story   in Hacktoberfest
Tags: hacktoberfest
Published: 2021-10-23 06:51:44

![My Hactoberfest 2021 profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7svruazz5654w5wf2jmu.png)

### About Me

Hello! I'm Abu Mushonnip, a Software Engineering Student from Indonesia. This is my first post in DEV. 
Let me share my experience in Hacktoberfest 2021 which is also my first time join the Hacktoberfest event.

### Background

Open Source? We love it! there  is so many Open Source Software (OSS) I oftenly used in my daily (maybe you too). Being the part of it is such a pleasure for me.
I actually want to contribute in Open Source since long time ago, but my coding skill say otherwise. So this event actually a good way to start.

### Progress

Because I have weak coding skill, my Hacktoberfest journey just end up in 4 respositories and 6 pull requests and also doesn't contain coding though.
At least I know the basic to being contributor, engange with them, and how it works 

### Contributions

Those repos are:
- [microsoft/IoT-For-Beginners](https://github.com/microsoft/IoT-For-Beginners)
- [bellshade/CPP](https://github.com/bellshade/CPP)
- [nyancode/quotes](https://github.com/nyancodeid/quotes)
- [OtacilioN/awesome-hacktoberfest-2021](https://github.com/OtacilioN/awesome-hacktoberfest-2021)

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
Overall, I'm happy to be the participant of Hacktoberfest 2021, I have learn a lot of knowlegde in Open Source community.
I will keep support to the community in the future, with Hacktoberfest or without.

Thank you
Hacktoberfest - 1st contribution
Tags: opensource, hacktoberfest, osd600
Published: 2021-10-23 06:27:56

This is my very first contribution in Hacktoberfest so I decided to work on an easy issue with a view to getting myself familiar with the process of contributing to an open source project.

### The issue
I picked [awesome-portfolio-websites](https://github.com/smaranjitghose/awesome-portfolio-websites) as I'm planning to create a personal website so I thought this would give me some inspirations. There was a minor issue related to the [styling of Reference page](https://github.com/smaranjitghose/awesome-portfolio-websites/issues/1066). On this page, each reference is presented on a card. The situation was that these cards' background was white which was the same as the navbar. The project owner wanted to change it to the same color as overall background of the site. This would make the navbar stand out more. In the dark mode, the card background also has the same color as the site background and different from the navbar color so this fix will also help maintain the consistency between the light and dark mode.

### The fix
I started by reading through the `CONTRIBUTING.md` to get hang of how to work with this repo. After setting up, I located the file to be fixed, identified the color that I needed and updated the variable for card background color. When saving the changes, I found that my fix affected another part of the page. I had to inspect it on the browser and figured that there were two different components have the same class name, as I was updating the color under that class name, the other component got a new appearance too. I quickly resolved the problem by using a different class name for the component I was working on.

### Final thoughts
Taking on the issue, I thought it would be a fix of 1 or 2 lines. However, unexpected issue showed up and I needed to investigate more time on it. The later issue was not hard to resolve but it shows that not everything is exactly what it seems to be. That's why we also need to test, test and test again to ensure that fixing one issue won't lead to other issues.

Issue-1 link: https://github.com/smaranjitghose/awesome-portfolio-websites/issues/1066
PR-1 link: https://github.com/smaranjitghose/awesome-portfolio-websites/pull/1088
How to price for the bid/project correctly
Tags: career, beginners, codenewbie, programming
Published: 2021-10-23 06:20:46

Hi, my name is Saifullah Usmani. I am a Programmer and a Graphic Designer. I have been programming for almost 5 years now. And I have worked with several freelance clients.

If it sounds like a thing that will add value in your life then consider following my page because I keep creating quality content for you.

##Pricing:
The most important thing.
You may choose the price randomly when you don't know your worth in the beginning.

**Step #1"** Know your worth
**Step #2"** Estimate the time
**Step #3"** Estimate the labor
**Step #4"** Estimate the value
**Step #5"** Estimate the worth
**Step #6"** Estimate the hosting and deployment work time, value. labor, study time, etc
**Step #7"** Estimate the possible alterations, study time etc
**Step #8"** Estimate the quality of your work compared to your competitors.
**Step #9"** Never randomly chose the price. Say something like this to the client. I would have to do some calculations based on some factors. After that I will decide the time and price. I will let you know what I come up with in a moment.
**Step #10"** Do calculations/analyzation on these factors and then decide what should you charge. Now the price is not random.
**The price may still not be correct. It may be very low, may be very high. But it is not random. You thought on it.**
**That** is my goal. Enabling you to make your own decisions. I hope you liked my initiative. 

I know you will ask that the client can't pay. Well the thing is you are freelancing, and in freelancing you have only one freedom and that is do the work you like. So reject the client like I do or refer them(*nicely, because a NO can also be said in a beautiful way).

That's it for today. Please follow my page here so you can get more quality content.



[![DigitalOcean Referral Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00rcc3tqicv68383vo0r.png)](https://www.digitalocean.com/?refcode=9d6f3f71c1b4&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
Affiliate Link☝



##Follow me:
Hire me: https://www.fiverr.com/saifullah02 (For web development Purposes)
My New Blog: [saifullahusmani.com](https://saifullahusmani.blogspot.com/)
*Follow me here:* https://dev.to/saifullahusmani
*YouTube:* http://bit.ly/saifullahusmani (Programming Tutorials Coming Soon).
*Discord:* https://discord.gg/AKyvy8Y
*Facebook*: https://www.facebook.com/SaifullahUsmani693
Your Privacy is Haux!
Tags: privacy, news, cybersecurity, security
Published: 2021-10-23 06:10:16

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ked9z16w01bum5x6v8y.PNG)
Your Privacy is a "Haux"!
If you don't believe me then watch this amazing video from "SmarterEveryDay" in collaboration with 4Privacy.

We believe in the new internet system where Software Application need nothing to do with your Data, and End-end Encryption should be controlled by you with your private key.

If you think you want to be the part of the coming future of technology, watch and share this video youtube.com/watch?v=KMtrY6lbjcY.
Myths about freelance world...
Tags: freelancing, beginners, programming, webdev
Published: 2021-10-23 05:55:38

Hi, my name is Saifullah Usmani. I am a Programmer and a Graphic Designer. I have been programming for 5 years now. And I have worked with several freelance clients.

If it sounds like a thing that will add value in your life then consider following my page because I keep creating quality content for you.


##The freedom:
If you think by freedom it means little to no work, then you are mistaken.
From freedom the freelance community means the freedom to work on the projects that inspire you. The projects that you love to work on.
It is basically pursuing your passion, and the work you do with passion is no work but joy. So that is what it means by freedom.

##Time:
You have left 9 to 5 job to work 24/7. That's right, it is no joke. I have explained in previous two posts about the "things I learned in freelancing" and "how to get out of freelance rat-race of staying with trend all the time as a developer" some of the things you may face in freelancing. 
But if it is passion then working 24/7 is your dream about what you love. 

##Money:
Yeah there is more money in freelancing then in a job. But freelancing income is not safe just like a job. SO try to build assets and get financial literacy otherwise you will regret your decision. Read financial literacy related books such as "Rich dad Poor dad" or "4 hours work-week". (that's the only honest advice you will ever get.)

##Don't get demotivated:
This is not to demotivate you, this is actually to show you what it means to change lanes like that. You must know what you are stepping into. People who try to pursue you don't tell you that. They only tell you sweet things, but I think the truth must be told.
I love freelancing and I will soon transition to business. But not everyone love it.
This is real life. So take any action wisely.

Thanks for reading. Subscribe my page to get more informative posts. 




[![DigitalOcean Referral Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00rcc3tqicv68383vo0r.png)](https://www.digitalocean.com/?refcode=9d6f3f71c1b4&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
Affiliate Link☝


##Follow me:
Hire me: https://www.fiverr.com/saifullah02 (For web development Purposes)
My New Blog: [saifullahusmani.com](https://saifullahusmani.blogspot.com/)
*Follow me here:* https://dev.to/saifullahusmani
*YouTube:* http://bit.ly/saifullahusmani (Programming Tutorials Coming Soon).
*Discord:* https://discord.gg/AKyvy8Y
*Facebook*: https://www.facebook.com/SaifullahUsmani693
How to open sublime text from the windows command line
Tags: vscode, sublime, programming, tips
Published: 2021-10-23 05:36:48

---
title: How to open sublime text from the windows command line
published: true
description: Sublime Text is a light-weight IDE for quick development. We can open Sublime text from the command line.
tags: vscode, sublime, programming, tips 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0pdycpgynjwqoqgv39d.png
canonical_url: https://milindsoorya.com/blog/how-to-open-sublime-text-from-the-windows-command-line
---

## Introduction
I am a very big fan of VS Code. I genuinely believe that it is the best IDE for web development. These days I am coding more in python and my interest has shifted towards python IDE's such as Pycharm and Sublime text. 

Pycharm is the OG python IDE and it has all the features that you might want. But, it's a bit bulky and takes a lot of resources. 

In some cases, I just want to quickly get up and going with as little friction as possible and Sublime text is the perfect answer for those scenarios. 

## Why open Sublime from cmd?
As I mentioned above, one of my favourite features of VS Code is that it can be opened from any directory using the command `code .` and VS code will open with all the files in that directory. This simple step has made me more productive. 

In this article, I will show how to do the same thing using Sublime Text in windows.

## STEP - 1: Search for Environment Variables in the windows search

![Search for Environment Variables in the windows search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4lsyjkh7mbtz9s1n6za.png)

## STEP - 2: Select the environment variable option

![select environment variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46rrklblcnammiht0dlh.png)

## STEP - 3: Click on the path and then edit

![Click edit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzllfxnl4ub29vcyx0cu.png)
 
## STEP - 4: Add path to your sublime installation

usually, it will be at `C:\Program Files\Sublime Text 3`.

After doing this click ok and exit.
 
![Add path to your sublime installation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zs4wm80j52f2wq17uly.png)
 
## STEP - 4: Open sublime from any location
Just go to your desired directory and open a command prompt and input this command.
```shell
subl .
```

![Open sublime](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqwh4dkurino7p1swp1a.png)

That's it!! Thanks for reading.

Check out my [website](https://milindsoorya.com/blog) for more useful articles.
code every day with me
Tags: javascript, programming, algorithms, 100daysofcode
Published: 2021-10-23 04:13:24

**--DAY 5--**
Hi, I am going to make #100DaysOfCode Challenge.Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
**Now let's solve problem today:**
-Problem: Number Line Jumps
-Detail: https://www.hackerrank.com/challenges/kangaroo/problem
-My solution (javascript):
```
function kangaroo(x1, v1, x2, v2) {
    while(x1 >= 0){
        //if they in same position 
        if(x1==x2) return 'YES';
        //caculate the distance of 2 kangaroo
        let distance = Math.abs(x1-x2);
        //kangaroo 1 move
        x1+=v1;
        //kangaroo 2 move
        x2+=v2;
        //if the distance between 2 kangaroo longer or no change, they will never meet
        if(Math.abs(x1-x2)>=distance) return 'NO';
    }
}
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
Acronym
Published: 2021-10-23 03:58:39


As I continue to blog, I will come back and edit this post with short description and additional acronyms.

# Programming 
- HTTP - HyperText Transport Protocol
- URL - Uniform Resource Locator
- XML - eXtensible Markup Language
- IDE - Integrated Development Environment
- CLI - Command Line Interface 
- AJAX - Asyn Javascript And XML
- HTML - HyperText Markup Language
- JSON - JavaScript Object Notation
- CSS - Cascading Style Sheet
- SQL - Structured Query Language
- ECMAScript(ES) - European Computer Manufactures Association Script
- ASCII - American Standard Code for Information Interchange
- REGEX -  Regular Expression
- API - Application Programming Interface
- OAuth - Open Authentication
- SDK - Software Development Kit
- NPM - Node Package Manager
- TDD - Test-Driven Design

---

# Conventions / Patterns / Techniques
- CRUD - Create, Read, Update, Delete
- REST - Representational State Transfer
- OOP - Object Oriented Programming
- MVC - Model Views Controller
- BEM - Block Element Modifier - naming convention for CSS classes.
- CMS - Content Management System 
- ORM - Object Relational Mapping 
- DRY - Don't Repeat Yourself
How not to update states in React!!
Tags: react, javascript, webdev, beginners
Published: 2021-10-23 03:50:19

How do you guys update your state if it depends on the previous value?

Simple!!
 
```jsx
...

const [counter, setCounter] = useState(0);

const updateCounter = () => {
  setCounter( counter + 1 );
}

...
```
If you are doing the same as above, You are doing it wrong!! 😮

But my code works perfectly with the above syntax!! 😟

Yes, sometimes it works, sometimes it does NOT.

WHY?? 🤔

Because react schedules state updates asynchronously, It does not perform them instantly. So if your code has multiple state updates you might be depending on some outdated or incorrect values.

Here is an official statement from React team about this issue
> `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state.

Hmm, So what is the solution?

Here we go...

To handle this situation, react allows us to pass a function in setState, which will give us the previous value of a state. 

Here react guarantees us that the value is always updated correctly. 🤩

```jsx
...

const [counter, setCounter] = useState(0);

const updateCounter = () => {
  setCounter((prevState) => {
    // some logic 
    return prevState + 1; 
  });
}

...
```

Tell me in a comment have you ever faced a problem because of state updates??

I would like to hear your feedback.

If you like this article like, share and mark 🔖 this article!

🏃‍♂️ Let's Connect 👇

🕊 Twitter : https://twitter.com/nehal_mahida (See you on Twitter 😃)

👨‍💻 Github: https://github.com/NehalMahida

####Support 🤗
If you are enjoying my articles, consider supporting me with a coffee.☕
<a href="https://www.buymeacoffee.com/nehalmahida"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=nehalmahida&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>
Divtober Day 22: Critter
Tags: codepen, divtober, css, art
Published: 2021-10-23 03:50:14

---
title: Divtober Day 22: Critter
description: My entry for divtober day 22: critter. A critter (rabbit?) drawn with CSS and only an HTML element.
published: true
tags: codepen,divtober,css,art
series: divtober
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76usaf8d8cf6hzkd7qk7.png
---

This cartoon critter (looks like a rabbit? maybe?) was drawn with CSS and only one HTML element for divtober:

{% codepen https://codepen.io/alvaromontoro/pen/ZEJLzov %}

-----

And, again, I recorded the process:

{% youtube lrHtJQa810E %}
Benchmarking RGBA extraction from integer in JavaScript
Tags: javascript, color, benchmark
Published: 2021-10-23 03:44:16

I got a case I should convert integer RGBA value to RGBA object. I compared the speed of 2 methods. I got interesting results. So I report here!

# Case
An array of integers (e.g. 0xFF0000FF) is given and I need to extract RGBA parameters separately.

# Method 1. Uint8Array

Converts the color array to Uint8Array in bulk and gets by indexes.

```javascript
const array = new Uint8Array(new Uint32Array(colors).buffer)
const len = colors.length
const results = []
for (let i = 0; i < len; i++) {
  const a = array[4 * i]
  const b = array[4 * i + 1]
  const g = array[4 * i + 2]
  const r = array[4 * i + 3]
  results.push({
    r, g, b, a
  })
}
return results
```

# Method 2. Bitmask
Simply uses a loop and apply bitmask and bit shifting.

```javascript
const len = colors.length
const results = []
for (let i = 0; i < len; i++) {
  const c = colors[i]
  const r = (c & 0xFF000000) >> 24
  const g = (c & 0x00FF0000) >> 16
  const b = (c & 0x0000FF00) >> 8
  const a = c & 0x000000FF
  results.push({
    r, g, b, a
  })
}
```

# Benchmarking results

I prepared 4 kinds of data.
- HD: 1280 x 720
- Full HD: 1920 x 1080
- 4K: 3840 x 2160
- 8K: 7680 x 4320

I measured in 2 platforms Node.js and Chrome browser. I ran the same process ten times. The result number is in milli seconds. In Node.js, the bitmask method always wins. However, in browser, Unit8Array method always wins!😂 Furthermore, in Uint8Array method, Browser beats Node.js!!!

Node.js (14.16.0 on Windows 10)

|         | Uint8Array | Bitmask |
|---------|-----------|---------|
| HD      | 1501      | 556     |
| full HD | 3367      | 1379    |
| 4K      | 13706     | 4668    |
| 8K      | 71298     | 20553   |

Chrome browser (94.0.4606.81)

|         | Uint8Array | Bitmask |
|---------|-----------|---------|
| HD      | 546       | 851     |
| full HD | 939       | 1990    |
| 4K      | 3209      | 9157    |
| 8K      | 11872     | 42438   |

In the Uint8Array method, number of accessing array is larger. In the bitmask method, number of calculation is larger. Therefore, the reason can be calculation is faster in Node.js and accessing array is faster in Chrome browser. This is just my guess though ...
Make Git Your API
Tags: javascript, news, programming, node
Published: 2021-10-23 03:09:46

When designing HTTP APIs for your application, it sometimes makes sense to embrace git as a part of the protocol. 

If your application operates on data that your users naturally manage using a source control system like git, adding first-class git support to your APIs may be a good idea.

If you choose to add first-class git support to your own APIs, the fusebit/cloud-git project may come in handy. It provides a lightweight, pure JavaScript implementation of the git protocol that enables you to add git endpoints to your Node.js application.

[Check our cloud-git and the open source github repo](https://fusebit.io/blog/make-git-your-api/?utm_source=dev.to&utm_medium=referral&utm_campaign=post&utm_content=cmore)
Building a Card while Coughing
Published: 2021-10-11 02:34:03

This blog post is brought to you by a lingering cough and frustration towards machines. 

#Cards
We're going to be continuing our web components journey with making a multi-element card. Cards, while ambiguous, are bordered elements containing useful information or action links. By wanting to make a multi-part card, with a header banner, icon, and content, we need a multi-component project. Each piece will be it's own stand-alone web-component with the card wrangling them all together in the end. 

## Considerations
Before delving any deeper, we are going to look at the steps I never take when tackling a programming project; low level planning. I do a lot of high level planning in general structure and ideal functionality, but for this one we're going to get more granular. We're copying some other card examples we've seen online, which were broken down into the icon, header, and content of the card. Sometimes, you just have to section off parts of a project to get started.

### Icon
Icons grab the user's attention and give them an idea of the subject without any words. Alignment in this project is going to be difficult when splicing all the components together, and the Icon may cause the most difficulty. Words are easy to work with, but images are a pain sometimes.
### Header Banner
One of the easier components in the project, it consists of a main header and a possible sub-header. The main difficulties here lie in the variability and user input. We have to dynamically shift content around with page resizing, scrolling, and deal with whatever headers the designer wants to add. 
### Content
The easiest component, but also the one with the greatest variability. Bulleted lists, different fonts, and a possible collapsable option are all possibilities in the component.
## Card
The final element that wraps all the previous together. That wrapping graphically is going to be the worst part. But after baking a call to action button, handling action events and state changes should be a breeze. That's for one element though; for multiple elements, we may have to use bubbling events and event listeners to capture what we need for reactivity. That'll be a story for another day once we start implementing and testing unknown code.

What fun.
Fusetunnel - A Fast, Scalable, and Free Tunnel
Tags: javascript, node, npm, news
Published: 2021-10-23 03:03:07

There are many times where we want to share our localhost app with the world, either for testing purposes, to show progress, demo websites or run personal cloud services from your home. Fusetunnel helps you to do this easily! No need to mess with DNS or deploy to have others test out your changes.

Fusetunnel is great for working with browser testing tools like Browserling or external API callback services like Twilio, which require a public URL for callbacks.

Fusetunnel is Fusebit’s version of localtunnel.

The main difference with localtunnel (and other tunnels) is that Fusetunnel is end-to-end encrypted, giving the user greater security, promoting data protection, and preventing unauthorized access to data.

[Read more about Fusetunnel and fork the open-source repo](https://fusebit.io/blog/fusetunnel-fast-scalable-and-free-tunnel/?utm_source=dev.to&utm_medium=referral&utm_campaign=post&utm_content=cmore)
Flix and Tunes
Tags: angular, webdev, frontend, typescript
Published: 2021-10-23 02:36:04

A one-stop service where you can search for movies, find all tracks and playlists and jump straight to Spotify! It ain't much, but it's honest work. :(

Github link: https://github.com/das-jishu/flix-and-tunes
Website link: https://flix-and-tunes.web.app