teleren/devto huggingface dataset:
My first React app
Tags: octograd2020
Published: 2020-05-23 11:28:45

## COVID19 Tracker


## https://mycovidtracker.netlify.app
 

## {% github https://github.com/pixan198/covid19_tracker %}

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## I was learning react from various YouTube tutorials and many of them suggested to start a project in react, so that, I can maximize my learning of the framework.
## I started searching on YouTube for react project tutorials since it was my first project, so, I took help of tutorials to get acquainted with workflow. Then I encountered a tutorial to make a Covid 19 tracking web app using react by JavaScript Mastery. I followed the instructions and made a web app which tracks latest Covid19 cases using an API(https://covid19.mathdro.id/api). I'd never worked with APIs so it was a whole new experience fetching data in JSON and rendering it on webpage. I'd learned a lot from working on a project.


## I'd suggest to everyone who are trying to learn a new tool, language or framework, you should learn the basics from whatever thing you prefer tutorials or courses, but , after that start working on a project that doesn't need to be remarkable it can be as simple as a to-do list or calculator but atleast try to build something , if you've choosen something complex take help of internet reach out to people who are experts at it and ask them how to pursue this.


## Don't compare yourself with anyone, everybody has a different life, their pace of Learning is different. Just compare yourself with your previous self, who was you a day before and who are you today, what you have learnt new in a day , what good deeds you've done and that's all which matters.
Feedback about the go-mock script that create mocks for all automatically and recursively detected Go interfaces
Tags: go, discuss, docker, help
Published: 2020-05-23 11:13:44

Recently I have working on a project that allow to work on Go projects out-of-box using a Docker image.

It contains preinstalled tools for developing, mocking, formatting, linting, building, testing and documenting Go projects.

For mocking Go interfaces, I'm using the standard and classic `mockgen` tool in reflect mode. One of annoying thing about that tool is command line invocations.

I have scripted that to automatically and recursively detect all Go interfaces. It excludes `_test.go` files, `mocks` directories and the `package main`.

Go module detection is based on the `go env GOMOD` command invocation. All `mocks` are generated under the mocks directory for given Go package.

For me it works well. But I may have miss something. And because of that, I want to ask you for a small feedback. In advance, I appreciate it for any comments :)

The `go-mock` script that covers this topic: https://gitlab.com/tymonx/docker-go/-/blob/master/scripts/go-mock

Project site: https://gitlab.com/tymonx/docker-go

I also hope, that it may be useful for someone ;)
Digital Marketing Agency in Vadodara
Tags: digitalmarketingagency
Published: 2020-05-23 11:07:25


Earlier digital marketing was known as Internet Marketing or Online Marketing. The use of digital marketing is to connect your visitors and viewers with your business in order to Generate Leads for your Business.

Ample Websol provides Digital Marketing Services for your Company. Our Primary Goal is to increase your sales. We are also experts to convert your visitors into your customers.
We are Experts in Social Media Marketing, PPC Marketing, Search Engine Optimization, Email Marketing. We promote your businesses online in order to grow your brand awareness as well as increase their sales.

We Work with: Corporate, Commercial, NGO, Retail Shops, Wholesale Shops, Training Centers, pharmaceutical Agency & Industry. You can Join us and Improve your Business Online.
Website
Tags: githubsdp, octograd2020
Published: 2020-05-23 10:46:36

I made a website. You want to see? Too bad, it is closed source, true github spirit. If u a github admin tho you could probs check out the repo. Pretty cool stuff, will make it public one day once I stop making money. Thank you github for free source control bless up 10/10 buy puts $msft
#githubsdp
Creating a system for sending questions to a teacher
Tags: octograd2020
Published: 2020-05-23 10:39:49

## Why did I create this?
Earlier this year, a teacher asked me if I wanted to help with the tech side of a celebration that we have each year. I said yes and I started working on the system.

# How does it work?
As a student, you go to a website, send the question. Then a moderator (or teacher) can approve of reject the question. If it is approved, it will be send to another page where all the approved questions will be, which can be show on the board for example.
Approving and rejecting questions will happen from an admin panel. There is also a switch that will close the queue and a button to clear all the queued and approved questions.

