teleren/devto huggingface dataset:
DO Hackathon: Official Submission
Tags: dohackathon
Published: 2021-01-09 19:59:46

## What I built
I built a portfolio website showcasing my skills and experience. Check it out at [denniskrasnov.com](https://denniskrasnov.com)!

### Category Submission: 
Personal Site/Portfolio

### App Link
[denniskrasnov.com](https://denniskrasnov.com)

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

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

### Description
[denniskrasnov.com](https://denniskrasnov.com) is a portfolio website showcasing my skills and experience.

Features custom art and branding for a personal touch.

I designed the website myself, with an equal focus on performance, design, and accessibility. 

See my first post in this series to find out how how I designed my portfolio, my second post to see how it's deployed, and my third post to see deployment benchmarks.

### Link to Source Code
[github.com/Dennis-Krasnov/Portfolio](https://github.com/Dennis-Krasnov/Portfolio)

### Permissive License
[MIT License](https://github.com/Dennis-Krasnov/Portfolio/blob/master/LICENSE)

## Background
(What made you decide to build this particular app? What inspired you?)

Building a personal brand is important for my career. In 2020, an online presence is non-negotiable, and a portfolio website allows me to showcase my skills and experience in a way that is not possible via the traditional resume format.


### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)

My website is written in Svelte for its simplicity and performance, while Sapper compiles my website into a static bundle. See my first post for more details. 

DigitalOcean's App platform can host and distribute the static bundle on a content delivery network, which simplifies devops and minimizes latencies. Check out my second and third posts in this series for more info :)

### Additional Resources/Info
[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/Dennis-Krasnov/Portfolio/tree/master&refcode=4ed2be2d0a5c)

You can use the Deploy to DigitalOcean button to deploy this repo directly to App Platform :)
DO Hackathon: Devops Architecture
Tags: dohackathon
Published: 2021-01-09 19:59:31

Once we have a portfolio website ready, we need to host it to make it publicly accessible on the web. Devops, among other things, is the automated process of pushing code onto production hosting.

In this article, I will cover two ways (out of many) to do hosting and devops for a static website.

## Method 1 - DigitalOcean Managed Kubernetes
This version of the website is currently hosted at [krasnov.dev](https://krasnov.dev).

**Steps:**
1. Setup a Kubernetes cluster and container registry
1. Apply Kubernetes deployments, services, ingresses, etc.
1. Commit and push code
1. Within a CI/CD tool:
  1. Build an OCI image
  1. Push the image to a container registry
  1. Update the Kubernetes cluster to use the new image

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

**notes:**
* Much harder than it looks, Kubernetes is notoriously complex
* It takes a minimum of $10/month for a single node and $10/month for a load balancer on DigitalOcean
* Kubernetes can be used to host just about anything, it's amazing if you're planning to host many other applications

## Method 2 - DigitalOcean App Platform
This version of my portfolio is currently hosted at [denniskrasnov.com](https://denniskrasnov.com).

**Steps:**
1. Hook up App Platform (starter variant) to GitHub
1. Tell it how to build
1. Tell it which output folder to use
1. Commit and push code

OR

[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/Dennis-Krasnov/Portfolio/tree/master&refcode=4ed2be2d0a5c)

Just click the button to get started.

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

**notes:**
* This is about as simple as it gets, definitively does "Get apps to market faster" as promised
* You can host 3 sites for free, then at $3/month for more, not bad for what you get
* App Platform also supports hosting services and databases, which is enough for most use cases

## Conclusion
That covers the two ways that I've hosted my portfolio. Between the two, DigitalOcean App Platform is by far the easier option.

Next up, I will benchmark both these deployment options.
Authme Web
Tags: dohackathon, showdev, vue, ionic
Published: 2021-01-09 19:55:33

## What I built:



* Authme Web. Authme Web is the Web/PWA version of my cross platform two-factor authentication desktop app [Authme](https://web.authme.levminer.com).

### Category Submission: 

* Built for Business

### App Link:

* [Authme Web](https://web.authme.levminer.com)

### Screenshots:

* Desktop: ![Authme Web](https://dev-to-uploads.s3.amazonaws.com/i/wad8y5pnetuh4yp7jayg.jpg)

Mobile: ![Authme Web Mobile](https://dev-to-uploads.s3.amazonaws.com/i/8lgauh8ll6cnz7j63wsk.jpg)

### Description:
 
* Web app for Authme the cross-platform two-factor authentication app.

* See all of your 2FA codes in your web browser. 

* Save your codes inside your browser secured by AES256 encryption.

* It's a PWA so you can install it on your phone for better experience.

* Use this [Sample file](https://github.com/Levminer/authme/blob/main/sample/authme_import_sample.zip?raw=true) or import from [Authme](https://github.com/Levminer/authme)

### Link to Source Code:

[Source](https://github.com/Levminer/authme-web/)

### Permissive License:

[MIT](https://github.com/Levminer/authme-web/blob/main/LICENSE.md)

## Background

* I made Authme a while back, but I needed to see my codes on my phone or in a browser. So I made this Web/PWA version of my desktop app.

### How I built it 

* It's built on top of Ionic framwork with Ionic components. I decided to use it with Vue because I alredy know some things about it. 

* Beacause it's a standard Vue app after build, I'm simple deploying it as a static site on App Platform.

### Additional Resources/Info

* For testing use this: [Sample file](https://github.com/Levminer/authme/blob/main/sample/authme_import_sample.zip?raw=true)
Pablito Planeta, your design astrologist
Tags: dohackathon
Published: 2021-01-09 19:53:08

## What I built
Pablito Planeta is a Zodiac Prediction app based on the Pablito Planeta series on Instagram by Pablo Stanley. As soon as I saw those videos, I was smitten, and wanted to web-appify them real quick. Also, I still had no idea of what to build for this Hackathon.
Thankfully, Pablo responded in a jiffy, approving the idea and for me, giving the proverbial green flag.

With this app, you choose your Zodiac, and voila, you have your predictions in front of you.

### Category Submission: 
Program for the People, because well, you're predicting, for the people, right. Right?

### App Link
Find the app right here - [Pablito Planeta Web App](https://pablito-planeta-noinm.ondigitalocean.app)

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

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

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

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

### Description
The app is a fun place for users to see their Zodiac predictions for their Signs, along with their Design amulet, Google Font, and Color.

### Link to Source Code
[Pablito Planeta on Github](https://github.com/geekboysupreme/pablito-planeta)

### Permissive License
MIT License[(Link to License)](https://github.com/GeekBoySupreme/pablito-planeta/blob/main/LICENSE)

## Background
I was super stoked by Pablo's series on Design Astrology and wanted to hack together a Web-based interface for folks to see, learn, and share the predictions for them.
Also, it was really cool to hack with vanilla Javascript after long.

### How I built it 
This is a static app, and I used DigitalOcean's static site deployment tools to set up an integration with the Github repo. Plus, this is a Design aesthetic I had been planning to use for a long time. 

### Additional Resources/Info
[Pablo Stanley's Instagram](https://www.instagram.com/pablostanley/?hl=en)
What is Entry — Webpack 5
Tags: webpack, javascript, react, angular
Published: 2021-01-09 19:38:24

**Before continuing the article, please refer to the below link if you have missed the introduction to webpack 5**

[https://dev.to/yadhus/introduction-to-webpack-5-5fhm](https://dev.to/yadhus/introduction-to-webpack-5-5fhm)


##**What is entry**##
Entry is a property that indicates webpack which module(s) / file(s) it should use to _begin building_ out the internal dependency graph(s) of the project / application.

##**Three syntax of entry**##
1. Single entry
2. Multi-main entry
3. Object entry

##**Single entry**##
The single entry syntax points to **one file path** to start building the dependency graph of the project / application. It is a great choice when you are looking to quickly setup a webpack configuration for an application or tool with one entry point (i.e. a library)

####Usage####
entry: String

```javascript
module.exports = {
  entry: "./src/index.js"
}
```

##**Multi-main entry**##
The multi-main entry syntax points to **multiple file paths**. Its creates **separate dependency graphs** based on these paths and finally get combined or merged into a single file.

####Usage####
entry: [String]

```javascript
module.exports = {
  entry: [
   "./src/index_1.js",
   "./src/index_2.js"
  ]
};
```

##**Object entry**##
The object entry syntax **creates separate files for each key value pair** in the entry object. It allows you to customize the chunk / bundled file name (key name). This is the most scalable way of defining entry / entries in your application.

This is a popular technique used to separate concerns by environment, build target, and runtime.

####Usage####
entry: { [entryChunkName] : String }

####Usage####
entry: { [entryChunkName] : [String] }

```javascript
module.exports = {
  entry: {
   adminApp: "./src/admin.js",
   homeApp: ["./src/home_1.js", "./src/home_2.js"]
  }
};
```

####The webpack configuration file specifically to highlight entry property:####

{% gist https://gist.github.com/yadhus/670ccbae8166ba1be73d7aaf739b15be %}

###**Note**###
You can pass empty object to entry when you have only entry points generated by plugins (will see more about this in detail in the upcoming articles).

```javascript
module.exports = {
  entry: {}
};
```

##**GitHub Repo Link**##
[https://github.com/yadhus/What-is-Entry-Webpack-5](https://github.com/yadhus/What-is-Entry-Webpack-5)

##**Next article**##
[https://dev.to/yadhus/what-is-output-webpack-5-cho](https://dev.to/yadhus/what-is-output-webpack-5-cho)

##**References**##
[https://webpack.js.org/guides/entry-advanced/](https://webpack.js.org/guides/entry-advanced/)
[https://webpack.js.org/concepts/#entry](https://webpack.js.org/concepts/#entry)
[https://webpack.js.org/api/](https://webpack.js.org/api/)
[https://webpack.js.org/configuration/](https://webpack.js.org/configuration/)
Extending Array.prototype
Tags: javascript, typescript, array, prototype
Published: 2021-01-09 19:36:05

I think the Array API is awesome. It's great. In fact, there's little that can't be done with what we have at our disposal. Filtering, mapping, reducing, pushing new items to the array, splitting, accessing individual elements... You name it. It's all there.

The only problem is that they are super generic. For example, if you'd like to get the tail of an array you'd have to rely on `splice`, which has quite a vague syntax. One that definitely does not say that what you're interested in is the tail.

There are more examples of that and not even that obvious. For example if you'd like to just sort the array you'd need to provide a comparison function. However, in that case you'll get the original table sorted - something you don't necessarily want. If, however, you'd like to get a copy that is sorted then you need to resort to constructs like

```
[...array].sort((a, b) => ...)
```

It's not much but if you need to do it many times in the code then it becomes obtrusive and reading that kind of code is difficult. Same thing for calculating min/max/median/average of values stored in the array. It just doesn't look readable.

This is why I have created the [`array-prototype-functions`](https://www.npmjs.com/package/array-prototype-functions) library. It augments the `Array.prototype` adding those functions that are commonly used.

For example, there's a `[1, 2, 3].sum()` function that will, well, return 6. Consequently, there's also a `min`, `max`, `median` and `avg` functions provided for convenience. `min`, `max` and `median` works also for strings by default comparing items using the `localeCompare` function.

You might ask what would happen if what you've had in the array are objects and not just values? Well, each of those functions accepts also a field name to extract or (in the extreme cases) a mapping function that should return the value for comparison.

There are also two additional functions that I found very useful and pretty unintuitive to implement: `groupBy` and `uniq`. `groupBy` takes a field name or mapping function and produces an object that has the values as keys and a list of matching objects as values. `uniq` is kind of self-explanatory: it returns unique values of a given field.

Using the library doesn't mean you have to include all the augmentation functions at once. The library is designed in such a way that you pick and choose what's of interest to you. For example, to just use the `sortBy` function:

```
import 'array-prototype-functions/sort-by'
```

The library provides of course full type information and is itself written in TypeScript.

I hope you'll enjoy using it - I know I am. I wrote those functions so many times previously in so many projects to increase the readability of the code it came to the point where fixing errors is just not practical anymore. Now you and I can pick it off-the-shelf.
A surprising thing happened when worked as a backend (old-time frontend)
Tags: todayilearned
Published: 2021-01-09 19:19:22

Just sharing with you guys...

I've been a frontend for the past 7 years or so. During that time I did a lot of so-called "full-stack" development where I do everything from the query of the DB to the front end CSS.

Recently, I've started working on a pure backend role. The most surprising thing that happened to me what I opened the browser to debug my work. I realized I don't need the browser! 🤯

A real internal paradigm shift...
Emask Notifier - DigitalOcean App Platform Hackathon
Tags: dohackathon, php, supervisor, mask
Published: 2021-01-09 19:11:26

---
title: Emask Notifier - DigitalOcean App Platform Hackathon
published: true
description: My Emask notifier submission to the DigitalOcean App Platform Hackathon!
tags: dohackathon, php, supervisor, mask
cover_image: https://17125148.s21i.faiusr.com/2/ABUIABACGAAg4Jb89wUok5npxQIwwAw4hAc.jpg
---

## What I built

Emask Notifier is a background worker that running a process and managed by Supervisor daemon.

This notifier can monitor this [Emask website](https://emask.taiwan.gov.tw/msk/index.jsp) and check whether the e-Mask can be available for buying.

![Emask Website](https://dev-to-uploads.s3.amazonaws.com/i/x62erbw7ohh2hh1y6z9g.png)

![Emask Website(EN)](https://dev-to-uploads.s3.amazonaws.com/i/7c6sjk45ykcahsgtizhi.png)

At this moment, it doesn't have the public API service for everyone because it's only for people in Taiwan.

To be private usage, it's only for my friends to let them receive the notification message and know the masks are available to buy.

In the future, it will have the contact form to let people in Taiwan can allow this notifier sends notification via Vonage SMS API to specific cell-phone number.

### Category Submission: 

Program for the People

### App Link
At this moment, it's not available because this is the notifier and it's running as the background process on the targeted operating system.

### Screenshots

If someone is in the default phone lists, it will get following SMS message:

![SMS (TW)](https://dev-to-uploads.s3.amazonaws.com/i/13e254o4ug4d16hxipg3.jpg)

### Description

If developers want to setup own notifier for this eMask notifier, it's very easy to build.

And the completed README is available [here](https://github.com/peter279k/emask-notifier/blob/master/README.md#emask-notifier-for-notifierphp-installation).

### Link to Source Code

{% github peter279k/emask-notifier %}

### Permissive License

The license is under MIT and available [here](https://github.com/peter279k/emask-notifier/blob/master/LICENSE).

## Background

When the COVID-19 is ravaging the world, the mask is very important for people to avoid droplet infection.

Fortunately, the Taiwan government provides the e-mask website for Taiwan people to buy ten masks per two weeks.

However, the website doesn't have the subscription service that sending the notification via SMS to people and notify them buying masks.

That's the main reason why I build this notifier worker and setup the process running on the operating system :).

### Additional Resources/Info

I'm grateful for these services to help me to complete this notifier:

- [Vonage](https://www.vonage.com)
- [DigitalOcean](https://www.digitalocean.com)
- [PHP](https://www.php.net)
- [Supervisor](http://supervisord.org)
- [Cronjob](https://www.gnu.org/software/mcron/manual/html_node/Crontab-file.html)
Hackathon submission
Tags: dohackathon
Published: 2021-01-09 18:53:58

## What I built
An auto repair shop management system.

### Category Submission: 
Built for Business

### App Link
[Link](https://auto-repair-saas-3exc8.ondigitalocean.app)

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

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

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

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

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

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

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

### Description

This is a system designed to help auto repair shops manage and keep track of jobs, clients, vehicles, etc. You can read a full description on the project's [Readme](https://github.com/wangonya/auto-repair-saas/blob/main/README.md).

### Link to Source Code

[Link](https://github.com/wangonya/auto-repair-saas)

### Permissive License

[Apache License 2.0](https://github.com/wangonya/auto-repair-saas/blob/main/LICENSE)

## Background

I have a friend who owns an auto repair shop. Process are being handled manually and as the shop grows this is getting out of hand. We had a conversation about coming up with a simple system to keep track of clients and jobs and this Hackathon gave me the perfect platform to get this done. 

I'll continue improving the system to a point where it's fully usable by him i.e reduce any manual labor on their side as much as possible. Later on, this can be expanded to a few other local shops.

### How I built it 

I used Django + Postgres to build this. I followed the simple instructions on the [sample django](https://github.com/digitalocean/sample-django) repo provided by Digital Ocean. I also added integration with Sendgrid for emails.

I had never used Digital Ocean for anything before but I didn't face any issues with the deployment.

I learned my way around the platform and I see myself using it for my other side projects.

### Additional Resources/Info

- To get started quickly, you can generate dummy data on the jobs page. This will create jobs, contacts, vehicles and staff to work with.

- Apparently, Safari browser doesn't show a dropdown calendar on HTML date fields natively like other browsers. I'm yet to fix this so if you'll be testing the system on Safari, the date fields on the job creation form will appear like regular text fields.
Day 7 :100DaysOfCode
Tags: 100daysofcode, productivity, flutter, programming
Published: 2021-01-09 18:53:41

Started the day with leetcode problems..

did few
then some minor changes in my project
started building my portfolio today using (html,css,js).

didnt qualified for a hackathon finals :(
ending the day with few leetcode problems.

PS)-one week out of 100 days just got finished.
Kudos to me:)

You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
[Go] unusual: move "if err !=nil" into struct methods
Tags: go
Published: 2021-01-09 18:52:50

"if err != nil" is a pain in golang error handling, you may need to write the following code many times.
```golang
if err != nil{
     return err
}
```
## Common case ##
For example, if we'd to execute some actions, the error check comes after each function.
```golang
func DoActions() error {
	err := Action1()
	if err != nil {
		return err
	}
	err = Action2()
	if err != nil {
		return err
	}
	err = Action3()
	if err != nil {
		return nil
	}
	return nil
}
```
## With error handling function"
The idea to handle error explicitly is good, but it also makes the code longer and noises in readability. One way very usually used to reduce lines of code and keep readability is to have a error handle function **in some cases**.
```golang
func DoActions()  {
	err := Action1()
	handleError(err)
	err = Action2()
	handleError(err)
	err = Action3()
	handleError(err)
}

func handleError(err error) {
	if err != nil {
		log.Fatal(err)
	}
}

```
## Error check in bufio.Scanner ##
Here is another way to reduce code of error check by method. The idea is to use error field inside struct for methods. One example you can find in the [bufio.Scanner](https://golang.org/pkg/bufio/#Scanner)
```golang
package main

import (
	"bufio"
	"fmt"
	"os"
)

func main() {
	scanner := bufio.NewScanner(os.Stdin)
	for scanner.Scan() {
		fmt.Println(scanner.Text())
	}
	if err := scanner.Err(); err != nil {
		fmt.Fprintln(os.Stderr, "reading standard input:", err)
	}
}
```
The Scan method doesn't return any error, the internal error  of struct is checked after for loop. If going to the Scan() method, we can see the Scan() only set internal error and use internal error as flag. 

## Rewrite first example with struct error field ##
let's take the struct error field idea to refactor first example.
```golang
func DoActions() error {
	ag:=&ActionsGroup{}
	ag.Action1()
	ag.Action2()
	ag.Action3()
	if ag.Err() != nil{
		return ag.Err()
	}
	return nil
}

type ActionsGroup struct {
	err error
}

func (ag ActionsGroup) Err() error {
	return ag.err
}

func (ag ActionsGroup) Action1() {
	if ag.Err != nil {
		return
	}
	// if something wrong, set ag.err
}

func (ag ActionsGroup) Action2() {
	if ag.Err != nil {
		return
	}
	// if something wrong, set ag.err
}

func (ag ActionsGroup) Action3() {
	if ag.Err() != nil {
		return
	}
	// if something wrong, set ag.err
}
```
Obviously it doesn't reduce the lines of error check, instead, just encapsulate error check into each method, and make **code block for high level business logic** clearer and less code for error handling.
No silver bullet. This can't be applied to all cases, but if you need error check between *methods of one struct* or can group functions with high cohesion into *struct*, it could be an alternative way for you.