teleren/devto huggingface dataset:
How to live without Docker for developers - Part 1 | Migration from Docker to Buildah and Podman
Published: 2021-01-10 08:02:58

You already know that Kubernetes is going to drop support for Docker. Starting from version 1.20 that was recently released in December 2020 you will see a deprecation warning for Docker. Docker runtime support will be completely removed from Kubernetes in version 1.22 that will be release in late 2021. After that you will need to switch to one of the other compliant container runtimes, like containerd or CRI-O inside your clusters. Despite both containerd and CRI-O know how to pull docker images and run them and Docker Images Manifest V2 and OCI image specification are almost the same, nobody knows how long Docker images will be supported.

As developers, we need to be prepared to build either docker or OCI images in just a one click and get used to living without Docker.

Therefore I decided to create a series of videos with the common title - How to live without Docker for developers.

The [first episode](https://youtu.be/Fl0iLoAMdzc) is published. In this episode I'm going to prepare prerequisites for the entire series. I will create a simple web app using dotnet 5 and build a Dockerfile for my application. Then I'm going to build an image with Docker. After that, I will show you how to build a container image with Buildah using the existed Dockerfile file just to show how easy it is to migrate your build process for already existed applications from Docker to Buildah.

Please check it out and subscribe to my channel to be notified when my new episodes will be released.

Thank you in advance.

Link to video: [https://youtu.be/Fl0iLoAMdzc](https://youtu.be/Fl0iLoAMdzc)
Day 9 Challenge
Tags: challenge, webdev, 365daysofcoding, frontend
Published: 2021-01-10 07:45:31

Create a page with a sign up form. It can have any input but you must require, first name, last name, phone number and email. It should also have a section for OAuth (allow for sign in with Facebook, Google, etc.) The email must be a valid email and phone number should be formatted.

**Part two:** Style your form and page! Make it pretty!
Map Quiz: States of India
Tags: dohackathon
Published: 2021-01-10 07:43:03

## What I built

A Map quiz for identifying states of India built primarily for the [10 foot user experience](https://en.wikipedia.org/wiki/10-foot_user_interface).

### Category Submission: 

Random Roulette

### App Link

https://maps-quiz-s79oh.ondigitalocean.app/

### Screenshots

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

### Description
 
Provides a simple quiz for identifying various states of a country. By default it shows the one for India (see background section below)

I intend to add support for other countries and some work for this already available locally by accessing urls like http://localhost:3000/USA

### Link to Source Code

https://github.com/anaynayak/maps-quiz

### Permissive License

MIT


## Background

With an ongoing pandemic, and my son's recent interest in a similar Geography quiz app, I wanted something that could help him get introduced to the various states of India. 

I wanted something that we could put on a Fire TV Stick and also improve his understanding of Geography over time. It isn't fully ready but something that I could hack together quickly.

### How I built it 
I've used DigitalOcean before but the App Platform was new. Was happy to see a seamless experience to deploy a static website to production. 

I wanted to build something in React since it is also something that I now use at work. The 10 foot experience introduces some new challenges but was made much more simpler thanks to all the OSS products out there.

### Additional Resources/Info
* Built using this [amazing template for building fire tv apps](https://github.com/bobinrinder/react-fire-tv-web-app-example)
* https://github.com/mtraynham/gadm-topo for all the topojsons.
Playing Cards Discord Bot
Tags: dohackathon, go, discord
Published: 2021-01-10 07:40:55

## What I built
A Discord bot that lets users play with a standard 52-card deck of playing cards.

### Category Submission: 
Random Roulette

### App Link
https://playing-cards-bot-rvpup.ondigitalocean.app/

### Screenshots
Drawing cards and changing the art style

![Drawing cards](https://dev-to-uploads.s3.amazonaws.com/i/7o4n0w3u6bjnc3gfko0r.gif)

Playing a game of High or Low

![Game of High or Low](https://dev-to-uploads.s3.amazonaws.com/i/evxspftxijbdhxd8647g.gif)

### Description
This bot gives Discord servers a deck of playing cards that anyone in the server can use. You can draw cards, shuffle the deck, change the art style of the cards, and play a game of High or Low with others.

### Link to Source Code
https://github.com/svntax/PlayingCardsBot

### Permissive License
MIT

## Background
I've been using Discord for 4 years now, and seeing all the different kinds of bots out there made me want to try making my own. I've also been interested in learning Go for a while now, so making a Discord bot with Go seemed like a great project idea for me to learn from, and this hackathon was a good opportunity to do so.

### How I built it 
The frontend is a simple, responsive landing page showing the bot's features and commands along with a button to add the bot to your own Discord servers. I used HTML and CSS only.

The backend consists of the bot itself and the standard Go packages for hosting card images and the frontend website. I used the [DiscordGo](https://github.com/bwmarrin/discordgo) package for the bot, which provides Go bindings for the Discord API.

Since this was my first time using Go but not my first time making an app, I mainly had to learn language-specific things, like how to set up a Go project, how to use the `net/http` package to serve files, and how to use goroutines to run multiple card games at a time. The DigitalOcean App Platform made the deployment process much easier for me because I didn't have to worry about building the app and figuring out how to run the build as a service on a Linux server.

### Additional Resources/Info
The two card image sets used are CC0 licensed (public domain) and come from Kenney. You can find them here:
- https://www.kenney.nl/assets/boardgame-pack
- https://www.kenney.nl/assets/playing-cards-pack
Open Source Project 
Tags: opensource, github, react, machinelearning
Published: 2021-01-10 07:38:53

Codetrophs offers a new technology which is subdivided into 2 categories. The initial one is based on the organisation and activity of the project that translates to the projects that have a higher rating on GITHUB. The latter is the language on which the programming is written. 
Another distinguished point is the application distinction feature that we provide to our users. This entails the bifurcation of projects based on the categorical arrangement in the language in which the code is written and its implementation for example kotlin links to android as python links to machine learning. The user will be able to save the repository that he/she wishes to explore more in their dashboard. The UI provides the user with the number of PR’s and issues in the repository that he/she is viewing. Moreover, for web development projects containing frontend code viewed on the platform and has a frontend to it the user.

Github : https://github.com/CodeTrophs
LinkedIn : https://www.linkedin.com/company/codetrophs/
Discord : https://discord.gg/HYPt5RX
Telegram : https://t.me/codetrophs

Work on Open Source Project ( Join Slack ) : https://join.slack.com/t/codetrophs/shared_invite/zt-kvyx3l41-hY9_d7OhMpkWoM68RBk7WQ
The night owl's guide to 6 am
Tags: night, awakethewholenight, guide
Published: 2021-01-10 07:36:57

So, you chose to be awake the whole night... It's not gonna be easy.

#Step 1

Get some sleep before pulling an all-nighter. If you don't get enough sleep, you're gonna sleep before you know it. You need to give your **brain** enough rest.


#Step 2

Ok... It's 11 pm. If you have an important job to do tomorrow then, you should probably goto sleep. Maybe you still want to stay awake? 
You can trick your **brain** to stay awake but turning on the light and drinking lots of water. So now, you're basically a plant (*maybe?*).  If you really tired but still don't wanna sleep, get some coffee. 

#Step 3

It's 1:00 am in the morning. You're soooooo tired that you can barely function. It's good idea to take a power nap for about 15 minutes. Just don't sleep for more that 30 minutes cuz you're probably gonna wake up at 11 am in the morning. This is you're final chance to sleep. If you goto sleep after 1:30, you will wake up pretty late and end up missing your office/school (I go to school). 

#Step 4

At 3 am in the morning you should get up from your bed and maybe do some jumping jacks and pushups. (Just don't make a lot of noise if you are illegally pulling an all-nighter. If you get busted, don't blame me 😂).

#Step 5

It's 4 am and I am giving you an out-of-out (💯). Just don't close your eyes to imagine yourself doing heroic things or you will end up going to sleep. But most importantly **Just stay A-W-A-K-E !**.

#Step 6

Now it's 6 am (See what I did here😁). Start doing something to keep you busy and get yourself a cup of coffee (Or maybe 3 ?? 😆)

#Step 7

Yaaaaaaas,  it's finally 7 in the morning. Brag to your friends that you stayed up the whole night😎. Just don't stay awake for more than 2 days in a row. (Believe me, I've tried it. Tis too dangerous).


You reached the end of this article. Well done ! 
###Share this article to make my day.


> "Just stay awake the whole night" - inspired by me, written by me.
Differences between JavaScript Map and Object
Tags: javascript, computerscience, beginners, codenewbie
Published: 2021-01-10 07:33:54

**Map** is a part of keyed collection in JavaScript. This means that this data structure holds data in the form of a key along with its corresponding value. 

**Object** is a collection of properties and each property has a key along with a corresponding value. 

Does this mean both map and object are similar to one another??
Well, both let us set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Due to this reason, Objects were previously used as Maps. But there are important differences that make using a Map preferable in certain cases.

**1.Based on the type of key:**

=> **JavaScript Map** allows you to have have a key-value pair in which the key could be of **primitive type, an object or even a function**

=> **Object**, on the other hand allows you to have a key-value pair in which the key can only be of the type **String**. So, even if you assign a key of type number, it will be converted into a string.

**2.Based on the way we can iterate on them:**

=> **Map** is a built-in iterable in JavaScript, which means you can loop over every element in the Map using the forEach loop.

=> **Object**, on the other hand is not iterable. To loop over every property in the Object, we need to get hold of either entries, keys or values which are returned as arrays and then possibly iterate over them. 

**3.Based on the way we get the size:**

=> You can get the size of a **Map** easily using the size property available. This returns the total number of entries in the Map.

=> There is no direct method or property to find the size of an **Object**. The number of properties in an Object must be determined manually.

**4.Based on the way you convert them into a JSON string:**

=> Since **Map** is a pure hash table, there is no support for JSON directly. You need to provide your own parser to convert Map into a JSON string.

=> With **Objects**, you get a direct support to convert them into a JSON string using JSON.stringify(). 
[*Short explanation of JSON at the end*]

**Other Differences:**

=> The keys in Map are ordered while keys added to Object are not. Thus, when iterating over it, a Map object returns keys in order of insertion.
=> A Map may perform better in scenarios involving frequent addition and removal of key pairs.

####**What is JSON?**
JSON is a text-based data format following JavaScript object syntax, which was popularized by *Douglas Crockford*. It is useful when you want to transmit data across a network and it is basically just a text file with an extension of .json, and a MIME type of application/json.

Some common operations include:

1.**Parsing**: Converting a string to a native object.

**JSON.parse(text)**

2.**Stringification:** Converting a native object to a string so it can be transmitted across the network.

**JSON.stringify(object)**

Thank You!
Micro app to render your JSON resume
Published: 2021-01-10 07:28:06

Last time I've quickly made a [React component](https://tsvbits.com/json-resume) to render JSON resume.
Now I've extended [the CV page](https://tsvbits.com/cv) to consume external resumes making the page to be a micro application. 
And now you can specify `src` query parameter to specify your resume.
You can simply store your resume as Github Gist like [mine one](https://gist.github.com/sergeyt/e0b12ea349dcbb7dd58bc80113eb43e0).
For example [src=c9dcfa1b37dec07fb2ee7f36d7278105](https://tsvbits.com/cv?src=c9dcfa1b37dec07fb2ee7f36d7278105) is an url to display [Thomas Davis's](https://github.com/thomasdavis) resume.

Next possible steps:
* support more sections from JSON resume
* make the page to be mobile friendly
* make the page to be ready for printing

Enjoy! EOF :smile:

Link to [original post](https://tsvbits.com/cv-micro-app)
React Hooks ⚓: Part 1
Tags: react, beginners, tutorial, codenewbie
Published: 2021-01-10 06:46:14

**What is a HOOK?**
 A Hook is a special function that lets you “hook into” React feature. These can't be called from a regular JavaScript function, they are called from react function components or a custom made hook (which we are going to learn in the upcoming days)

**Types of Hooks**
In general, we have two types of Hooks which use very frequent:
1. useState
2. useEffect


**UseState**
UseState is a Hook that lets you add React state to function components. It enables us to see real-time updates. You can think of an example such as when you take out the cash of an ATM machine, your balance gets updated in real-time (here I am not considering how the bank works in the background).

Declaring a state:

```typescript
const[balance, setBalance] = useState(I_S);
```
* It declares a “state variable”. 
* *I_S* is the initial state of our state variable. 
* The 1st passed argument is the state variable and the second is the function that updates the value of the state 
* Normally, variables “disappear” when the function exits but state variables are preserved by React.
* Where ever we want to render our component, we render it like this 
```typescript
{state_varibel_name}
```

**UseEffect**
Now as we have updated our state, that state will show its effect and we need to also take care of it. UseEffect state help to make it possible. 

Declaring an Effect function:

```typescript
useEffect(() => {
   // Any effect which we want to render or
   // is written here
  }, []);
```

* Placing useEffect inside the component lets us access the react variable
* The first argument i.e. the function is the effect of the hook
* The second argument is an array of states, i.e. all the state on which we want to show the effect, it can be empty too
* In case if there is no second argument like this  
```typescript
useEffect(() => {
    // Your Code......
});
```
  then the effect still also runs at least once, upon opening the page or on each refresh

**Example with code**
I have created a simple code, which has three state value1, value2, and sum which sums the value1 and value2.
```typescript
import "./App.css";
import { useState, useEffect } from "react";

const App = () => {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  const [sum, setSum] = useState();

  useEffect(() => {
    setSum(parseInt(value1) + parseInt(value2));
  }, [value1, value2]);

  const set1 = (e) => {
    setValue1(e.target.value);
  };

  const set2 = (e) => {
    setValue2(e.target.value);
  };
  return (
    <div className="field">
      <input type="number" placeholder="Value 1" onChange={set1} />
      <input type="number" placeholder="Value 2" onChange={set2} />
      <p>Sum = {sum}</p>
    </div>
  );
};

export default App;
```
[Go try yourself](is.gd/mWwb6d)
Get GitHub code [here](https://github.com/su-mit/sum-in-React)
Full Tutorial #3: Setting Up Express With Our First Route | Microservices Chat App Using React, Node.js, TypeScript and GraphQL
Tags: react, node, webdev, javascript
Published: 2021-01-10 05:43:54

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

Part 3 of the Microservices Chat App is here! In this episode, I set up Express inside of a Docker container, and connect it with the TypeORM instance and MySQL database that we set up in the previous episode.

{% youtube gHCeFTTcbAE %}

Happy coding!

Source code: [https://github.com/lucaschen/microservices-chat-demo](https://github.com/lucaschen/microservices-chat-demo)
Tools which help you to improve web app performance
Tags: react, angular, javascript, vue
Published: 2021-01-10 05:17:33

#1.Light House (Google)

Google Lighthouse is an open-source, automated tool for measuring the quality of web pages.I used google light house which really helps you to improve your app performance.

https://developers.google.com/web/tools/lighthouse

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


#2.GT Metrix

GTmetrix is a free tool that analyzes your page's speed performance. It's also a similar tool you can place you are url and check the performance.(now GTmetrix is powered by lighthouse)

https://gtmetrix.com/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9mt05xnumz1x764q5yh4.png)
Wow, 3 hours to do that?
Published: 2021-01-10 05:04:54

series: [“Ordinary Geeks Covid Tracker 3”]

Holy Canoly Batman, that was hard.  Had to work through some logic and thinking errors to properly get connected to my old database with ASP.NET Core.  It was easy, but we all know how it is. Sometimes you dont see it.  So now lets get our code up and running. I am migrating the models, redoing the database, and going through tuts.  I will build it on my old website, and, if I am lucky enough to have my DNS propagate this area, I will move on to putting it on Digital Ocean.
Writing Better JavaScript [console.log]
Tags: javascript, codequality, programming
Published: 2021-01-10 04:58:19

This is a summary for a video I've watched recently on how to avoid writing bad JavaScript by writing a better code.

console.log "stuff" !

If you have different variables :
const foo = {name: 'tom', age:30, nervous: false};
const bar = {name: 'tim', age:32, nervous: true};
const baz = {name: 'jin', age:34, nervous: false};

Bad Code :
So, the obvious way to log these variables is to do it one after the other

console.log(foo); 
console.log(bar); 
console.log(baz); 
But the main problem is that we don't know the name of the variables when it gets logged.
But there is a trick we can use called "Computer Property Names" where we add the variables to an object.

Good Code:
//1 Computed Property Names 
console.log({foo, bar, baz});
Not that this only reduces the code footprint, but it also tells us exactly which variable define this data.

Maybe this data is important, so we want to make it stand out with some custom CSS styling 
You can substitute data and also CSS styles by using a percent sign, so we will add %c and then have the second argument which is our CSS style.    
console.log('%c My Friends')

//2 console.table(...)

console.table([foo, bar, baz]);

One thing you might have noticed in the console is that the objects all share common properties so maybe we can display those as a table , this is really useful when you have an array of objects , just do console.table with the array

//3 console.time 
If you're benchmarking performane, you can actually keep track of the console, we'll first define our timer and we'll give it a name of looper :

let i = 0;
while (i < 100000) {i++} ;

We will have a while loop for a million iteration, and when that is done we will run console.timeEnd 
console.timeEnd('looper')

Keeping Track of time is good, but what if you need to know where a console.log originated from ?

// 4 Stack Trace Logs
Let us imagine that we have a function that deletes items from our database, and we want to make sure that we don't call it twice, accidently 

const deleteMe = () => console.trace('database deleted!')
deleteMe()

You can add a console.trace function and it will give you a stack trace for where it was called what defined it. 
If we run this code, we get consolelog.js that tells us the function was defined on line 35 and so on  


The End
DO Hackathon: Blokii Image Maker - Defining the Project
Tags: dohackathon, webdev, quasar, feathers
Published: 2021-01-10 04:57:40

### The App
The goal of the Blokii Image Maker is to allow users to easily generate an image that enables them to download and create a blog post with common tech frameworks they're writing about. 

### Defining the Features
As I planned this project, I wanted to define what _done_ would mean for this hackathon, otherwise I tend to use my time inefficiently. For the purpose of this hackathon, I decided _done_ would mean the following:

The user interface can do the following:
* Enable the user to add a title
* Enable the user to add a subtitle
* Enable the user to add a byline
* Enable the user to select a font family for the text
* Enable the user to change the fill and stroke color of the text
* Enable the user to add technologies
* Select image from Unsplash
* Download the final image from the website
* Deploy site as a static SPA

The server can do the following:
* Proxy unsplash searches and downloads from the frontend with the Unsplash API auth token
* Deploy to Digital Ocean as an App Droplet.

Once the goals were defined, I could start checking off the tasks one-by-one.

Let's see how things go...
iPad Air 4 (2020) Case Recommendations?
Tags: discuss, ipad
Published: 2021-01-10 04:54:45

I'm upgrading my super old iPad to the iPad Air 4 (2020). I've been doing a lot of research for a great cover, but there are so many brands and models.

In terms of criteria:

* I do not need a keyboard integrated. I have a small foldable one already.
* Shouldn't be too bulky, but still be able to protect the device really well
* All cutouts should expose ports, camera, mic, speakers really well. (There are some that don't)
* Be able to hold and protect an Apple Pencil

I've been leaning towards some cases from ESR, but I'm wondering if anyone has recommendations for a case with that criteria?