teleren/devto huggingface dataset:
How to Open GitHub Repository Without Cloning With VsCode!
Tags: github, vscode
Published: 2021-11-09 14:17:25



## Learn how to Open GitHub Repository Without Cloning With VsCode! and edit the code directly

It's very simple!

lets have example:
I have this repository link: 
https://github.com/bluebits-academy/mern-stack-ecommerce 

I want to open it with VsCode Online to search in the file easily and even edit it and see the relation between the files and also check the file structure easier and faster better than the navigating in github.

It's simple: Just add `vscode.dev` behind the github URL aaaaand enjoy!!!

[https://vscode.dev/github.com/bluebits-academy/mern-stack-ecommerce ](https://vscode.dev/github.com/bluebits-academy/mern-stack-ecommerce )

Check this video to see it in practical:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=rNYtAcM_4bU
" target="_blank"><img src="http://img.youtube.com/vi/rNYtAcM_4bU/0.jpg" alt="How to Open GitHub Repository Without Cloning With VsCode!" width="240" height="180" border="10" /></a>
What does it mean by modulenotfounderror in python?
Published: 2021-11-09 13:45:38

Well, modulenotfounderror itself says module not found. Means something wrong while importing modules in python script. 

There can be multiple reason behind this problem

* Spelling mistake in imported module name

* Imported package is not installed

* Path for imported packages is not found by python interpreter


###Spelling mistake in imported module name

Its most common issue while importing modules there can be human typing mistake. Therefore we need to first look for spelling in module name included.


###Imported package is not installed

some of the python package does not come with python installation and require to install externally using pip command.

Example: ```pip install requests```

Here pip command is used to install request package.

  
###Path for imported packages is not found by python interpreter

This is also common mistake we do specially beginners. We already have respected package installed or user defined package is in another folder on a particular server path but interpreter can't find while running python script. 

In such case we just need to let interpreter find path for imported packages. 

We can define path for package like

```
import sys
sys.path.append('path_to_misc') 
```
Another way we can do to create empty file __init__.py to make folder behave as a package.

```
from folder import module
```
Therefore we can import module exist in folder.

Hope it help to understand basic insight about modulenotfounderror. Please go through [modulenotfounderror no module named exceptions](https://www.quizcure.com/python/modulenotfounderror-no-module-named-exceptions#wrong-package-path)  for more detail with demonstration example code.
How to read keystrokes from stdin at Deno
Tags: deno
Published: 2021-11-09 13:33:25

When using Deno, there was a case where I wanted to process input one character at a time.

I don't fully understand the code yet, so the code itself could be improved, but this is how it worked.

```typescript
Deno.setRaw(0, true);

const bufferSize = 16;
const buf = new Uint8Array(bufferSize);

let output = "";

while (true) {
  const nread = await Deno.stdin.read(buf);

  if (nread === null) {
    console.log("nread is null");
    console.log("Exit");
    break;
  }

  // If you press Ctrl + C, the process will exit.
  if (buf && buf[0] === 0x03) {
    console.log("Ctrl+C");
    console.log("Exit");
    break;
  }

  // If the Enter key is pressed,
  // the text of the output will be displayed and the process will be terminated.
  if (buf && buf[0] === 13) {
    console.log("Ouput: ", output);
    break;
  }

  const text = new TextDecoder().decode(buf.subarray(0, nread));
  output = output + text;
  console.log(output);
}

Deno.setRaw(0, false);
```

If you want to use `Deno.setRaw`, you need to run it with the `--unstable` option.

```sh
deno run --unstable sample.ts
```

Here are some additional explanations for the code above.

* One by one, the entered characters will be added to the variable of `output`.
* Press `Ctrl + C` to finish the process.
* Pressing the `Enter` key will do the same, but the process will end after outputting the string from the variable of `output`.
* I haven't been able to track when the `nread` variable returns `null`, but since there is a possibility that it will return `null`, I've included the processing for that.
* There is no particular reason for the `bufferSize` to be `16`.
Create your own React State Management
Tags: react, webdev, javascript, redux
Published: 2021-11-09 13:20:15

> ####Level: Intermediate⚛️; Scroll to bottom for full code⬇️

### Pen and Paper

The implementation is simple, I think many blogs have been written about the same method; I think this needed to be written. We will be using react context for universal state management. 
* Create a wrapper component
* use `React.createContext` to create state context
* create new app state using `useReducer()`
* create a method in reducer function to add / update state

### Implementation

Create wrapper
```tsx
export const StateManager = ({children}) => {
    return (
        
    )
}
```
Creating context
```jsx
export const store = React.createContext({})
```
Creating state in wrapper
```tsx
// store context
export const store = React.createContext({})
const {Provider} = store

export const StateManager = ({children}) => {
    // creating state
    const [state, dispatch] = React.useReducer(reducer, {})
    return (
        <Provider value={{state, dispatch}}>
            {children}
        </Provider>
    )
}
```

Implementing reducer

```tsx
const reducer = (state, action) => {
    const {type, payload} = action
    switch (type){
        case "ADD":
            return {...state, ...payload}
        default:
            return state;
    }
}
```
One thing to be noted is that, the payload given must be an object containing app data

### Usage

```tsx
import {useContext} from "react"
import {store, StateManager} from "./StateManager.js"

function App(){
    return (
        <StateManager><ChildComp /></StateManager>
    )
}

function ChildComp(){
    const {state, dispatch} = useContext(store)
    // work with app state

    return (
        <div></div>
    )
}
```

### References
[How to use useReducer ? ](https://reactjs.org/docs/hooks-reference.html#usereducer)
[How to use react context ? ](https://reactjs.org/docs/context.html#gatsby-focus-wrapper)

#### Whole Code
```tsx
// StateManager.js
import React from "react"
// reducer function 
const reducer = (state, action) => {
    const {type, payload} = action
    switch (type){
        case "ADD":
            return {...state, ...payload}
        default:
            return state;
    }
}
// store context
export const store = React.createContext({})
const {Provider} = store

export const StateManager = ({children}) => {
    // creating state
    const [state, dispatch] = React.useReducer(reducer, {})
    return (
        <Provider value={{state, dispatch}}>
            {children}
        </Provider>
    )
}
```
Responsive Personal Portfolio Website with HTML CSS JS - Part 4
Tags: css, javascript, webdev, beginners
Published: 2021-11-09 13:01:34

{% youtube WJHRIxtfb7s %}

How to create Responsive personal portfolio website with html css js

In this video series, 
I will show you how to build a Complete Responsive Personal Portfolio Website using HTML CSS JavaScript. 

🌟 Website features
---------------------------------
+ 5 pages
+ Fully Responsive and mobile friendly
+ Awesome Page Navigation
+ Filterable item showcase

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New videos Every Friday & Tuesday

---

📹 Recommended Videos
---------------------
[Part 1](https://dev.to/codewithsadee/responsive-personal-portfolio-website-with-html-css-js-part-1-3dlg)
[Part 2](https://dev.to/codewithsadee/responsive-personal-portfolio-website-with-html-css-js-part-2-l5)
[Part 3](https://dev.to/codewithsadee/responsive-personal-portfolio-website-with-html-css-js-part-3-2m6a)

---

🔗 Essential links
-----------------------------
Images : [image.zip](https://drive.google.com/file/d/1CZZcnaOEVDDneSve6qpSUoyAfEBuPrqD/view)
Font : [Poppins](https://fonts.google.com/specimen/Poppins?query=poppins)
Ionicon : https://ionic.io/ionicons
How to use ionicon : https://youtu.be/TTrYjLOJeKs
Source Code : https://www.patreon.com/codewithsadee

---

⏱️ Timestamp
------------------------
0:00 - Demo
0:58 - Blog section
6:50 - Media queries

---

👤 Like - Follow & Subscribe Me
----------------------------------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
TDD Conference 2021 - All Talks
Tags: tdd, testdrivendevelopment, codenewbie, beginners
Published: 2021-11-09 12:56:01

First International Test Driven Development took place on July 10th. 

In this series, I included every talk together with my notes and further reading.

Hopefully, a lot of readers will watch and re-watch the talks, as they are worth several reviews.

{% post https://dev.to/mcsee/tdd-conference-2021-opening-ceremony-by-alex-bunardzic-3f1e %}

{% post https://dev.to/mcsee/tdd-conference-2021-want-more-value-faster-take-many-more-much-smaller-steps-geepaw-hill-2c6a %}

{% post https://dev.to/mcsee/tdd-conference-2021-agile-pain-relief-through-technical-excellence-james-grenning-1i69 %}

{% post https://dev.to/mcsee/tdd-conference-2021-which-is-better-to-code-by-contract-tdd-or-api-first-meenakshi-dhanani-20nb %}

{% post https://dev.to/mcsee/tdd-conference-2021-why-you-might-not-want-to-use-tdd-ola-kunysz-330j %}

{% post https://dev.to/mcsee/tdd-conference-2021-tdd-misconceptions-olena-borzenko-4ja9 %}

{% post https://dev.to/mcsee/tdd-conference-2021-benefits-of-going-beyond-the-make-it-work-phase-francisco-climent-2c26 %}

{% post https://dev.to/mcsee/tdd-conference-2021-tdd-all-the-things-liz-keogh-2p31 %}

{% post https://dev.to/mcsee/tdd-conference-2021-how-to-get-started-with-test-driving-your-code-jov-mit-e3f %}

{% post https://dev.to/mcsee/tdd-conference-2021-on-the-relationship-between-units-of-isolation-and-test-coupling-mario-cervera-12na %}

{% post https://dev.to/mcsee/tdd-conference-2021-tdd-manifesto-daniel-moka-15ck %}

{% post https://dev.to/mcsee/tdd-conference-2021-how-tdd-sensitized-me-to-speed-as-a-regular-workplace-habit-ragunath-jawahar-5ffk %}

{% post https://dev.to/mcsee/tdd-conference-2021-python-a-language-made-for-test-driven-development-jan-giacomelli-44fm %}

{% post https://dev.to/mcsee/test-driven-development-on-legacy-systems-maximiliano-contieri-56p1 %}

{% post https://dev.to/mcsee/why-i-love-tdd-and-why-im-looking-for-ways-to-go-beyond-tdd-alex-bunardzic-5h3m %}

* * *

Please follow TDD Conference on:

- [YouTube](https://www.youtube.com/channel/UCKn-DadPoyYssfAOMk1LSew)
- [Twitter](https://twitter.com/tddconf)
- [Website](http://tddconf.com/)

If you are excited with TDD please [join us](http://tddconf.com/) on 2022th edition!
How to become a Devops Engineer?
Tags: devops, tutorial
Published: 2021-11-09 12:50:49

DevOps engineers reduce that complexity, closing the gap between conduct demanded to snappily change an operation, and the tasks that maintain its trust. 
Development brigades and IT operations brigades can have different chops and different pretensions. Developers want to introduce new features to an operation, while operations brigades want to save the stability of an operation once it's released. 
DevOps is each about the junction and robotization of processes, and DevOps masterminds are necessary for combining law, operation conservation, and operation. All of these tasks calculate on understanding not only development life cycles, but DevOps culture, and its gospel, practices, and tools <a href="https://intellipaat.com/blog/how-to-become-devops-engineer/"> to become a DevOps engineer</a>. 
Within a nimble terrain, inventors, system directors, and programmers can be siloed, working on the same product but not participating in the information necessary to ensure value to the stoner. Some associations may hire professionals to" perform DevOps" within their workflows, but because successful DevOps relinquishment depends on changes to culture and process, this may just consolidate the dissociate between inventors and functional brigades.
Exchange to Office 365 Migration Tool
Tags: exchangetooffice365migration
Published: 2021-11-09 12:15:32

Keep in mind that it is not an easy task to migrate Exchange to Office 365. It is essential to migrate Exchange to Office 365 quickly and correctly.

It is also possible to migrate manually using Hybrid migration, Cutover migration, or Staged migration. However, they come with some restrictions and are not compatible with large mailboxes for migration. Then I considered Shoviv <a href="https://www.shoviv.com/pages/migrate-exchange-to-office365.html">Exchange to Office 365 Migration</a> tool, a professional third-party method to migrate Exchange to Office 365. 

<b>Shoviv Exchange to Office 365 migration tool:</b>

Using this tool, you can easily migrate Exchange to Office 365 while maintaining data integrity and folder hierarchy. It has a simple interface for everyone to use. It has multiple features. Examples include:

<b>Incremental Export option:</b>
The user needs to check this option within the tool. If the process gets interrupted, it helps to resume the process and prevent duplication.

<b>Other Highlights:</b>

-It allows adding single/multiple mailboxes to migrate them to Office 365.

-It has email translation and folder mapping features.
Users can use it to migrate Exchange mailboxes to PST.

-It holds more convenient options like Search and Filter options and gives a preview of data before processing.

-A free trial edition of the Exchange to Office 365 migration can assure the features and efficiency.

for more details, visit:- <a href="https://www.shoviv.com/pages/migrate-exchange-to-office365.html">Migrate exchange to office 365</a>

Some related Topics:- <a href="https://www.shoviv.com/blog/office-365-migration-plan/">Office 365 Migration Plan</a> , <a href="https://www.shoviv.com/blog/migrate-from-exchange-2007-2010-to-office-365/">migrate exchange 2010 to office 365 step by step</a>
Get Packaging Custom Boxes from Claws Custom Boxes Pty Ltd
Tags: productivity
Published: 2021-11-09 12:06:34

Claws Custom Boxes gives best answers for each bundling needs, we are proficient with the mental ability, innovation and aptitude that you need. We help organizations in their bundling prerequisites, we cooperate to fulfill our clients and convey them the predominant administrations. Full shading printing and bundling arrangements are accessible here, provide us request for the bundling in any style, size and shape. Our pre-press group makes confirmation for each print work and get endorsement prior to printing measure.

Regardless of whether you need exceptional thick business cards, level decorated greeting, foil stamp cloth organizers and vinyl stickers, The Custom Packaging will offer best printed things at sensible costs. We are devoted to give Custom Printed Boxes, Retail Packaging, Product Packaging, Food Packaging, Cosmetic Packaging, Die Cut Boxes, Candy boxes, Pizza Boxes, Shipping Boxes, Custom Display Boxes, Custom Software Boxes or some other our clients required. We convey widely inclusive top quality bundling, every one of our produces are the fragile assortments of value, thickness and solidness. We utilize the worthiest printing techniques to accomplish best printing results.

Claws Custom Boxes Australia has opened new roads for custom boxes. Our 4 shading computerized and offset printing administrations permit you to have brilliant quality customized bundling. Get the container you need us to print from our wide assortment of items. In the event that you don't track down your ideal measurements in our item log; we'll plan a bundling box following your details. Getting discount printed boxes at a particularly moderate cost has never been basic all things considered with Claws Custom Boxes Australia. We are helping a great many organizations to give uplifting custom bundling. A variety of extra and completing choices are accessible to make your custom boxes worth taking note. Claws Custom Boxes Australia is a passionate ally of green maintainable bundling; all our containers are produced using 100% recyclable materials. We offer our commendable customers premium discount boxes' printing. Claws Custom Boxes Australia is a pioneer in inventive custom bundling. Over ten years of involvement has made us a first class bundling specialist organization liked by driving brands. Fill in the structure to begin now! Our Customer Services Representatives are accessible all day, every day to engage your questions and concerns. Leave Claws Custom Boxes Australia alone your confided in bundling accomplice for every one of the difficult endeavors
need help for export pdf in angular 
Tags: angular, javascript, typescript
Published: 2021-11-09 11:45:13

Export in json data to  Pdf using jspdf and jspdf-autotable 
but that AutoTable not accept json formet
my code 

const doc = new jsPDF.default();

 const b =  [ {"bank_Name":"citybank","short_Code":"CIb","country":"American Samoa"},
{"bank_Name":"senabank","short_Code":"db","country":"Antarctica"},
{"bank_Name":"dBS bank","short_Code":"dbs","country":"Singapore"} ]

autoTable(doc,{columns: this.cols, body: b,)
doc.save('bank.pdf');
Creating a Squid Game Card in HTML
Tags: javascript, codenewbie, tutorial, 100daysofcode
Published: 2021-11-09 11:41:59

---
title: Creating a Squid Game Card in HTML
published: true
description: Using HTML Canvas Graphics to Draw Shapes
tags: JavaScript, codenewbie, tutorial, 100daysofcode
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w311xx21ymciqrs2n12.jpeg
---
I really enjoyed the [Netflix](https://www.netflix.com/)  series *Squid Game*. The series was intense 😱, and I’m a big fan now.

So I decided to write a quick HTML canvas program to display a Squid Game card. No worries. No spoilers here!

It’s a short and simple HTML program. Let's walk through the code.

Here are the beginning HTML elements:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>SG</title>
</head>
```
Next are the start of the body and the canvas elements:
```html
<body>
  <canvas id="myCanvas" width="336" height="192"></canvas>  
```
JavaScript code comes next. Here we get the canvas and context objects:
```html
  <script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
```
The context object lets us set colors, set styles, and draw. This code draws a filled rectangle with the specified fill color on the entire canvas, representing the business card background:
```javascript
  ctx.fillStyle = "#E2C4A5";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
```
The context object also lets us set the stroke width and color of the shape outlines:
```javascript
  ctx.lineWidth = 5;
  ctx.strokeStyle = "#655451";
```
Next are the circle, triangle, and square:
```javascript
  ctx.beginPath();
  ctx.arc(105, 96, 25, 0, 2 * Math.PI); 
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(143,121);
  ctx.lineTo(193,121);
  ctx.lineTo(168,71);
  ctx.lineTo(143,121);
  ctx.stroke();

  ctx.beginPath();
  ctx.rect(215, 71, 50, 50);
  ctx.stroke();
```
Finally, we end the program with the closing tags:
```html
  </script>
  
</body>

</html>
```

Here's the complete program:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>SG</title>
</head>

<body>
  <canvas id="myCanvas" width="336" height="192"></canvas>  

  <script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  
  ctx.fillStyle = "#E2C4A5";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.lineWidth = 5;
  ctx.strokeStyle = "#655451";

  ctx.beginPath();
  ctx.arc(105, 96, 25, 0, 2 * Math.PI); 
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(143,121);
  ctx.lineTo(193,121);
  ctx.lineTo(168,71);
  ctx.lineTo(143,121);
  ctx.stroke();

  ctx.beginPath();
  ctx.rect(215, 71, 50, 50);
  ctx.stroke();
  </script>
  
</body>

</html>
```
Save this program to a file named `sg.html` and open it in a browser.

Enjoy the program and Squid Game! 😀

*Follow me on Twitter [`@realEdwinTorres`](https://twitter.com/realEdwinTorres) for more programming tips and help.*
Two important gems every newbie should already knew !
Tags: git, node
Published: 2021-11-09 11:08:34

<u>In Git context (by default)</u> :

`--prefix` resolves (equals) to the root of your `project/.git/.gitconfig`

> *whilst,..*

<u>In Node.js context (by default)</u> :

`--prefix` resolves (equals) to the root of your `project/node_modules`

---

Correct me If I am wrong ⌨🖱 . Cheers ! 😎
Docker
Tags: beginners, programming, opensource
Published: 2021-11-09 10:58:53

**Docker** the buzzword. Its the most moving word as of now. Do you have any clue about why it is used, how it works.  Try not to stress, by the time you finish reading this you'll have a clear idea about docker.

## Why?
Let's assume you've node 15.0.0 installed globally on your system. Your friend gave you a project to checkout using 16.0.0. So to look at the project you should install 16.0.0 dependencies globally on your system. If in case you want to check out all the friend's projects and all of them have different versions. It will be very difficult to handle this right? There is often mismatch of project dependencies and their versions between system.

So, to take care of this issue docker was introduced.

##What?
Now you have an idea of why docker was introduced. So, now let's find out what is docker?.

Docker is a container management service. New word **Container** right? The container is a package of code and all the dependencies required to run that application. The container is an isolated environment. Actually, containers are light in weight, you can easily share containers. It's like moving software from one computing environment to another and having it operate consistently.
![Containers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3fqdvhs62fl2w99v89q.jpg)

Docker provides tooling and a stage to manage the lifecycle of your containers.

In this way, with the help of docker, we can address the issue of the previously mentioned example.
Assuming, if our friend dockerizes the application and sends it to us, then there will be no issue of mismatch of dependencies. There is no worry about the versions of the system because the application runs on containers that have all the needed dependencies. 

To sum it all up:
Docker is a tool to create and manage containers that are just isolated movable environments having your code.

I hope you found this article useful. Reach out to me on [Twitter](https://twitter.com/Bhargav263) to share your feedback or for any queries. I'd be more than happy to help. 

Thanks for reading, See you next time.