teleren/devto huggingface dataset:
Python Zero to Hero - Ep.12 - Python linting and auto-formating
Tags: python, linter, beginners, tutorial
Published: 2020-06-22 17:54:57

---
title: Python Zero to Hero - Ep.12 - Python linting and auto-formating
published: true
description: In this tutorial, we have covered some popular Python linters and auto-formatters: flake8, autoflake, black and isort. We also talk a bit about tox and pre-commit and how to use them with the linters and auto-formatters.
tags: python, linter, beginner, tutorial
---
In this tutorial, we have covered some popular Python linters and auto-formatters: flake8, autoflake, black and isort. We also talk a bit about tox and pre-commit and how to use them with the linters and auto-formatters. If you have any questions or any suggestions about which Python topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)

You can get the slide deck [here](https://slides.com/cheukting_ho) and the example code and homework form [GitHub here](https://github.com/Cheukting/python02hero). Ask questions at my [Twitch channel](https://www.twitch.tv/cheukting_ho)
eslint-config-hardcore – 17 plugins, 500 rules, and counting
Tags: javascript, codequality, showdev
Published: 2020-06-22 17:37:47

[eslint-config-hardcore](https://github.com/EvgenyOrekhov/eslint-config-hardcore) is a framework-agnostic "batteries included" config that aims to enable as many plugins and rules as possible to make your code extremely consistent and robust. It uses Prettier code style and autoformats your code with eslint-plugin-prettier.

There are dozens of great ESLint plugins out there. Did you know that there is a plugin that can optimize your regexes for you? Or did you know that ESLint can validate `*.json` files? This config allows you to gain the power of all those awesome plugins with a single `npm install`.

Fun (and useful) fact: you can use typescript-eslint for linting your JavaScript code. That's right, you can take advantage of typescript-eslint's type-aware rules, like `@typescript-eslint/naming-convention` and `@typescript-eslint/prefer-optional-chain`, without the need to switch to writing TypeScript. Use the `hardcore/ts-for-js` config for that.

Also, did you know that when you enable an ESLint rule with `"rule-name": "error"`, you don't get all the benefits the rule can provide? Many rules have advanced options that are disabled by default. For example, the `no-unneeded-ternary` rule has the `defaultAssignment` option that can enforce using `foo = bar || default` instead of `foo = bar ? bar : default`. And the `no-param-reassign` rule allows you to modify parameter properties by default, which is considered a bad practice. This config uses those stricter options whenever it makes sense.

Back in 2016, when I started compiling this config, it was helping me begin my JavaScript journey. I was using it on small projects, and it was helping me avoid many JavaScript pitfalls. Over the years it grew and proved itself as an extremely useful tool for all kinds of projects, both backend and frontend. Now, I can't imagine what I would do without it and how much more painful our code reviews would be. And I really want to avoid any kind of nitpicking in pull requests. Let ESLint catch (and most of the time autofix!) all problems early.

The funniest thing: 500 rules are still not enough. We still spend time in code reviews catching issues and inconsistencies, especially when there are new developers on the team. So, expect to see more and more plugins and rules in the config in the future.

Let me know what you think. Try it out. Suggest more plugins.

Hacker News thread: https://news.ycombinator.com/item?id=23602860
Which SaaS is your favourite ?
Tags: watercooler, discuss, productivity
Published: 2020-06-22 17:37:31

Hello fellow Dev,

Hope you are having a fun day going through exciting Git Repos, working on your side project and lastly reading fun DEV.to posts.

Even if you do not want to tell me about it, I know you are involved in a SaaS activity :P.

# Here is a little fun activity, 
# `Score that SaaS` 
 - Does it save your ass (Productivity) - 1 points
 - My day does not end without it (Part of Compulsory Routine) - 10 points
 - It's my livelihood (Work in/related to SaaS) - 100 points
 - Add 1000 more for any other use you feel like.

**I think every piece of information you (the reader) contributes will go a long way for others. So, I urge you not to hesitate.**

# Why am I asking this ?
I feel everyone has right to have the knowledge that can help them. I am planning on laying out a series discussing how a particular `SaaS` can help lift someone's daily burdens or open a new avenue for them.
UI Bakery Webinar on Data connection & API integration
Tags: webinars, nocode, webdev, tutorial
Published: 2020-06-22 17:24:01

Topic: How to connect data and APIs to a front-end app right in UI Bakery
Date: June 23, Tuesday
Time: 7:00 pm CET, 1:00 pm EST

What's the use: You'll discover how to easily connect data & APIs to the frontend. In 40 minutes, we'll show how to work with data collections, sequence variables, create and manage workflows, customize them with your own JavaScript code, and more – right in the platform.

Sign up & get the recording later: https://hubs.ly/H0rMfqh0
Discuss Resources and New Technologies for Developers
Tags: productivity, webdev, beginners, discuss
Published: 2020-06-22 17:03:52

Hi, developers. Can we spare few minutes of our time to discuss programming tools and resources available that you know ?

I am quite enthusiastic to learn some hidden tools you guys use over there and trust me, this would be beneficial to us all.

First I would like to start by sharing this amazing opportunity which you can use to monetize your content as a content creator ranging from writing articles, having a  YouTube channel etc👇
https://dev.to/hacksultan/web-monetization-like-i-m-5-1418

Furthermore, incase you want to learn top notch languages like Java, Kotlin, and Python for free, you can register here before before 1 July, to get this special offer.👇

https://hyperskill.org/onboarding/?track=java

So guys it's your turn, tell us what we are missing out on.
Adding an Angular 9 Project as a Chrome Extension in 10 minutes
Tags: angular, chrome
Published: 2020-06-22 16:51:30

- Create a new Angular Project.

- Go to Angular.json file and set "aot" and "assets area" to look like this.
```typescript
 "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
   "outputPath": "dist/ngChromeExtension",
   "index": "src/index.html",
   "main": "src/main.ts",
   "polyfills": "src/polyfills.ts",
   "tsConfig": "tsconfig.app.json",
   "aot": true, <= // Make sure this is set to true
   "assets": [
    "src/assets/favicon.ico",
    "src/assets",
    "src/manifest.json" <= // Chrome manifest goes in root directory
   ],
```
- Create a new manifest.json file in root
```javascript
{
    "name": "Great Extension",
    "version": "1.0",
    "description": "Build an Extension with Angular",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "index.html"
     
    }
}
```
- Type in ng build
- Type in chrome://extensions in Chrome
- Click Load Unpacked

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

- Find your compiled dist folder and point there.  Chrome will not allow the files to be displayed. No problem just let it use your dist folder.

- Next, look for a small square green G icon next to Chrome's address bar on left. Click it...

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

✔️ That's pretty cool in my opinion! It's definitely a way to get interested in learning Chrome Extension internals!

[developer.chrome](https://developer.chrome.com/extensions)

JWP 2020 Angular Chrome Extension
AwesomeCSS #1 | Apply Image Filters Just Using CSS
Tags: css, beginners, webdev, tutorial
Published: 2020-06-22 16:24:01

This was something awesome that I had stumbled upon last week. 

I am not much of a social butterfly but I do know that there is always a lot of buzz about _filters_ going on in the social media. Coincidentally, the technique of this also revolves around a CSS property called `filter`.

Incase you are interested in watching video :
{% youtube GmgvpMT2BJM %}

# Interesting Finds

## CSS `filter` property

> The filter property defines visual effects (like blur and saturation) to an element (often <img>). 
> ~ W3 Schools [Link](https://www.w3schools.com/cssref/css3_pr_filter.asp)

## CSS `mix-blend-mode` property
> The mix-blend-mode property specifies how an element's content should blend with its direct parent background.
> ~ W3 Schools [Link](https://www.w3schools.com/cssref/pr_mix-blend-mode.asp)

Checkout the Codepen :
{% codepen https://codepen.io/memahesh219/pen/ExPWOvv %}

Thanks for reading till the end,

[Please have a look at my YouTube Channel. I post interesting web-related videos on it : https://www.youtube.com/channel/UCvf5cqRQk6aOmFZrgoU6K-Q]
Knockout Js in 2020
Tags: discuss, javascript, microframeworks
Published: 2020-06-22 16:14:09

---
title: Knockout Js in 2020
published: true
description: 
tags: #discuss, #js, #microframeworks
//cover_image: https://direct_url_to_image.jpg
---
Hi there, 
I made a simple scoreboard for phase10 & uno card games  to learn the intricacies of tailwindcss; works by tracking individual players scores and levels in the game <i> <a href='https://dakn2005.github.io/phase10' target='_blank' >link</a></i>

For context, I'm a fullstack dev who uses react and svelte for frontend, and have been using knockout since 2015 in various projects.  In this implementation, I used knockout as the lib of choice, reason being newer libraries would provide a marginal benefit compared to this 'ancient' (10year old) library for my use case. 

I was wondering, who else is still using knockout in 2020?

<i>Repo:https://github.com/dakn2005/phase10
..maybe fork and implement in alpine or surplus js :) 
</i>
GUI with Python
Tags: python
Published: 2020-06-22 16:05:49

You can build a GUI or graphical interface with Python, it's not just all terminal.

Yes, you can make desktop apps with Python. This looks like any other app on your computer like

<img src="https://i.pinimg.com/564x/39/12/25/391225dd918067e4311da9831070675a.jpg" alt="python pyqt">

You can see more screenshots of things you can make <a href="https://nl.pinterest.com/detimo3313/pyqt/">here</a>

So is it hard to make GUI apps with Python?

Well, you should first know the <a href="https://pythonbasics.org">basics of Python</a>. It has some learning curve but it's not rocket science.  

## Python GUI

Basically you have to install the PyQt module and load it. Then you can create a window and add all kinds of widgets to it.

For example, the "hello world" app looks like this (source: <a href="https://pythonpyqt.com/pyqt-hello-world/">pyqt</a>):

```python
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout

if __name__ == '__main__':    
    app = QApplication(sys.argv)
    w = QWidget()    
    layout = QHBoxLayout()
    btn = QPushButton("Hello World!")
    layout.addWidget(btn)
    w.setLayout(layout)
    w.resize(250, 150)
    w.move(300, 300)
    w.setWindowTitle('Simple')
    w.show()
    sys.exit(app.exec_())
```

<img src="https://pythonpyqt.com/images/pyqt-button.png" alt="pyqt button">

It adds a button, resizes window, sets a window title etc. PyQt has a widget for everything you can think of, so regardless of whether you want to make a web browser, an office suite or anything else you can.

If you are new to PyQt, then <a href="https://gumroad.com/l/pysqtsamples">this is a good course</a>
JAMstack ecommerce - the options
Tags: jamstack, ecommerce, gatsby, saas
Published: 2020-06-22 15:58:55

# What options are there for headless e-commerce?

Back in 2018, I read an article from [Harry's](https://www.harrys.com) on how they used [Gatsby to build a blazingly fast e-commerce site](https://medium.com/harrys-engineering/how-we-used-gatsby-js-to-build-a-blazing-fast-e-commerce-site-a9818145c67b) - the end result was their stunning site, [Flamingo](https://shopflamingo.com), that serves over 1 million female customers.

Let's take a look into 3 options that you could use to add commerce to your JAMstack and achieve similar results:

## Snipcart

[Snipcart](https://snipcart.com) makes it easy to add a shopping cart to any site. It has been used by over 20,000 developers. It's flexible, dev-friendly and can help speed up the time to delivery for your e-commerce projects. The Gatsby website has a [tutorial to help you get started with Snipcart](https://www.gatsbyjs.org/docs/adding-a-shopping-cart-with-snipcart/).

## Swell

[Swell](https://www.swell.is/) is a headless ecommerce platform. Its API-first philosophy helps brands, startups and agencies to launch a storefront backend fast.

## Shopify

Shopify has been around for well over 10 years and your clients or team may already be used to navigating the dashboard, adding products and fulfilling orders. Shopify provides a REST and GraphQL API if you'd like to use it to handle your commerce admin. They are working hard to meet the needs of the JAMstack community. Shopify explored how [the JAMstack can be harnessed for e-commerce](https://www.shopify.co.uk/partners/blog/jamstack) on their own blog and the Gatsby site has a [Shopify tutorial](https://www.gatsbyjs.org/docs/building-an-ecommerce-site-with-shopify/) too.

## Commerce Layer

If you're working with a global brand, managing multiple currencies and stock locations, [Commerce Layer](https://commercelayer.io) might fulfil your needs. It is a headless commerce and order management system with well written docs and tutorials. They have a number of [guides and step-by-step tutorials](https://docs.commercelayer.io/guides/) on their site.

What's missing from this list?
What Unit Testing Tells You About Your Code
Tags: webdev, productivity, unittesting, tech
Published: 2020-06-22 15:54:48

We often focus on the straightforward benefits of unit testing.

* Verification of working code
* Verification of correctness of algorithms
* Edge case testing
* Regression bug protection
* Code Documentation

But when we focus just on these surface-level benefits of our code, we miss out on a great opportunity to look a bit deeper.

One of my favorite benefits of unit testing is what I call the GRAND THEORY OF UNIT TESTING or maybe the GRAND UNIFICATION THEORY OF UNIT TESTING…haven't settled on a name yet for this, but I'm accepting submissions.

The theory (which I didn't invent, I'm just trying to name it) is basically this: Code that is hard to test is not good code. Although the inverse isn't necessarily true.

Let's consider some examples:

**Example 1:** Know that 2000 line pile of spaghetti code that runs the core of your system. Everyone on the team is afraid to touch it, and discussions of refactoring it are similar to discussions of curing cancer and campaign reform? Great idea, but nobody really believes that it's gonna happen. Guess what that code doesn't have? Unit tests. Why? Because every time someone tries to write unit tests around it, they eventually throw up their hands in surrender.

**Example 2:** You are going to test a class, but that class takes in eight different collaborators in its constructor. Creating mocks for all those different dependencies is SO PAINFUL…. Yup, you've found confirmation of the theory. It's hard to test and it's also poorly written code. If you are taking in eight dependencies, then your class is just doing too much. I've written about this specific code smell previously.

Even if you don't know what every code smell is, your unit tests are essentially a bloodhound you hire to sniff through your code, stopping and pointing at places where you need to take a look.

This also gives us the opportunity to refactor based on our unit tests. If it's hard to write a unit test for something, then take the time, and refactor the code to make it easier to test. You'll most likely end up with much better code than when you started.

Happy Coding!

Enjoy this discussion? Sign up for our newsletter [here](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=whatunittestingtellyou&utm_content=&utm_campaign=blog).

Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=whatunittestingtellyou&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster
How to Code in Go eBook
Tags: go, tutorial, beginners, ebook
Published: 2020-06-22 15:46:31

---
title: How to Code in Go eBook
published: true
description: An ebook designed to introduce you to writing programs with the Go programming language.
tags: go, tutorial, beginners, ebook
canonical_url: https://www.digitalocean.com/community/books/how-to-code-in-go-ebook 
//cover_image: https://direct_url_to_image.jpg
---

## Introduction to the eBook

This book is designed to introduce you to writing programs with the Go programming language. You’ll learn how to write useful tools and applications that can run on remote servers, or local Windows, macOS, and Linux systems for development.

This book is based on the [How To Code in Go](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-go) tutorial series found on [DigitalOcean Community](https://www.digitalocean.com/community). The topics that it covers include how to:

1.  Install and set up a local Go development environment on Windows, macOS, and Linux systems

2.  Design your programs with conditional logic, including switch statements to control program flow

3.  Define your own data structures and create interfaces to them for reusable code

4.  Write custom error handling functions

5.  Building and installing your Go programs so that they can run on different operating systems and different CPU architectures

6.  Using flags to pass arguments to your programs, to override default options

Each chapter can be read on its own or used as a reference, or you can follow the chapters from beginning to end. Feel free to jump to the chapter or chapters that best suits your purpose as you are learning Go with this book.

## Download the eBook

You can download the eBook in either the EPUB or PDF format by following the links below.

*   [_How To Code in Go_ eBook in **EPUB format**](https://do.co/go-book-epub)

*   [_How To Code in Go_ eBook in **PDF format**](https://do.co/go-book-pdf)  

After you’re finished this book, if you’d like to learn more about how to build tools and applications with Go, visit the DigitalOcean Community’s [Go section](https://www.digitalocean.com/community/tags/go).
Hello World with Nucleoid
Tags: declarative, programming, runtime, javascript
Published: 2020-06-22 15:44:08

Nucleoid is a runtime environment that is designed for declarative programming so that it executes statements based on formal logic in syntax of ES6 (JavaScript). This enables the runtime to provide logical integrity and store statements so that it doesn’t require external database.

The runtime accepts statements any time without requiring **compile** or **restart**.

Here is the simplest form:

```javascript
> a = 1
> b = a + 2
> a = 2
> a
2
> b
4
```

Unlike in imperative language, when `b = a + 2` is defined, Nucleoid creates data graph with connections among statements, so when `a` is changed, `b` is updated by the runtime.

This concept can be applied to objects as well:

```javascript
> class User {}
> user1 = new User()
> user1.email = user1.username + "@domain.com"
> user1.username = "first-user"
> user1.email
"first-user@domain.com"
```

this is class level declaration of sample example, so this statement applies to all users:


```javascript
> User.email = User.username + "@domain.com"
> user1.email
"first-user@domain.com"
```

Nucleoid runtime accepts all statements of ES6 and builds graph accordingly:

```javascript
> m = false
> n = false
> if( m == true ) {
    n = m && true
  }
> n
false
> m = true
> n
true
```

## Runtime as a database
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8a9hs14np1temq1m8s85.png)

Nucleoid runtime creates state of variable or object in memory, builds data graph and stores statement cumulatively on the disk, so that it doesn’t require external database, but it supports all database functions at the same time.

## Install
Ubuntu:

```bash
sudo apt-add-repository ppa:nucleoid/nucleoid
sudo apt install nucleoid
```

Docker:

```bash
docker run -d -p 80:80 nucleoid/nucleoid
```

Once installed, open the terminal on browser:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sciccx9easkkaiz3t99g.png)

See for more details at [nucleoid.org/get-started](https://nucleoid.org/get-started/)

See the project at [gitlab.com/nucleoid/nucleoid](https://gitlab.com/nucleoid/nucleoid)
git : getting started with git
Tags: git, github, cli
Published: 2020-06-21 17:20:48

> Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

[Git](https://git-scm.com/)

Git is the most commonly used for version control. Git help us to makes collaboration easy. Even we work by our self, we will love it.

Git runs in our local machine. We also can use online host such as Github, Gitlab, and Bitbucket.

---

# Installing git

We can easily download git from this [Download page](https://git-scm.com/downloads).
For MacOs, I prefer to use homebrew instead. Just simply type this command `brew install git`.

And in linux, I will do `apt-get install git`.

Run `git` in our terminal to check if it's successfully installed.

---

# Connecting to github with SSH

There are two ways if we want to communicate with github.

First one is using HTTP, and the second one is using SSH. Actually we don't need anything else if we want to clone a github repository using HTTP, but we will need some configurations if we want to use SSH.

This example is explaining in linux machine, need a little adjustment if we run MacOs or Windows.

- Generating a new SSH key

Run this terminal command to create a new SSH key

```bash
$ ssh-keygen -t rsa -b 4096 -C "our_email@example.com"
```

By default, the key will saved in this path `~/.ssh/id_rsa.pub`

- Adding the SSH key to our github account

Copy the `id_rsa.pub` file generated by previous command.

Go to our github account. Find **Settings** - **SSH and GPGP keys** - **New SSH key.**
Create a **Title** and paste our **Key** there, then hit **Add SSH Key**.

We can run this command to test if our key is successfully configured.

```bash
$ ssh -T git@github.com
Hi zakiarsyad! You've successfully authenticated, but GitHub does not provide shell access.
```

---

# Setting our git username

```bash
# setting our username
$ git config --global user.name "zakiarsyad"

# confirm that we set userneame correctly
$ git config --global user.name
zakiarsyad
```

---

# Setting our commit email address

```bash
# setting our username
$ git config --global user.email "zakiarsyad@mail.com"

# confirm that we set userneame correctly
$ git config --global user.email
zakiarsyad@mail.com
```

 

---

git is ready to use in our local machine.
Create the Frontend Mentor Countries app in Angular
Tags: angular, typescript, tutorial
Published: 2020-06-22 15:30:47

In this video series, I took the frontend mentor challenge to do the countries REST api application with Angular.

{% youtube 4nMpvb12Uo8 %}

{% youtube YkVShyTILpY %}

{% youtube hXXwm0QRTEU %}

{% youtube 4ekenSY6jac %}

## Included in video
- Setting up an Angular 9 
- Generating components and services with the Angular CLI
- RxJS Observable logic for global theme state
- Lots of SCSS with some special Angular host-context
- Creating a component with 2 way binding

## Resource Links
- [Source code](https://github.com/kelvin-mai/ng-countries)
- [Frontend Mentor Challenge](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca)

## Follow and support me
- [YouTube](https://www.youtube.com/c/kelvinmai)
- [Twitter](https://twitter.com/kelvinmai)