teleren/devto huggingface dataset:
Mod 4
Published: 2022-01-17 21:50:04

For this project I wanted to build a Single Page Application that would display a trivia game for my significant other. The backend was built with Rails API and the frontend with HTML, CSS, and JavaScript. A user has three categories to select from to start the game. When a user selects a category they get a "Good Luck!" alert and the questions for that category are rendered. Once the user finishes the questions in a category the user can click another category and answer those questions. After a user has finished all of the questions the user has the option to save their score by typing a username.  

1. Back-End Development 

I started by working on the back-end of the project by running:

`rails new PROJECT_backend --database=postgresql --api`

The line above creates a new rails project with PostgreSQL as the database. To deploy the backend of the application to Heroku the database needs to be PostgreSQL since SQLite is not supported. 

I created my models by running: 
`rails g model Category`
`rails g model Question`
`rails g model User`

A category has_many questions and a question belongs_to a category. The user model did not have any associations since I won't be authenticating a user.

After creating the models, I ran the migrations, added model classes, and associations. I created the seed data and checked the associations using rails console. After verifying that the associations were correct I proceeded to create an api/v1 folder under controllers to namespace the routes. 

![Rails Console showing associations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q27jv74ytm4u17zatzex.png)

I added the `gem 'rack-cors'` to allow the backend to perform asynchronous requests. I added the `gem 'fast_jsonapi'` and created the controllers. 

`rails g controller api/v1/Category`
`rails g controller api/v1/Question`
`rails g controller api/v1/User`

I namespaced the routes to indicate their association to the first version of an API.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajbderxil2kz3jxaorjb.png)

I verified that the routes were correct by running `rails routes` and then verifying once again by going to `http://localhost:3000/rails/info/routes`. 

2. Front-End Development

I began working on the front-end by creating a new repository for and adding an index.html file and a src file that would hold the index.js file. I then added a script tag for the index.js file in the index.html. I created an alert in the index.js file to ensure that the files were connected. I created individual files for questions, categories, and users in the src file and added the end points for each class at the top of the index.js file: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qckn2kp91rzy0lurfqv5.png)
A POST request can be made if a user decides to save their score after completing the game.
Intro To Web Development
Tags: javascript, webdev, beginners, programming
Published: 2022-01-17 02:25:35

Brian Trojan

