teleren/devto huggingface dataset:
webpack 5 - tutorial for building multipage website
Tags: webpack, javascript, tutorial
Published: 2021-05-03 06:38:39

Have you ever wondered how to build multiple-page website with webpack? If that's your case - either due to maintaining a legacy page, or some current architectural decisions - the materials focused on single-page-app (SPA) can leave you with some doubts.

# Define dynamically an entry for each page

In our case, we need to define one entry for each page. Assuming we have a list of pages in an array `pages = ['a', 'b']`, the `entry:` section of webpack config can look like:

```ts
  entry: pages.reduce((config, page) => {
    config[page] = `./src/${page}.js`;
    return config;
  }, {}),
```

with just a bit of functional programming, we turned the `pages` list into:

```ts
{
  a: '.src/a.js',
  b: '.src/b.js'
}
```

that we can set to `entry`. Because of doing it this way, the next time when we add a new page, it will be just adding one element to the list, without copy&pasting code. 

# Inject all the necessary code to html

Same as with SPAs, we want to inject the imports dynamically into your html. For that we use`HtmlWebpackPlugin`. Again, we want to use our `pages` array, so we avoid repeating code when we add new pages. So we will build our `plugins:` dynamically & we will leave a place to add some other, unrelated plugins there too.

```ts
  plugins: [].concat(
    pages.map(
      (page) =>
        new HtmlWebpackPlugin({
          inject: true,
          template: `./${page}.html`,
          filename: `${page}.html`,
          chunks: [page],
        })
    ),
    // <- here goes array(s) of other plugins
  ),
```

# Optimization

To get the most out of our architecture, we need to split built code into chunks. That will allow us to reuse portions of code if they are big enough and used across multiple pages. Luckily, we can achieve that by just adding:

```ts
  optimization: {
    splitChunks: {
      chunks: "all",
    },
  },
```

# Complete configuration & example app

The complete, working configuration:
```ts
const path = require("path"),
  HtmlWebpackPlugin = require("html-webpack-plugin");

const pages = ["a", "b"];

module.exports = {
  entry: pages.reduce((config, page) => {
    config[page] = `./src/${page}.js`;
    return config;
  }, {}),
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    },
  },
  plugins: [].concat(
    pages.map(
      (page) =>
        new HtmlWebpackPlugin({
          inject: true,
          template: `./${page}.html`,
          filename: `${page}.html`,
          chunks: [page],
        })
    )
  ),
};
```

To play with it, the easiest way is to check out the repo of an example app:
https://github.com/marcin-wosinek/webpack-multipage-example

