teleren/devto huggingface dataset:
Rx Composition Api [Vue 3 | RxJS]
Tags: vue, typescript, webdev, tutorial
Published: 2020-11-20 02:21:44

*edit: you can use this package i made https://www.npmjs.com/package/@nopr3d/vue-next-rx*

Hi !

Vue 3 is here, is fresh but we have to wait for our preferred dependences.

So [vue-rx](https://github.com/vuejs/vue-rx) work only with Vue 2 and I think you are wondering how we can use rxjs with the new version of vue? (I'm)

---

So, this is how we can extend the composition Api


##### Ref

```javascript
import { Observer, Observable, Subject } from "rxjs";
import { onBeforeUnmount, ref as _ref, Ref as _Ref, watch } from "vue";

export type Ref<T = any> = _Ref<T> & Observer<T> & Observable<T>;

export function ref(value?: unknown): Ref {
  const $ref = _ref(value) as Ref;
  const subject = new Subject();

  // extend your ref to rx and bind context
  $ref.next = subject.next.bind(subject);
  $ref.pipe = subject.pipe.bind(subject);
  $ref.subscribe = subject.subscribe.bind(subject);

  

  watch($ref, (val) => {
    subject.next(val);
  });

  // Don't forget to unsubscribe or you will get memory leaks
  onBeforeUnmount(() => subject.unsubscribe()); 
  return $ref;
}
```
---

##### Watch 
```javascript 
import {
  watch as _watch,
  WatchStopHandle as _WatchStopHandle,
} from "vue";

export type WatchStopHandle<T = any> = Observer<T> &
  Observable<T> &
  (() => void);

export function watch(ref: Ref, fn?: (val: any) => any): WatchStopHandle {

  const subject = new Subject();
  const $watch = _watch(ref, (val) => {
    subject.next(val);
    if (fn) fn(val);
  }) as WatchStopHandle;

  $watch.next = subject.next.bind(subject);
  $watch.pipe = subject.pipe.bind(subject);
  $watch.subscribe = subject.subscribe.bind(subject);

  onBeforeUnmount(() => subject.unsubscribe());

  return $watch;
}
```

So we can use the return of our composition function like any usual observable.

```javascript
// Create your own vue folder, store your custom api here
import { ref, watch } from "@/vue";

export default {
  name: "App",
  setup() {
    const tick = ref(0);

    setInterval(() => {
      tick.value++;
    }, 1000);

    // subscribe and do something at every change

    // With Ref
    tick.subscribe((value)=>{console.log(value)}); 

   // With Watch
    watch(tick)
        .pipe(map((val) => val * 1000))
        .subscribe(console.log);

    return { tick };
  },
};

```
---

Demo :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4l18as3k006jaijtxwhc.gif)
I started a podcast
Published: 2020-11-20 01:58:40

---
title: I started a podcast
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Ehm.. I started a podcast!

This is something I should have done time ago but I never had the courage. You know, speaking in front of microphone and then let people listen.. It wasn't my nature. I am not so extrovert.

But I decided to break that mental wall and I did it! I recorded the pilot episode with a friend of mine (to better fight the initial embarrassment).

