teleren/devto huggingface dataset:
Conditionally lazy load modules in Angular
Tags: angular, javascript, webdevelopme, webdev
Published: 2022-04-22 07:38:21


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

The lazy loading module is an important feature that helps to improve the performance of an Angular application. This feature is amazing and resolves most of the use cases.
Recently, I faced a user scenario where I need to load a module for a route path conditionally. The scenario is that if a user is assigned with some permission, then load a module or load another module.
The use case seems legit, but I was unable to achieve this using the current lazy loading module feature.
In the current lazy loading feature, we will use loadChildren property to load the required module. The caveat here is that loadChildren doesn’t provide any argument or injectable services which limit us from conditionally loading modules.
```
const routes: Routes = [{
       path:'view',
       loadChildren: () => import('./modules/view/view.module')
                                .then(x => x.ViewModule)
}];
@NgModule({
   imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule]
})
export class AppRoutingModule { }
```
To tackle this, I am using the router events to change the loadChildren method definition. We can listen for the RouteConfigLoadStart event which will be triggered before loading the lazy modules.
Since we are configuring the loadChildren method inside the router event handler, we are now provided with injectable services & other options which will provide more control over the module loading.
```
import { Component } from '@angular/core';
import { RouteConfigLoadStart, Router } from '@angular/router';
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Conditionally lazy load modules';
  enableEdit = false;
 constructor(private router: Router) {
  this.router.events.subscribe((x) => {
    console.log(x);
    if (x instanceof RouteConfigLoadStart && x.route.path === 'viewedit') {
        x.route.loadChildren = () => {
          if (!this.enableEdit) {
            return import('./modules/view/view.module').then((mod) => mod.ViewModule);
   } else {
       return import('./modules/edit/edit.module').then((mod) => mod.EditModule);
    }
   };
  }
 });
}
. . . 
}
```

The complete working sample can be found in the below StackBlitz.
{% stackblitz angular-ivy-rvryyn %}

Feel free to contact me. Happy coding!!
Menyelesaikan soal "Staircase" di HackerRank
Tags: javascript, beginners, programming
Published: 2022-04-22 07:37:29


![Soal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8vfp5enced7hh925cp5.jpg)

Pada soal di atas kita diminta untuk membuat fungsi yang dapat mencetak pola seperti anak tangga dengan jumlah tingkatan sesuai nilai yang diinputkan. Kali ini saya akan membagikan cara saya menyelesaikan soal tersebut menggunakan bahasa pemrograman javascript. Berikut kode pemrogramannya:

```javascript
function staircase(n) {
    for (let i = 1; i <= n; i++) {
        let result = '';
        
        for (let j = 0; j < n - i; j++)
            result += ' ';
            
        for (let k = 0; k < i; k++)
            result += '#';
            
        console.log(result);
    }
}
```

Pada kode di atas, saya melakukan perulangan sebanyak nilai yang diinputkan. Dalam perulangan tersebut saya mencetak spasi dan karakter # dengan jumlah yang berbeda sesuai nomor baris saat ini. Jumlah spasi dapat diperoleh dari jumlah kolom dikurangi nomor baris saat ini dan jumlah karakter # akan sama dengan nomor baris saat ini.

Sebagai gambaran apabila diinputkan nilai 5, maka pada baris nomor 1 akan mencetak spasi sebanyak 4 (5 - 1) dan 1 karakter #, baris nomor 2 akan mencetak spasi sebanyak 3 (5 - 2) dan 2 karakter #, dan seterusnya.

Demikian yang bisa saya bagikan, apabila ada yang perlu dikoreksi atau Anda punya cara lain untuk menyelesaikan soal di atas silahkan share di kolom komentar. 😁
I Challenged Myself to Create an App in Less Than 24 Hours
Tags: discuss, showdev, watercooler, motivation
Published: 2022-04-22 07:29:44

