teleren/devto huggingface dataset:
I Got Over Myself This Weekend and Made Something
Published: 2021-02-15 22:38:57

---
title: I Got Over Myself This Weekend and Made Something
published: true
date: 2021-02-08 09:09:00 UTC
tags: 
canonical_url: https://borick.net/articles/i_got_over_myself_this_weekend_and_made_something/
---

Has this ever happened to you?

1. Have an idea
2. Start working on it
3. Make a little progress
4. Have an idea for something else that’s honestly better than your current idea
5. Become paralyzed with indecision between these two great ideas
6. Go re-watch Avatar the Last Airbender again instead

Earlier this week, this was me.

Except, for whatever reason, I just skipped step 5. I did step 4, I had a better idea. it was really good, simple, within my ability to do, and wouldn’t take that long. It even sounded fun.

So I dropped my original idea.

And yesterday I published [howappsaremade.com](http://howappsaremade.com)

I flip-flopped. I lost focus. And it was awesome.

I really want to take the time to try and understand why this kind of decision paralysis happens, and why it didn’t happen this time.

## #1: Focus

There’s a lot of advice out there about focus and priorities. And most of the time, for me, that advice is crap. Advice around focus generally boils down to ‘focus on one thing. Do not bounce around on projects, that is not a good use of time.“. I’ve read entire books about this, namely Deep Work by Cal Newport. The whole book can be summarized as “if you can, hide in the woods and work on your one thing alone”

At the core if all this advice is this core concept: “instead of being distracted, choose instead to be focused”.

This advice is a false dichotomy though. Right now, in this world, with my brain, I’m not able to focus on one thing. And that’s not a bad thing. Instead of resisting where my ideas take me, why not follow where they lead?

There are lots of useful techniques for non-focused productivity. [Structured Procrastination](http://www.structuredprocrastination.com/) and [Lichtenbergianism](https://www.lichtenbergianism.com/) are both formal-ish methods of losing focus. The fact that others have documented these strategies shows that I’m not alone.

## #2: Shipping

As I was working on shipping [howappsaremade.com](http://howappsaremade.com), I kept repeating to myself “It doesn’t have to be perfect”. It was almost like a mantra. The reason was really simple, it’s an experiment. I tend to be very perfectionist, so I have a hard time declaring things finished. But when it’s an experiment, it doesn’t need to be finished. It’s almost better that it’s not finished, if it means you get to learn faster.

And that’s really the core of why I think I was able to launch this time instead of flailing. I hope this was at least a little helpful. It definitely helped me work through this!
Even when Windows( 10) Master Volume = 0, I can still hear audio.
Tags: help, microsoft, windows, watercooler
Published: 2021-02-08 09:08:35

<b><h3><b>
```yaml
Output Device: {
    name: "HyperX Cloud Stinger Core Wireless + 7.1"
}
Platform: "Windows 10 (64-bit)"
```
</b></h3></b>
บันทึก Push   Github ไม่ต้องใส่ username, password
Tags: github, security, public, privacy
Published: 2021-02-08 08:57:29

บทความนี้เขียนเพื่อบันทึกกันลืมของผมเอง

ใครที่ ใช้ github ก็ต้องมี push pull หรืออื่น ๆ ก็ต้องใส่ username password ทุกครั้ง สิ่งที่ผมจะทำคือไม่ต้องใส่ 

## ดูไฟล์ id_rsa.pub

```bash
ls -a ~/.ssh

.  ..  authorized_keys  id_rsa  id_rsa.pub  known_hosts

cd ~/.ssh
```

> อย่าไปแตะต้อง authorized_keys ของ server คุณหล่ะ

### พวกนี้คืออะไร?

เรียกมันว่า **ssh key** เอาไว้ใช้แทน password เพราะ password โดน Brute Force ได้

Key จะถูกแบ่งออกเป็น 2 อันคือ Public Key และ Private Key

1. Private key เป็นไฟล์ที่เจ้าของเก็บไว้ Key นี้มีความสำคัญมากใช้สำหรับไขเข้าระบบ เพราะฉนั้นต้องเก็บรักษาให้ปลอดภัย (**id_rsa**)

2. Public key เป็นไฟล์ที่เก็บไว้บนระบบหรือ server เพื่อใช้ตรวจสอบกับ Private key (**id_rsa.pub**)

## สร้าง key 

```bash
ssh-keygen -t rsa -b 4096 -C "mail@gmail.com"
cat id_rsa.pub
```

![image](https://dev-to-uploads.s3.amazonaws.com/i/rwdg9pgq5yyml5u3dkx2.png)

 
บางครั้ง URL ไม่ตรงก็อย่าลืมเซตตามนี้ด้วยหล่ะ 

```git
git remote set-url origin git@github.com:artdvp/learning.git
```

Ref: 
https://medium.com/@chookiat/%E0%B8%A1%E0%B8%B2%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87-ssh-key-%E0%B8%81%E0%B8%B1%E0%B8%99-2d4ce239d403

https://medium.com/@artdvp/github-push-source-code-%E0%B8%82%E0%B8%B6%E0%B9%89%E0%B8%99-github%E0%B9%82%E0%B8%94%E0%B8%A2%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%95%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B9%83%E0%B8%AA%E0%B9%88-username-password-bbc337303277
Weekly Challenge 099
Tags: perl, perlweeklychallenge
Published: 2021-02-08 08:52:39

[Challenge 099](https://perlweeklychallenge.org/blog/perl-weekly-challenge-099/)

# TASK #1 › Pattern Match

## Task

You are given a string `$S` and a pattern `$P`.

Write a script to check if given pattern validate the entire string. Print 1 if pass otherwise 0.

The patterns can also have the following characters:

* ? - Match any single character.
* * - Match any sequence of characters.

## My solution

This seems pretty straight forward. I take the pattern, escape the [meta characters](https://perldoc.perl.org/perlre#Metacharacters), except `?` and `*`, replace the `?` with `.` and `*` with `.+`, anchor the regexp to the entire string, and then test the match.

The only question is does 'any sequence of characters' include a sequence of 0 characters? I assumed it doesn't, but if it did, replace `.+` with `.*`.

## Examples

```
» ./ch-1.pl abcde "a*e"
1

» ./ch-1.pl abcde "a*d"
0

» ./ch-1.pl abcde "?b*d"
0

» ./ch-1.pl abcde "a*c?e"
1
```

# TASK #2 › Unique Subsequence

## Task

You are given two strings `$S` and `$T`.

Write a script to find out count of different unique subsequences matching `$T` without changing the position of characters.

## My solution

For this task I used a recursive subroutine called `_find_string`. It starts with the two input vales, and works through each character in `$S` until the first character is found. When this occurs, I call the function again with `$S` now the remainder of the string, and the first character of `$T` removed. Once we get to the end (`$T` is the last character) we add 1 to the `$matches` variable.

I'm not sure a recursive function is the best way to complete the task, but it works. If performance was an issue, we could always reduce `$S` to only contain the characters in `$T`, something like: `$S =~ s/[^$T]//g;` and escaping the meta characters as needed.
 
## Examples

```
» ./ch-2.pl littleit lit
5

» ./ch-2.pl london lon
3
```
Node.js + Express Tutorial for 2021 — Build a Web Server Using Node.js and Express
Tags: javascript
Published: 2021-02-08 08:31:04

Node.js with Express is a popular combo used by a lot of applications worldwide. This tutorial helps you get started with Node.js and Express by building a simple web server.

Your server will serve up an HTML page, which will be accessible by other people. By the end of the article, you will have basic knowledge about:

Node.js
Express
npm
creating Express routes
serving HTML
setting up static assets in Express

Pro tip: Do not copy the code from the tutorial. Write the code yourself to learn better.

Without further ado, let’s jump straight in!
Streaming the Angular @Output()
Tags: angular, javascript, webdev, rxjs
Published: 2021-02-08 08:23:46

---
title: Streaming the Angular @Output()
published: true
description: Do all `@Outputs` have to be `EventEmitters`? Read more to find out this little known fact about Angular component communication. 
tags: angular,javascript,webdev,rxjs
canonical_url: https://upbeat.dev/blog/streaming-angular-output
 
---
![main](https://dev-to-uploads.s3.amazonaws.com/i/toq3dsuxulglb079r87z.png)

We all know and love the `@Output()` decorator. If you are working with Angular I'm sure you've done this before:

```typescript
@Output()
change = new EventEmitter<ChangeEvent>();
```

However, the lesser known fact is, that the property decorated by the `@Output` does not have to be an `EventEmitter`.

In fact, it can be an RxJS `Observable`. It opens up a lot of possibilities, because we can wield the full power of RxJS operators 😱


For example, you can have an `Output()` decorating your reactive form control's `valueChanges` stream.

```typescript
control = new FormControl('');

@Output()
valueChages$ = this.control.valueChanges
  .pipe(
     distinctUntilChanged()
  );
```

Here you can see I'm limiting the emitted values to only the distinct ones, but other operators such as `debounceTime` could be used as well.

Hope you're having a great one, and I'll see you for more **60 Seconds of Angular** posts in the future 🥳

[Live demo](https://stackblitz.com/edit/60-seconds-of-angular-output?file=src/app/app.component.html)
How distinct is distinctUntilChanged?
Tags: javascript, webdev, rxjs
Published: 2021-02-08 08:23:15

---
title: How distinct is distinctUntilChanged?
published: true
description: If you've been working with rxjs, chances are you've heard about distinctUntilChanged(). Avoid this common bug while using this operator
tags: [javascript,webdev,rxjs]
canonical_url: https://upbeat.dev/blog/how-distinct-is-distinct-until-changed
---

If you have been working with RxJS, you might have heard about `distinctUntilChanged()` operator 🔥


Let's have a quick peek into the official [docs](https://rxjs-dev.firebaseapp.com/api/operators/distinctUntilChanged) to see how it works: 
>
Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item.


So in short, if the source stream emits:
```
a-a-b
```
You get just
```
a---b
```

There is a catch, though. By default, the operator will compare values using the `===` operator. 

This will work fine for primitive values like strings or numbers which are compared by value, but will not work for stuff like arrays or objects which are compared by reference.

```javascript
'a' === 'a' // true
1 === 1     // true
{} === {}   // false
[] === []   // false
```

So any time you are working with objects streams, you should strongly consider providing your own compare function to the `distinctUntilChanged()` operator.

```javascript
const source = of({ id: 1 }, { id: 1 }, { id: 2 });

// ❌ does not work, because values are compared with ===
source.pipe(
  distinctUntilChanged()
).subscribe(console.log);
// logs { id: 1 } { id: 1 } { id: 2 }

// 🔥 it works, because we provide a custom compare function
source.pipe(
  distinctUntilChanged((prev, next) => prev.id === next.id)
).subscribe(console.log);
// logs { id: 1 } { id: 2 }
```

[Live demo](https://stackblitz.com/edit/60-seconds-distinct-until-changed?file=index.ts)

Hope you're having a great one, and I'll see you for more 60 Seconds posts in the future 🥳
Understanding Docker: part 30 – Stop and restart a container
Tags: docker, devops, beginners, cloud
Published: 2021-02-08 08:19:30

---
title: Understanding Docker: part 30 – Stop and restart a container
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kw9vebaiatjg9m49pdig.jpeg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with an explanation about how to stop and restart a container.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kw9vebaiatjg9m49pdig.jpeg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kpqnafsf0yid6oib47fa.jpeg)

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).
Testing React Apps the Right Way
Published: 2021-02-08 08:18:25

I was having endless trouble with tests in my React app, and it was causing my build pipeline to fail as well.

![Anger](https://1.bp.blogspot.com/-06NpQFp-Cc0/T8_cfS3LoFI/AAAAAAAABS4/_8SoBCn-bD0/s1600/throwing-computer.gif)

After a few hours of reading documents and cobbling answers from around the forums I found a great, highly flexible solution. There are several places I needed to configure correctly so I'm listing them out below for anyone else that is trying to get their tests up and running and not having any luck.

Setup your package.json to include these dependencies, and jest configuration:
```json
"devDependencies": {
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "7.12.11",
    "@babel/preset-react": "7.12.10",
    "babel-jest": "26.6.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "chai": "^4.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "enzyme-to-json": "^3.6.1",
    "jest": "26.6.3",
    "node-sass": "4.14.1",
    "react-test-renderer": "17.0.1",
    "redux-mock-store": "^1.5.4"
  },

...other stuff---

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
```

Basic test:
```js
// <rootdir>/__tests__/app.test.js
import React from "react";
import { assert } from "chai";
import { shallow, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import configureMockStore from "redux-mock-store";
import { Provider } from "react-redux";

import App from "../src/App"; // Component to Test

configure({ adapter: new Adapter() });

const mockStore = configureMockStore();
const store = mockStore({});

describe("Test Component", () => {
  it("render correctly App component", () => {
    const AppComponent = shallow(
      <Provider store={store}>
        <App />
      </Provider>
    ).exists();
    assert(AppComponent === true);
  });
});
```
Add these styleMock and filemock modules to prevent errors on jsx components importing css/scss and/or files:
```js
// <rootdir>/__mocks__/styleMock.js
module.exports = {};

// <rootdir>/__mocks__/fileMock.js
module.exports = "test-file-stub";
```
```js
// <rootdir>/babel.config.js
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
  ],
};

```
👩‍💻👨‍💻 ...and _now_ you should be able to run your tests with jest + enzyme, and in my case, chai. 

![happy](https://nieuws.testnet.org/wp-content/uploads/2014/04/happy-developer-sq.jpg)
What changed about ML?
Tags: machinelearning, ai
Published: 2021-02-08 07:14:36



[Yesterday](https://dev.to/rolisz/what-is-ml-j4m) I wrote how AI made big promises in the past but it failed to deliver, but that now it's different.

What's changed?

Well, now we have several products that work well with machine learning. My favorite example is [Google Photos](https://photos.google.com/), [Synology Moments](https://www.synology.com/en-us/dsm/feature/moments) and [PhotoPrism](https://github.com/photoprism/photoprism). They are all photo management applications which use machine learning to automatically recognize all faces in pictures (easy, we had this for 15 years), recognize automatically which pictures are of the same person (hard, but doable by hand if you had too much time) and more than that, index photos by all kinds of objects that are found in them, so that you can search by what items appear in your photos (really hard, nobody had time to do that manually).

I have more than 10 years of photos uploaded to my Synology and one of my favorite party tricks when talking to someone is to whip out my phone and show them all the photos I have of them, since they were kids, or the last time that we met, or that funny thing that happened to them and I have photographic evidence of. Everyone is amazed by that (and some are horrified and deny that they looked like that when they were children). And there is not one, but at least three options to do this, one of which is open source, so that anyone can run in at home on their computer, for free, so there is demand for such a product.

Other successful examples are in the domain of recommender systems, YouTube being a good example. I have a love/hate relationship with it: on one hand, I wasted so many hours of my life to the recommendations it makes (which is proof of how good it is at making personalized suggestions), on the other hand, I found plenty of cool videos with it. This deep learning based recommender system is one of the factors behind the growth of the watch time on YouTube, which is basically the key metric behind revenue (more watch time, more ads).

These are just two examples that are available for everyone to use, and which serve as evidence that machine learning based AI now is not just hot air.

But I still haven't answered the question what is ML... tomorrow, I promise.
4 Cool Website and their APIs
Tags: webdev, javascript, python, watercooler
Published: 2021-02-08 08:09:58

## Introduction 
Hello Guys, It's been quite a time since I published the last blog but finally, I am back with 4 Websites that will help you to resolve problems that you might be facing. 

![4 Cool Website and their APIs](https://dev-to-uploads.s3.amazonaws.com/i/u8eeq5lbwwkx67y80t7a.gif)

The cool thing about these websites is that they all provide APIs and you can use that to develop your own application like them. So without further ado, let's get started.

## [Iconfinder](https://www.iconfinder.com/)

> Filter through the world's largest marketplace for icons with flexibility ease.

One of the best places on the internet to grab icons. The free plan gives access to more than 316K icons.

![IconFinder](https://dev-to-uploads.s3.amazonaws.com/i/n9pkm3v9wcess5w2mns2.jpg)

You can download icons in different sizes, formats (including jpeg, png, SVG, etc.). With their API you can develop an application that can fetch icon data from their icon collection.

## [VirusTotal](https://www.virustotal.com/gui/)

> Analyze suspicious files and URLs to detect types of malware, automatically share with the security community.

You can easily scan local documents or any document on the web (including email attachments) for any malware. This will help you to scan before you download it on your device.

![VirusTotal](https://dev-to-uploads.s3.amazonaws.com/i/bzgatdwlvzfu9f3w15dl.png)

VirusTotal also provides API and you can develop the application using it. They have Public and Premium API for development and commercial purposes.

## [Pastebin](https://pastebin.com/)

> A temporary online clipboard for your text and code snippets.

You can paste text and code. Herewith login you can edit, delete, and can access any time. With syntax highlighting, you can paste code in 50+ languages.

![Pastebin](https://dev-to-uploads.s3.amazonaws.com/i/ik1dmcoknfnzjn2xu35x.png)

It also provides API to develop your own application like Pastebin.

## [Site-Shot](https://www.site-shot.com/)

> For Capturing a full-length screenshot of a webpage.

You can capture screenshots of any website using site-shot. You can manually adjust the resolution to various Desktop, Android Devices, iOS devices.

![Site-Shot](https://dev-to-uploads.s3.amazonaws.com/i/l129xx3wx17w4co6br66.jpg)

And Yes, it also provides API which you can get benefit yourself and develop a program like it.

# Last Note

*I hope this list of websites will help you to ease many problems and also you will use their API to develop your next project. Thank you for reading the blog post.*
Learn How to Disable ClamAV in Your Appwrite Stack and Reduce Memory Usage
Tags: appwrite, baas, selfhosted
Published: 2021-02-08 08:09:06

Though it is not recommended to disable ClamAV due to security concerns, some of you might wish to disable it for performance improvements or low system resources during development.

ClamAV is a heavy memory process as it holds its entire virus DB (~1GB) on the container memory for fast scanning of files. This tutorial will cover how to successfully disable ClamAV in your Appwrite stack and reduce resource consumption.
## Disable ClamAV in appwrite container
Using the environment variable `_APP_STORAGE_ANTIVIRUS`, you can either disable or enable the antivirus. To disable it, in your docker-compose.yml file under `appwrite` service in the environment section, find `_APP_STORAGE_ANTIVIRUS` and set its value to **disabled**. This will disable the antivirus checking during new file uploads.

## Remove ClamAV Container
Once you have disabled the antivirus in the Appwrite container, you can now successfully remove the ClamAV container without causing any issue.

If you are already running the containers, first stop the ClamAV container using `docker-compose stop clamav` and remove the stopped container using `docker-compose rm clamav`. Finally, you can remove the `clamav` service from your `docker-compose.yml` file and under `appwrite` service in the `depends_on` section remove `clamav` as well.

ClamAV service looks like. You can completely remove all of these lines.

```yml
  clamav:
    image: appwrite/clamav:1.2.0
    container_name: appwrite-clamav
    networks:
      - appwrite
    volumes:
      - appwrite-uploads:/storage/uploads
```

If you are not running the Appwrite containers, you can simply remove the `clamav` service from your docker-compose.yml file and under `appwrite` service in the `depends_on` section remove `clamav`, then you are done.

**Note:**  In production, we advise not to disable the ClamAV as it protects against uploads of malicious files in Appwrite storage. Disabling it will not compromise your Appwrite server, as no storage files are being executed, but it will remove an extra security layer that adds more security to your project's users.