teleren/devto huggingface dataset:
How to setup PostgreSQL and PGAdmin on Manjaro Linux / Arch
Tags: linux, postgres, archlinux
Published: 2020-09-26 18:48:35

This guide is here just because I've messed up the installs on arch before, and turns out it's actually pretty easy to do.

## Step 1 - Install the dependencies

```console
sudo pacman -S yay
yay postgresql pgadmin4
```

This should automatically setup your postgres user and group.

## Step 2 - Setup postgres service

```console
sudo -u postgres -i # login as postgres
initdb --locale $LANG -E UTF8 -D '/var/lib/postgres/data/'
exit

sudo systemctl enable --now postgresql
sudo systemctl status postgresql # to check for any errors
```

## Step 3 - Setup password

```console
psql -U postgres

postgres=# \password # to set password
```

## Step 4 - Setup connection security

```console
$ su

# cd /var/lib/postgres/data
# cp pg_hba.conf pg_hba.conf.backup # in case you mess up
# nano pg_hba.conf
```

Your default pg_hba.conf might look like this:
```plaintext
 TYPE  DATABASE        USER            ADDRESS                 METHOD

# "local" is for Unix domain socket connections only
local   all             all                                     trust
# IPv4 local connections:
host    all             all             127.0.0.1/32            trust
# IPv6 local connections:
host    all             all             ::1/128                 trust
# Allow replication connections from localhost, by a user with the
# replication privilege.
local   replication     all                                     trust
host    replication     all             127.0.0.1/32            trust
host    replication     all             ::1/128                 trust
```

"Method" is set to trust, meaning it won't ask for the password to anyone. To fix that, change the method from `trust` to `md5` everywhere.

And that should be it for postgres!

## Bonus: shortcuts

```console
> psql dbname postgres # to directly open a database

postgres=# \c                       # see current database
postgres=# \l                       # see list of databases
postgres=# \c dbname                # set database
postgres=# create database dbname;  # create database
postgres=# \dt                      # see list of tables
```

## Step 6 - PgAdmin

Open up pgadmin, click on "Add New Server", and add the following:

```plaintext
Host: localhost
Port: 5432
Maintenance database: postgres
Username: postgres
Password: <your password>
```

And PgAdmin should work just fine.
CshtmlComponent V2.2.0 - Reference Capturing
Tags: csharp, webdev, dotnet, aspnetcore
Published: 2020-09-26 18:43:27

