teleren/devto huggingface dataset:
3 reasons why you should use Remix instead of Next.js
Tags: remix, nextjs, javascript, dx
Published: 2022-03-26 17:24:44

---
title: 3 reasons why you should use Remix instead of Next.js
published: true
description: Developer Experience, React Router and State management.
tags: remix,nextjs,javascript,dx
cover_image: https://yahooder.sirv.com/saasfrontends/remix/ih/3-reasons-remix.png
---

3 things that I came across this week:

### 1. Developer Experience

I tried migrating the React (Frontend only) to Next.js and I got tired, I built about 50-70% but I did not like all the workarounds I had to do, such as *getLayout*. I'm about to finish a Frontend AND Backend (previously with NET Core) version with Remix, and I learned about Remix last Saturday I think.

### 2. React Router / Layouts

Since Remix is built on top of react-router v6, I set up my application using multiple layouts. For example, I have 2 application layouts, AppLayout (/app) and AdminLayout (/admin). When migrating to **Next.js**, look at all the "AppLayout" occurrences:

![AppLayout - Nextjs](https://yahooder.sirv.com/saasfrontends/remix/ih/applayout-nextjs.png)

Notice the 114 occurrences? And this is just for AppLayout, I have worked with many more layouts. I'm sure there's a better and cleaner way to do this, but I did not find it. **That's part of the Developer Experience**.

Now with *Remix*, 9 occurrences in 3 files:

![AppLayout - Nextjs](https://yahooder.sirv.com/saasfrontends/remix/ih/applayout-remix.png)

### 3. State management

Instead of using redux to get the state, I can get it with useMatches. This is what my app *loader* looks like:

![useMatches](https://yahooder.sirv.com/saasfrontends/remix/ih/useMatches.png)

So I can access this data anywhere that starts with /app/* or /admin/* with the useMatches() hook, without spinners all over the page.

--

I'm going to give Next.js a try (again). But for now, I'm sticking with Remix.
Increase typing speed
Tags: typing, tutorial, beginners, productivity
Published: 2022-03-26 16:50:48

Today I will share some tips for increasing typing speed and also some websites for different level of typing speeds.

## Tips:

1. First things first DON'T look at the keyboard. Just don't. Cause you can never accelerate your typing speed if you type looking at the keyboard.

2. Know where the keys are by heart. You need to know it so well that even when you're not focused on typing and thinking something else your hands type by themselves. Don't worry it will come with practice.

3. Practice Practice Practice. There's no other way to be fast at typing other than practice.

4. Use `Ctrl + backspace`. Whenever you need to delete more than one-two letter use Ctrl + backspace. Though it will take some time to get used to it. But once you get used to it you'll type much faster.

## Best Places to Learn Typing:

**For WPM 0-20:** Use [keybr.com](https://www.keybr.com/). This is the most beginner friendly typing practice site I've found. They will show you where your hands are, guide you letter by letter and improves all letters' typing ability equally. Also it feels like a game so you might get addicted to typing practice.

**For WPM 20-50:** Use [10fastfingers](https://10fastfingers.com/typing-test/english). This is one of the classic typing practice sites. You can see what letters you've wrote incorrect and practice those letters frequently. 

**For WPM 50-∞:** Use [monkeytype](https://monkeytype.com/). Okay, this is my favorite one. It has smooth caret animation, different themes and many other customization options. Also you can flex your typing skill with this site. It has your typing states organized in a nice way and overall the best typing practice site in my opinion.
#66 Days of Data
Tags: datascience, python, 100daysofcode, ankitgupta
Published: 2022-03-26 16:48:41

## **Learning Python**  👨‍💻

D 42 of #66daysofdata 📈

Today I have learnt OOPs Concept in Python - Data Abstraction

Checkout 👉 [My #66 Days of Data timeline on Github](https://github.com/mrankitgupta/66DaysOfData)

Say me Hi! 
I'll be glad to connect on 
👇

**Twitter** @ [Mr_AnkitGupta01](https://twitter.com/Mr_AnkitGupta01)

**Github** @ [MrAnkitGupta](https://github.com/mrankitgupta)

**LinkedIn** @ [Mr_AnkitGupta](https://www.linkedin.com/in/mrankitgupta)

**Socials** @ [Ankit Gupta](http://ankitgupta.bio.link)
Making a website using Bootstrap 5 ✨
Published: 2022-03-26 16:13:18

Mobile-first websites are the standard today; be it your resume or your business website, the chances are that it will be primarily viewed on a smartphone more than any device today. Thanks to Bootstrap 5 (currently v5.1), we can set up a responsive website in less than 5 mins (or more if you are on a comfy couch). Let's build a website using Bootstrap 5 together! Bootstrap 5 is a library that provides power-ups to our plain HTML and JavaScript.

## Getting ready 🤓
Let's talk about what is Bootstrap in the first place? Bootstrap is a CSS framework. It is a collection of different CSS styles like buttons, dropdown menus and umpteen other things. Do you need to know CSS for Bootstrap? Not really. And that is the best part and also the reason why it is so popularly used. 

However, there are some prerequisites to this blog:

- You need to know basics of HTML and JavaScript
- You’d obviously need a code editor.
Got these two covered? Let’s dive in deeper 🐬

We'll be importing the library and using the various components it has to offer to build our website.

<u>Step 1:</u> Inside your tag, add the following meta tags and link to the CSS. To help you, I've provided you with a starter template.

```
<!DOCTYPE html>
<!-- This is required by Bootstrap. Without this, you'll see funky and incomplete styling-->
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
<!-- This ensures proper rendering and touch zooming for all devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
```
 
This template will give you a fundamental yet Bootstrap-ed website.

<u>Step 2:</u> Save the file as "<filename>.html"

<u>Step 3:</u> Open the file in a browser to view your basic bootstrap-ed website 🎉

Now that the basic website is up – we can play around with it like adding breakpoints, containers, etc.

If this excites you, you can learn more about it following the below references:
- [Introduction · Bootstrap v5.1](https://getbootstrap.com/docs/5.1/getting-started/introduction/tbootstrap.com)
- [Bootstrap 5 Documentation - W3cubDocs](https://docs.w3cub.com/bootstrap~5/) 
- [Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design - YouTube](https://www.youtube.com/watch?v=6zKLvZSYXmE)

Until next time 👋
Vishal - your friendly Community Manager ✨
Survey about Monetization of OSS Libraries
Tags: opensource, monetization
Published: 2022-03-26 16:43:07

Hi OSS Developers,
  I hope that you can help me understand the state of OSS Monetization better. I’m interested if and how you monetize - or try to monetize - your projects. 

To get a better picture of the current state of OSS monetization I’ve set-up a quick survey to evaluate different monetization approaches and what OSS developers would require to work full- or part-time on their OSS projects.

The survey with 16 questions will take about 5 minutes and is aimed at OSS developers / maintainers:
[https://docs.google.com/forms/d/e/1FAIpQLSegX_yKiGtXamKrVfg_1ioVWZ3Xdvtc3usZYn7p20dysHiaGQ/viewform](https://docs.google.com/forms/d/e/1FAIpQLSegX_yKiGtXamKrVfg_1ioVWZ3Xdvtc3usZYn7p20dysHiaGQ/viewform)

Best regards,
Joerg

PS: if you want to get the Survey Results you can join an email list at: https://mailchi.mp/8e59bb1c13db/state-of-oss-monetization
How To Bold Text The Easy Way With HTML Tag / Markdown
Tags: html, wwwhowbeginnerscom, beginners, webdev
Published: 2022-03-26 16:40:29

If you are new to HTML and want to bold text, this is the guide for you. In this article, I will teach you how to bold text with an HTML tag and in markdown with my guide. This method is easy to follow and can be used by anyone who begins learning HTML at the first place.

## Bold text with **<u>strong</u>** html tag
There are a couple of ways to bold text in HTML. The easiest way is to use the <strong> tag. Here's how it works: 

1. Create a new paragraph and type <strong>.
2. Inside the <strong> tag, insert your desired bold text. 
3. Save your document and you're done!
 
Here is an example of code with &lt;strong&gt; bold text &lt;/strong&gt; tag:

```
<strong>This is a Bold Text</strong>
```

## Bold text with **<u>b</u>** html tag

Bold text can be easily achieved with a simple html tag. The b tag tells the browser to bold the text that follows it. Here are a few examples:
&lt;b&gt;**Hello World!** &lt;/b&gt; 
&lt;b&gt;**This is bold text.** &lt;/b&gt; 

```
<b>This is a new bold text.</b> 
```

## Bold Text in markdown

Using bold text in markdown can make your writing stand out and be more easily read. Below are three guidelines for using bold text in markdown: 
- Use bold for important words or phrases that you want to make particularly noticeable. 
- Use bold when you want to introduce a new concept or to emphasize a point. 
- Use bold sparingly, as it can be disruptive and hard to read.

When you want to bold text in a markdown document, you can use the ** character both side of the text. This will make the text bold.

Here is an example:

```
**This a a bold text**
```

## Bold Text With CSS

If you want to give your text a bold appearance, you can use the font-weight:bold css property. This will make the text heavier and more noticeable. There are a few ways to do this, but we'll focus on one specific method: inline code.

To bold text in an inline code block, simply add the font-weight:bold css property to the appropriate element. For example, if you want to bold all of the text within a &lt;p&gt; tag, you would use the following code:

 &lt;p style="font-weight:bold"&gt;Bold Text&lt;/p&gt;.

Here is the code:

```
<p style='font-weight: bold'>This is a Bold Text</p>
```

That’s all what I want to share. Thanks for reading.

Follow my blog here: [www.howbeginners.com](https://www.howbeginners.com/)
Singly linked lists
Tags: computerscience, programming, algorithms
Published: 2022-03-26 15:49:28

## What is a linked list?
A linked list is a collection of objects called nodes that are randomly stored in memory.

### What is a node?
Node is a combination of two different types: 
1. data stored at the particular address which can be char, int, float, string
2. pointer to the address of the next node in memory
The last node of the list contains a pointer to `NULL`

## What is a singly linked list?
A singly linked list is a linked list that can be traversed only in the forward direction from `head` to the last node, `tail`.

![Linked list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuks4k3vr73q45rvnety.png)

Each square is a node and numbers 5, 10, 15, 20 are the values of the nodes. 2000, 3000, 4000, NULL are the pointer to the address of the next node. So the first node which is called `HEAD` points to address 2000 which is the next node and so on. The last node points to `NULL`.

## Why use linked list vs array?
- Inserting data in the linked list is very quick but in the array, we have direct access to the element
- The list is not required to be continuously present in the memory

### Conclusion
This was a basic explanation of what is a singly linked list is. Hope you will find this useful and let me know in the comments if this post needs improvement.
Going back with gestures to a specific screen | React Navigation
Tags: reactnative, reactnavigation, navigation
Published: 2022-03-26 15:30:47

Recently, I had a case where I have to navigate from **Screen 1 > Screen 2 > Screen 3 > Screen 4** and then go back straight to **Screen 1**. 

Here is [expo snack](https://snack.expo.dev/@plabpreview/going-back-with-gestures-to-a-specific-screen) with demo project.

{% youtube 8j0pRvsYqws %}

According to the [react-navigation docs](https://reactnavigation.org/docs/navigation-prop/#going-back-from-a-specific-screen) we can simply use `navigation.navigate('Screen1')` function to go back to **Screen 1**. 


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

Looks good. But what happens if we try to go back with a swipe gesture or a back button? 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2j489osxtdn2x1zvh3vw.gif) 

With swipe left to right or header back button, we will back to **Screen 3**. To solve this we can use [reset](https://reactnavigation.org/docs/navigation-prop/#reset) action, which allows us to rewrite the navigation state and remove **Screen 2** and **Screen 3** from it. Let's simply add the following code to **Screen 4**.

  ```javascript
  useEffect(() => {
    const { routes } = navigation.getState();

    const filteredRoutes = routes.filter(
      route => route.name !== 'Screen3' && route.name !== 'Screen2',
    );

    navigation.reset({
      index: filteredRoutes.length - 1,
      routes: filteredRoutes,
    });
  }, [])
  ```

- `{ routes } = navigation.getState()` get navigation routes state;
- `filteredRoutes = routes.filter` remove screens we don't want to have in our stack anymore;
- `index: routes.length - 1` reset index to the latest index in the routes array
- `routes: filteredRoutes` reset routes to filtered routes


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

That's it! If you like the post please support it with reactions and comments.
StyledFirebaseUI not working
Published: 2022-03-26 15:09:37

Hey everyone!

I tried using firebase auth, and it all works fine, but it only works when I remove a line from a package from node_modules, or else I get the error


`./node_modules/firebaseui/dist/firebaseui.css
Global CSS cannot be imported from within node_modules.`


Does anyone know a fix to this or do I have to fork the package and then use it with vercel?
Creating basic GET and POST requests in OkHttp and Java
Published: 2022-03-26 15:02:00

---
title: Creating basic GET and POST requests in OkHttp and Java
published: true
description: Easy ways of calling APIs with OkHttp and Java
tags: 
//cover_image: https://direct_url_to_image.jpg
---

A simple way of making POST request in OkHttp and Java:

```java

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.ObjectWriter;
import okhttp3.*;

LoginUser user = new LoginUser(username, password);
ObjectWriter ow = new ObjectMapper().writer().withDefaultPrettyPrinter();
String postBody = ow.writeValueAsString(user);

Request request = 
    new Request.Builder()
        .url(API_URL + "/Account/login")
        .post(RequestBody.create(postBody.trim(), JSON))
        .build();

String accessToken = null;
try (Response response = client.newCall(request).execute()) {
    if (!response.isSuccessful() || response.code() != 200) 
        log.warn("Couldn't access the API");
    User loggedInUser = 
        new ObjectMapper()
            .readValue(response.body().string(), User.class);
    accessToken = loggedInUser.getAccessToken();
}

```

Next, a simple way of making GET request in OkHttp and Java:

```java
Request request1 = new Request.Builder()
			.url(API_URL + "/Allcustomers")
			.header("Authorization", "Bearer " + accessToken)
			.build();

try (Response response = client.newCall(request1).execute()) {
    if (!response.isSuccessful() || response.code() != 200) 
        log.warn("Couldn't access the list of users");

    AllCustomers allCustomers = 
        new ObjectMapper()
            .readValue(response.body().string(), AllCustomers.class);
    List<Customer> customerList = allCustomers.getResponseData();

}
```
How to focus on hover in Windows 10
Published: 2022-03-26 14:19:01

---
title: How to focus on hover in Windows 10
published: true
description: A simple tool to change focus between windows
tags: 
//cover_image: https://direct_url_to_image.jpg
---

There's an option available in Ubuntu or in Gnome. A package called Gnome Tweak Tool provides us with an option to select how windows are focused. The option `Focus on Hover` allows us to move the focus with the mouse pointer. 

There's a nice little tool in windows too for this. Once installed and activated it makes the mouse pointer focus on hover. 

https://joelpurra.com/projects/X-Mouse_Controls/
Learn coding by playing games 🎮
Tags: codenewbie, beginners, tutorial, javascript
Published: 2022-03-26 14:16:54

When beginners usually start to code sometimes may get stuck or confused with some concepts. But there are many sites which help to learn some fundamentals of programming by playing games which can be fun & also makes coding a lot interesting. This blog lists the various sites where we can learn coding by playing online games.

**📌 [CheckIO and Empire of Code](https://checkio.org)**

Strategy games that can teach you JavaScript or Python.

**📌 [Code Wars ](https://www.codewars.com/)**

Helps you improve your skills by training in challenges with others. They offer a huge variety of languages, including JavaScript, Swift, PHP, Python etc

**📌 [Untrusted](https://alexnisnevich.github.io/untrusted/)**

Improvises your javascript skills by solving problems

**📌 [Elevator Saga](http://play.elevatorsaga.com)**

Tests your JavaScript knowledge with challenges related to moving an elevator and transporting people in the most efficient manner possible

**📌 [Vim Adventures](https://vim-adventures.com/)**

Vim is a highly configurable text editor used by programmers. If you want to learn how to use Vim then check this

**📌 [Code Hunt](https://www.microsoft.com/en-us/p/code-hunt-game/9nblggh6d0gs?activetab=pivot:overviewtab)**

You can learn Java etc. In a funny game way

**📌 [Robocode](https://robocode.sourceforge.io)**

You’ll learn programming skills by building virtual robot battle tanks in Java or .NET


**📌 [SQL Murder Mystery](https://mystery.knightlab.com/)**

This exercise is meant more as a way to practice SQL

**📌 [Flexboxfroggy](http://flexboxfroggy.com/)**

24 levels to learn how CSS Flexbox works

**📌 [Cyber Dojo](https://cyber-dojo.org/creator/home)**

Cyber Dojo has practice exercises and challenges for dozens of coding languages including Ruby, JavaScript, PHP, Python, and more

**📌 [CodinGame](https://www.codingame.com/start)**

Coding game offers up fun free games to help learn more than 20 programming languages

**📌 [CSS Dinner](https://flukeout.github.io/)**

It has 32 levels that will teach you the basics of how CSS selectors work.

**📌 [Codecombat](https://codecombat.com/)**

Anyone can learn Python, JavaScript, CoffeeScript etc

**📌[Ruby warrior](https://www.thinkful.com/learn/ruby-on-rails-tutorial/#/)**

Learn ruby with this awesome game


**📌[CodeMonkey](https://www.codemonkey.com/)**

It teaches coding using CoffeeScript, a real programming language, to teach you to build your own games in HTML5.


**📌[Flexbox defence](http://www.flexboxdefense.com/)**

Another great one to practice Flexbox skills

Thanks for reading 😊

If you like this content & if you feel it may help someone share it ❤️

If you know any games that would help in learning to code drop below 

{% embed https://twitter.com/Dhanush_Nehru/status/1408073905357524995  %}

<center><a href="https://ko-fi.com/dhanushnehru" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="25" width="124"></a></center>
🐧Terminal commands that I use every time.
Tags: terminal, terminalcommand, linux, bash
Published: 2022-03-26 14:08:46

Your macOS, Windows, Linux the most basic commands are gonna be the same,
when every I start with new projects I have to move in to right ▶️ folder and then I use it.


1. ``` bash 
cd
```
as simple *C*hange *D*irectory, 📂when every you have to move in another folder the *cd* come very handy, it can take you under and folder or outside a folder
![ImInImHereGIF.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1648302329825/XXbi-7aYA.gif)
```bash
cd inside-dir
```
if you want to go back
```bash
cd ..
```
**simple hack🧑🏿‍💻**:- 
```java
// if you know the name of the previous directory uses them with cd.
cd ../back/moreback/anothemoreback
// now I am at anothermoreback
```

**same work with cd inside directory**
```java
cd inside/moreinside-inside/anotherinside-inside
```


2. 

![StephenColbertCantFindItGIF.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1648302289645/CH6yCvLxf.gif)

```java
ls
//  list files or directories
```
all📁 the directories in that current directory with be printed out.
from files folder but **without hidden folders**
```bash
ls -a
// want to see hidden folders & files use this.
```
3.

![PrinterGIF (2).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1648302412975/csR0BeXH3.gif)
Now you know about changing directories and seeing the list of folders and files in a directory but how will you see which directory are you in.
```bash
// check print working directory
pwd
```
very handy if you got stuck.

4.

![CodingKiraGIF.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1648302431695/uVWDI7bVn.gif)
```bash
code .
code ./foldername
atom .
atom /foldername
```
If you use the text-editors as I do then this terminal command will make your life ease.
writing the name of text-editor (mostly)you can access them, without any GUI
```bash

.
// is used to do any stuff in the current directory
and 
./foldername
// is used to do inside the given filename
```

5. 


![CodeReviewGIF.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1648302804520/A0JW0zalt.gif)

``` javascript
node /filename
```
I love writing javascript it's simple and easy, for writing pseudocode, if you have **node** installed you can use node filename to run inside the terminal without using the browser.
very handy for js guys

6. 

![CatMatchGIF.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1648302765929/ltM6F1dQN.gif)

```bash
which ls
```
if you want where your specific command is stored in computer, SSD,
type **which** command and name of the command
which can be any command *ls* *cd* *nano* *PWD* *any command*
and you will get the destination of the file.

thank you for joining me.

if you know come better command let me know👋🏿
Connect on
Twitter :- [`@Abhayprajapati_`](https://twitter.com/AbhayPrajapati_)
GitHub :- [`TheabhayPrajapati`](https://github.com/theabhayprajapati)
Issue with multiple buttons in Formik form
Published: 2022-03-26 14:05:32

---
title: Issue with multiple buttons in Formik form
published: true
description: How to prevent submitting your Formik form on clicking buttons other than the submit button?
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Here's an example codesandbox with a Formik. 

https://codesandbox.io/embed/focused-ully-opvvmv?fontsize=14&hidenavigation=1&theme=dark

The form has two buttons: a Submit button that submits the form and navigates to the next page and a Copy button that copies the link typed by the user. 

The problem: 
When the Copy button is pressed the form is submitted and the page redirects to the next page. We only want the form to be submitted when the Submit button is pressed.

The solution: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekffx9ih02zeoetrs3g0.png)
By default any button without a type attribute defaults to `type="submit"`. This causes the form to be submitted when the Copy button is pressed. To resolve this we need to explicitly pass the type attribute as button ie. `type="button"` for the Copy button.