teleren/devto huggingface dataset:
Error boundaries in React
Tags: react, javascript, reacthooks, wwebdev
Published: 2021-12-28 14:40:03

Hello my dear reader, enjoy your stay reading today's content.

Let begin with knowing what error boundaries are. Simply, they are react components that catch errors from your code, log them and display the UI you set for error(fallback).

**How can this be of help to you?**
Whenever you have a break(💔) in your UI, this helps discover it and effect an action immediately. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.

Read more on error boundary on the react official website. https://reactjs.org/docs/error-boundaries.html

**How do you use it?**
You can implement error boundary in react hooks with the help of react-error-boundary package.

`npm install --save react-error-boundary`

 Then:
`import {ErrorBoundary} from 'react-error-boundary'`

```
function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}
```

```
const ui = (
  <ErrorBoundary
    FallbackComponent={ErrorFallback}
    onReset={() => {
      // reset the state of your app so the error doesn't happen again
    }}
  >
    <ComponentThatMayError />
  </ErrorBoundary>
)
```

Good news is this just the tip of an iceberg, read the full docs to see more awesome features
https://www.npmjs.com/package/react-error-boundary

There we have it for this trick and tips in React hooks.

If this blog post helps, kindly give it a like and share. Thanks.
Why should we care about the OSS community?
Tags: dotnet, news, motivation
Published: 2021-12-28 14:20:50

 Let’s be clear, open source software developers build the tools we all use. The world runs on GitHub’ s open source code, each of us uses its benefits, often unconsciously. In this blog, we are not going to focus only on code, because it is the result of someone’s work, and we would like to emphasize the value of work, and specifically of the people who do it. Without a team, even the most interesting project will not develop. For maintainers, participation in projects is often the realization of their passion. Who if not enthusiasts spread their passion and commitment with others! Thanks to them, the world takes color and flavor, regardless of the field in which they operate. However, while appreciating the work of the creator seems to be simple, because you can go to a concert or buy a book, appreciating someone whose work is not signed, causes more difficulties. Should ‘invisible’ work not be visibly appreciated? We thought for a long time how to solve this and honour those who work for the OSS community and launched **DotetOSS Grants**.