---
title: I Challenged Myself to Create an App in Less Than 24 Hours
published: true
description: Mental health is important, this app will help you work on your breathing.
tags: #discuss, #showdev, #watercooler, #motivation
---

So I challenged myself to see if I can create an app from idea all the way to production in less than 24 hours. 

Here it is! https://breathe.so

I had the idea of this app in mind for quite some time now. I implemented it in ~16,5 hours, from typing the first letter of the source code to desinging, deploying it to production, configuring the server and redirecting the domain.

### About the app

The app is about mental health and breathing. Mental health is important, I do breathing exercises almost daily and this app will help me, and hopefully others, to work on it even more.

Currently there are two exercises called "Calm Down" and "Focus".

1. Calm Down - it's a box type breathing exercise with 4 sec of breath in -> 4 sec hold -> 4 sec breathe out -> 4 sec hold. 
2. Focus - it's a in/out type of exercise with 6 sec breathe in -> 6 sec breathe out.


I'm planning on adding more features if interest is high enough.
Số Điện Thoại Gái - Tổng hợp số điện thoại gái toàn quốc
Tags: maybaybagia, sodienthoaigai
Published: 2022-04-22 07:03:27

Welcome to https://sodienthoaigai.com. Chúng tôi là website hẹn hò kết bạn online, cung cấp thông tin, danh sách zalo, số điện thoại gái, máy bay bà già, bạn trai, bạn gái, bạn tình, bạn les, bạn boy gay,... giúp bạn kết nối và tìm được một nửa yêu thương của mình.
Thông tin liên hệ chúng tôi:
Địa chỉ: 20 Nguyễn Văn Đậu, phường 5, quận Phú Nhuận, Thành phố Hồ Chí Minh
Hotline: 097 868 39 79
Website: https://sodienthoaigai.com
Email hiển thị:	info@sodienthoaigai.com	
#sodienthoaigai #maybaybagia #timbantrai #timbangai #timbanles #timbanboygay #timbanbonphuong #timbantinh
How to make your D3.js projects responsive
Tags: d3js, javascript, webdev
Published: 2022-04-22 06:52:00

A quick tip to make your D3.js projects responsive.
</br>
1- Set the viewBox attribute of the SVG parent: the first two values to zero, the last two to the width and height of your project, in pixels. It will ensure that the width/height ratio is maintained on all screen sizes.
Omit the width and height attributes since they will give fixed width and height to your project.

```
<svg viewBox="0 0 700 500">
  // Your viz goes here
</svg>
```
</br>
2- Wrap the SVG parent in a responsive container. 
There are many ways to go about it. For simplicity, I used a div element with 100% width and a max-width of 700px that corresponds to the max-width of the page content. Any grid system will also work.

```
<div style="width:100%; max-width:700px;">
  <svg viewBox="0 0 700 500"></svg>
</div>
```
</br>
Hope that helps!
Ecommerce site devlopment
Tags: ecommerce, startup, python, javascript
Published: 2022-04-22 06:44:40


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

