teleren/devto huggingface dataset:
Top 10 VSC Extensions
Published: 2022-09-27 20:45:25

​Better Comments​
Better Comments is an extension used for writing human-friendly comments in your code, which is helpful for you and anyone who is reading source code (especially for teams). Descriptive, human-friendly comments save so much time for everyone involved.

With this VS extension, you can use the following characters after a double forward slash // to customize your comments:

! – For errors and warnings
? – For queries and questions
// – For strikethrough
TODO – For to-dos

​ES7+ React/Redux/React-Native snippets​
Snippets are an excellent add-on for productivity. A snippet is a collection of various extensions for the most commonly used programming languages. You can get a complete list of all usable snippets here.

​Material Icon Theme​
Icon themes help you differentiate files and folders. My favorite icon theme is Material Icon Theme.

​One Dark Pro Editor Theme​
Editor themes drastically change the look and feel of your editor. My favorite icon theme is One dark Pro.

​GitLens​
The GitLens is a great extension when working in teams that combines the capabilities of Git with VSCode. It allows you to see who changed the code, why did they change it, and when they changed it. It also allows you to explore the history and evolution of a codebase.

​Auto Rename Tag & Auto Close Tag​
These two handy extensions are simple yet exceptionally effective. They automatically provide a closing tag as soon as you write the opening one and rename both tags as you start renaming one. That allows you to spend more of your precious energy on things that matter, rather than trying not to forget to close or rename your tags.

​Path Intellisense & NPM Intellisense​
With over 4.2 million downloads, Path Intellisense helps you with the auto-completion of your imports. Why would you have to memorize the file’s entire path when this extension can do it for you? The same thing goes for the NPM Intellisense; instead of autocompleting the local paths, it autocompletes the paths of your NPM dependencies.

​Visual Studio Intellicode
​
The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning. As soon as you start typing something, this extension recommends completion for your code context at the top of the completions list.
Modern React Tutorials online for free!
Tags: javascript, react, programming, webdev
Published: 2022-09-27 20:21:39

Hi, is my first official post into dev.to community and i'd like to share this parctical free course that i found... it looks really intuitive and easy to learn, the same creator has the JavaScript course that is teached in the same way as this one, also CSS.

Check the links below 👇👇

https://react-tutorial.app/
https://jadjoubran.io/
Merging on GitHub
Tags: javascript, github, programming, opensource
Published: 2022-09-27 19:25:44

This is the 4th week of _**OSD 600**_. Without a doubt, this 3rd Lab, it's much more simple for me comparing to the previous two labs. Because in this **Lab 3**, I'm going to work with my own **SSG (_Static Site Generator_)** that I made 2 weeks ago. Since I'm going to update my own code, it will saves me a lot of time to go through the logic and add some new features.

