teleren/devto huggingface dataset:
Handling errors in Remix forms
Tags: react
Published: 2022-05-09 06:15:48

It's always annoying if your application throws unforeseen errors.

In general, it's good advice to build in the most common error catching early on. However, there might be some generic errors you can't always see coming.

Luckily for us, Remix will catch most of these errors and can render them to the closest `ErrorBoundary` box we define.

## Creating a root error boundary

From my perspective, you'll always want to add a root error boundary to your code, this is the topmost level, so if an error is thrown top-level, this one will always be able to catch it.

To create one of these root error boundaries, open up the `root.tsx` file.

According to the docs, it's best to render a full HTML for the root error boundary as it will mount and unmount on the render of this error.
By having access to the `<Meta />, <Links />, and <Script />` tags, it might be able to re-render.

Let's add the following function to this root file:

```js
export function ErrorBoundary({ error }) {
  return (
    <html>
      <head>
        <title>Oh no!</title>
        <Meta />
        <Links />
      </head>
      <body className='m-4'>
        <h1 className='text-2xl'>Something went wrong!</h1>
        <p>{error.message}</p>
        <Scripts />
      </body>
    </html>
  );
}
```

Let's try it out and see what happens; I added this particular error in `app/routes/admin/posts/index.tsx`.

```js
export function loader() {
  throw new Error('I am a failure!');
}
```

And if we now open this page, we get hit by the following error.

![Error boundary in Remix](https://cdn.hashnode.com/res/hashnode/image/upload/v1650692691711/uPMq3rbcc.png)

This is already way better than not throwing a custom error.
The downside is blocking the complete page while our error is only thrown down the line.

## Adding nested error boundaries

And this is where Remix kind of blows my mind. It supports multiple error boundaries!

Remix will start looking for the closest error boundary to render the error when an error is thrown.

We could add an error boundary in the same file we throw it in in our case.

```js
export function ErrorBoundary({ error }) {
  return (
    <div className='bg-red-100 border border-red-300 p-4'>
      <h1 className='text-2xl'>Something went wrong!</h1>
      <p>{error.message}</p>
    </div>
  );
}
```

Now refresh the page and see what happens.

![Nested error boundary](https://cdn.hashnode.com/res/hashnode/image/upload/v1650692826699/5MlYwCOEQ.png)

Wow, the error is only shown in the specific nested route!
The other parts of our application are still working as expected.

You can find this example code on [GitHub](https://github.com/rebelchris/remix-starter/tree/error-handling).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
How to reverse a link list.
Published: 2022-05-09 05:33:47

reverse() {
    let current = this.head;
    let next = null;
    let previous = null;
 
    while(current !== null) {
      next = current.next;
      current.next = previous;
      previous = current;
      current = next;
    }
 
    this.head = previous;
  }

visualization video: 
https://www.youtube.com/watch?v=D7y_hoT_YZI&ab_channel=GeeksforGeeks
Neovim Cursor change after exiting Neovim bug fix : to AlexVKO github.
Published: 2022-05-09 04:47:07

I've been also facing this issue when I was exiting Neo vim. I tried many steps but It did not work. Alas, I found the solution is that you need to set the guicursor to "disable". The one thing is that, After we set that to "disable", In the Neo Vim we cannot see the beam-cursor. It will always be the default cursor you use. I use `I-Beam` cursor, so in Neo Vim, There will always be `I-Beam` cursor and not block-cursor. If you want it that way, Then use the following command in your `init.vim` file. It works for me.

The code -

```
set guicursor="disable"
```
VAR, LET, DAN CONST JAVASCRIPT ES6
Tags: javascript
Published: 2022-05-09 04:06:21

Pada artikel kali ini saya akan menjelaskan perbedaan dalam penggunaan var, let, dan const pada JavaScript ES6.

## CONST
Nilainya hanya dapat dibuat sekali dan hanya bisa dipakai di dalam scope.

```
if(true){
 const nama = "John Doe";
 nama = "Steven"; // error, karena tidak boleh ganti nilai
}

console.log(nama); // error, karena di luar if
```

## LET
Nilainya bisa diubah dan hanya bisa dipakai di dalam scope.

```
if(true){
 let nama = "John Doe";
 nama = "Steven"; // berhasil ganti nilai
}

console.log(nama); // error, karena di luar if
```

## VAR
Nilainya bisa diubah dan bisa dipakai di luar scope.

```
if(true){
 var nama = "John Doe";
 nama = "Steven"; // berhasil ganti nilai
}

console.log(nama); // berhasil walaupun di luar if
```
Vue 3: Add font-awsome icons
Tags: beginners, tutorial, vue, fontawesome
Published: 2022-05-09 03:44:55

Tech detail:
- Ubuntu 22.04
- VueJS 3
- Font-awsome
- TypeScript

URLs:
https://www.npmjs.com/package/@fortawesome/vue-fontawesome
https://fontawesome.com/icons

#Install
Your `package.json` should looked like this
```
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
```
Run these commands (these might have more than what you need)
```
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/vue-fontawesome@prerelease
```

#Update main.js
Your `src/main.ts` should looked like this
```
import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

import { library } from "@fortawesome/fontawesome-svg-core";
import { faTrashCan } from "@fortawesome/free-solid-svg-icons"; <--- Add any icons you need here
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

const app = createApp(App);

library.add(faTrashCan);
app.component("font-awesome-icon", FontAwesomeIcon);

app.use(createPinia());
app.use(router);

app.mount("#app");
```

#Usage
A file which uses the trash icon will looked like this
```
<template>
  <div class="delete-item">
    <slot id="id"><font-awesome-icon :icon="['fas', 'trash-can']" /></slot>
  </div>
</template>

<style scoped>
.delete-item {
  margin: 1rem;
  padding: 0.5rem;
}
</style>
```

#Result

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nga3agbfwop83cc7myvc.png)
React + Eslint + Prettier + Tailwind Configuration
Tags: webdev, react, javascript, tailwindcss
Published: 2022-05-09 03:40:45

I make this repo to help developers quickly set configuration in react app, especially those who want to develop react app using Tailwind CSS framework and also eslint+pretiier configuration, you just need simply clone this repo in your local directory and then edit the eslint or prettier configuration as well as you want, don't forget to install the dependency using **npm install** and also remove origin git using **git remote rm origin**.
happy coding :)
repository: https://github.com/raview69/react-starting-project
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbkf2ntzpzs1i26xd62i.png)
Simplifying CloudFormation Deployment
Tags: awscommmunity
Published: 2022-05-09 01:26:32

