teleren/devto huggingface dataset:
Deploy PostgreSQL in Node.js to Heroku for beginners
Tags: beginners, postgres, database, heroku
Published: 2020-06-29 21:12:56

During my time at [Founders and Coders](https://www.foundersandcoders.com/), we had to use Heroku to deploy our Node + PostgreSQL projects quite a few times. Because it can be daunting at first, I put together this step-by-step based on their graphic user interface. It is quick and straight to the point. Questions and contributions are welcome!

## Deploy your project

Signup/Login to [www.heroku.com](http://www.heroku.com). Go to `New` > `Create new app` to start. Add name, region and hit `Create app`. Choose GitHub as a deployment method under the 'Deploy' tab, search for your repo to connect: 

![screenshot](https://dev-to-uploads.s3.amazonaws.com/i/3atr0di1hpcb4eawo6eb.png)

on the same tab, click `enable automatic deploys` with the master branch for your future deploys.  For the first install, hit `Deploy Branch` in 'Manual deploy' section to deploy your app:

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

---

Important to notice that after deployment, Heroku will run the 'start' script in your package.json to start your application. Make sure it is correct.

```
"script": {
	"start": "server.js"
}
```



## Deploy your PostgreSQL database to Heroku

Once your app is up you should see the message below:

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

Go to 'Resources' tab and search for `Heroku Postgres` add-on, then select the `Hobby Dev - Free` version and hit `Provision` to confirm.

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

Back to 'Resources' tab, you can see your current database clicking on `Heroku Postgres`. You should see in a new tab something similar to the below image, indicating your database is empty:

![screenshot](https://dev-to-uploads.s3.amazonaws.com/i/0vwpb8d5rzupmvaeyizl.png)

### Connect to the database

Heroku will generate a DATABASE_URL that you can use to connect to your production database. You can find this under 'Settings' back to the project tab in `Reveal Config Vars` with key 'DATABASE_URL'. 

Important: If your project/database depend on API keys or tokens, add them in your `config vars`.

Connect to it via psql/pgcli copying and pasting the url in your terminal and then running you init.sql file:

```sql
//in psql

\c <DATABASE_URL>;

\i database/init.sql;
```

## Some extra tips

- You can view more information about the database by accessing it from 'Resources' and navigating to 'Settings' > `View Credentials`;
- You can add collaborators via `Access`tab;
- View logs in `More`;
- You can delete projects from Heroku in 'Setting' at the bottom of the page.
Learning Svelte 2 | data, templating & styling
Tags: svelte, javascript, codenewbie, tutorial
Published: 2020-06-29 21:08:09

In this second article in a series on [Svelte.js](https://svelte.dev) we're going to cover the very basics of dynamic data in svelte, how to populate our template with said data, and how to style it all. First, lets look at the basics of how our data interacts with our template.

```svelte
	<script>
		let name = 'world';
	</script>
	
	<h1>Hello {name}!</h1>
```

In this little Hello World example, we see that all we have to do is save our data to a variable ('name') and place that variable inside of curly braces within our HTML template. If you've seen JS templating frameworks like Handlebars, this may look familiar. Obviously, when you receive any sort of real data from an API or database, it will likely be an array or object. We can use the following syntax to pull values from an array or object...

```svelte
	<script>
		let names = {
			one: 'megan',
			two: 'jeff',
			three: 'muhammad'
		};
	</script>
	
	<h1>Hello {names.one}!</h1>
	<h1>Hello {names.two}!</h1>
	<h1>Hello {names.three}!</h1>
```

You can now see how you might populate a page with different values from a database. I find this syntax very intuitive if you're coming from vanilla HTML/CSS/Javascript and this is your first framework. Last thing I want to cover in this article is styling components. We'll get into the component structure next time, but just know to style in Svelte is very easy, *as styles are scoped to the component*. You also have global styles available, but scoping the styles to the component removes a lot of code from the compiled app! 

```svelte
	<script>
		let names = {
			one: 'megan',
			two: 'jeff',
			three: 'muhammad'
		};
	</script>
	
	<h1 id="1">Hello {names.one}!</h1>
	<h1 id="2">Hello {names.two}!</h1>
	<h1 id="3">Hello {names.three}!</h1>
	
	<style>
		h1{
			color:red;
		}
		#2{
			color:green;
		}
		#3{
			color:blue;
		}
	</style>
```

Here I've added style to our previous example. Even though our first selector is an element selector, it will only apply to the `<h1>` tags within this component, not throughout the whole app. 

If you're interested in Svelte, make sure to check back for more articles exploring Svelte with me! Make sure to check out the tutorials and REPL at [svelte.dev](https://svelte.dev).
Is it possible to learn web development / design while working full-time?
Published: 2020-06-29 20:55:38

We saw this post: [Do you recommend quitting a 9-5 to learn web development full time?](https://dev.to/heroku/do-you-recommend-quitting-a-9-5-to-learn-web-development-full-time-26pb)

## It's a _little_ but it's a lot!

![chart of available hours](https://perpetual.education/wp-content/uploads/08-large.jpg)

and offered these thoughts: 

>We think that learning - 'part-time' is essential to learning the fastest. Crazy, right!? But - while you're at work... getting paid etc - you can do a lot of the thinking and preparing. If you set up [a system of learning](https://perpetual.education/escape-tutorial-purgatory/) a solid concept (and fair amount of work for a day) - you can let them sink in throughout the day. A video / or lesson in the morning - and then - you think about it while in transit / maybe apply the idea to something you do at work. Learning about 'data structures' and 'collections' - then while you're at the grocery store, you can think about how things are grouped - and what is on each item, and why you might want to sort them. Then when you get home - you've been ingesting it all day. You can work on your challenges - and maybe even talk to some other students or something. You could also go all in and try and learn 5 stacks and stay up all night and cram... but that doesn't seem to work out well. Our suggestion (even if you are not employed) is to learn 'part time' - in that way. Half the battle is learning how to tune out the noise and get in a work/life rhythm. Always happy to discuss it!

We actually wrote an article about that and forgot!

## [Is it possible to learn web development / design while working full-time?](https://perpetual.education/is-it-possible-to-learn-web-development-design-while-working-full-time/)

![Chart of how to use time](https://perpetual.education/wp-content/uploads/06-large.jpg)

### Your brain will find the hidden time to learn all day or night when you're at work

There is the BEST use of your time. But just using your time – doesn’t mean you’re using it well. Choosing a program that takes advantage of this time – and builds things like prototyping, content strategy, user-testing, usability, accessibility – and research into your daily life – will take advantage of every moment you have – and it’s fun. ; )

[You can read the whole thing here](https://perpetual.education/is-it-possible-to-learn-web-development-design-while-working-full-time/)
rails 6: Prevents logging sensitive info accidentally 
Tags: rails, security
Published: 2020-06-29 20:06:34

###Introduction

In Rails generally we filter out sensitive params getting logged in the logs. But it has an issue. It exposes the filtered params when we inspect the object.

Assume we have a user model and for example sake I am not encrypting the password here

```ruby
class User < ApplicationRecord
  validates :name, :email, :password, presence: true
end
```
And we have configured our application to filter out password
`config/application.rb`

```ruby
config.filter_parameters += ["password"]
```

When we create a user object, the password gets filtered in the log/console 
```ruby
User.create(name: 'John', email: 'john@example.com', password: 'password')
```
```shell 
#<User id: 1, name: 'John', email: "john@example.com", password: [FILTERED] ....>
```
The catch is when we use `inspect` method it displays the password and it does not respect the `filter_parameters` configuration.  

####Solution

These issues exist upto Rails 5. Rails 6 fixed this issue and also introduced a flexible option `filter_attributes` 

In rails6 we shall filter out sensitive params via our usual configuration. 
```ruby 
  config.filter_parameters += ["password"]
```
and also using `filter_attributes` as follows

```ruby
class User < ApplicationRecord
  self.filter_attributes=[:password]
  validates :name, :email, :password, presence: true
end
```

The `filter_attributes` is configured in model, it takes priority and ignore the `filter_parameters` 

For example
```ruby
class User < ApplicationRecord
  self.filter_attributes=[]
  validates :name, :email, :password, presence: true
end
```
```ruby
 User.new(password: 'password')
```
It now reveals password
```shell
#<User id: nil, name: nil, password: 'password', created_at: nil, updated_at: nil>
```

> We shall use filter_attributes to not only prevent logging sensitive data but also from logging very huge data fields like blob and text (in case if it not important) thus we shall reduce the size of log file as well :)
Developing WordPress Themes With TailwindCSS – Part I
Tags: wordpress, tutorial, webdev
Published: 2020-06-29 20:33:27

In this series, I'll be walking through the process of setting up a local environment for WordPress theme development using TailwindCSS. 


Whether you're on Linux, Windows or Mac, we'll need to run our WordPress own server. You can use XAMPP, WampServer, MAMP or similar software that enables you to run a local PHP server with Apache and MySQL. I'll be using MAMP but feel free to download and install your preferred tool. 


To install MAMP, navigate to https://www.mamp.info/en/downloads/ and download the package file; double-click the downloaded package to begin the installation. Once our server is installed, we can start it by opening MAMP and clicking 'Start servers'. 



![MAMP launch screen](https://dev-to-uploads.s3.amazonaws.com/i/dcwzoi5vnaljj33h8zxp.png)



Optionally, we can configure the ports and document root or opt to keep the defaults. These options are reachable via `MAMP > Preferences`. I kept the default ports and configured a different document root to a project folder I had previously created. 



![MAMP Port Configuration](https://dev-to-uploads.s3.amazonaws.com/i/fey6z75ccor6wlywhh3d.png)



![MAMP Web Server Configuration](https://dev-to-uploads.s3.amazonaws.com/i/kyishlg12sfdpd8mxzmy.png)



Next, we'll get the latest version of [WordPress](https://en-gb.wordpress.org/download/) and unpack the downloaded zip file into your document root. You can rename the extracted folder to the name of your project to keep track of your websites. 


Now that we've got our WordPress site in place, we can create the database to store our site data. Navigate to `http://localhost:8888/phpMyAdmin` and create your new database. 



![php myAdmin](https://dev-to-uploads.s3.amazonaws.com/i/1mq3x8vyck72rg5zgfbu.png)



Next, we'll point our WordPress site to our newly created database. Open your site folder (the one you extracted WordPress to) and locate the file `wp-config-sample.php`. We're going to rename this file to `wp-config.php` and update it the following options:


```
DB_NAME	<database name>
DB_USER	root
DB_PASSWORD	root
```


Great! Now we're all set! If you navigate to `localhost:8888/<site-name>` you should see the WordPress installation screen. 



![WordPress Installation Screen](https://dev-to-uploads.s3.amazonaws.com/i/q3ecplijicmt6sq7uju0.png)



Once you fill out the form, you can log in and start using your brand new local WordPress site!




_Cover image by [Igor Miske](https://unsplash.com/@igormiske?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)_
Clean up untracked files in git repository based on .gitignore
Tags: reactnative, git, github
Published: 2020-06-29 19:57:41

![Why am I here?](https://dev-to-uploads.s3.amazonaws.com/i/0jdtrw14ihx2uem3zso1.jpg)
[Photo by Jon Tyson on Unsplash](https://unsplash.com/photos/pBFuAP0Ap9c)

The other day I had created a new React Native module project and pushed it to the git repository. Then later, I added the file `.gitignore.` Since we added it later, these files will still exist in our repository index. How can we clean them up?

1. Commit all your local changes including .gitignore
`git commit -am "file changes"`

2. Remove everything from the repository
`git rm -r --cached .` 
`#` --cached will only remove files from the index.
`.` Indicates all files will be untracked
or
you can un-track individual files
`git rm --cached ios/Pods`

3. Re-add everything
`git add --all`

4. Commit the files
`git commit -m "cleanup .gitignore files"`
100 Days of SwiftUI — Day 29
Tags: 100daysofswiftui
Published: 2020-06-29 19:59:06

---
title: 100 Days of SwiftUI — Day 29
published: true
date: 2020-06-29 19:57:02 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-29/
---

Another day, another small blogpost about my progress. I kind of get used to this daily blogging-thing and I really like it!

[Day 29](https://www.hackingwithswift.com/100/swiftui/29) was the first day of the fifth project, which will be another small game. I learned about [List](https://developer.apple.com/documentation/swiftui/list) in SwiftUI and [UITextChecker](https://developer.apple.com/documentation/uikit/uitextchecker) in UIKit.

According to Paul, this will be the last easy project. We'll see tomorrow, I guess!

<!--kg-card-end: markdown-->
The alias command - Doing more by typing less
Tags: linux, bash, alias, codenewbie
Published: 2020-06-29 19:56:00

I finally decided that I will be writing one article per week, to improve my writing skills and learn along the way.

Last weeks topic was on the alias command, I did lots of reading on it and got done on an article I think would be an interesting read.

You can read the article [here](https://munawrites.me/2020/06/29/The-alias-command.html), I would really love to read your feedback, enjoy.
Skeleton content loading animation in android | Facebook Shimmer
Tags: android, facebookshimmer, animation
Published: 2020-06-29 19:52:07

![Facebook Shimmer](https://dev-to-uploads.s3.amazonaws.com/i/017ot3sf0heikmfq86ie.png)
##What is Facebook Shimmer?
Today we are going to see what is Facebook shimmer and how to use it?
See below example to understand Facebook shimmer.

content loading animation

The Facebook shimmer is used to show or indicate the user that the content is loading from somewhere which takes sometimes so that users need to wait. While content is loading, it is necessary to show the user an indication that content is loading and it is bad practice to leave screen blank which confuses user what is happening in the app or maybe the user thinks the app is hanging.

##How to use Facebook Shimmer
So enough talking, let do some code on how to make content loading animation using facebook shimmer library. See below facebook shimmer android example

To use facebook shimmer first we need to add the dependency to your project. See below to add facebook shimmer dependency.

dependencies {
...
implementation 'com.facebook.shimmer:shimmer:0.5.0'

}

After adding dependency, let's create our layout. For demo purposes, we are creating our layout some like below.

Read the full article here: [Facebook Shimmer](https://www.akshayrana.in/2020/02/show-loading-content-animation-facebook.html)

Thanks and good luck.
Answer: How can I clear a Codemirror editor field from Cypress
Tags: cypress, javascript, watercooler, stackoverflow
Published: 2020-06-29 19:41:44

I was able to with a little help from another answer in the responses to come up with a solution.
1. Problem domain involved embedded editor CodeMirror
2. I wanted to use Cypress to remove all Text in a field then simulate a user typing in all their own, like a copy-paste.
3. Could not remove code from the editor with Cypress as expected.
 
Normally I am afraid to use StackOverflow because I don't want to be shutdown or talked down too. I tweeted my question and got a great response; friendly and helpful! This is the type of interaction I love to see in StackOverflow. 
Big thanks again to @evanplaice for seeing my tweet and helping out, here is his Twitter: https://twitter.com/evanplaice

{% stackoverflow 62014266 %}
Using idb-keyval for indexedDB
Tags: javascript, database, react
Published: 2020-06-29 19:39:13


## Why use indexedDB instead of localStorage?

I came across indexedDB when I was looking for an alternate option for localStorage since it was not storing all the elements of an object. I needed to create react component using those values but since all the elements were not stored I was not able to display all the details on the client-side. So used indexedDB instead of localStorage to store the data.

## What is indexedDB?

As per the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) docs, _indexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data._

It also says that _IndexedDB is a transactional database system, like an SQL-based RDBMS. However, unlike SQL-based RDBMSes, which use fixed-column tables, IndexedDB is a JavaScript-based object-oriented database._

## How to use indexedDB?

It might appear to be a bit difficult to use indexedDB but it becomes very simple when we use idb-keyval. Now, we can set and get data from the keyval store of the indexedDB using key-value pairs as we did in localStorage. Unlike localStorage, here we can stores arrays and objects too. We don't need to stringify the data before sending it on the keyval store of indexedDB. It is a promise-based keyval store

For using the idb-keyval, we need to install it using the following command:

`npm install idb-keyval`

And importing the set and get methods

`import {set, get} from "idb-keyval"`

## Let see a simple use of indexedDB.

The syntax of the set method is

`set("key", "value")`

and the syntax of the get method is

`get("key")`

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

As you can see in the example that we have updated the value inside the _then_ block. it is because idb-keyval is promise based and the get method will always return a promise.

Apart from the set and get methods there are other methods like del, clear, and key.

You can find the code in the [Github Repository](https://github.com/mritunjaysaha/-Blog-idb-keyval-indexedDB).
Web Share API & Sharer URLs
Tags: frontend, javascript, html, api
Published: 2021-12-20 18:54:45

---
title: Web Share API & Sharer URLs
published: true
date: 2020-06-29 19:25:00 UTC
tags: frontend,javascript,html,api
canonical_url: https://jamesmiller.blog/web-share-api-sharer-urls/
cover_image: https://i1.wp.com/jamesmiller.blog/wp-content/uploads/2020/04/social-dark-scaled.jpg
---
Social sharing is a standard in our daily lives nowadays and is often a requirement for projects I work on. I’ve recently stumbled upon a nice easy way to include it using Web Share API and Social Share URLs – which I wanted to make a note of going forward.

**WebShare API is a code standard that allows the sharing of content (url / image / text) on any installed social media or messaging app.** This is done via the native browser share interface of the device you’re opening it on (this is currently only compatible with Mobile Devices and Safari on Mac OS).

**Sharer URLs are links that allow the sharing of content (url / image / text) on a social media platform that the url is written for.** In this example this is done for Facebook, Twitter, WhatsApp and Pinterest.

![web share api](https://i1.wp.com/jamesmiller.blog/wp-content/uploads/2020/04/webshare-1-scaled.jpg?fit=640%2C424&ssl=1)
_Visual explanation of the code I’ve written below, that allows you to play with in your browser. It demonstrates social sharing implemented with Web Share API if you’re viewing this page on a compatible device (e.g Mobile Devices / safari on Mac OS), or Sharer Urls if you’re viewing on a device which is not compatible with Web Share API (e.g most laptops)._

To edit the code, open the HTML, CSS or JS tabs – or just have a cheeky click around on the Result tab! Have fun with Web Share API and enjoy ![😀](https://s.w.org/images/core/emoji/13.1.0/72x72/1f600.png)

{% codepen https://codepen.io/jamesmillerblog/pen/poJXWdX %}
ISO online course collaborator - marketing/advertising/social media skills
Published: 2020-06-29 19:12:26

Hi , I’m new here. I’m looking for a marketer/social media guru to collaborate with for an online course project. I’m a Doctor of Pharnacy with 10+ years of experience in the pharmaceutical industry. I’m creating an online course that’s pharmacy related and I believe could be highly profitable based on my research. I do not, however, know how to market it, nor do I have any kind of online presence to expose potential students to it at first. I’m looking for someone who’s interested in hearing about the idea, and if they find it appealing, collaborating with me on this project.