teleren/devto huggingface dataset:
API vs. Webhook: What are the differences?
Tags: webdev, api, discuss, todayilearned
Published: 2022-10-31 05:01:29

I've been learning more about APIs and Webhooks recently. 

Here are three main differences I've found between the two.

But, first, let me explain what they mean.

API stands for Application Programming Interface. APIs act as a software intermediary that allows two applications to talk to each other.

A Webhook is an HTTP-based callback function that provides applications with real-time data based on events. They usually get sent as an HTTP POST request payload to the webhook's configured URL.

## 1 - The way they work

APIs are request-based. The client or application always has to make an  API request to get a response back from the API.

Webhooks are event-based. They get triggered whenever a specific event occurs in the source app.

## 2 - The flow of information

APIs deliver a two-way flow of information. The client initially makes a request to the API, and then the API sends a response back to the client.

Webhooks deliver a single flow of information. The client only receives data whenever an event is triggered.

## 3 - Their level of complexity
Designing and building an API could be challenging and requires more server resources than webhooks. 

On the other hand, Webhooks are easier to set up and less resource-intensive than APIs. 

Both APIs and Webhooks are standard methods of sharing data between applications. They have their uses and specific scenarios where either one works best.

&nbsp;

## Are there any more differences you'll like to share? 

Drop them as comments below 👇🏽
Normal vs Shallow vs Deep Copy in Javascript/Typescript
Tags: javascript, typescript, reactnative, react
Published: 2022-10-31 05:01:07

