teleren/devto huggingface dataset:
Rails with Postgresql
Tags: webdev, beginners, rails
Published: 2019-02-14 15:31:02

---
title: Rails with Postgresql
published: true
description: Learning to work with Postgresql
tags: webdev, beginners, rails
---

 ![Postgresrails](http://blog.plataformatec.com.br/wp-content/uploads/2014/07/postgresql-ruby-on-rails.png)
During the last [project](https://threeirblog.herokuapp.com), it was only when I was deploying the app to heroku that I learnt that heroku supported postgresql. I then changed the database to postgresql from the default sqlite that rails came with. 

For the project that I am embarking on, I decided to start off using postgresql to begin with. 

I created the app the usual way `rails new (appname)`, and then proceded to change the database detail. In the `database.yml` file I changed the default details to 

```
default: &default
  adapter: postgresql
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: app_development

test:
  <<: *default
  database: app_test

production:
  <<: *default
  database: app_production

```
I also added the `gem pg` to the `gemfile` and ran `bundle install` to install postgresql.

With this done, I ran  `rails db:create` that created the database. I then created my users model. This time around I will be using the [`devise` gem ](https://rubygems.org/gems/devise) for the users authentication process. Finally, I ran `rails db:migrate` and my model was ready.

After all this was done, I found out that I could have skipped the process of changing the `database.yml` file had I mentioned the kind of database I would be using while generating my app with `rails new app --database postgresql`. 

Did I learn something today? Yes, I did even though I did not get a lot of coding hours logged in today. I intend to start working with devise tomorrow, so I tomorrow's post will be all about getting started with the devise gem.
FlutterTrailers
Tags: flutter, dart
Published: 2019-02-14 15:00:30

---
title: FlutterTrailers
published: true
description: A flutter app for seeing movie trailers
tags: #flutter #dart 
---

Well recently i wrote this flutter app and i wanna show it to the community for reviews.

[Github Link](https://github.com/JideGuru/FlutterTrailers)
Fun games to play in tech meetups or hackathons
Tags: discuss, help
Published: 2019-02-14 14:55:50

---
title: Fun games to play in tech meetups or hackathons
published: true
description: What kind of fun games do you know that can be played in tech meetups or coding events to spice up the event?
tags: discuss, help
---

Every Wednesday, I usually hold tech meetings/meetups on our campus where we code and hack a few things here and there. This has started to feel monotonous and I was thinking of introducing something fun and unique. So, what kind of games can you think of or know that can be played in these kind of situations? It could be of any kind, improv e.t.c. Bonus points if the game is techy(teaches something about tech or has tech concepts in it) or geeky. Other known games can be modified to fit this scenario.
Is studying Software Engineering worth it?
Tags: softwareengineering, computerscience
Published: 2019-02-14 14:54:30

---
title: Is studying Software Engineering worth it?
published: true
description: The Pay scale, the Demand, the Testimony, and for the very passionate; the Impact. These are the major factors that determines the choice of study for almost every academic applicant.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2gpq9mdnsq2hkbauvzf6.png
tags: SoftwareEngineering,  ComputerScience
---

The Pay scale, the Demand, the Testimony, and for the very passionate; the Impact. These are the major factors that determines the choice of study for almost every academic applicant. Taking a look at software engineering in terms of these factors, will determine if it is a yes or no for anyone that looks that way.

Let’s start with the concerns of the very passionate applicants.

##The Impact of [Software Engineering](https://jaironlanda.com/blog/Blog%20Post/what-is-software-engineering)

In the world of information technology; software is the most populous entity which has evolved spontaneously, based on needs and technological upgrades. However, not all software made it to their target audience; some were incomplete, unpleasant, outdated, poorly maintained, etc. Fortunately, some others pulled a large portion of wealth to their vendors (ask Bill Gates). If every software is assigned a good software engineer, then the cases of failures will rock the bottom of the chart, as the engineers will ensure the following;

1.	Objectivity: Only a good software engineer can clear any ambiguity in software requirements as presented by the client and come up with a delivery that is valid and verified.
2.	Dependability: Software engineers are best at mission-critical systems where no failure is to be entertained during operation. Hence, they ensure that the system they build are robust, reliable, safe and smart. Space technology and financial management systems are few beneficiaries of good Software engineering. 
3.	Efficiency: They ensure that software are economic and need friendly. Thereby providing the best system with the least possible resources. It takes sound analysis to achieve this… Thanks to software engineers.
4.	Usability: This also involves ensuring that the software is user-friendly and valid to the target audience. Being able to meet the project objectives promptly can change the status of a software from useless to useful.
5.	Maintainability: We hear of reusable codes and models which improves relevance and helps to speed up development, ease integration and support maintenance/upgrade.  A lot of software have stood the test of time because their software engineers made provisions for easy updates/upgrades as well as maintenance.

##The Pay Scale

The average pay for a Software Engineer is $83,044(USD) per year as reported by PayScale, Inc. However, there are slight disparities based on regions or countries.

![Alt PayScale, Inc report](https://thepracticaldev.s3.amazonaws.com/i/k3jyoojgn64c3euv8fy6.jpg)

The statistics above is for the United States which was updated on 22 October, 2018 with 47,128 individuals reporting.
Form validation with React Hooks
Tags: validation, react, reacthook, javascript
Published: 2020-06-25 22:34:11

---
title: Form validation with React Hooks
published: true
date: 2019-02-14 14:52:44 UTC
tags: validation,react,reacthook,javascript
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/903/1*YWaSaYPtW1n_vEplTUaanA.png)](https://itnext.io/form-validation-with-react-hooks-ab0dbba23b9f?source=rss-ea85e17e7579------2)

As you may know, I’m pretty excited about the new React API for Hooks (here is an introduction about them)

[Continue reading on ITNEXT »](https://itnext.io/form-validation-with-react-hooks-ab0dbba23b9f?source=rss-ea85e17e7579------2)
Building a Vue.js SPA to Sell Developer Tees
Tags: javascript, vue, beginners, ecommerce
Published: 2019-02-14 16:08:49

---
title: Building a Vue.js SPA to Sell Developer Tees
published: true
tags: javascript, vue.js, beginners, ecommerce
canonical_url: https://snipcart.com/blog/building-a-vuejs-spa-to-sell-developer-tees
---

![Creating a Vue.js SPA for E-commerce [Tutorial Included]](https://snipcart.com/media/204064/vue-js-plus-snipcart-1.png)
Stereotypes can be a funny thing. 

Some are nice like Swedes are gorgeous; some are mean like Americans are fat and Italians are “passionate;” and some seem downright true like all Canadians are polite. 

But if you travel enough, you know these are typically gross over-generalizations and, usually, are more divisive than anything else.

And that’s why I love coding so much. It’s way more open-minded. When I meet someone writing in PHP, they’re more than happy to listen about my Vue.js SPA project, for example. And I’m more than happy to listen to what they’re working on, so long as it isn’t a WordPress site (just kidding). 

But, hopefully, you get my point. It’s this international inclusiveness among developers that inspired a friend and me to start [Maison Futari](https://maisonfutari.com/). 

In this post, I am going to:

* Tell you what inspired Maison Futari 
* Discuss why I chose Vue.js to create it
* Give a  step-by-step Vue.js SPA tutorial
* Share my experiences (good and bad) with using Snipcart as my shopping cart

Let's get started!

→ Read the full post [here](https://snipcart.com/blog/building-a-vuejs-spa-to-sell-developer-tees)
BASH SHELL
Tags: bash
Published: 2019-02-14 13:05:38

---
title: BASH SHELL
published: true
description: Lets see about most common linux shell and its commands
tags: Bash
---
This post was originally published on my blog, find original post [here](https://santhoshkumarr0.github.io/posts/bash-shell/)

## What is shell ?

Computers understand the language of binary. In early days of computing, instructions were provided using binary language which is difficult to write and read.So, to make the intructions into readable understandable format , in an operating system there is a special program is called the [shell](https://en.wikipedia.org/wiki/Shell_%28computing%29). The shell accepts human readable commands and translate into something kernel can read and process those intructions.

The shell is a user program or an environment provided for user interaction. It is command language interceptor that executes the command from the standard input device like keyboard or from a file. The shell gets started when we log in or open a terminal (console).

The most common Linux shell is named "**Bash shell**".

## Bash shell


The bash shell was inspired by [**Bourne shell**](https://en.wikipedia.org/wiki/Bourne_shell). It is one of the most important softwares in a Linux system.

Shortcut for opening terminal in linux system is <code>CTRL + ALT + T</code>.

When we open the terminal , it will present us with prompt asking us to enter a command .<code>santhosh</code> is user name, <code>ubuntu-18-04</code> is my system name.

```console
santhosh@ubuntu-18-04:~$ _
```

> <code>~</code> in the prompt shows us that we are in user home directory.
> if I am the root, then my home directory will be <code>/</code>.

To find out which shell we are using .

Use <code>help</code> command to print shell name and its version

```shell
santhosh@ubuntu-18-04:~$ help
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
These shell commands are defined internally.  Type `help' to see this list.
Type `help name' to find out more about the function `name'.
Use `info bash' to find out more about the shell in general.
Use `man -k' or `info' to find out more about commands not in this list.
```

or you can print [system variable](https://en.wikipedia.org/wiki/Environment_variable) <code>SHELL</code> to get the shell 

```shell
santhosh@ubuntu-18-04:~$ echo $SHELL
/bin/bash
```

<code>echo</code> is a command which is used to display message or system variable.

```shell
santhosh@ubuntu-18-04:~$ echo message
message
```

> When we enter a command , it is actually stored in history (<code>.bash_history</code> file in home directory ), so we don't have to re-type the previously entered commands, we can just traverse this history using the up :arrow_up: and :arrow_down: down arrow keys.

we can display user name of user using simple <code>whoami</code> command.

```shell
santhosh@ubuntu-18-04:~$ whoami
santhosh
```

we can get documentation 
or manual  of commands using <code>man</code>

```shell
santhosh@ubuntu-18-04:~$ man whoami
```

> To exit from the manual page, press <code>q</code> .
How to enable SSL in Netlify with custom domain
Tags: netlify, dns, ssl, https
Published: 2019-02-14 12:34:03

---
title: How to enable SSL in Netlify with custom domain
published: true
description: I went through the hoops of using custom domain with Netlify and learned about DNS
tags: netlify, dns, ssl, https
---

Do you have a static site you need to put somewhere in Internet so others can access it? You're in for a treat: [there are dozens of really good options](https://www.slant.co/topics/2256/~best-static-website-hosting-provider). I wanted to try out [Netlify](https://netlify.com) for my website renewal because everyone had been saying good things about it and I had never used it.

I had an existing domain on [Hover](https://hover.com) and used to run my website from a self-hosted [Hetzner VPS](https://hetzner.de). But during the past decade, the website and my server had become a mess. I wanted to start using a static site generator and to make deployment easier. So I installed [Eleventy](https://www.11ty.io/), piece by piece transformed my old site into an Eleventy site and ran `eleventy`. Boom, few seconds later I had `_site` folder that I dragged and dropped into Netlify and the site was up.

**It was one of the best UX experiences ever.**

Netlify offers Let's Encrypt SSL certificates for websites but that's when I hit some issues. I'm not an expert on domains and DNS and whatever I tried, I was always faced with an issue.

> Web sites prove their identity via certificates. Firefox Developer Edition does not trust this site because it uses a certificate that is not valid for hamatti.org. The certificate is only valid for the following names: *.netlify.com, netlify.com
Error code: SSL_ERROR_BAD_CERT_DOMAIN

After lots of reading docs, googling, consulting much smarter colleagues and finally contacting Netlify support, things got fixed.

Their documentation on [setting up DNS with custom domain](https://www.netlify.com/docs/custom-domains/#dns-configuration) is pretty good. As I use Hover, they don't provide ANAME or ALIAS options so I had to do A record and CNAME.

```
A @ 104.198.14.52
CNAME www [appname].netlify.com
```

`104.198.14.52` is Netlify's load balancer's IP address and `[appname]` should be your app's name in Netlify.

So I set up all this but still encountered issues. After contacting support, turned out that sometimes (probably me being too eager to change the settings too fast) something in DNS-and-or-certificate chain fails and it hungs on Netlify's end.

If that happens to you, contacting [their support](https://www.netlify.com/support/) is the way to go. They can manually clear the issue and re-trigger the fetch to make it work.
Applying a Naming Convention to Constraints via SQLAlchemy & Alembic
Tags: sqlalchemy, alembic, constraints, toptip
Published: 2019-02-14 10:56:42

---
title: Applying a Naming Convention to Constraints via SQLAlchemy & Alembic
published: true
description: Quick how to, that I just learnt so thought I would share to save someone else the pain!
tags: SQLAlchemy, Alembic, Constraints, Top Tip
---

# Top Tip!

So we're creating a new database schema, using SQLAlchemy for the ORM and Alembic for the schema management, (if you use Python and need to manage a database sructure I highly recommend these two tools), anyway we just ran into a problem when downgrading a migration that attempted to drop an unnamed Foreign Key.

## Wat?!

Why would it allow me to create a constraint that it can't drop, why? Good question, turns out that it's up to you (well me in this case) to name things.

Obviously we don't want to have to remember to do this manually everytime we generate a migration involving a constraint, that would be tedious and prone to error (I will definitely forget to do this), so what do we do?

Well Alembic has you covered, you can set a naming convetion to apply to all migrations, when declaring your Base model class (this should be default behaviour in my opinion, but I'm not hating, nothing but love for you Alembic/SQLAlchemy).

## Cut to the chase and tell me how

Well like this;

```
from sqlalchemy import MetaData
from sqlalchemy.ext.declarative import declarative_base

meta = MetaData(
    naming_convention={
        "ix": "ix_%(column_0_label)s",
        "uq": "uq_%(table_name)s_%(column_0_name)s",
        "ck": "ck_%(table_name)s_%(constraint_name)s",
        "fk": "fk_%(table_name)s_%(column_0_name)s_%(referred_table_name)s",
        "pk": "pk_%(table_name)s"
    }
)

Base = declarative_base(metadata=meta)
```

[Source alembic docs for reference are here](https://alembic.sqlalchemy.org/en/latest/naming.html) thank you alembic peeps!


So there you go - simply use the Base in your alembic env.py - and also inherit from Base in all your model classes and you're good to go

You'll see autogenerated migrations like this; 

```
    ...
    sa.PrimaryKeyConstraint('id', name=op.f('pk_thing'))
    ...
    sa.ForeignKeyConstraint(['wotsit_id'], name=op.f('fk_thing_wotsit_id_wotsit')),
    ...
```

Enjoy!
Learn By Copying Someone Else
Tags: react, tutorial, javascript
Published: 2019-02-14 08:38:30

---
title: Learn By Copying Someone Else
published: true
description: Use React & Styled Components to clone popular website features.
tags: react, tutorial, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1i9aa8aevxv7u2aptd85.jpeg
---

Are you learning `React`? Are you interested in `Styled Components`? If `yes||yes`, [check out my new series](https://www.youtube.com/playlist?list=PLh6ckU65UHatP5H8ujyQ8IlPC6G5n8A3b), free on YouTube. Else, `article.exit(0)`.

{% youtube IJD33I0Ixck %}

The idea is to isolate dynamic, but simple, components from popular websites and re-created them using React and Styled Components. We are not building a full stack app here and the target length of each series is about 1 hour. So these are easily digestible videos.

To get a better idea of what is up, the GIF below is the first component - the YouTube tag input. It appears when a user is uploading an video and the tags are used to help with search functions or video sorting later on. While most def not the flashiest UI ever created, it does pack a lot of functionality into a small space. What I like is that on first glance the user sees a regular `input[type='text']` element. Upon closer inspection there is much more going on. Tags are being saved somewhere. The text input's placeholder only shows up when there are no tags. Commas, and the `enter` key save a tag. Certain characters and multiple spaces are not allowed in tags. Each tag has a little `x` that deletes it. Tags are cut off after they get too long. How is all this happening?

![](https://thepracticaldev.s3.amazonaws.com/i/txkfz3ckag7amb20gscm.gif)

Okay. Lets dig a little deeper. One neat feature of the YouTube tags input is how individual tags are deleted. This is done with the `backspace` key. If any text, not in a tag, is present, backspace functions normally - erasing a single letter at a time. Now if there is no text the backspace key will turn that last tag into selected text. Then of course one more press will erase the entirety of the tag. This is cool because it gives the user a intermediate step in tag deletion without being over the top, like a `confirm` dialog or something - I mean we are just talking about a tag here. So if you are wondering how to do that...watch the video.

On the other hand, no one is making you do anything. But I will say that trying clone UI features from other websites is a worthwhile practice. Even if you aren't a React person, use your preferred UI library/framework, or even vanilla JavaScript if you are feeling it. I have found that when my mindset is that of a `user` I don't really think about the code behind the functionality. And when something is easy to use the complexity behind the scenes is overlooked. 

![](https://thepracticaldev.s3.amazonaws.com/i/ap6ch90i9olihv68mlu4.jpeg)

Thanks for reading.
How to execute Firefox with support for KDE filepicker
Tags: kde, linux, mozilla
Published: 2019-02-20 11:08:16

---
title: How to execute Firefox with support for KDE filepicker
published: true
tags: KDE,Linux,Mozilla
canonical_url: https://daniele.tech/2019/02/how-to-execute-firefox-with-support-for-kde-filepicker/
---

This is a long time problem, like 9 years ago one of the first ticket was opened to bugzilla about get the KDE filepicker support in Firefox. 

The post [How to execute Firefox with support for KDE filepicker](https://daniele.tech/2019/02/how-to-execute-firefox-with-support-for-kde-filepicker/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Add Project to Source Control in Azure DevOps (VSTS)
Tags: tutorial, dotnetcore, orchard, webdev
Published: 2019-02-14 10:25:15

---
title: Add Project to Source Control in Azure DevOps (VSTS)
published: true
description: 
tags: tutorial, dotnetcore, orchard, webdev
canonical_url: http://charles.stuartedwards.me.uk/blog/add-project-to-source-control-in-azure-devops-vsts
series: Create an Orchard core site and deploy using Azure DevOps
---

> This post is part of the [Create an Orchard core site and deploy using Azure DevOps](http://charles.stuartedwards.me.uk/blog/create-an-orchard-core-site-and-deploy-using-azure-devops) series.


So here is how you add your new project to Azure DevOps which was called Visual Studio Team Services (VSTS).

1. In visual studio in the bottom right corner click the **Add to Source Control** link and then select **Git**. <br/>
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 2/2-1.png" style="width:35%"/>

2. The team explorer side panel will open with the git service options.
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 2/2-2.png" style="width:65%"/>

3. We are adding the project to Azure DevOps so you will need an account: 
[visualstudio.microsoft.com/team-services/](https://visualstudio.microsoft.com/team-services/)

4. Click **Push Git Repo** under Team Services.
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 2/2-4.png" style="width:60%"/>

5. Enter your account details and repository name and click Publish Repository. <br>
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 2/2-5.png" style="width:60%"/>

6. This will push all your code to a new  Azure DevOps repo.

Done!

You can get to your Azure DevOps repo from visual studio by going to the **Team Explorer** tab: <br/>
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 2/2_6.png" />

Click the link under the **Azure DevOps** section:<br/>
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 2/2-7.png" />

From here you can see all the code you have pushed to the repo.
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 2/2-8.png" style="width:100%"/>

There is loads more that Azure DevOps does and we will come back later to setup a build pipeline.

But first lets [Setup Orchard Core in Visual Studio using Nuget](http://charles.stuartedwards.me.uk/blog/setup-orchard-core-in-visual-studio-using-nuget)


> Originally published on my personal blog: [Create an ASP.net Core Website in Visual Studio 2017](http://charles.stuartedwards.me.uk/blog/add-project-to-source-control-in-azure-devops-vsts)
Skip Navigation - Accessibility
Tags: a11y, react, componetns, opensource
Published: 2019-02-14 10:21:34

---
title: Skip Navigation - Accessibility
published: true
description: React Component that help you to provides a skio=p navigation links

tags: a11y,react,componetns,opensource
---

# What is the Skip navigation?
Skip navigation is a way to provides the links to keyboard & screenreader users that helps them to jump to the main content area or any specific area on website.

{% github Muhnad/skip-links %}