CloudFormation (CFN) is a great templating framework or DSL that you can use to define infrastructure in either YAML or JSON.

Over the years I've watched it develop from something that was relatively difficult to implement to now being widely accepted and easier, but still with some caveats. When I started doing enterprise cloud migrations (~2012) to AWS I was using tools like Ansible to solve the problem of automating IAM, EC2s, RDS and VPC. In addition to this we didn't have several of the tools we have now available for migrating to AWS. 

I started using CFN templates to create IAM policies, EC2 templates and Roles and also VPCs. Some of the challenges back then was around the JSON formatting and injecting parameter's values into deployment. This is why I used tools like Ansible and the AWS CLI to wrap around CFN templates. This would give me control around what AMIs I could use for an EC2 for example or what AccountID I could use in a parameter for a Cross Account IAM Role.

** Conditionals

Another issue I found was that when launching a CFN template you are always going to have the issue of conditionals based on Parameter values. For example for an EC2 template if you launch it in a public subnet you might want to have a Public IP, but if you launch it in a private subnet you will only want a private IP.

** User data

User data in EC2 launches can be another problem that is not solved by templates alone. For example you can provide user data to run a command or run a script on initial launch.

Overall the biggest challenge for people who are new to using CloudFormation is learning the syntax and types of resources you need and the parameters available. The documentation provides this, but it can be challenging reading through lines and lines of documentation.

One of the ideas I had was being able to help people learn about AWS CloudFormation and supporting them in being able to create their own templates.

You can try https://app.teemops.com/ to get an idea of what I'm talking about - it allows you to use a basic UI to generate a template and launch it in your own AWS account, saving you hours of frustration learning. The source code is all available on https://github.com/teemops/tui if you want to run locally and play with.

