teleren/devto huggingface dataset:
Mocking Services in Angular
Tags: angular, testing, mocking, services
Published: 2020-10-30 13:32:35

In part two of this series, I want to continue the discussion of testing in isolation and briefly turn our attention to services. 

While child-components are one type of dependency in a component, injected services are another type of dependency that must be mocked when writing unit tests.

Angular's foundation is built on dependency injection and services allow us to extrapolate logic into classes that can be shared between components (or other services).

### Creating & Injecting a Service

Using the Angular CLI, run the following command `ng g s employees`. The CLI will create a new service called EmployeesService and place it in the app directory of your project. 

Now, continuing the example we started in the last [article](https://braydoncoyer.dev/blog/mocking-components-in-angular/) , open the `AppComponent`, create a constructor and inject the `EmpooyeesService`. 

```
constructor(private employeesService: EmployeesService) {}
```

Because our `EmployeesService` doesn't have any functions and, more importantly, because the `AppComponent` isn't calling any functions from the service, the tests continue to pass. Regardless, we should get in the habit of mocking services as soon as we inject them in a component.

### Mocking the Injected Service

Open the `app.component.spec.ts` file. At the top of the file where we mocked out the `HeaderComponent` in the previous article, create a new class that will act as the mock of the `EmployeesService`.

```
class MockEmployeesService {}
```

Now that we've created a mock class, we need to tell the test environment to use that class instead of the real `EmployeesService`.

The `TestBed.configureTestingModule` currently only has a `declarations` array. Create the `providers` array and create a new object inside. Refer to the code below.

```
TestBed.configureTestingModule({
      declarations: [
        ...
      ],
      providers: [{provide: EmployeesService, useClass: MockEmployeesService}]
    }).compileComponents();
```

What does this do? 

When we run the tests for the `AppComponent`, we're informing the test environment that the component depends on the `EmployeeService`. Instead of using the real `EmployeesService`, we explicitly tell the environment to use the mock class we created above. 

Now we can write unit tests that are testing the `AppComponent` in isolation. 



### Conclusion

Great job! Now you know how to mock components and services! In the next article we'll begin to actually write tests in our Angular project! 

If you liked this article and want more content like this, read some of my  [other articles](https://blog.braydoncoyer.dev/), subscribe to my newsletter and make sure to follow me on  [Twitter](https://twitter.com/BraydonCoyer) !
I want to understand the deal with Google Ads
Tags: googleads, marketing
Published: 2020-10-30 13:32:34

---
title: I want to understand the deal with Google Ads
published: true
description: Is Google Ads worth my time, money and effort?
tags: googleads, marketing
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5eor9vzxscn6hru0ro4n.png
canonical_url: https://2.flexiple.com/no-vc-reports/i-want-to-understand-the-deal-with-google-ads
---

Today, let us discuss about an important channel to get quality leads for your startup - Google Ads

**Why Google Ads?**

You see, SEO takes time and it isn't always possible to rank for all keywords.

However, Google Ads:
a. Gives you the ability to present yourself in front of a potential customer immediately
b. Has almost no dependence on your domain's reputation
c. All this when customers are searching for something relevant to your product

This is a power most other channels can't give you.

**Process**
So, we discuss the process of:

1. Keyword research: Steps, tips & also great tools.
2. Writing Ad copy: Pointers to improve quality score.
3. Landing page optimisation: Focus on both quality score & conversion.

I discuss all this in quite a bit of detail, in [this report] (https://2.flexiple.com/no-vc-reports/i-want-to-understand-the-deal-with-google-ads). Do give it a read. Just 5 mins from your schedule - please :).

If you liked this post, would be great if you could share the below thread on Twitter 😃
{% twitter 1322148629923024897 %}
October 30th, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-10-30 13:27:02

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>

![A picture it a dog waving their paw with the caption “Learning, cool at school or at home”](https://media.giphy.com/media/1xpm1nTQiRL96Di3Q6/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 %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-6id %}

<center>

![Drama from Entourage screaming “Victory!”](https://media.giphy.com/media/lnlAifQdenMxW/giphy.gif)
</center>
How to test time-dependent code - time travelling in JavaScript
Tags: javascript, testing
Published: 2020-10-30 13:26:54

Say you have a piece of code that depends on the current time.

```javascript
function isAM() {
 return new Date().getHours() < 12
}
```

Let's create a test for this.

```javascript
it('is AM when it is before 12 noon', () => {
  return isAM()
})
```

The problem is that this test works fine before 12 noon, but will fail afterward.

To fix this, we can pass the date through the function as an argument.

```javascript
function isAM(date = new Date()) {
 return date.getHours() < 12
}
```

Now we can create tests checking a variety of dates.

So far there is nothing special happening. Allowing a date to be passed makes perfect sense for a function like `isAM`, but let's take this a step further.

Say, you now have another function that depends on `isAM`:

```javascript
function isDeliverable(item) {
  if (isAM()) {
    return false
  }

  // ...

  return true
}
```

For whatever reason, items are not deliverable before 12 pm.

Now how do we test this method? Passing a date to `isDeliveryable` certainly does not make much sense.

This is where we can make use of a handy npm library called `timekeeper`.

> `npm i timekeeper --save-dev`

timekeeper allows us to travel to a different time by mocking the native Date object.

Here's how we can test will look like:

```javascript
const timekeeper = require('timekeeper')
const { isDeliverable } = require('./delivery')

it('is not deliverable before 12 noon', () => {
  timekeeper.travel(new Date(2020, 1, 1, 7))

  expect(isDeliverable({ ... })).toBeFalsy()

  timekeeper.reset()
})
```

Awesome!! It's like [Rails](https://api.rubyonrails.org/v5.2.4/classes/ActiveSupport/Testing/TimeHelpers.html).

> As this mutates the native Date object, it's best to not run tests in parallel!
Friday Reading: How We Improved UI Bakery over the Last 6 Months 👻
Tags: webdev, startup, product, appdevelopment
Published: 2020-10-30 13:21:46

Hey there! 

For those using UI Bakery and those who are only looking at the platform (why looking, pop in!) – check all the updates and improvements the platform has got over the last 6 months. Gathered all of them together in one article.

Enjoy the reading & your Friday -> https://uibakery.io/post/how-we-improved-ui-bakery-in-the-last-6-months

Happy Halloween! 🎃
JavaScript Namespace Equivalent is the FileName
Tags: javascript, typescript
Published: 2020-10-30 13:20:24

<sub> We've been discussing the power of Javascript modules which aggregate functions, all of similar concerns, and put into a file; which is  a descriptive name of what they do. For example:

```typescript
FileName : array.ts
function findIndex(array,predicate)...
function addToTop(array,row)...
function moveToBottom(array,row)...

```
<sub>Each function in our module or container being array.ts, is strictly related to array work. Now assume other modules' functions wanting to apply the reusable array functions. The Architect also requires all function names that reuse the functions to be the same name.

```typescript
FileName: AddressComponent.ts
// Same name as in our reusable function
function addToTop(row){
  // we want the reusable function here
  addToTop(this.addresses, row)
}
FileName: PeopleComponent.ts
// Same name as in our reusable function
function addToTop(row){
  // we want the reusable function here
  addToTop(this.People, row)
}
FileName: Delivery.ts
// Same name as in our reusable function
function addToTop(row){
  // we want the reusable function here
  addToTop...
}
```
Anytime we type in addtoTop, intellisense shows more than one function. How do we discern which one we want? The answer is via the import statement we use.

```
import {addToTop} from 'array.ts';
import {addToTop} from 'AdddressComponent.ts';
import {addToTop} from 'PeopleComponent.ts';
import {addToTop} from 'Delivery.ts';
```
But the IDE will flag each subsequent import as an error. This is the equivalent of a 'namespace collision' in .NET. The compiler cannot know which one to use when it's referenced!

We help the IDE and ourselves simply by changing the name in the import.
```
import {addToTop} from 'array.ts';
import {addToTop as AddrAddToTop} from 'AdddressComponent.ts';
import {addToTop as PeopleAddToTop} from 'PeopleComponent.ts';
import {addToTo as DeliveryAddToTop} from 'Delivery.ts';
```
The namespace is the fileName and the variable name allows us to determine which one.  Variable names go a long way in describing what is really happening, but in the case of any remaining ambiguity, code comments are invaluable. 

```
\** @description This is a code comment 
* @param Here is doc on the first parameter
* @returns Tells the users what is returned
*\
```
While code comments appear slightly messy, they more than make up for it, when new developers are trying to learn the API.

JWP 2020 NameSpace JavaScript Modules
The Command-line utility for building React got an update - Create React App 4 is released
Tags: react, javascript, opensource
Published: 2020-10-30 13:18:51

It was a pleasure to sit down with Ian ([iansu](https://github.com/iansu)), the maintainer, to chat about the new features shipped recently as well as learn how he got started maintaining the Create React App (car) project. 

Create React App is a command-line utility for building React apps quickly, and the latest version has just released with support for Fast Refresh!

## Create React App v4 Highlights
- [Fast Refresh](https://github.com/facebook/create-react-app/pull/8582)
- [React 17 support includes the new JSX transform](https://github.com/facebook/create-react-app/pull/9645)
- [TypeScript 4 support](https://github.com/facebook/create-react-app/pull/9734)
- [New ESLint 7 Rules: New Jest and React Testing](https://github.com/facebook/create-react-app/pull/8978)
- [Jest 26](https://github.com/facebook/create-react-app/pull/8955)
- [Web Vitals support](https://github.com/facebook/create-react-app/pull/9116)
- [Switch to the Workbox InjectManifest plugin](https://github.com/facebook/create-react-app/pull/9205)

## PSA
Remember to fill out your survey when you eject ;)

## Joining the core maintainers

In addition to chatting about the new release, we learned how Ian onboarded on to the project as a maintainer. 

Similar to Batman movies, no maintainer origin story is the same. Ian's story started by suggesting a feature to convert SVG images by default. After that feature was merged, an invitation to join the org followed! 

Here the full interview on Youtube:

{% youtube sQoK6dKAqec %} 

Join us on the next Open Source Friday. Register with our [meetup group](https://www.meetup.com/GitHub-Virtual-Meetup/) to how you can get involved in open source.
What is the difference splice, slice, and split method in Javascript ?
Tags: javascript, html, webdev
Published: 2020-10-30 13:13:12

Today, I want to talk about **split()**, **splice()**, and **slice()** method. You know there are lots of functions with scarily similar names in land of javascript. That's why javascript methods can be confused each other sometimes.

## Split()
Split is a function that split the given string into an array of substrings. The split method doesn't change the original string array and will return the new array.
### Example

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

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

## Slice()
Slice method doesn't change the original array. It is method of both arrays and strings. Slice method can take two arguments. First argument is required, second argument is optional.
* First argument that represent where to start selection.
* Second argument that represent where to end selection.

### Example

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

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


## Splice()
Splice method changes the original array. It can remove element, replace existing elements, or add new elements to array. It can take 3+ arguments.
* First argument is index and requried.
* Second argument is optional and represent the number of items be removed.
* Third argument is optional and represent the number of items be added. Argument can be increased.

Sometimes we want to remove items from array and we can use **pop()** and **shift()** methods instead of **splice()** method. But it is easy to use and we can remove more than one item or add to the array.

### Example 1

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

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

### Example 2

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

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

## Conclusion
**Split()** method is used for strings array, **slice()** method is used for both arrays and strings. **Splice()** method is used for only arrays.
If you want to read more blog, you can check out my personal page.
https://syhnserkan.com/
Monetizing on an Airbnb Clone Websites
Tags: airbnbclonescript, airbnbclone, airbnb
Published: 2020-10-30 13:10:45

<a href="https://waioz.com/airbnb-clone" target="_blank">Airbnb Clone websites</a> are simple rental management system software that takes its roots from the success of Airbnb as a business. It essentially combines the renters and the hosts with aggregators enabling the system to bring together the ecosystem of renting out spaces digitally. A rental business has been on the popularity rise and has been popular for quite a while in USA, Europe as well as in Canada. This trend is slightly casting its effect across the other regions of the world as well.
Grafify - a JSON graph viewer based on D3.js and NetworkX
Tags: showdev, d3, flask, tailwindcss
Published: 2020-10-30 12:56:56

This week, I've finished building a mini-app for viewing a graph/network data using `D3.js`'s force-directed graph. The app also provides the `networkx`'s generated graph available for view. 

I built it using `Flask` for the backend, `TailwindCSS` for the UI, `Laravel-Mix` for the simple CSS and JS bundle, and hosted it on `Heroku`.

The app is in early development but available for everyone to try it on [https://grafify.herokuapp.com](https://grafify.herokuapp.com)

There will be some improvement in the future for graph customization, input validation, make the logo and more `networkx` generated-graph to add.
An Ultra Effective and a Harsh Guide to Machine Learning
Published: 2020-10-30 12:51:39


# Kaggle micro-courses

Instead of reading mindless buzzwords, start from a practical point of view. These micro-courses take less time to complete and you would get a gist of the syntax of these libraries.
Link: https://www.kaggle.com/learn/

Take the following Micro-courses : 
* Python
* Pandas
* Data Visualization
* Intro to Machine Learning


When you are working on these, you would face an abundance of errors and bugs. Right here is where genuine learning is going to transpire.

Upon completion of these micro-courses, you would be able to perform rudimental data analysis.

#Main Part

* Next, read Hastie, Tibshirani, and whoever. Chapters 1-4 and 7-8. If you don't understand it, keep reading it until you do. 
These are for stats.

You can read the rest of the book if you want. You probably should, but I'll assume you know all of it.

* Take Andrew Ng's Coursera. Do all the exercises in python and R. Make sure you get the same answers with all of them.

* Now forget all of that and read the deep learning book. Put TensorFlow and PyTorch on a Linux box and run examples until you get it. Do stuff with CNNs and RNNs and just feed-forward NNs.

* Once you do all of that, go on arXiv and read the most recent useful papers.

There you go. Now you can probably be hired in most places. If you need resume filler, so some Kaggle competitions. If you have debugging questions, use StackOverflow. If you have math questions, read and solve more math problems.
Planning to move? Top 3 cloud services comparison: AWS, Azure, Google Cloud
Published: 2020-10-30 12:37:50

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uefsf94ef05v4y4t6ubt.jpg)
No matter, if you are an average consumer or a solid businessman, consider cloud services as it’s a convenient and reliable system at least to store your personal data. At most if you are an enterprise owner, it’s a good chance to reduce costs on maintaining external infrastructure by organizing your business performance on the cloud platform.

The most leading cloud providers are Amazon Web Services, Microsoft Azure and Google Cloud Platform. Let’s see what each of it looks like.

**Amazon Web Services** is a well-experienced platform, providing services since 2006. It offers its consumers a full-blown virtual set of computers on request. AWS is considered nearly the most powerful option among the rest of services, for it comes with almost all attributes a computer has, like hardware, operating system etc. 

Computational power plays a big role for any informational-oriented business, so a good cloud platform should have effective tools for all calculation types, give opportunity for remote control and ability to independently scale anytime and from anywhere. AWS’ central computational network service is based on the Elastic Compute Cloud. No doubts, its computational power allows clients to perform analysis qualitatively.

**Microsoft Azure** (before Windows Azure) performs mainly through Microsoft-managed data centers and is often chosen by Microsoft associates. Azure started its activity in 2010 and now the platform comprises a variety of supporting instruments, programming languages, frameworks. What about its computational power? Microsoft Azure has strong Virtual Machine Scale Sets as its processing system center. The platform serves such famous companies, as HP, Apple, Fujifilm and much more.

**Google Cloud Platform** offers diverse services: compute, storage, networking, machine learning etc. and includes instruments for cloud management and security as well. It is the youngest (launched in 2011), but not less-experienced system. It has more than 50 resources and 6 global data processing centers. Google Cloud Platform uses the Compute Engine Service for processing power computation, but the price outranks mentioned above companies, which can be counted as a disadvantage.  

If you want to keep on learning these systems other vital parameters, such as hybrid approach, analysis, security, pricing etc., [this blog article](https://dinarys.com/blog/comparison-of-aws-vs-azure-vs-google-cloud) will help you to find the rest of answers.
Laravel 6 CRUD tutorial with example
Tags: laravel, crud, php, example
Published: 2020-10-30 12:27:50

In this example, I will show you how to make simple laravel CRUD(insert, update, delete or listing) operations with example.

Insert Update Delete module is the primary requirement for each project, you will understand how to use the route, controller, blade files, model and migration for crud operation in laravel 6.

[Read More](https://websolutionstuff.com/post/laravel-6-crud-tutorial-with-example)
I Don't Know JS Yet (Weekly Updated)
Tags: codenewbie, javascript, webdev, es6
Published: 2020-10-30 12:18:27

When I started my **web development journey**(roughly 2 years ago), my **first experience** was with **legacy codebase with pre-ES6 syntax**. It was ok-ish to honest cause I had no idea about the existence of ES6+ syntax.

Fast forward to today where ES6 is pretty much the benchmark, and after doing a dozen of projects using Vanilla JS(using ES5 and ES6+ syntax) with intermediate experience in ReactJS as well. **I decided to jot down my learnings in this Series 'I Don't Know JS Yet'**.

Head over to the below articles where we start from the stepping stone of Javascript and move our way towards intermediate level 👇 

👉[Declaration and Scope](https://dev.to/thehumzahasan/i-don-t-know-js-yet-declaration-and-scope-4hpf) **(Published)**

👉[Hoisting](https://dev.to/thehumzahasan/i-don-t-know-js-yet-hoisting-4c0j) **(Published)**

🤚Next article publishing soon.

Follow me to get notified as soon as I publish an article in this series.

[Hit Me up on Instagram](https://www.instagram.com/codewithbravopy) or [Let's Connect on LinkedIn](https://www.linkedin.com/in/humzahasannit/)
Wordpress Backup
Tags: wordpress, wordpressbackup, wordpressservices
Published: 2020-10-30 12:15:07

A backup protects you against hackers, malware, and unintended server outages that might, otherwise, render your website unusable or cause you to rebuild your site from scratch.

Luckily, backing up your website is not hard and it can be done for free thanks to a number of WordPress backup plugins. Some of these plugins even make it easy to restore your website from a backup for free and in this article, we’ll show you how to do it.

Backup Guard Plugin Overview

Backup Guard is a free plugin with more than 70,000 active installs and a 4,5-star rating. It’s one of the few rare plugins that offers both backup and restore options for free. It’s also very easy to use. Main features include:

Manually backup your site as many times as you want
Choose between backing up files, database or both
Download backups to your computer or store them in your Dropbox
Restore your site from a backup with one click
Cancel the backup process Support for multisite WordPress installations.

Read more on the page : <a href="https://www.inventive9.com/">How to backup wordpress site</a>