## What did I use?
I used Firebase as a database (and for authentication on the admin panel), because it is real time and therefore really easy to work with in a system like this.
For the frontend I used NuxtJS, which works really well with firebase.

## Screenshots
![Website view](https://i.imgur.com/5vO7Hgr.png)
![Admin login](https://i.imgur.com/Dd0EWLo.png)
![Admin queue](https://i.imgur.com/V3wFnD5.png)
How to not be lost in every emerging tech?
Tags: discuss
Published: 2020-05-23 10:08:03

It's a trend in engineers these days to pick up and try on every new thing in the market to make themselves more employable. I think it's not by any fault of their own. The job description of a role in may-a-cases probably describes the whole team instead of an individual which vary from knowing basics of development flowing through CI/CD to trouble-shooting and fixing production issues.

Hoping to add everything to the skillset, I see a lot of folks including me at times learning one thing or another every other day from web-development to newer frameworks and backend, multiple languages.

On top of that we ought to be part of social community and again there are so many of them on different platforms. You could be on twitter, facebook, could be making videos or vlogs on Youtube or could be on Dev, Hashnode. There are so many platform to be learning from like Udemy, Udacity, edX and you could be spending a lot of time there.

If that's not enough, people are involved in Discord communities continuously sharing ideas, building groups, networking.

Between all of it and networking, LinkedIn can not be ignored and hence you engage with a different group or set of people there.

And it feels like going round in circles without achieving much at hand. What's everyone take on it and how if; they have been efficiently been able to manage all of it and have grown in their way through it.
How To Become Productive When Coding.
Tags: productivity, coding, job
Published: 2020-05-23 10:07:45

Once again,Hi to you all here,have you ever tried coding but you weren't productive??😳😳
That's hurts a lot. Most developers out there find it hard to be productive when building applications.

First let's me define the term productivity.Productivity is the process of being productive and what is productive.The act of working on something to yield good results.
In order for you to be productive,you must have inner peace and set a goal for yourself .

Inner peace:
The act of being relaxed and calm physically and mentally. Having a relaxed mind is one of the best way to be productive because you can be able to think properly and straight without being distracted and carried away.How do you achieve inner peace😕😕.Well all you have to do is meditate in a quiet place and relax your brain,body and soul.After that you can get on your PC.

Set Goals:
Setting goals as a developer makes your work a bit faster because you don't have to start thinking of what to do and how to do it.What goals are these?There are:
What do I need to do?
How can I accomplish this?
What tools are required ?
What methods do I use?
Those of some of the few things you need to set up a goal to achieve. Building software isn't as easy as you think without laying out goals.

Coffee
Who doesn't like Coffee 😂😂

Music
Music affects your soul and body mentally.Listening to one's favorite song that make you productive. Though I could have added to link to get smooth music that will keep you up and running.

Thanks for reading.
Share your experience below
COME JOIN THE DARK SIDE
Tags: darktheme, mytools
Published: 2020-05-23 09:57:47

Most of us love dark themes. It's a lifesaver for me when I work at night or under dim light. Sharing the apps I use under the dark theme :)

# DEV.TO

![DEV TO dark setting](https://i.ibb.co/HFFTt8q/devto-dark.png)

# Visual Studio
![VS dark setting](https://i.ibb.co/sFSTbT1/vs-dark.png)

# Microsoft Teams
![MSTEAMS dark setting](https://i.ibb.co/j6ZYhgT/MSTEAMS-dark.png)

# Outlook Web
![Outlook web dark setting](https://i.ibb.co/tY4CqQv/outlook-dark.png)

# Microsoft Edge
![Edge dark setting](https://i.ibb.co/yXR9Qfx/edge-dark.png)

# Facebook
![FB dark theme](https://i.ibb.co/SXBZCBh/fb-dark.png)

## You can also change your windows theme to dark!

![Windows dark setting](https://i.ibb.co/RHn8GsC/windows-dark.png)

Please do share the apps that you use under dark theme in comments :)
Things to look at when doing code reviews
Tags: codequality, productivity, testing
Published: 2020-05-23 09:51:52

First of all, I think **code reviews** are a must for every team that wants to have a **consistent codebase** and **good code quality**. ⭐

Code review should be a really focused task, and I think those are the top things that need to be watched:  

## Code structure & common patterns used 
Is the code structured correctly and following the same trends and patterns as the rest of the application? 
If it breaks from those patterns is it a good reason to do so?

## Code quality 
Does it follow good **namig conventions**?
Are **FP** principles used? 
Are **unit or integration tests** present? 
If existing code is modified and it had automated tests to cover it, have the tests been updated to also check the new logic?

## Maintainability 
If certain parts are badly written, too complex or unreadable, then suggest alternatives.

## Write good comments 
This is something on you, **the reviewer:**
- Be empathetic and kind when leaving comments
- Even for **horrible mistakes**, try to point them out in a nice way

## Use automation 🚀
Can you automate more to make some general mistakes occur less often?
 - avoid formatting comments by using a code formatter
 - avoid some code quality comments by using linters
 - use static type checking to avoid pointing out mistyping comments
  
Most important ❗  **discuss more upfront** when a teammate has a challenging task so the outcome is more predictable (have a **huddle** task for complex work).

If you like this article, chances are you will also enjoy what I post on [Twitter](https://twitter.com/alexandrudanpop). 🔥
Evaluating Framer Web
Tags: framer, framerx, design, figma
Published: 2020-05-23 09:36:19

---
title: Evaluating Framer Web
published: true
description: Framer just released their web version. I am evaluating it
tags: framer, framerx, design, figma
---

# Evaluating Framer Web

[Framer: The prototyping tool for teams](https://www.framer.com)

![Framer Web](https://dev-to-uploads.s3.amazonaws.com/i/4dwpq7vvrsd67yynf15q.png)

Initial impressions

- Magic motion
This feature is actually really **good**. Just signup and see their examples page.
- Responsive, so we we can design in Iphone 11 resolution. But we can preview it with Iphone 11 Pro max which has different screen resolution
- Figma Integration
- The native tools like page, scroll, stacks is actually really good. It represents how Frontend Developement works. Figma doesn't have this yet.
- It's free
- Performance is good on small projects is good. Even on safrari.
- Can import from figma, sketch
- The pricing is pretty much the same as figma.

[Pricing | Framer](https://www.framer.com/pricing/)

[Pricing for Figma's Free, Professional, and Organization plans.](http://figma.com/pricing/)

- The UI is good & clean

Cons:

- Importing big figma project results in 'connection lost' in safari

    ![Screen shot safari framer](https://dev-to-uploads.s3.amazonaws.com/i/xsrud7g1s5h0bwor68ym.png)

- Also, when I refresh the page. The imports is gone
- framer becomes slow after importing a big project. We can see in the safari it says 'This web page using significat memory. Closing it may improve the responsiveness of your Mac'
- On chrome, imported succesfully. But it's still slow, and somtimes the connection is also lost
- Import is not perfect yet. Some font & color is not imported successfully


![Figma screenshot](https://dev-to-uploads.s3.amazonaws.com/i/tpy2o3j9qf8lkm2f50no.png)

This is figma

![Framer Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/yyhmn0ag3lkg6a7r4rq5.png)

This is framer

- On safari, macbook, swiping from left to right. results to 'go back'. safari's built in functionality. 
So it's kinda hard to pan left. This problem doesn't exist on chrome

Summary: 

- Figma still wins in term of editing productivity. There are many quick actions in figma, like selection colors, etc
- But for animation & protoyping, hands down framer wins.

    But the good news is we can import from figma to framer (even tho it's not perfect yet). So we can edit in figma and do the animation in framer.
Joining Visual Studio Live Share session
Tags: vscode, productivity
Published: 2020-05-23 09:33:33

Many people have problem to Joining Visual Studio Live Share session.
So now be decide to write a article in few Step follow and join the live session.

## Step 1
Must be installed vscode (in any system).

## Step 2
you need to install a extension set 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u4mx5awf4gmh2of6zoso.png)
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack


now you have icon in Activity bar like this..
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7k5u7to8q3m7c4phzjo2.png)

## Step 3
click on join icon on top and paste link..
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3ikwnz3g1udwis9l5tp5.png)

Now you successfully entered in live session...
:smile:
VSCode, how to check workflow syntax for GitHub Actions
Tags: github, cicd, vscode, yaml
Published: 2020-05-23 09:29:02


Creating a workflow for GitHub Action is quite easy. You need to understand how the “GitHub Workflow” process works and then you need to create a Yaml file to define your workflow configuration.

You could start from:

* The official documentation about how to create your workflow Yaml file [https://help.github.com/en/actions/reference/workflow-syntax-for-github-actions](https://help.github.com/en/actions/reference/workflow-syntax-for-github-actions)

* A workflow template: [https://github.com/actions/starter-workflows/tree/master/ci](https://github.com/actions/starter-workflows/tree/master/ci) . This is the repository filled and maintained by the community where you could find some starter template for your language and/or framework.

So, once you are able to start to write your workflow Yaml file, probably you would need a support in your editor, while you are creating/editing your Yaml file. A good support from your editor would be: suggest and show some directive description while you are typing and check the syntax and notify you if you are doing some error (typo, wrong directive etc).

![](https://cdn-images-1.medium.com/max/2960/1*rYWrv5ZukQmAQTQDkT0icA.png)

### JSON Schema project

JSON Schema project [http://schemastore.org/json/](http://schemastore.org/json/) wants to be a repository to include schemas for all commonly known JSON file formats.

A schema is like a descriptor useful if you want to automate the check of your JSON file. We have a lot of JSON schema, and we have also a schema for GitHub actions.
> # Hey! Wait! Our workflow file is a Yaml file, it is not a JSON file! So, how could we use the JSON Schema????????

### Install the right extension in VSCode

In order to use the JSON Schema with our Yaml file we need to install a Extension in our editor. This extension convert on the fly the Yaml that we are editing in a Json file and performs the check with the JSON Schema.

If you are using Visual Studio Code (VSCode) you can install this extension: [https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)

![](https://cdn-images-1.medium.com/max/4396/1*91VFsCuhi3Sg-Tm_3oIVSQ.png)

Once your extension is installed you can jump back into your Yaml File and you can start typing…

![](https://cdn-images-1.medium.com/max/3576/1*Nqkzu_CH8MI7u9QKKEIJIg.gif)
Install Docker and NVIDIA container
Tags: docker, nvidia, linux
Published: 2020-05-23 09:26:03

## Goal

Install Docker, NVIDIA Containter Toolkit.

## Environment

Check OS

```
cat /etc/lsb-release
```

Check GPU
```
cat /etc/lsb-release 
```

OS: Ubuntu 18.04
GPU: GeFOrce RTX 2070

## Installation of Docker

Docker

Refer the step [docker docs](https://docs.docker.com/engine/install/ubuntu/)

Set up the repository

```
sudo apt-get update
sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
```

Add Docker's official GPG key

```
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```

Verify that I have key with the fingerpront.

```
sudo apt-key fingerprint 0EBFCD88
```

Use the following command to set up the stable repository

```
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
```

Install Docker engine

```
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
```

Verify that Docker Engine is installed correctly

```
sudo docker run hello-world
docker -v
```

## Installation of NVIDIA conatiner

Refer the step [nvida Container Toolkit](https://github.com/NVIDIA/nvidia-docker/tree/master#quickstart)

This is the NVIDIA Containter Tool kit system:

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

According to the site,
"Make sure you have installed the NVIDIA driver and Docker 19.03 for your Linux distribution Note that you do not need to install the CUDA toolkit on the host, but the driver needs to be installed.
"

In my case, CUDA toolkit has been already installed.
Then, I skipped this step.

Add the package repositories

```
distribution=$(. /etc/os-release;echo $ID$VERSION_ID)
curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | sudo apt-key add -
curl -s -L https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list | sudo tee /etc/apt/sources.list.d/nvidia-docker.list

sudo apt-get update && sudo apt-get install -y nvidia-container-toolkit
sudo systemctl restart docker
```

Reboot

```
sudo reboot
```

Check installation

```
nvidia-container-cli info
```

[Test](https://github.com/NVIDIA/nvidia-docker/wiki/Installation-(Native-GPU-Support))

```
docker run --gpus all nvidia/cuda nvidia-smi
```

I confirmed that nvidia-smi worked.

How to use docker:

https://docs.docker.com/
Deno - A continuation of the JavaScript framework fad? 
Tags: deno, node, javascript
Published: 2020-05-23 09:00:53


TL:DR - Deno must change syntax in order for it to succeed, attempting to keep the original nodes target audience may cause so many issues in the future.

Ah Deno, You have been spammed all over my feed in every social media possible. The new kid on the block came with a very cool toy everyone wants to play with. But is it really a cool toy ? or the same toy with a cool new paint on it? 
Assuming most Node.js  developers are well annoyed with the fad of Javascript UI SPA/SSR frameworks (For SEO Reasons: Angular/React/Vue ) and we all had our conversations and arguments of which one is better and why.

This Fad has been slowly been passed from the client to the Server side of JavaScript, Node.
With libraries like Nest/Curve-ball that essentially are a nice wrapper for an express/koa sever application. So what is different with Deno? 
I won't go in detail about what is Deno, but I would like to talk about who is Deno, Ryan Dahl Is the original Node.js developer and maintainer for a while. He left the Node.js project and now he is back in attempt to fix all the issues he sees in Node.js today (ahem ahem promises). 
So how do you fix something but keep the same target audience ? You keep the syntax… 

Deno has its quirks but writing a small Deno app (since that's all that can be done at the moment) is Just like Node, and I mean JUST LIKE NODE. 
I can already hear the "But you add async to for loops" comment. But that goes around the entire Idea of single responsibility, Let a single function deal with that, that already has the async () => {} and loop inside. 
Deno is very young and has the potential to have a killer ideas. but for that to happen syntax must change, or at least adapt. And here is an example of what I mean: 
Lets take Python's print command, which writes to the console (console.log() for JS ), We are all aware of that Print does, what arguments it takes and what to expect as an output. But if i create "Xython" (Just a joke, chill…. ) And say that Print() will look for a physical printer and print its arguments, As a user of the command you will be pretty shocked and confused as why a command so similar does something so different. 
The Python example is extreme, but its passes the idea of what In my opinion is the initial flaw of Deno. If you keep the syntax and change under the hood this may cause a huge confusion in the community… and so many errors/issues if someone tries to convert his/her app to a Deno app.

A new coding language is a blessing. It creates diversity in the community and new options to create new or better things, but its a hard sell sometimes. Rust and Go are two perfect examples of this. Here to fix specific issues but it has a "steep" learning curve do to syntax learning which can be annoying at times, especially with JS developers(callbacks, Loosely typed, etc… ).

Javascript frameworks are "just the opposite" the syntax is different but under the hood its pretty similar (or at least the concepts are similar).

I would love to hear your thoughts about Deno on this aspect
Reset Password Form In Bootstrap
Tags: css, html, beginners, design
Published: 2020-05-23 08:59:53



Here we made Reset Password Form In Bootstrap with the help of HTML and some CSS properties. Here used a simple bootstrap form element with one single button and HTML heading tags.



For making responsive we used media queries and also here we modified bootstrap classes with the help of CSS properties. Also, we used bootstrap flex class and justify/height class to make this element center.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Download Source Code](https://w3hubs.com/reset-password-form-in-bootstrap/)
Unity3D New Input System
Tags: unity3d, input, code, tutorial
Published: 2020-05-23 08:57:51


Hey!
In this tutorial I'll go through the basics of the new Input System in Unity3D,

This tutorial is for Input System 1.0.0, And might change in the upcoming versions of this system

{% youtube QPRFtdRJ5_M %}

Important links from this video:
https://docs.unity3d.com/Packages/com.unity.inputsystem@1.0/manual/Actions.html#creating-actions
https://docs.unity3d.com/Packages/com.unity.inputsystem@1.0/manual/Migration.html
https://docs.unity3d.com/Packages/com.unity.inputsystem@1.0/manual/HowDoI.html
https://docs.unity3d.com/Packages/com.unity.inputsystem@1.0/manual/Testing.html

Enjoy :)

> Like this post? 
> Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)