teleren/devto huggingface dataset:
Why Do I Love IT | Happy New 2022
Tags: christmas, software, it, career
Published: 2021-12-21 14:53:36

{% youtube SnshcklBC74 %}
We always talk about professional topics and share our experience, but today’s episode will be special. Now it is Christmas time - time to be more thoughtful to people around us. Let's talk to our IT people and get to know what they love in their jobs and say smth as an IT person ❄️ 

Watch our short Christmas episode on [Frontend House](https://frontendhouse.com/experts-zone/why-do-i-love-it-or-happy-new-2022) website.

Frontend House team wishes you health, peace of mind and inspiration in new 2022 and always! ⛄
Forbidden, Unauthorized, or What Else?
Tags: security, programming, performance
Published: 2021-12-21 14:51:03

#### How to use HTTP status code in the authorization context? When to use the “401 Unauthorized" status code? When to use "403 Forbidden"? Let's try to clarify.

### <br>

Assume your Web API is protected and a client attempts to access it without the appropriate credentials. How do you deal with this scenario? Most likely, you know you have to return an HTTP status code. But what is the more appropriate one? Should it be `401 Unauthorized` or `403 Forbidden`? Or maybe something else?

As usual, it depends 🙂. It depends on the specific scenario and also on the security level you want to provide. Let's go a little deeper.

If you prefer, you can watch a video on the same topic:

{% youtube WV0cZ65EVig %}


## Web APIs and HTTP Status Codes

Before going into the specific topic, let's take a quick look at the rationale of HTTP status codes in general. Most Web APIs are inspired by the [REST paradigm](https://en.wikipedia.org/wiki/Representational_state_transfer). Although the vast majority of them [don't actually implement REST](https://dzone.com/articles/please-dont-call-them-restful), they usually follow a few RESTful conventions when it comes to HTTP status codes.

The basic principle behind these conventions is that **a status code returned in a response must make the client aware of what is going on and what the server expects the client to do next**. You can fulfill this principle by giving answers to the following questions:

- Is there a problem or not?
- If there is a problem, on which side is it? On the client or on the server side?
- If there is a problem, what should the client do?

[Read more...](https://auth0.com/blog/forbidden-unauthorized-http-status-codes/?utm_source=content_synd&utm_medium=sc&utm_campaign=authorization)
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-12-21 14:49:39

---
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._  

## Remote pairing tips

@felvct has some great tips for making your remote pairing sessions as productive as possible — super helpful in these times of remote work and social distancing!

{% link https://dev.to/felvct/get-the-most-out-of-your-remote-pair-programming-sessions-2l7g %}

## "Happy engineers are more productive" 

@apkoponen has been in IT for 10 years and picked up a _few_ tips along the way. 

{% link https://dev.to/apkoponen/100-tips-on-software-developer-productivity-36if %}

## Avoiding tutorial hell

Do you have some spare time to develop a project? @yuridevat has a great framework for figuring out what to build. 

{% link https://dev.to/yuridevat/how-i-come-up-with-project-ideas-and-never-faced-tutorial-hell-3287 %}

## Gotta catch 'em all!

@fidalmathew shows us how to build a Pokedex using React.js. Super cool!

{% link https://dev.to/fidalmathew/build-pokemon-finder-using-react-and-pokeapi-5b5k %}

## Getting closure with Javascript

In this post, @aruna presents a great primer on closures in JS and their purpose.

{% link https://dev.to/aruna/the-wacky-world-of-closures-what-makes-them-useful-24a7 %}

## The power of GraphQL & APIs

@whitep4nth3r shows us how to get data from a GraphQL API (and shares some helpful definitions along the way). 

{% link https://dev.to/whitep4nth3r/an-introduction-to-graphql-and-how-to-use-graphql-apis-13i %}


## Showing the world your skills when GitHub is not an option

@deleteman123 wrote this post for anyone who lives in a country that is unable to access GitHub. Nobody should be excluded from getting noticed as a developer just because of US export laws! 

{% link https://dev.to/deleteman123/how-can-you-get-noticed-without-a-github-account-2h1h %}




_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
7 must-have features for a low-code internal tools builder
Tags: webdev, showdev, ui, development
Published: 2021-12-21 14:48:03

Low-code market competition is rising, new tools are appearing. It's becoming harder and harder to choose an appropriate tool for your needs.

We've compiled the list of the 7 most essential features a powerful low-code internal tools builder must have. 

[Check it out](https://uibakery.io/post/top-features-of-visual-internal-tools-builder?utm_campaign=ui_bakery%20-%20article%20-%20blog%20-%20cacq%20-%20lowcode_features%20-%20views&utm_source=DevTo&utm_medium=webdev&utm_content=article_release)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4c48k5mbrbdg9h3pwng.jpg)
Display web camera on canvas element
Tags: javascript, webdev, programming, beginners
Published: 2021-12-21 14:45:22

Lets view the video stream from web camera on canvas so we can benefit from canvas capabilities (text on video ,add filters and more).

**Basic html**

{% gist https://gist.github.com/EneasLari/536c5c7c79ee6a10da91e52cec5ce85f file=index_1.html %} 

Create a javascript file `index.js` and add a reference to the html at line 15:
```
<script src="index.js"></script>
```

Next we will create a video element which will be hidden because we want to view the canvas element:
```
<video autoplay playsinline webkit-playsinline muted hidden id="videoelement"></video>
```
Now lets add a canvas element inside a bootstrap container:

```
    <div class="container">
        <canvas id="canvaselement" width="1920" height="1080"></canvas>
    </div>

```

The final html:
{% gist https://gist.github.com/EneasLari/536c5c7c79ee6a10da91e52cec5ce85f file=index.html %} 

Now that we have a bootstrap html template lets add javascript:

{% gist https://gist.github.com/EneasLari/536c5c7c79ee6a10da91e52cec5ce85f file=index_1.js %}

**Code explanation**

- At line 9 we prompt the user for permission to use camera and microphone

- If the user accepts then at line 10 the `gotStream` function is executed.

- `gotStream ` add as source of video the stream of camera and microphone

- If the user denies the permission or stream is inaccessible then at line 11 we prompt the user to reload the page in order to try again

Now that we added the video element and we set the stream of camera to the video element lets add a canvas that will display frames of video:

{% gist https://gist.github.com/EneasLari/536c5c7c79ee6a10da91e52cec5ce85f file=index.js %}

- At line 30 we draw at canvas context an image

- At line we call 32 we call [window.setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp) to draw a frame of video every 1000/60 milliseconds

In the next article we will add filters, texts and we will edit video

[Source Code](https://github.com/tzagiollari/display_video_on_canvas_element)

Thanks for your time.
Leave a question or comment below.
From 0 to 100 users in 5 weeks
Tags: saas, startup, analytics
Published: 2021-12-21 14:40:18


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

Hey 👋🏻

We've just reached our first milestone of **100 registered users** and I'd like to share briefly how we got here.

### Week 1

We opened [Raport](https://raport.pro) beta to public on **17 November**.

Around **20 November** we sent emails to our waiting list subscribers. There were around 60 subscribers on that list. Not everyone decided to sign up. I expected more sign ups from people that seemed genuinely interested in the product but it's just another learning for us.

### Week 2

We've been posting and commenting on Indie Hackers, ProductHunt, Reddit etc. We've also tried a bit of direct outreach through Reddit and email. Direct outreach had the highest conversion rate but was the least scalable. Indie Hackers and Reddit were our primary sources of visits.

On **30 November** we've published a fairly good post on Indie Hackers. It was very loosely related to our product but still resulted in some new sign ups.

### Week 3

We introduced new features to Raport on **7 December**. We've also kept posting and informed people on our waiting list about newly released features.

### Week 4

On **9 December** we've published a popular post on Reddit and Indie Hackers. You can see the biggest growth in sign ups here.

### Week 5

We were quite sluggish in terms of marketing and we didn't publish any good posts.

We've focused more on the product. We've been working on new integration with Stripe and some really cool updates. The Stripe integration has been quite challenging but should be worth the effort. We've also started working on our pricing.


As you've probably noticed, we didn't use any big launching platforms like ProductHunt or Beta list. We will launch there soon. First, we wanted to make sure that our product performs well. Also, having some users before launching there should give us an opportunity to have more support on launch day. Hopefully this approach pays off.
JavaScript Topic
Published: 2021-12-21 14:35:30

## **JavaScript Shift : **

In JavaScript this method removes the first element from an array and returns the removed element. Shift() method mostly used to sort an array. 

> Syntax of JavaScript Shift Function:

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

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


_Here this code removes the first word ‘hasan’ from the array._

## **JavaScript Slice: **

This function returns a slice object. This method returns a shallow copy of  a portion of an array into a new array object selected from start to end.

> Syntax of JavaScript Shift Function:
> ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6jsqz6kucsq1l7vfblh.png)

> Example:
> ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa224fkr7hedlyt14423.png)
_Here this code starts a slice from index 3 means (l) and ends index 10._


## **JavaScript Spread Operator: **

This function allows an iterable to expand in places where 0+ arguments are expected. Mostly used in the variable array where there are more than 1 values are expected. In JavaScript we use it to copy the full array and add it with a new array.

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

_In this code ‘tom’ will be added with a full ‘data’ array._


**

## JavaScript Reduce:
**

The method executes a reducer function for array elements. The reduce() method returns a single value. Normally we can tell this function will add total value in a single value.

Example:

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



_This code returns answer 6._

**

## JavaScript template string:
**

This function is a powerful feature of ES6. It is mainly called Literals. It added two parts into a string. It is mainly used to connect multiple lines into a single line. Before the release of ES6 it was difficult to use but now we can do that very easily.

> Example:
> ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0ee9qdun4pkkctwnxw5.png)
Stan Lee’s Chakra The Invincible, A First-Ever Indian Superhero Is Now As NFTs
 

Tags: nftdrops
Published: 2021-12-21 14:07:15

The late Stan Lee is known for the co-creation of comic characters like Spider-Man, X-Men, Iron-Man, Thor, Fantastic Four, Black Panther, Black Widow, Daredevil, Doctor Strange, and many popular ones. 

Chakra The Invincible is the last superhero from his creations, which is the Indian character that was co-created by him. It was released as a novel and later aired as a series on Cartoon Network in 2013, which was produced by POW Entertainment and Graphic India. It was supposed to be released as a movie, and unfortunately, it hasn’t been accomplished because of the demise of Stan Lee in 2018. 

Bringing this, Chakra The Invincible turns out to be NFTs which is yet to be dropped by BeyondLife.club powered by GuardianLink.io in teaming up with Orange Comet. The Chakraverse NFT collection drop auction is to be started on December 27, 2021 and ends on December 30, 2021.
  
An exclusive collection of the Chakraverse NFT comprises the following. 

Chakra Artpunks Loot Box 
Chakra Artpunks 
Animated Living Comic Book Cover
Comic Book Covers 
Seven Chakra’s Powers
Animated NFT Videos
Stan Lee B’day Special NFTs

The detailed information regarding the Chakra The Invincible NFTs is available on [https://chakra.beyondlife.club/?fsz=home](https://chakra.beyondlife.club/?fsz=home).

Are you comic fans or NFT enthusiasts who wish to join the auction? You can forge ahead with pre-registrations by clicking the Join The Waitlist button available in the BeyondLife.club.
Basic Linux Commands
Tags: linux, cloudskills, devops, cloudnative
Published: 2021-12-21 14:05:53

**pwd** - to display the current working directory

**ls** - shows all the files and folders in a directory

**cd [directoryname]** - to switch into a directory 

      cd python-project

**mkdir [directory name]** - to make a new directory

    mkdir machine-learning

**touch [file name]** - to make a file

    touch output.txt

**rm** - to delete a file 

    rm output.txt

**rm -r** - to delete a directory and all the files within it

    rm -r python-project

**clear** - to clear the terminal screen

    clear

**cd [full path from the root]** - can navigate to any folder, but path must start from the root / (default root)

    cd /home/user1

**ls [full path from root]** - show the content of the directory

    ls /home

**mv [filename] [new filename]** - to rename a file

    mv user1 new-user

**cp -r [file to be copied] [copy file name]** - to make a copy of the directory or file

-     To copy a directory

`cp -r folder1 folder 2 `

-     To copy a file

`cp file1 file 2 `

**ls -R** - to display the contents within the subfolders of a given folder

    ls -R python/root

**history** - to see the list of  the commands you have used  previously

     history

**Ctrl + C** - to kill a command execution in the terminal

   Ctrl + C

**Ctrl + shift + V** - to paste a copied text in the terminal

    Ctrl + shift + V

**ls -a**  -  to show all the hidden files

    ls -a 

**cat** - to show the contents of a file

    cat
Automated Selling on Amazon and Magento 2
Published: 2021-12-21 13:38:02

Amazon automation is always beneficial, regardless of how big or little your Amazon business is.

We all know how irritating it is to wear numerous hats, whether you're starting from zero or expanding your product range. Automation will aid in the management of various projects, allowing you to expand your business.

if you are magento seller, selling on amazon could be you hectic task and managing tonnes of products and orders makes it.so Connect the amazon marketplace with a Magento store. With[ Amazon Magento integration](https://cedcommerce.com/magento-2-extensions/amazon-magento-2-multichannel-integration?utm_source=dev.to&utm_medium=sonker), makes selling process very easy

#Amazon Magento 2 Integration

Connect your Magento 2 store to Amazon's online store. Increase your revenue by reaching out to more potential clients by enabling extra selling sources. From the Magento 2 admin panel, sync the data and manage inventory and orders.
>> Upload products to the Amazon account in bulk and vice versa
>> Synchronize orders and manage them from one grid
>> Set rules to update prices automatically via cron
>> Notify your admins about a low stock
>> Benefit from Fulfillment by Amazon (FBA)

#What are the Benefits of Marketplace Integration Extension?
**Reduces manual selling process:**
The eCommerce marketplace integration trims down the complicated process by eliminating most of the manual activities. It streamlines the whole process by automating the entire workflow including activities such as product upload, order management, figure updates, etc.
**Secure and Fast Data Transfer:**
Because all of the platforms' APIs are connected in real time, data flow between them is not only quick but also safe. A validation is conducted on each data transfer call. The eCommerce connector reduces all friction in the data flow from marketplaces to stores and inventory, lowering the risk of errors.
**Saves time and effort:**
This connection saves the seller a lot of time and work by simplifying the selling process. Instead of being involved in the store, sellers can concentrate on other vital matters.

Make you selling process automatic through above integration
Camera Panasonic Lumix DC-GH5 Body
Tags: actioncamera
Published: 2021-12-21 08:21:17

**## The Panasonic Lumix DC-GH5 Body [digital filim camera](https://www.shotecamera.com/10-recommended-digital-film-camera/) is a budget multifunctional gadget for videographers and photographers**

It is the first general purpose camera that can capture anamorphic video. In terms of its functionality, it is close to professional video equipment. The 3.2-inch LCD touch screen is equipped with a swivel mechanism.

## Camera stabilization system Panasonic Lumix DC-GH5 Body
 The effect of "shaking hands" is completely eliminated thanks to the five-axis double stabilization system. It removes all distortion, including vibration caused by the click of the shutter. Gyroscopes remove the slightest vibrations for clear images with excellent sharpness. And a video scene in 4K mode can be recorded without a tripod, without fear of deterioration in picture quality.

## Enlarged viewfinder
The Panasonic Lumix DC-GH5 [action camera](https://www.shotecamera.com/canon-eos-90d-and-action-camera-flashlight-review/) Body uses a Live View OLED viewfinder. Its resolution is 3.68 megapixels. It is convenient to shoot with it even under the bright sun, as there are no reflections and halos. It has a 0.76x magnification that allows you to see the finest detail of an object.

## Ergonomic design of the Panasonic Lumix DC-GH5 Body

The new mirrorless camera has a comfortable grip. Rubberized pads on the metal body prevent the device from slipping out of the hands. The camera is protected against dust and moisture. It can also be used without problems in the winter season at temperatures down to -10 degrees. For ease of focusing, manufacturers have added a joystick. On the right side there are two slots for SD memory cards and a connector for a wired remote control. On the left are the USB port, headphone or microphone jack and HDMI jack. All of them are protected by rubber plugs. Under the bottom there is a compartment for the battery, but there is also the possibility of connecting an external battery. For its weight of 660 grams, the camera has a relatively compact size - 13.9 x 9.8 cm and 8.7 cm.

## **High speed die**
The Panasonic Lumix DC-GH5 Body is equipped with a Digital Live MOS sensor. It has a resolution of 20.3 megapixels. Due to the fact that the low-pass filter is removed, it is possible to obtain an unusually clear image without distortion. The use of the new Venus Engine 10 module made it possible to optimize the image, transfer the natural texture and the smallest details of objects. The color is automatically adjusted in three dimensions. This preserves the naturalness of colors in the light and dark areas of the images.
How to deal with temporary files - project
Tags: javascript, node, windows, productivity
Published: 2021-12-21 13:23:25


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

Have you ever used a low spec computer? Was it slow? You checked system resources, and there was not that much room for improvement?

Well, did you check all the temporary files? Do you know what temporary files are in the first place?

**What are temporary files? **
> As the name suggests, temporary files are the kind of files that store temporary data that is created by Windows itself or the programs that users use. These files help the computer runs smoothly when you use related programs or tasks. They are also known as foo files and it has .temp as an extension

> When you are using some editing software related to media, graphics, or text writing there will be temporary files created for your work in progress. Not only do these files will help your program to run faster and smoother, but they also help create a recovery backup in case your system or program shut down unexpectedly..

*Source: 
https://appuals.com/what-are-temporary-files-and-is-it-safe-to-delete-them/*


Temporary files, if in excess, can make your computer slow. And as I mentioned previously, if you are using a low spec computer, they will slow it down!

Thinking of that, I decided to make a script using NodeJS to automatically clean those files and log some important data to discord. And used it at my school. To facilitate the work. Using nexe I decided to create a .exe file, so we wouldn't need to install NodeJS or any other applications. We did it on 2 / 3 hours and successfully installed the software on every school's computer. On the next day, there were some teachers talking about the slowness of the computers and one thing that they have said was: "I have no clue how, but school's computers are faster now.". We could definitely say that we did something good for our school

You can do it for yourself, either at work or at home, using my [GitHub repository](https://github.com/rubencosta13/Temporary-files-cleaner), where the source code is public. 

Everything is explained on the readme.md file Later on I'll do a video covering the installation of the software as well as some configurations.