teleren/devto huggingface dataset:
ngTemplateOutlet: The secret to customisation
Tags: angular
Published: 2020-12-02 09:28:18

ngTemplateOutlet is a powerful tool for creating customisable components. It is used by many Angular libraries to enable users to provide custom templates. But how can we do this for our own components?

In the following article we demonstrate how to use `ngTemplateOutlet`, along with `ngTemplateOutletContext`, to make a component completely customisable.

Continue reading at [indepth.dev](https://indepth.dev/posts/1405/ngtemplateoutlet).

[![inDepth.dev](https://dev-to-uploads.s3.amazonaws.com/i/fqz6gvoqb19hild8wn6e.png)](https://indepth.dev/posts/1405/ngtemplateoutlet)
Hacktoberfest 2020 DONE
Tags: hacktoberfest, tshirt, thankyou
Published: 2020-12-02 09:26:42

My loot arrived for #hacktoberfest2020  Big shout out to everyone that made this event possible.  I enjoyed it.  Hopefully I will be able to put a cool project together for next year.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jidvfodubj9astmxztqv.jpg)
Deploy NodeJS/Express app to Heroku in less than 5 Minutes 🎯(with video)
Tags: node, express, heroku, devops
Published: 2020-12-02 09:26:20

We can deploy our NodeJS/Express Apps to Heroku easily. 🔥

To learn how to deploy your NodeJS/Express Apps to Heroku in less than 5 minutes, watch the video 🤓

{% youtube j1uLXEGPQ30 %}

SUBSCRIBE to YouTube Channel - https://www.youtube.com/channel/UCy5EgfydCQlVv_AM-FZyYcg?sub_confirmation=1
LIKE FB Page - https://www.facebook.com/the.destro.dev.show/
Follow on Twitter - https://twitter.com/destro_mas
Follow on DEV - https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋
<hr />
As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸

<a href="https://www.buymeacoffee.com/destrodevshow" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 117px !important;" ></a>
How to ActivatedRoute in Angular and how to mock it in Unit Tests
Tags: angular, testing
Published: 2020-12-02 09:24:02

The topic of testing is always mistreated online. It's easy to check that on a hundred articles explaining how to develop a certain functionality, only one or two include a description of how to test it. Even in large projects and in big companies, it is not rare to just forget about testing because time is short or because workarounds are possible. This is a terrible behavior: the bigger the project, the easier it becomes to break something while implementing something else and - without unit tests - there is no way to know it for sure.

In this tutorial, I will explain you how to use `ActivatedRoute` to pass a parameter from a component to another and how to mock it in the corresponding Unit Test.

# How to pass a parameter with ActivatedRoute

Let's say we have a Home component where we display a list of users. Our goal is to pass the user `id` via the web url, retrieve it and use it in a User component to collect - for example - all the user details:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3ew2qi7dwhfnfh9kemsh.png)

To achieve that, first we need to define the route in `app-routing.module.ts` as the following:

```
{
  path: 'user/:id',
  component: UserComponent
},
```

To pass the id we have two possibilities:

The first one is by editing the HTML in the Home component:

```
<a [routerLink]="['user', id]">
   <!-- When clicked I redirect to the User component -->
</a>
```

The alternative is to navigate inside a typescript function; import the `Router` and declare it in the constructor:

```
constructor(
  private router: Router
) { }
```

Then use it in your function:

```
this.router.navigate(['/user', id]);
```

In the User component we can at last retrieve the id.
Let's import the `ActivatedRoute` and declare it in the constructor:

```
constructor(
  private activatedRoute: ActivatedRoute,
) { }
```

Afterwards in the `ngOnInit()` we can get the id:

```
const id = this.activatedRoute.snapshot.params.id;
```

Once we have it, we can use it the way we like. For example, we can pass it as a parameter to a service and retrieve the User details as stated above.

# Unit test

It is pretty straightforward to mock the `ActivatedRoute` in the User component test file. All we have to do is to edit the `providers` list as follows:

```
beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ UserComponent ],
      imports: [
        RouterTestingModule,
        HttpClientTestingModule
        // ... whatever other module you have
      ],
      providers:
      [
        {
          provide: ActivatedRoute,
          useValue: {
            snapshot: {params: {id: '24fkzrw3487943uf358lovd'}}
          }
        }
      ]
    })
    .compileComponents();
}));
```

That's it!

Run `npm test` in a terminal to execute all your unit tests and check the outcome!
SAC2020 DEC01 Declaration of intents
Tags: scratch3, programming, ita
Published: 2020-12-02 09:18:01

Per chiudere degnamente quest'anno infausto, ho deciso di partire con un progetto che non penso di riuscire a portare a termine. Visto che quest'anno niente va come mi aspetto,  dovrei riuscire a farcela e potrete godervi poco più di venti post sull'uso dei cloni in Scratch.

Il mio progetto iniziale prevedeva che i post fossero in inglese, ma vista la scarsità di materiale in italiano, la complessità dell'argomento per chi sta iniziando a programmare e, non ultima, la mia familiarità con la lingua, ho deciso di scrivere queste note in italiano.

Si tratterà di interventi brevi da leggere in meno di dieci minuti ma che spero vi terranno impegnati per qualche minuto in più a rimuginare su quanto letto.

Un ultima considerazione prima di chiudere: tutto questo non sarebbe successo se non mi fossi imbattuto in quella piccola perla di progetto javascript che si chiama [tixyland](https://tixy.land) di [Martin Kleppe](https://twitter.com/aemkei). Penso che dovreste ammirarla e farvene affascinare anche voi. Io, per mia parte, ho deciso di riprodurla in Scratch3 ed usarla come ispirazione per questi post.
How to Host Your First Website
Tags: html, css, github, git
Published: 2020-12-02 09:16:06

Hello Guys ,In this Blog I will tell you how to Host your First website from scratch .
Follow These Steps :
### **Use Github**:
If you Dont know How Github works ,Dont worry ! . I will tell you :)
* ### Install Github Desktop:   
     you can click this link [here](https://desktop.github.com/) and also Create a Account in [Github.com](https://github.com) .
    * Now Open GitHub Desktop and Intialise a git repo .Click 'Add a New Repository '. Give the Repo name of your wish and click create .
Hurray your first Git Repo has been created !!
![Screenshot (6)](https://dev-to-uploads.s3.amazonaws.com/i/oele7w4i0vwiecl9sslh.png)
 
* ### Creating a New File in that Repo :
    * Open this repo in VS Code or Any other editor of your choice.
    * Create a File <code>index.html</code>.
    * See the Changes 
    ![Screenshot (7)_LI](https://dev-to-uploads.s3.amazonaws.com/i/w6n16c2fjjs58abhgnu1.jpg)
    ![Screenshot (8)_LI](https://dev-to-uploads.s3.amazonaws.com/i/p2msofe539uql0jwk9z8.jpg)
 
 * ### Commit Your First Changes :   
    * Open Github Desktop ,and Write a commit Message and then click 'Commit to Main '.
    Some Good practises to write commits :
        * feat - to Add a Feature.
        * fix -  to improve bug fix.
        * docs - changes in Document.
        * style - Everything Related to Styling.
        * Refractor - Here the code Changes ,but its neither bug fix or add a new Feature.
        * Test - Related to Testing.
        * chore -Updating Build Tasks,configs etc .
        ![Screenshot (9)_LI](https://dev-to-uploads.s3.amazonaws.com/i/8sot2wi5foy0605psf6j.jpg)
 
* ###  Finally Add a README.md File . 
    * [click](https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet) to know more.
    * Publish Your Repo to Github from your Local Pc .Thats it You Now understand how to use Github and Git Desktop.
    
### **Use Netlify to Host our Website** :
* First , Sign upto [netlify](https://app.netlify.com/) and link your Github Account.
* If you followed these steps , then the next steps are piece of Cake for you :) .

* Select <code>new Site</code> from repository and select your Github repository.

![Screenshot (10)_LI](https://dev-to-uploads.s3.amazonaws.com/i/3mrf1e1dba3bzmyjyfrs.jpg)

* Check Deploy and change Domain Name .
![Screenshot (11)_LI](https://dev-to-uploads.s3.amazonaws.com/i/ap8jqswc5ufx78h6a3ya.jpg)
 
# **YAY ! Your website is hosted now** :

One Final thing Left :
### Understand Pull and push Request  :

* push :
    * After you publish your Repository to Github ,From Now On if you make any changes to your website .
    Make sure to commit and push the code to your github account.
* pull : 
    * If multiple people are working with the same code base , then For Eg: if your friend commits and pushes the code, MakeSure you pull that code to your Local pc.Thats it !.


*Thank you ,Bye* :)
How does a senior FullStack developer start development and Which tool do the use?
Tags: django, programming, react, angular
Published: 2020-12-02 09:14:06

Hello, Everyone.
I sometimes hesitate when starting a new project because I can't select the proper tool for software engineering development workflow.
Let's assume that I have to design the database schema of the project and I use firebase Cloud Firestore.
In that case, what is the best tool for it?

Best regards.
Counting valid passwords in Advent of Code 2020 - Day 2 - JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2020-12-02 09:01:37

---
title: Counting valid passwords in Advent of Code 2020 - Day 2 - JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2020 (day 2)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2020 in Javascript
---

{% youtube UIHQLX8hJ5o %}
Convert user story of a simple library to ER and Relational diagrams in less than 10mins
Tags: database, sql, webdev, codenewbie
Published: 2020-12-02 08:56:49

#Introduction
The development process of an app/web app, follows 5 steps; 
Analysis, wireframing, Designing, Development, Deployment and Maintenance. Designing appears to be the 3rd step. In this step, it entails both frontend and backend design. The frontend design is concerned with the User Interface while the backend concentrates on the database. 

Database designs is very critical and important as it determines the nature the application works, data is manipulated and accessed. For applications that might scale up in the long term, it is very important to design a proper database which will suit future use and demands.

A user story is a tool used in Agile software development to capture a description of a software feature from an end-user perspective. A user story describes the type of user, what they want and why. A user story helps to create a simplified description of a requirement.

##Convert user story to ER Model
To convert from, read through the user story and note all verbs and nouns. The verbs represents Relationships while nouns represents entities(objects). Carefully select and pick out the necessary nouns(entities/objects) and verbs(relationships).

This is a sample user story I will be using [Readme](https://drive.google.com/file/d/1zZ-0U6u5qtxkKcCvnHqB6vqby4m-mc4Z/view?usp=sharing)

##ER Model Approach

###Entities(Objects)
1. Books
2. Book copy
3. Patron

###Relationships:
1. Loan
2. Reservation

###Attibutes(Properties):
1. ISBN, Title, Author, Name, Due date, Date of reservation, copy #, loan1, loan2, library card #.


###Primary Keys:

Attributes that can uniquely identify an entity
1. ISBN
2. Library card #
3. Copy #


##ER Diagram

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

##Relational Diagram

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ig2ua265ay7pcwvdh52.png)


##Drawing tool: 

[Lucid](https://lucid.app/documents)


#Conclusion:

The ER Model is based on real life scenarios; creating relationships between entities base on their real life applications.

The Relational Model is an approach in database design that organizes data base on first principle predicate logic. This organization primarily is in forms of tables.
Displaying loading animation on Fetch API calls
Tags: javascript, webdev, html, css
Published: 2020-12-02 08:50:55

In web development, one of the most important part is to use REST api. When I start working on api with vanilla JS, I noticed small time difference between call and response. It's good practice to show end user something is happening after his interaction with website.
So here's the guide of showing ***loading animation on fetch api calls with vanilla JS.***
Let's get started

#### HTML 
Let's start with html.

![HTML](https://dev-to-uploads.s3.amazonaws.com/i/o43wzy3o8ay5ltcgugo7.jpg)
`<textarea>` to get user input.
`<button>`   to submit data.
`<h1>`       to display response.

We are displaying loading animation using `<div id="loading"></div>`. This element is hidden by default. We are going to manipulate it, to show or hide it according our requirement.

#### Creating loader animation CSS
![Stylesheet for loader](https://dev-to-uploads.s3.amazonaws.com/i/0obq4noz12002n83mjxd.jpeg)

#### Working with Javascript
![JS First part](https://dev-to-uploads.s3.amazonaws.com/i/egkhb6sdq2xc1xot8lb0.jpeg)

In `function displayLoading()`:
- `loader.className = "display";` this will add *display* class to
`<div id="#loading"></div>`, which turn `visibility: visible;`

- We are using `setTimeout` to hide loading animation after 5 second. Sometimes we may get late response, then timeout time should be increased.

Now, when `displayLoading()` called it will display loading animation and when `hideLoading()` called it will hide loading animation setting `visibility: hidden;`

Now for remaining JS
This part is straight forward. `fetchHandler()` to fetch data from api.
 
*`url` I'm using is dummy url which only return 'Testing, you are' for any input.*

 ![JS second part](https://dev-to-uploads.s3.amazonaws.com/i/5z95e0ym95gwf372sivf.jpeg)

***
Here's the pen.

{% codepen https://codepen.io/vaishnav21/pen/ExgVNXY default-tab=js,result %}


>
Hey there, I'm #codenewbie, started documenting my journey of learning. Any suggestions are welcome
>
First Aid Kit for Git
Tags: git, github, beginners, webdev
Published: 2020-12-02 08:49:22

Here's the good news: __Git allows you to undo almost any mistake!__ 🤩
But the bad news is: __You have to know the right commands & tools!__ 😩

To help you learn the various ways to save your neck, I've compiled a series of __17 short videos__ and a handy cheat sheet - __free__ to download! 

You'll learn how to...

- ...correct and fix your very last commit
- ...discard uncommitted changes in your working copy
- ...undo and revert an old commit
- ...return to a previous version of your project
- ...restore a deleted branch or commit
- ...deal with merge conflicts like a pro

Go ahead and [download my "First Aid Kit for Git" for free](https://www.git-tower.com/learn/git/first-aid-kit/?utm_source=devto&utm_medium=guestpost&utm_campaign=first-aid-kit) and learn how to undo your mistakes like a Pro!
10 Practical Tips For A Successful Social Media Marketing Campaign
Published: 2020-12-02 08:30:33

Want it or not, social media marketing is obviously a part of our lives nowaday and successful social media marketing is exactly what you need for your business to grow. Never before in the history of entrepreneurship has there been an easier way to be able to instantly access hundreds of million customers around the world. The popularity of social media has discovered a new entirely industry that is social media marketing. For the businesses that realized the potential of digital marketing and have invested in the beginning stage in the early days of the 2010s, they have the big advantage of knowledge and also their brand in the digital world. But what happened for new businesses, a new start-up.. these companies just departure on the journey of building up the business. And you can easily see the knowledge and also experience these companies easy to go the uncertain paths.   

Do you know according to Pewresearch, 7 in 10 Americans use social media in 2020, compared with only 5% in 2005. It turns out social media marketing is an absolutely essential strategy of advertising these time rounds.       

There is alway many obstacles the businesses owners have to face to be able to achieve a successful social media marketing campaign such as : the time, quality content, handling limited budget, ad spending..  if handled incorrectly can lead you to lose all your spending money, team effort and ultimately the customers won't know about your brand and your service.

How can we run successful [social media marketing saigon](https://digital-launch.com/social-media-marketing-agency-vietnam/) ?

Super easy, check our 10 easy tips as below to execute your social media marketing strategy and see the rapid increase in your ROIs. 
1.	Set your benchmarks
2.	Know your audience  
3.	Choose your channels   
4.	Consider a manager 
5.	Work with influencer
6.	Deliver Consistently
7.	Grow an engage audience
8.	Use Analysts 
9.	Get reactive
10.	Create a great content 

otherwise you should also look for [web developer vietnam](https://digital-launch.com/webdesigner-saigon-vietnam/) for your website project
Excel Formulas to Sum the Values based on the Multiple Criteria!!
Tags: excelformula, excelformulas
Published: 2020-12-02 09:53:55

---
title: Excel Formulas to Sum the Values based on the Multiple Criteria!!
published: true
date: 2020-12-02 08:21:19 UTC
tags: ExcelFormula,Excelformulas
canonical_url: https://geekexcel.com/excel-formulas-to-sum-the-values-based-on-the-multiple-criteria/
---

Here, we will describe the simple **formulas to sum the values based on the multiple criteria in Excel Office 365**. Let’s get into this article!! Get an official version of ** MS Excel**  from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

[!["Formulas](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Formulas-to-sum-the-values-based-on-the-multiple-criteria.png)](https://geekexcel.com/excel-formulas-to-sum-the-values-based-on-the-multiple-criteria/formulas-to-sum-the-values-based-on-the-multiple-criteria/#main)
## General Formula:

- The below formula will help to sum the values based on multiple criteria.

**=SUMIFS(sum\_rng, crit\_rng1, crit1, crit\_rng2, crit2)**

## Syntax Explanations:

- **SUMIFS** – The Excel **SUMIF Function** will help to sum the cells that meet multiple conditions or criteria.
- **Comma symbol (,)** – It is a separator which helps to separate a list of values.
- **Parenthesis ()** – The main purpose of this symbol is to group the elements.
- **Sum\_Range** – It represents the input values given in the worksheet.
- **Criteria** – It is the specific value or criteria that helps to sum the values.

## Example:

- Here, we will show how to sum the values based on multiple criteria.
- In the below image, we will give the input values in **Column B** , **Column C** , and **Column D**.
- Then, enter the given formula in the formula bar section.
- Finally, it will display the result in **Cell G3**.

![Example](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Example-7.png)<figcaption id="caption-attachment-18453">Example</figcaption>

## Summary:

In this article, we guided you to learn the simple **formula used to sum the values in the cells based on multiple criteria in Excel Office 365**. Hope that this article is useful to you. If you have any **doubts/queries,** feel free to share it with us. To know further updates keep in touch with our website **[Geek Excel](https://geekexcel.com/)** and [**Excel Formulas**](https://geekexcel.com/excel-formula/) **!!**

### Read Also:

- [Excel Formulas to Sum the Values if Cells are Equal to Specific Value!!](https://geekexcel.com/excel-formulas-to-sum-the-values-if-cells-are-equal-to-specific-value/)
- [Formulas for Counting Rows that Matches Two or More Criteria in Excel!!](https://geekexcel.com/formulas-for-counting-rows-that-matches-two-or-more-criteria-in-excel/)
- [Excel Formulas to Sum if Cells Contain Text in Another Cell!!](https://geekexcel.com/excel-formulas-to-sum-if-cells-contains-text-in-another-cell/)
- [Formulas to Count Unique Text Values with Criteria in Excel!!](https://geekexcel.com/formulas-to-count-unique-text-values-with-criteria-in-excel/)
Excel Formulas to Sum the Values that are Less than a Certain Value!!
Tags: excelformula, excelformulas
Published: 2020-12-02 09:53:25

---
title: Excel Formulas to Sum the Values that are Less than a Certain Value!!
published: true
date: 2020-12-02 08:19:32 UTC
tags: ExcelFormula,Excelformulas
canonical_url: https://geekexcel.com/excel-formulas-to-sum-the-values-that-are-less-than-a-certain-value/
---

This page will explain the simple **formulas used to sum the values in the cells that are less than a certain value in Excel Office 365**. Let’s get into this article!! Get an official version of ** MS Excel**  from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

[!["Formulas](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Formulas-to-sum-the-values-that-are-less-than-a-certain-value.png)](https://geekexcel.com/excel-formulas-to-sum-the-values-that-are-less-than-a-certain-value/formulas-to-sum-the-values-that-are-less-than-a-certain-value/#main)
## General Formula:

- Use the below formula to sum the values in the cells that are less than a particular value.

**=SUMIF(range,”<criteria”)**

## Syntax Explanations:

- **SUMIF** – The Excel **SUMIF Function** will help to sum the cells that meet a single condition or criteria.
- **Comma symbol (,)** – It is a separator which helps to separate a list of values.
- **Parenthesis ()** – The main purpose of this symbol is to group the elements.
- **Range** – It represents the input values given in the worksheet.
- **Criteria** – It is the specific value or criteria that helps to sum the values.
- **Operator (<)** – This symbol is used to find the values which are less than a certain value.

## Example:

- Now we are going to see how to sum the values that are less than a particular number.
- Refer to the below image.
- Here, we will give the input values in  **Column C**.
- After that, enter the given formula in the selected field.
- Finally, it displays the result in **cell F3**.

![Example](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Example-6.png)<figcaption id="caption-attachment-18427">Example</figcaption>

## Verdict:

From this tutorial, you can get to know the simple **formula used to sum the values in the cells that are less than a specific number or value in Excel Office 365**. Hope you like this article. If you have any **suggestions,** don’t forget to share it with us. To know further updates keep in touch with our website **[Geek Excel](https://geekexcel.com/)** and [**Excel Formulas**](https://geekexcel.com/excel-formula/) **!!**

### Related Articles:

- **[Formulas for Finding Largest Value Smaller than a Specified Number!!](https://geekexcel.com/formulas-for-finding-largest-value-smaller-than-a-specified-number/)**
- **[Excel Formulas to Sum the Values in the Cells that Equal to either X or Y!!](https://geekexcel.com/excel-formulas-to-sum-the-values-in-the-cells-that-equal-to-either-x-or-y/)**
- **[Excel formulas to Extract Unique Value From a Column ~ Simple Guide!!](https://geekexcel.com/excel-formulas-to-extract-unique-value-from-a-column-simple-guide/)**