## Requirement
In this **Lab 3**, we are going to choose [2 features out of 4 features](https://github.com/Seneca-CDOT/topics-in-open-source-2022/wiki/lab-3#step-1-pick-your-features) our professor provided, and the two that I chose were:
Feature #1: Add an optional `-l`, `--lang`, and/or `\l`, which indicates the language to use when generating the lang attribute on the root `<html>` element.
Feature #2: Add support for a horizontal rule in `Markdown`. The `Markdown` `---` should get converted to an `<hr>` tag.

### Procedure 
**Issues**
After determining the features I'm going to add. I made up 2 Issues for my features.

[Issue #8](https://github.com/LostButton/my-button-ssg/issues/8): Add an optional `-l`, `--lang`, and/or `\l` flag.

[Issue #9](https://github.com/LostButton/my-button-ssg/issues/9): Add support for converting `Markdown` `---` to an `<hr>` tag.

**Create Topic Branches**
The following step is creating two branches [issue-8](https://github.com/LostButton/my-button-ssg/tree/issue-8) and
[issue-9](https://github.com/LostButton/my-button-ssg/tree/issue-9) of my issues so that I can work on them separately. And they won't impact each other or the original branch that my SSG located.

Here is the code I used for creating branches:

```
$ git checkout master
$ git checkout -b issue_#8
$ git checkout -b issue-9
```

**Commit & Merge**
And then I updated my code git add and committed them git commit to the specific branch I created. And the last step was merge them to the original(master) branch I have.
Just simply with the code:

```
$ git checkout master
$ git merge issue-8
$ git merge issue-9
```

### My Feelings
This is a simple lab for me. It doesn't have a lot of requirements and I don't need to work on other people's code which saved me a lot of time to understand the different logic or language. Lab 3 gained me a good experience working on GitHub Merge. I can see why merging on a large scale project can be useful.
Hotel Booking App Using The MERN Stack With TypeScript
Tags: typescript, javascript, react, node
Published: 2022-09-27 19:23:36

# HotelBooking

Hotel Booking App Using The MERN Stack With TypeScript & Redux 🤩

![screenshot](https://i.ibb.co/5Fprvgc/roomhotel.png)

## Features:

- Room reviews and ratings
- Room pagination
- Room search feature
- User profile with bookings
- Admin Room management
- Admin User management
- Admin Booking management

## Technology Stack:

- TypeScript
- Node js
- Express Js
- MongoDB
- JWT
- React
- React Bootstrap
- Redux
- React Paypal Button V2

Repo Github : https://github.com/saidMounaim/hotel-booking
Day 7-8: webauthn library pimped up
Tags: 100daysofcode, devjournal
Published: 2022-09-27 19:12:03

Writing some code is one thing. Making it available as a nice library, packaging it, with documentation, examples, tests, nice error messages... is really a bigger task than just writing the "functionality". Again, I underestimated how much time and effort it takes to make things "nice" while pimping up my "passwordless authentication" package.

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


It's halfway there. The package now works properly, there is a CDN, a nice readme, better docs, examples, a playground to interact with the protocol directly... It's actually not really new. It already existed before, I just ripped off the playground from the main site and rewired it to use the new library instead. Luckily everything worked fine.

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

However, as I said, it's only halfway there. After moving the repo to its own organisation (to https://github.com/passwordless-id/webauthn ) I probably still have a few links to fix in the docs, the examples and various settings and build stuff. Hopefully it will all be cleared soon. The docs could welcome some more love too and tests would be nice but time is scarce. Let's hope this package can be wrapped up by the end of the week, so that next week can be started freshly, to better focus on the next topic.
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2022-09-27 19:08:36

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week
tags: icymi 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 

## Quiet Quitting is About Loyalty

@codenameone takes a balanced, thorough look at quiet quitting and points to loyalty as the primary source in this well written editorial.

{% embed https://dev.to/codenameone/quiet-quitting-is-about-loyalty-1d6m %}


## Debunking Myths about HTTPS

HTTPS is being used everywhere, but do you know what problem it was made to solve? Find out with @jmau111!

{% embed https://dev.to/jmau111/debunking-myths-about-https-f2k %}


## Optimizing for Performance

We see exceptions constantly during development and support of applications. Some of them we expect, and some we haven't even thought about. The worst thing you can do as a programmer is not to think about catching and tracking errors. Let’s find out how to with @frezyx.

{% embed https://dev.to/frezyx/exception-handling-and-logging-in-dartflutter-talker-25o4 %}


## Travel Tips for Dev Advocates 

Are you hitting the road as a dev advocate? Check out these 8 awesome travel tips courtesy of @xomiamoore.

{% embed https://dev.to/xomiamoore/8-travel-tips-for-developer-advocates-and-other-tech-roles-478i %}


## Entity Relationship Diagrams

Think about how your favorite e-commerce platforms process millions of orders from millions of people around the world by the second. Wild, right? Learn about the models they use to do so with @themfon.

{% embed https://dev.to/themfon/entity-relationship-diagrams-3963 %}


## Generate a QR Code with Python

Have you ever wondered how QR codes work or how procedural images are generated? Have you ever wanted to send someone a website link in a much cooler way? If you said yes to any of these questions, @bobliuuu has your back!

{% embed https://dev.to/codedex/generate-a-qr-code-with-python-386m %}


## 7 Array Methods with Animations

It can be tricky to memorize all the different array methods, so check out these seven helpful animations created by @fredysandoval!

{% embed https://dev.to/fredysandoval/ill-teach-you-7-array-methods-with-animations-549c %}



_That's it for our weekly Top 7 for this Tuesday! Keep an eye on dev.to this week for daily content and discussions...and be sure to keep an eye on this series in the future. You might just be in it!_
Recoil prevent UI blocking
Published: 2022-09-27 19:00:31

I'm using recoil and I have a heavy/time consuming operation which blocks the UI until it is done. In redux, we use saga for side effects to prevent UI blocking. How this can be achieved here?

Currently, I have this state:
```
export const clientsState = atom({
  key: 'clients',
  
  default: {},
  effects: [
    ({ setSelf, onSet }) => {
      onSet((seed) => {
        for (let i = 0; i < 100; i++) {
          console.log(i);
          // Time consuming operation
          const clients = createClients(seed as string);

          setSelf(clients);
        }
      });
    },
  ],
});
```

and it takes a good amount of time to complete and unblock the UI.
VS Code ext dev add terminal profile
Tags: vscode
Published: 2022-09-27 18:46:35

Hi, i have a custom terminal with the PseudoTerminal interface of the vscode api baked into my extension. Now i want to add it for UX reasons to the UI of vscode (the terminal dialog where you can select a profile like "Powershell", "Bash", "F# interactive" and so on...). I tried to register my PTY via the TerminalProfileProvider but it does not show up in this menu. Any idea or tips how i can do this?

Thanks in advance
Hiring the best developers is a mistake.
Tags: teambuilding, leadership, management, startup
Published: 2022-09-27 18:45:43

Declaring, during an interview introduction, that “we are building the best team in class” is as unrealistic as saying “we are building the next Google of the current generation”. Such a statement, if said seriously, is an indication of an inevitable failure.

Let’s think for a second about the definition of a start-up.

> Start-up is a company in the initial steps of business

It means

- Not-existing or a very early form of a product.
- Zero or a deficient number of clients.
- Financial resources are very limited. Depending on the stage, the company may be covered by as much as 2 years of funding.
- There’s no business and no legal structure.
- There is no well-defined development process.
- Leadership is not settled on goals and management style.

Considering all these, you will be constantly running against disappearing time and money resources.

“**Writing the best code**” becomes much less relevant than “**taking care of tasks fast**” or “**being able to work independently**”.

Keep in mind that many team members will be involved in demo meetings, research sessions, and POC development. In order to do it, people have to **understand the company's business**, be able to **efficiently present** the product as well as **communicate **troubles and bottlenecks.

Investing your energy in looking for the best developers will not be possible.

So whom should you hire then?

Below are the characteristics you should be looking for

- Understanding of the company business (or willingness to understand)
- Ability to work independently
- Good communication skills
- Solid development background
- Compliance with the culture (current and the future). Yes, you have to envision and go for the culture from day 1.
- Passion. Anything is relevant. It can be either a hobby or a life lesson. The person that is able to get excited about a hobby, is capable to get excited about the work.
- Long-term potential. This goes both directions - willing to grow and learn with the company and willing to see this person thrive through the company's success.
- Being able to receive and deliver feedback.

You will not be able to quickly find people with all the mentioned functions. 3-4 abilities are enough for the start. You, as a manager, have to identify and understand what are the missing characteristics and how they should be mentored.


PS.

In the picture is the 1924 US Olympic Boxing Team.
That year the team took first place with 6 medals.

![1924 US Olympic Boxing Team](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frycw9e45kzpeqll9i7w.jpg)
[Solved] Package xkbfile was not found in the pkg-config search path
Published: 2022-09-27 18:27:08

![Figure 1: Beautiful Autumn Scenery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ftzbmkk4hou8czkgk5y.jpg)

## Problem:

Running into the following error when trying to build [monaco-editor](https://github.com/microsoft/monaco-editor) from source(on the `yarn` command step)on an Ubuntu VM:

```
Package xkbfile was not found in the pkg-config search path.
Perhaps you should add the directory containing `xkbfile.pc'
to the PKG_CONFIG_PATH environment variable
No package 'xkbfile' found
gyp: Call to '${PKG_CONFIG:-pkg-config} x11 xkbfile --cflags | sed s/-I//g' returned exit status 0 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/home/sean/.nvm/versions/node/v16.17.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16)
gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Linux 5.15.0-48-generic
gyp ERR! command "/home/sean/.nvm/versions/node/v16.17.0/bin/node" "/home/sean/.nvm/versions/node/v16.17.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/sean/Documents/JavaScriptApplications/vscode/node_modules/native-keymap
```

## Solution:

This error should be resolved by installing the missing package like so:

```
sudo apt-get install libxkbfile-dev
```

## Conclusion

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you if I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter ](https://twitter.com/SeanAtukorala)and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/) and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).
[Solved] Package x11 was not found in the pkg-config search path
Published: 2022-09-27 18:26:07

![Figure 1: Beautiful Autumn Scenery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1wkoejx33lknlwbioyq.jpg)

## Problem:

Running into the following error when trying to build [monaco-editor](https://github.com/microsoft/monaco-editor) from source(on the `yarn` command step) on an Ubuntu VM:

```
Package x11 was not found in the pkg-config search path.
Perhaps you should add the directory containing `x11.pc'
to the PKG_CONFIG_PATH environment variable
No package 'x11' found
Package xkbfile was not found in the pkg-config search path.
Perhaps you should add the directory containing `xkbfile.pc'
to the PKG_CONFIG_PATH environment variable
No package 'xkbfile' found
gyp: Call to '${PKG_CONFIG:-pkg-config} x11 xkbfile --cflags | sed s/-I//g' returned exit status 0 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/home/sean/.nvm/versions/node/v16.17.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16)
gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Linux 5.15.0-48-generic
gyp ERR! command "/home/sean/.nvm/versions/node/v16.17.0/bin/node" "/home/sean/.nvm/versions/node/v16.17.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/sean/Documents/JavaScriptApplications/vscode/node_modules/native-keymap
```

## Solution:

This error should be resolved by installing the missing package like so:

```
sudo apt-get install libx11-dev
```

## Conclusion

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you if I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter ](https://twitter.com/SeanAtukorala)and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/) and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).
[Solved] Package libsecret-1 was not found in the pkg-config search path
Published: 2022-09-27 18:25:07



![Figure 1: Beautiful Autumn Scenery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nilpnemmopnrcli8d65.jpg)
## Problem:

Running into the following error when trying to build [monaco-editor](https://github.com/microsoft/monaco-editor) from source(on the `yarn` command step) on an Ubuntu VM:

```
Package libsecret-1 was not found in the pkg-config search path.
Perhaps you should add the directory containing `libsecret-1.pc'
to the PKG_CONFIG_PATH environment variable
No package 'libsecret-1' found
gyp: Call to 'pkg-config --cflags libsecret-1' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/home/sean/.nvm/versions/node/v16.17.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16)
gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Linux 5.15.0-48-generic
gyp ERR! command "/home/sean/.nvm/versions/node/v16.17.0/bin/node" "/home/sean/.nvm/versions/node/v16.17.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/sean/Documents/JavaScriptApplications/vscode/node_modules/keytar
```

## Solution:

This error should be resolved by installing the missing package like so:

```
sudo apt-get install libsecret-1-dev
```

## Conclusion

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you if I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter ](https://twitter.com/SeanAtukorala)and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/) and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).
JavaScript Template Literals
Tags: javascript, webdev, beginners, programming
Published: 2022-09-27 18:10:00

## Introduction
Template literals, or also known as template strings, allow us, the developers to use strings or embedded expressions the form of a string.

## Back-Tick syntax
Template Literals use back-ticks(`` ` ` ``) rather than quotes ("") to define a string
```javascript
let text = `This is a Template Literal`
```
With template literals, you can use both, single quote ('') and double quotes ("") inside a string
```javascript
let text1 = `This is a string with 'single' & "double" quotes in it.`
```
The template literals not only make it easy to include quotations but also make our code look cleaner
```javascript
// Template Literals also make it easy to write multiline strings.
let text = `Practice
is the key 
to success`
```

## Interpolation
Template Literals provide an easy way to interpolate variables and expressions into strings. The method is called string interpolation.
The syntax is ${...}
```javascript
const name = 'Mursal'
console.log(`Hello ${name}`)
// Output => Hello Mursal

const result = 1 + 2
console.log(`$(result < 10 ? 'Less' : 'More'}`)
// Output => More
```

## HTML Templates
Let's explore the code below, and comment down with the output 😜
```javascript
let header = "Template Literals"
let tags = ["HTML", "CSS", "JavsScript"]

let html = `<h2>${header}</h2></ul>`

for (const tag of tags) {
     html += `<li>${tag}</li>`
}

html += `</ul>`

document.querySelector("body").innerHTML = html
```
Pivot.
Tags: career, beginners, webdev
Published: 2022-09-27 18:05:14


My name is Binh and I am currently living in Hawaii. I am 25 but let me give you a brief prologue about my life. I attended Penn State straight after high school and intended to study compsci. After a year and a half, I had to return home due to money issues and an unwillingness to take out a loan. As a result, I came back home and decided to pursue my other passion; cooking. Being that my family was heavy in the restaurant industry, I thought it made sense, thus spending the next 5 years graduating from culinary school, working in various fine dining restaurants, and ultimately becoming a sous chef. Throughout all those years of constant stress working on my craft, I would always think, "What if I put this amount of effort into what I originally intended?". Starting in December, I will be attending a coding boot camp at the University of Washington with little to no experience but with a passion and drive to learn and **never to wonder what if again**.