teleren/devto huggingface dataset:
How react profiler can help you to debug performance issues in your react app
Tags: react, javascript, showdev, tutorial
Published: 2020-01-18 17:07:24

---
title: How react profiler can help you to debug performance issues in your react app
published: true
date: 2019-12-02 00:00:00 UTC
description: Ben shows a real app and walk through how to use react profiler to check the performance
tags: ['react', 'javascript', 'showdev', 'tutorial']
canonical_url: https://learnwithparam.com/tech-talks/react-profiler-in-action/
series: Awesome talks curated by Param
---

> I have my new FREE workshop on *API design for beginners using Node Js and MongoDB*. It is my first workshop, let's learn together. You can register for the workshop [here](https://www.eventbrite.com/e/api-design-for-beginners-using-node-js-and-mongodb-english-tickets-89601978931)

In this talk, Ben shows a real-world example of how to use react profiler for checking performance issues in a react app and fix it.

{% youtube 00RoZflFE34 %}

> Follow me on [twitter](https://twitter.com/learnwithparam). I share my reading list and short tips on twitter
Continuous Deployment using GitHub and Netlify 😎
Tags: angular, netlify, github, devops
Published: 2019-12-01 23:31:34

I've found myself recently having an interest in all-things devops. I researched very briefly into how to setup continuous deployment using Netlify and integrating this with GitHub. From project creation to deployment, Netlify gave me the tools I didn't know I needed to quickly and easily deploy a website. **The aim of this post is to show how to deploy a basic Angular app within 5 minutes.**

![enter](https://media.giphy.com/media/Y2GFtz19vL1Zu/giphy.gif)

Quickest way to **create a new project** is to use the Angular CLI.

```
cd C:\Users\lorna.watson\Documents\Projects\Workspace
ng new angular-netlify
cd angular-netlify
```

Push your new angular project to a **new GitHub repository** with all changes. Now install the [Netlify Builder](https://www.npmjs.com/package/@netlify-builder/deploy) package and you will be prompted to enter both API ID and personal access token from your newly created Netlify site. If unsure how to find this, check out the link above.

```
ng add @netlify-builder/deploy
```

I haven't began to explore what's possible with Netlify yet - only just touched the surface. I signed up using my GitHub account and once signed in clicked the **New site from Git** button. Go through the mini wizard where you can connect your new Netlify site with your chosen GitHub repository. 

Almost there. Change your build command and publish directory accordingly.

Build command:
```
ng build --prod
```

Publish directory: *(can also be found looking in /angular.json at the output path)*

```
dist/angular-netlify
```

And let's deploy baby...

```
ng deploy
```

![enter](https://media.giphy.com/media/1ofR3QioNy264/giphy.gif)

Thank you for reading, hope this post was useful 😃🙌
The Github Streak Dilemma: useful or not?
Tags: discuss, productivity, github, codenewbie
Published: 2019-12-01 23:14:15

Gamification as a way of self-reward and motivation can be great, especially for people like me that are lazy.
Being able to see that something that you did gave you points, badges or similar can help in keeping high the motivation to continue with a project.

Today I want to talk about Github contributions and why I think it's a useful 'gamification' tool but why you should also avoid getting too caught up with chasing a streak.

As you can see the image below, I finally reached 2000 contributions in the last year on Github, distributed evenly between my time at the office and my time at home working on my blog and side projects (sadly not much Open Source contributions yet).

![my github contributions](https://thepracticaldev.s3.amazonaws.com/i/xsfjjlygtouxq9yppajj.png)

Since late August I've been on an almost perfect streak until I purposely decided to not push it too far and take a full day off.

Chasing the 'green squares' as a way of self-motivation helped me to continue working on my side projects but it had reached a point where I felt like I was coding just to get that square green and not really for the project itself.

I got too caught up in chasing the streak that I forgot the whole reason I started it.

The whole point of this short post is that I think trying to get a streak is a good thing but don't let it become your goal. I would emphasize the word **trying**, do your best to find some time throughout your day to work on side projects/open source and don't worry too much about your stats on Github.

The day I broke my streak on Github I did it purposely because I wanted to tell myself that I wasn't trying to chase a long streak, because I know that it would have been harder breaking it after 3 or 6 months.

Now when I look at one those green squares I know I did something useful towards one of my projects and not simply opening a Github issue with the title 'Fix stuff' (oh yeah I actually did that once) just because I wanted to keep the streak going.

What are **your thoughts** on chasing a streak on Github? Are you trying to get one, to keep the current one alive or you simply don't care?

---

Thank you very much for reading. Follow me on [DevTo](https://dev.to/albertomontalesi) or on my blog at [inspiredwebdev](https://inspiredwebdev.com/) for more.

<div class="promotional_banner">
<a href="http://a-fwd.to/5gUojI8" target="_blank">
<img alt="book banner" src="https://raw.githubusercontent.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript/master/assets/banner.jpg" />
</a>
<span>Get my ebook on <a href="http://a-fwd.to/5gUojI8" target="_blank">Amazon</a> and <a href="https://leanpub.com/thecompleteguidetomodernjavascript2019" target="_blank">Leanpub</a></span>
</div>
State machine advent: The simplest state machine that will improve your code today (1/24)
Tags: javascript, typescript, react
Published: 2019-12-01 23:05:12

As outlined in the [introduction post](https://dev.to/codingdive/introducing-state-machine-advent-24-bite-sized-blog-posts-about-state-machines-and-statecharts-2ce0), many bugs occur because we allow our applications to be in invalid states.

The concept of state machines is all about explicitly modeling your application states so they cannot be in an invalid state. Importing a new library like XState into your app can be intimidating, especially when already using another state management solution.
To get familiar with the concept of finite automata and to eliminate some low hanging bugs, you can create your first state machine with nothing but TypeScript and React.

```typescript
import React, { useState } from 'react';

enum FETCH_TODO_STATES {
  'IDLE' = 'idle',
  'FETCHING' = 'fetching',
  'ERROR' = 'error',
  'DONE' = 'done'
}

const Todos = () => {
  const [fetchTodoStatus, setFetchTodoStatus] = useState<FETCH_TODO_STATES>(
    FETCH_TODO_STATES.IDLE,
  );

  // Use setFetchTodoStatus in your event handlers or useEffect hook ...
};
```

Instead of defining boolean flags like `hasError`, `isFetching`, you define an enum (or object if you are using JavaScript) with a declarative description of the current state. In conjunction with the `useState` hook, your app can only be in one of the three states at any given moment. This simple change eliminates tons of invalid states while also reducing the complexity of your code. 🎉

An example of an invalid state would be `{hasError: true, isFetching: true}` which should never happen at any given moment. Yet, if you were to use booleans, it *could* happen and ultimately lead to bugs.


### About this series

Throughout the first 24 days of December, I'll publish a small blog post each day teaching you about the ins and outs of state machines and statecharts.

The first couple of days will be spent on the fundamentals before we'll progress to more advanced concepts.
#7DaysJS: Read My Sign
Tags: javascript, beginners, challenge
Published: 2019-12-01 23:08:33

---
title: #7DaysJS: Read My Sign
published: true
date: 2019-12-01 21:22:00 UTC
tags: javascript, beginners, challenge
canonical_url: https://lautarolobo.xyz/blog/7-days-of-js-read-my-sign/
cover_image: https://lautarolobo.xyz/images/7daysJS-7f7d8328.webp
description: Welcome to day 3 of #7DaysJS! 
---

Welcome to day 3 of 7 of Days of JavaScript!

Today’s challenge is to write a function that takes an array and says how many numbers are positives, how many numbers are negatives, and how many are zeros.

Example:

```java
[1,3,0,-1,0,5,-5]
...
{
zeros: 2,
positives: 3,
negatives: 2 
}

```

Good luck!

You can see the solution [here](https://lautarolobo.xyz/blog/solution-to-day-3-of-7-days-of-js/ "Solution to day 3 of 7 Days of JS").
Makers Week 3: To Be Frank, I'm Having Fun!
Tags: makers, ruby, sinatra
Published: 2019-12-01 20:19:38

So at the start of this week, we started working on the front end. We were using *"erb"* and *"Sinatra"*. It's more rewarding to see something visible after putting in some work rather than having to look into the terminal to see if what you've done does anything.

Day 1

This week started with a lot of *"erb"*, we were only using the parts similar to HTML, as well as a bit of *"CSS"*. We were also learned about *"HTTP"* requests and about routes. There was a lot of info to absorb although I had learned bits and pieces leading up to the course so it wasn't too daunting.

Day 2

We got a bit further through the work on the second day moving onto forms and integrating user input, which was interesting. We were able to take a name off a user and input it to the top of our web page. We also learned how to input something manually using query strings. I got to play around with capybara which is used for testing user input. It was interesting to how that worked and to see how we could use a webpage through *"pry"*.

Day 3

This is where we started our challenge which was a battle simulator, it looked an awful lot like pokemon. So basically it going to be a turn-based game where each player is given a chance to attack. But we have to start by taking player names. which we used a form for we had a lot of problems with this cause we were using shotgun. We later found out that shotgun isn't very compatible with sessions which had us stumped for a while. But at least we got it working and managed to put the names up on display. It was cool to see a dynamic webpage that we created.

Day 4

We got to move onto adding a player and game class at this point. It meant we had a game class which would start when you submitted your names. This would also make two players with the names provided. which keep everything together making everything neater. We also got around to adding hit points and an attack method but we didn't get around to using it.

Day 5

Today we started by using the attack method to do damage to player 2. We then moved on to making our controller a bit less cluttered. We removed the player 1 and 2 instance variables and move them into the game class. We then moved onto getting the game to switch player turns which we managed to do before running out of time.

Summary

Getting to make an actual functional webpage was a lot of fun. There is more of a reward for the work you put in and you can interact with your web page more like a real user. I enjoyed this part of the course cause everything is more tangible. Looking forward to the next couple of weeks we start JavaScript in week 5 and do our first group project in week 6.
Installing supervisord on a CentOS server
Published: 2019-12-01 19:48:51

If you install the `supervisord` package directly via the default repos you might get an outdated version.

1. To install the latest `supervisord` version you need to use:

```
easy_install supervisor 
```

2. After the installation to generate a plain config file run:

```
echo_supervisord_conf > /etc/supervisord.conf 
```

3. To start with the new conf run:

```
supervisord -c /etc/supervisord.conf 
```

4. Then to start all workers run:

```
supervisorctl start all 
```

5. To check the status run:

```
supervisorctl status 
```

If you are getting lots of FATAL errors, you are better off stopping the workers and checking the logs:

```
supervisorctl stop all 
```

This is pretty much it! Hope that this helps!


This article was originally posted on [here](https://bobbyiliev.com/blog/installing-supervisord-on-a-centos-server).
Easy to create .gitignore for the dotnet developers
Tags: csharp, dotnet, beginners
Published: 2019-12-01 19:41:35

---
title: Easy to create .gitignore for the dotnet developers
published: true
description: Take advantage of the build-in gitignore feature by typing dotnet new gitignore.
tags: #csharp, #dotnet, #beginners
cover_image: https://raw.githubusercontent.com/rafalpienkowski/resources/master/gitignore/git-logo-png-transparent.png
---

**TL;DR** Starting from .Net Core 3.0, you can take advantage of the build in the .Net framework gitignore file template just by typing `dotnet new gitignore` in your terminal.

---------

I assume you are familiar with the idea of a gitignore file. In short words, a .gitignore file is a plain text file in which each line contains a pattern for files or directories to be ignored by the git.

I am a dotnet developer. I don't know if you had this problem, but every time I wanted to create a new repository on the git repository, I lacked the build-in .gitignore file. [Russ Hammett](https://dev.to/kritner) made me realize that the GitHub platform has prepared a gititnore file. Interestingly it isn't named C#, CSharp, dotnet. Nope, none of those things. It's called VisualStudio. Quite obvious.Once again thanks Russ.

![Repo creation](https://raw.githubusercontent.com/rafalpienkowski/resources/master/gitignore/repo_vs.png)

I like to have a tidy repository without `/obj/*` and `/bin/*` objects, or other IDE specific things included. Storing such files is both messy and could be dangerous. For instance, you could forget to clean from those artifacts your super-secret password.

One of the possible solutions was to copy a .gitignore file from one repository to another. Not a very elegant but effective solution. Another option is to use sites like https://www.gitignore.io/. 

Today that has changed. The .Net Core 3.0 SDK gives us a hand.  I bet you now dotnet new command. It has a lot of parameters like *mvc*, *webapp*, or *webapi*. Starting from SDK 3.0, there is a new parameter **gitignore**, which creates a dotnet gitignore file.

```sh
dotnet new gitignore
```

The created file is a good starting point. It contains rules for the most popular IDEs like Visual Studio, Rider, Visual Studio Code, and tools like NCrunch, R#, Visual Studio profiler, or StyleCop. Of course, you can add your own rules to it.

There is still missing documentation on the [docs Microsoft site](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new), but you can check it on yourself by typing in your command prompt:

```sh
dotnet new
```
and going through the documentation which is attached there. Here is 

![terminal output](https://raw.githubusercontent.com/rafalpienkowski/resources/master/gitignore/terminal.png)

I think that the online documentation will be completed soon. Meanwhile, you can take advantage of the build-in gitignore feature, and you don't have to copy the file from other repositories.

P.S. Don't forget about other dotnet cli commands and options.

Cheers!
Ionic 4 Angular 9|8 Date & Time picker Example
Tags: ionic, angulardatetimepickerexample, angular98
Published: 2020-02-07 08:57:06

---
title: Ionic 4 Angular 9|8 Date & Time picker Example
published: true
date: 2019-12-01 19:37:47 UTC
tags: Ionic, Angular Date & Time picker Example, Angular 9|8
published: true 
canonical_url: https://www.positronx.io/ionic-angular-date-time-picker-example/
---

The post [Ionic 4 Angular 8 Date & Time picker Example](https://www.positronx.io/ionic-angular-date-time-picker-example/) appeared first on [positronX.io](https://www.positronx.io).

**In this step by step tutorial, we will learn how to add datepicker and time picker in an Ionic 4 Angular 8 app.**

Ionic 4 offers Date and Time picker UI component, which allows us to implement date and time without using a third-party module. Integrating date and time picker in Ionic/Angular is merely effortless. It supports various Display Formats, and you can even set min and max date-times in an Angular 8 Ionic app.
 

[click here to read more](https://www.positronx.io/ionic-angular-date-time-picker-example/)
Angular Testing Nested Components and Components that Rely or Use Other Components in Their Templates
Published: 2019-12-01 19:31:56

You have two Angular components:
- `HomeComponent`
- `HelloComponent`

The template for `HomeComponent` looks like this:

```html
<h1>Hello!</h1>
<app-hello name="Rudolf"></app-hello>
```

The component definition for `HelloComponent` looks like this:

```ts
@Component({
  selector: 'app-hello',
  // ...
)
export class HelloComponent {
  @Input() name;
}
```

When you try and test the `HomeComponent`, there will be errors because you need to include the `HelloComponent` in the TestBed configuration.

You will have to stub out the nested component and that should look like this:

```ts
@Component({ selector: 'app-hello', template: '' })
class HelloStubComponent implements Partial<HelloComponent> {
  @Input() name;
}
```

Then in the TestBed configuration you will have something like this:

```ts
TestBed.configureTestingModule({
  declarations: [
    HomeComponent,
    HelloStubComponent
  ]
}).compileComponents();
```

To make things more convenient, you can include the definition of the stub component within your component file:

```ts
// hello.component.ts
const selector = 'app-hello';
@Component({
  selector,
  // ...
)
export class HelloComponent {
  @Input() name;
}
@Component({ selector, template: '' })
export class HelloStubComponent implements Partial<HelloComponent> {
  @Input() name;
}
```

When compiling your Angular app, the module will declare `HelloComponent`. When running your tests, the test bed module configuration will declare `HelloStubComponent`.

You can use [`Partial<T>`, a utility type from TypeScript](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt) to ensure that your stubbed component matches the interface of the actual component class.

By keeping the stub definition close to the actual component class, you can re-use the stub in multiple tests.

## Stubs and Stub Providers for Services in Angular

For a service, you can do something similar:

```ts
// world-service.ts
@Injectable({ providedIn: 'root' })
export class WorldService {}

export class WorldServiceStub {}
export const worldServiceStubProvider = {
  provide: WorldService,
  useFactory: () => new WorldServiceStub()
}
```

Then in your tests you can setup the TestBed like this:

```ts
import { worldServiceStubProvider } from 'path/to/world-service.ts';
// ...
TestBed.configureTestingModule({
  // ...
  providers: [ worldServiceStubProvider ]
});

// and then you can use the following to get the reference to the stub provider from the TestBed:
TestBed.get(WorldService);
```
Found My Old Zune... What Should I Do With It?
Tags: watercooler, zune, discuss
Published: 2019-12-01 18:34:55

Found this [bad boy](https://www.amazon.com/Zune-Video-Player-Discontinued-Manufacturer/dp/B003ES5GWW) while visiting my parents over Thanksgiving. So what should I do with it?

I was thinking I could install Raspbian and turn it into a [Zune-Hole](https://pi-hole.net/), but are there any other cool things I can use it for? Any ideas?
🎄 Writing your Advent Blog Posts with GatsbyJS
Tags: gatsby, blog, react
Published: 2019-12-01 18:30:07

The Advent has officially began and it's time for some advent blog posts.

I made a [GatsbyJS theme](https://www.gatsbyjs.org/docs/themes/what-are-gatsby-themes/) to help you get started on the #Trend.

Source: https://github.com/agneym/gatsby-theme-advent

Demo: https://blog.agney.dev/december

# Installation

```bash
npm i @agney/gatsby-theme-advent

# OR #

yarn add @agney/gatsby-theme-advent
```

You can start using it by adding it to the `gatsby-config.js` file:

```javascript
module.exports = {
  plugins: [
    {
      resolve: `@agney/gatsby-theme-advent`,
      options: {
        contentPath: "src/content",
        assetPath: "src/assets",
        basePath: "/december", // Tell the theme which URL to render the theme at.
      },
    },
  ],
};
```

The `contentPath` defines where your markdown files are hosted, there has to be at least a markdown file when you get started. 

Markdown files with following `frontmatter` are supported:

```
---
title: "This is the first advent gift"
date: "2019-12-01T22:12:03.284Z"
published: true
---
```

The `assetPath` refers to the path to directory where the theme can pick up the cover image from. Currently, you can add an image named `cover.jpg` at this directory and it will be passed through `gatsby-plugin-sharp` and appear as your cover image. 

The `basePath` is the path to render the advent page on. You can use "" or leave it out to have it render on the main page. 

### Have Fun 🎄


Feel free to raise an [issue](https://github.com/agneym/gatsby-theme-advent/issues) or [contribute](https://github.com/agneym/gatsby-theme-advent#contributing).

Do add a comment if you are participating in the #DevAdvent Blogging 💖
Angular Karma Tests Running Twice (or More Times)
Published: 2019-12-01 18:29:20

Just ran into this issue where Karma test runner looked like it was running multiple times.

It turns out that the Angular CLI command for running tests, `ng test` will run *all* projects defined rather than just the default project from `angular.json`.

This causes some weirdness when you have file-watching turned on.

If you have 2 projects, the 1st project's tests will run and then will re-compile on any files changed. The 2nd project's tests will not run *until you press Ctrl+C* and then you will see them run.

There's an answer to this problem on StackOverflow: https://stackoverflow.com/a/59127114/9903
Apache JMeter 5.2.1
Tags: apachejmeter, performancetesting, jmeter521
Published: 2019-12-02 15:35:19

---
title: Apache JMeter 5.2.1
published: true
date: 2019-12-01 18:17:42 UTC
tags: Apache JMeter,Performance Testing, JMeter 5.2.1
canonical_url: 
---

Last week, Apache JMeter team has released its newer version JMeter which is 5.2.1. I have already published couple videos of Apache JMeter 5.2 in my YouTube channel, please check it out. 

This is the minor release which has the bug fixes which are identified in the earlier versions. Totally four defects have been fixed.

* Bug 63926 – JDBC Connection Configuration: Add ability to set connection properties
* Bug 63906 – NPE for InfluxDB backend listener during failover testing
* Bug 63910 – Broken maven poms in released 5.2 version
* Bug 63911 – ApacheJMeter_config.jar content has changed (bin moved to run and missing files)

I suggest you to upgrade to the latest version of JMeter to run your tests hassle-free.

[Read more in my blog](https://qainsights.com/apache-jmeter-5-2-1/#more-6694 "Apache JMeter 5.2.1")

The post [Apache JMeter 5.2.1](https://qainsights.com/apache-jmeter-5-2-1/) appeared first on [QAInsights](https://qainsights.com).