teleren/devto huggingface dataset:
How is Remix different from Next.js
Tags: discuss, jamstack, react, webdev
Published: 2020-10-29 14:28:59

---
title: How is Remix different from Next.js
published: true
description: Let's talk about how Remix.run is different than Next.js
tags: discuss, jamstack, react, webdev
---

Yesterday I published [A First Look at Remix.run](https://dev.to/dabit3/a-first-look-at-remix-run-449a)

{% link https://dev.to/dabit3/a-first-look-at-remix-run-449a %}

Since then, I keep getting the question of "How is Remix different from Next.js" (which is a good question since they share "some" of the same ideas).

I've only been using Remix for a day or so, but I've been chatting with Michael and Ryan about it and can speak to what I know so far (and these answer will evolve over time). I also will evolve this answer based on the answers provided in this thread and that I see over time in other forms / discussion areas. (Disclaimer - this is my opinion!)

### The differences

I think the main differentiators are here:

### 1. Nested routes

One large difference is how the routing works. Nested routes and params are supported in Remix, and "are a critical idea to understand in Remix" (according to the docs).

Using an `Outlet` from React Router Dom, you can build out a hierarchy of nested routes with a pretty simple to use API.

These nested routes are server-rendered, bringing to the table almost a hybrid of SPA and SSR that is completely new.

Routing (and the API behind it in general) also works a lot differently than with Next.js.

### 2. Complete control over the request from an SSR route

You have a lot of control over the data returned for a route – having full control over the responses (including sending cache control headers).

If you set cache headers on your responses, when the user visits the same route, it wont' even fetch the data, it'll use the cache. And if you put a CDN in front of your server, the server will rarely actually handle the requests because the CDN will have it cached.

Here is some info directly from their docs.

![Remix docs - 1](https://dev-to-uploads.s3.amazonaws.com/i/u1l3l12e1hfojatp095k.png)

![Remix docs - 2](https://dev-to-uploads.s3.amazonaws.com/i/xsa79a2i3nnl3f6b530z.png)

![Remix docs - 3](https://dev-to-uploads.s3.amazonaws.com/i/9hwkm4s101o636kr6iw0.png)

### 3. There is no SSG

### Is it better / worse?

I really don't think the question is if it's better or worse.

I think the real answer is that it's __different__ and IMO doesn't really serve the exact same use cases. To me, it's closer to a replacement for doing stuff like what Rails, Django, or Laravel does but using React and with more cache control and flexibility – almost like a hybrid between SPA and SSR?

It seems well suited for an app with highly dynamic data, especially for sites with a large number of pages.

*More to come*, but I look forward to hearing the discussion and evolving my opinion and answer!
enjoyed taking part in hacktoberfest
Tags: hacktoberfest
Published: 2020-10-29 14:24:41

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Cloud Native Data Security As Code With Cyral - Episode 156
Published: 2020-10-29 14:18:48

<p>One of the most challenging aspects of building a data platform has nothing to do with pipelines and transformations. If you are putting your workflows into production, then you need to consider how you are going to implement data security, including access controls and auditing. Different databases and storage systems all have their own method of restricting access, and they are not all compatible with each other. In order to simplify the process of securing your data in the Cloud Manav Mital created Cyral to provide a way of enforcing security as code. In this episode he explains how the system is architected, how it can help you enforce compliance, and what is involved in getting it integrated with your existing systems. This was a good conversation about an aspect of data management that is too often left as an afterthought.</p><p><a href='https://www.dataengineeringpodcast.com/cyral-data-security-episode-156/'>Listen Now!</a></p>
What is Acceptance Testing? Types and Examples –
Tags: testing
Published: 2020-10-29 06:11:29

Acceptance Testing
Acceptance Testing is the final level of software testing. The main aim of this testing is to determine the working process of the system by satisfying the required specifications and it is acceptable for delivery. It is also known as End-User Testing. It also works under the Black Box Testing Method.

Types of Acceptance Testing
The most important seven types of this testing are
User Acceptance Testing (UAT)
The name itself says that it is from the user point of view. It helps to determine whether the system is working for the user with the given specific requirements. Here, the user refers to whom the system is going to handle after completion of all the testing levels. Usually, customers or customer’s customers will perform this testing.

Business Acceptance Testing (BAT)
It helps to check whether the system satisfies the business requirements and specifications. The main aim of this testing is to help in increasing business profits by considering market strategies and technologies.

Contract Acceptance Testing (CAT)
The name itself says that it helps to test the product with all acceptance test cases within the contract period of time. The contract may be like payment will be done before the product goes live or after the product goes live.

Regulation Acceptance Testing (RAT)
If testing undergoes all the rules and regulations that are released by the government then it is said to be RAT. Not even a single violation has not to be found while performing this testing if any occurs then the whole product will be going under failure. So, it is the most important and complicated testing type.

Operational Acceptance Testing (OAT)
This testing mainly used to determine the product’s compatibility, reliability, stability, etc., before it is going to live.

Alpha Testing
Specialized Testers will perform this testing to check any bugs have occurred. Also, they help to give suggestions to improve product usability in a controlled manner.

Beta Testing
Beta Testing helps to grab the bugs or any issues of a product. End-Users will perform this testing with an uncontrolled manner.

Best Example to understand this testing
During the process of manufacturing a mobile phone, there are so many parts like a camera, speakers, flashlight, buttons, display, headset, charger, etc., will be produced separately by different manufacturers.
All these parts will first go under unit testing
After unit testing, they go for integration testing.
Later, system testing will be performed
Finally, acceptance testing will be performed before it is out for delivery.
For more information about this blog visit :
https://w3softech.com/blog/acceptance-testing-types-and-examples/
Symbol Application?
Tags: javascript, discuss
Published: 2020-10-29 14:18:21

I've asked numerous devs this ❓ b4, and not one has given me any practical use case for `symbol` type.

No big deal - JS if chocked full of 'useless' stuff and too many ways to accomplish the same task, but just wondering 🤔 if anyone has some practical use case for a 'real-ish' app - not wanting to start 🚵🏽‍♂️-shedding or 'micro-performance optimization' discussion here.
Dynamic features of the C#
Tags: csharp, dynamic, expandoobject
Published: 2020-10-29 14:10:03

I am a long term user of C# language. C# have been a static language for most of its life time. Recently, I have used JavaScript a lot. Dynamic nature of the JavaScript became handy for me. It is enjoyable when I am not forced to define an entire DTO class when I want to receive or pass a series of the parameters in the JavaScript. All of all is to define members in a JSON format.

When you get used to it, you like to behave alike in the C#. Fortunately, new C# have some dynamic features. It has keyword dynamic, and it contains [ExpandoObject](https://docs.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=netcore-3.1).

In my case, I used dynamic features for easily generating a JSON output. By my default style, I should created a series of DTOs, then populate them in a nested loop from database. However, dynamic feature let me exclude all redundant DTO classes and, simply inject data by extending the *ExpandoObject*.

At first glance, I had confusion about the order in which items would be added to the *ExpandoObject* or *List&lt;dynamic&gt;*. But by exercise and test, I found the correct solution.

Next step, I will try to use **dynamic** feature to receive binding models from the API. This is another area which generates a lot of less used DTOs. By now, I don't know about any other usage of **dynamic** in the C# and ASP.NET, but I am open for it.
What is better to use Spring Boot or Spring MVC?
Tags: java, career, computerscience, tutorial
Published: 2020-10-29 14:06:51

Both Spring Framework & Spring Boot are used to create Java Enterprise applications.
One could do everything using Spring Framework that can be achieved by Spring Boot.

Most of the people Prefer Spring Boot Because

Convention over Configuration
It’s a software design paradigm used by many software frameworks/systems that provides sensible defaults to its user obviously by following the best practices and without losing flexibility.

The impact of this design principle are profound and these includes; good architecture, maintainability, uniform & standard product creation, lesser number of decisions for the user, increase in the overall productivity, faster development etc just to mention a few.

The idea is that, system/framework would provide sensible defaults for their users [by convention] and if one deviates/departs from the these defaults then only one needs to make any configuration changes. Let’s take some 
Examples:

Example 1: (Deployment Simplified)
Suppose user is creating a web application following Spring MVC then it’s obvious that the user will be needing a container like Tomcat to deploy this application. If your framework can provide embedded Tomcat then user don’t have to waste their time & effort in installing, configuring their Tomcat instance. If one doesn’t want this default behavior then framework should have flexibility for that also.

Work For You : Look out for the dependent jars of spring-boot-starter-web artifactId
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>
Let me know, what have you found? :-)

Example 2: (Dependency Management Simplified)
If you have developed your enterprise application using Spring Framework (traditional way) then you surely know the headache of finding of right jars, right versions of jars, upgrading the version of jars and many more.
What if, user can get all the dependent jars along with their transitive dependencies out of box by simply pointing out that they need jars related to web or security or jpa etc.
Work For You: Check out Spring Boot Starter Packs like spring-boot-starter-web, spring-boot-starter-actuator etc
Rapid Application Development
One sentence, maximizing the code that actually adds value or related to your domain & reducing the boilerplate code. Take an example: code in your application that marshals XML or JSON has no customer value nor does it have a developer benefit
Now we have discussed the design philosophy behind the creation of Spring Boot. What it actually does? How does it help?

Accelerate the development

Developers invest their time in creating solutions that actually matters and adds values rather than wasting hour [both effort & time] in setting up their development environment, projects, making configuration changes and writing boilerplate codes

Meet The Experts For Better Guidence : https://nareshit.com/spring-online-training/
TIL: How to create a custom pipe in Angular
Tags: angular, todayilearned
Published: 2020-10-29 13:59:09

To build a custom pipe, just create a class that implements PipeTransfrom like this:
####transform-to-space.pipe.ts
```typescript
export class TransformToSpace implements PipeTransform {
  transform(value: string, symbol: string): any {
    return value.replace(symbol, ' ');
  }
}
```
As the class above implements PipeTransform, we are required to implement every property/method. In this case, we need to implement the `transform` method. 

The custom pipe we are creating takes a character and converts that to space. The final class will look something like this:
####transform-to-space.pipe.ts final
```typescript
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'transformToSpace'
})

export class TransformToSpace implements PipeTransform {
  transform(value: string, symbol: string): any {
    return value.replace(symbol, ' ');
  }
}
```

In order to use the pipe we put this on the template like so:
```html
<p>{{message.value | transformToSpace:'<'}}</p>
```
We use the same name as assigned under 
```typescript
@Pipe({
  name: 'transformToSpace'
})
```
Since `transform` takes two param: `value` in this case is `message.value` and `symbol` is defined after pipe name and colon like `transformToSpace:'<'`. And that is how you create and use a custom pipe.
Quick Github Tip: View Your Documentation Changes Before Publishing
Tags: github, git, documentation
Published: 2020-10-29 13:58:24

Have you ever updated documentation for a GitHub repository only to discover after you pushed your changes to production that you misused some markdown and now your documentation looks weird? Maybe it's just me, but I didn't figure this out until after doing it the hard way one too many times.

You can see how your documentation looks by switching to your branch in GitHub and then viewing the documentation page you updated. GitHub displays markdown files (`.md` extension) as styled text, not as code. Which means they'll show the stylized text for whatever branch you're on. In the below image, I'm in the main branch so I won't see my updates:

![A screenshot from GitHub: There is an arrow pointing to the branch selector, where the main branch is selected.](https://dev-to-uploads.s3.amazonaws.com/i/4hod8t03xcxg0avur94x.png)

To switch branches, find the dropdown that has the name of the current branch you're looking at in the upper left hadn't corner. Click on it and find your branch with your documentation changes and select it. Then go to the documentation file you updated and check out your changes!

Here I've switched to my branch and I can see my documentation changes:

![A screenshot from GitHub: There is an arrow pointing to the branch selector, where a branch that's not the main branch is selected. You can see some documentation below the branch selector.](https://dev-to-uploads.s3.amazonaws.com/i/8dbzp958053xhjcybuvg.png)

Now you don't need to merge your code every time you try and fix some documentation formatting. Get it looking good in your branch first, and merge when it's ready to go. This can also be helpful when code reviewing a peer's documentation change.

Cover Image: A top-down stock photo of a man writing in a notebook next to a MacBook.
Porting my site to Reason
Tags: reason, react, nextjs, webdev
Published: 2020-10-29 13:56:41

I've heard of [ReasonML](https://reasonml.github.io/) for a while now.

It's a language that always intrigued me since I'm a fan of FP patterns.
Well, I finally got around to really diving deep into it (aside from todos 😅).

Reason is not too different from JS/TS so the port was mainly about stripping away all the TypeScript types and letting the compiler infer the rest.

I've got to say, my favourite thing about Reason is the [Rescript](https://rescript-lang.org/) compiler. The inference it provides is great! It makes it so you only have to provide types at the very bottom level.

What do I mean?

Take for example this code:

```reason
module Component = {
  [@react.component]
  let make = (~name) => <div> React.string(name) </div>
}

// using the component
<Component name="Bob"/>
```

As you can see, I haven't declared a single type. The prop `name` is inferred to be a string because it's used with `React.string`!

The type of `React.string` is something like this:

```reason
module React {
  let string: string => string = //..
}
```

A major pain point I have though is that modeling data can be a bit of a hassle. There is no extending base types within Reason/Rescript (there is in ocaml), so something as simple as this requires copy pasting:

```ts
interface Person {
  name: sting;
}

interface Employee extends Person {
  company: string;
}
```

The Reason equivalent is:

```reason
type person = {
  name: string
};

type employee = {
  name: string,
  company: string
}
```

Yeah...

Overall, I really enjoy using Reason/Rescript. Just the inference itself is enough for me to reach for it whenever I can!
Update git repos in parallel
Tags: linux, parallel, git
Published: 2020-10-29 13:54:46

Are you living in a microservices world?
Do you need to keep multiple git repositories in sync?

How much time would it take to update **63 repositories**?

- [update-repos.sh](https://github.com/joaovitor/parallel_commands/blob/master/bin/update-repos.sh)

The `update-repos.sh` script uses gnu-parallel and execute the `git pull --rebase` and `git fetch --prune` in parallel.

# Update repositories in parallel

```shell
cd ~/github-orgs/PacktPublishing
time update-repos.sh
```

Output:

```text
[truncated]
job 56 completed ./Develop-and-Operate-Microservices-on-Kubernetes
Already up to date.
job 55 completed ./DevOps-Puppet-Docker-and-Kubernetes
Already up to date.
job 62 completed ./-Kubernetes-for-Absolute-Beginners---Hands-on
[truncated]

real    0m9,083s
user    0m6,321s
sys     0m2,668s
```

If you do that synchronously it would have taken near 4 minutes.

```text
real    4m53,583s
user    0m6,480s
sys     0m4,776s
```
Top Universities Dataset
Tags: datascience, python, database, bs4
Published: 2020-10-29 13:50:20

# Introduction
Dataset of World University Rankings of past 8 years along with the parameters like Quality of Staff, Alumni Employment, Publications, Citations, etc. I used beautiful soup parser to extract data from html source code, which I obtained using requests package in python.

You can find the folder of dataset on Kaggle : https://www.kaggle.com/saumitrajagdale/university-rankings

# Scraping Data
I scraped this data from the official rankings page provided by CWUR.
URL: https://cwur.org/

The dependecy packages which I use were:
- Pandas: For keeping data in dataframe format.
- Beautiful Soup (bs4): For parsing HTML source code.
- Requests: For obtaining the source code of a given url.
- Numpy: For basic array operations.

#### Code Snippet For Scraping:
```
# Dependencies
import pandas as pd
import bs4 
import urllib.request
import numpy as np

# Obtaining source code from the url
url ="https://cwur.org/2012.php"
url_contents = urllib.request.urlopen(url).read()

# Parsing the HTML source code 
soup = bs4.BeautifulSoup(url_contents, "html.parser")

# Extracting the data according to the HTML tags
rows=[]
r=soup.findAll("tr")
for i in range(1,len(r)):
    temp=r[i].findAll("td")
    row=[]
    for j in range(0,len(temp)):
        if j==0:
            s=str(temp[j])
            s=s[4:]
            s=s[:-5]
            row.append(s)
        else:
            s=str(temp[j])
            s=s[4:]
            s=s[:-5]
            row.append(s)
    print(row)
    rows.append(row)

# Converting data into dataframe usings pandas
df=pd.DataFrame(rows,columns=["World Rank","University","Location","National Rank", "Quality of Education", "Alumni Employment", "Quality of Faculty", "Publications", "Influence", "Citations", "Patents","Score"])
print(df)

# Creating csv file from the dataframe
df.to_csv("University_Ranks_2012.csv")

```

# Scope of Analysis

This Dataset can be used for following analysis:

1. To find the most significant and weighted parameter affecting the ranks of Universities
2. To find the trend of rankings of past 8 years based on the parameters provided as columns in dataset.
3. To visualise the ranking rise and fall of a particular university with rankings as y- axis and years as x-axis. [Line Graphs]
Data Structures & Algorithms using Rust: Two Sum
Tags: rust
Published: 2020-10-29 13:47:53

As part of Data Structures and Algorithms implementation using Rust, today we will explore `Two Sum` problem.

Leetcode problem link: https://leetcode.com/problems/two-sum/

###### Problem Statement

```rust
Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.
```

###### Instructions

```rust
Example 1:

Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Output: Because nums[0] + nums[1] == 9, we return [0, 1].
Example 2:

Input: nums = [3,2,4], target = 6
Output: [1,2]
Example 3:

Input: nums = [3,3], target = 6
Output: [0,1]
 

Constraints:

2 <= nums.length <= 105
-109 <= nums[i] <= 109
-109 <= target <= 109
Only one valid answer exists.
```
###### Solution

Please find below the solution implemented using Rust

```rust
use std::collections::HashMap;

impl Solution {
    pub fn two_sum(nums: Vec<i32>, target: i32) -> Vec<i32> {
        let l = nums.len();
        let mut m = HashMap::new();
        for i in 0..l {
            let t = target-nums[i];
            if let Some(x) = m.get(&t) {
                return vec![*x, i as i32];
            } else {
                m.insert(nums[i], i as i32);
            }
        }
        vec![]
    }
}
```

###### Outcome from Leetcode

Runtime: 0 ms, faster than 100.00% of Rust online submissions for Two Sum.
Memory Usage: 2.5 MB, less than 23.25% of Rust online submissions for Two Sum.

Please feel free to share your feedback.

Happy reading!!!
State Management with ngrx/store and effects
Tags: angular
Published: 2020-10-29 13:45:59

Getting started with ngrx store, effects, actions, reducers etc and are confused what to do when there are multiple reducers and what needs to be done? 
I made a simple application to demonstrate the usage of ngrx/store with multiple reducers and also effects. 
Github link here: https://github.com/tkt009/AngularNgrxStateManagement.git
Follow the steps to run the app.
It contains two tabs- one with and another without state management, To demonstrate what we lose out on when there's no state mgmt.
Click on the Increment/Decrement counter or enter name in the input box and navigate to another tab. Navigate back to see the saved state being displayed.
play around to see the state management in use.
use the string "products" in the input box and submit to see the effects is usage.
Look at the image uploaded where the the state is displayed.
Hope you all benefit from this application.