![Do you want to hear a podcast maybe?](https://media.giphy.com/media/f9SyS82mgPi4vYeppV/giphy.gif)

The podcast's name is: **Niente di serio**, Nothing serious in English. Episodes are mainly in Italian (sorry English speakers :pensive:).

I will try to record some episodes in English, I promise!

You can listen **Niente di serio** on [Spotify](https://open.spotify.com/show/0up7BkttsAG0Z4ArJPJ83O?si=GJtVxVWgRouTDzHCpSBu6w) and on [Anchor](https://anchor.fm/niente-di-serio).
Angular Prod Build Specific Bugs
Tags: angular
Published: 2020-11-20 01:55:42

I recently upgraded our project to Angular 10 from version 8. Below is a piece of code that went buggy:

```
@ViewChild('searchTextBox', { read: false }) searchTextBox: ElementRef;
```

This was working in v8 but not in v10. 

The fix is to assign the expected type to 'read' property.

```
@ViewChild('searchTextBox', { read: ElementRef }) searchTextBox: ElementRef;
```

As I am debugging this in v10, I noticed that the error is not reproducible when running `ng serve` but will appear if you run `ng serve --prod`.

Lesson Learned: Always do a sanity test in prod build. Note that prod build is not debuggable and takes a while to build.
Custom sorting in Python 
Tags: python, codenewbie, beginners, codequality
Published: 2020-11-20 01:51:19

Consider the following list:
```python
employees = ['Bill Gates', 'Mark Zukerberg', 'Jeff Bezos', 'Elon Musk', 'Larry Page']
```

####To sort the list `employees`
```python
employees.sort()
```
####Output
```
['Bill Gates', 'Elon Musk', 'Jeff Bezos', 'Larry Page', 'Mark Zukerberg']
```

As we can see here the normal sorting sort the elements by alphabets. Let's say we want to sort the list by the length of each string element in the list. We can easily do that using the `key` parameter of the sort method.

####To sort the original list `employees` by the length of elements
```python
employees.sort(key=len)
print(employees)
```
####Output
```
['Elon Musk', 'Bill Gates', 'Jeff Bezos', 'Larry Page', 'Mark Zukerberg']
```

In the example above we are passing a built-in `len()` method to sort the list by the length of elements. We can also supply our custom sort function as well instead of a built-in function. 
This `key` function takes each element of the list, transforms it and return one value which is then used to sort the list.

##sort()
sorts a list in-place in ascending or descending order. `sort()` method takes two parameters which are both optional:

1. key: function which serves as the basis for comparison.
2. reverse: if `True`, then it will sort the list in descending order, otherwise in ascending order. Defaults to `False`.

#### Syntax
```python
list.sort(key=..., reverse=...)
```

Let's look at another example of sorting a list of tuples using the second element:
```python
cart =[('Mango', 5), ('Grapes', 10), ('Banana', 3), ('Melon', 5), ('Strawberry', 7)]
```
#### To sort the `cart` list using the second element of each tuple
```python
cart.sort(key=lambda x : x[1])
print(cart)
```
####Output
```
[('Banana', 3), ('Mango', 5), ('Melon', 5), ('Strawberry', 7), ('Grapes', 10)]
```
There is one more method that is used to sort the iterable called `sorted()`.  

##`sorted()` 
returns a sorted list of elements in ascending or descending order.

It takes 3 parameters:
1. iterable: Either a sequence of elements like list, string or tuple or a collection like dict, set etc.
2. key (optional): function which serves as the basis for comparison.
3. reverse (optional): if `True`, then it will sort the iterable in descending order, otherwise in ascending order. Defaults to `False`.

#### Syntax
```python
sorted(iterable, key=..., reverse=...)
```
Happy International Men's Day!
Tags: watercooler, mensday
Published: 2020-11-19 23:53:08

---
title: Happy International Men's Day!
published: true
description: International Men's day falls on November 19th! 
tags: watercooler, MensDay
cover_image: https://q9c2d7b6.stackpathcdn.com/wp-content/uploads/sites/7/2020/11/A4-IMD-HERO-Posters-OPT.jpg
---


I invite you all to take some time today to celebrate the special men in your life and work. 

For me, the most special man is my father. 

((Note, that little guy isn't actually ripped. I can tell by the [pixels](https://i.chzbgr.com/original/4864448256/h43308772/cheezburger-image-4864448256).))
Remotely Edit Files on Vagrant
Tags: vim, ssh, scp, unix
Published: 2021-02-15 12:46:43

---
title: Remotely Edit Files on Vagrant
published: true
date: 2020-11-20 00:00:00 UTC
tags: vim, ssh, scp, unix
canonical_url: https://tech.serhatteker.com/post/2020-11/remotely-edit-files-on-vagrant/
---

We know we can edit files via `scp` in **Vim** as we've seen in: [Vim SSH].

```bash
$ vim scp://user@host//path/to/file/file.extension
```

Editing files on **vagrant virtual machine** is a little bit harder to achieve.

We can `ssh` into **vagrant** (along with option `vagrant ssh`) after adding our **ssh public key**:

```bash
$ ssh -i ~/.ssh/id_rsa.pub -p 2222 vagrant@localhost
```

More info about this: [Add SSH Public Key to Vagrant]

However we can't add these flags to `scp`. So what is the solution then?

The solution is adding **ssh config file** as we've seen in [SSH Config]:

```bash
Host vagrantlocal
  HostName localhost
  Port 2222
  User vagrant
  IdentityFile ~/.ssh/id_rsa.pub
  PasswordAuthentication no
```

After that we can remotely edit files:

```bash
$ vim scp://vagrantlocal//path/to/file/file.extension
```


All done!




[Vim SSH]: https://tech.serhatteker.com/post/2019-08/vim-ssh/
[SSH Config]: https://tech.serhatteker.com/post/2020-11/ssh-config/
[Add SSH Public Key to Vagrant]: https://tech.serhatteker.com/post/2020-11/add-ssh-public-key-to-vagrant/
How to add items to the end of the array in JavaScript?
Tags: javascript
Published: 2020-11-20 00:00:00

---
  title: How to add items to the end of the array in JavaScript?
  published: true
  tags: JavaScript
  date: Fri Nov 20 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-or-push-items-to-end-of-array-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-7081bfed6c730b6f1bc28b0d2e3caee3.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-or-push-items-to-end-of-array-javascript)
  
To add/push items or elements to the end of the array, you can use the `push()` array method in JavaScript.

Suppose we have an array of names like this,

```js
// Names Array
const namesArr = ["Roy", "Aleena", "Mary"];
```

Let's add another name `Laila` to the end of the array using the `push()` array method. The method accepts values as arguments to be added to the end of the array.

```js
// Names Array
const namesArr = ["Roy", "Aleena", "Mary"];

// Add name Laila
// using the push method
namesArr.push("Laila");

console.log(namesArr); // ["Roy","Aleena","Mary", "Laila"]
```

If you want to add more than one value at the same time, You can pass those values as arguments to the method like this,

```js
// Names Array
const namesArr = ["Roy", "Aleena", "Mary"];

// Add names Laila, Meera, Lily
// at the same time
// using the push method
namesArr.push("Laila", "Meera", "Lily");

console.log(namesArr); // ["Roy", "Aleena", "Mary", "Laila", "Meera", "Lily"]
```

- The method returns the number of elements in the array after adding the item/items.

See this example live in [JSBin](https://jsbin.com/xiwimateqa/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---
What is the Virtual DOM in ReactJS ?
Tags: react, javascript, beginners
Published: 2020-11-19 23:34:24

ReactJS is a JavaScript library for building user interfaces. It is a component-based library that encapsulate your code in a component. Data can be passed into components, each component is specific  and can manage it own state for storing data. The state is separated from the DOM. Components are rendered and its data is updated when the there is a change in the state.

## Virtual DOM

Unlike other libraries, ReactJS builds a virtual representation of DOM element. This is a tree of JavaScript objects that represent the browser DOM.

ReactJS doesn't allow manipulation of the browser DOM, Instead you manipulate the virtual DOM which then result into the browser DOM.

### Why Virtual DOM?

The reason for a virtual DOM is to **enhance** and **optimize** update to the actual virtual DOM.

In vanilla JavaScript, you manipulate the DOM using the typical DOM API selector, like `document.getElementById` or `document.querySelector` to select an HTML tag, and you can modify the tag using properties like `.innerText`, `innerHTML`, or `.value`.

Although DOM manipulation is faster this way, it is still problematic because:

* DOM changes causes the browser to reloaded. This is inefficient.

* Recalculating and rendering layout after manipulation is slow

The virtual DOM is node tree of element and attributes just like the browser DOM. The node tree is created by React's `render()` method from React components in response to change in React's data model.

When there is a change, the `render()` method recreates the entire DOM, resulting to a new virtual representation of the DOM.

This involves a three-step process that optimizes the performance and makes the virtual DOM fast:

* It re-renders to new virtual DOM when there is trigger of change in the UI.
* The difference from the old virtual DOM and the new one will be recalculated to see what has changed.
* The browser is **updated** from the virtual DOM **with what has changed**.

Updating the actual DOM with new data from the virtual DOM is without reloading the browser is not only efficient but ideal. Although, it may seem like the virtual DOM would/should be slow because of the double render, and diffing of virtual DOM to see what has changed. The fact is that rendering the virtual DOM is more efficient than rendering UI in the actual browser DOM.

### Virtual DOM Object

All elements in the virtual DOM are a function of `ReactElement`.
ReactElement is a representation of DOM element in the virtual DOM. This is what is put in the "actual DOM" of the browser.

## Conclusion

ReactJS among the three popular JavaScript libraries(React, Vue and Angular) has become de facto for front-end web development. Hence, it is vital to know how it works if you use it or plan to use it. There's more to know. If you want to know how React creates and builds the virtual nodes, you can find out more in the complete article [here](https://romeopeter.com/blog/reactjs-virtualdom/)

Thank you for reading 🙏🏿
Python Zero to Hero - Ep.27 - Further exploring Django
Tags: python, django, beginners, tutorial
Published: 2020-11-19 23:15:18

---
title: Python Zero to Hero - Ep.27 - Further exploring Django
published: true
description: After a long break, we continue with our Django exploration journey. This time we see how the app's UI come into place by using some default Django template.
tags: Python, Django, beginner, tutorial
---
After a long break, we continue with our Django exploration journey. This time we see how the app's UI come into place by using some default Django template. If you have any questions or any suggestions about which Python topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)

You can get the slide deck [here](https://slides.com/cheukting_ho) and the example code and homework form [GitHub here](https://github.com/Cheukting/python02hero). Ask questions at my [Twitch channel](https://www.twitch.tv/cheukting_ho)
How to render SVGs in Preact
Tags: preact
Published: 2020-11-19 22:58:37

---
title: "How to render SVGs in Preact"
published: true
tags: ["preact"]
canonical_url: https://www.emgoto.com/preact-svg/
cover_image: https://www.emgoto.com/preact-svg-dev.png
---

If you want to render an `.svg` file in in Preact, I found inline SVGs to be the easiest way to get things working.

```jsx
import { h } from 'preact';

const MenuIcon = () => (
    <svg width="24" height="24" viewBox="0 0 24 24"
        fill="none" xmlns="http://www.w3.org/2000/svg"
    >
        <path></path> { /** Your path code goes here*/ }
    </svg>
);

export default MenuIcon;

```

And then you can use it as you would normally use a Preact component:

```jsx
<MenuIcon/>
```
Wix Or Weebly For beginners...
Published: 2020-11-19 22:48:59

I enjoy helping others with their website projects but sometimes it is nice for people to help themselves for home web projects. 
A lot of great simple websites have been built using point and click progs. Such as squarespace https://www.venuescout.co.nz/ and Wix I had a play a while back and made this one using Wix for a laugh https://www.keeplaughingforever.com/funny-riddles and Weebly  has yielded good results too. Which is the best to recommend for noobs?
Shadow
Tags: python
Published: 2020-11-19 22:41:12

Spent a while working on the trading bot and then I thought, why just stop at one? Why not have a network of bots that are able to trade or perform any task for me while I am away?

Build and configure them to my liking, put them on a server and have them receive signals which are connected to a task for them to perform. 

I started working on this for a while and I would love to share my current progress on the project. I decided to write it in python because I figured it would be a lot easier to run the network on my raspberry pi. 

There's still work to be done and a lot of different ideas I want to try, but the basic idea is there and if you want to check it out the link to the repo is below!

https://github.com/TraylorBoy/Shadow

I plan on adding several built-in bots like the automated trader from my last post.
Day 260: Dark Night
Tags: hiphop, code, coding, lifelongdev
Published: 2020-11-19 22:30:33

_liner notes_:
- Professional : Where did the day go?! haha Spent the day heads down coding. Got a bunch of commands working for the new CLI the team is working on. It's only using mock data right now, but it's working so far. Pretty much it. Mostly coding. I did to to speak with a team member and had a quick meeting with the team about the CLI.

- Personal : Last night, put together some materials for some things I want to do in the van. Other than that, researched more stuff for my side project. Then went to bed early. The cold and dark night got me. haha.

![Sand dunes of Ica, Peru](https://dev-to-uploads.s3.amazonaws.com/i/c3bvh88j8126mpabwbbs.jpg)

Going to get something to eat and then get the recording from the last show sent to the station. After that, I'll probably go through the tracks submitted and for the show this week. Maybe some coding? I'll see how dark and cold it gets. haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 6JQE-AQEsVg %}
Self Oriented Programming (SOP)
Tags: oop, programming, bestpractices, webdev
Published: 2020-11-19 22:16:59

### It's the first day at your new job. 
You have been waiting for a job like this for a long time. You're eager to get github access and checkout the code of the project you have been assigned.
You open your vscode, open the embedded terminal and type `git clone blah blah`. 

You first look at the folder structure and you realize that something is very wrong with this project. There is no particular logic in the naming of the files and folders.
Then you open a file to take a look at the code. Oh, my, goodness...

With that said, I would like to introduce a term for describing a very old coding style. SOP aka `Self Oriented Programming`.

Like OOP (Object Oriented Programming) SOP has a very particular logic behind it. 
When you first see code written in the SOP methodology, immediately you have no clue what the heck is going on.

Variables with no particular naming pattern, Method names that are misleading and logic that just works but you can't figure out why.

In SOP, the most important thing is that only you and only at that moment, understand how your code is written and what it does. I mentioned `only at the moment`, because it doesn't really matter if you open the project again after a year to fix a bug.

Bug?
Bugs are enemies of the SOP pattern. They don't actually exist when you use SOP. If something doesn't work, you don't try to fix it by changing the code, you fix it by changing the mindset of your user.

Here are some examples of the SOP methodology. I'm going to be using java_script! =)

```js
class Ajax() {
    constructor(first_name, lastName, e_mail, password) {
        this.firstName = first_name;
        this.last_name = lastName;
        this.user_email_address = e_mail;
        this.password = password;
    }

    public makeRequestTo_Server(url, params) {
       return axios.post(url, params);
    }

    private sendRequest() {
      return axios.get(url);
    }

    private sendRequest2() {
      return axios.post(url);
    }

    public makeRequest_V2() {
       
    }

    public login() {
      let pmrs = { 
         email: this.e_mail, 
         password: this.password,  
      } 
      return axios.post('/api/login', pmrs)
    }
}

function writeDataToUser(userIsNotDeactivated = false, usr) {
    if(!!userIsNotDeactivated) {
       var req = new Ajax(usr.fn, usr.lnm, usr.eml, usr.pwd)
       req.login()
    }
    
    const dt = usr.items.forEach((item) =>  
         req.items.push(item))

}
```

In the above example it's pretty obvious that the developer used the SOP methodology. Them and only them understand why this code was written and what it does.

Can you think of other examples/cases of the SOP methodology?
Drop a comment below.
5 starter friendly CSS libraries
Tags: css, beginners
Published: 2020-11-19 22:14:01

Recently I had a project alongside my teammates where we ran into some issues and were able to finish it within the 2 last days of the 5 we had. 

For a moment we thought we wouldn't have enough time to implement any decent CSS and so we would have been left with a page that looked like it came from the early 2000s. 

Fortunately, with a little *google fuu* we came upon some wonderful libraries that were quick and easy to implement within our code. 

Here are some example libraries that while we did not implement all of them, were amongst our choices. 

##Bulma CSS

One of Bulma's greatest features is its simple readable classes. The system for creating tiles is quick to be implemented and the code its self takes little time to understand. 

[Click here to be taken to Bulma's website.](https://bulma.io/)
[Link to Github] (https://github.com/jgthms/bulma)

##Pure.CSS

Pure has small responsive CSS modules for whatever you could need. Layout and styling for your HTML elements are available. Its style is also minimal and has a very clean design. It is another perfect option for beginners. 

[Click here to be taken to Pure.CSS's website.](https://purecss.io/)
[Link to Github](https://github.com/pure-css/pure/)

##Animate.CSS

This is one of my favorites. It's simple and fast to incorporate within your HTML (or Javascript). 

If you desire quick flashy fun on your webpage, Animate.CSS is perfect. Just remember to not overdo it(even though it may be fun). 

[Click here to be taken to Animate.CSS's website](https://animate.style/)
[Link to Github](https://github.com/animate-css/animate.css)

##Tailwind CSS

Tailwind has customizable building blocks. You won't have to worry about fighting set styles to override them. Instead of having predefined components, it gives you CSS helper classes to work. These classes allow you to create custom designs and in the end, you will have a much more personally designed website.

[Click here to be taken to Tailwind CSS's website](https://tailwindcss.com/)
[Link to Github](https://github.com/tailwindlabs/tailwindcss)

##Semantic UI 

Semantic UI uses five descriptive categories for their re-usable UI components. 

They are : 

* UI Element
* UI Collection
* UI View
* UI Module
* UI Behavior

Almost every component has types, states and variations. A button can vary in size and color and can be formatted as a basic, social, fluid, toggle, and more. This gives you a great amount of flexibility in a component’s appearance.

[Click here to be taken to Semantic UI's website](https://semantic-ui.com/)
[Link to Github](https://github.com/semantic-org/semantic-ui)