At the moment I only support EC2 and Autoscaling groups, but the idea is to support as many AWS resources as possible. Give it a try and I look forward to feedback.
Javascript Animation 25
Tags: javascript, webdev, css
Published: 2022-05-09 03:34:07

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. Pageflip Effect  
{% codepen https://codepen.io/php-hacker/pen/RwLQwjE %}
# 2. Clock     
{% codepen https://codepen.io/php-hacker/pen/bGoLoyO %}
# 3. Cut Dice    
{% codepen https://codepen.io/php-hacker/pen/oNGEGrw %}
# 4. Snowfall 
{% codepen https://codepen.io/php-hacker/pen/abLqVvp %}
# 5. 0 to 1 and 1 to 0     
{% codepen https://codepen.io/php-hacker/pen/QWqQOjX %}
How do I get started to work as web3 developer?
Tags: web3, react, career, help
Published: 2022-05-09 03:25:15

I wanted to get into web3 stuffs as Frontend Developer but have lot's of doubt, if some one having experience in this field can answer it?

1. What all I need to learn & any courses if some can suggest?
2. I already have working knowledge of React.js. How much time can it take to learn techs related to web3?
3. What are differences in salary for a web3 developer & normal frontend developer?

Any other suggestions which I need to know before getting started?
Promises Promises
Published: 2022-05-09 03:23:20

I was recently in an interview for javascript and was asked what I though was an easy question. 

The interviewer ask me to explain promises. 

...Well I though inside this is easy... I got this. 

...Welp needless to say things didn't go as I expected. 


##What are Promises in JavaScript
![question mark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofsuu9g3s0anmt8knubo.jpeg)

Promises are objects used to run code asynchronously. 


![async promise in javascript.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edn165ab9lvmvnaxqvae.png) 

To keep in simple. We can defer the completion of a block of code until the async request is complete.

Promises also have what I like to call a fail  safe in the .catch method. Which simply put will catch the errors in our async call.

![js promises flow chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1rgrbf80nkht34hlufi.png) 

Promises are becoming more useful with us running more and more things asynchronously. Having the ability to catch our errors in one place is extremely important as we develop as developers. 

I hope this helps and if you get this question in an interview..good luck 

Happy Coding 👨🏿‍💻👨🏻‍💻👩‍💻🧑🏾‍💻
How to Set Auto Database BackUp using Cron Scheduler In Laravel
Tags: laravel, php, database, backup
Published: 2022-05-09 03:09:37

In this article, we will see how to set auto database backup using cron scheduler in laravel. here we will set auto database backup using cron scheduler, as you all know datbase is very important part of any website and we need to take backup as per our requirment.

Using cron job scheduling in laravel we will set mysql backups in laravel, you can also set daily, weekly or monthly database backup using cron job.

So, let's see laravel auto backup database, auto database backup using cron scheduler in laravel, scheduling mysql backups in laravel.

```
Step 1 : Install Laravel

Step 2 : Create Command

Step 3 : Create Backup Folder

Step 4 : Schedule Command
```

---

> **_[Read More : How to Set Auto Database BackUp using Cron Scheduler In Laravel](https://techsolutionstuff.com/post/how-to-set-auto-database-backup-using-cron-scheduler-in-laravel)_**
Retrieve lines from a GitHub repo by a command
Tags: cli, github
Published: 2022-05-09 03:06:57

[requirements]
- [curl](https://curl.se/)
- [jq](https://stedolan.github.io/jq/)

```zsh
$ curl -sS https://api.github.com/repos/userName/repoName/stats/code_frequency | jq 'reduce .[] as $row (0; . + $row[1] + $row[2])'
```

tested with this repo

{% github koji/node-typescript-boilerplate %}


```zsh
$ curl -sS https://api.github.com/repos/koji/node-typescript-boilerplate/stats/code_frequency | jq 'reduce .[] as $row (0; . + $row[1] + $row[2])'
2605
```

The output is including empty lines and comments in the codebase.

If you use [cloc](https://github.com/AlDanial/cloc), you can count code without empty lines and comments.

```zsh
# install cloc
$ brew install cloc
```

```
#!/usr/bin/env zsh

git clone --depth 1 "$1" linecount-repo && \
  printf "('linecount-repo' will be deleted automatically)\n\n\n" && \
  cloc linecount-repo && \
  rm -rf linecount-repo
```

Then you can register the above script as an alias and use it easily.


{% embed https://dev.to/0xkoji/git-001-add-alias-to-gitconfig-3460 %}

### Other way
```zsh
$ cd your_github_repo
$ git ls-files | xargs -n1 git --no-pager blame -f -w|grep <userName> |wc -l
```
Overriding Serializer
Tags: ruby, rails, serializers
Published: 2022-05-09 02:59:14

## Setup the default serializers

While using Active Model Serializer in a Rails backend, to override the default serializer is to create a new serializer.

With a User model and Recipe model, we can select the information that gets displayed to simplify the JSON output.

```Ruby
# Serializer for User
class UserSerializer < ActiveModel::Serializer
  attributes :id, :username
  has_many :recipes
end

# Serializer for Recipe
class RecipeSerializer < ActiveModel::Serializer
  attributes :id, :name, :ingredients, :instructions
  belongs_to :user
end

```

### users#index

On `users#index` the output will show the user id and username along with all attributes of each recipe a user created. In this case recipe id, name, ingredients, and instructions will all be displayed.

To change the output for readability we'll add a few things.

```Ruby
# User serializer
class UserSerializer < ActiveModel::Serializer
  attributes :id, :username
  has_many :recipes, serializer: UserRecipeSerializer
end

# UserRecipeSerializer
class UserRecipeSerializer < ActiveModel::Serializer
  attributes :id, :name
end
```

Now only the attributes from `Recipe` will be displayed that the `UserRecipeSerializer` has specified.

The downside is on `user#show` this serializer will also be used and will not show the full details of the recipe(s) if that was desired.

### users#show

On the `users#show` route the controller action will have an extra bit to yet another serializer just for the purpose of showing full recipe details.

```Ruby
# UsersController
...

def show
  user = User.find_by_id(params[:id])
  if user
    # BEFORE SERIALIZER
    # render json: user

    #  AFTER SERIALIZER
    render json: { user: UserShowSerializer.new(user)}
  end
end

# UserShowSerializer 
class UserShowSerializer < ActiveModel::Serializer
  attributes :id, :username
  has_many :recipes
end
```

The safest way to show the correct serializer would be to add in a `.new` method for each render call (not necessary) on the controller action to ensure the information needed  will be displayed
Tips Berjualan Di Facebook Marketplace Biar Laris
Tags: tips, facebook
Published: 2022-05-09 02:02:41

Tips Berjualan Di Facebook Marketplace Biar Laris - Bagaimana cara berjualan di facebook marketplace serta tips tips yang harus kita terapkan agar ramai pengunjung, mau tau caranya? tonton saja videonya dibawah ini.
https://youtu.be/-wz6IYpsxow
How can you help?
Tags: javascript, beginners, programming, webdev
Published: 2022-05-09 01:22:14

Hi 👋🏼, my name is Cesar Del Rio, I'm a 17 year old software developer 👨🏼‍💻, I'm posting a new Codewars Kata Solution everyday, with the explanation of it.

> If you like my content and want to support me to continue my software developer journey 👌🏼, I'll be very grateful :)

[You can support by buying a coffee ☕️](https://www.buymeacoffee.com/cesardlr)
Day 30: Full month
Tags: productivity
Published: 2022-05-09 01:14:25

Hi!
I'm still up and very tired but I couldn't miss this one I really can't believe that I had been on this ride consistently for the whole 30 days. there are few things that I had done daily for a month and I'm really proud that this writing challenge is one of them. I wanted to write a more extensive article about all benefits that I realized on this journey but I was really busy today and I can't do this tonight so it will be tomorrow if possible.
today was a busy one but i enjoyed Learning more about github actions, setting codeclimate and coveralls and adding badges to th respository and just this night I was working on testing with React testing library which is a great library for testing I currently have a bug but I will have to work on it firdt thing in thhe morning
too many typos very tired :)
have to run 
signing off...
Javascript Animation 23
Tags: javascript, webdev, css
Published: 2022-05-09 01:05:33

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. Text Animation  
{% codepen https://codepen.io/php-hacker/pen/XWeZVKE %}
# 2. Loading Animation    
{% codepen https://codepen.io/php-hacker/pen/XWeZVdE %}
# 3. Sightseeing   
{% codepen https://codepen.io/php-hacker/pen/qBPxpbJ %}
# 4. Three.js 3D animation 
{% codepen https://codepen.io/php-hacker/pen/abLqEvK %}
# 5. Cube Movement     
{% codepen https://codepen.io/php-hacker/pen/wvrypwa %}
Javascript Animation 22
Tags: javascript, webdev, css
Published: 2022-05-09 01:00:42

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. 3D Rotation Card  
{% codepen https://codepen.io/php-hacker/pen/XWeZVeB %}
# 2. 3D Particles   
{% codepen https://codepen.io/php-hacker/pen/poWaprW %}
# 3. 3D Rotate Image Distortion   
{% codepen https://codepen.io/php-hacker/pen/MWEQrpO %}
# 4. Coiled Line 
{% codepen https://codepen.io/php-hacker/pen/mdBXpRd %}
# 5. 3D Rotation Matrix     
{% codepen https://codepen.io/php-hacker/pen/jOGZYVB %}
Javascript Binary heap data structure
Tags: javascript, programming, binaryheap
Published: 2022-05-09 00:58:51

**Binary heap**:- A binary heap is a complete binary tree which satisfies the heap ordering property. The ordering can be one of two types:

the <u>_min-heap_</u> property: the value of each node is greater than or equal to the value of its parent, with the minimum-value element at the root.
the <u>_max-heap_</u> property: the value of each node is less than or equal to the value of its parent, with the maximum-value element at the root.

```
let MinHeap = function() {
    let head = [null];
    this.insert = function(element) {
        head.push(element);
        if (head.length > 2) {
            let idx = head.length - 1;
            while (head[idx] < head[Math.floor(idx / 2)]) {
                if (idx >= 1) {
                    [head[Math.floor(idx / 2)], head[idx]] = [head[idx], head[Math.floor(idx / 2)]];
                    if (Math.floor(idx / 2) > 1) {
                        idx = Math.floor(idx / 2);
                    } else {
                        break;
                    }
                }
            }
        }
    }
}
let minHeap = new MinHeap();
minHeap.insert(2)
minHeap.insert(1)
minHeap.insert(3)
minHeap.insert(4)

let MaxHeap = function() {
    let head = [null];
    this.insert = function(element) {
        head.push(element);
        if (head.length > 2) {
            let idx = head.length - 1;
            while (head[idx] > head[Math.floor(idx / 2)]) {
                if (idx >= 1) {
                    [head[Math.floor(idx / 2)], head[idx]] = [head[idx], head[Math.floor(idx / 2)]];
                    if (Math.floor(idx / 2) > 1) {
                        idx = Math.floor(idx / 2);
                    } else {
                        break;
                    }
                }
            }
        }
    }
}
let maxHeap = new MaxHeap();
maxHeap.insert(2)
maxHeap.insert(1)
maxHeap.insert(3)
maxHeap.insert(4)
```

> Any comments or suggestions are welcome.
Javascript Animation 21
Tags: javascript, webdev, css
Published: 2022-05-09 00:46:19

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. Chaotic Pendulum  
{% codepen https://codepen.io/php-hacker/pen/RwLQeMg %}
# 2. Navigation Page   
{% codepen https://codepen.io/php-hacker/pen/dyVdgJp %}
# 3. Warp Animation   
{% codepen https://codepen.io/php-hacker/pen/dyVdgRX %}
# 4. Glass Form 
{% codepen https://codepen.io/php-hacker/pen/ExwQdZq %}
# 5. 3D Rotation     
{% codepen https://codepen.io/php-hacker/pen/yLzvpbz %}
Javascript Animation 20
Tags: javascript, webdev, css
Published: 2022-05-09 00:43:23

Whatever you do on Javascript, you have to understand the roots and focus on the basic knowledge.
# 1. Billiards  
{% codepen https://codepen.io/php-hacker/pen/Yzredwg %}
# 2. Flame Text   
{% codepen https://codepen.io/php-hacker/pen/xxXYyNE %}
# 3. Grid Animation   
{% codepen https://codepen.io/php-hacker/pen/YzreJgx %}
# 4. Clock  
{% codepen https://codepen.io/php-hacker/pen/PoJQyeE %}
# 5. Card Animation     
{% codepen https://codepen.io/php-hacker/pen/NWayOMB %}