teleren/devto huggingface dataset:
Best practice for subscribing to observables in services with Angular
Tags: angular, rxjs, typescript
Published: 2021-09-29 12:02:43

I do not like to subscribe to observables inside services, as it feels expensive due to the fact that we are not able to unsubscribe from them when we do not need them any more and we all hate memory leaks, right?

So the best way to use this solution will be the way that we would be able to unsubscribe from them when we done listening to that observable.

First, we should not create that service as Singleton service, instead we should make sure the service will be specifically responsible only to handle some functionalities which is related to small part of our app at presentation layer or better to say, it will only take care of logics which related to the Dump component. It does not mean it should not be there for make container/smart components more simple, but in this example I was trying to do it for my Dump component.

Alright, let's say our service is looks like this

```typescript
import {Injectable, OnDestroy} from '@angular/core';
import {Actions, ofType} from '@ngrx/effects';

import {BehaviorSubject, Observable, Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';

import {updateNoteError, updateNoteSuccess} from '../../store/notebook.actions';
import {INote} from '../../interfaces/note.interface';

@Injectable()
export class CreationFacade implements OnDestroy {
  private destroyed$ = new Subject();

  private updateNote$ = new Subject<void>();

  constructor(private actions$: Actions) {
    this.listenToUpdateProcess();
  }

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }

  updateStatus(): Observable<void> {
    return this.updateNote$.asObservable();
  }

  private listenToUpdateProcess(): void {
    this.actions$.pipe(
      ofType(updateNoteSuccess),
      takeUntil(this.destroyed$))
      .subscribe(() => {
        this.updateNote$.next()
      });
    this.actions$.pipe(
      ofType(updateNoteError),
      takeUntil(this.destroyed$))
      .subscribe((error) => {
        this.updateNote$.error(error)
      });
  }
}

```

Have you noticed this line?

```typescript
@Injectable()
export class CreationFacade implements OnDestroy 
```

Yes, I've implemented OnDestroy interface to my service and Angular will call this lifecycle only if we provide it to the corresponding component and only there but not in the Module.

So meta data we will pass to to `@Component` decorator will be like this

```typescript
@Component({
  selector: 'app-note-writing',
  templateUrl: './note-writing.component.html',
  styleUrls: ['./note-writing.component.scss'],
  providers: [CreationFacade]
})
```

Isn't that great?

Now we can relax and be sure those observables inside the service will be unsubscribe in the end of the process and we will have happy users after all!

Thank you for reading,
Hope you enjoyed.
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2021-09-29 12:00:16

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258c78158d.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
I never tell the same joke twice

I have a DRY sense of humor.
 -->
Peregrine - A new programming language with python like syntax but as fast as c(currently under devolopment)
Tags: showdev, python, programming, c
Published: 2021-09-29 11:46:43

#**TL;DR**
Peregrine  is basically a programming language with python-like syntax but it is statically typed and as fast as c made by me and my friends. It is currently under development. Repo:- https://github.com/peregrine-lang/Peregrine
#**About**
If you know python then you most probably know that python is very easy to use but also very slow. Which is kind of annoying. To solve this me and my friends are working on a new programming language named peregrine (which is named after a bird) and their syntax is very similar. Peregrine  gets transcompiled to c thus allowing it to run as fast as c. Please note that this language is still not complete. I hope you will love it
#**Benchmark**
I have told many times that peregrine  is as fast as c and to prove it I will show you some benchmark
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ymua65yeaquoo07g33k.png)
Here I calculated the Fibonacci series recursively from 0 to 40 and python(left side) took 32secs whereas peregrine (right side) took only 1sec thus making it 32 times faster. Also, you can see that its syntax is very similar to that of python. For comparison here is a benchmark with c
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18gzvl1g0hq7l91e13kn.png)
And as you can see that peregrine  is as fast as c(both took 1sec)
#**Link**#
Github- https://github.com/peregrine-lang/Peregrine
Thank you all for reading. If you are excited about it please star the repo and click on the watch button so that you don't miss any updates. We want to release version 0.0.1 by March so please contribute
Elementor Free vs Elementor Pro - Wo sind die Unterschiede
Tags: wordpress
Published: 2021-10-06 15:01:10

