teleren/devto huggingface dataset:
Talking a little about PineTime and the heartrate monitor
Published: 2021-07-26 05:25:12

---
title: Talking a little about PineTime and the heartrate monitor
published: true
description: I will look into the PineTime watch and the code for the heartrate monitor. PineTime is a "smart" watch that you can be a part of building the software to. The code is pretty small and pretty easy to follow.
tags:
cover_image: 
---

{% youtube 1jslBDNKUU0 %}

I will look into the PineTime watch and the code for the heartrate monitor. PineTime is a "smart" watch that you can be a part of building the software to. The code is pretty small and pretty easy to follow.
React refactor code #2
Tags: javascript, webdev, beginners, react
Published: 2021-07-26 04:59:01

---
series: React refactor code
---
**Actual code :**
```javascript
const Counter = ({}) => {
  const [counter, setCounter] = useState(0)

  const reset = () => setCounter(0)

  return (
    <div>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>+</button>
      <button onClick={() => setCounter(counter - 1)}>-</button>
      <button onClick={() => reset()}>Reset</button>
    </div>
  )
}
```

**Refactor stage 1 :** 
instead of `setCounter(counter + 1)` if we use `increment()` it would be more readable.
```javascript
const Counter = ({}) => {
  const [counter, setCounter] = useState(0);

  const reset = () => setCounter(0);

  const increment = () => setCounter(counter + 1);

  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>{counter}</p>
      <button onClick={() => increment()}>+</button>
      <button onClick={() => decrement()}>-</button>
      <button onClick={() => reset()}>Reset</button>
    </div>
  );
};
```

**Refactor stage 2 :**
No inline functions
```javascript
const Counter = ({}) => {
  const [counter, setCounter] = useState(0);

  const reset = () => setCounter(0);

  const increment = () => setCounter(counter + 1);

  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>{counter}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};
```
6 tips to quickstart your developer journey!
Tags: technology, tips, selfimprovement, softwareengineering
Published: 2021-07-26 11:13:39

