teleren/devto huggingface dataset:
Node backend and api calls same project
Tags: node, express
Published: 2019-10-30 07:57:39

Hi guys, 

I fail to understand how after creating a BackEnd website with Node and Expressjs, if i want to make some functions async ex when someone like a post i want to call an API and return the response in json and append it to the html... 

I can create a route and threat it as a API call or i have to create a new project where i use only API calls? it's seems wrong to me cause i want only to allow some functions async...
Two small directives for work with observable in Angular 8 without subscribe
Tags: angular, rxjs, directives, async
Published: 2019-10-30 07:38:59

Two small directives for work with observable in Angular8+ without subscribe:
❄️ coldClick - easy way for run http post from template.
❄️ coldForm - easy way for submit typed form data to remote server from template.

## Installation

```bash
npm i --save ngx-cold
```

## Usage \*coldClick

app.module.ts

```js
import { HttpClientModule } from '@angular/common/http';
import { NgxColdModule } from 'ngx-cold';

@NgModule({
  imports: [
    ...
    HttpClientModule,
    NgxColdModule,
    ...
  ],
  ...
})
export class AppModule {}
```

app.component.html

```html
...
<p>Save with *coldClick</p>
<button
  *coldClick="let coldSave of onSave"
  (click)="coldSave.call({userData:'custom data'})"
  [disabled]="coldSave.isLoading"
>
  {{ coldSave.isLoading ? 'Save in processing...' : 'Save' }}
</button>
...
```

app.component.ts

```js
import { HttpClient } from '@angular/common/http';
...
constructor(private httpClient: HttpClient) {}
onSave(data: any) {
  return this.httpClient.post('/api/user', data);
}
...
```

## Usage \*coldForm

app.module.ts

```js
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxColdModule } from 'ngx-cold';

@NgModule({
  imports: [
    ...
    HttpClientModule,
    NgxColdModule,
    ReactiveFormsModule,
    FormsModule,
    ...
  ],
  ...
})
export class AppModule {}
```

app.component.html

```html
...
<p>Save with *coldForm</p>
<div *coldForm="let coldForm of searchField; with: { delay: 700, change: onSearch, result: [] }">
  <input [formControl]="searchField" />
  <div *ngIf="coldForm.isLoading">Loading...</div>
  <pre [innerText]="coldForm.result|async|json"></pre>
</div>
...
```

app.component.ts

```js
import { HttpClient } from '@angular/common/http';
import { FormControl } from '@angular/forms';
...
searchField = new FormControl();
constructor(
  private httpClient: HttpClient
) {}
onSearch(search: string) {
  return this.httpClient.get('/api/users', {
    params: {
      search
    }
  });
}
...
```
## Links

