teleren/devto huggingface dataset:
VS Code + Live Share: Putting the “We" back in "Web" 
Tags: webdev, vscode, showdev, javascript
Published: 2021-10-20 23:02:31

---
title: VS Code + Live Share: Putting the “We" back in "Web" 
published: true
description: 
tags: webdev, vscode, showdev, javascript
cover_image: https://i.imgflip.com/5r7imp.jpg
---

When we first released [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) three years ago, our goal was to enable developer collaboration to become more [enjoyable](https://twitter.com/LostInTangent/status/1450868941056720899), [flexible](https://aka.ms/vsls-modality), and [extensible](https://aka.ms/vsls-platform), across a diverse set of [use cases](https://aka.ms/vsls-usecases). Screen sharing had served us well, but as teams and classrooms were becoming more geo-distributed, it was clearly time for a fresh take on remote pair programming.

Since then, Live Share has become a key part of many developer's workflow, and it's been amazing to build it alongside the community. However, in order for us to support collaboration to happen from anywhere, and on any device, we've been missing a fundamental part of the story: a web client.

{% twitter 1450853494949244929 %}

With the introduction of [Visual Studio Code for the Web](https://vscode.dev) (and [github.dev](https://aka.ms/githubdev-fun)), developers now have a world-class editor, that's simply a URL away. And with this powerful foundation in place, we were able to port Live Share to run entirely in your browser, so that collaboration can be as opportunistic and lightweight as possible. Got an iPad? Sweet! Working on a new machine and don't want to install any tools? Awesome! VS Code and Live Share have got your back, no matter where/when you want to collaborate 🔥

{% twitter 1450868941056720899 %}

Even cooler, the Live Share web client is fully interoperable with both Visual Studio and Visual Studio Code, which allows you to collaborate with other developers, and ensure that everyone can work in their most comfortable and convenient environment. At the moment, the Live Share web experience supports the majority of features that the desktop client does (e.g. co-editing, shared cursors, text chat, inline commenting), and we'll be iterating on it in the coming weeks to fill in some of the remaining gaps (e.g. notebooks).

That said, we think that Live Share's new web support is complete enough for folks to start giving it a spin, and letting us know where and how we can improve. We're extremely excited to remove these setup and device barriers, and looking forward to hearing if/how it's making developer collaboration more enjoyable 💖
Parsing Node Command-Line Arguments
Published: 2021-10-20 22:15:27

Node provides an option to pass in command-line arguments when running a node application. For instance, you can pass in a flag to npm to install a package as a dependency or dev-dependency:

```bash
node install -D <package-name> 
```

The arguments passed are accessible from the `process.argv` property in your node application as an array of strings where the first element is the `process.execPath` while the second element is the path to the file being executed.

```jsx
// app.js
const arg = process.argv
console.log(arg)

// Output - running `node app.js kayode`
// [
//   '/home/gitpod/.nvm/versions/node/v16.11.0/bin/node',
//   '/workspace/node_test/app.js',
//   '44'
// ]
```

[Yargs](https://github.com/yargs/yargs)  is a node package for parsing CLI arguments. To install the package in your application run in your terminal:

`npm install -S yargs`

Let's write some codes then I'll explain what the code is:

```jsx
// app.js
const yargs = require('yargs');

const arg = yargs(process.argv.slice(2)).argv;
console.log(arg);

// Output running - node app.js run -o fast
// { _: [ 'run' ], o: 'fast', '$0': 'test.js' }
```

We won't mostly make use of the first two elements from the `process.argv` so we'd slice the array from the third position. 

Yargs provides a an helper function to do this:

```jsx
const yargs = require('yargs');
const { hideBin } = require('yargs/helpers');

const arg = yargs(hideBin(process.argv)).argv
```

The object returned by the function usually contains these three major property:

- non-hyphenated options accessible via `arg._` as an array
- hyphenated options accessible via the flag name e.g `arg.o`
- `arg.$0` the name of the node application file

## A simple example

Next we'd build an application that takes a fullname(f) and lastname(l) option and prints a welcome message 

```jsx
// app.js
const yargs = require('yargs');
const { hideBin } = require('yargs/helpers');

const { firstname, lastname } = yargs(hideBin(process.env))
	.option('f', {
		alias: 'firstname', // -f or --filename
		description: 'your firstname',
		type: 'string'
	})
	.option('l', { // chaining another option
		alias: 'lastname', // -l or --lastname
		description: 'your lastname',
		type: 'string'
	}).argv

console.log(`Hello, welcome ${firstname} ${lastname}`)

// Output running - node app.js -f John -l Doe
// Hello, welcome John Doe
```

## More example

```jsx
// app.js
const yargs = require("yargs");
const { hideBin } = require("yargs/helpers");

const arg = yargs(hideBin(process.argv))
  .usage("Usage: $0 -f string -l string")
  .option("f", {
    alias: "firstname",
    type: "string",
    description: "your firstname",
  })
  .option("l", {
    alias: "lastname",
    type: "string",
    description: "yout last name",
  })
	.help("h")
  .demandOption("f")
  .default("l", "Default").argv;

console.log(`Welcome, ${arg.firstname} ${arg.lastname}`);
```

Running `node app.js -h` will out a CLI showing the help and descriptions of the arguments:
![command-line output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fadw1vlllxcubsc1hqpu.png)
Render HTML in a component made with @react-pdf/renderer
Tags: javascript, react
Published: 2021-10-20 21:47:13

A component made with react-pdf in case it does not support html then I want to create a table with data but that is made with react-pdf and I do not know how to do it.
This is the example in npm =>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwqd3hz4p1bklyyn5lsa.png)
Explaining Ruby Fibers
Tags: ruby, concurrency
Published: 2021-10-20 21:43:17

---
title: Explaining Ruby Fibers
published: true
description: 
tags: ruby,concurrency
//cover_image: https://direct_url_to_image.jpg
---

Fibers have long been a neglected corner of the Ruby core API, have never really seemed to deliver on their promise of lightweight concurrency, and remain relatively little explored. In [this article](https://noteflakes.com/articles/2021-10-20-explaining-ruby-fibers) I'll  explain how fibers work from the point of view of a concurrent Ruby application written using Polyphony. I'll give an overview of fibers as concurrency constructs, and discuss how Polyphony harnesses Ruby fibers in order to provide an idiomatic and performant solution for writing highly-concurrent Ruby apps. [Read on...](https://noteflakes.com/articles/2021-10-20-explaining-ruby-fibers)
CS101 Final BlackJack
Tags: beginners, python
Published: 2021-10-20 21:41:33

Hey Devs,

This is my first Python project for my CS101 Codecademy class. Went with a simple BlackJack game. May release an expansion or some patches in the future; we'll see ;)

Below is the link:

https://github.com/JayV-XCVI/BlackJack-Python3.git

Looking forward to more projects in the future.

Best,


Joseph
How Do You Name Projects?
Tags: watercooler, discuss
Published: 2021-10-20 21:22:20

A commonly quoted joke about programming:

> There are 2 hard problems in computer science: cache invalidation, naming things, and off-by-1 errors

And that is talking more about naming variable and functions - not to mention naming a project!

I am curious what everyones strategy is when it comes to naming a new library, or website, or app?

My personal blog was just a silly observation of my cat, who I wanted to make the mascot so I called it CatStache!
Day 476 : Same Thing Coming
Tags: hiphop, code, coding, lifelongdev
Published: 2021-10-20 21:13:57

_liner notes_:
- Professional : Pretty chill day. No meetings or anything. I just finished up some online training. Reviewed some pull requests. Helped get CORS working on a node back-end server for a demo application. I am working on the front end and was getting hit with a CORS error. Got that working and finished up the log in and sign in functionality.

- Personal : Did some more research into the blocker in my side project. There looks like there's a solution that will fix my issue, but it's not in browsers yet unless you enable a flag. Of course. Guess I'm ahead of my time. haha. I went through a bunch of tracks for the radio show. Had a meeting with my friend. Ended the night watching a couple of episodes of "Squid Game". It's pretty good.

![A creek in Yosemite Valley, CA, United States with a lot of stones, forest of pine trees on both sides and huge grey stone mountains in the distance under a sky with a lot of clouds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3j1ki1yrnd8swnk2dbq.jpg)

Going to do some more reach into the issue I'm running into my side project. Go through more tracks for the radio show. Then watch "Squid Game". I see the same thing coming as last night.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 6ac6-jhRr28 %}
A Development Project With Awesome Graph Algorithm Implementation And PWA
Tags: javascript, gamedev, webdev, pwa
Published: 2021-10-20 20:17:16

So in this single project I chose to sharpen my skills both as a developer and a coder and what better way could be there than to create a website to showcase easy but cool games made from scratch. In this one project I learned javaScript from basic to advanced level and also mastered the art of creating PWA. 

The fact that I had challenged myself to learn graph algorithms took another level of a turn when I was able to understand the minimax algorithm and use beginner friendly JavaScript code to make it come to life. 

The code for the project is in the repo link given below, be sure to download and clone and edit it and commit necessary UI changes as per your need I so wanted to do this in react but then again I wanted a project to be created in native JavaScript and focus more on logic building. Therefore the UI is obviously not great for that completely beats the purpose of the project. The App has a link to redirect you to my blog's PWA and that thing has my front-end skills showcased well. Let me link down both of them below: 

This PWA Gaming App Code : https://github.com/Souvik1406/gaming-project-minimaxalgo-setservicePWA-implementaion-L_Heaven

My Portfolio Page Code : https://github.com/Souvik1406/advancedblog

You can find the hosted versions of the project on the following links : 

Blog : https://souvikblog2-0new.netlify.app/
Game : https://minimax-based-game-pwa-by-souvik-roy.netlify.app/
How to create a dynamic `scrollToTop` button in React! No library necessary! EVER
Tags: webdev, react, tutorial, javascript
Published: 2021-10-20 20:12:35

## Hey devs 👋 
Have you always wanted to know how to get that buttery smooth scroll back to top button!?

Ya don't need another library to achieve this! Get the job done in just a few minutes with some basic logic and javascript! 

--- 

## PREFACE 

This is a speedcode tutorial, and I'll assume you have some working knowledge of: 
- HTML, CSS, JS
- React
- Good concept of CSS or SASS 
- Not necessary, but I'll be using Styled-components ( CSS in JS library )

---

## Resources
1. [React](https://reactjs.org/)
2. [React Icons](https://react-icons.github.io/react-icons/)
3. [Styled-Components](https://styled-components.com/)

--- 

## Speedcode tutorial ⤵️
{% youtube cS8BFgyvzGs %}

--- 

## Conclusion 

Thats it for "**How to create a dynamic `scrollToTop` button in React! No library necessary! EVER**" I hope you enjoyed the video, and hope you never have to use another scroll button library again! Once you get the hang of the code, you'll be able to add this to your website in just a couple minutes, no doubt about it! #happycoding! 

---

## Additional resources you may enjoy! 

 {% link https://dev.to/hyggedev/master-frontend-development-by-cloning-these-websites-1m08 %}

{% link https://dev.to/hyggedev/easiest-way-to-add-icons-to-your-react-apps-5cgd %}

{% link https://dev.to/hyggedev/responsive-social-media-card-built-with-react-part-one-ckj %}

{% link https://dev.to/hyggedev/no-fuss-dark-mode-toggle-with-react-styled-components-3nd4 %}

{% link https://dev.to/hyggedev/how-to-build-a-responsive-react-navigation-menu-with-styled-components-3682 %}
How to find repos to contribute to during Hacktoberfest 
Tags: hacktoberfest, github, beginners
Published: 2021-10-20 20:06:38

I really wanted to be part of Hacktoberfest celebration. Find a repo, understanding the issue and create a pull request that will be merged... 

But, it's not so easy when so many people want to do this as well.

So let me share with you a quick tip how to find easily repos that you can contribute to during Hacktoberfest.

In github there is an option for [advanced search](https://github.com/search/advanced) 
I'm using the following filters:
* With the labels - hacktoberfest (well, duh)
* Written language - javascript (but it's really up to you)
* In the state - open
* With this many comments - 0 (so no one started to work on them)
* With this many stars - > 15 (it's legit repo)

Here's a search [link](https://github.com/search?q=label%3Ahacktoberfest+state%3Aopen+comments%3A0+language%3AJavaScript+state%3Aopen+language%3AJavaScript&type=Issues&ref=advsearch&l=JavaScript&l=JavaScript)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kgcrhlkszz6mlamgfqf.png)

Good luck...
Feedback on Prometheus exporter written in Golang for Magento 2
Tags: prometheus, go, devops, learning
Published: 2021-10-20 20:06:32

---
title: Feedback on Prometheus exporter written in Golang for Magento 2
published: true
description:
tags: prometheus,golang,devops,learning
//cover_image: https://direct_url_to_image.jpg
---
I decided to write :memo: a Prometheus exporter (in Golang) for Magento 2. Why? Because I wanted a better understanding of both Prometheus and Golang. Writing an exporter gives me a practical example for both.

"Magento 2 Prometheus Exporter" consists of two parts, the Prometheus exporter itself and a module for Magento 2 which extends upon the REST API to expose metrics where the native API of Magento 2 lacks in performance (such as determining the amount of orders).

I would love (:heart:) and appreciate some feedback and constructive criticism on the exporter. Same goes for the Magento 2 module to extend the REST API but, because the personal objective for me is learning more about Prometheus and Golang, feedback on the actual exporter is of much greater value to me.

https://github.com/Serializator/magento2-prometheus-exporter-golang
Day 35/100 Personal Hotspot
Tags: 100daysofcode, programming, codenewbie, codereview
Published: 2021-10-20 20:03:21

There was a silver-lining of the internet connections I had this past few days. Though all of my schedule got interupted, I found that once you got disturb, something is not working well. It's either the other party to disturb your inner peace. I got my Personal Hotspot for emergency purposes. Though it's costly at least I secure the future for straight flow of learning to code. 

![new lesson](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34lkplzgrd33fwhdgo92.png)
Appwrite SDK for Minecraft
Tags: java
Published: 2021-10-20 19:44:53

I was just sitting in my chair and wondering what I should develop next. Then I realized! Hackoberfest is knocking on doors and I really want to take part in it for the first time. I checked their sites and saw Appwrite as a partner. Clicking on their site was the best thing I can ever do! So finally I know for who I could develop. But there's a small problem "What I should develop?". And I got that! I'll develop an Appwrite Minecraft extension as a plugin.

Well here is mind map what that plugin could do. It connects Appwrite database with Minecraft, voiala that's everything. How simple, how effective. Isn't it? Hell no. There were a lots of problems that sometimes happen to every programmer. But after hours of debugging and bothering my friend I've done it. Almost. There're lots to upgrade, but it works!

[Source code](https://github.com/nCodesDotEU/Appwrite-Minecraft-Database)
Making a mobile labyrinth game with TypeScript.
Tags: javascript, typescript, webdev, gamedev
Published: 2021-10-20 19:35:34

I made a small labyrinth style [game](https://tilter.nordicbeaver.io) using typescript that you can play in your browser on your mobile phone. 

Keep in mind that it is a bit buggy and I only tested it in Safari. Make sure that your phone has a gyroscope and it's not disabled in settings. Please let me know in the comments if you had any problems.

If you're interested in how to make something like this, I recorded a video of the development process.

{% youtube Zg8sSizPfYg %}
Is this a "nested function call" to a hook? 
Tags: react, typescript
Published: 2021-10-20 18:39:32

This is the rule of calling hooks:

*Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.*

For the usage in HOC like below taken from https://github.com/launchdarkly/react-client-sdk/blob/e2f79f1c156e5e82f70cd88fd2bf22dc3be8ecad/src/withLDConsumer.tsx#L43:

```
function withLDConsumer(options: ConsumerOptions = { clientOnly: false }) {
  return function withLDConsumerHoc<P>(WrappedComponent: React.ComponentType<P & LDProps>) {
    return (props: P) => (
      <Consumer>
        {({ flags, ldClient }: LDContext) => {
          if (options.clientOnly) {
            return <WrappedComponent ldClient={ldClient} {...props} />;
          }

          return <WrappedComponent flags={flags} ldClient={ldClient} {...props} />;
        }}
      </Consumer>
    );
  };
}

```

Can I use hooks in the returned anonymous function, like below?

```
function withLDConsumer(options: ConsumerOptions = { clientOnly: false }) {
  return function withLDConsumerHoc<P>(WrappedComponent: React.ComponentType<P & LDProps>) {
    return (props: P) => (
      const [name, setName] = useState('Mary'); 
      <Consumer>
        {({ flags, ldClient }: LDContext) => {
          if (options.clientOnly) {
            return <WrappedComponent ldClient={ldClient} {...props} />;
          }

          return <WrappedComponent flags={flags} ldClient={ldClient} {...props} />;
        }}
      </Consumer>
    );
  };
}
```

I think it is a "always use Hooks at the top level of your React function", but my friend said it is a "nested function". My understanding to this is that this "nest" should only count from the function component level.
Cool minecraft plugin! ITEMSADDER
Tags: minecraft, yml, news, tutorial
Published: 2021-10-20 18:26:27

### This is all serious!
I got acquainted with the wonderful ItemsAdders plugin, this plugin allows you to make new items, blocks, weapons, potions on yml markup, in general, anything you want, even planes and cars!!!

This plugin is like a framework that helps us do wonderful things. Everything we want can be done effortlessly, without any problems, just by prescribing the type of object, its properties, if desired, enchantment and texture (taken from your texture pack, about this separately).

To begin with, I will show you screenshots of images from the plugin page and a link to this plugin:

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m874pxuchv32r0f1modk.png)
![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k2omm8fldfu3jlxvmxt.png)

### The cost of the plugin
The main problem of the plugin is its cost, it costs h 16.95 EUR, although I can say it's not very expensive for such a cool plugin, and I can say from hearsay that it's like 1-2 times to go to McDonald's :)

### Opportunities
I repeat, everything is possible here, from the usual sword texture, to cars, planes and new workbenches with their own mechanics.
This plugin is well optimized, it can even compete with a huge number of mods, and the big plus is that it works without mods, and the server does not load from the word at all (for all the time of my game I have never experienced discomfort).

### Texture pack
I mentioned that you use your own texture pack, this is not a joke, you will need to make ready-made textures or models, but do not rush to form them into a ready-made pack, because the texture pack structure of the ItemsAdder is different.

### Lessons on YouTube
I will teach lessons on this wonderful plugin on my YouTube channel, unfortunately they will be in Russian, for many it will be a minus:(
But I also created a repository on github, where I will post ready-made templates of all types of items, I will attach the link later, as soon as everything is ready and I will be able to make sure that I put only allowed materials on display!
ZeroTier Central now integrates with HashiCorp Terraform
Tags: terraform, cloud, networking
Published: 2021-10-20 18:23:11

Configure multi-cloud zero trust network access for up to 9 different cloud providers with our quickstart guide.

Learn more:  https://www.zerotier.com/2021/10/14/zerotier-central-now-integrates-with-hashicorp-terraform/
Which Programing Language you Learn First
Tags: webdev, beginners, programming, tutorial
Published: 2021-10-20 18:22:38

i know you have a question we have so many programing language which i learn first is this C, or Java or some thing else 

i know that pain, i can feel

## Who am i
hey, i am a frontend Full stack web developer, and i have 2+ years of expreince.

## What you learn first
firs of all choice your path if you want to go with frontend then the path is differnt and if you want to go with backend then the path is different.

### frontend 
if you want to be web developer and you are interset in frontend then go JavaScript, because the web is build is javascript, and you should master it.

### here the roadmap for javascript
- variable (let vs const)
- loops
- conditional
- function 
- es6 syntax
- async/await 
- fetch api
- callback
- and many more....

for who they are interest in frontend and want to be a frontend developer than highly suggestion go with javascript

### Backend

who those are interest in backend and some server side logic so you have so many choice you have : python, javascript, php, ruby, java 

pick one of these and master the language, this blog is for who are they beginner level skill set.

so i suggestion go with python or javascript. pick one of theese . if you are still confused pick javascript becasue you need to learn one language and doing 100 thing.

javascript is server side platefrom called node.js.
node.js is javascript run time made by google and it's based on v8 engine.

node.js is a easy and fast way to learn backend. in node.js you need to use express.js, express.js a web framework based on node.js thats made node simply for you 

now i thing you are all clear.

if your are a beginner than start with javascript and you havesome   
exprence than go with python.