[CshtmlComponent](https://cshtml-component.acmion.com) is a component library for ASP.NET Core with an advanced feature set. These features significantly improve developer productivity in MVC or Razor Pages projects. Check out the [CshtmlComponent documentation](https://cshtml-component.acmion.com) for more information.

Previously with CshtmlComponent, you could write Razor code like this:

```
<ExampleComponent Title="Some title" font-size="1.2rem" background-color="rgba(0, 0, 255, 0.1)">
    <div>
        Some custom HTML content.
        <Box>
            Supports nested components.
        </Box>
    </div>
    <CshtmlSlot Name="SlotName0">
        Some custom HTML content within a named slot. The parent component decides where
        this content is placed.
    </CshtmlSlot>
    <CshtmlSlot Name="SlotName1">
        Additional custom HTML content within a second named slot.
        <Box>
            Supports nested components.
        </Box>
    </CshtmlSlot>
</ExampleComponent>
```

The component themselves can always access their own properties, but what if you want to access the properties outside the component's own context? For example, one might need to get a generated ID value to use it in some JS code. This is now possible with CshtmlComponent V2.2.0, where you now can capture the component reference like this:

```
<ExampleComponent Title="Some title" font-size="1.2rem" background-color="rgba(0, 0, 255, 0.1)">
    <div>
        Some custom HTML content.

        @{ 
            // Assign a variable to component reference. 
            // The Box component inherits CshtmlComponentReferenceableBase<Box> (a class that inherits CshtmlComponentBase), 
            // which implements this logic. Useful if component properties have to be used outside the component's own context.

            // This is not the default behavior due to the mandatory, but slightly confusing syntax: 
            // public Box : CshtmlComponentReferenceableBase<Box> ....

            var boxReference = new CshtmlComponentReference<Box>();
        }
        <Box Reference="boxReference">
            Supports nested components.
        </Box>

        The fontsize of the referenced box is: @boxReference.Component.FontSize
    </div>
    <CshtmlSlot Name="SlotName0">
        Some custom HTML content within a named slot. The parent component decides where
        this content is placed.
    </CshtmlSlot>
    <CshtmlSlot Name="SlotName1">
        Additional custom HTML content within a second named slot.
        <Box>
            Supports nested components.
        </Box>
    </CshtmlSlot>
</ExampleComponent>
``` 

CshtmlComponent documentation: https://cshtml-component.acmion.com  
CshtmlComponent GitHub: https://github.com/Acmion/CshtmlComponent  
CshtmlComponent Nuget: https://www.nuget.org/packages/Acmion.CshtmlComponent/
When DRY Doesn't Work, Go WET
Tags: dry, wet
Published: 2020-09-26 18:36:09

Hello Techies,

Today I've bring new technique for newbie coders who try to follows coding standards in their projects. Hope you guys gone through universal coding standards, there is one technique mentioned named 'Go DRY(DON'T REPEAT YOURSELF)' which is generally misunderstood by many newbie or even experience developer too.

I've seen this mistake many times, and I've made it myself. When you first read about the DRY programming concept, you probably misunderstood it.


To Checkout full Article : https://www.technoblogs.ml/2020/08/when-dry-doesnt-work-go-wet.html
Convert an Angular Web App into an Ionic App.
Published: 2020-09-26 18:32:35

How to convert an Angular Web App into an Ionic App?

There are scenarios/requirements in Web development when you need to create an Android app of existing Web Applications.

For Example: if you have an online eCommerce website you might need an android/ios native app as well.

This Article provides a simple solution to overcome the challenge by converting an Angular Web App into an Ionic Mobile App.

To Read full Article checkout here : https://www.technoblogs.ml/2020/08/convert-angular-web-app-into-ionic.html
Top-3 outdated facts about Svelte
Tags: svelte, javascript
Published: 2020-09-26 18:12:38

# Svelte doesn't support Typescript

Pretty much every article on the Internet states that Svelte doesn't support Typescript. The community points this out as the largest disadvantage (comparing to React, Vue, and Angular).

[Svelte's team has announced Typescript support](https://svelte.dev/blog/svelte-and-typescript)

# Svelte doesn't have browser devtools

Anybody who worked with Big 3 frameworks knows how easy it gets with DevTools. A lot of criticism Svelte had was due to lack of DevTools. No more `console.log`!

There you'll find extensions for [Chromium](https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/svelte-devtools/)

# Svelte isn't popular

You know it's new and so on. But look at these numbers, it's breathing down angular's neck!

| framework/library |      stars|  year |
|----------|:-------------:|------:|
| svelte  |  37k | 2016 |
| angular  |    66k|  2010  |
| react  | 156k |    2013 |
| vue | 173k |    2014 |
What to write in the bio/about me section?
Tags: help, discuss
Published: 2020-09-26 18:05:44

I’m creating a portfolio and I’m having such a hard time trying to fill the about me section. What do you guys write there? Do you have like a set of questions that you answer? Do you check other portfolios and use them for inspiration? Do you have a template that you fill out? 

I’d really appreciate your help awesome people
What markdown editor do you use? Does it have more-than-markdown features?
Tags: markdown, discuss, writing
Published: 2020-09-26 17:40:26

Some while ago, I discussed about self-made custom CMS, which is in an essence, markdown editor; and also real-time feeder.

{% post https://dev.to/patarapolw/cms-i-made-to-feed-nuxt-12po %}

Recently, I updated my another repo as well.

{% github patarapolw/make-html no-readme %}

It does have some features beyond markdown compiler (on web browsers' side), including

- Metadata scraping (which needs CORS bypass, which is usually a backend, including https://cors-anywhere.herokuapp.com)
- Image storage (which needs a backend, also popularly connected to S3 storage.)

I also want to say that webcomponents and [shadow roots](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) are godsend. Otherwise, isolated CSS environment would not be possible.

{% post https://dev.to/patarapolw/how-can-i-create-a-web-component-with-an-isolated-css-environment-1k1e %}

And, I also realized that VSCode can have extended markdown features, but I couldn't find a way to export them, in particular, [Admonition](https://marketplace.visualstudio.com/items?itemName=jebbs.markdown-extended#admonition).

https://marketplace.visualstudio.com/items?itemName=jebbs.markdown-extended
Rarely known CSS Tips
Tags: css, html, webdev, design
Published: 2020-09-26 17:27:23

💡 CSS Tip 1️⃣ 

The CSS 𝗳𝗼𝗻𝘁-𝗸𝗲𝗿𝗻𝗶𝗻𝗴 property defines the way specific pairs of letters are spaced.

💡 CSS Tip 2️⃣

The 𝗰𝘂𝗿𝗿𝗲𝗻𝘁𝗖𝗼𝗹𝗼𝗿 keyword represents the calculated value of the elements color property.

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

💡 CSS Tip 3️⃣

𝗥𝗚𝗕𝗮 is used to define the color of an object. The advantage of using RGBa method is the ability to take advantage of the last element of the equation, which is a (𝗮𝗹𝗽𝗵𝗮 𝘁𝗿𝗮𝗻𝘀𝗽𝗮𝗿𝗲𝗻𝗰𝘆)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9onm64w801w1kwudpcax.png)

💡 CSS Tip 4️⃣

Css comes with some filter effects. Similar to image editing the filter 𝗴𝗿𝗮𝘆𝘀𝗰𝗮𝗹𝗲 helps converting image to grayscale. The value 1 denotes 100% 

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

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



💡 CSS Tip 5️⃣

The 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 shorthand property has the following longhand values

➡️background-color 
➡️background-image
➡️background-repeat 
➡️background-attachment
➡️background-position 
➡️background-size
➡️background-origin
➡️background-clip

💡 CSS Tip 6️⃣

The 𝗰𝗹𝗶𝗽 property works only on absolutely positioned elements 

💡 CSS Tip 7️⃣

The 𝘄𝗼𝗿𝗱-𝘄𝗿𝗮𝗽 property is similar to 𝗼𝘃𝗲𝗿𝗳𝗹𝗼𝘄-𝘄𝗿𝗮𝗽.

The only difference is only few new browsers support overflow-wrap

💡CSS Tips 8️⃣

Enable 𝗚𝘇𝗶𝗽 𝗰𝗼𝗺𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻 server-side whenever possible, it shrinks the size of files such as CSS without removing any of the content.

💡CSS Tips 9️⃣

To vertically center contents of div

If one line of text set 𝗹𝗶𝗻𝗲-𝗵𝗲𝗶𝗴𝗵𝘁 to height of container. If non-text contents wrap the DIV in a 𝗱𝗶𝘀𝗽𝗹𝗮𝘆: 𝘁𝗮𝗯𝗹𝗲 DIV & set inner DIV to 𝗱𝗶𝘀𝗽𝗹𝗮𝘆: 𝘁𝗮𝗯𝗹𝗲-𝗰𝗲𝗹𝗹


💡CSS Tips 1️⃣0️⃣ 

𝗟𝗼𝗯𝗼𝘁𝗼𝗺𝗶𝘇𝗲𝗱 𝗼𝘄𝗹 𝘀𝗲𝗹𝗲𝗰𝘁𝗼𝗿

* * + *

Useful for situations when you have multiple elements of the same kind that need some spacing.

💡CSS Tips 1️⃣1️⃣ 

𝘀𝗵𝗮𝗽𝗲-𝗼𝘂𝘁𝘀𝗶𝗱𝗲 property

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

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

To get to know more technical stuff, connect with me via [Twitter](https://twitter.com/Dhanush_Nehru)
Finally launched the #OneAppPerDay Ebook Series
Tags: 100daysofcode, oneappperday
Published: 2020-09-26 17:27:20

This book is about Code An App Per Day Series i.e.building an App per day and explaining each line of code so everyone can understand.

The book is about a To-do App built with HTML/CSS and JavaScript.

Download link here

https://rasheedatoba.com.ng/


Happy reading💕😍😎
Javascript: Arrow function expression
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-09-26 17:20:26

Javascript being functional language comes handy with different ways to create a function. Here we are going to talk about arrow function expression. Arrow function expression is a better alternative to classical methods but comes with limitations. Let's look at example below.

<code>//Traditional method
function addValue(a){
  return a+5;
}</code>

The traditional function defined above can be rewritten in the form of arrow function expression as below.

<code>//Arrow function expression
(a) => {
return a+5;
}</code>

As we can see our function accepts only one argument, we can omit argument brackets and function body has only single return statement, we can omit curly braces. We can optimize function as below.

<code>//Arrow function expression
a => a+5;
</code>

All it becomes a one line code perhaps called as an arrow function *expression*. We can even pass multiple arguments to arrow function.

<code>//Arrow function expression
(a,b) => {
return a+b;
}</code>

To use arrow function as traditional function, we can do it as follows.

<code>//Arrow function expression
var sum = (a,b) => {
return a+b;
}
console.log(sum());</code>

Here we are assigning arrow function to a variable sum and then we are calling it just like a traditional function.


### Limitation

1. Javascript arrow function doesn't have binding to <code>this</code> or <code>super</code> and must not be used. In arrow function this refer to the scope in which they are defined.

2. We cannot use arrow function as a <code>constructor</code>, means we cannot use <code>new</code> keyword along with arrow function.

3. We can't use yield within it's body.

4. We can't use arrow function along with <code>bind</code>, <code>apply</code> or <code>call</code>functions.

That's it! Despite its limitations there are lots of advantages of arrow function expression.

Happy coding!
Dynamic Favicons
Published: 2020-09-26 17:04:15

Nowadays, most operating systems have both light and dark modes.
Most modern browsers respect this system theme and thus use different colours depending on which you are using.

In traditional websites, you normally have one favicon. However, this isn't always good. Take [GitHub](https://github.com) for example:

![GitHub Favicon Issue](https://raw.githubusercontent.com/johnletey/assets/master/posts/favicon/github.png?token=AO4CCBFNKRDOT6T7D6JHGEK7N5R6Q)

> This has since been resolved!

Let's see how we can fix this ...

Design two different favicons for your site.
One for light mode, another for dark mode.

However, the question is, how do you set them :thinking:

Let's start out with a basic HTML site:

```html
<head>
  <title>Example</title>
</head>
<body>
  <h1>This is an example.</h1>
</body>
```

To add a favicon, you would normally just add the following line:

```diff
<head>
+ <link rel="icon" type="image/svg" href="/favicon.svg" />
  <title>Example</title>
</head>
```

For dynamic favicons, we will use [`favicon-switcher`](https://www.npmjs.com/package/favicon-switcher).
You'll only need to add the following lines of code to your site:

```diff
<head>
+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:light)" href="/favicon_light.svg" />
+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:dark)" href="/favicon_dark.svg" />
+ <script src="https://unpkg.com/favicon-switcher@latest/dist/index.js" crossorigin="anonymous" type="application/javascript"></script>
  <title>Example</title>
</head>
```

All done! Your site will now automatically switch between the favicons depending on the system theme.
Wake Up. Your Web Crawler is Down
Published: 2020-09-26 16:17:49

If you have ever written a web crawler, you will find that it is one of the most bafflingly difficult programs to write. And as a beginner, it's almost a guarantee that we will make several mistakes in the process of building one.

Initially, we think building a crawler is about building the code. The code works on an example website. It's able to crawl, scrape, and store data. What could go wrong?

Well, it turns out its many things.

I remember when I wrote my first crawler. It was in PHP. It would use CURL requests to download pages, then scrape them using Regex, paginate and store the data in MySQL.

And once we deployed it, this became the theme of my life.

Wake up. The Web Crawler is down
And it was always something new.

The way I had coded it if the code broke while crawling a page, the whole process broke down. The rest of the crawl would stop, and so would the scraping. I also had no way of knowing how many URLs I had finished crawling and whether they were successfully fetched and also if they were successfully scraped. I had no way to resume where I left off. I had not heard of Robots.txt. I don't know they I could use Asynchronous requests to download URLs concurrently. I had no rules that I had set about not following external links. Once I did manage to write the code for it, it would not fetch the CDN images because it was slightly different. My code was so complex, and I was at my wit's end. So I would hard code many things particular to a website into the code. There was a separate project for each website I had to scrape.

I didn't know that there were frameworks where most of the heavy lifting was already done that I could use. The code was working fine in my little setup. But out there in the wild, it failed at the drop of a hat.

The website was unreachable - My crawler would break.

The website changed the HTML patterns. My Regex would break.

The website threw out a CAPTCHA challenge - my crawler would have a meltdown.

Websites would simply block me all the time, and I would restart my router to get a new IP and connect every time.

Writing a web crawler is one of the most fun jobs in programming but also one of the most difficult.

Eventually, al these frustrations lead to a lot of learning, and we developed tools like Proxies API and crawltohell to help people overcome as many of these problems as simply and as easily as possible.
Learning Regex in Javascript Part 2
Tags: beginners, computerscience, javascript
Published: 2020-09-26 00:12:59

In this post I'll be be wrapping up my [first post on regex] (https://dev.to/123jackcole/learning-regex-in-javascript-part-1-13pe). In a similar fashion to my last post, I'll be sure to provide examples that show the inputs and outputs. Let's jump into it!

## **Some Shortcuts**

There are a ton of characters you can use in your regex to create unique specifications in your queries. I'll list a bunch below.

* . gets any character that's not a line break
* \s gets a white space
* \S gets a non-white space
* \d gets a digit
* \D gets a non-digit

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

## **Only the Start or End**

If you want to find a character at the beginning or end of your string, you can use `^` or `$`.

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

## **The Caret (^)**

`^` also has a second use. When used inside of brackets, `^` indicates that you want anything except what's in the brackets.

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

## **Quantifiers**

Quantifiers specify how many of the specified characters we want.

* ? means zero or one
* * means zero or more
* + means one or more
* {} specifies the exact quantity

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

## **Special Characters**

Finally, if you want to capture any special characters you need to precede them with a `\`.

![Special Characters](https://dev-to-uploads.s3.amazonaws.com/i/orctnpymw8vrzp03arqz.png)
Bash Commands for Bioinformatics Beginners: Part 1
Tags: bioinformatics, bash, linux
Published: 2020-09-26 16:07:15

*Disclaimer: This article is a collection of useful bash commands that I have been using regularly.*
<br/>
### 1. Count Fasta Sequences
This command will help you to count fasta sequences in a fasta file.
```
grep -c ">" <fasta-file-name>
```
**Example:** `grep -c ">" sequences.fasta`
<br/>
### 2. Count Empty Lines
If you want to count empty/blank lines in a file, then this command will help you.
```
grep -c "^$" <file-name>
```
**Example:** `grep -c "^$" sequences.fasta`
<br/>
### 3. Remove Empty Lines
To remove empty/blank lines from a file, this command is useful.
```
sed -i "/^$/d" <file-name>
```
**Example:** `sed -i "/^$/d" sequences.fasta`
<br/>
### 4. Merge Multiple CSV Files
If you have multiple CSV files with same header, then you can use this command to merge them. The command below has two parts. 
In the `head -n 1 <a-csv-file> > combined.out` part, replace `<a-csv-file>` with any of the .csv file. Check example section for better understanding.
```
head -n 1 <a-csv-file> > combined.out && tail -n+2 -q *.csv >> combined.out  
```
After running this command, rename the `combined.out` file to `combined.csv`

**Example:** 
Suppose, you have 4 csv files. 
`file1.csv`
`file2.csv`
`file3.csv`
`file4.csv`
So your should run:
`head -n 1 file1.csv > combined.out && tail -n+2 -q *.csv >> combined.out`
Then you will see a new `combined.out` file. Don't forget to rename this file to `combined.csv`
<br/>
### 5. Unzip all zip files
Unzipping all .zip files in a folder is a breeze with this command.
```
unzip "*.zip"
```
However, this command will not delete the .zip files after unzipping. If you are looking for a command to delete all the files with same file format (.zip, .gz, .txt), then scroll below.
<br/>
### 6. Delete all files with same file format
Suppose, you want to delete multiple files with same file format, then these two commands will come in handy for you.
First, check what files you are going to remove:
```
find . -name "*<file-type>" -type f 
```
Then, run the delete command:
```
find . -name "*<file-type>" -type f -delete 
```
Check the example part for better understanding.

**Example:** 
If you want to delete all the `.gz` files, then the commands should look like this:
```
find . -name "*.gz" -type f
find . -name "*.gz" -type f -delete
```
To delete all .zip files:
```
find . -name "*.zip" -type f
find . -name "*.zip" -type f -delete
```
<br/>
That's all for now. Feel free to add more bash commands in the comments section and I will add them to the article.