teleren/devto huggingface dataset:
How to deploy a Sapper PWA on GitHub Pages
Tags: tutorial, svelte, sapper, github
Published: 2020-01-05 19:30:45

Here is a quick and easy tutorial on how to deploy a PWA made with [Sapper](https://sapper.svelte.dev/) & [Svelte](https://svelte.dev) on GitHub Pages.

1. Configure your project's GitHub repository (in the repository `/settings`) to use the GitHub Pages functionality and choose to publish the content of the `gh-pages` branch.

![GitHub Settings interface](https://thepracticaldev.s3.amazonaws.com/i/7iloh3jir2p42h4itl6p.png)

Pay extra attention to your repository slug name: it will become the foldername value to use later. In this example, it is "mathr", a [personal project](https://pixeline.tk/mathr) of mine (math quizz game for my bored teenage girl 🤓 )


## 1. Build your SPA
... until the point of readiness (obviously ;-) )

## 2. Export the code and check if it is good to go

```bash
npx sapper export
npx serve __sapper__/export
```

## 4. Serving from a subfolder
That's the tricky part. Since as a GitHub Pages, your project will most probably be served in a subfolder (unless you use your own domain name), modify the file `src/server.js`, to mention your subfolder. It will be used as the base tag href attribute value:  

```html 
<base href="/yourproject">
``` 

```js
polka()
	.use(
		'yourproject', // <-- replace yourproject with your repo name
		compression({ threshold: 0 }),
		sirv('static', { dev }),
		sapper.middleware()
	)
	.listen(PORT, err => {
		if (err) console.log('error', err);
	});

``` 


## 5. Deploy via the Terminal 

We want to be able to deploy using a simple command:

```bash
npm run deploy
```

To achieve that, install this npm package: [gh-pages - npm](https://www.npmjs.com/package/gh-pages)

```bash
npm install gh-pages --save-dev
``` 

Then, in the root of your project folder, create the file `/scripts/gh-pages.js` with this content:

```js
var ghpages = require('gh-pages');

ghpages.publish(
    '__sapper__/export/yourproject',// <-- replace yourproject with your repo name
    {
        branch: 'gh-pages',
        repo: 'https://github.com/username/yourproject.git',
        user: {
            name: 'Your name',
            email: 'Your Email address'
        }
    },
    () => {
        console.log('Deploy Complete!')
    }
)

```

Finally, update your `package.json` project file with the following (again, replace `yourproject` with your repo name):

```json
"scripts": {
...
    "export": "sapper export --basepath yourproject --legacy",
...
    "deploy": "npm run export && node ./scripts/gh-pages.js"
  },
````

## 6. Finally, test it out !

From inside your project folder, launch this command:


```bash
npm run deploy
```



Following these steps worked for me 🚀. Do let me know if you run into hiccups ;-)
Generate component with inline template and style using Angular CLI
Tags: angular, webdev, javascript
Published: 2020-01-05 19:09:17

---
title: Generate component with inline template and style using Angular CLI
published: true
description: 
tags: angular, webdev, javascript
---

Whenever we want to create a new component using Angular CLI what we usually do is by running below command:

```
> ng generate component <component-name>
```
or in short 

```
> ng g c <component-name>
```

So using this command Angular CLI generates below four files:

```
<component-name>.component.ts
<component-name>.component.html
<component-name>.component.css
<component-name>.component.spec.ts
```

But when we want to generate component with inline template and style we have to provide two options after the above command.

1. For inline templates, we need to add --inlineTemplate=true. By default its value is false.
2. For inline style, we need to add --inlineStyle=true. By default its value is false.

So final command looks like:

```
> ng generate component <component-name> --inlineTemplate=true --inlineStyle=true
```
For example if you generate component like

ng g c test --inlineTemplate=true --inlineStyle=true

This will generate a component file in which you can see below and it not generate separate template and css file:

test.component.ts
```
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
    <p>
      test works!
    </p>
  `,
  styles: []
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

```


Happy Coding!

You can follow me on twitter [@sumitkharche01](https://twitter.com/sumitkharche01)
Styling Range Sliders with CSS
Tags: css, slider, range, custom
Published: 2020-01-05 18:37:50

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t1heayy5anmugubds2hd.png)

In this post I will cover how to custom style a HTML range input (the slider). You can also get this to work in Internet Explorer, but this guide will just cover Webkit-based browsers and Firefox.

The only thing you need to know terminology wise is that the long bar which indicates the length of the slider is called the 'track' and the knob that you slide along it is called the thumb.

## Getting rid of the main default styling

```css
input[type="range"] {
 -webkit-appearance: none;
}

input[type="range"]:focus {
 outline: none;
}
```

## Styling the track

```css
input[type="range"]::-webkit-slider-runnable-track {
 background: tomato;
 height: 5px;
}

input[type="range"]::-moz-range-track {
 background: tomato;
 height: 5px;
}
```

## Styling the thumb

```css
input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 15px;
 width: 15px;
 background: pink;
 margin-top: -5px;
 border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
 height: 15px;
 width: 15px;
 background: pink;
 margin-top: -5px;
 border-radius: 50%;
}
```

You'll notice that the thumb requires a `-webkit-appearance: none;` in the webkit-prefixed version of these rules.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x1vuhg2d53zbko4taa97.png)

That's pretty much it! Have fun applying your own custom styles. 

I recently added a border and box-shadow to the thumb, and a border-radius to the track, like so:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ynu5glp4yrm0w0dlfwcz.png)
A simple blog tool
Tags: github, dev, bash
Published: 2020-01-05 18:23:20

---
title: A simple blog tool
published: true
tags: github, dev, bash
---

# Use bash github actions to (cross-)post to dev.to

I want to start a series a tutorial about [Gwion](https://github.com/fennecdjay/Gwion),
It should be part of Gwion's [doc](https://fennecdjay.github.io/Gwion/).
as well as available on [dev.to](https://dev.to),

[devto.sh](https://github.com/fennecdjay/devto.sh) is a part of this process,
the one that takes a directory of markdown files and publishes the content to [dev.to](https://dev.to).

It is a both a [github action](https://github.com/features/actions)
and a [template](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template),
so it should be easy for anyone to reuse :smile:

---
EDIT: looks like we can add tags

<!-- DEVTO_POSTID 232689 -->
Pseudo coding
Published: 2020-01-05 18:15:44

What is pseudo coding?

Pseudo coding is writing down what you are about to code in plain english. It is an important part of programming, especially for those that are starting out and for programmers that are encountering hard problems. It is also a great way to deal with imposter syndrome.

A lot of problems seem overwhelming as a whole. When I had to make a fake facebook(https://kazam-inc.herokuapp.com/) for my mod 2 project. I was very nervous and I did not know if I could do it. When I broke everything down to small pieces, Alhamdulillah, It looked very easy.

I am going to start learning javascript in my bootcamp next week, so in anticipation of that. I first pseudo coded a simple app then I coded in javascript.
```
//Ask user some question
//save the user answer
//add the answer as a part of a sentence
//print the formatted sentence
```
It is important, when pseudo coding, to make each step very simple. A good test to see if the pseudo code is simple enough is that a child 8-11 yrs old can follow the steps and do the action in real life. Another thing to keep in mind is the fact that there should be no code in the pseudo code. After pseudo coding, now we can go step by step and google and write everything.

The first step is to ask the user for input.
```
prompt("Please enter your name", "");
```
The above line will prompt the user for their name. Now, we can move on to the next step in our pseudo code. We have to save the input to a variable.
```
const name = prompt("Please enter your name", "");
const age = prompt("Please enter your age", "");
const language = prompt("Please enter your programming language", "");
```
We are prompting the user for three different input and saving the input in three seperate variable. Now we can cross off the first two steps.
```
const formattedString = (`Hello ! my name is ${name} and I am ${age} year(s) old, the programming language I like is ${language}`);
```
The above code will format the string.

```
console.log(formattedString);
```
Last but not least the above code will print it to the user. 

Many times people get overwhelmed by an issue they are tackling, especially when encountering a new language. However, if the problem is broken down into small steps and written down, It can helps us understand and solve any problems that we might encounter in a very efficient manner.
How do you come up with a good title/cover image/twitt?
Tags: help, writing
Published: 2020-01-05 18:07:42

Hello to fellow DEV.to writers

I don't know about you, but the more I write, the more I want to write.

Since I don't have more time than before, to make this sutenable, I want to become better at the things where I'm inefficient.

Some of the things I struggle with are:

- Coming up with a good title and sticking to it
- Coming up with a good cover image, because sharing without one sucks
- Coming up with a good twitt that @practicaldev can use

How do you do those things?

Any favorite tools and strategies?

Bonus question: I would like to spend less time on Twitter. What would be a good way to automatically schedule a selection of posts of mine?
Open Source Support Group
Tags: help, ama, mentalhealth, support
Published: 2020-01-05 17:51:13

Alright I'm going to make this short and sweet.

Mental health is as essential as physical health. Better yet, many articles suggest that your mental health has a direct impact on your physical health (too lazy to find the sources).

Many communities, especially those coming from developing countries, such as mine (Lebanon), don't promote the importance of mental health. Especially for men, where they're not even allowed to shed a tear, otherwise they'd be considered as weak, gay (which is also an insult in my country), etc etc.

I know that on new year's eve, everybody got drunk, was ecstatic, celebrating and whatnot. Then, the next day as the hangover started easing off, they'd start having a different sort of headache, an existential crisis, remembering a breakup, or even simply bothered by how they're being treated at this start up they'd just started working at. That is, if they have a job.

To that reason, I've decided to start a small community. The Open Source Support Group. Aside from the endless groups that already exist for JS, Go, Linux, etc. I'd like this group to have a special type of bond, where we have ups and downs together. We get to know one another and we, unjudgmentally (I don't know if that's even a word), help each other out. Whether it's technical or mental or emotional or you just don't know what kind of whisky to pick at the bar.

Telegram Link: https://t.me/opensourcesupportgroup

If you have any questions or concerns, throw them here.

And in case anyone's having a bad day, here's a pic of my doggo.
My go to places for beautiful free web templates
Tags: html
Published: 2020-01-05 17:50:33



### 1. [Cruip.com](https://cruip.com/free-templates/)

It was purely by accident that I stumbled on to this website and it was long before they started offering paid templates, I've used them in a couple of my projects and found it to be pretty good.


### 2. [Creative-tim.com](https://www.creative-tim.com/templates/free)

While cruip mainly focuses on landing pages, creative-tim has you covered for dashboards and UI kits.

---

I have scouted around for free templates from other sites but more often than not ran into some licensing issues.

If you know of good websites to get free web templates sans the licensing issues, please let me know in the comments.
Can a SPA be JAMstack?
Tags: jamstack, jamuary
Published: 2020-01-05 17:49:39

A single page application (SPA) is a web application that loads a single static HTML page and dynamically hydrates it with new content on user interaction. In light of this definition and the fact that a SPA is generally a static page with some JavaScript and APIs thrown in for interactivity, a SPA (in the traditional sense) can be considered JAMstack. It’s worth noting however that SPAs cannot automatically be assumed to be JAMstack. This is largely because not every SPA serves content directly from the cache. In an attempt to improve SEO and performance, it has become increasingly more commonplace for SPAs to utilize server side rendering techniques alongside client side ones. This technique is also known as isomorphic server side rendering or universal JavaScript where applications run on both client and server. Because the JAMstack pushes for a separation of client and server side code, the JAMstack runs against this notion of isomorphic or universal JavaScript. While the JAMstack encourages leaning on APIs for added functionality, it does not recommend giving an API control over how data is consumed and interpreted. Instead, the JAMstack recommends front loading API consumption and content ingestion at build time. If the need arises, APIs can also be made available at run time via serverless functions so as to dramatically reduce the cost of a consistently running server. 

The importance of good SEO and performance cannot be overlooked. A SPA however well built, will never perform when it comes to SEO and initial load time. This is because the pages in a SPA are not “crawlable” static pages and JavaScript needs to be run each time a new page is requested. Moreover, when first loading a SPA, the entirety of the site needs to be sent to the browser. While SSR solves these challenges, it is not the sole approach to addressing them. For one, SEO can be improved on a SPA by taking advantage of prerendering options like [prerender.io](prerender.io) and Netlify’s [one click prerender feature](https://docs.netlify.com/site-deploys/post-processing/prerendering/?utm_source=devto&utm_medium=prerenderdocs-div&utm_campaign=devex). These prerendering solutions use a headless browser to load all your assets into a static file that bots can effortlessly crawl. A noteworthy solution to address slow initial load times is to prebuild a SPA to static pages. [Prerender SPA plugin](https://github.com/chrisvfritz/prerender-spa-plugin) is a great way to take advantage of webpack to prebuild your site to static pages at build time. If you’d rather not futz with your webpack configuration, frameworks like [Nuxt](https://nuxtjs.org/) and [Next](https://nextjs.org/) offer ways to render a static, prerendered and self-hydrating pages out of the box. 

For more on working with SPAs on the JAMstack, check out this [thorough post covering the difference between isomorphic SSR and JAMstack](https://www.netlify.com/blog/2017/06/06/jamstack-vs-isomorphic-server-side-rendering/?utm_source=devto&utm_medium=isomorphicvsjamstack-div&utm_campaign=devex) over on the Netlify blog.
How to sustain yourself with an open-source project?
Tags: discuss, opensource
Published: 2020-01-05 17:09:25

Hey! I am currently working on [Devolio](https://www.devol.io), a welcoming community for developers to share and dicuss and I am struggling to decide whether or not open-sourcing it is a good idea. 

On one hand, I really want to open-source the software and make it an amazing community with the help of other passionate devs. But, I am worried about how I can sustain myself while not stealing from the other contributors if I make it public. If many other people have helped the project become useful and interesting, I don't want to profit from their labor but I also want to be able to pay for hosting and the other costs of sustaining a server.

I really believe making it open-source would be an amazing opportunity for me to meet other interesting people and code something great but I am torn on what to do.

How have your experiences with the open-source model been and what were the positive and negative aspects?

Thank you so much!
Tech Lessons from Your City?
Tags: discuss, healthydebate, productivity, career
Published: 2020-01-05 17:04:26

I recently came across an amazing post that portrayed where all of us here at Dev.to work from while building, fixing and/or contributing to the software industry. Some of these diverse cities across the world were familiar, some never before heard of and few are simply dream destinations to just be.

Here is it below for those who missed:
{% link https://dev.to/molly_struve/where-in-the-world-do-you-dev-1863 %}

This led me to spawn off a post that I've been contemplating on since a long time. How the places we inhabit have influenced us in our thoughts, working style and evolution.

For e.g: I'm based out of **Mumbai** and I work there as well. Here's what it has taught me that I can apply directly / indirectly to tech.

- Setbacks / failures will happen, it's how you deal with them counts.
- Be kind to everyone irrespective of their social strata. You might not realize it but someone will fight their struggles with renewed vigor for one more day just because of you.
- Hold onto your beliefs, for a miracle is always around the corner.

---

### **What are the tech lessons you've learned from your city?**
MySQL DB backup using Bash script
Tags: bash, database, mariadb, mysql
Published: 2020-01-05 15:53:24

Backups are important for any data. Taking DB backups for MySQL/MariaDB is a cinch with the following script.

# Bash script
Create a file called `backup_script.sh`. Replace the credentials and path to suit your system.

```bash
#!/bin/bash

USER='username'
PASSWORD='password'
DATABASE='ALL_DB'
# Directory should always be mentioned with a trailing slash
DIRECTORY='/path/for/db_backup/'
DOW=$(date +"%A")

# Delete backups which are 7 days old
rm -f $DIRECTORY$DATABASE-$DOW.sql.gz > /dev/null 2>&1

#Backup the DB and Compress it
/usr/bin/mysqldump --user=$USER --password=$PASSWORD --host=$HOST --all-databases --skip-lock-tables > $DIRECTORY$DATABASE-$DOW.sql
/bin/gzip $DIRECTORY$DATABASE-$DOW.sql
```

The script will create/keep in total 7 backups, with the day of the week as its suffix. Escape `$` sign if its used in the PASSWORD variable.

Provide execute permission to the script
`$ chmod 755 backup_script.sh`
Make sure to verify the backup-file is generated by executing the script:
`$ ./backup_script.sh`

# CRON Job
Add the following line to your crontab. This will automatically execute a backup daily at 0400 hours.
`0 4 * * * /bin/sh /path/to/backup_script.sh >> /dev/null 2>&1`
SSHBlack - Securing open linux servers
Tags: linux, security, ssh, iptables
Published: 2020-01-05 15:53:21


[SSHBlack](http://www.pettingers.org/code/sshblack.html) is a must have utility for open servers in the public network(internet). Download the latest versions from the website. The installation steps are as follows:

```bash
$ tar -zxf sshblackv281.tar.gz
$ mv sshblack /usr/local/sshblack
$ cd /usr/local/sshblack
# provide excutable permission for the script
$ chmod 755 sshblack.pl
# Create a new chain BLACKLIST
$ iptables -N BLACKLIST
```

Next we need to update the `sshblack.pl`. Open your favourite editor and update the variables

```perl
# this will run the process in the background
my($DAEMONIZE) = '1';
# The INPUT log file you want to monitor; If Ubuntu OS its '/var/log/auth.log'; if its RedHat based OS '/var/log/secure';
my($LOG) = '/var/log/auth.log';
# Update your static IP which should never be blacklisted, displayed as WWW.XXX.YYY.ZZZ;
my($LOCALNET) = '^(?:127\.0\.0\.1|WWW\.XXX\.YYY\.ZZZ)';
```

Save the file. `./sshblack.pl` will start the script as a background process. The `/var/log/sshblacklisting` file will log the IP information of clients accessing/attacking the server.

Once the server is attacked more than 5 times(default value of variable $MAXHITS), a block rule is added to iptables with the IP information. This prevents new connections to the server from the attacker, in turn preventing the server from brute force attempts. A sample of IP’s which is blacklisted in my server using the script is listed below:

```bash
$ iptables -L
Chain BLACKLIST (1 references)
target     prot opt source destination
DROP       all  --  132.232.54.102       anywhere
DROP       all  --  139.59.84.55         anywhere
DROP       all  --  222.187.232.212      anywhere
DROP       all  --  222.187.225.10       anywhere
DROP       all  --  222.187.238.32       anywhere
DROP       all  --  58.241.250.152       anywhere
```

If you clear the iptables, make sure to clear the text database which keeps track of the attacked IP address.
`echo '' > /var/tmp/ssh-blacklist-pending`
emSigner USB DSC token installation and usage on macOS for filing GST
Tags: emsigner, gst
Published: 2020-01-05 15:52:52

Prerequisites: Chrome browser, ePass DSC USB token. I assume that you are using Google Chrome browser.

## Steps

1. Download and install <a href="https://javadl.oracle.com/webapps/download/AutoDL?BundleId=239849_230deb18db3e4014bb8e3e8324f81b43">Java 8</a> from <a href="https://www.java.com/en/">Java website</a>.
2. Since Mac OS doesn't support Java 8, download and install <a href="http://updates-http.cdn-apple.com/2018/macos/031-33898-20171026-7a797e9e-b8de-11e7-b1fe-c14fbda7e146/javaforosx.dmg">Java for OS X 2017–001</a> from <a href="https://support.apple.com/kb/dl1572">Apple website</a>. <br> <img src="https://drive.google.com/uc?id=1g7kO-f3ei4TJg5frUdK-tuf-rPwkqkfF" class="black_border" alt="java-for-osx">
3. Download and install <a href="https://www.e-mudhra.com/repository/downloads/ePass-Mac.zip">ePass 2003 (Mac)</a> from <a href="https://www.e-mudhra.com/repository/">emudhra website</a>.
4. Download <a href="https://tutorial.gst.gov.in/installers/dscemSigner/emsigner-2.6.dmg">emSigner for Mac</a> from <a href="https://www.gst.gov.in/help/docsigner">GST website</a>.
5. Open _emSigner_ installation utility and copy the _emSigner_ folder to Desktop.
6. Open _Spotlight_ (use the keys) – `Command+Space`.
7. In _Spotlight_, enter - `terminal`. Open the application.
8. Once the `terminal` application opens, enter - `cd Desktop/emSigner`. Press _enter_ key.
9. Execute the following in the next line - `java -jar emsigner_WS_OMM.jar`. The following message will be displayed:<br><img src="https://drive.google.com/uc?id=17_iM1CZbFfQKlQgag5mTvlhdQE6gVeVA" class="black_border" alt="emsigner-ok">
10. Go to MacOS > System Preferences > Java. In the _Java Control Panel_, open the _Security_ tab.
11. Click on _Edit Site List_. Add `https://127.0.0.1:1585` in the exceptions list. Save and close the panel.<br><img src="https://drive.google.com/uc?id=10lFj2kKYdAxc2MivsW9P5iAK8pnT9z4B" class="black_border" alt="java-control-panel">
12. Restart the machine.
13. Execute steps (6), (7), (8) and (9) to run the _emSigner_ listner application.
14. Insert the USB DSC token into the USB slot.
15. Open _Spotlight_ (use the keys) – `Command+Space`. Enter `EnterSafeUserMgr`. It will display the DSC token.
16. Open this URL in your Chrome browser `https://127.0.0.1:1585`, Click on **Advanced** button & again click **Add certificate exception**.
17. Now file your GST using the DSC key.

Since the application is installed on your machine, you don't need to execute all the steps to file GST again. For each month's filing, you only need to execute the steps 13 through 17.