## **How to Get NodeJS**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xlicw9d2oxybeshqvbv.png)
Here is a link to NodeJS [NodeJS Website](https://nodejs.org/en/) After you get to the website click on LTS version and follow the instructions for installation after the download is complete. 

## **What is NodeJS**
From my understanding NodeJS is used to make a simplified scalable server to make it easier for a web developer to scale a website using javascript. It helps to save time by automating processes that could become very time-consuming. 

## **How to Get NPM**
NPM is a very simple installation Process. All you have to do is open terminal (For Mac and Linux users) and type in the following: 

```
npm install

```

If you want to verify that NPM was successfully installed. Type into terminal: 
`npm -v` This will give you the version that your system is running if it was successfully downloaded

## **open-wc**
open-wc allows you to create a blank project in a very quick and easy manner. The command used to create a new project.
Here is a link to the video that helped walk me though creating a development environment: [EdTechJoker: Intro to tooling and getting started](https://www.youtube.com/watch?v=r_mio0e6v1g )

```
npm init @open-wc
```

## **What is NPM**
NPM also know as Node Package Manager. The name is very self explanatory, It manages the Packages for the website that you are trying to create. It manages thousands of packages that help to save the developer a lot of time by automating that process for them. Npm also allows you to view the "Finished View" of your work by using the command `npm start`

Myself being new to web development, I was able to create a simple local host using the `npm start` command.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00zoqacpf3hzyimh9kde.png)

## **VS Code**
Visual Studio Code is a great coding environment to add/edit your project. It it very helpful color coding different parts of you code and also has a debugging feature that could help you with errors within your code.

## **Lit**
Lit is a great resource to help you get started with learning JavaScript and HTML. here is a link to what I had used to get familiar with a simple project. [Lit Intro to JS and walkthrough](https://lit.dev/playground/#sample=examples/full-component)
Autocomplete In Javascript From Scratch
Tags: javascript, webdev, beginners, tutorial
Published: 2022-01-17 20:48:48

In this video tutorial, we will see how easy it is to create our own autocomplete feature in a website using vanilla javascript.

{% youtube OPnPqc9YWSA%}

We will use the fetch api to fetch the list of countries and then we will create the autocomplete functionality on the input box.
Imposter Syndrome
Tags: career, beginners, webdev, discuss
Published: 2022-01-17 20:43:09

Definition - Imposter Syndrome involves the feelings of self-doubt and personal incompetence that persist on your mind despite your education, experience and accomplishments.

"What am I doing here"

"I'm not good enough for this job"

"I'm unqualified and incapable and sooner or later everyone will find out"


Some of those sentences are what I first thought of myself in my first few months within my job as a web developer.

I started out as a web developer who was hired not because of my experience but because of my education and from my interview alone. I am not some super skilled developer or even remotely experienced as a web developer.

I was given a start in this industry before most and I am still studying alongside my full time job so I am still learning technologies that my colleagues are already skilled and experienced with. 

My first experience with imposter syndrome happened when I was tasked with building a website for a restaurant, my colleague/senior developer was off and had tasked me with finishing off this project which focused mainly on Bootstrap (A framework I had only just been introduced too earlier that month) I was so assured that I'd be able to focus and finish it off easily but one day when I was working on the task I was stuck with error after error and soon I started to panic that I wasn't any further on with the dev work on the site.

I started to think that I had fooled my employers and I wasn't suited for the position and that I would be in trouble for not being able to carry on the development of the project any further.

This was my first experience of feeling like an imposter, I had read about it before but hadn't experienced it personally which was a learning curve for myself.

I had to hold my hands up and ask for help and just be honest to say that i was indeed struggling and needed help from my team, my worries were soon put to rest and I got advice from my team and my senior that I was hired on the basis that there would be alot to learn.

For anyone beginning out there or in the same position as I was just know that it is expected to have doubts at times but that you will be able to overcome any barriers and seek help, something I found helpful was chatting to other developers who had some doubts and it all is a learning experience.

We are in a constantly changing world especially within development of tech.

All it takes is patience and consistency in your learning.

**Keep it up!**
Use Google Chrome in Ubuntu on Windows Subsystem Linux
Tags: linux, wsl
Published: 2022-01-17 20:36:19

---
title: Use Google Chrome in Ubuntu on Windows Subsystem Linux
published: true
description: 
tags: linux, wsl
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6aa1zw752qmnxmgxn8y.jpg
canonical_url: https://scottspence.com/posts/use-chrome-in-ubuntu-wsl
---

This is a specific usecase for installing Google Chrome in Ubuntu on WSL.

On Ubuntu, Snap is the preferred method to install Chromium and
although snap is on the WSL image you get from the Microsoft store
it's not functional. There is a [solution untested by me] that may
work.

There's a nice post from [Greg Brisebois] on getting set up for
Selenium in WSL and this is partly pulled from there, if you want to use it for Selenium then check out his post.

ℹ Prerequisites for this is that you are already set up to use GUIs on WSL, if you've not done that then check out [this post].

Here's a video detailing the process:

{% youtube RNesoCuLMO8 %}

Dependencies, make sure you're up to date first:

```bash
sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove
```

Download and install Chrome:

```bash
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt -y install ./google-chrome-stable_current_amd64.deb
```

Check that it's installed ok:

```bash
google-chrome --version
```

Done! Now it can be used either from the command line `google-chrome` and with CLI tools like Cypress, Playwright, Puppeteer etc.

There's also a [really detailed post] on getting Chromium set up on Linux from Addictive Tips.

<!-- Links -->

[this post]: https://scottspence.com/posts/gui-with-wsl/
[solution untested by me]:
  https://github.com/microsoft/WSL/issues/2374#issuecomment-699110721
[greg brisebois]:
  https://www.gregbrisebois.com/posts/chromedriver-in-wsl2/
[really detailed post]:
  https://www.addictivetips.com/ubuntu-linux-tips/install-chromium-on-linux/
Django Posts Announcement
Tags: django, python, webdev, shriekdj
Published: 2022-01-17 20:31:53

### let's build web app with django part 0
So Hello Everyone,
This is My My Post Part 0 of the Series for building a web app or site with help of **Django** a python full-stack web framework.

I don't know how much time it will take to end series so let's go with it day after day.

I Will Also share Source Code Details if any.
Bash Script Menu Install Apps
Tags: bash, script, menu, apps
Published: 2022-01-17 20:30:46

###In this script you will be able to visualize how to generate a menu in BASH to install applications for example.

for more info - https://github.com/redhcp/post-install


```
#!/bin/bash


function app_chrome() {
    #CHROME
    cd /home/
    sudo wget https://dl.google.com/linux/linux_signing_key.pub
    sudo wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    sudo dpkg -i google-chrome-stable_current_amd64.deb
    sudo apt-get install -f
    sudo rm -f google-chrome*.deb
    sudo rm -f *signing_key.pub
    echo -e "\e[44m_____End Chrome_____\e[0m"
}

function app_slack() {
    #SLACK
    cd /home/
    sudo wget https://downloads.slack-edge.com/linux_releases/slack-desktop-4.12.2-amd64.deb
    sudo dpkg -i slack-desktop-*.deb
    sudo rm -f slack*.deb
    echo -e "\e[44m_____End Slack_____\e[0m"
}

function app_zoom() {
    #ZOOM
    cd /home/
    sudo wget https://zoom.us/client/latest/zoom_amd64.deb
    sudo dpkg -i zoom*.deb
    sudo rm -f zoom*.deb
    echo -e "\e[44m_____End Zoom_____\e[0m"
}

function app_git() {
    sudo add-apt-repository -y ppa:git-core/ppa 
    sudo apt update; sudo apt install -y git
    echo -e "\e[44m_____End Git_____\e[0m"
}

function update_system() {
    sudo apt update -y  && sudo apt upgrade -y && sudo apt autoremove -y
}

function all() {
    app_chrome
    app_slack
    app_zoom 
    app_git
    update_system
    echo -e "\e[44m_____End ALL\e[0m"
}

menu(){
echo -ne "
**OPTIONS**
2) Install Zoom 
3) Update_system
4) Install Chrome
5) Install Slack
6) Install Git

1) --ALL--
0) Exit

Choose an option:"
        read a
        case $a in
	        1) all ; menu ;;               
	        2) app_zoom ; menu ;;
	        3) update_system ; menu ;;
	        4) app_chrome ; menu ;;            
            5) app_slack ; menu ;;
            6) app_git ; menu ;;
             


		0) exit 0 ;;
		*) echo -e $red"Wrong option."$clear; WrongCommand;;
        esac
}

# Call the menu function
menu

```
Technical Writing Journey Part 2...
Published: 2022-01-17 20:30:05

Previously in Part 1, I listed the areas to focus on, a beginner guide. However, it can be challenging to find a niche or specific area to tap into as a techie. Skills and experience determine which field of technical writing fits you, but I believe you need to learn the basics of that language, tools, and the writing guidelines. 

Above all, motivation is the aspect of success. Each techie is fighting for minimal spaces in big tech companies. I am too... As a beginner, API Documentation or Software Documentation seems like a 'fancy' field in technical writing.

Maybe or not. It depends if you have started making significant dollars. But as a beginner, you have to trust the current market trends and how experienced perceive the future to look like.

## **What is API Documentation**

Google has a different definition of what API Documentation means. API Documentation is a manual, meaning it has the necessary instructions on using an API. 

For example, an SMS API Documentation(sozuri[](https://sozuri.net/).net) provides instructions on integrating the API into a website or a system developed in a particular programming language.

As a technical writer, your role is to write the developer coding language for even a less experienced developer or a technology enthusiast to understand the API's procedure.

**Types of APIs**

- Web APIs.
- Soap APIs.
- Internal APIs.
- REST APIs.
- Composite APIs.
- Partner APIs.

It is important to understand these types of APIS because they require specific formats when writing procedures. 

_hey! more input on the same is welcomed..._
Create your own SvelteKit Blog with this starter
Tags: svelte, github, blog
Published: 2022-01-17 20:24:38

I was curious to see how [SvelteKit](https://kit.svelte.dev/) behaved as the foundation for a blog, and, with my work, it was obvious to me that I should share this starter since it might help someone / inspire someone to experiment with Svelte!

With this starter, you get the barebones for you to create your own blog website using Svelte and Markdown! 🎉

Here's the starter link 👉 https://github.com/ItzaMi/sveltekit-markdown-blog-starter

If you have any doubts, please reach out here in the comments or send me a DM to [my Twitter](https://twitter.com/HeyItzaMi) 😄
The Hascal Programming Language
Tags: programming, python, cpp, c
Published: 2022-01-17 20:17:05

**Hascal** is a general purpose and open source programming language designed to build optimal, maintainable, reliable and efficient software.

## Features
- Simple and easy to learn
- Fast and powerful like C++
- Inspired by Swift and Pascal
- C++ on backend
- Compatible with C\C++
- Strongly typed

## Examples
Hello World :
```typescript
function main() : int {
    print("Hello World!")
    return 0
}
```

Formatting Strings :
```typescript
function main() : int {
    var name = ReadStr("Enter your name :")
    var fmt_str = format("Hi,{}",name)
    print(fmt_str)
    return 0
}
```

HTTP Response :
```typescript
use http

function main(): int {
    print(get("http://example.com"))
    return 0
}
```

[Our GitHub repository for more information](https://github.com/hascal/hascal)

#### [If you interested in Hascal, star hascal's repo on GitHub](https//github.com/hascal/hascal)

Any contribution is welcome!
DATA TYPES AND MODIFIERS
Published: 2022-01-17 19:54:42

##LEARNING C++ DAY-2
## Variables

A variable is a container (storage area) used to hold data.
Each variable should be given a unique name (identifier).
int a=2;

Here a is the variable name that holds the integer value 2.
The value of a can be changed, hence the name variable.
There are certain rules for naming a variable in C++

1. Can only have alphabets, numbers and underscore.
2. Cannot begin with a number.
3. Cannot begin with an uppercase character.
4. Cannot be a keyword defined in C++ language (like int is a keyword).

Fundamental Data Types in C++

Data types are declarations for variables. This determines the type and size of data associated with variables which is essential to know since different data types occupy different size of memory.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0u36h0tw95ap9zl68mw.png)

1 int
- This data type is used to store integers.
- It occupies 4 bytes in memory.
- It can store values from -2147483648 to 2147483647.
Eg. int age = 18

2 float and double
- Used to store floating-point numbers (decimals and exponentials)
- Size of float is 4 bytes and size of double is 8 bytes.
- Float is used to store upto 7 decimal digits whereas double is 
  used to store upto 15 decimal digits.
 Eg. float pi = 3.14
     double distance = 24E8 // 24 x 108

3 char
- This data type is used to store characters.
- It occupies 1 byte in memory.
- Characters in C++ are enclosed inside single quotes ͚ ͚.
- ASCII code is used to store characters in memory.
Eg͘ char ch= 'a';

4 bool
- This data type has only 2 values ʹ true and false.
- It occupies 1 byte in memory.
- True is represented as 1 and false as 0.
Eg. bool flag = false


```
#include <iostream>
using namespace std;
int main(){
    int a; //declaration
    a=12;

    cout<<"size of int "<<sizeof(a)<<endl;

    float b;
    cout<<"size of float "<<sizeof(b)<<endl;

    char c;
    cout<<"size of char "<<sizeof(c)<<endl;

    bool d;
    cout<<"size of bool "<<sizeof(d)<<endl;

return 0;
}
```
**OUTPUT**
```

size of int 4
size of float 4
size of char 1
size of bool 1

```

#C++ Type Modifiers

Type modifiers are used to modify the fundamental data types.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wkkswlzohuqapz1rgjg.png)

*************** THANK YOU ALL FOR READING   **********************

@pranvmadhavan1

INSTAGRAM : @_pra.n.v
What is a hex color code? Complete guide to hex colors
Tags: beginners, tutorial, css, html
Published: 2022-01-17 19:27:04

How to convert from hex color code to RGB values? How many colors is in the rgb space? Check it: [What is a hex color code? Complete guide to hex colors](https://www.colorsdata.com/blog/what-is-hex-color-code-guide)
Which one is a better TLD for portfolio & blog?
Tags: watercooler, discuss
Published: 2022-01-17 19:27:03

I'm planning to register a domain name for my personal website. I am also planning to use the same for my blog and newsletter email.

Which one of these TLD should I go for?

- .tech
- .dev
- .one
- .me

> I want to get it in my own name

Suggestions will be highly appreciated.
TIL 1: PendingIntent & WorkManager
Tags: android
Published: 2022-01-17 19:19:42

Today I learned **a.k.a** TIL a **series** of posts where I share staff i learned daily. 

## PendingIntent
I was developing a Notification-App and used PendingIntent with Notification and faced a case that seems strange. 

The case is that PendingIntent open Activity with with extra string but when two Notifications comes with two different strings when clicked on both i got first string of them in two cases while i expect getting two different strings. 
``` kotlin 
        // Create an explicit intent for an Activity in your app
        val intent = Intent(context, MainActivity::class.java).apply {
            flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
            putExtra(AppConstants.NOTIFICATION_EXTRA_TITLE, title)
            putExtra(AppConstants.NOTIFICATION_EXTRA_MESSAGE, message)
        }


        val pendingIntent: PendingIntent =
            PendingIntent.getActivity(context,0, intent, 0)

```

### The issue
was that two PendingINtent have same requestCode (second params of `getActivity()`) 
### The solution 
is two have unique/disticnt request code
```
  val pendingIntent: PendingIntent =
            PendingIntent.getActivity(context, Random.nextInt(), intent, 0)
```
`Random.nextInt()` made the trick for me. 

------------------------------------------------------------------

## WorkManager
To schedule the notification I have used WorkManager but want to make the request be unique so as not to be scheduled each time user open the app. 
### What I used:  
``` kotlin 
  workManager.enqueueUniquePeriodicWork(
            AppConstants.QUEOTES_NOTIFICATION_WORKER_ID,
            ExistingPeriodicWorkPolicy.KEEP,
            request
        )

``` 
- ` AppConstants.QUEOTES_NOTIFICATION_WORKER_ID` is uniqueWorkName
- `ExistingPeriodicWorkPolicy.KEEP` If there is existing pending (uncompleted) work with the same unique name, do nothing. Otherwise, insert the newly-specified work.

### Fire Worker Immediately:
I want to make my periodic worker start immediately i.e run for the first time without waiting for the first iteration of the scheduling 
#### Solution
add next to worker request `.setInitialDelay(-1, TimeUnit.MINUTES)`

### make  Periodic tasks start after some time:
We may need our periodic worker to start from future time instead of now, with latest WorkManager this is allowed for both   OneTimeWorkRequest and PeriodicWorkRequest with help of `.setInitialDelay(10, TimeUnit.MINUTES)`

Hope this adds new knowledge for you, meet next time.
Built a custom app for Confluence in 24 hours and won the Atlassian Codegeist Hackathon
Tags: tutorial, programming, javascript, hackathon
Published: 2022-01-17 19:07:19

---
title: Built a custom app for Confluence in 24 hours and won the Atlassian Codegeist Hackathon
published: true
description: This is a story of a developer who discovered our PandaDoc API, used that as a foundation to build an integration between Confluence and PandaDoc, and also won the Atlassian Codegeist Hackathon Competiton. 
tags: tutorial, programming, javascript, hackathons
//cover_image: https://miro.medium.com/max/4000/1*Cc4J90hMeKOAhcGHDnb6Uw.png
---
---
This is a story about Soumi, a Software Engineer and Technical Writer. 3 months ago, together with her teammate, she participated in the Atlassian Codegeist Hackathon to build Forge apps for Jira and Confluence.

Confluence and Jira are both commonly used at her workplace for updating technical documentation and generating bug reports. These two Atlassian products were quintessential for organized software development and collaboration inside and among different teams.

Together with Souvik, they agreed to build an app for Confluence as they both had used it a lot. And they wanted to integrate it with a product that solved a key problem combined with Confluence and also had good APIs and comprehensive documentation.

After some research, they picked PandaDoc to add eSignature capabilities and make it easy to sign documents without ever leaving Confluence.

So here is the story of how they built a custom app for Confluence using PandaDoc API in 24 hours and won the Most valuable Storytelling category prize in the Atlassian Hackathon. She has also added detailed instructions, using which you can also create your PandaDoc-Confluence app or any other such app in no time. Let’s go!

Please, read the whole article in our tech blog:
https://medium.com/the-pandadoc-tech-blog/building-a-custom-app-for-confluence-using-pandadoc-api-3711f7152f02