[![Dotnetos Grants](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/meqe7js9ugvqd7z355om.jpg)](https://dotnetos.org/initiatives/grants/)

 DotnetOSS Grants is a **six-month Github sponsorship**. Having in mind that it is difficult to convert passion into money, we found it a nice and universal way of appreciating the work that has been put into OSS development. In the dream world we would distinguish everyone in this way, but in reality we do not have such possibilities. Guided by our own opinions and observations, we selected a few people who made the greatest impression on us. Who are they and a little more about the entire initiative, you can read on our [website](https://dotnetos.org/initiatives/grants/).

 At the end we would like to **thank all who transform their ideas into code!** No matter your role on the project, you are changing the world, your commitment is inspirational for all of us.

**Dotnetos**
Generating time slots using moment.js with start time & end time range
Published: 2021-12-28 14:17:49

//Data
let x = {
  slotInterval: 30,
  openTime: '21:00',
  closeTime: '05:00'
};

//Format the time
let startTime = moment(x.openTime, "HH:mm");

//Format the end time and the next day to it 
let endTime = moment(x.closeTime, "HH:mm").add(1, 'days');

//Times
let allTimes = [];

//Loop over the times - only pushes time with 30 minutes interval
while (startTime < endTime) {
  //Push times
  allTimes.push(startTime.format("HH:mm")); 
  //Add interval of 30 minutes
  startTime.add(x.slotInterval, 'minutes');
}

console.log(allTimes);
Laravel 8 Stripe Subscription Tutorial Using Cashier Example
Tags: laravel
Published: 2021-12-28 14:01:53

Hello Friends,

In this tutorial, i am going to share with you how to integrate Stripe subscription using Laravel Cashier in laravel application. In this example, i will show you the example of stripe subscription using laravel cashier in laravel 8.


Laravel Cashier Paddle provides an expressive, fluent interface to Paddle's subscription billing services. It handles almost all of the boilerplate subscription billing code you are dreading. In addition to basic subscription management, Cashier can handle: coupons, swapping subscription, subscription "quantities", cancellation grace periods, and more.

In this article, i will show you laravel 8 cashier with stripe subscription. So Let's follow bellow step by step.

[Laravel 8 Stripe Subscription Tutorial Using Cashier Example
](https://www.codecheef.org/article/laravel-8-stripe-subscription-tutorial-using-cashier-example)
ci/cd with gitlab (part one)
Tags: git, deployment, devops, programming
Published: 2021-12-28 13:26:43

## In this article we try to just run a command from the pipline in our server

1. Make sure you can connect to your server via your ssh-key without requiring password.
2. On gitlab, go to your repository > settings > CI/CD > Variables
3. Add a new variable SSH_PRIVATE_KEY. The value is your ssh private key (e.g content of ~/.ssh/id_rsa)
4. Add the file below to your project

### .gitlab-ci.yml
```
before_script:
  - apt-get update -qq
  - apt-get install -qq git
  - "which ssh-agent || ( apt-get install -qq openssh-client )"
  - eval $(ssh-agent -s)
  - ssh-add <(echo "$SSH_PRIVATE_KEY")
  - mkdir -p ~/.ssh
  - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'

deploy:
  type: deploy
  script:
    - ssh root@123.123.123.123 "pwd && ls"
  only:
    - main

```
After that you need to run this command because You need to add the public key to the server so it would be recognized as an authentication key. 
```
cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
```
Just consider to change `root@123.123.123.123` the use and also the IP address.
Now if you push to the main branch it will run the pipeline and then run the command on your server :))
In the next article we use this to deploy our project to the server automatically

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

That is all
Choosing what not to write automated tests for
Tags: testing, test, testdev, beginners
Published: 2021-12-28 13:09:02

_This was originally posted on my personal blog: [nicolalindgren.com](https://nicolalindgren.com/2021/10/11/choosing-what-not-to-write-automated-tests-for/)_
 

While it’s important to make sure your test automation has good coverage, I think it’s also important to know under which circumstances you should not write automated tests.

In my opinion, when it comes to test automation, more isn’t necessarily better.

More tests don’t necessarily result in better coverage.

More tests don’t necessarily increase your chance of finding regression bugs.

More tests is just that. More tests.

When deciding what not to write automated tests for, I think it’s important to ask yourself a few things.


## 1. What is your goal with your test automation?
Be specific and realistic about your expectations.

Come up with some specific examples of the types of regression issues that could come up and would be found from the test automation you have in place.

The best part of having a clear goal for your test automation is that it will guide you in knowing when and when not to write tests.


## 2. When deciding to add tests weigh the benefits of having the test against the costs

Is your test likely to find issues? Do you already have a test/ tests in place that would catch the issue(s) your possible test is designed to find?


## 3. Is this area of the app/website looking to change soon? If so, is it worthwhile writing tests for this area now or waiting a little bit?

A factor to consider here is how considerable the changes are looking to be and how far in the future changes for this area of the app/website will be.

Do you also write test automation? What makes you decide whether a test is or is not worth adding to your test automation suite?

_If you want to read more interesting articles on testing, development, agile and automation, you can follow me on Twitter [@nicolalindgren](https://twitter.com/NicolaLindgren) 👋_

_If you want to read more about when you shouldn’t write Test Automation along with tips on how to get started learning test automation, [check out my upcoming eBook: Starting Your Software Testing Career – due out in January 2022.](https://leanpub.com/startinginsoftwaretesting)_
How I Create a Twitter Form In 3hours.
Tags: beginners, programming, tutorial, html
Published: 2021-12-28 13:02:56

Last night I decided to create something simple and fun, but what I should create is what I can't decide on. I have couple of unfinished projects I can work on but nah, I want something more intense and interesting.

This morning I saw Pratham(A developer)post on my timeline on twitter, I've been following him for a while and he's really good at what he does. I decided to check his @Codepen profile and see what I can be inspired to recreate and I did see a lot of beautiful work well done. 

I decided to recreate Neumorphic Form.

Here is the outcome https://codepen.io/Nobilitycodes/pen/MWErXJd, check it out and enjoy the view.
How to run React-Native app on mobile wireless
Tags: reactnative, beginners, codenewbie, 100daysofcode
Published: 2021-12-28 13:02:47

👋Hey,
Welcome 🙏 

This tutorial is about React-Native🚀.

When I started learning React-Native that time I used to run React-Native App on mobile through the USB Cable,
But the best way is to connect android mobile through wireless 📲 and run React-Native App.

🕸In this tutorial we will learn how to run React-Native App on real Device or android mobile wirelessly📲

 🎬let's Start,

🥇first thing make Sure your laptop/pc connected to wi-fi
then find the **IP-address**

👉How to find IP-address;

1.   Open the Activities overview and start typing Settings.
2.   Click on Settings.
3.   Click on Wi-Fi in the sidebar to open the panel.
4.   Click the settings for the IP address and more details on your connection.


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

You will get IP-address🎉

👇Next,

I hope you created a react-native app.
Use the following command to run the React-native app in android.

```
react-native run-android
```
after that you will get an error🚨:

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

simply shack the 📱device and it will open the Developer Menu.
click on settings⚙️

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

you will find the option 
⚒Debug server host & port for device📱
Click on it
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtescsmz3fet6iqk5wht.png)

Add your ip-address:8081

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


then go back to the app and reload the app 📲
🎉Congratulation your React-Native App runs wireless on the real device.


😻I hope this tutorial is helpful:)
Thank You ❤️🌸:)
List of Web Attacks
Published: 2021-12-28 12:56:16

This is a list of some types of attacks. The list is incomplete, the idea is to feed it based on your and other people's comments. If you know of any attacks that are not on the list or have already suffered from a comment here. 

There are many interesting stories and I'm sure it will serve as a warning for other people not to go through the same, I've suffered some attacks when I created a VPS, because I didn't worry about security the intruder broke in and was using my VPS to mine bitcoins.

1. [Injection](https://lifars.com/2020/04/injection-attacks-explained/#:~:text=An%20injection%20attack%20is%20a,in%20the%20OWASP%20Top%2010).
2. [Broken Authentication](https://owasp.org/www-project-top-ten/2017/A2_2017-Broken_Authentication).
3. [Sensitive Data Exposure](https://www.acunetix.com/blog/web-security-zone/sensitive-data-exposure/#:~:text=The%20term%20sensitive%20data%20exposure,kind%20of%20sensitive%20data%20exposure.).
4. [XML External Entities (XXE)](https://owasp.org/www-community/vulnerabilities/XML_External_Entity_(XXE)_Processing)
5. [Broken Access Control](https://hdivsecurity.com/owasp-broken-access-control).
6. [Security Misconfiguration](https://owasp.org/www-project-top-ten/2017/A6_2017-Security_Misconfiguration).
7. [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/)
8. [Insecure Deserialization](https://portswigger.net/web-security/deserialization).
8. [Null Byte Injection](https://www.whitehatsec.com/glossary/content/null-byte-injection)
9. [Bug Bounty Hunting](https://medium.com/techiepedia/guide-to-bug-bounty-hunting-dd5607142f78)
10. nonce, cookie __host, cache poisoning
How JavaScript gets Maintained
Tags: javascript
Published: 2021-12-28 12:28:11

---
title: How JavaScript gets Maintained
published: true
description: an explanation of ECMAScript, Javascript, ECMA and TC39.
tags: javascript
cover_image: https://res.cloudinary.com/dlwivxwf8/image/upload/v1640694234/Blog/how-javascript-is-maintained/pexels-markus-spiske-1089440.jpg
canonical_url: https://blog.godswillumukoro.com/how-javascript-gets-maintained
---

## JavaScript

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. 

Javascript is different because there isn't a single JS package to download and install on your computer. Rather the implementation is done by browsers and its up various browsers to implement new features when they get released by TC39 and ECMA International. 

This means that different browsers will support different features at any given point in time. 

Websites like [caniuse.com](http://caniuse.com) help us understand language implementation inconsistencies across different browsers.

## A Quick History

Javascript was first released under the name LiveScript in 1995 as the main scripting language for the Netscape browser.

In 1996 Netscape submitted the programming language to a standards creation organization called **ECMA International** in hopes to create a standard on how to use a language across different browsers and that standard named ECMAScript was created and released the next year, 1997.

There are two parties that contribute to updating and maintaining ECMAscript, **TC39** and **The open source community**.

### The Open Source Community
Anyone can create a proposal and a TC39 community member can champion a proposal, who will support and try to get that proposal into the latest version of ECMAScript.

## ECMA

A standards creation organization in charge of all sorts of different standards.

## ECMAScript

A specification for a programming language, think of it as a text reference that describes how a language should work, and not a programming language itself.

## TC39

Technical Committee Number 39 is in charge of creating, maintaining, and finalizing ECMAScript proposals that will get included in newer versions of ECMAScript. 

40-60 delegates meet six times each year to discuss proposed changes to the spec.

This is just one of the many sub-committees that reside under the ECMA International organization.


## Resources
-  [How JavaScript is Maintained? ECMAScript vs JavaScript, ES Features, and More Explained - Ijemma Onwuzulike](https://www.youtube.com/watch?v=iMMZ4YR-2us&t=194s)

> Did you find this article helpful? Help spread the word so more people understand how Javascript is maintained. [Follow me on twitter](https://twitter.com/umuks_) and tell me how you found this useful.
operators
Published: 2021-12-28 12:17:13

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

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


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

`ternary operators`
example condition 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dozclyhnz8s0czu612hd.png)

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

logical operators :
`AND && both of them should be _True_!`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9501horp8s29s9i6antm.png)

`OR || if one of them be true the output be true!` 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxs48s2vjcceevuo4epo.png)

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

`AND &&`
```js
const a = 10;
const b = -30;

console.log(a > 0 && b > 0); //true && false -> false

console.log(a > 0 && b < 0); //true && true -> true
```
`OR ||`

```js
const a = 10;
const b = -30;

console.log(a > 0 || b > 0); //true && false -> true

console.log(a < 0 || b < 0); //false && true -> true

console.log(a < 0 || b > 0); //false && false -> false

```
Binary search algorithm
Tags: algorithms, computerscience, programming, beginners
Published: 2021-12-28 12:06:17

Binary search is an algorithm in which a sorted list of elements is given as input. If the list contains the item we are looking for, the algorithm returns information about its location. Otherwise, it returns the null value.

In a binary search, we guess the middle number in order to eliminate half of the remaining numbers in each trial.

```python
def binnary_search(list, item):
    low = 0
    high = len(list) - 1  #1

    while low <= high:
        mid = round(low + high) // 2    #2
        guess = list[mid]

        if guess == item:     #3
            return mid
        if guess > item:      #4
            high = mid - 1
        else:                 #5
            low = mid + 1
    return None

my_list = [1, 2, 3, 5, 7, 9, 11, 23, 123, 345]

print(binnary_search(my_list, 345)) #9
print(binnary_search(my_list, 11)) #6
print(binnary_search(my_list, 15)) #None
```

Let's break this program down into parts:

1. Use low and high to control which part of the list is searched

2. As long as the search area has not been narrowed down to one element, we select the middle element

3. Element found

4. Our guess is too big

5. Our guess is too low

6. There is no such element

**Remember that numbering in lists starts at 0**

Binary search is a good alternative to searching the entire list of items one by one. The speed of a binary search with a list of 10 elements is O(log 10) which gives us a maximum of 4 guesses.

More about Big O notation you can read in my previous post <a href="https://dev.to/quentindamianino/big-o-notation-418h">here</a>
From loop recur to reduce
Tags: clojure, functional, tutorial, lisp
Published: 2021-12-28 11:49:12

In Clojure, do you find yourself reaching for a loop recur but you know you should be using reduce? Here's a really simple way to break out of that habit.

Let's start with and example. Starting with `a2d` which is the result of invoking `(to-array-2d [[11 2 4] [4 5 6] [10 8 -12]])` and `len` is the size of the matrix. Which is 3.

This function, written with a loop/recur, calculates the "diagonal sum" of the values of a square matrix of some size.

```
(defn accu [a2d len]
 (reduce +
  (loop [vals []
         i    (- len 1)]
   (if (> len (count vals))
    (recur (conj vals (aget a2d i i)) (dec i))
    vals))))
```

So invoking this function:

```
(accu (to-array-2d [[11 2 4] [4 5 6] [10 8 -12]]) 3)
=> 4
```

Returns `4` because 11 + 5 + -12 = 4

So what does the `reduce` version look like?

```
(defn accu [a2d len]
 (reduce +
  (reduce #(conj %1 (aget a2d %2 %2)) [] (reverse (range len)))))
```

Notice how the relevant code is almost exactly the same. Both use `(conj vals (aget a2d i i)) (dec i)` to solve the problem. The loop/recur version has much more housekeeping and is not as fast as the reduce version.
Introduction to AWS Sagemaker
Tags: aws, machinelearning, datascience, cloud
Published: 2021-12-28 11:31:07

In this post, I am going to be writing about the Aws Sagemaker as a general overview. I have found Sagemaker to be very useful in my day-to-day machine learning life cycle, that is why I decided to write about it. 
AWS Sagemaker is an end-to-end fully managed service that helps machine learning engineers or data scientists to build, train and deploy machine learning models on the cloud with less stress.

The AWS Sagemaker is part of the AWS platform services which is a form of the platform as a service (PAAS). It consists of the tools to perform an end-to-end machine learning life cycle, but also requires you to have enough knowledge about machine learning in order to obtain good results through model fine-tuning.

As Machine Learning practitioner, you know that the machine learning lifecycle consists of the following:
1) Data Preparation: this entails extracting, transforming, and loading your input data
2) Model Building: this consists of using cross-validation methods to select the right model for your use case
3) Model Training and fine-tuning: this consists of training, debugging and fine-tuning your models for better results
4) Model Deployment and Monitoring: this consists of deploying your trained models to production and also monitoring how the model is performing in production.

So how does the AWS Sagemaker fit into the above Machine Learning life cycle?
**Data Preparation**: you can use the s3 buckets for collecting and storing the data and also the ETL process can be applied to the stored data in the Bucket. The **Groundtruth** section of the AWS Sagemaker allows you to annotate your input dataset by utilizing some workflows or it also provides a workforce for labeling of data. It offers ground truth labeling for a variety of input data which can help you speed up the data preparation stage of a machine learning lifecycle which is always presumed to be the most tedious stage in the machine learning process.

**Model Building and Training**: the Sagemaker notebooks and training functionality are both used for model building. The choice of which to use is dependent on the size of the input data ( i would write a more detailed practical  article on the application of using either the notebooks or training functionality to build and train your ML models)

**Model Deployment and Monitoring**: The Inference section of the Sagemaker is responsible for the deployment of your trained models. Firstly you would need to make an endpoint that can be utilized to call the model either with  HTTP or HTTPS.