teleren/devto huggingface dataset:
Lazy Load a Feature Module
Published: 2021-07-09 12:14:52

---
title: Lazy Load a Feature Module
published: true
description:
tags:
//cover_image: https://direct_url_to_image.jpg
---

By default, feature modules are eagerly loaded, this means that modules and all its components will load at the initial render of the application.

See my previous post to know more about module and how to create a feature module in Angular.
{% link queencykoh/creating-a-feature-module-458 %}

## Setup App Routing Module

To lazy load a feature module, go to `app-routing.module.ts`

If you do not have the App Routing Module just yet, you can generate it by using the command `ng generate module app-routing` with `--flat` to put the file in src/app instead of its own folder and `--module=app` to tell the CLI to register it in the imports array of the AppModule.

In your `app-routing.module.ts`, add a routes constant to define your routes, each Route object should have a `path` property which defines the URL path of your module and `loadChildren` to import your module dynamically and then pass the routes as an argument in the `RouterModule.forRoot()` in your imports array.

```javascript
import { RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: 'transactions',
    loadChildren: () => import('./transactions/transactions.module').then(m => m.TransactionsModule)
  }
];


imports: [RouterModule.forRoot(routes)],
```

Open app.component.html and replace the contents with `<router-outlet></router-outlet>` which works as a placeholder to load components dynamically.

## Setup the Feature Module Routes

Generate a new component in the Transactions Module

```
ng generate component transactions/TransactionsComponent
```

Go to `transactions.module.ts` and add a routes constant to define your routes, the Route object should have a `path` and `component` properties which is the name of your component, and optionally you can add child routes which you can define in the `children` properties. In your imports array, instead of forRoot, you will have to use the `forChild` and pass routes as the argument.

```javascript
const routes: Routes = [
{
    path: '',
    component: TransactionsComponent,
    children : [
      {
        path: '',
        component: TransactionListComponent,
      }
    ]
  }
];


imports: [RouterModule.forChild(routes)]
```

## Improve Code by Using async await

Add `await` before import(...) then enclose it with a parenthesis and reference .TransactionsModule directly and lastly mark the function with `async`

```
const routes: Routes = [
  {
    path: 'transactions',
    loadChildren: async () => (await import('./transactions/transactions.module')).TransactionsModule
  }
];
```
10 principles I live by
Published: 2021-07-09 12:13:14

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

### 1. Consistency is key

### 2. Don't rely on motivation ,build habits and discipline instead

### 3. Start before you feel ready

### 4. Perfection doesn't exist

### 5. Build, ship, get feedback, improve

### 6. Hard work always pays off

### 7. Always invest in yourself

### 8. Do something you love for a living

### 9. Your network is your net worth

### 10. Always give more than you receive

### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
Daily Developer Jokes - Friday, Jul 9, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-09 12:00:12

---
title: "Daily Developer Jokes - Friday, Jul 9, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Jul%209%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258cecd22f.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the computer squeak?

___A:___ Because someone stepped on its mouse!
 -->
T-SQL: How To Write A Self Join and Why
Tags: sql, tutorial, database
Published: 2021-07-09 11:38:55

As we've seen with SQL joins, we can link data to other data using relationships between data, such as a relationship between the history of a sales' price for a particular house and the details of the particular house. In these cases, the data have relationships with other related data (a home, its details, its price, etc). We use the variety of joins to tie these related data together based on the conditions that we specify. Specific data points also relate to themselves, even if they don't relate to other data. For instance, if we only had data on the history of a particular home sales' price, we would have current and past sales' values. This means that a particular datum from that set would be a value after a previous value and possibly with a next value (if the specific data point is the most recent). When we reflect over this example, we'll see that it applies in a similar manner to every data set. In the video, [SQL Basics: How To Use A Self Join and Why](https://www.youtube.com/watch?v=r5s4omztDos&list=PLHHm85xMQAYNScEs-nu9gzi2uoQ9JCCYA&index=4), we look at joining a table on to itself and the situations where we would consider using this technique for relationships of data among themselves.

Some questions that are answered in the video:

- For this video, we use a self join table since our join will only involve one table. Since we join the table onto itself, any column that we use in the join condition will match provided that we don't change any part of the condition (which we do in our example and I show why).
- As a quick reminder, not all SQL languages may support the exact syntax shown.
- In the example, what problem are we solving with a self join? How is this useful with any data where we're looking at the data set alone (without any external relationships)?
- Consider a simple example of where we can see this: in a workout where we do 5 sets of squats, the amount of repetitions may differ. With a self join, we can compare the percent change (if applicable) of how many repetitions we are able to complete relative to other sets. So, if we do 10 repetitions in our 1rst set and 12 repetitions in our 2nd set, we saw an increase in 20% from the 1rst to the 2nd set. The relationship between those data points is a previous-next relationship.

All data have relationships to even the data itself; even data as simple as weather can be looked at from the view of the weather today versus the weather yesterday.

As we see with the self join, the condition matters. We can vary the condition to compare to the previous, latter or other values. We do not need to use a self join if adding derived columns from an existing column - we can simply add those in our SQL statement (I've seen some examples where this is done, but it's not needed).
Keep track of your books 📚using this template
Tags: watercooler, showdev
Published: 2021-07-09 11:38:12

Hey folks 👋🏼

We just launched another Product on Product Hunt. It's a notion template that lets you keep track of all your awesome books in one place. 
### Notion Library Template

In this template you can write summaries, prioritize text, remember your favorites, and make reading productive - like never before.

{% youtube UUrIxYcX5As %}

### Track your books
Got the reading bug? This feature-rich Notion template lets you keep track of all your awesome books in one place. Write summaries, prioritize text, remember your favorites, and make reading productive - like never before.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4ckrt2jaxskocyrzp5q.png)
## Features
### Save and organize books
You can save your books in a section and add descriptions and genres so that you have an easier time accessing them according to your mood.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og9y1jnjqoqfb9c3d12s.png)