[Sources](https://github.com/EndyKaufman/ngx-cold) - Sources on github

[Demo](https://endykaufman.github.io/ngx-cold) - Demo application with ngx-cold.

[Stackblitz](https://stackblitz.com/edit/ngx-cold) - Simply sample of usage on https://stackblitz.com
Best project management software for Developers
Tags: productivity
Published: 2019-10-30 07:34:21

Here are some of the best project management software for developers IMO. 

Why did I choose these below project management software? 

##### Reason 1: Support Keyboard Shortcuts up to 90% of the time. 

##### Reason 2: Logical workflow, not heavy in features

##### Reason 3: Flexible features

##### Reason 4: Have Open API 

## [Wrike](https://wrike.com) 

Wrike supplies you with customizable dashboards that you can adjust to your different projects and be flexible with your software development. They use Dynamic Request Forms and Gantt charts to help you schedule, prioritize, and assign tasks.

Custom Workflows shows a clear progress picture. You can also use the Wrike Proof Tool to share visually and provide feedback. Collaboration is easy with Wrike. You can tag videos and you are able to provide instant feedback.

## [Quire](https://quire.io)

Relatively new to the market, but Quire is a quite dynamic software. A lot of developers talk about Quire and its high functioning keyboard shortcuts. I've tried them out myself and I must say Quire is probably the only project management software that has the full keyboard shortcut for each feature. 

Some of their features (for example: Kanban board, infinite hierarchical task list) are more advanced than some of the paid solutions and they remain free (until 2020). Collaboration is made easy with Quire as well. 

## [Trello](https://trello.com)

Needless to say, Trello is already one of the most popular solutions for project management software. If you're a diehard fan of Kanban board, Trello is definitely the perfect solution for you. 

Though you have to pay for most of the power-ups features to get the best out of Trello, it's worth every penny I must say. Trello is really the most powerful software for Kanban board users. The only downside is their report - not really advanced compared to other solutions. 

## [Jira](https://jira.com)

Scrum users must know about Jira (for other users, I think Jira might be a bit complicated) for team collaboration and communication. 

Their Scrum boards can be used by multiple teams and the board is super easy to use. Jira pricing plan can be a bit complicated but if your developer team has more than 20 people, Jira should be one of the most valuable investment.
Keep calm and do less
Tags: philosophy, stoic, watercooler
Published: 2019-10-30 07:07:07

The last one of the [Five good emperors](https://en.wikipedia.org/wiki/Nerva%E2%80%93Antonine_dynasty#Five_Good_Emperors), Marcus Aurelius had a note in his [Meditations](https://amzn.to/2K2gt2L): _"If you seek tranquillity, do less."_ This is one of his thoughts that is the most applicable to software development.

How many times did you break the code and had you no idea what went wrong? How many changes did you introduce? Would it have been different if you had introduced only one change?

"If you seek tranquility, do less", do only one change at a time. We can see this pattern by looking at different best practices. 

Test-Driven Development teaches you the same thing. You either write a small new test, you implement a tiny new feature to pass the test you just wrote, or you refactor your code while keeping your tests green. You do only one thing, but you do that one thing well. You keep your steps small and even if you break your code, you have no problem. You must know at which step you broke it and even if you don't manage to figure it out, you can go back to your previous commit by not losing much.

So regarding commits. Keep them small, but well described. Don't mix refactoring the legacy code and implementing a new feature in one commit. If something goes wrong, you will have hard times to localize the root cause. Keep your commits small and responsible for one thing.

Think about the Single Responsibility Principle. Think about high cohesion. A method or a function should not do much. It should do, it should be responsible for only one thing. Look at your code, most probably the majority of your units should do less. By having small classes with clear responsibilities, you will gain tranquility on the run as your code will adapt easier to changes.

Think about pull requests and code reviews. Let's stay with the previous example. If you create a pull request with refactoring old code and with the implementation of a new feature in it, your reviewers will have hard times to understand. Been there, done that. It might be difficult for them to understand which changes were made the code more flexible and which parts are for the change itself. 

Why not creating the pull requests? 

One for the refactoring and once it's merged, one for the change itself? Both your reviewers and your clients will be grateful thanks to more understandable changes and less shipped bugs.

Keep calm. Think big. Make small steps. Do one thing at a time. It will keep you calm.

_This article has been originally posted on my [blog](http://sandordargo.com/blog/2019/10/30/keep-calm-and-do-less). If you are interested in receiving my latest articles, please [sign up to my newsletter](http://eepurl.com/gvcv1j) and [follow me on Twitter](https://twitter.com/SandorDargo)._
Flutter: How to rotate an Icon?
Tags: flutter, dart
Published: 2019-10-30 07:05:40

## Transform widget to the rescue
A Transform widget “transforms” (i.e. changes the shape, size, position and orientation) its child widget before painting it.

### Transform.rotate
**Transform.rotate** rotates a child by an angle in radians not degrees. So, to rotate by 90 degrees, you need to multiply 90 x π/180 to get the value in radians.

Code:
{% gist https://gist.github.com/mewben/f84ba2e3037f0af202d3aa2df96aa6dc %}

Don't forget to import 'dart:math' to use pi. :) More info on Transform widget here: {% medium https://medium.com/flutter-community/a-deep-dive-into-transform-widgets-in-flutter-4dc32cd575a9 %}
Job hunting is draining, how can I make it tolerable at the least?
Tags: productivity, mentalhealth, career, motivation
Published: 2019-10-30 06:10:44

---
title: Job hunting is draining, how can I make it tolerable at the least?
published: true
description: Making job hunting tolerable, if not enjoyable, at the very least.

tags: productivity, mentalhealth, career, motivation
---

Hey! This is my first post and as the title reads, I'm drained after 5 months of continuous job hunting. Applying to over 300+ companies, reaching out on LinkedIn, and all the other job-hunting tactics required daily starts getting to you after awhile, so I'm looking at maybe learning some methods people have used to shake up those feelings? For instance, I'm not really interested or can focus on personal projects because of the stress of worrying about finding a job (and paying off loans soon), and whenever I do list a personal project on my resume, it never comes up in an interview so I feel "what's the point". I would love to find joy again working on personal projects like how I used to a few months ago. 

My current routine is:
- Wake up, down a glass of water, head to the gym
- Shower and get myself ready
- Eat
- Do work on the computer
- Play Pokemon Go
- Do work on the computer
- Eat
- Sleep

Thanks for any input you might have!
Pden- decentralized social media
Tags: blockchain, socialmedia, dapps, blockstack
Published: 2019-10-30 06:08:53

Hey devs,

I would like to introduce you to [Pden](https://pden.xyz). 

Pden is a decentralized social media. It is built on [Blockstack](https://blockstack.org) platform.

It aims to improve the conversations in the online space. It is completely secure and private. The ownership of the data and identity is with users. We have made certain design choices that we feel will add a lot of value to enhance conversations in the online space. These are

1. No vanity metrics
2. Consensus based discussions 
3. Transparent feed

I believe that these design choices will improve social media space as whole. 

You can download Pden [here] (https://play.google.com/store/apps/details?id=com.dk.pden) and share your feedback
Does Dapr fits your need? Then do not reinvent the wheel
Tags: dapr, microservices, distributedsystems
Published: 2019-10-30 05:31:18

###What is Dapr?
Distributed APplication Runtime. An event-driven, portable runtime for building microservices on cloud and edge.

![distributed image goes here](https://media.defense.gov/2018/Aug/03/2001950301/-1/-1/0/180803-F-FT687-001.JPG)

###Why should you use Dapr?

* Are you writing distributed applications?

* Are you looking to build resilient, microservice applications and building your own internal mini-frameworks to make this happen?

* Do you have your services written in multiple programming languages or frameworks?

* Do you find it difficult to implement state handling, pub/sub messaging, which enable event-driven, resilient architectures?


Dapr enables developers using any language or framework to easily write microservices, providing industry best practices to solve distributed systems problems.

![dapr image goes here](https://cloudblogs.microsoft.com/uploads/prod/2019/10/Dapr-2-1024x486.webp)


Checkout the git repo. If it fits your need then do not reinvent the wheel.
{% github dapr/dapr %}
Google bids goodbye to Flash
Tags: webdev, design, html
Published: 2019-10-30 05:28:20

As kids, we were addicted to Flash games. Flash gave us a respite from boring static web pages. But just like every good thing must come to an end, it's time to say goodbye to Flash. Read more here:

https://www.hashtagtechgeek.com/2019/10/google-stop-supporting-flash.html
Write Semi-Advanced Timer Component in Vue
Tags: component, timer, stopwatch
Published: 2019-10-30 05:09:32

---
title: Write Semi-Advanced Timer Component in Vue
published: true
tags: component, timer, stopwatch
---

I thought it was hard to build a semi-advanced timer based on the VueJs component. Turns out the result is quite good to use on my project, maybe in yours too. 

{% codesandbox vl89i %}
FireO - Querying and filtering Data in Firestore
Tags: fireo, firestore, orm, python
Published: 2019-10-30 04:43:05

FireO provides powerful query functionality for specifying which documents you want to retrieve from a collection. These queries can also be used with either `get()` or `fetch()`

### Simple Queries 

The following query returns all cities with state CA

```python
cities = City.collection.filter('state', '==', 'CA').fetch()
```

The following query returns all the capital cities

```python
cities = City.collection.filter('capital', '==', True).fetch()
```

Read More About [FireO Querying and Filtering](https://octabyte.io/FireO/querying-data/querying-and-filtering/)

Give some good feedback and stars to [FireO](https://github.com/octabytes/FireO)
Singleton Design Pattern
Tags: designpatterns, csharp, singleton, beginners
Published: 2019-10-30 04:42:44

<mark>Singleton design pattern</mark> makes sure that there should be <mark>only one instance of the specific class at a given time</mark>. Please refer to the example code for <mark>C# implementation</mark>.

## Example

```csharp
// Singleton class Customer
public class Customer
{
    private static readonly Lazy<Customer> _lazy = new Lazy<Customer>(() => new Customer());

    private Customer() { }

    public static Customer Instance
    {
        get
        {
            return _lazy.Value;
        }
    }
}
```
I want my credit!
Tags: webdev, beginners, startup, hiring
Published: 2019-10-30 04:38:32

---
cover_image: https://images.pexels.com/photos/209037/pexels-photo-209037.jpeg?cs=srgb&dl=adorable-animal-animal-world-209037.jpg&fm=jpg
---

*Short post*: What are your views about developers getting credit for what they develop in spite of (mainly web based) application owned by the business bosses?

**Update**: The company didn't provide me any sort of resource or mentor as I expected from an ordinary internship. Later, I decided to leave that exploititive environment. Do tell me your opinion about it.

*Long post*: So some days back, i filled an application for free internship as a web dev. And after some discussion, casual interview by the owner of the startup firm, they sent me an offer letter with so many terms and conditions mentioned in it. With some strength I read it all. wufff!!!

And voila! I found some points which intrigued me to discuss with him. I asked him straight forwardly that whatever project I work on, I should get the credit. He said and I quote, "Definitely! You can mention it in your resume". 

So I replied him that I just don't wanna add a project in my resume but also want to back it up with some sort of credit. I suggested him to add a Developer Credit Page on the web app or just a small section. And I don't think that it should be any problem as they will have the copyright and the payment of the work. **I just asked for the Credit.**

:( And He said No.

What is **your opinion** in this regard? Should we developers not get the credit while working under some company/agency for what we develop?

For a Fresher like me, **Experience matters more than money**. And, experience which can be truly proved or showcased to others is of highest value. But if this is what corporate is. Then I don't think that I am a good fit for this culture.
"array-contains-any" & "IN query" now on Firebase Firestore! Sample codes and demo.
Tags: firebase, firestore
Published: 2019-10-30 03:37:36

---
title:  "array-contains-any" & "IN query" now on Firebase Firestore! Sample codes and demo.
published: true
description: explain about the new "array-contains-any" & "IN query" in firestore.
tags: Firebase, Firestore
cover_image: https://thepracticaldev.s3.amazonaws.com/i/j2co7ow6jcnk562z9bcp.png
---

The convenient query **array-contains-any** & **IN query** has finally entered the JS SDK, so I tried using it!

Since it has just entered the SDK, there is no shadow or shape in the official document yet (as of 10/30/2019)

# What is array-contains-any

Until now, if you specified "array-contains" for "where", you could search for a document **with a specific value in array**.

The actual code looks like this, and you can search for documents with "tech" in the array field in the blogs collection.

```js
firebase
      .firestore()
      .collection("blogs")
      .where("tags", "array-contains", "tech")
      .get()
```


array-contains-any is an evolution of it. You can search for documents where the array contains one of the specific values.

The actual code looks like this, and you can search for **documents that contain either "tech" or "game" in the array field** in the blogs collection. 

Basically the same as array-contains, but you can pass an array as the third argument of where.

```js
firebase
      .firestore()
      .collection("blogs")
      .where("tags", "array-contains-any", ["tech", "game"] )
      .get()
```

And if any of this array is in, it will hit the search.

Now you can make a query that can describe an OR condition. Therefore, I think that the range that can be searched with Firestore alone will expand.

# What is IN Query

The usage is as follows!

```js
firebase
      .firestore()
      .collection("blogs")
      .where("type", "in", ["tweet", "podcast"] )
      .get()
```

A query that hits if it exactly matches either tweet or podcast in the type field.

You can now OR search for specific fields like array-contains-any! (Since it is an exact match, free string search is not possible yet)

Example of use) In a fold that contains a fixed type as described above, you can search for "when it matches a tweet or podcast".

**This is a query that executes the data corresponding to "==" in all the arrays and summarizes the results.**

# Created a sample site

[https://firestore-sandbox.netlify.com](https://firestore-sandbox.netlify.com)

Here you can execute both Array Contains and Array Contains Any on the sample data.

Click here for the repository.

[https://github.com/nabettu/firestore-sandbox](https://github.com/nabettu/firestore-sandbox)


# Summary

The conditions that can be used so far are the same as array-contains, but the range of search can be made without using Algolia, so it seems to be useful!

that's all!
How do you market yourself as a freelance web developer (working on some freelance platform or on your own)? Do those work?
Tags: discuss, career, freelance
Published: 2019-10-30 02:46:39

---
title: How do you market yourself as a freelance web developer (working on some freelance platform or on your own)? Do those work?
published: true
tags: discuss, career, freelance
---
Kill an anoying "invisible" process running in localhost 🔫😒
Tags: todayilearned, bash, vue
Published: 2019-10-30 01:42:16

I was working on a project in **Vue** running with `yarn dev` (dev-server), but gone out for a coffee ☕ when I returned to table my nootebook was bugged 😒, like every windows user, I did the magic shortcut 🎇 (crtl + alt + del) for the task manager and I restarted the crashed process (my hyper bash, if you don't know hyper see more [here](https://hyper.is/) which was running my application, in my innocence I thought I could run `yarn dev` again

But it throw an error looks like that *A process is already running on port `3000`, finish it to run on this port* I did the magic shortcut 😪, and for my surprise, nothing running in task manager...
![](https://media.giphy.com/media/ZebTmyvw85gnm/giphy.gif)

## How I solve this anoying error? 🤔


Run command-line as an Administrator
```bash
netstat -ano | findstr :portnumber
```
Now you will see something like that:

![](https://i.imgur.com/uGOEHdT.png)
##### Pink coloured rectangle area shows the PID (process identifier)

### Let's kill it 😎
![](http://giphygifs.s3.amazonaws.com/media/QHYHhShm1sjVS/giphy.gif)

Then you execute this command after identify the PID.
```bash
taskkill /PID yourPID /F
```
![](https://i.imgur.com/Tq3rHLQ.png)
(The `/F` option forcefully terminates the process)

Run the first command again to check if process is still available or not. 
You'll get empty line if process is successfully ended.

## The superb way 🤺
Run **Windows PowerShell**  to stop a process on your wanted port, just type:
```bash
Stop-Process (,(netstat -ano | findstr :yourPort).split() | foreach {$[$.length-1]}) -Force
```

## OK, this saved my skin, but WTF is nestat? 
![](https://media.giphy.com/media/lkdH8FmImcGoylv3t3/giphy.gif)

Netstat — derived from the words network and statistics — is a program that’s controlled via commands issued in the command line. It delivers basic statistics on all network activities and informs users on which portsand addresses the corresponding connections (TCP, UDP) are running and which ports are open for tasks (if want know how this properly works, you can read more [here](https://www.ionos.com/digitalguide/server/tools/introduction-to-netstat/))


#### Hope this helps if you come across this boring error 🤗

That's all, folks
![](https://media1.giphy.com/media/GCvktC0KFy9l6/giphy.webp?cid=790b76119d181294bc4b33d76c72323e3b8dab3989212e16&rid=giphy.webp)
Stuck with tutorials? Come and join us!
Tags: codenewbie, showdev
Published: 2019-10-30 02:29:42

---
title: Stuck with tutorials? Come and join us!
published: true
description: Learn to code by building projects
tags: codenewbie, showdev
---

Hi everyone!

If you tired of doing tutorials and feeling like you're not making progress I think you'd like this,

[Pelable](https://pelable.com/program) is a free 6-weeks program to build a project with a remote team😃

We're starting the November batch this friday🚀

I made it so people focus on what's important (cough cough coding)

Let me know what you think!
Flashing light
Tags: javascript, beginners, html, css
Published: 2019-10-30 02:18:59

Hello!
Is your beautiful imagination static or dynamic? If the answer is the latter, sure that you want animations: fadein, fadeout, flashing light and stuff. Actually they need a CSS style, which is called "opacity." However, in many cases, CSS is static (a choice to be dynamic is to use @keyframes). So, making dynamic is just a job of JavaScript.

The magic word is setTimeout but there is a tricky part. The code you want is as follows.

    <div id="flash">FLASH</div>
    <script>
      var i = 0;
      function flash(){
        if(i < 50){
          document.getElementById("flash").style.opacity = (-1)**i;
          i++;
          var sto = setTimeout(flash, 500);
        }else{
          clearTimeout(sto);
        }
     }
    </script>

The tricky part is (-1)**i. This means -1 to the ith power. The i takes an integer which equals 0 or above, so either it takes -1 or 1. -1 is same as 0 for opacity, so this corresponds to just turning on and off the light!

How to use setTimeout() is setTimeout(function, time). It means that setTimeout performs the function after the time (milliseconds). In the example above, if the i is less than 50, setTimeout performs the flash after 500 milliseconds. If the i reaches 50, clearTimeout interrupts the job of setTimeout, namely flashing light stops.

I almost forgot. There is one more thing.
Don't forget to make an opportunity to start the flash function. For example, if you write &lt;body onload="flash()"> in HTML, it just starts.
Well, safe journey!