teleren/devto huggingface dataset:
Minimalist Portfolio - Preface
Tags: dohackathon, portfolio, design, webdev
Published: 2021-01-10 22:34:29

Last time I worked on my personal portfolio, I was working from a not-so-color-perfect display, with very less knowledge on web development and responsiveness.

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

This one's different, way different.

## The Plan
### My Layout Preferences
An ideal website in my opinion would be a no clutter, clean and minimal layout.  I also loved presenting data in the form of beautiful visualizations, and realised I could somehow bring these two concepts into my portfolio.

### Initial Ideation
I already had a vague idea that I would be majorly having a single focus point on the landing page, either my name in some fancy font / visualisation integration or a well edited image of me with some cool blend / mix effects. Latter was ruled out pretty quickly as I realized these two points - 
1. I did not want the viewers of the website to be fascinated by my `object-fit: contain` skills
2. My photoshop skills were very basic

So cool + minimal visualisation with my name was decided.

### Design Inspirations
* [Notion](https://notion.so)
* [Super](https://super.so/) - which had a amazing showcase section with super minimal but effective layouts
* [Covid-19 Tracker](https://www.covid19india.org/)

### Planned Functionalities
1. Dark mode toggle _(a necessity in all websites in 2021 in my opinion)_
2. Buttons to redirect to social media

### Planned Tech Stack
1. React - been using it for more than a year now, loving it
2. d3.js - didn't go for any charting / visualisation libraries as this gave me more power to customise everything
3. react-spring - spring based animations felt so much more natural than timing based animation
4. CSS modules - needed scoping so that I didn't have to worry about naming conventions, but didn't want to go for JS styling libraries as I didn't want any unneseccary overhead.


With all that decided, I started developing the landing page.
React Lists and State
Tags: react, javascript, tutorial, programming
Published: 2021-01-10 22:10:38

###### *This article is sponsored by [Fiverr](http://www.fiverr.com/s2/fa85266916) - Freelance to get extra income or become a full-time freelancer.*

This article is pending... Check out my other React articles above.

**Happy Coding!!!**

<a href="https://www.buymeacoffee.com/bellotech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a> 

{% user bello %}
#### Techstack | Fiverr
Techstack article, sponsored by Fiverr.
- Connect to freelancers with proven business experience.
- Get matched with the perfect talent by a customer service manager.
- Freelance to get extra income or become a full-time freelancer.

[Sign up](http://www.fiverr.com/s2/fa85266916) to find the perfect freelance services for your business or become a freelancer.

{% youtube EkPDLVqKkLc %}

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) what I do and push me to keep making free content.
Rust console pause
Tags: rust
Published: 2021-01-10 21:55:49

Use crate [pause_console](https://crates.io/crates/pause_console) or this function:
```rust
use std::io::{stdin, stdout, Read, Write};

fn pause() {
    let mut stdout = stdout();
    stdout.write(b"\nPress Enter to continue...").unwrap();
    stdout.flush().unwrap();
    stdin().read_line(&mut String::new()).unwrap();
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ot5pcjb3exdizcrsv7p4.png)
It's similar to c++ `system("pause")`
Digital Ocean Hackathon App: Console.Clear 
Tags: dohackathon, hackathon, gatsby, digitalocean
Published: 2021-01-10 21:45:48

## What I built
Console.Clear is a simple application that encourages you to take a 10-minute break. In the current chaos of the world, we often neglect how a simple break can help us refocus our energy and encourages us to invest in our own wellbeing. 

With console.clear, you can take a timed 10-minute break and let go of your thoughts, focus on your breathing, and allow your mind to wonder. 

### Category Submission: 
Program for the People

### App Link
https://consoleclear-w4wer.ondigitalocean.app/

### Screenshots
Desktop Version:
![Screenshot of consoleclear home page](https://dev-to-uploads.s3.amazonaws.com/i/0vi43mi5nma2csnipcb7.png)
![Screenshot of consoleclear timer page](https://dev-to-uploads.s3.amazonaws.com/i/rxjoc8tl9qhfsm0d6i1k.png)
Mobile Version:
![Screenshot for consoleclear for mobile](https://dev-to-uploads.s3.amazonaws.com/i/p6ag8lr9mvwncht07vmi.png)

### Description
The idea for console.clear came from browsing MDN one day and coming across this syntax! I hastily purchased the domain name and started gathering ideas, becoming very excited about starting a new project. The eventual goal for this side project is for it to become a source of information on mental wellbeing, allow users to relax through a guided meditation on the app, and take a break. As you can see from the current state of the app, I only managed to get as far as encouraging people to take a break! 

The project was started a week ago, with the illustrations taking up half of the week and leaving roughly 3 days to code the entire app! Exactly like a hackathon! 

### Link to Source Code
[Link to source code on Github](https://github.com/IkraP/consoleclear)

### Permissive License
Commons Clause

## Background
Mental health is becoming increasingly important in the current chaos of the world. I really wanted to create this app to help encourage people to focus on their internal well being.

### How I built it 
The app is built using [GatsbyJs](https://www.gatsbyjs.com/) as have recently built my own portfolio with it - www.chemtocode.co.uk
I used styled-components for the styling and GSAP for the animations. I love making illustrations so for console.clear, I used Affinity Designer and Figma for the design of the website. 
Fun Fact: I taught myself GSAP and Styled components for this project!
All hosted on [Digital Oceans App Platform](https://www.digitalocean.com/products/app-platform/)!

### Additional Resources/Info
- The idea for the design was something that I found on Instagram from the incredible team at (https://www.instagram.com/beio.ru/). I loved the idea of having a break timer so I asked permission before designing console.clear!
Geolocation with IP address
Published: 2021-01-10 21:36:31

# Intro
Writing code is cool and there is always new or different tech to work with which will make programming always interesting. Today we will be talking about geolocation. What is geolocation, well it refers to the geographical location of an Internet-connected device. We will be using this to track users' location that access your website.

# ipify API
Before we can find a user location we will need a way to access their ip address. The api we will be using to accomplish this task is called ipify API. This is a very useful and simple api to use to get a public IP address. Also it is free and has no cap on usage. To use this api all you have to do is make a request to “https://api.ipify.org” and you will get your public ip address.

# ipstack API
ipstack API is an API for software developers to search the geolocation of IP addresses. It is also one of the top geolocation api out today. This api is also easy and quite simple to use. First you will have to create a free account at “https://ipstack.com/product” after you will get an api key that you can use. Now all you have to do to get your location is make a request to `http://api.ipstack.com/${ip}?access_key=${key}` with the ip address and the key provided with your account. This will return an object with information to your address.

# DEMO
This is going to be a demo on how to code your application to get geo location after your api key is available to use. Allowing you to get the location of every visitor to your site.
```
const App = () => {
  const [input, setIput] = useState('')
  useEffect(() => {
    axios.get('https://api.ipify.org')
      .then(({data}) => axios.get(`http://api.ipstack.com/${data}?access_key=${key}`))
      .then(({data}) => setIput(`${data.city},${data.region_name} ${data.zip} ${data.country_name}`))
      .catch((err) => console.warn(err));
  }, [])
  return (
    <div>
      <h1>{input}</h1>
    </div>
  );
};
```

# Conclusion 
If you followed the step correctly then the result should look like this on the client side.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hrtn0hdlix0i87qr60v4.PNG)
DO Hackathon: Submission - Picture Memory App
Tags: dohackathon, digitalocean
Published: 2021-01-10 21:34:33

---
title: DO Hackathon: Submission - Picture Memory App
published: true
description: My submission to the DigitalOcean App Platform Hackathon!
tags: dohackathon #digitalocean
series: "DigitalOcean Hackathon"
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h6b36zqk10qh3c4s478r.png
---

## What I built

Built a simple picture memory app (game).

### Category Submission: 

Random Roulette

### App Link

https://picture-memory-do-vue-ebwff.ondigitalocean.app/

### Screenshots

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


![Random image](https://dev-to-uploads.s3.amazonaws.com/i/8tgedjxtokuylvzza4sm.png)


![Input capture](https://dev-to-uploads.s3.amazonaws.com/i/k7hrqkz638w5mojuxnfu.png)


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

### Description

App will display a random image for certain amount of time, then the user is prompted to describe what they saw in under 200 characters. The result view will display the captured input and original image so they can compare.

### Link to Source Code

https://github.com/klawrow/picture-memory-do-vue

### Permissive License

MIT

## Background

Like it was mentioned in my initial post of the series, the app was my wife's idea. The inspiration came from memory card games we play with our kids.

### How I built it 

This is the first time I use the DigitalOcean's platform. I have to say using the App Platform was easiest part of this project. I connected my GitHub repo, selected a pricing plan and deployed! :collision:

The app is built using Vue, which was a new framework for me to explore. Initially I was going to use Firebase for the backend. However, since I wanted to implement the "Deploy to DO" button I decided against using Firebase.

I used [Lorem Picsum](https://picsum.photos/) for getting the random images and used Axios to get the source URL. This was so I can render the image on the Result view.

### Additional Resources/Info 

Want to send a huge thanks to DEV and DigitalOcean for hosting this hackathon, I learned a lot along the way. I'm already thinking of ways to improve my app and other cool projects I can build using the DO App Platform.

Good luck to everyone who participated!
Sitefinity Custom Form Validation Using Vanilla JS
Tags: dotnet, sitefinity, cms, javascript
Published: 2021-01-10 21:00:07

Sitefinity CMS forms rely on default HTML5 validation when the user tries to submit the form. But what if we want more control over the validation on the front end?..

"<a href="https://github.com/Superhands89/SitefinityClientSideFormValidationMVC">SitefinityClientSideFormValidationMVC</a>" plugin provides custom form validation for Sitefinity MVC forms using vanilla client side JavaScript.

##Features...

* Validation of all fields/inputs at once, thus removing the need to rely on HTML5 validation of each field individually
* Pattern validation for email and number fields etc.
* Smooth scrolling to areas that fail validation on form submit
* Allows creative control over the way form validation is handled

Here is the GitHub page: https://github.com/Superhands89/SitefinityClientSideFormValidationMVC
Video Party - My submission for #dohackathon
Tags: dohackathon
Published: 2021-01-10 20:46:26

## What I built
A web-based application that provides a platform to watch downloaded .mp4 videos with your peers.

If you have a .mp4 video stored locally on your PC/laptop, and you wanna watch it with your friends, colleagues, or family, you can use this application stream video in a peer to peer fashion.

### Category Submission: 
Random Roulette

### App Link
https://local-video-party-client-w9cuc.ondigitalocean.app/
OR
https://videoparty.tk

### Screenshots
![Home page](https://dev-to-uploads.s3.amazonaws.com/i/ci2fte9aslp4h5a069rf.png)

![Login page](https://dev-to-uploads.s3.amazonaws.com/i/vpqrg9hl7luwi7wd5w8j.png)

![Joinee lobby](https://dev-to-uploads.s3.amazonaws.com/i/8rne4dh4h6t7je33lm1b.jpeg)

![Creator lobby](https://dev-to-uploads.s3.amazonaws.com/i/qdj89cdo8yw17sq8avqt.png)



### Description
Video party is a platform where you can watch pre-downloaded videos with your friends in sync and chat while waiting in the lobby. It uses a peer-to-peer library to stream videos.  

### Link to Source Code
**Client** - https://github.com/varungujarathi9/Local-Video-Party-Client
**Server** - https://github.com/varungujarathi9/Local-Video-Party-Server

### Permissive License
MIT License

## Background
While I joined my new job in Sept 2020, I made some new friends. Gradually we started playing online games, chatting, etc. One thing that struck my mind was there was no platform where we could watch downloaded video files (.mp4) together. Thus we started working on this app. 

### 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?)
I was very new to Digital Ocean's App Platform, slowed a gained a grip on it. It reduces to Ops work and lets developers focus on the important parts. The auto-deployment feature was very helpful.

We learned lots of new technologies such as WebSockets & WebRTC, etc.

Technologies that we used were
-	WebSockets
-	WebRTC
-	ReactJS
-	HTML/CSS/JS/Bootstrap
-	Python - Flask & Gunicorn
-	Docker
-	Nginx 

Flow:
-	An user creates room by entering a username from the home 
        page 
-	Create room functionality generates a unique room with an 
        I.D. which can be used by other users either by join room 
        option or by opening the invite link in the browser 
-	All the users can chat while in the lobby 
-	Original creator has access to select a file that is to be 
        streamed
-	All users can watch the streamed media file(.mp4) in sync

### Additional Resources/Info
**WebRTC** - https://www.npmjs.com/package/simple-peer
**Python FlaskSocketIO** - https://flask-socketio.readthedocs.io/en/latest/
**ReactJS** - https://reactjs.org/tutorial/tutorial.html
Getting RSS feeds from Medium publications
Tags: rss, medium
Published: 2021-01-10 20:08:57

Lots of publications and good content is still hosted on Medium, like the [Netflix Tech Blog](https://netflixtechblog.com/).

I wanted to access its RSS feed but there was no subscribe button or RSS icon. But I did notice it was a Medium blog. It turns out there's a way to access it by changing the URL a bit.

Using Netflix as an example, they have a custom domain. So you can access its RSS feed by simply adding `feed` to the end of it.

```
https://netflixtechblog.com/feed
```

There are a number of other variations, such as getting a feed from a specific user or publication on Medium. All those combinations are listed [here](https://help.medium.com/hc/en-us/articles/214874118-Using-RSS-feeds-of-profiles-and-publications).
Vimeo Private Video Downloader
Tags: vimeodownloader, vimeoprivatevideos
Published: 2021-01-10 20:01:25

Found this code for <a href="https://vimeotomp4.com">Vimeo Videos Downloads</a> useful. There are two versions of that code One for public videos second is for private videos. 
I also found this useful <a href="https://vimeotomp4.com">website</a> to download Vimeo videos which are publicly available.
Complete the sockMerchant function with python.
Tags: sockmerchant, python
Published: 2021-01-10 19:53:44

Alex works at a clothing store. There is a large pile of socks that must be paired by color for sale. Given an array of integers representing the color of each sock, determine how many pairs of socks with matching colors there are.
Complete the sockMerchant function in the editor below. It must return an integer representing the number of matching pairs of socks that are available.

sockMerchant has the following parameter(s):

n: the number of socks in the pile
ar: the colors of each sock


# Complete the sockMerchant function below.
def sockMerchant(n, ar):
    pears = 0
    color = set()
    for i in range(len(ar)):
        if ar[i] not in color:
            color.add(ar[i])
        else:
            pears += 1 
            color.remove(ar[i])
    return pears
if __name__ == '__main__':

    n = int(input())

    ar = list(map(int, input().rstrip().split()))
    ar.sort()
    

    result = sockMerchant(n, ar)
    print(result)
DO Hackathon: Blokii Image Maker - Submission
Tags: dohackathon, digitalocean, javascript, showdev
Published: 2021-01-10 19:38:18

## What I built
The Blokii Image Maker is a simple app that allows users to generate tech blog images. 

### Category Submission: 
Built for Business

### App Link
[https://img-maker.blokii.com](https://img-maker.blokii.com)

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

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

![Alt Image Settings](https://dev-to-uploads.s3.amazonaws.com/i/7a1unc4asboi7mpcu9dt.png)

![Alt Unsplash Dialog](https://dev-to-uploads.s3.amazonaws.com/i/6jjbu8am65sq1qkl8dv9.png)

### Description
The Blokii Image Maker allows users to generate an image with a title, subtitle, author byline, and tech icons. The images are downloadable.

### Link to Source Code
Frontend:

{% github https://github.com/blokii/blokii-img-maker-client %}

Backend:
{% github https://github.com/blokii/blokii-img-gen-backend %}


### Permissive License
[Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0)

## Background
I started blogging more on tech topics in the past couple of years. It was always a chore to find an image that would suit the blog post if it wasn't for an existing project with screenshots. I thought if it were possible to generate images automatically, it would save me some time as I came up with new blog posts. 

### How I built it 
This application consisted of a frontend and a backend. The frontend was built with the Quasar Framework. The backend was built with FeatherJS. Both applications were deployed using Digital Ocean. 

The frontend would be built as a Singe Page Application and served as a static site via Digital Ocean. The Feathers Application would be deployed and hosted using Digital Ocean's App service. 

I really appreciated how easy it was to get up and running with Digital Ocean. At first, I wasn't sure if it'd be easier to serve the frontend via the backend, and that's how I originally deployed, but I found myself making more changes to the frontend than the backend and ultimately opted for separate deployment pipelines as I found it more a hassle to update the backend every time I wanted to push a frontend change.

### Additional Resources/Info

Technologies that I used for this project include:
* [Digital Ocean](https://www.digitalocean.com/products/app-platform/)
* [FeathersJS](https://docs.feathersjs.com/guides/)
* [Quasar Framework](https://quasar.dev)
* [Unsplash API](https://unsplash.com/developers)

Feedback always appreciated!
Rappel: An idea & repo management tool [DO Hackathon Submission]
Tags: dohackathon, react, django, showdev
Published: 2021-01-10 19:31:04

## What I built

Rappel - An idea management tool which is inspired from kanban boards and integrated with GitHub

### Category Submission: **Built for Business**

### App Link

The app (frontend): https://rappel.tech
API documentation (backend): https://api.rappel.tech/api/schema/redoc/

### Screenshots

![homepage / landing page](https://dev-to-uploads.s3.amazonaws.com/i/ef5hjzcc0rlzeutgyuo7.png)

![onboarding](https://dev-to-uploads.s3.amazonaws.com/i/9jw98srtocip6g9ictnq.png)

![onboarding - callback](https://dev-to-uploads.s3.amazonaws.com/i/sw132ilfy734r7y7lbc2.png)

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

![api docs](https://dev-to-uploads.s3.amazonaws.com/i/07g7yhq2kgnpf5ndeprm.png)

### Description

An idea management tool, inspired from kanban boards and integrated with GitHub. It has the following features:

- Automatically sync your GitHub repos
- Sort the repos into 5 categories:
  1. Backlog
  2. Active
  3. Work In Progress
  4. Done
  5. Archive
- Add working notes for the repos directly inside their cards

### Link to Source Code

Frontend: https://github.com/sdabhi23/rappel-ui

{% github sdabhi23/rappel-ui %}

Backend: https://github.com/sdabhi23/rappel

{% github sdabhi23/rappel %}

### Permissive License

Frontend: [Apache License 2.0](https://github.com/sdabhi23/rappel-ui/blob/master/LICENSE)
Backend: [Apache License 2.0](https://github.com/sdabhi23/rappel/blob/master/LICENSE)

## Background

I completed my bachelor's degree in mid-2020. I always made it a point to put whatever meaningful projects I built on GitHub. That combined with forks of some projects and a few more projects that I actively managed left me with more than 50 repos.

I was already looking for some tool which can provide me an overview of all my repos and categorize and manage them in a better way, but couldn't find anything which exactly fit the bill. So I decided to build it on my own.

### How I built it 

I had to make choices about tech stacks and though I wanted to explore new horizons I decided to go with the tools and technologies I am most comfortable with in-order to build a solid stable application.

I have deployed Flask apps earlier, but this is the first time I deployed a Django application. The DNS management service provided by DigitalOcean is great.

### Additional Resources/Info

- Libraries / frameworks used:
   - Semantic-UI React for styling
   - React-Trello for boards
   - React-Quill for rich-text editor
   - Django and Django Rest Framework for api
   - Django Rest Knox for better token management
   - Daphne for deployment
   - drf-spectacular for API docs

- DigitalOcean’s App Platform is pretty good but the Docker builds take longer than expected and monorepo support can be improved.