teleren/devto huggingface dataset:
Auth in your react app!
Published: 2020-06-28 21:37:09

When starting a new project, it takes some effort to implement Login / Sign-up screens. We often have to repeat the same implementation again and again.

Authentication should be simple to remove friction to build an MVP (Most Viable Product) or get users started. Authentication logic should be reused to save development time.

There are a few online services that let you integrate your application with their Authentication APIs. But it doesn't really save much time when we have to go through long documentation to understand it, then spend more time learning and integrating.

An Authentication Service should be simple to integrate with. Below is an example:

**Step 1 - Import and use Login Component**

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

**Step 2 - Handle response**
After user submitted the form (Sign up or Log in), the "afterSubmit" callback function will be called. Here you can handle the response (full User object) by redirecting user to the home page, dashboard, etc.

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

jwtData is the user object which has properties like: user uuid, accessToken, email, name, picUrl, etc. which can be used in the app (or store in localStorage).

**That's it!**
There is no Step 3. In the next article, I will write more about how it works. In the meantime, there is more information in the link below:

AuthUI Repo - (https://github.com/authui/authui)

Happy Coding!
Working on real-world projects
Tags: html, css, beginners, basics
Published: 2020-06-28 21:27:14

Real-world projects are something that helps in solving real-life problems using technology. As a front-end developer, I need to have a grab on my the technologies that I am working on like HTML, CSS, JavaScript, and one of its framework like React.

When we work in a company there are some requirements and we are expected to deliver based on their requirements. They might want us to add a new feature to the existing code or solve any defect or want us to work on an app from scratch.

To perform well and deliver in time it requires one to know the basics of the technologies that are required to produce the required result. We need to first learn the basics and then we need to practice on the basics so that we can cement the skills that are required from us and we perform well when we are expected to do a task.

When we know a skill, it not just let us to be job-ready but also imbibe us with power so that we can build our systems for solving society's problems. Considering the financial cost and the return on investment is 100 folds when we are working with the software.

I have been following the Colt Steele Course, The Web Developer Bootcamp. There I have completed the HTML and CSS sections. I have read the basics of web development earlier as well while I took up the task to study from freecodecamp. I did not have enough practice on the real-life project that lead to me forgetting the concepts. I am more focused now and I have had a previous experience which is helping me to have a grab on the subjects and I am moving fast.

I sometimes face motivation issues that I counter by showing up daily and studying regularly and be in a network of developers in the Dev Community, Twitter, LinkedIn. I work on this plan and try to show up daily.

I want to be a great web developer and I am giving my best. That is all that matters to me. Thanks for reading, if you have any suggestions for me please comment below.
Project Overkill?
Tags: sideprojects, opensource, microservices, discuss
Published: 2020-06-28 21:20:38

I just got this dumb idea here at 2:36 AM IST, it's called Project Overkill.

Basically, use the most overkill software/tool/library for everything in this project (the opposite of YAGNI principle

For example, we can have a very simple CRUD app.
But for this, I'll use
- fault tolerant k8s/openshift and dockerised GraphQL based APIs that are in the form of separated microservices in different languages (for Auth, processing, mailer) with load balancers
- Kafka as the message queue for these microservices
- Kong as the API gateway
- Cassandra/some blockchain db as the database complete with sharding and replication and encryption
- VueJS for the sign-up page, react for post-login actions
- Monitoring via Prometheus, grafana
- logging via ELK stack
- complete CI/CD using Jenkins scripted pipelines
- DDos protection via cloudflare and recaptcha for POST call pages

What ideas do you people have for creating the dumbest most overkill project? 
I believe it would be a good learning experience, going hands-on with all of these tools
Gitflow Workflow
Published: 2020-06-28 21:17:05

<img src="https://my-bucket-image2.s3.amazonaws.com/ImageGitHub/git-flow-logo.png" alt="drawing" width="250"/>

## [What´s GitFlow ? 🙄](https://github.com/markdown-it/markdown-it-emoji)

Gitflow Workflow is a Git workflow design that was first published and made popular by __Vincent Driessen__ at nvie. The Gitflow Workflow defines a strict branching model designed around the project release. This provides a robust framework for managing larger projects.

### [Master](https://github.com/markdown-it/markdown-it-emoji)

 The master branch stores the official release history, this is production code.

### [Develop](https://github.com/markdown-it/markdown-it-emoji)

 The develop branch serves as an integration branch for features.

### [Feature](https://github.com/markdown-it/markdown-it-emoji)

 The feature branches use to develop as their parent branch and start coding new features on this branch. When a feature is complete, it gets merged back into develop. Features should never interact directly with master.

### [Release](https://github.com/markdown-it/markdown-it-emoji)

  The release branch gets merged into master and tagged with a version number. In addition, it should be merged back into develop

### [Hotfix](https://github.com/markdown-it/markdown-it-emoji)

The hotfix branches are a lot like release branches and feature branches except they're based on master instead of develop. 

![](https://my-bucket-image2.s3.amazonaws.com/ImageGitHub/gitflow-system.png)

## [Init git flow](https://github.com/markdown-it/markdown-it-emoji)

```console
$ git branch develop

$ git push -u origin develop

$ git branch -l
  develop
* master

$ git flow init
Which branch should be used for bringing forth production releases?
   - develop
   - master
Branch name for production releases: [master]

Which branch should be used for integration of the "next release"?
   - develop
Branch name for "next release" development: [develop]

How to name your supporting branch prefixes?
Feature branches? [feature/]
Bugfix branches? [bugfix/]
Release branches? [release/]
Hotfix branches? [hotfix/]
Support branches? [support/]
Version tag prefix? []
Hooks and filters directory? [C:/Users/carlmacd/Desktop/Library/.git/hooks]
```

## [Create a new feature](https://github.com/markdown-it/markdown-it-emoji)

```console
$ git checkout develop

$ git flow feature start feature_git_flow_summary

$ git push --set-upstream origin feature/feature_git_flow_summary

$ git checkout develop

$ git flow feature finish feature_git_flow_summary
```

## [Create a new release](https://github.com/markdown-it/markdown-it-emoji)

```console
$ git flow release start release_1.0

$ git flow release finish 'release_1.0'
```

## [Create a new hotfix](https://github.com/markdown-it/markdown-it-emoji)

```console
$ git flow hotfix start hotfix_branch

$ git flow hotfix finish hotfix_branch
```

Source: [atlassian gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) 🔗

> thank you for reading
sending SQL results periodically to slack
Tags: sql, slack, go, webdev
Published: 2020-06-28 20:41:29

Sometimes we want to notify ourselves or our teammates about an important update based on our business database(s) without a large setup, so we start searching about a very small tool that does the required job with no hassle, as well we want it to be flexible so we can customize the final message and send it to slack easily.

Today I'm happy to introduce `sql2slack`, it is a very tiny and portable software that just does the job, it allows you to define your SQL query as a job to be executed at a configured schedule as well it works with the major databases out there.

At first, we need to get a slack webhook url,

1. Go [here](https://api.slack.com/apps).
2. Click on `Create New App`.
3. Choose `Incoming Webhooks` and activate it.
4. Scroll down to `Add New Webhook to Workspace` and follow the instructions.
5. Scroll down to the webhooks table, and copy the generated webhook URL.

Let's see how we can send the newly registered (within the last 2 hours) users in our MySQL database to a slack channel.

```hcl
job new_users {
    // set the slack webhook url here
    channel = "https://service.slack.com/xxxxxxx"

    // we're using mysql
    driver = "mysql"
    
    // the connection string
    dsn = "root:root@tcp(127.0.0.1:3306)/dbname"

    // define the sql query here!
    query = <<SQL
        SELECT users.* FROM users where created_at > DATE_SUB(NOW(),INTERVAL 2 HOUR); 
    SQL

    // schedule it each 2 hours
    schedule = "* */2 * * *"
    
    // here we recieve the rows from the above query and pass the message to slack with each user name.
    message = <<JS
        if ( $rows.length < 1 ) {
            return
        }

        say("there are (", $rows.length, ") new users!")
        say("users list is:")

        _.chain($rows).pluck('name').each(function(name){
            say("- ", name, " .")
        })
    JS
}
```

To learn more about `sql2slack`, you can go to its [github repo](https://github.com/alash3al/sql2slack), and don't forget to star it.
100 Days of SwiftUI — Day 28
Tags: 100daysofswiftui
Published: 2020-06-28 21:08:12

---
title: 100 Days of SwiftUI — Day 28
published: true
date: 2020-06-28 21:04:32 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-28/
---

I missed yesterday, as [life got in my way](https://zeitschlag.blog/2020/06/28/i-spent-the.html). But I didn't want to miss today, too, so I sat down before going to bed and just did [Day 28](https://www.hackingwithswift.com/100/swiftui/28): It was review time, again. I passed a small test and solved three challenges.

The last one was actually pretty tricky for me: I had to get rid of the button to start the bedtime-calcultion and show the calculated bedtime all the time instead.

My approach was to use a computed property for the bedtime, that gets calculated everytime the UI changes. This feels a bit unusual, but it works. With UIKit I would have used [`pickerView(_:didSelectRow:inComponent:)`](https://developer.apple.com/documentation/uikit/uipickerviewdelegate/1614371-pickerview), for example, but I didn't find such init-parameters for all the necessary UI-elements. While I can provide a stepper with closures to run `onIncrement` and `onDecrement`, for example, I didn't find anything similar for neither `PickerView`, nor `DatePickerView`. And so in the end, I used a computed property for `bedTime`.

How did you solve the three challenges for Day 28?

<!--kg-card-end: markdown-->
How we deploy our website and API
Tags: backend, deployment, git, node
Published: 2020-06-28 21:00:18

PreMiD is a decently large application. With just over 60 thousand users, it is a much larger feat to actually maintain the infrastructure that goes into running the website and application. This post is going to go through some of our strategies on how we deploy and keep all of our production servers in sync.

Let's discuss the website:
{% github premid/website no-readme %}
The website is a crucial part of PreMiD. It's the face of the application and contains all the information you'd want to know about PreMiD, and also includes the store. **DePloY** is our GitHub workflow that handles deploying both the website and the API. When we push to `master` or merge into `stable`, the website is automatically deployed on https://beta.premid.app and https://premid.app respectively. Here's the steps:

- We SSH into the three servers that handle the website and API
- We `cd` into the directory that has the guts of the website
- Run a `git reset`
- Pull
- Install with `yarn`
- Build the website with `yarn build`
- __Reload__ with `pm2`.

Lets talk about `pm2 reload` for a second. Reloading and restarting with `pm2` is a very different operation. Reloading is a more graceful restart -- it takes down instances one by one and makes sure they start correctly before taking down the next one, and it keeps repeating this until your application is fully upgraded. This is a lifesaver when doing deployments, it means your application will remain running during an upgrade and even start serving new content whilst your old application is going down. The only time this may be an issue is if you have major changes between versions which may be incompatible and could lead to issues if both versions ran at the same time. If this is the case, we force a full restart on the deployment rather than a reload. However, this is such a rare occurrence that we never end up doing it.

The API is a very similar process. Identical, actually, except that instead of running `nuxt` we're just running a standard Node application.

And that's it! Really! Our deployment process is kept relatively simple.

This is part of a series of Behind the Scenes posts. Make sure to check them out as we post them!
Cannot read back correct JSON from excel workbook
Tags: javascript, node, npm, excel
Published: 2020-06-28 20:55:51

I am using npm module xlsx to write and read JSON data.

I want to write this JSON to excel
{ "name": "John", "class": 1, "address" : [ { "street": "12th Cross" , "city": "London" }, { "street": "22nd Cross" , "city": "Cade" } ] }

Later when I read back I want to get same JSON from excel file

If you already solved, any suggestion or help will be of great help :)

Here is what I have tried

```
var XLSX = require("xlsx");
console.log("Node Version: " + process.versions.node);
console.log("XLSX Version: " + XLSX.version);

/* GENERATE TEST FILE */
(function() {
  // create workbook
  var wb = XLSX.utils.book_new();
  var ws = XLSX.utils.json_to_sheet([
    { "name": "John", "class": 1, "address" : [ { "street": "12th Cross" , "city": "London" }, { "street": "22nd Cross" , "city": "Cade" } ] }
    ], {header:["name","class","address","street","city"]});

XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "testfile.xlsx");
let worksheet = wb.Sheets['Sheet1'];
let jsonArray= XLSX.utils.sheet_to_json(worksheet);
console.log(JSON.stringify(jsonArray));
})();
```
This returns 
```
Node Version: 8.12.0
XLSX Version: 0.16.2
[{"name":"John","class":1}]

But I was expecting 
 { "name": "John", "class": 1, "address" : [ { "street": "12th Cross" , "city": "London" }, { "street": "22nd Cross" , "city": "Cade" } ] }
```

Any help or suggestion will be of great help :)
Leetcode - Contains Duplicate (with JavaScript)
Published: 2020-06-28 20:55:16

Today I am going to show how to solve the Leetcode Contains Duplicate algorithm problem.

Here is the problem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aovp7ps865fu5lvhg91y.png)

Solution:
I use a hash table for solving this problem. In the hash table I’m going to map each element (as a key) to its index (as a value).

1) For creating a hash table, I’m using a new data structure called Map, which was introduced in ECMAScript 2015.
```javascript
var containsDuplicate = function(nums) {
    let map = new Map();
};
```

2) Next, I iterate through all of the numbers using for loop.
```javascript
var containsDuplicate = function(nums) {
    let map = new Map();
    
    for (let i = 0; i < nums.length; i++) {
    }
};
```

3) While I iterate the elements, I also check if the current element already exists in the table. If it exists, the function will break out of the loop and return true. Otherwise, I insert an element into the table.
```javascript
var containsDuplicate = function(nums) {
    let map = new Map();
    
    for (let i = 0; i < nums.length; i++) {
        if (map.has(nums[i])) {
            return true
        }
        map.set(nums[i], i)
    }
    
    return false
};
```
Local stack for kubernetes
Tags: kubernetes, kind, tilt
Published: 2020-06-28 20:43:17

<sub><span>Photo by <a href="https://unsplash.com/@gerandeklerk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Geran de Klerk</a> on <a href="/s/photos/endangered?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></sub>


I am considering using one kubernetes i our stack. But the thing that stops me is the complexity of maintaining the cluster alive in the Cloud or locally in sync across the team.

It seems 2 tools can help me providing this:
- [Kind](https://kind.sigs.k8s.io/), by providing a local kubernetes cluster easy to setup
- [tilt](https://tilt.dev/), by providing a way to transition from docker-compose, and ease of development / debug of kubernetes.

#Kind

By following the [quickstart](https://kind.sigs.k8s.io/docs/user/quick-start), i was able to start a cluster with  a control plane and a node using the following file 

```yaml
kind: Cluster
apiVersion: kind.x-k8s.io/v1alpha4
nodes:
  - role: control-plane
  - role: worker

```

If you have an error saying that yaml cannot be merged, it means that your config file in your C:\Users\My_User\.kube has some invalid character. You can delete it, if you can remove the existing context.

Then, a 
```bash
kind create cluster --config=kind.config.yaml
```
brings me my cluster.


#Tilt

I had followed the [example](https://docs.tilt.dev/example_csharp.html), that you can find on [github](https://github.com/tilt-dev/tilt-example-csharp).

The only issue for me was that the port 8000 was blocked so i had to change all references in tiltfile, kubernetes.yaml, and sh to 8001.

Do not forget to kill your cluster as it can eat all your memory.

```bash
kind delete cluster
```

Update: [Daniel Neumann write a good blog about setuping KinD locally](https://www.danielstechblog.io/local-kubernetes-setup-with-kind/)

Hope this helps !
AZ Citation Services
Tags: citation, services, seo
Published: 2020-06-28 20:39:05

AZ Citation Services was founded with a mission to help your business succeed. Our team of smart and passionate people is always ready for collaboration so we can together promote your brand and improve your rankings. Our services include citation building, citation cleanup, and also a local citation audit of your current citations.

Contact us and get:

* A holistic approach to SEO and citations to improve local rankings

* Citations manually submitted in two-weeks maximum

* Complete transparency and shared access to all listings

* Scalable packages per orders

* Over 1500 citations in our database
Crypto Widget with Svelte
Tags: tutorial, svelte, javascript
Published: 2020-06-28 20:25:06

Svelte is awesome it even produces a very tiny bundle. Today I bring you a simple crypto widget thanks to a free API without CORS from [Gemini](https://api.gemini.com/).

Check out the demo here https://widget.anoram.com/


## Prerequisites:
      1/ Svelte starter template (https://svelte.dev/)
      2/ API https://api.gemini.com/v1/pricefeed

Let's look at the basic structure of the endpoint.

```json
[{
	"pair": "BCHUSD",
	"price": "224.82",
	"percentChange24h": "-0.0048"
}, {
	"pair": "LINKETH",
	"price": "0.0201696",
	"percentChange24h": "0.0149"
}, {
	"pair": "BCHETH",
	"price": "0.9799",
	"percentChange24h": "-0.0169"
}]
```
Now several people will not know what LINKETH, BCHETH... they are cost of LINK or BCH in Ether, since it is not easy to read in terms of ETH or BTC, so I mapped and took only the pairs with USD.

```js
async function fetchFeed() {
	res = await fetch(feed).then(r => r.json())
		res.map(c => {
			if (c.pair.includes("USD")) {
				let tmp = {};
				tmp["coin"] = c.pair.replace("USD", "")
				tmp["price"] = "$ " + c.price;
				feedList.push(tmp)
			}
		})
	}
```
This makes a new object that looks like this and its much cleaner and formatted.

```json
[
  {coin: "BTC", price: "$ 9159.77"},
  {coin: "BCH", price: "$ 225"},
  {coin: "LTC", price: "$ 41.68"},
  {coin: "LINK", price: "$ 4.60045"},
  {coin: "BAT", price: "$ 0.2646"},
  {coin: "DAI", price: "$ 1.025"},
  {coin: "OXT", price: "$ 0.1617"},
  {coin: "ZEC", price: "$ 53.52"},
  {coin: "ETH", price: "$ 227.41"}
]
```
So here is the simple svelte code that populates this response in the UI

```js
{#if res}
	{#await res}
		loading
			{:then data}
				{#each feedList as item}
				<div class="col">
                  <div class="card">
                      <div class="card-text">
                          <p>{item.coin?item.coin:'...'}</p>
                          <p>{item.price?item.price:'...'}</p>
                      </div>
                  </div>
				</div>
				{/each}
	{/await}
{:else}
	loading
{/if}
```

The end result is a beautiful app that looks like this.

![Crypto Svelte](https://dev-to-uploads.s3.amazonaws.com/i/tsybsoe7rbnglkhkto9c.jpg)
You can take a look at the demo here https://widget.anoram.com/


Here is the link to the repo https://github.com/peopledrivemecrazy/svelte-crypto-price-widget

Enjoy.
interesting subjects
Published: 2020-06-28 20:04:54

{% link kazz/boost-your-productivity-using-markdown-1be %}

{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}

{% kotlin https://pl.kotl.in/owreUFFUG %}

{% instagram BXgGcAUjM39 %}

{% youtube dQw4w9WgXcQ %}
Is there a tutorial to build a support live chat for a website using socket.io?
Tags: help, javascript, webdev, node
Published: 2020-06-28 19:37:38

I would like to add a support live chat web app to my website using socket.io, mainly focused on new users who have specific questions or feedback about my product. All visitors of the website can chat with the support staff, currently me, but the visitors can not see each other's messages or communicate with each other. I looked around on the internet for a tutorial that goes through this but all were for communication amongst all the users like in a group chat like https://www.youtube.com/watch?v=rxzOqP9YwmM . However, I need to build one in which they can all individually only message me and can not read each other's messages or message each other, and I can reply to each message individually. Could you please link a tutorial that walks me through this or the code for such an app so that I can understand the code?
How to find the best lists of expiring domains for dropcatching
Tags: dropcatching, domains, domaining, branding
Published: 2020-06-28 19:31:50

Dropcatching is the process of bidding on expiring domain names in hopes that the dropcatching service can successfully snipe the domain on your behalf as soon as it drops.

All of the popular dropcatching services are competing and the one with the most resources allocated to any particular name will most likely win the snipe.

It definitely helps to shop around for the best prices and take advantage of many of the free, downloadable lists that each dropcatching service provides. Using tools like [Dropfilter](https://github.com/crock/dropfilter), you can easily filter these huge lists based on customizable criteria.

**GoDaddy Auctions**
https://auctions.godaddy.com/trptools.aspx

ftp://auctions@ftp.godaddy.com/ (blank password)

**Namejet**
http://www.namejet.com/Pages/Downloads.aspx

**Dropcatch.com**
https://www.dropcatch.com/DownloadCenter

**SnapNames**
https://snapnames.com/download.action