---
title: Elementor Free vs Elementor Pro - Wo sind die Unterschiede
published: true
date: 2021-09-29 11:12:03 UTC
tags: WordPress
canonical_url: https://bloggerpilot.com/elementor-free-vs-pro/
---

In diesem Beitrag vergleichen wir Elementor Free und Elementor Pro und diskutieren die Unterschiede zwischen beiden, um dir die Entscheidung zu erleichtern, welche Software du für deine Anforderungen wählen solltest.

Eine große Frage, die sich viele stellen, ist, ob Elementor sein Geld wert ist. Die Software ist zwar sehr leistungsstark, aber es gibt auch viele andere Optionen auf dem Markt. Welche der beiden ist also besser? Ist Elementor für alle kostenlos oder musst du dafür bezahlen? Hier sind einige der wichtigsten Unterschiede zwischen Elementor Free und Elementor Pro.

Der Original-Artikel erschien auf [Elementor Free vs Elementor Pro - Wo sind die Unterschiede](https://bloggerpilot.com/elementor-free-vs-pro/).
Thiên nhiên 
Published: 2021-09-29 11:09:14

Xưởng Tranh Waki chuyên thiết kế, sản xuất tranh - khung ảnh - khung bằng khen. Xuong tranh Waki; phong tranh Waki, tiem tranh Waki, khung anh Waki; dong khung tranh; dong khung bang khen.	
👉👉Website	https://waki.vn
👉👉Addres: 176C Phan Văn Trị, P12, Bình Thạnh, Tp.HCM	
👉👉Facebook: https://facebook.com/tranhdepwaki
👉👉Twitter: https://twitter.com/tranhdepwaki
👉👉Pinterest: https://pinterest.com/xuongtranhwaki
👉👉Instagram: https://instagram.com/xuongtranhwaki
👉👉<b><a href="https://waki.vn/tranh-treo-tuong/tranh-trang-tri-gia-dinh">tranh treo tường</a></b>
👉👉<b><a href=" https://waki.vn/tranh-canvas-la-gi-tai-sao-lai-duoc-ua-chuong-hien-nay-643-html "> tranh canvas a></b>
👉👉<b><a href=" https://waki.vn/dich-vu-in-tranh-theo-yeu-cau-22770-html "> in tranh </a></b>
👉👉<b><a href=" https://waki.vn/tranh-treo-tuong/khung-anh "> khung anh </a></b>
👉👉<b><a href=" https://waki.vn/tranh-treo-tuong/khung-anh/khung-bang-khen ">khung bang khen</a></b>
👉👉<b><a href=" https://waki.vn/dong-khung-tranh-lay-lien-dong-khung-theo-yeu-cau-95043-html ">dong khung tranh</a></b>
👉👉<b><a href=" https://waki.vn/tranh-treo-tuong/tranh-trang-tri-van-phong/tao-dong-luc"> tranh động lực </a></b>
👉👉<b><a href=" https://waki.vn/san-pham/bo-suu-tap-10-tranh-slogan-chien-dau-cho-muc-tieu-ban-muon-tranh-slogan-van-phong-w6294"> tranh slogan </a></b>
👉👉<b><a href=" https://waki.vn/tranh-treo-tuong/khung-anh"> khung hình </a></b>
👉👉<b><a href=" https://waki.vn/tranh-formex-poster-quang-cao-bang-foam-tai-xuong-tranh-waki"> tranh formex </a></b>
Creating a Linux User With Ansible
Tags: linux, ansible
Published: 2021-09-29 11:08:31

---
title: Creating a Linux User With Ansible
published: true
description: how to create a linux user with ansible
tags: linux, ansible
canonical_url: https://www.citizix.com/how-to-create-a-linux-user-using-ansible/
//cover_image: https://direct_url_to_image.jpg
---

Linux is a multi user system, this means you can create multiple users.

To create user use this: 
```
- name: Create user on a linux server
  hosts: remote-server
  become: yes
  gather_facts: false
  vars:
    - user: rocky
    - password: $6$OmUdHERAMzqjcbvb$bKp/b76h7EZ1EpFuXeN7ygvyzBgbZUdyQOK6seakitssSSrfYS50.JcXXsWxyBu7tUehMJGvB0alPR.Ls3BOR/
  tasks:
    - name: Create a login user
      user:
        name: "{{ user }}"
        password: "{{ password }}"
        groups:
          - wheel
        state: present
```


Please check out this blog post on Citizix [here](https://www.citizix.com/how-to-create-a-linux-user-using-ansible/)
Đi đường ngắm cảnh thiên nhiên
Published: 2021-09-29 11:01:33

==> see more: <b><a href="https://waki.vn/tranh-treo-tuong/tranh-trang-tri-gia-dinh">tranh treo tường</a></b>
==> see more: <b><a href="https://waki.vn/tranh-canvas-la-gi-tai-sao-lai-duoc-ua-chuong-hien-nay-643-html">tranh canvas</a></b>
==> see more: <b><a href="https://waki.vn/dich-vu-in-tranh-theo-yeu-cau-22770-html">in tranh</a></b>
==> see more: <b><a href="https://waki.vn/tranh-treo-tuong/khung-anh">khung ảnh</a></b>
==> see more: <b><a href="https://waki.vn/tranh-treo-tuong/khung-anh
">khung ảnh</a></b>
==> see more: <b><a href="https://waki.vn/tranh-treo-tuong/khung-anh/khung-bang-khen"> khung bang khen </a></b>
UI Dev Newsletter #76
Tags: html, css, javascript, webdev
Published: 2021-09-29 10:55:51


## Links


[How Does CSS Works?](https://bit.ly/3umbph3)
Elad Shechter explains what defined the default behavior of CSS and how you can change and control them.


[Simplifying Form Styles With accent-color](https://bit.ly/3ibA9UH)
Michelle Barker looks at what it does and how to use accent-color alongside a color scheme for simple, accessible checkboxes and radio buttons — and imagine how we might use it in the future.


[An update to how we generate web page titles](https://bit.ly/3kFOOZP)
Google Search Central introduces a new system of generating titles for web pages and shares a rundown on how it works.


[Twitter's div Soup and Uglyfied CSS, Explained](https://bit.ly/3AIj3oE)
Giuseppe Gurgone reasons how to make sense of Twitter’s website source code and why the authors made some unconventional and controversial choices.


[Why are hyperlinks blue?](https://mzl.la/39J8GoA)
Elise Blanchard shares a journey through technology history and interfaces to explore how links were handled before color monitors and how interfaces and hyperlinks rapidly evolved once color became an option.


[7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS](https://bit.ly/3AJyKMq)
Habdul Hazeez shares seven different examples that showcase how ::before and ::after can be used to create exciting effects.


[7 UI Design Fundamentals for Developers](https://bit.ly/3ua6UGI)
Vansh Bhardwaj shares how you can build interfaces and apps that look good by following basic UI fundamentals, like whitespace, typography, and visual hierarchy.


[7 useful HTML attributes you may not know](https://bit.ly/2Y02G8U)
Mariana Simon shares a list of HTML attributes that many beginners don’t know, but that can be helpful.


## Popular on CodePen

[Feedback Reactions (Dark version)](https://bit.ly/3CJZWLy)
Aaron Iker shares a CSS-only and interactive rating system based on emojis.

## Just for fun

[re:bass](https://bit.ly/3kF2K6q)
Dylan Beattie shares an original composition inspired by the Git version control system where rhythms and melodies diverge, merge, conflict, and resolve, like branches in a codebase.


**Happy coding!**

[Subscribe to the newsletter here!](https://buttondown.email/starbist)
Debug: finding at which commit a 🐞 is created
Tags: git, programming, bug
Published: 2021-09-29 10:38:48

When you found a bug and want to identify which commit you produced the bug, you can check out commit and check 👍

## Check commit ids

`$ git log --graph --decorate --pretty=oneline --abbrev-commit`

Creating an alias if you like 😉
[Git - Git Aliases](https://git-scm.com/book/en/v2/Git-Basics-Git-Aliases)

![Image 2021-09-29 at 7.27.01 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucno482922gx4vy09pks.jpg)
 
## Checkout commit and check

`$ git checkout {commit id}`

## Go back to the latest commit

`git checkout {branch name}`

## Note

Having a nice commit message helps spot the respective commits 😉
As a beginner in JavaScript, I did this within a day
Tags: programming, javascript, css, html
Published: 2021-09-29 10:05:35

GitHub link : https://github.com/Emmijozzy/JavaScript-tab-carousel

Site link : https://emmijozzy-js-tab-carousel.herokuapp.com

This is done with a mindset of a beginner looking forward to be a great developer , building on at least a project within a week
My Journey into Development
Published: 2021-09-29 09:44:57

#  Early Years
Technology was something I was interested in since a very young age. At first, I was mainly interested in electronics and robotics. I didn't make anything at the age of 5 or 6 but I would play around with whatever I would find at home. Then, I started getting interested in cars at the age of 7 and used to keep up with the latest news. This was also the time I started getting interested in gadgets likes phones. 

# Lego
I was interested in playing with Lego from a very young age and every time I got a new set, I would try to make as many models as possible from that. I got a Lego Mindstorm (it is a robot that can be programmed) and many models can be built out of it. I would be making a new model every week and spending a lot of time doing that.

# Starting with coding
I was about 9 or 10 when I started some real coding. I started working with some Arduino stuff and then learned the C programming language. I learned Java when I was 11 and started some Android Development but I lost interest in it after some time. I didn't do much for the next one year. Then I started working on an Arduino project and then another but didn't succeed with any of them. I started learning Python a few months later and then started working on some small projects. I also tried to learn machine learning but realized that I needed to learn more maths to understand the theory behind all the algorithms and things.

# YouTube
I used to watch a lot of tech YouTubers upload content on YouTube and I was fascinated by it. I decided to make my [own channel](https://www.youtube.com/channel/UCY-rVWTIsN-G7s81C89SzkA) last year and started uploading a lot of videos. Now I have over 450 subscribers and over 90000 views. I haven't uploaded there for a while but I plan on getting my channel out of the grave with development-related videos.

# Web Development
I started learning Javascript earlier this year and then learned React. Next, I learn NextJS and then made my first proper application, [EasyComments](https://easycomments.anishde.dev/), as a part of the [Hashnode x Auth0 Hackathon](https://townhall.hashnode.com/auth0-hackathon) which was conducted back in August. 

That is my journey into development so far and I aim to learn more, build more applications and contribute to open-source.
Take notes on the web with their context
Tags: productivity, vue, javascript, typescript
Published: 2021-09-29 09:36:00

I have developed a free open source chrome extension named [context-note](https://github.com/betterRunner/context-note), aiming to provide a better way to take, search and review notes on the web.
Imaging we are browsing some websites and come across important information that we want to markdown, what would we do?
We might properly copy the text and paste it to a cloud note-taking app (Evernote, Onenote, etc.) just like this:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd6sx7y3o6yki3amnk5y.png)
Several shortcomings comes into my mind:
1. It could be **cumbersome** and time-consuming: at least four operations (c&p the text, c&p the website link, write the note, c&p the image) need to be done to finish this single note.
2. **Loss of context details**: when reviewing this note, you can only read the sentence and image instead of the whole page, useless you open the link and scroll to the exact place where you have token this note.


By the way, another more easy method is simply clicking star ⭐ of the browser to throw the website link into the bookmark. As you can imagine, **without the content and note information**, you basically can not remember why you marked down this link someday after two months.

---
So I think a more efficient tool should be used during taking notes on the web, especially when you are reading articles or learning something new. That is why I built context-note.

https://youtu.be/ZcakhGp_-HQ

It is a chrome extension with three key fetarues:
📝 **Notebook**, where text content, note itself and context information would be stored.
🏷️ **Tagbook**, manage the notes neatly with a handy tag system.
⌨️ **Rich text editor**: embed quill as the rich text editor.

Taking notes with their context, I believe it would be a better way to **store and review things that really matter to us**.
Composing Compelling Code Comments: "I don't need to write comments, my code is self-documenting"
Tags: comments, commenting, documentation, softwareengineering
Published: 2021-09-29 09:33:40

---
title: Composing Compelling Code Comments: "I don't need to write comments, my code is self-documenting"
published: true
description: In this first episode of my series "Composing Compelling Code Comments", I am highlighting why some developers refuse to add comments to their source code and I am going to debunk each of the commonly given four arguments.
tags: comments,commenting,documentation,softwareengineering
---

## Composing Compelling Code Comments

Are you interested in learning how to write great comments for your code when programming? 
This video guide is not focused on a specific programming language or platform, but can instead be watched by anyone developing software – regardless if it is JavaScript, Python, Java, C#, Rust, Kotlin, or just about any other language that supports code comments! 

Here's the link to the video: https://youtu.be/eCnJW2n0vCA 

In this first episode of my series "Composing Compelling Code Comments", I am highlighting why some developers refuse to add comments to their source code and I am going to debunk each of the commonly given four arguments:
- “They don’t add any value“
- “My code is self-documenting”
- “They get out of date“
- “I have no time to write them“

Most of these points are at least largely irrelevant when instead considering what benefits writing code comments can bring for you as a software engineer as well as for your team as a whole to improve your in-code documentation.
Hactoberfest2k21
Published: 2021-09-29 09:29:09

✅ Here it comes!!!! 
👨‍💻 #Hacktoberfest 2021. Have you registered? 
👨‍💻 Registration 🔗 is in the 💬 section 🌐 

#hacktoberfest2k21 #hacktoberfest #opensourcecontribution #kshitijsays #learningeveryday #applyhere
My thoughts about  problems and solutions
Tags: webdev, solutions, problems, programming
Published: 2021-09-29 09:06:39


To be honest, I was struggling myself whether to publish this post. These are my thoughts, that may seem obvious, but some part of me thinks that it's still worth sharing.

I want to address the space of problems and solutions.

As I see, we tend (in web community) to get into the hype train with new solutions. 

Although this is good because of the impact and progress it has, you should take care before applying new, hot ideas in your project.

First of all, remember that these solutions/projects came out not to shine, but to solve exact problems that someone had in his own project. Most of them are not the one-and-only-universal-best-ever takes on exact problem, but probably they have proven it's value in someone's case. However, it may not in yours. Moreover, their's problems may never exist in your project! This thoughts could be (and maybe will) developed in another post about technical debt, but what I want to provide is: Start simple and focus on your business, make it work, make it profitable 💲 and then, if you will have some problems - solve them. Overengineered project can be worse in maintenance then many simple ones.

So to sum up: Every project is different, each has its own bottlenecks, slightly different architecture, etc. Things that worked for others, may not work in your case or may be overengineered for your project. Analyse your problems/bottlenecks and then (of course do the research, check if somebody had similar problem) apply the best solution that suits your case. Maybe you would invent your thing, that when shared, could solve other's problems.

The key is to SOLVE YOUR PROBLEMS and use/create solutions that solve them.
What are your favorite VS Code productivity extensions?
Tags: watercooler, productivity, vscode
Published: 2021-09-29 09:17:38

---
title: What are your favorite VS Code productivity extensions? 
published: true
description: 
tags: watercooler, productivity, vscode
cover_image: https://ionicframework.com/blog/wp-content/uploads/2019/03/vs-code-extensions-for-ionic-devs.png
---
[VS code](https://code.visualstudio.com/) has become so feature-rich in built-in settings, you should always double check if you really need the extension you have in mind: 

{% link https://dev.to/robole/vs-code-you-don-t-need-that-extension-18d7 %}

We have also witnessed the features of many great extensions being baked in, like [Emmet](https://code.visualstudio.com/docs/editor/emmet), for example.

Some of the best extensions I use to increase productivity include: [TabNine](https://www.tabnine.com/), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer).

Share you favorite productivity extensions below 👇