---
title: 6 tips to quickstart your developer journey!
published: true
date: 2021-07-26 04:49:59 UTC
tags: technology,tips,selfimprovement,softwareengineering
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/626/0*XINvAam9-wJjm4o6)](https://medium.com/@alexitron77/6-tips-to-quickstart-your-developer-journey-cfb7b73d58bb?source=rss-dae18faac8d4------2)

What every developer should know before starting coding!

[Continue reading on Medium »](https://medium.com/@alexitron77/6-tips-to-quickstart-your-developer-journey-cfb7b73d58bb?source=rss-dae18faac8d4------2)
HTML TUTORIAL FOR BEGINNERS PART 5
Tags: html, 100daysofcode, webdev, programming
Published: 2021-07-26 04:37:24

We learned how to add heading elements, paragraph element, image and anchor element, today it's time to learn how to nest them within themselves.
####Like example below:
```
<>...<>...</>...</>
```
If you notice we encapsulated one element within other element, let's break it down a little bit for better understanding 👇
For example if we want to nest paragraph element inside heading elements we could do this👇
```
<h1>I am heading element<p>,but I am paragraph element encapsulated within heading elements</p></h1>
```
The above code is the general formula or method of nesting HTML elements within each other.
For if we want to convert an image into a link we could do this 👇
```
<a href="https://www.unsplash.com" target="_blank"><img src="https://www.unsplash.com/logo.png" alt="unsplash logo"></a>
```
If you have any questions or suggestions let me know in the comment section below 🗨👇👍.
Please like ❤ and share ↗️🏹
Anatomy of  a Flutter App
Tags: flutter, android, ios, dart
Published: 2021-07-26 04:22:23

## Widgets, widgets and widgets!
So, as I mentioned before, everything inside a **Flutter** app is a _[widget](https://flutter.dev/docs/development/ui/widgets-intro)_. And you build widgets upon widgets just like Lego blocks on Lego blocks in order to create your app.
![lego-blocks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyiacr5px1qcfiu9ffuk.jpg)
So let's say that we decided to create a brand new app.

The first thing we might do is we might create a _[Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html)_. And this is just a blank screen for our app. And inside the scaffold, we're going to add an app bar at the top. And this is a pre-built widget that simply looks like an app bar and acts like an app bar. And it's also super easy to create.
![flutter-appbar-layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9bnzyhkvc9yjhd9rm08.png)
 
Now, the other thing I'm going to put into my scaffold is a container. And this container is just a box and it's going to contain the content of my app. Now, the container is going to have a column. So this is a column. And so now we can put widgets inside the column that stack vertically.

![flutter-container](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7kj4tpi4uad58f87e1x.png)
 

So, for example, the first thing I might put into my column - at the top - is a row. And the second thing is - I might put in - a piece of text. So now I have a column with two items - with two widgets: a row at the top and some text at the bottom. Now I can go deeper into my widget tree. And in my row, I'm going to add some text and an icon.
![phone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gs88debfocogruxizmuf.png)

So when I want widgets to be positioned vertically - one on top of the other - then I'll use a column to lay them out. If I want widgets to be side by side horizontally, then I'll use a row. And if I wanted to add in a piece of text, then I would use a text widget. If I wanted to add an icon, then I would use an icon widget. If I want to add an image, then I would use an image widget.
![0_7hLwrQ9PjkOa_hFQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wejuwm9psttfnhchij0l.png)
 
So you get the point.

And by the end of building our app, we end up with a widget tree like what you see on the right here
Now, our widget tree is just a whole bunch of widgets that are nested within each other.

![widgets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1v5kwucqtzxxzrv86vk.PNG)
 
Thanks for the read,
Praveen Varma :)
More Flutter repos can be found [here](https://github.com/geekyprawins).
How to Terminate Horizon during Deployment in Laravel Forge
Tags: laravel, laravelhorizon, laravelforge
Published: 2021-07-26 23:12:56

---
title: How to Terminate Horizon during Deployment in Laravel Forge
published: true
date: 2021-07-26 04:00:00 UTC
tags: laravel, laravelhorizon, laravelforge
canonical_url: https://postsrc.com/posts/how-to-terminate-horizon-during-deployment-in-laravel-forge
---

[**Laravel Horizon**](https://laravel.com/docs/master/horizon)

Horizon is a beautiful dashboard for Laravel applications that make use of the Redis queue. In this short post, you'll learn how to terminate Horizon process on Laravel Forge deployment process.  

![](https://laravel.com/img/docs/horizon-example.png)<figcaption>Laravel Horizon dashboard</figcaption>

  
  
**Deployment Scripts**  
Inside the deployment script, do add the command below and on each deployment, it will gracefully terminate the master Horizon process on the machine. Any of the jobs that horizon is processing will be completed then horizon will exit.

```
// existing deployment scripts

// command to terminate laravel horizon
php artisan horizon:terminate
```

  
Do note that you'll have to set up horizon daemon by accessing the "daemons" page on the dashboard and defining the configuration. The command would be "php artisan horizon" and the directory is the full path of where the website is located in the machine.  

[![](https://postsrc.com/storage/G2Cuc2CLeixPdtNeOtXSRUJFHQ7n3TVNQwzZDJ0m.png)<figcaption>Laravel Forge New Daemon</figcaption>](https://postsrc.com/storage/G2Cuc2CLeixPdtNeOtXSRUJFHQ7n3TVNQwzZDJ0m.png)

  
  
By having a daemon, the horizon instance will automatically be restarted by the process monitor such as the supervisor upon each successful deployment.  
  

[![](https://postsrc.com/storage/Edb8Xaz7auAIKG4GblYVmfeNCnuCQPCcLPVsntTc.png)<figcaption>Active Daemons in Laravel Forge</figcaption>](https://postsrc.com/storage/Edb8Xaz7auAIKG4GblYVmfeNCnuCQPCcLPVsntTc.png)

  
Hope this tutorial is helpful and happy learning.

This post is originally published at [PostSrc](https://postsrc.com/). If you like this kind of tutorial, I would really appreciate it if you give it a visit.
Back-Tracking N-queen challenge
Tags: leetcode, backtracking
Published: 2021-07-26 03:58:09

# What is backtracking?
Backtracking is a brute-force approach that finds all possible solution. What is brute-force? Brute-force exhaustively analyze the input and constraints to find a specific solution. Basically, backtracking is find the way of your way through a cornfield maze. 

# How does it relate to a maze in 4 steps? 
1. Enter the cornfield 
2. Take a path. Ex. Left, right
3. if Dead end, trace back aka "backtrack" to the intersection and explore another path.
4. Repeat steps 2 and 3 until you find exit.

# Explanation
The maze in essence is related to backtracking because we traced back one step and made a different turn to find another possible solution.

# More notes about backtracking  
1. Represented in a State-Space Tree
2. Bounding function is used to add constraints to find the desired solutions. Note: We can have more than one solution in backtracking. 
3.  DFS!!!! [DFS = forms a root to child "path" by "path"]

# More notes about brute-force
1. DP is a brute-force approach that finds the maximum or minimum optimal solution.
2. Branch and Bound is also a brute-force approach that is BFS[form the tree level by level].

# Challenge: Solve the n-queen problem
## Background
Queen is most valuable piece on the board...actually, the king is most valuable because if you don't have a king, you lose. The queen is the 2nd most valuable piece on the chess board. This piece is able to move diagonally, horizontally, and vertically. Your job is to place 7 queens on a chess board where each queen does not pose any threat to each other.
I have solved this challenge in 10 minutes. Can you beat it?
# Steps 
1. Navigate to the link below and have fun:
Click on me [https://www.chess.com/analysis]
2. Click on 'Setup' and 'Trashcan' icon
3. Have fun!

# My Solution
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1c0253668qtdpxwkgbd.png)

Reference: 
Introduction to Backtracking [https://www.youtube.com/watch?v=DKCbsiDBN6c]
Top 5 coolest VsCode Themes you should try.
Tags: vscode, themes, productivity, codenewbie
Published: 2021-07-26 03:50:24

## 1) Shades of Purple
![Shades of Purple](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnxu6bw1se7i7jrzrgba.gif)
If you are a fan of purple, you are absolutely gonna love this theme. It was one of the first 'Shades of X' themes. Nowadays, you can find shades of orange, blue, pink, etc very easily in the Cs Code marketplace. Even if you are not a purple fan, this theme is worth giving a try.
<a href="https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple" target="_blank">Check it out here.</a>
## 2) SynthWave 84
![SynthWave](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlm27ew1lx55wt3uedl7.jpeg)
If you ever dreamt about neon themes in Vs Code, congrats, because your dreams just came true. This is the neon theme for VS Code, for all the Neon lovers. It can be customized as well as the neon glow can be turned on or off. 
According to me(and apparently a lot of other devs), this is the coolest VS Code theme ever developed.
<a href="https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode" target="_blank">Check it out here.</a>
## 3) Cyberpunk 2077 themes
![Cyberpunk](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx5rcdkp6saq3o4yifgz.png)
This, as the name indicates, is inspired from the Cyberpunk 2077 game which was launched in 2020 last year. It looks super cool and will make you code even more and inspire you every day. It is worth a try.
<a href="https://marketplace.visualstudio.com/items?itemName=max-SS.cyberpunk" target="_blank">Check it out here.</a>
## 4) Material Themes
![Material](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ve72c4g7u3g3gg79uom.jpeg)
This is just a must have, and if you only want to install one theme from all the 5 i am telling about, this would be it. This theme is a collection of several themes flavoured to different styles like material oceanic, material palenight, etc. It merges well with the code and the syntax highlighting looks good.
<a href="https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme" target="_blank">Check it out here.</a>
## 5) Bearded Themes
![Bearded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4066vpgmy5krxvqyoud.png)
Don't get fooled by its fancy name, this theme is a collection of 20 themes for different people and for different needs. It support syntax highlighting well and works well and is quite a  fast one.
<a href="https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedtheme" target="_blank">Check it out here.</a>
## Conclusion
There are 1000s of other themes available out there. But i thought these to be the most interesting ones and significantly different ones. So go ahead try out few themes and then go with the ones you love.
![That's a wrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52mnl0jtmx08rt6tztao.gif)
## Comment your favorite VS Code themes below and let me as well as others know.
ThankYou.
5 Easy Ways To Make Money As A Developer
Tags: programming, datascience, javascript, python
Published: 2021-07-26 03:43:53

In this article, I’ll show you 5 easy ways to make money as a developer.

### 1. Freelancing

For many developers, freelancing is profitable source of income.  Some people take it as a full-time job, while others do it as a part-time job to earn additional cash. Some platforms like Fiverr, Upwork, and many more offer a great opportunity for anyone to start freelancing, but there is a lot of competition there, so be sure to stand out among them 

![image (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627268254795/dKcE2b7c5.png)

### 2. Sell an Ebook

Writing an ebook is one of those things that may pay off for a long time. You can write a highly useful ebook as a developer that covers a certain topic of software development. Alternatively, you may opt to describe a programming language in such a way that your readers will have a better understanding of it.

Writing books is also a wonderful method to build your brand and demonstrate your expertise in the area. Once you have completed writing you Ebook, You can start selling it online 


![image (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627268654011/BMjFw9Uhx.png)

### 3. Teach People

Teaching other people how to code is the greatest and possibly easiest method to generate money as a developer. You may accomplish this in a variety of ways. The first is to develop and market online course.You may offer courses on your own website or on sites like Udemy and Pluralsight. You can also teach people individually, that can be online or in person. If you teach people in this way, you’ll earn a lot more money. 


![image (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627269072235/khc8cftxE.png)

### 4. Sell Templates

Selling templates is another way to generate money. You may accomplish this by visiting websites such as Themeforest, where anybody can sell their designs for a nominal charge each transaction. Selling online courses is quite similar to this.
![image (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627269268065/bJsXxylG1.png)

### 5. Application Development

As a developer, you may put your coding abilities to use by creating and selling computer and mobile applications. With a solid understanding of Swift, JavaScript Objective-C, you can quickly create a useful iOS application.

You may profit from it by releasing it on the app store for anybody to download and purchase.

![image (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627269801175/UMHT_PPlmP.png)

### Conclusion 

These are many other ways that you can use to make money as a developer. These are not all the ways that exist, but these are the most easiest ones.

I hope you found this articles helpful. If you need any help please let me know at comment section

Let's connect on  [Twitter](https://twitter.com/suhailkakar)  and  [LinkedIn](https://www.linkedin.com/in/suhailkakar/)  

👋 Thanks for reading, See you next time
Add Estimated reading time in Laravel
Tags: webdev, laravel, programming
Published: 2021-07-26 03:38:29

If you are building a news website or a website that publishes articles, you may need to add an estimated reading time on each page of the post. If you create a website with laravel, you can add an estimated reading time by using the helper macro in laravel as below.

```
use Illuminate\Support\Str;

Str::macro('readDuration', function(...$text) {
    $totalWords = str_word_count(implode(" ", $text));
    $minutesToRead = round($totalWords / 200);

    return (int)max(1, $minutesToRead);
});

echo Str::readDuration($post->text). ' min read';
```

{% twitter 1389881758267625473 %}

don't forget to visit [codelapan.com](https://codelapan.com), and find articles on the topic of [web development](https://codelapan.com/category/web-development), [web design](https://codelapan.com/category/web-design), [software testing](https://codelapan.com/category/software-testing) and others.
Create a Great User Experience with React, TypeScript, and the React Testing Library
Tags: react, typescript, testing
Published: 2021-07-26 03:35:35

I'm always willing to learn, no matter how much I know. As a software engineer, my thirst for knowledge has increased a lot. I know that I have a lot of things to learn daily.

But before I could learn more, I wanted to master the fundamentals. To make myself a better developer, I wanted to understand more about how to create great product experiences.

This post is my attempt to illustrate a Proof of Concept (PoC) I built to try out some ideas.

I had some topics in mind for this project. It needed to:

Use high-quality software
Provide a great user experience
When I say high-quality software, this can mean so many different things. But I wanted to focus on three parts:

Clean Code: Strive to write human-readable code that is easy to read and simple to maintain. Separate responsibility for functions and components.
Good test coverage: It's actually not about coverage. It's about tests that cover important parts of components' behavior without knowing too much about implementation details.
Consistent state management: I wanted to build with software that enables the app to have consistent data. Predictability is important.
User experience was the main focus of this PoC. The software and techniques would be the foundation that enabled a good experience for users.

To make the state consistent, I wanted a type system. So I chose TypeScript. This was my first time using Typescript with React. This project also allowed me to build custom hooks and test it properly.

Setting up the project
I came across this library called tsdx that sets up all the Typescript configuration for you. It's mainly used to build packages. Since this was a simple side project, I didn't mind giving it a try.

After installing it, I chose the React template and I was ready to code. But before the fun part, I wanted to set up the test configuration too. I used the React Testing Library as the main library together with jest-dom to provide some awesome custom methods (I really like the toBeInTheDocument matcher).

With all that installed, I overwrote the jest config by adding a new jest.config.js:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkowtbf4a1oyevd0e01b.png)

 And a setupTests.ts to import everything I needed.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmp34v00edri7awv3rnc.png)
In this case, I just had the jest-dom library to import. That way, I didn't need to import this package in my test files. Now it worked out of the box.

To test this installation and configuration, I built a simple component:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alhtgi2fxjun0zjz4uje.png)
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjzo3bfw2j7c7zyi1zwu.png)
 
 Now we are ready for the next step.
TDD Conference 2021 - TDD Misconceptions - Olena Borzenko
Tags: tdd, codenewbie, tutorial, webdev
Published: 2021-07-26 03:07:36

First International Test Driven Development took place on July 10th. 

In this series, I will include every talk together with my notes and further reading.

Hopefully, a lot of readers will watch and rewatch the talks, as they are worth several reviews.

Let's continue...

## Bio 

Olena is a full stack developer at The Adecco Group from Berlin in Germany. She has previously worked in a service company based in Ukraine and took a part in the creation of various products from small startups, B2B applications, to enterprise platforms. Moreover, she is passionate about new technologies, clean code and best practices. In her free time, when she’s not spending it on hobbies, she likes to build demos around real-life use cases, share knowledge with others, and the opposite, learn about someone else's experience.
 
> TL;DR: TDD Requires commitment con communication. People must agree with it to embrace it. 

## Talk

{% youtube TbkBMeAt4K0 %}

# My Personal notes

## First Project
- TDD is complicated and time-consuming.
- One of her projects with TDD had very tight schedules and the team needed to rush.
- User stories were constantly changing.
- They had no idea how to write tests properly.
- The purpose of TDD was not well communicated.
- "Found a bug? Fix it. Write a test to prove it was fixed" methodology.
- They aimed at 100% code coverage
- Most of the test cases were useless, aimed at coverage, not at quality.
- They heavily used [mocks](https://dev.to/mcsee/code-smell-30-mocking-business-3glm).
- They didn't avoid critical defects.
- Useless cases with full mock combinations just to target 100% coverage

## Second project 

- This one was more BDD/Behavior-based.
- Just write the code needed to pass the test.
- BDD was easier to implement than TDD.
- After BDD, TDD is easier to carry on.
- TDD assists in better design.
- TDD breaks code into smaller pieces.
- TDD makes code easier to refactor.
- They used [Cucumber](https://cucumber.io/) 
- Pre-release defect density on Microsoft and IBM decreased between 40% and 90% by using TDD.
- Most of the time we don't need a refactor stage.
- Even simple code needs tests because tests are also the specification.  ​

# Speaker Links

- Twitter [@borzenko_lena](https://twitter.com/borzenko_lena) 
- LinkedIn [@olena-borzenko](https://www.linkedin.com/in/olena-borzenko/)
- @borzenko_lena  

​
* * *

Please follow TDD Conference on:

- [YouTube](https://www.youtube.com/channel/UCKn-DadPoyYssfAOMk1LSew)
- [Twitter](https://twitter.com/tddconf)