# Links
* [my video course on webpack](https://bit.ly/webpack-course)

# Want's more?

Here you can find me going through the example with details:

{% youtube ItfDD4ZQ_rE %}
Learn DevOps Better and Faster!
Tags: devops, learning, live, skills
Published: 2021-05-03 06:38:00

There are many ways to learn DevOps, but the best one is learning by doing! In this live stream, we talk with Sid Palas (DevOps Directive) about using the Zone of Proximal Development to improve your DevOps skills.

{% youtube RlhlE3WcpVU %}

This is probably the best way to learn DevOps, and actually the best way to learn anything. Learn by practice (or learn by doing) and you will learn more!

Learn DevOps better with these tips.

Check Sid Palas out:
► YouTube: DevOps Directive https://www.youtube.com/c/DevOpsDirective
► Blog: https://devopsdirective.com
► GitHub: https://github.com/sidpalas
Remount /etc/fstab without rebooting
Tags: todayilearned, linux
Published: 2021-05-07 04:54:08

---
title: Remount /etc/fstab without rebooting
published: true
date: 2021-05-03 06:32:53 UTC
tags: TIL,Linux
canonical_url: https://andreligne.io/remount-etcfstab-without-rebooting/
---

Ever worked on a thing where you need to mount a network share on boot for a Linux machine and find yourself rebooting it over and over to try new configs and see if it works?

I just did that for 20 minutes, and it turns out there’s a command for this.

```
mount -a
```

That’s it.

Here’s an excerpt from the `man` page:

```
-a, --all
       Mount all filesystems (of the given types) mentioned in fstab (except for those whose line contains the noauto keyword). The filesystems are mounted following
       their order in fstab.
```

You’re welcome!
Should SQL Query through REST API be a GET or a POST?
Tags: help, sql, database
Published: 2021-05-03 06:32:35

Query example:

```sql
select users.username, users.email, orders.id, orders.date, orders.amount
from users, orders 
where users.trid = orders.user_trid 
and users.user_trid in ( 31, 32, 33 ) 
and users.status = 1
```

### Option 1: GET - Query in the URL

```bash
https://server.com/query?q=select%20users.username%2C%20users.email%2C%20orders.id%2C%20orders.date%2C%20orders.amount%20from%20users%2C%20orders%20where%20users.trid%20%3D%20orders.user_trid%20and%20users.user_trid%20in%20%28%2031%2C%2032%2C%2033%20%29%20and%20users.status%20%3D%201
```

### Option 2: POST - JSON Payload

```json
[{
	"query": "select users.username, users.email, orders.id, orders.date, orders.amount from users, orders where users.trid = orders.user_trid and users.user_trid in ( 31, 32, 33 ) and users.status = 1"
}]
```

### Return

```json
{
	"users": [{
		"username": "usr_name_1",
		"email": "usr_name_1@gmail.com",
		"orders": [{
			"id": 2543,
			"date": "2020.08.11",
			"amount": 35.99
		}, {
			"id": 2843,
			"date": "2020.10.01",
			"amount": 45.99
		}, {
			"id": 3843,
			"date": "2020.12.23",
			"amount": 395.99
		}]
	}, {
		"username": "usr_name_2",
		"email": "usr_name_2@gmail.com",
		"orders": [{
			"id": 3815,
			"date": "2021.01.11",
			"amount": 35.99
		}, {
			"id": 3176,
			"date": "2021.02.03",
			"amount": 45.99
		}, {
			"id": 3898,
			"date": "2020.03.05",
			"amount": 395.99
		}]
	}]
}
```

Original issue: https://github.com/siodb/siodb/issues/133
Confused Developer
Tags: webdev, csharp, javascript, html
Published: 2021-05-03 05:44:48

I am a C# application developer. I just started learning web development and I am overwhelmed with so many frameworks and technologies. I have basic knowledge of HTML, CSS, and javascript. What should I be doing next?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/footey512k25m0bnn1u0.jpg)
PSA: PAN-OS Drops BGP peers with an invalid NLRI / Always filter inbound prefixes from Avi Vantage
Tags: avi, bgp, datacenternetworking, nsxalb
Published: 2021-05-03 16:41:12

---
title: PSA: PAN-OS Drops BGP peers with an invalid NLRI / Always filter inbound prefixes from Avi Vantage
published: true
date: 2021-05-03 05:31:00 UTC
tags: Avi,BGP,DatacenterNetworking,NSXALB
canonical_url: 
---

If Avi Vantage IPAM cannot allocate an address for a new vIP, it will advertise an all-zeros host address - `0.0.0.0/32`:

[![](https://1.bp.blogspot.com/-Fk016AcsOVs/YI-JnwbKpAI/AAAAAAAABT4/sPc4oToImH4SHm9cfmh2sWJWn361HtligCLcBGAsYHQ/w640-h570/bgp-pcap.PNG)](https://1.bp.blogspot.com/-Fk016AcsOVs/YI-JnwbKpAI/AAAAAAAABT4/sPc4oToImH4SHm9cfmh2sWJWn361HtligCLcBGAsYHQ/s523/bgp-pcap.PNG)
  

This will cause Palo Alto PAN-OS to restart a peer - even if it is not the immediate downstream prefix. Palo Alto uses _ **routed**  _as their dynamic routing engine - so this is probably default behavior inherited from there:

```
****EXCEPTION 0x4103 - 57 (0000)**** I:008e7cd1 F:00000004qbmlpar2.c 1352 :at 20:54:21, 2 May 2021 (1822572648 ms)UPDATE message contains NLRI of 0.0.0.0.****PROBLEM 0x4102 - 46 (0000)**** I:008e7cd1 F:00000004qbnmmsg.c 1074 :at 20:54:21, 2 May 2021 (1822572648 ms)NM has received an UPDATE message that failed to parse.Entity index = 1Local address = 10.6.64.9Local port = 0Remote address = 10.6.64.12Remote port = 0Scope ID = 0****EXCEPTION 0x4102 - 71 (0000)**** I:008e7cd1 F:00000020qbnmsnd2.c 167 :at 20:54:21, 2 May 2021 (1822572648 ms)A NOTIFICATION message is being sent to a neighbor due to an unexpectedproblem.NM entity index = 1Local address = 10.6.64.9Local port = 0Remote address = 10.6.64.12Remote port = 0Scope ID = 0Remote AS number = 64905Remote BGP ID = 0X0A06400CError code = UPDATE Message Error (3)Error subcode = Invalid Network Field (10)
```

This could cause a network outage for all subtending networks on this peer. Consider this a friendly reminder to _always leverage route filtering between autonomous systems_!

Unfortunately, strict import filters on PAN-OS did not resolve this issue.
Rack application as a stub
Tags: rails, beginners, tips
Published: 2021-05-03 05:29:00

Sometimes you need to put a stub on a particular route, but do not want to make a controller for this. In this case use Rack application as a stub:

```ruby
# config/routes.rb
get "wp-login", to: -> (env) { [200, {}, [""]] }
```
Salary, Perks, and Emoluments of NABARD Grade A Officer
Tags: nabardgradeasalary, nabard, nabardgradea
Published: 2021-05-03 05:28:17

The total cost to company (CTC) pays package accounts to be around 7.92 lacs in metro cities like Mumbai, Delhi, etc.

Now, if you want to know more about the basic salary, perks, and allowances to understand how much salary you can draw as a NABARD Grade A Officer, <a href="https://www.anujjindal.in/nabard-grade-a-notification-admit-card-eligibility-and-salary/">Check Here.</a>
Head recursion Vs Tail recursion
Tags: beginners, recursion, datastructures
Published: 2021-05-03 05:23:27

##What is Recursion?

A recursion is a function which calls itself directly or indirectly over a defined boundary to generate user expected results.

Some common problems for recursion are **Fibonacci series, Factorial of an integer and Tower of Hanoi**

####Recursion Example
```
#include <stdio.h>

// T(n) = Θ(n)
// Aux space = Θ(n)

int getFactorial(int n) {
    if(n==0 || n==1)
        return 1;
    return n*getFactorial(n-1);
}

int main() {
	int n, res;
	scanf("%d", &n);
	
	res = getFactorial(n);
	printf("%d", res);
	
	return 0;
}
```

####Test case
```
Input
4

Output
24
```

##Head recursion
If a recursion has code statements to be executed after function call then it is a Head recursion. Head recursions are generally hard to convert into loop statements.

####Example
```
void fun(int n) {
    if(n==0)
        return 0;
    
    fun(n-1);
    printf("%d", n); // Post recursive operation
}
```

##Tail recursion
Tail recursions will not have any code statements after function calls and are generally at the end of the function declaration. Tail recursions are easy to convert into loop statements.

####Example
```
void fun(int n) {
    if(n==0)
        return 0;
    
    printf("%d", n); 
    fun(n-1);
}
```

##Which is better?
Generally, tail recursions are always better. Even though they both have same time complexity and Auxiliary space, tail recursions takes an edge in terms of memory in function stack. Head recursions will wait in function stack memory until the post recursion code statements are executed which causes a latency in overall results, whereas tail recursions will be terminated in function stack over execution.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbcwhwt1e5j118uan6mz.jpg)

##That's it
**Thanks for reading!!** If you have any questions about the post feel free to leave a comment below.

Follow me on twitter: [@soorya_54](https://twitter.com/soorya_54)
Hello, helping community.
Published: 2021-05-03 05:13:23

I am faced with some error here.

 File "C:\Users\DoangMawarG\Desktop\mysite\book\Bookbank\urls.py", line 5, in <module>
    path('', views.index, name='index'),
AttributeError: module 'Bookbank.views' has no attribute 'index'

please I really need your support for me to proceed with my learning process.
How to use SQLQueryFactory with your QueryDSL JPA Entities
Tags: java, spring, querydsl, jpa
Published: 2021-05-03 05:10:59

Even you want QueryDSL SQL features such as bulk insert, you are using queryDSL JPA, unfortunately there is no way to generate `RelationalPath<T>` from `EntityPath<T>` automatically.

{% stackoverflow 53675800 %}

But there's a good news. you can wrap `RelationalPath<T>` from `EntityPath<T>` manually like this. so, I made util class that wrap `RelationalPath<T>` from `EntityPath<T>`.

TL;DR: copy the class below, apply it, and use it.

{% gist https://gist.github.com/composite/2b6b4a1d7afa052ace930ddc66588b53 %}

How to use? that's very simple. when you are using `SQLQueryFactory`, then just call `QueryDslUtils.asRelational` to wrap `RelationalPath` entity and use any `SQLQueryFactory`'s clause.

```java
@Entity
@Table(name = "my_table", schema = "my_schema") // MUST HAVE THIS ANNOTATION!
@Data // for Lombok
public class SomeEntity {
  @Column("some_col")
  private String someColumn;
  // ...getter, setter, etc.
}

EntityPath<SomeEntity> myEntity = QSomeEntity.someEntity;
RelationalPath<SomeEntity> sqlEntity = QueryDslUtils.asRelational(myEntity);

sqlQueryFactory.insert(sqlEntity)...execute();
```

That's all. happy coding!
Applied Fonts looks different in ReactJS web application
Published: 2021-05-03 04:39:35

I am using some font family(Futura Std, URW DIN) in the ReactJS project. but after applying these fonts its look different from than design

Current Result:
![Current Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e59js7zkf1rpr4sx1stj.png)
 
Expected Result:
![Expected Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zcfpi89zd46ameieh81.png)


Current Applied CSS: 
```
font-family: Futura Std;
font-size: 14px;
line-height: 16px;
letter-spacing: 1.59px;
text-transform: uppercase;
color: #5E9C9C;`
```
April 2021 Recap
Tags: watercooler, showdev
Published: 2021-05-03 04:19:54

---
title: April 2021 Recap
published: true
description: April was a month of small projects, CSS drawings, and graphic novels :)
tags: watercooler,showdev
series: monthly recaps
canonical_url: https://alvaromontoro.com/blog/67977/april-2021-recap
---

This month was kind of slow. I got different mini-projects out (which is always fun) and did a bunch of CSS drawings and cartoons. Maybe next month I'll play a little bit more with 3D CSS again... we'll see.

Here are some of the things I did during April 2021:

## Tech Things

### CSS The Wonderful Wizard of Oz

An illustration of The Wizard of Oz's main characters done just using clip-path in CSS.

{% codepen https://codepen.io/alvaromontoro/pen/LYxLxpG %}

### Bezos Calculator

Do you want to know how much money did Jeff Bezos gained while you were reading this article? Visit [Bezos' Calculator](https://bezoscalculator) or watch the following demo:

{% codepen https://codepen.io/alvaromontoro/pen/ZELrvbo %}

### CSS Farmer

A cartoon of a farmer done with CSS.

{% codepen https://codepen.io/alvaromontoro/pen/poRZNaL %}

### Humans are allergic to change

One of the few small animations I did this month (the others are more tongue-in-cheek). And a [video of the coding process](https://www.youtube.com/watch?v=C40af3XvcKQ)

{% codepen https://codepen.io/alvaromontoro/pen/poRYZgv %}

### CSS Pirate

One more CSS illustration, this time a cartoon of a pirate. There's a more interesting [animated version](https://codepen.io/alvaromontoro/pen/gOgNxeJ) thanks to Temani Afif. 

{% codepen https://codepen.io/alvaromontoro/pen/JjEqzoY %}


## Non-Tech Things

I asked for suggestions of graphic novels on Twitter and ended up with three recommendations that I read and enjoyed (the first three from the list):

| Title | Author | Style |
|-------+--------+-------|
| [Nimona](https://www.amazon.com/gp/product/0062278223) | Noelle Stevenson | Fantasy |
| [Slaughterhouse-Five: The Graphic Novel](https://www.amazon.com/gp/product/1684156254/) | Kurt Vonnegut, Ryan North & Albert Monteys | Graphic Novel |
| [DUNE: The Graphic Novel, Book 1](https://www.amazon.com/gp/product/1419731505/) | James Tynion IV & Werther Dell'Edera | Graphic Novel |
| [The Hero Code](https://www.amazon.com/Hero-Code-Lessons-Learned-Lives/dp/1538719967/) | Admiral William H. McRaven | Biography |
| [The Bell Jar](https://www.amazon.com/Bell-Jar-Modern-Classics/dp/0060837020/) | Sylvia Plath | Novel |
| [Kick-Ass](https://www.amazon.com/Kick-Ass-Mark-Millar/dp/0785134352/) | Mark Millar & John Romita Jr. | Graphic Novel |

Apart from the graphic novels, I read The Hero Code (a book in the style of Make Your Bed by the same author, but not quite there) and The Bell Jar (I think because I saw it once on The Simpsons and was curious about reading it).
How to create a qr code generator in java
Published: 2021-05-03 03:56:47

---
title: How to create a qr code generator in java
published: true
description: We look into writing a QR code generator in java from scratch. QR Code has a lot of different technologies and strategies in order to create a readable and unambiguous code. Writing an implementation in Java needs to be done in multiple steps and have a lot of fun and interesting challenges.
tags:
cover_image: https://i.ytimg.com/vi/Gg1wb7f3_ls/maxresdefault.jpg
---

{% youtube Gg1wb7f3_ls %}

We look into writing a QR code generator in java from scratch. QR Code has a lot of different technologies and strategies in order to create a readable and unambiguous code. Writing an implementation in Java needs to be done in multiple steps and have a lot of fun and interesting challenges.
SVG Text Animation
Published: 2021-05-03 03:47:03

### Here are a few steps to create an SVG file with a simple text animation. 

To start, setup the SVG file on html within the SVG tags.

### Style and Animation

On the CSS file, use `@keyframes`
```css
@keyframes draw {
    from {
        stroke-dashoffset: -563;
    }
    to {
        stroke-dashoffset: 0;
    }
```

And lastly, in the JavaScript file select the class attribute, then implement the `getTotalLength()` function. 

```javascript
let path = document.querySelector('path');
let pathLength = path.getTotalLength();
```
My Journey into Software Development
Tags: 100daysofcode, beginners
Published: 2021-05-03 03:45:46

My first Social media post in 5 years. This is a long time coming. It's feels weird saying this to a bunch of strangers, but i think its time. I had a little mental health episode dating back to when i was 16, and i haven't been the same since. I was someone who lived in his head and this felt like death. My drive to do anything was forever altered. i stopped improving mentally, physically and the list goes on. I graduated in 2019. I have been looking for the next step in my journey,  i decided to push it aside till after my NYSC which started in Nov 2019. NYSC for those who don't know, it's a one year mandatory service year for Nigerian graduates. This is where i found one of the most arrogant individual till date. I actually wouldn't have cared, but he kept playing those mental games that leaves me exhausted by the end of the day. This set me back on my progress on forgetting the past. I was actually grateful for the lockdown cuz, it helped a lot mentally. Long story cut short, i found a purpose again. I want to solve two problems in my life time. The first problem is one of choice and the second is a little personal, but i relies on the first one going has planned. In order to solve this problem i needed to learn how to program, which is why am starting today.
Learning a Programming Languages: 1 of 182.
Problem solving Project: 182 days left
Making the Project Open Source: 243 days Left
RUBY ON RAILS PROJECT
Published: 2021-05-03 03:41:42

I recently did my rails project and it had lots of ups and downs. The ups were I was able to understand the errors I was getting within my project because of my Sinatra project. I built my rails project to help company owners keep jobs in order. You can also view other companies and their jobs. 

This project has been the most difficult but most rewarding to me. I started off by building out everything using model generators. Once I did that I started figuring out my associations. After building my associations and creating my schema and migrations I started building controllers. After my controllers I built my views, and added some css too. 

I ran into multiple errors when creating this project, (10-20) seems like a good estimate. It was a struggle to figure them out. I ended up asking for help on lots of them and figuring out a lot on my own. A lot of my errors came from pluralization. I had all my pluralization backwards so had to change it. A lot of my errors were also pretty easy to figure out and readable. A lot of the project for me was adding stuff and deleting stuff to make the project look cleaner. I also didn't get to omniauth for this phase so I needed to watch some videos and get help from students. It was pretty neat to understand and use omniauth in a project. 



Figuring out errors was one of the most rewarding things I've felt. The best feeling is when you get a project running and then adding additional stuff piece by piece to make it better and better. I plan on going back to this project and making it a serious application at some point too. Overall this project was the most difficult but the most fun and rewarding.
NPM install locally & global
Tags: npm
Published: 2021-05-03 03:33:11

<div><p>The main difference between local and global packages is this:</p>
<ul>
<li><strong>local packages</strong> are installed in the directory where you run <code class="language-text">npm install &lt;package-name&gt;</code>, and they are put in the <code class="language-text">node_modules</code> folder under this directory</li>
<li><strong>global packages</strong> are all put in a single place in your system (exactly where depends on your setup), regardless of where you run <code class="language-text">npm install -g &lt;package-name&gt;</code></li>
</ul>
<p>In your code you can only require local packages:</p>
<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'package-name'</span><span class="token punctuation">)</span></code></pre></div>
<p>so when should you install in one way or another?</p>
<p>In general, <strong>all packages should be installed locally</strong>.</p>
<p>This makes sure you can have dozens of applications in your computer, all running a different version of each package if needed.</p>
<p>Updating a global package would make all your projects use the new release, and as you can imagine this might cause nightmares in terms of maintenance, as some packages might break compatibility with further dependencies, and so on.</p>
<p>All projects have their own local version of a package, even if this might appear like a waste of resources, it's minimal compared to the possible negative consequences.</p>
<p>A package <strong>should be installed globally</strong> when it provides an executable command that you run from the shell (CLI), and it's reused across projects.</p>
<p>You can also install executable commands locally and run them using npx, but some packages are just better installed globally.</p>
<p>Great examples of popular global packages which you might know are</p>
<ul>
<li><code class="language-text">npm</code></li>
<li><code class="language-text">create-react-app</code></li>
<li><code class="language-text">vue-cli</code></li>
<li><code class="language-text">grunt-cli</code></li>
<li><code class="language-text">mocha</code></li>
<li><code class="language-text">react-native-cli</code></li>
<li><code class="language-text">gatsby-cli</code></li>
<li><code class="language-text">forever</code></li>
<li><code class="language-text">nodemon</code></li>
</ul>
<p>You probably have some packages installed globally already on your system. You can see them by running</p>
<div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> list -g --depth <span class="token number">0</span></code></pre></div>
reference link: https://nodejs.dev/learn/npm-global-or-local-packages