Hey everyone, just like my last article on [Difference between ? and ?? in JavaScript/Typescript](https://dev.to/saimwebhr/difference-between-and-in-javascripttypescript-f4d), I am motivated to write again to contribute something to the community. Today, we'll talk about how object copies work in Javascript/Typescript with code snippets.

Before starting, I would recommend you guys to look closely at this topic. Why? Because this thing causes a hell of a pain in the neck when dealing with **Nested Objects**. So let's get started.


## Normal Copy
Normal copy does not copy the value, but its instance or its memory address. If the copied instance value is updated, the original value is updated. Similar to **static** keyword in Java(If you know Java).

**Example**
```javascript
const original = { x: 0 }
const normalCopy = original;
normalCopy.x = 1; // also updates original.x
console.log(original.x); //prints 1
console.log(normalCopy.x); //prints 1
```


## Shallow Copy
Shallow copy copies the outermost object value and does not copy the nested objects. This means that the initial object values are copied while the nested ones are not copied by value but copied by reference.Ï

**Example**
```javascript
const user = {
  name: "John",
  contact: {
    home: "+12345",
  }
}
const shallowCopy = { ...user };
shallowCopy.name = "John Smith";// updates its own copy
shallowCopy.contact.home = "+999";// updates both original and copy

console.log(user);
console.log(shallowCopy);
//Output
//https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61n4uyvjpghid4kq0hdx.png
```


## Deep Copy
A deep copy copies the entire object with its nested objects and creates a new clone of it in the memory. 

**Example**
```javascript
const user = {
  name: "John",
  contact: {
    home: "+12345",
  }
}
const shallowCopy = JSON.parse(JSON.stringify(user));
shallowCopy.name = "John Smith";
shallowCopy.contact.home = "+999";

console.log(user);
console.log(shallowCopy);
//Output
//https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7lb0jbhds7nzk8gwlkh.png
```


Thanks for reading this article. Please do comment so that I can improve my content. Happy Monday.
Top Programming Languages For 2022
Tags: storybytes, opensource, technology, experience
Published: 2022-10-31 04:43:08


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

2021 is about to wrap up, and there is much excitement coming up. Based on this months survey from Stack Overflow Developer Survey 2019  , one of the largest and most comprehensive surveys of people who code around the world, we predict that in 2022 many programming languages will adapt to a new way of steering through this ever-changing Industry. The popularity amongst developers also gives a slight hint on what technology new solutions will be built on. At Web and App Studio, we have a great experience with practically all the languages cited, so we are confident that we will knock 2022 with the right solution.
The Quality Effects
Tags: storybytes, qualityassurance, team, motivation
Published: 2022-10-31 04:39:39


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

Behind each successful and high-quality product, a team of professionals works on maintaining and improving its quality standard and serving as a sentry against bugs and defects to stop them from getting to users. Like any team, a QA team is solid and successful once the product features, product motivation, and the common goal is clear. In Web and App Studio, all our QA Analysts join the project from day 1 to ensure the result will speak for itself - driven by quality. Investing in quality assurance is not only worthwhile but indispensable, particularly given today’s technical landscape.
Connect DBeaver to Snowflake via Okta SSO (flatpak / snap)
Tags: dbeaver, snowflake, sso, okta
Published: 2022-10-31 04:36:15

DBeaver flatpak/snap doesn't allow you to log into Snowflake via browser-based SSO ("externalbrowser"):

```text
The BROWSE action is not supported on the current platform!
```

If you happen to use Okta, you can use the ["Native SSO" feature](https://docs.snowflake.com/en/user-guide/admin-security-fed-auth-use.html#native-sso-okta-only).

Simply add `authenticator` driver property, with your Okta instance's URL:
i.e.:

![dbeaver driver properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2njwm92rbup7wtkz4fg.png)

Username (`Main` tab) would be your Snowflake username (i.e. `select current_user();)`.

Note browser-based SSO works with the `.deb` installer - but this method has the benefit of not spamming your browser with new tab every time dbeaver needs to re-authenticate.
Use Wifi.wavlink.com For Wavlink Extender Setup
Published: 2022-10-31 04:32:13

In order to ensure that the Wavlink Extender Setup process goes smoothly, you have to make sure that you are using a secure and strong internet connection. You should also take note of the web address [wifi.wavlink.com](https://wavlinkwiifi.com/) that you will need to be able to complete your setup. Now let’s take a look at the steps you will need to take to login into wavlink router .
How to Make Income Tracker in React
Tags: react, javascript, programming, webdev
Published: 2022-10-31 04:26:10

In this article, we will create an income tracker in react. Here we have some fields where user can write their income source, income and date. As user fill these, user clicks on button and data will be entered on list, and we update the total income. It is a very basic project to learn, not too much fancy but it will be good enough to make it.

This project won’t be too hard to do, but it will be very simple and easy to do. So let’s make this application step-by-step.

## Pre-requisites to Make Income Tracker in React
Basic knowledge of ReactJS.
Basic knowledge of CSS.
Basic knowledge of React props and hooks.
Good knowledge of React Components.

## Customizing App Component
Firstly, we will make some changes in App.js component. Here we have imported our required components like React, Header, IncomeForm, IncomeList and hooks which are going to help us to make this project. We will define Header, IncomeForm, IncomeList components as we progress in this project.

Now in App component, we have created two states, one for income and the other for total income with initial values null and 0 respectively. After that in return, we have made an App <div>, in which we have added all component with props. Here we have passed states as props because these values are going to change as user input them, and we can work with updated values.[Read More](https://reactjsguru.com/how-to-make-income-tracker-in-react/)
Hacktoberfest - Part 2
Published: 2022-10-31 02:25:32

For part 2, I decided to work on an issue to fix a bug in AppFlowy, an open-source note taking app. I found the project interesting, and it also happened to be built using rust. I have started to enjoy the features of rust and wanted to know how rust is used in developing applications. The bug I worked on was related to the [hover effect on an element disappearing in less than a second after it was hovered over](https://github.com/AppFlowy-IO/AppFlowy/issues/1345). The hover action also opened a popup, which I suspected to be the cause.

Thus, I began to setup the project on my local to investigate this issue. Setup was fairly simple, and I was able to replicate the issue locally. However, it took me a while to understand how the app was setup. The UI of the app was built using flutter, which I had not used before. It took me a couple of hours to understand the basics of the project, and how things were structured. Finally, I figured out the components which were causing the issues. 

From what I understood; what was happening is that whenever the mouse would move over the element, it would get the hover effect added, and some milliseconds later, the popup with options would get shown, resulting in the original element being rendered again. However, since the mouse did not move (i.e., re-enter the element), the onEnter hook would not trigger again, and the hover effect would not get added. 

To fix this, I tried to change the onEnter hook to onHover. Since the function already had a check to see if the hover effect was already applied (which would cause it to return immediately), I concluded that it would not cause any significant performance differences. This fixed the issue somewhat. It also resulted in the hover effect temporarily disappearing some milliseconds after the element was hovered over, and then coming back. I tried deleting the delay that existed to render the popup with the options and that fixed the issue. 
I tested to check if my changes broke any functionality. Since everything seemed good, I committed my changes, and created a [pull request](https://github.com/AppFlowy-IO/AppFlowy/pull/1403).
Azure Devops
Tags: azure, devops, webdev, programming
Published: 2022-10-31 03:45:52

Azure DevOps is a cloud-based set of tools and services for DevOps teams to plan work, collaborate on code development, and build and deploy applications. Azure DevOps helps organizations to automate software delivery and meet business objectives. 

Azure DevOps provides end-to-end traceability from idea to delivery. It helps developers to focus on coding, while Azure DevOps takes care of the builds, deployments, and monitoring. Azure DevOps is integrated with Azure, enabling organizations to take advantage of the scale and security of the cloud. 

Azure DevOps is flexible and extensible. Developers can use their preferred tools and frameworks, and Azure DevOps will integrate with them. Azure DevOps is also open source, enabling organizations to use it for free. 

Azure DevOps is a powerful tool for DevOps teams. It helps teams to collaborate, plan work, build and deploy applications, and focus on coding.
About OAuth 2.0
Tags: auth, webdev, opensource, security
Published: 2022-10-31 03:41:57

OAuth 2.0 is an open standard for authorization that enables applications to obtain limited access to user accounts on an HTTP service, such as Facebook, GitHub, and Google. It works by delegating user authentication to the service that hosts the user account, and authorizing third-party applications to access the user account. OAuth 2.0 provides a more streamlined and efficient way for users to grant third-party access to their resources while maintaining a high degree of security.

Compared to OAuth 1.0, OAuth 2.0 is much simpler and easier to implement. It also provides greater flexibility in terms of the types of applications that can be developed and the level of access that can be granted to third-party applications. For example, OAuth 2.0 enables developers to create applications that can be used to access resources on behalf of the user without the need for the user to provide their credentials to the third-party application.

OAuth 2.0 is not without its challenges, however. One of the primary challenges is ensuring that users are aware of the level of access they are granting to third-party applications. Another challenge is ensuring that the data accessed by third-party applications is kept secure.

Overall, OAuth 2.0 is a significant improvement over OAuth 1.0 and provides a more secure and efficient way for users to grant third-party access to their resources.
ThapTuChinh - 10 Game bài Đổi thưởng Uy tín nhiều Người Chơi Nhất Hiện nay
Published: 2022-10-31 03:05:56

Game bài đổi thưởng là một trong những lĩnh vực giải trí được đông đảo anh em quan tâm. Xu hướng giải trí online này với nhiều thể loại game khác nhau đã tạo nên làn sóng dữ dội. Tìm hiểu kỹ hơn về nội dung giải trí này trong bài viết sau đây nhé!

Khái niệm game bài đổi thưởng

Game bài đổi thưởng hay game đổi thưởng là một trong những trò chơi mang tính giải trí cao. Trò chơi giải trí này mang đến cho người chơi những phút giây vô cùng thoải mái và thư giãn.

Người chơi không chỉ được giải trí mà con có cơ hội nhận về những khoản thưởng hấp dẫn. Mỗi khoản thưởng tùy thuộc vào mức vốn mà người chơi đầu tư. Ngoài ra, mức thưởng này có thể quy đổi sang tiền thật nên anh em hoàn toàn yên tâm.

Đây cũng là lý do vì sao game đánh bài đổi thưởng luôn là sự lựa chọn hàng đầu. Anh em dễ dàng thực hiện đổi thưởng thông qua hình thức online. Chỉ cần có cho mình thiết bị kết nối internet đơn giản, tất cả nằm trong bàn tay anh em. Không những vậy, Đây là trò chơi mô phỏng hình thức đánh bài Online, cách thức và quy tắc chơi tương tự như các trò chơi truyền thống.

Các sản phẩm tiêu biểu cùng nhiều trò chơi khác nhau như: ba cây, phỏm, xì tố, tá lả,... Anh em xả láng chọn lựa cho mình đầu game yêu thích.

Top 10 game bài đổi thưởng uy tín nhất hiện nay

Có rất nhiều địa chỉ vui chơi game bài và đánh game bài khác nhau. Tuy nhiên, không phải địa chỉ nào cũng có thể tin tưởng và gắn bó. Anh em có tò mò trong hàng trăm cổng game khác nhau, tại sao có những cái tên luôn mang đến cho anh em chiến thắng vang dội?

Websie:https://thaptuchinh.com/
anybar - check if command has finished, succeed or failed
Tags: cli, linux, anybar, tools
Published: 2022-10-31 02:47:18

Original Article: https://opensrc.mx/posts/anybar/


Hey fox, with this post I will start writing in plain English.


Anybar it's a desktop-app what I have in my arsenal and I have used day by day.

There are versions for linux, windows and Mac.


It's like a semaphore that you can control, only sending colours to a port.

```
# Change the colour of an AnyBar
# Usage:
#   anybar <colour> <n>
#     Change the colour of the n'th AnyBar
#   anybar <colour>
#     Change the colour of this tab's AnyBar
#   anybar
#     Change the colour of this tab's AnyBar to white (resetting it)
function anybar() {
  local COLOUR=${1-white}
  local OFFSET=${2:-$(_anybar_iterm_offset)}
  local ANYBAR_PORT=$((1738 + $OFFSET))
  echo -n $COLOUR | nc -4u -w0 127.0.0.1 ${ANYBAR_PORT}
}

```

I used to manage the long execution commands and saw how long it takes:

```

# Monitor a long-running command using AnyBar
# This sets AnyBar to orange whilst the command is running,
# then to green or red depending on whether the command succeeded or not
#
# Usage:
#   alias m=anybar_monitor
#   s <some command>
function anybar_monitor() {
  if [ $# -eq 0 ]; then
    anybar white
  else
    anybar orange
    $@

    local EXIT_STATUS=$?
    if [ $EXIT_STATUS -ne 0 ]; then
      anybar red
    else
      anybar green
    fi
    return $EXIT_STATUS
  fi
}

```

With this small snippet I can execute a command and see the status of the command
from another desktop screen.

![anybar in Linux notify](https://i.imgur.com/zWrCxLW.png)

I like the minimalist approach of the command. Because with simple communication
you can create an excellent development approach like this:

* After a successful command you can play a sound with voice: "master your command
  was successful"
* Monitor your local server for  development:

```
    while true
    do
        (echo >/dev/tcp/localhost/"$1") &>/dev/null && anybar blue  || anybar exclamation
        sleep 1
    done
```

In my case, if the server stop listening it's because an exception was executed. I
need to check the output to see the problem.

Or you can go further:


![stripbar](https://camo.githubusercontent.com/15f986e49ce178f6775395dbedbad30f3fa240689ccd751628c238ba87724364/68747470733a2f2f7468756d62732e6766796361742e636f6d2f536c656570795361726361737469634375726c65772d73697a655f726573747269637465642e676966)

You can create your anybar strip and control the lights from commands.

https://github.com/htruong/stripbar


 and here My guahiro proyect:

 ![](https://content.instructables.com/ORIG/F89/L4RN/KLKVM0I7/F89L4RNKLKVM0I7.png?auto=webp&frame=1&width=887&fit=bounds&md=15feb5cc3c4ab909b8a1412bd53ee594)

https://www.instructables.com/Wireless-Arduino-Traffic-Light/

Who doesn't want this kind of semaphore when your CI didn't pass ?
Hacktoberfest - Part 1
Published: 2022-10-31 01:53:58

For the month of October for my course in Open-Source Development, we were instructed to take part in [hacktoberfest](https://hacktoberfest.com/), and thus create four pull requests throughout the month.

Since I had never contributed to the open-source community before, I decided to start with a smaller issue to [improve css on a page](https://github.com/Seneca-CDOT/telescope/issues/3535). The page had a list of dependencies, and my goal was to make the items in the list stand out more:

![Existing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh9lfff1dgi912upb2fr.png)

It was quite easy to come up with a plan - increase the font size, change the font to be the same as the rest of the text on the page, and make the border color slightly darker.

Since this was a css change, I started by navigating to the webpage, and used developer tools to change the css. This allowed me to immediately see the result without setting up anything. Soon, I ended up with this as the updated version of the page:

![Updated page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy55th6cgj34zmmrgkqc.png)

Thus, I began setting up the project on my local. I forked the repo, cloned it locally, and followed the environment setup instructions provided in the repo to set up the project locally. The setup went perfectly, and I was able to find the files I needed to modify easily due to the information provided in the issue (a link to a previous issue that resulted in creation of that page). I copied over the css changes from my browser, tested that they worked on my local setup, committed the changes, and created a [PR](https://github.com/Seneca-CDOT/telescope/pull/3702).

However, one of the project maintainers pointed out something that I found interesting - the new border style would not be applied consistently to all the elements. That is, some of the borders were rendering thicker than others. I tried to replicate this locally and found that depending on the screen size, the browser would render the width of the borders slightly differently:

![Inconsistent borders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cy8174e5177in8n78ba.png)

I later discovered that this happens if the border width is set using pixels as the units. I converted the units into `em` and was able to resolve the issue. But then I found that the border style would not apply for some elements on certain versions of browsers. Though as pointed to me by the project maintainers, this was pretty easy to resolve by adding the `!important` rule to the new style.
Introducing rails-generate.com: The quick and simple editor for Rails commands
Tags: rails, ruby
Published: 2022-10-31 01:50:39

---
title: Introducing rails-generate.com: The quick and simple editor for Rails commands
published: true
tags: rails, ruby
cover_image: https://rails-generate.com/image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-23 09:30 +0000
---

(This post was originally written in Japanese. You can read the original post [here](https://qiita.com/ttanimichi/items/a7dc65d3e623e06cc714))

I'm pleased to announce the release of [rails-generate.com](https://rails-generate.com/) that is a quick and simple editor for Ruby on Rails commands.

## Model

![rails g model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8we51eoqsp3yqnhupo4a.gif)

## Controller

![rails g controller](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4eqd7p5mz85avc27mpz4.gif)

## Advanced Options

![advanced options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1koz4zuyvde2tzmg6s7.gif)

## Conclusion

I hope you enjoy [rails-generate.com](https://rails-generate.com/). Have a suggestion or found a bug? Feel free to [let me know at Twitter](https://twitter.com/rails_generate).
Awesome!!! Simple Template HTML Website
Tags: html, beginners, webdev
Published: 2022-10-31 01:34:42

If you know [this](https://herisetiawan.vercel.app) website create by html and css only, simple and secure. Btw, there's any advantage and disadvantage website built with html and css only. But, in website the content is important then any others.

So you can get this template in [github](https://github.com/heriswn/index) and upgrade it in github if you want.