teleren/devto huggingface dataset:
CloudControl 2.0.0-alpha1 (and how I learned Go)
Tags: cloudcontrol, devops, container, tools
Published: 2020-09-13 16:03:56

As you [might know](https://dev.to/dodevops/announcing-cloudcontrol-the-cloud-engineer-s-toolbox-41j2), *CloudControl* is DoDevOps' cloud engineer toolbox, which supplies cloud engineers working in different clouds with common tools in an easy-to-deploy container environment suitable for multiple projects.

I always wasn't quite happy with CloudControl's initialization process. It was very cluttered, didn't point out the relevant information and... well, ugly.

At first, I came up with an idea to use [Dialog](https://linux.die.net/man/1/dialog) scripts to display some appealing user interface during the process, but that didn't work out mostly because of the Azure flavour's sign up process.

Then I thought, why not give a web client a go? I'm already used to  [Vue](https://vuejs.org), so it wouldn't be that hard. One thing was a problem, though: I'd need a web/api-server that hooks up into the *running* initialization process. I didn't want to move away from shell scripts for the initialization of the flavour and features, because 1) they work quite well and 2) they're not really an effort to write for other people who want to add features.

Well. Two process running alongside tapping into each other *plus* a need for a single binary with a low footprint? That really cried out for [Go](https://golang.org).

As I've commented in another post, I tried starting with Go several times and never succeeded. But those requirements really were a perfect fit. So I tried again.

I downloaded the most current version of Go, checked out the tutorials again and got going.

Then, I needed the first external dependency and I remembered, that Go really was a PITA with this the last time I checked.

But, no. Nevermore. The Go folks finally seemed to agree on a good way to document and implement external dependencies with a go.mod file and dumped the nasty GOPATH. And everything was nicely supported by my IDE-of-choice [IntelliJ Idea](https://www.jetbrains.com/idea/). Just add the required import, let Idea sync the dependencies and you're good to go. Yay!

![Party!](https://media.giphy.com/media/10hO3rDNqqg2Xe/giphy.gif)

The rest was classic trial-and-error until I came up with a nice looking Vue frontend (thanks to [vuetify](https://vuetifyjs.com/)) and a stable API server (using [gin](https://github.com/gin-gonic/gin)) that delivers information from then goroutine, which handles the initialization.

With [Docker multi-stage-builds](https://docs.docker.com/develop/develop-images/multistage-build/) it was also possible to build the vue client, the go server and the CloudControl flavour without any dependencies on the client. Oh, and I switched to [GitHub Actions](https://github.com/features/actions) (because Docker automated builds didn't support build scripts)

So, that was my journey and I'm pretty happy with the end result. If you haven't already, please [check it out](https://github.com/dodevops/cloudcontrol) and let me know what you think.
Wait... Undefined or Not defined or Null?
Tags: javascript, webdev, codenewbie, 100daysofcode
Published: 2020-09-13 16:01:04

Some of the simplest concepts in JavaScript can be a little tricky to make sense of. One of these is the difference between `undefined`, `not defined` and `null`

Let's start with the easiest one 🤓
** **   
**Undefined:**  

There are certain cases where `undefined` value is returned in javascript such as:

1) Whenever we declare a variable without assigning any value to it, javascript implicitly assigns its value as `undefined`.

```jsx
let name;
console.log(name); //undefined
```

2) When a value is not assigned in an array or object.

```jsx
let numArray = [1,2,,4];
console.log(numArray);  
//[1, 2, , 4]typeof(numArray[2])
//"undefined"
```

3) When functions don’t have a return statement but are called for assigning a value to a variable.

```jsx
let add = (a,b) => {
  let c = a+b;
// no return statement
}let sum = add(2,3);
console.log(sum); 
//Output: undefined
```

In the code block above, since we commented the return statement, the value of variable sum is given as `undefined` in the output.
** **   
**Not defined:**

A `not defined` variable is one which has not been declared at a given point of time with a keyword like `var`, `let` or `const`.

```jsx
console.log(a);
var a = 5;
//Output:- undefined
```

While if we don’t use the `var` declaration, the above the output will look like this:

```jsx
console.log(b);
b = 5;
//Output:- "ReferenceError: b is not defined
```
** **   
**Null:**

`null` is a reserved keyword in javascript. We can assign a null value to a variable explicitly using this keyword. `null` essentially represents a non-existent or an empty value i.e. we explicitly tell the JavaScript interpreter that the variable has no value.

```jsx
let life = null;
console.log(life); //null
```
DOM in Angular SSR with Domino package.
Tags: angular, npm, javascript, codenewbie
Published: 2020-09-13 15:59:12

If you are using angular need to access to DOM with SSR, then use [domino](https://github.com/fgnass/domino) package.

Domino provide support for the DOM API and also CSS for querySelector(), querySelectorAll(), and matches().

Install domino from your terminal.

```bash
npm install domino --save
```

Add angular universal in your app.
```
ng add @nguniversal/express-engine
```
Edit the server.ts file and add the following lines, for configure it create "document" object and "window" as global.

```javascript
const domino = require('domino');
const fs = require('fs');
const path = require('path');

// Use the browser index.html as template for the mock window
const template = fs
  .readFileSync(path.join(join(process.cwd(), 'dist/yourprojectname/browser'), 'index.html'))
  .toString();

// Shim for the global window and document objects.
const window = domino.createWindow(template);
global['window'] = window;
global['document'] = window.document;
```
_If you to copy and paste, please change the project name._

Keep in mind change for server side render the build command is build:ssr and need to publish browser directory.

```bash
npm run build:ssr
dist/yourprojectname/browser
```

Photo by <a href="https://unsplash.com/@charlfolscher?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Charl Folscher</a> on <a href="https://unsplash.com/s/photos/domino?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
5 VSCode extensions for React developers in 2020
Tags: tutorial, react, vscode
Published: 2020-09-13 15:30:52

I've recently been installing my programmes on the Mac after he returned from repair and while installing the VSCode extensions, and someone's still curious what extensions I'm using, and today I decided to make a post to let you know the ones I 'm actually using.

####1.ESLint

Dirk Baeumer's ESLint is an extension that will check if your code is written according to the rules of your .eslintrc file.
With this plugin you will be “reminded” to write code following the standards defined by you or your team. A good code style to follow in JavaScript projects is the AirBnB coding style .
Remembering that you need to have the eslint library in your project or globally on your machine


####2.Prettier - Code formatter

Prettier from Esben Petersen as the name says is an extension that formats your code. Very similar to ESLint it also defines how your code will be formatted and also formats the code for you (when Format on Save is enabled). For that you need to configure .prettierrc and have a prettier library installed.

####3.GitLens

Eric Amodio's GitLens is another library that I think is essential when working as a team, as it shows which commit each line has been changed in. It is a kind of gitblame available in your code in real time.

####4.Import Cost

Import Cost of Wix is ​​another one that I find very interesting, because when you import or require it it shows you the size of the library you are importing and if it is very large it will appear in red, reminding you that it is a library that you can weigh your bundle.

####5.Live Server

Ritwick Dey's Live Server is a hand on the wheel. Suppose you are testing something quickly in static html / css / js and do not want to create a server to see the project running, LiveServer creates a server for you and brings a bonus “live reload” that reloads the page automatically when you change / save the file.


##Bonus VSCode extensions

I would also like to talk about some other extensions that I use.

####6.Filesize

Filesize shows the current file size

####7.styled-components

styled-components makes the syntax of styled components more readable.

####8.vscode-icons
vscode-icons places icons in files according to their types, making them easier to view.

####9.JavaScript (ES6) code snippets

JavaScript (ES6) code snippets, by Charalampos Karypidis. This is most popular JavaScript extension with more than 3 + million instals to date. This extension provides ES6 syntax for JavaScript , TypeScript, HTML, [ReactJs](https://www.tunetm.com/courses/java-script/advanced-reactjs-redux-training) and Vie. The final semicolon is included in all excerpts.
AWS Amplify Pull-Request Previews for Public GitHub repository
Tags: actionshackathon, aws, serverless, github
Published: 2020-09-13 15:25:39

### My Workflow

AWS Amplify Pull-Request Previews currently only supports private GitHub repository. This `amplify-preview-actions` GitHub action enables the ability to deploy AWS Amplify Pull-Request Previews for your open source and public GitHub repository.

With this `amplify-preview-actions` GitHub action, you can define your own rule to deploy the Pull-Request branch to the AWS Amplify console app page for a preview. For example, you can setup a rule only a pull request is labeled with `Ready for review` and is assigned to a reviewer; and clean up the previews after the pull request is merged or closed. 


### Submission Category: 

DIY Deployments


### Yaml File or Link to Code

#### GitHub Page
{% github https://github.com/yinlinchen/amplify-preview-actions %}

#### GitHub Marketplace page
<a href="https://github.com/marketplace/actions/amplify-preview-actions" target="_blank"> ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rhquiwemnzuq014e1ngh.png)</a>

#### Installation
```
- name: amplify-preview-actions
  uses: yinlinchen/amplify-preview-actions@v1.0
```

#### An example of how to use the Action:
```
name: 'Amplify PR Preview'
on:
  pull_request:
    types: [review_requested]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master

    - name: set branchname env
      id: setenvname
      run: |
        # use GITHUB_HEAD_REF that is set to PR source branch
        echo "##[set-output name=setbranchname;]$(echo ${GITHUB_HEAD_REF})"

    - name: deploy PR preview
      uses: yinlinchen/amplify-preview-actions@master
      with:
        branch_name: ${{ steps.setenvname.outputs.setbranchname }}
        amplify_command: deploy
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AmplifyAppId: ${{ secrets.AmplifyAppId }}
        BackendEnvARN: ${{ secrets.BackendEnvARN }}
        AWS_REGION: 'us-east-1'
```


### Additional Resources / Info

#### Screenshots:
<img src="https://github.com/yinlinchen/amplify-preview-actions/raw/master/demo.gif" width="80%"/>

#### Open source projects that are using this workflow:
* [Amplify workshop bookapp demo](https://github.com/yinlinchen/bookapp)
* [DLP Access Website](https://github.com/VTUL/dlp-access)
* [SimplQ](https://github.com/SimplQ/simplQ-frontend)
Write effective code for equals method
Published: 2020-09-02 00:51:31

### Why do we need to override the equals method

Q: When to override the `equals` method? 
A: If the class not override it and the object identity is merely not enough for equality.

A right implementation of `equals` makes the instance object to serve as map keys or set elements with predictable and desirable behavior

`equals` method is characteristic: 
- reflexive: an object should equal itself.
- symmetric: if object A equals object B, object B should equal with object A as well
- transitive: if A equals B, B equals C, so A should equal C.
- consistency: the same result will return no matter how many times you run it.

And one more important characteristic that only exists in the OOP world. 
_Lisov substitution principle_ says that any important property of a type should also hold for all its subtypes so that any method written for the type should work equally well on its subtypes.
What does that mean?
For example:

```java
class A {
   int size;
}

class B extends A {
    Color color;
}

A a = new A(1);
B b = new B(1, Color.RED);

a.equals(b) // should return true
```

Extend instantiable class and add a value component to it violate the transitive rule easily.
Like `java.util.Timstamp` extend from `java.util.Date` and add nanoseconds field.

One common mistake this that do the null checking and getClass() to compare in the equal method. That will make the equals method not able to have the Lisov substitution characteristic.

Not necessary to null checking in the `equals` method. Simply cast it to the object we want so we could have the accessor to it.

```java
public boolean equals(Object o) {
  if (!(o instanceof MyType)) {
      return false;
  }
}
```

### Conclusion

High quality `equals` method:
1. Use the == operator to check if the argument is a reference to this object: Performance optimization
2. Use `instanceof` to check if the arg has the correct type. No need to do the null check.
3. Cast argument to correct type.
4. Check if a file of the arg matches the corresponding field: if `float` or `double` field we need to call `Float.compare` and `Double.compare` the method, if the field is object filed call the `equals` method recursively. To avoid the possibility of `NullPointerException`, using `Objects.equals(Object, Object)`

After writing the `equals` method.
Is it symmetric? Is it transitive? Is it consistent? 
 
Use the `AutoValue` framework to write `hashCode` and `equals` more easily.
How to set up showcase of your React UI-components using GitHub Pages 
Tags: actionshackathon, react, javascript
Published: 2020-09-13 15:21:22

### My Workflow
My workflow is based on the use of existing GitHub actions, small script for building [Styleguide](https://github.com/badoo/styleguide) example and hosting results on GitHub Pages. 

You can use it for building an example for hosting your own visual documentation / components or static website demo. The same workflow with any react UI library or building tool - [Storybook](https://storybook.js.org/), [Styleguidist](https://github.com/styleguidist/react-styleguidist) or any other:)

One of the main benefits - on each push / pull request in main branch of your repo, you will automatically get an up-to-date version of your UI Library or App.


### Submission Category: 

DIY Deployments


### Yaml File or Link to Code

#### 5 quicks steps to run

After you perform initial setup, which consists of:
1. create your own [Personal Access Token](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line) on GitHub setting page. Use this access token as the password in code below, not your actual account password.
2. [setup your GitHub username](https://docs.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets#creating-encrypted-secrets-for-a-repository) as USERNAME and remote url as REMOTE_URL  (for example https://github.com/winner95/styleguide.git) in GitHub Secrets.
3. [setup GitHub Pages](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) for your repo.
4. create file `.github/workflows/publish-docs.yml` in your repo.
5. paste the following code:

```yaml
name: Styleguide-build
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE,
      # so your job can access it
      - uses: actions/checkout@v2

      # Runs a single command using the runners shell
      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: 12.18.3
        
      # install javaScript dependencies
      - run: yarn install
      # this is a line, which you can change 
      # to your own building script
      - run: yarn styleguide --buildDir ./docs
        
      # deploy action
      - name: GitHub Pages Deploy
        uses: appleboy/gh-pages-action@v0.0.2
        with:
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          remote_url: ${{ secrets.REMOTE_URL }}

```

Try to push any change to your repo.

**Congratulations!** You can find the results of your build on GitHub Pages. In my case via this [link](https://rebrand.ly/styleguide-example).


### Additional Resources / Info
In my case the build take up to 1 minutes with installation of dependencies, which is quite fast.
What is the best way to tackle responsive design with minimal redundant code ?
Tags: react, css, help
Published: 2020-09-13 15:15:26

I work at a startup with a team of 6 people, We work primarily on MERN stack. I handle the UI /UX part but we have a hard time making sites completely responsive, it even looks different on the laptops of our fellow devs while production. We are using responsively to check on different screen sizes. Is there some tricks or best practices there for it to make my life easier? a resource or  some guidance about how to tackle responsiveness like a pro. We use flexbox,bootstrap but converting the UI screens to actual code never goes smoothly. ultimately we have to put media query breakpoints writing multiple css to get the job done which I personally hate but sometimes that becomes the only resort.
Please tell me how can I and My team become more competent . Thanks
Where to start web dev?
Tags: webdev, javascript, html, css
Published: 2020-09-13 14:54:37

Hey wassup everyone?
I'm feeling great to start my career as a web developer. I'm super excited to start web development, but the thing is I don't no where to start. I'm completely new to computer science and I need to seek someone's advice about web dev. So, pls help me in consolidating the new world of web dev and also give me the road map for web dev.

I would be grateful to this community!!

Thank you!
Google DSC Lead 2020
Tags: womenintech, dscssa, googlestudents, dsc
Published: 2020-09-13 14:49:54

It's been three weeks, but almost everyday I have to sort of remind myself that it's real, I should get used to it!
I'm still as excited as I was two weeks ago, and twice as, determined to make it work. 
This one thing is my reminder that dreams are valid and attainable. 
Coming from a non Computer Science background and self teaching mostly, this came as quite a surprise, but I'm determined to make it happen. 
I'm proud to be the founding lead of the Developer Students Club at my university, Makerere University Business School in Uganda. I'm also happy to be the second female DSC lead in my country. 

Keep going!
Ziders Technologies
Published: 2020-09-13 14:05:51

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)


### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on September 12th (11:59 PM PDT) and winners will be announced on September 23!)
My FIRST open source contribution to the GitHub CLI
Tags: opensource, go
Published: 2020-09-13 14:03:20

[Open Sauced](https://github.com/open-sauced) guides new contributors. Our approach towards onboarding offers a way to track contributions through the GraphQL powered dashboard.

## How I thought of this contribution
My recent open source contribution happened while [live streaming on twitch](https://twitch.tv/bdougieYO). Occasionally, at the end of a stream, I leverage the new [GitHub CLI](https://cli.github.com/) to list the project contributors and noticed the CLI does not filter out contributions from bots.

![cli thank you credits](https://dev-to-uploads.s3.amazonaws.com/i/owpjfbajbxukxx1yaiq2.gif)

The top maintainers on my project are dependabot-preview[bot] and gh-action[bot], and as much as I appreciate their work, I would prefer the bots not listed in the "thank you credits."

With this problem, I had enough interest to make my first contribution.

## Setting up my contribution

Before writing any code, I forked the repo to start researching a fix for this issue. I almost jumped right in with a fix after learning wherein the project to add this filter, but I opted to open an issue with my proposed solution as a way to wait for a response from the maintainers.

_The CONTRIBUTING.md requests that contributors open issues before making any contributions._

My issue explanation included my desire to run the `gh credits` command with the option to filter for humans-only. You can read that issue below.

{% github https://github.com/cli/cli/issues/1597 %}

As an eager contributor, it is easy to miss this step announcing your interest in contributing. I have made what I thought were contributions to projects before, only to find out that the project was going a different direction and the code I committed was to a section marked for future deletion.

## My contribution was accepted.

My wait lasted for a few hours for the first response and another few days for a :thumbs-up: to start working on my solution. The maintainers were friendly and offered suggestions and border solutions themselves. We concluded my answer was close but could be simplified, which was another reason why opening the issue first is the preferred first contribution.

You can view my merged solution below.

{% github https://github.com/cli/cli/pull/1623 %}

## Join me in my open source journey

I dedicate my Friday Twitch streams to open source work and invite you to join that and our pre-stream-amas, where we chat through our ideas for open source contributions.

Watch me the full video on the [Open Sauced YouTube channel](https://www.youtube.com/channel/UCklWxKrTti61ZCROE1e5-MQ).

{% youtube E9qcZwWw_V8 %}
Postgress SELECT/INSERT in Python without any external libs
Tags: python, postgress, python3
Published: 2020-09-13 14:01:40

---
title: Postgress SELECT/INSERT in Python without any external libs
published: true
description: How to query a psql
tags: python, postgress, python3
cover_image: https://miro.medium.com/max/800/1*WXZ7t102Fki41zQUyi5wrA.png
---

It is possible to query Postgress (9.3+) from python without any external libs (psycopg2):

```python
import subprocess
import json

query = "SELECT json_agg(table) FROM table"
args = ["psql", "db_name" ,"db_user" ,"-AStc", query]
out = subprocess.check_output(args, universal_newlines=True)
results = json.loads(out)
print(results)
```

It is also possible to INSERT with
```python
data = {
  "question": "when does the ride end ?",
  "answer": "never",
  "category": 1
}

cols = ','.join(''.join(filter(str.isalpha, k)) for k in data.keys())
query = "INSERT INTO tb_faq(%s) SELECT %s FROM json_populate_record(NULL::tb_faq, '%s');"
args = ["psql", "db_name" ,"db_user" ,"-AStc", query%(cols,cols,json.dumps(data))]
subprocess.check_output(args, universal_newlines=True)

```