Developed Ecommerce website like [sagacity](thesagacity.in), which sells [anime t shirt](https://thesagacity.in/category/Anime-tshirt-Men-Tshirts-Anime-merch/)

if you wanted to develop a new project in your budget please visit supernovanow.in
WN16: What is the best piece of content you found?
Tags: career, productivity, discuss
Published: 2022-04-22 06:07:07

Another week has passed, and here we want to get the best pieces of content you found during the week!

It really can be anything:

- videos
- posts
- tweets
- books
- motivation
- etc.

Share anything that added value to your journey and could add value to other people's journey.

So, what is the best piece of content you found this week?
自學的 SoloLearn
Tags: sololearn
Published: 2022-04-22 04:47:53

最近找到的自學編程的網站，好像沒看到有人寫過中文的介紹，那麼就讓我寫寫吧！

[SoloLearn](https://www.sololearn.com/)，口號是「Learn Playing. Play Learning」，課程內容會切成許多非常簡短的章節，每個章節都可以透過影片或圖文進行，每次學習一點點，接著就是小測驗，SoloLearn 的測驗並不像 Coursera 那樣是同學互評式的，而是系統會幫你評分，題型有選擇、填充、排序，同學互評式的測驗中才會有的無標準答案型的題型在 SoloLearn 當然不會有。每次過了一個章節就可以獲得點數與成就，點數唯一的功能就是能在天梯排名中往上擠，除此之外一無用處。由此看來口號所謂的 playing 顯得有點薄弱啊！

不過儘管如此，他還是個很好的自學網站。相較於課程包羅萬象的 Coursera，SoloLearn 的課程內容、影片皆自行製作，風格、品質都很穩定。另外就像上面提到的，課程章節可以以影片或者圖文進行，兩者互相獨立，在不方便播影片的場合還是可以以圖文模式繼續上課，這點特別不錯。

SoloLearn 除了網站外，也有 iOS、Android、Windows 的 app，搭配它的超簡短章節結構，可以說利用零碎的時間邊上課邊打發時間確實是可行的。

以我現在在上的「[SQL Fundamental](https://www.sololearn.com/learning/1060)」為例，課程架構是這樣的：

![SoloLearn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d678onh2aks2dyi0ipfp.png)

1. Basic Concepts
2. Filtering, Functions, Subqueries
3. JOIN, Table Operations
4. Challenges
5. Certificated

如果進入 Basic Concepts，就會看到又分成許多小章節：

![SoloLearn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufjsnfti5rz5yc07atbb.png)

再點進去每個小章節內就會真正的進入課程內容，不過依舊被切成許多更小的節：

![SoloLearn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwj0sl27pi8lvanilo09.png)

如上圖所見，真正的課程內容就是這樣短短一小節而已。

左上角的「Text / Video」可以選擇要以圖文或是影片方式上課，Text / Video 再往右邊看就是該章節的進度條。

以上圖為例，「Introduction to Databases」內有四小節課程內容，以及四次的小測驗。

SoloLearn 的課程幾乎都是以這種方式進行的－一小段課程、一次小測驗，小章節結束也有小章節測驗、大章節結束也有大章節測驗，最後就是整個課程的大測驗。

接觸 SoloLearn 以來，對我個人比較受用的有以下幾點：

- 小段落、小測驗：運用零碎的時間就足夠上完一個小單元，輕鬆無負擔。
- 可以以圖文、影片方式上課：方便開影片的地方就開影片，不行也無妨，切換成圖文模式即可。
- 課程品質穩定：內容皆為 SoloLearn 自行製作，不僅課程品質穩定，學習模式也是穩定的。
- 免費：是的不用錢，佛心來著，令人不禁好奇他們要靠什麼吃穿？
Solved 'Ordered union' / FreeCodeCamp Algorithm
Published: 2022-04-22 04:26:53

```
function uniteUnique(arr) {
  let arrNumbers = [];
  let newArray = [];
  for(let i=0;i<arguments.length;i++){
    for(let j=0;j<arguments[i].length;j++){
    arrNumbers.push(arguments[i][j]);
    }
  }
  for(let i=0;i<arrNumbers.length;i++){
     (newArray.indexOf(arrNumbers[i]) == -1) ?
      newArray.push(arrNumbers[i]) : false;
    }
  return newArray;
}
console.log(uniteUnique([1, 3, 2, 3], [5, 2, 1, 4], [2, 1]));
```
How can I get this shimmering animation on a button in react native?
Tags: reactnative, css
Published: 2022-04-22 04:16:01

[Animation Link](https://photos.google.com/share/AF1QipOXNNvePsBtmIjbOyABtLuEqtPjRWUIHzeKvYerA-NsJ_5OM2OP0QxATY6SMKqPKQ/photo/AF1QipM0Yz63cgxLbk1JunuBjJO9PygkympoVw_PtDwx?key=YU1DR3pkcWZZUWVsQU84eTFadDdEMVpNQUFTaUJR)

I have implemented this animation using css in a react app, but I want to use this animation in react native, as there are no keyframes and transition properties in react native's stylesheet. So, I don't know how to implement this in react native.

Please help..
How to resolve "multi-word vue/multi-word-component-names" issue in VueJs 3 default option.
Tags: beginners, javascript, webdev, vue
Published: 2022-04-22 04:09:01

### Problem:-
While running the VueJs application failed with "Multi-word vue/multi-word-component-names" error.

```sh
/home/user/tutorials/animations-vuejs/src/components/HelloWorld.vue
  35:9  error  Component name "hello" should always be multi-word  vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)

```
### Solution:-
This problem is due to the 'eslint' setting issues. By default, the linting rule is enabled in Vuejs (Default ([Vue 3] babel, eslint)).

You can resolve this problem in two ways, 

#### Method - 1:

Rename the component name. Here in this case the component name provided is 'hello', you can change this as a multi-word like 'HelloWorld'.

```js
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
```
#### Method - 2:

Disable the linting rule. By disabling the 'eslint' execute the below command.

`$ npm remove @vue/cli-plugin-eslint`
Technical Documentation Project Done
Tags: html, css, freecodecamp, responsivewebdesign
Published: 2022-04-22 03:37:41

[Technical Documentation](https://codepen.io/trubdubz/full/WNdmBww)

***Hey everyone!***
 
Just sharing my progress on the "[Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/)" course on Free Code Camp 😎 . This one was for the technical documentation page and helped me learn a ton about nav-links and navbars for website navigation. One more project left to go that I hope to have complete before the weekend.🙃
Become a Javascript Magician with these tricks!
Tags: javascript, webdev, programming, tutorial
Published: 2022-04-22 03:36:57

Do you know how to perform tricks?
Maybe a card trick or something that involves ease of work or sleight of hand?

Being a developer means we get to work with lots of code. More often than not, it gets tedious.
How do we solve them? Easy!

We use certain tricks that simplify complex code and bring more efficient work to the table.

I've brought some tricks in JavaScript which will do exactly that.

### Get Unique items from an array
You might know about the spread operator. 
Do you that we can use it to create an array with no duplicate values from the original array?

```javascript
const arr = ["dogs", "cats", 1, 1, "lion", "lion"]
console.log(arr)
//OP: ["dogs", "cats", 1, 1, "lion", "lion"]

const uniqueArr = [... new Set(arr)]
console.log(uniqueArr)
//OP: ["dogs", "cats", 1, "lion"] 
```

### Easy conversion to a number
Any JavaScript beginner would know, that by adding a number and a string we get a string as output. 
We can solve it by using a **`+`** operator in front of the string to convert it to a number.

```javascript
const n1  = 10
const n2 = "20"
const total = n1 + n2
console.log(total)
//OP: 1020

//Fixed Code
const newTotal = n1 + +n2
console.log(newTotal)
//OP: 30
```

### Easy conversion to a string
Similar to the above one, we can convert a number to a string by concatenating empty quotes after the number.

```javascript
const num  = 10
console.log(typeof num)
//OP:  number

const numStr  = 10 + ""
console.log(typeof numStr)
//OP:  string
```

### Avoid if-else statements
There is a powerful operator known as the ternary operator.
The simplicity of the operator makes our code short and sweet.
```javascript
const aboolean = false
if(aboolean) {
	console.log("It is True!")
} else{
	console.log("It is False!")
}
//OP: It is False!

// Replacing with the ternary operator
aboolean ? console.log("It is True!") : console.log("It is False!")
```

### Get Max, Min, and Total from an array
The last trick is the **"reduce"** function.
We use the ternary operator here too to get the values.

```javascript
const nums = [1, 10, 6, 3, -2, 8]
const maxVal = nums.reduce((a, b) => {
	return a > b ? a : b	
})
console.log(maxVal)
// 10

const minVal = nums.reduce((a, b) => {
	return a < b ? a : b	
})
console.log(minVal)
// -2

const totalVal = nums.reduce((a, b) => {
	return a + b	
})
console.log(totalVal)
// 26
```

So that's it!
These are some tricks that I discovered recently. I'll use these from now onwards.
Let me know if you know about some more like these and if you follow these tricks on a day-to-day basis!
word salad
Published: 2022-04-22 03:33:22

how many times do you think you've been asked to do somethinng for free and told it should only take 10 minutes (6 months and 45 revisions later, and it's still going)

what's your dream project, like if you had unlimited access to computers, software, late nights eating candy and never had to worry about money again, what would you create?
Laravel Signature Pad Example
Tags: laravel, php, javascript, signaturepad
Published: 2022-04-22 03:22:41

In this article, we will learn about laravel signature pad example. we will perform a digital signature pad in laravel 7/8 and also we will use jquery signature pad plugin.

Signature pad is a JavaScript library that takes advantage of HTML5 canvas element and javascript to create a flexible and drawing smooth signature pad on your web page and app. So, if you want to implement a laravel e-signature or signature pad then follow the below steps and get the output of laravel digital signature example.

So, Let's start signature pad in laravel 7/8, jquery signature pad, laravel digital signature example, jquery digital signature plugins.

```
Step 1 : Install Laravel Application

Step 2 : Create Route

Step 3 : Create Controller

Step 4 : Create View File

Step 5 : Run Project
```

---

> **_[Read More : Laravel Signature Pad Example](https://techsolutionstuff.com/post/laravel-signature-pad-example)_**
Google Search For Web Scraping
Tags: googlecloud, googlesearch, webscraping, webdev
Published: 2022-04-22 03:22:26

Google Search for Web Scraping is the concept of advanced google search where we searches some information on google with custom conditions.

## In Web Scraping we can search the information from:

- Specific Countries
- Specific Languages
- Search for only specific query
- Showing search results from specific website
- Search results linked to specific website
- Search results related to specific website
- Showing search results which gives some rights like Free to use or share, Free to use or share including commercially, Free to use, share or modify
- Search results from last 24hours, previous month, previous year etc.
- Search results having specific file type like jpg, png, pdf, mp3, mp4 etc.

Using this Google Search For Web Scraping we find any type of data and can create different types information for multiple uses. For an example, Emails List for Marketing, Finding content from competitors website etc.

To find some useful contents from google Please Go to my [advanced google search form here](https://www.w3courses.org/google-search-for-web-scraping/).

---

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials [please visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)
Day 13: It's already morning
Published: 2022-04-22 01:27:18

Hi
I can't even understand how I'm still awake I had been working for like 2 days straight with only 3-4 hours of sleep. generally I had two weeks to work on these tasks but I don't even know how I'm spending sleepless nights just before the demo
i's now 3AM already I just passed here to make sure I don't miss my day I'm not thinking clearly I will have to end it by here 
I hope the weekend will be better

signing off...
Qual a diferença entre Spring e Spring Boot?
Tags: beginners, java, spring, springboot
Published: 2022-04-22 01:19:52

Quando se fala de frameworks Java, Spring certamente é o mais popular entre eles. Ao adentrar nesse universo você vai encontrar vários nomes como Spring Cloud, Spring Data, mas principalmente Spring Boot. Muitas vezes se fala na ferramenta Spring Boot ao invés de somente Spring. Mas afinal de contas, o que significa cada um deles e quais suas diferenças?

## Spring Framework

O Spring é um framework open-source para desenvolvimento de aplicações Java (atualmente se estendendo para Groovy e Kotlin). Sua primeira versão foi lançada em 2003 como uma alternativa para facilitar a construção de projetos J2EE (plataforma da Sun para rodar aplicações corporativas complexas e robustas). 

Entre as principais vantagens trazidas pelo Spring estão a Inversão de Controle (IoC) e Injeção de Dependência (DI) através do Spring Container, uma alternativa muito mais simples e leve do que o velho EJB (Enterprise Java Bean). Através dessa tecnologia nós podemos delegar ao Spring a criação e manutenção de componentes sem explicitar novos objetos através do `new`.

Outra facilidade implementada pelo framework é a possibilidade de usar módulos comuns no desenvolvimento de aplicações corporativas. Com algumas configurações é possível utilizar o Hibernate, JUnit e outras ferramentas para controle de sessão, mensageria e etc...

## Spring Boot

O Spring Framework facilitou muito o desenvolvimento de aplicações Java, porém ainda não tinha atingido o seu potencial máximo devido a complexa configuração necessária para rodar uma aplicação. Com isso em mente, no ano de 2014 é lançado o projeto Spring Boot com o objetivo de facilitar o setup do Spring.

Através dessa nova ferramenta não é mais necessário utilizar arquivos xml para configurações da aplicação, apenas anotações. A adotação de novas dependências no projeto também se tornou muito mais simples, bastando praticamente só importa-las através do maven ou gradle. Ao puxar o Spring MVC por exemplo, já vem embutido um server Apache Tomcat pronto para uso.

Em resumo, o Spring Boot é uma extensão do Spring Framework que traz diversos recursos pré configurados facilitando e acelerando o processo de manutenção e setup.

## Quando usar cada um?

Como o Spring Boot busca facilitar a utilização do Spring dificilmente um projeto atual não usará ele. A utilização do Spring Framework puro seria aconselhável somente em casos de necessidade técnica muito especifica em que as configurações embutidas do Boot atrapalhariam o projeto.
Create an online course for developers: idea to launch
Tags: tutorial, leadership, writing, onlinecours
Published: 2022-04-22 01:12:18

*Cover image by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*

**Creating and launching a successful course isn't easy, but it can be very rewarding.**

It's a great feeling when other developers tell you they learned a difficult concept thanks to what you taught them.

It can also be financially rewarding. Josh Comeau said he generated over [$500K in revenue](https://www.indiehackers.com/post/launched-my-first-course-earned-over-us-500-000-ama-4382405cd5) for his course "CSS for JavaScript Developers".

This is the first post in a series exploring how to successfully create and launch an online course for developers.

### About me

I’ve launched my first course on Udemy way back in 2016 ("The Ultimate Vue.js 2 Course"). I launched with a couple of hours of video and then gradually expanded it to around 10 hours.

Since then, I've released a number of other courses with a few successes (and a few flops) and have several thousand people have taken my courses.

In this series, I'll share some of the things I've learned along the way.

### About this series

Here are some of the topics I'll be covering in future posts:

- Who can create a course? Are you "expert" enough?
- How do you choose a good topic?
- How do you create the content?
- How do you market your course?

**Let me know what other questions you have or topics you’d like to learn about.**
April 21st, 2022: What did you learn this week?
Tags: discuss, weeklyretro, weeklylearn
Published: 2022-04-22 01:06:26

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}
Algorithms vs Building projects🤔
Tags: javascript, beginners, help, programming
Published: 2022-04-22 00:27:11

I need some advice...
In June, I plan on applying for FrontEnd-Devoloper jobs. Right now I am learning Basic Algorithm Scripting on [Freecodecamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-algorithm-scripting) which is kicking my butt right now. It takes me more than three hours to work on **one** problem on my own. Eventually, I would give up and have to look at the given solutions. 

I'd much rather focus more on building projects but I am worried that I will be asked to solve coding problems that uses algorithms during an interview. 

My question is, since I want to work as a frontend developer, should I focus 100% on building front end projects? Or, should I focus 50% on building projects and 50% algorithms? Which is what I am doing right now.

P.S. I know I will not know everything by June. But I need to set a time frame for me to start applying. I honestly feel that I can learn more while working on the job with the right team. I just want to get the basics out of the way and start job prepping from now.