### Mark books as favorite
You can mark your book as favorite So that you can track your reading pattern and understand what genre among books you really like the best
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96lewr08dctocliane0z.png)

### Archive books
Remove from sight the books you have already finished reading, but still keep them safe if you ever want to access them later.

### Sort books by language
What better way to learn languages than by reading interesting books? Easily arrange your books according to language and access your books faster.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u25ysl6i1h5knjtei47q.png)
### Sort books by status
Reading 10 books at a time? Always know where you left off with the in-built status tracker.
### View owned books
Rented a book or bought one? Keep rented ones on priority, read them faster, and save money!
### A dictionary of unfamiliar words
This amazing feature is especially for those who're learning a new language. Sharpen your vocabulary while reading through juicy chapters!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckxdjpok9m8i3ig3wuxu.png)
### Rate books
Sort out which authors seem to tickle your funny bone better than the rest! Being a book critic was never easier!
### Add summaries
Reading for a school project or a work-related presentation? Create summaries and refresh key points at a glance. Brush up on a topic any time you want.
### Cross-platform syncs
Sync your books with other third-party apps that you use to track your book reading progress. This library really is all-in-one!

### Want One?
![](https://media.giphy.com/media/cIW1XzYs2fYK5EneDA/giphy.gif)
 ***Here is your link*** 👉 [***Notion Library***](https://prototion.com/notion-dashboard/Notion-Library-5A7h4Lk3yuL08kuA)

We are on Producthunt today. Go show some love here🔥
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnm5lk4b4doswq9a2iey.png)](https://www.producthunt.com/posts/notion-library-2)
Machine Learning Applications: Topic Discovery with Clustering
Tags: article
Published: 2021-07-14 13:07:57

---
title: Machine Learning Applications: Topic Discovery with Clustering
published: true
date: 2021-07-09 11:07:34 UTC
tags: Article
canonical_url: https://reinforcement-learning4.fun/2021/07/09/machine-learning-applications-topic-discovery-with-clustering/
---

Given a set of documents, a common task is to group them accordingly to topics or subjects.

A human agent can create a hierarchy of subjects and assign each document to its related issue. However, a clustering algorithm can create this structure automatically and more precisely.

We can apply hierarchical clustering algorithms to group documents … [Continue reading Machine Learning Applications: Topic Discovery with Clustering →](https://reinforcement-learning4.fun/2021/07/09/machine-learning-applications-topic-discovery-with-clustering/)
L’Oréal eAcademie: Developing the beauty industry’s largest B2B portal
Tags: ruby, react, writing, webdev
Published: 2021-07-09 11:06:15

eAcademie is a digital platform for the beauty industry. It links business processes for 1,000 internal employees and over 400,000 external users. Here’s how it is used:
- The training service uses the platform to plan and conduct seminars.
- Salespeople maintain customer bases in it and collect analytics.
- Hairdressers find training seminars, register for them, and pay for them online.
- The owners and administrators of beauty salons manage a single company profile and participate in the loyalty program.

[The Evrone team got involved](https://evrone.com/loreal) in the project in mid-2018, and we transferred it to a new infrastructure, covered it with tests, and continued to develop using Agile methodologies. The new frontend was created on Next.js, while the backend remained on user-friendly Ruby on Rails. PostgreSQL + Redis was used for the database, and Sidekiq was used for asynchronous tasks.
Beautiful NPM Icon packages for your next web project
Tags: npm, javascript, react, webdev
Published: 2021-07-09 10:45:52

## My Favourite

> These are my favourite npm icon packages

| **Icon pack** | **How to install**   |**Documentation**|
| ------------- |:--------------------:|----------------:|
|[Lucide](https://lucide.dev/)|`npm i lucide` or `npm i lucide-react` (React)|[Website](https://lucide.dev/guide/installation)|
|[Tabler](https://tabler-icons.io/)|`npm i @tabler/core` or `npm i @tabler/icons-react` (React)|[Website](https://tabler.io/docs/getting-started/download)|
|[Boxicons](https://boxicons.com/)|`npm i boxicons`|[Website](https://boxicons.com/usage/)|
|[Remix Icon](https://remixicon.com/)|`npm i remixicon`|[Github](https://github.com/Remix-Design/RemixIcon)
|[Radix Icon](https://icons.modulz.app/)|`npm i @modulz/radix-icons`|[Github](https://github.com/radix-ui/icons)|
___

## Recommended

> These are my personal recommendations of npm icon packages

| **Icon pack** | **How to install**   |**Documentation**|
| ------------- |:--------------------:|----------------:|
|[CoreUI Icon](https://icons.coreui.io/icons/)|`npm i @coreui/icons@next`|[Website](https://icons.coreui.io/docs/getting-started/introduction/)|
|[Teenyicons](https://teenyicons.com/)|`npm i teenyicons`|[Github](https://github.com/teenyicons/teenyicons)|
|[Bootstrap Icon](https://icons.getbootstrap.com/)|`npm i bootstrap-icons`|[Website](https://icons.getbootstrap.com/#install)|
|[Feather Icon](https://feathericons.com/)|`npm i feather-icons`|[Github](https://github.com/feathericons/feather)|
|[Octicons](https://primer.style/octicons/)|`npm i @primer/octicons`|[Website](https://primer.style/octicons/guidelines/usage)|
|[Ikonate](https://ikonate.com/)|`npm i ikonate`|[Github](https://github.com/mikolajdobrucki/ikonate)|
|[CSS.gg Icon](https://css.gg/app)|`npm i css.gg`|[Github](https://github.com/astrit/css.gg)|
|[Phosphor Icon](https://phosphoricons.com/)|`npm i phosphor-icons`|[Github](https://github.com/phosphor-icons/phosphor-icons)|
|[React-icons](https://react-icons.github.io/react-icons) (for React)|`npm i react-icons`|[Github](https://github.com/react-icons/react-icons)|
|[Material-UI Icon](https://material-ui.com/components/material-icons/) (for React)|`npm i @material-ui/icons`|[Website](https://material-ui.com/getting-started/installation/)|

___

Hope you are getting excited!😎

Further Research:
[ShapeFonts](https://shapedfonts.com/iconclub/)
[WWEB.dev](https://wweb.dev/resources/free-icon-sets/)

Thanks for reading, see you in the next post.
HyScale open-sources app deployment tool for Kubernetes
Tags: kubernetes
Published: 2021-07-09 10:43:59

HyScale today made its app delivery automation app deployment tool open-source for development teams who are looking for a friction-free way of deploying to Kubernetes. The open-source move underlines HyScale’s commitment to the app development community that wants to adopt Kubernetes but has to follow a script-heavy, error-prone app deployment process. This distracts development teams away from the app, and work on creating k8s deployment files. HyScale simplifies deploying to k8s by providing a service-centric spec, and getting the app URL in return, saving time and effort in dev-testing cycles before taking it to production. click here to know more....
Event Handling in Vue
Tags: javascript, vue, eventdriven, webdev
Published: 2021-07-09 10:39:24

As expected from any respectable Javascript framework, Vue provides a way to handle DOM events such as mouse movements, clicks, keystrokes, etc.
What is very interesting and enjoyable is the quick and easy way in which such events can be managed.

By using the *v-on:<event>* syntax, and providing an handler method, we can handle events easily. Here are some example:

## Handling click event

```HTML
<div id="app">
  <!-- `sayHello` is the name of a method -->
  <button v-on:click="sayHello">Hi</button>
</div>
```

and of course the handler:

```JAVASCRIPT
var example2 = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    sayHello: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        //this will show the tag which fired the event
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JavaScript too
example2.greet() // => 'Hello Vue.js!'
```

## The Double Click

```HTML
	<div id="app">
		<button v-on:dblclick="handleDoubleClick">Pssst. Double click me ;)</button>
	</div>
```

and this is the double click handler:

``` JAVASCRIPT
		var app = new Vue({
		  el: '#app', 
		  methods : {
		  	handleDoubleClick : function() {
		  		console.log("Hi, here we are dealing with a double click it seems....");
		  	}
		  }
		})
```

## Handling the event object

We can obviously access the entire event as we saw in previously, by launching the event handler and passing the entire object like in vanilla javascript.

```HTML
<button v-on:click="handleEvent($event)">We'll do it the old way</button>
```

Of course Vue provides a simple way to handle common tasks, like for example the preventDefault() function when we submit a form, [here is the link to the official guide's paragraph](https://vuejs.org/v2/guide/events.html#Event-Modifiers).
How to Sell on Facebook shop with Magento 2
Published: 2021-07-09 10:16:49

Any E-commerce business owner understands the importance of having things available on many platforms. You're also losing a lot of revenue if you don't work on the platforms where your potential customers spend most time!

And, according to Statista, Facebook is the most popular social media site on the planet, with 2.41 billion monthly active users as of the second quarter of 2019. And with those kinds of numbers, selling on [Facebook](https://www.facebook.com/) is a must. To make it simple for Magento 2 store owners to get the benefits of such a popular platform, so This is the [Magento 2 Facebook shop Integration](https://cedcommerce.com/magento-2-extensions/magento-2-facebook-shop-integration?utm_source=dev.to-magento-2-facebook-shop-integration-sonker) extension's solution for hassle-free selling. Using the Magento 2 Facebook shop extension, make your Magento 2 store products available to your Facebook users at their fingertips.

The admin can integrate the Magento 2 store with Facebook Shop and provide store products on Facebook using the Magento Facebook Product Feed extension. Increase revenue by using Facebook features such as redirecting customers to the checkout page when they click to check out a product.

Any modifications or updates made to the shop products are automatically synchronised with the Facebook store using the Magento 2 Facebook shop integration. Additionally, to manage Facebook orders in a Magento 2 store, store owners do not need to make any significant adjustments.

With such a large feature set, don't wait to integrate the Magento 2 Facebook feed and reap the benefits of this popular social media platform's increased sales.
New open-source challenge: home automation
Tags: homeautomation, arduino, machinelearning
Published: 2021-07-09 10:16:44

This is a really #cheap robot mop cleaner. And is the best device to benchmark what is a good ,functional home product. I've been testing it this morning, and to my surprise it does what is suppose to do : wet and clean the floor. However, don't assume because it's a robot it will do all things for you. It doesn't. To get the best cleaning results, the mop needs to be literally water saturated to a point of dripping. Also, another non documented trick is, the floor cleaning agent / detergent. I have mine on a spray bottle, and gave the mop a good spray all around before pushing the start button. 
Since this robot cleaning does not feature a path finder / trace , the best course of action is to limit the cleaning areas and divide spaces into small 5 or 6 m2 space areas. Finally under sofa and under the bed is now properly cleaned with this cheap $30 cleaning robot.
As usual, here's the challenge: 
Products like these are the best to give a boost when prototyping and doing product development. During upcoming weeks ill be adding the functionality of knowing where the robot is in the room , "spacial awareness", and where it has passed and mopped the floor. Ill be using an arduino nano sense ble to achive this.  At the end all will be accessible on a open-source Android app and also on the edge computing home server I'm already building (open data and source).  Total cost: around 50€.This is a really #cheap robot mop cleaner. And is the best device to benchmark what is a good, functional home product. I've been testing it this morning, and to my surprise, it does what is supposed to do: wet and clean the floor. However, don't assume because it's a robot it will do all things for you. It doesn't. To get the best cleaning results, the mop needs to be literally water-saturated to a point of dripping. Also, another non-documented trick is the floor cleaning agent/detergent. I have mine on a spray bottle and gave the mop a good spray all-around before pushing the start button. 
Since this robot cleaning does not feature a pathfinder/trace, the best course of action is to limit the cleaning areas and divide spaces into small 5 or 6 m2 space areas. Finally under the sofa and under the bed is now properly cleaned with this cheap $30 cleaning robot.
As usual, here's the challenge: 
Products like these are the best to give a boost when prototyping and doing product development. During upcoming weeks ill be adding the functionality of knowing where the robot is in the room, "spatial awareness", and where it has passed and mopped the floor. I'll be using an Arduino nano sense BLE to achieve this.  In the end, all will be accessible on an open-source Android app and also on the edge computing home server I'm already building (open data and source).  Total cost: around 50€.

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