teleren/devto huggingface dataset:
Write Letter #3 Pagination, Paper Plane mode, Commenting !
Tags: dohackathon, typescript, graphql, react
Published: 2021-01-10 12:27:04

## In this part I'm implmenting pagnination to reduce data overload add new writing mode (paper plane) and finally commenting !

I have to say pagination is very important for app like this one, because if user load all data from database at once, that's gonna be big problem

So, I decied to create pagination for letter and comment to help to reduce data overload

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

Before went for Paper plane writing type I want to implement comment system first

#### What is paper plane ?
As described in first part of this series, paper plane is writing mode that is not publicly visible to anyone but randomly one stranger will catch it !

### Remark who do we got in this part
- Pagnination
- Comment
- Paper Plane

---
### Timelapse
Check out my timelapse tool https://github.com/littleboycoding/timelapse
{% youtube C2FJwcg2maM %}
Write Letter #2 Database, GraphQL, Basic CRUD Operation
Tags: dohackathon, typescript, react, graphql
Published: 2021-01-10 12:26:54

### In this part I continued to implement Database, GraphQL and get start with some basic CRUD

#### Andddd this is my first time with Apollo and MongoDB.
![Apollo](https://media.giphy.com/media/QTs10Q1r0XSFqVc561/giphy.gif)

But surprizingly the process is very straightforward. Such a nice tool !

I also tweak some UI/UX and responsiveness !

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

At the end I got basic posting working !

### Let's remark what we've got this part
- MongoDB Setup
- Apollo
- Responsiveness of app

That's it for this part, Thanks for reading !

---

### Timelapse
Check out my timelapse tool https://github.com/littleboycoding/timelapse
{% youtube Q1oWUfWoIqs %}
Write Letter #1 Prototyping
Tags: dohackathon, react, graphql, typescript
Published: 2021-01-10 12:26:44

## In first part, I'm going to setup my project for Write Letter, but first let me explain you what is Write Letter.

### What is Write Letter ?
well, write letter is little web app which allow anyone to write anything openly and anonymously no sign up required

### Features
- No Sign-Up required
- Write anything, just be polite
- Comment (ofc)
- 2 type of writing types "post" and "paper plane" (detail below)
- Dark/Light Mode !

### Type of posting
- Post is just normally post to writing board so anyone can see
- Paper plane is not publicly see by anyone but randomly stranger will catch it

### Technologies stack
- ReactJS
- TypeScript
- MongoDB
- GraphQL (Apollo)

In first part I start my React project with create-react-app (typescript template) (cuz is good)

Mostly I just prototyping my app in this part and created basic name input  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8xo2sb9av5wpi7kkx5g5.png)

That's all for first part, thanks for reading !

---

### Timelapse
I also created timelapse tool which I called ["timelapse"](https://github.com/littleboycoding/timelapse) you can use it to captur screen and compile it for timelapse, check it out !

{% youtube pD3KuT2LQPw %}
Removing the obstacles
Tags: webdev, cloud, devops
Published: 2021-01-10 12:26:21

I work as a Senior Software Engineer at Codesphere. Here's my story that explains why I joined this amazing project. It is a story of unanswered questions and limitations that obstruct the lives of developers around the world every day.

---

As I remember my first first Computer Science lecture years ago: It started with the words:

> Computer Science isn't about programming, it's about solving problems.

Solving problems, huh. Then why are we - developers, engineers, and problem solvers - stuck with local development environments, that are limited in so many ways? Why do we have to spend thousands of dollars on the hardware for development? Why do we even have to do something locally when a) most of the apps that we use daily are already in the cloud and b) most of the apps that we build already require an internet connection for development?

# Local development ain't perfect
So why not to move the development to the cloud? And no, it's not just a fancy phrase. At Codesphere, our goal is to remove the pain points of local development. Most certainly you are pretty familiar with most of them:

* IDEs are lacking the speed you need
* You don't have enough computational power to run your app
* The headache from constant adjustment of local environment switching between different projects
* Expensive hardware
* No real-time collaboration (but really, what happened to pair programming?)
* The dying laptop battery after~2 hours of intensive local development

I can keep going, but it seems like we have already identified the problems that many of us face daily. We need to move away from a local development! You can see that there are plenty of arguments that solving this core problem has a significant impact on the development process and all things we create with code.  Now let's talk about our solution.

# Building the best web IDE
Even though some Web IDEs have been around for quite some time the technology itself is far from being "adopted". Since I first used some of the top web IDEs back in 2016 the situation hasn't really changed much. And that's why I joined the Codesphere, because **we are here to change that**.

It isn't enough to just build a web IDE. It **has** to be *blazing-fast*, *simple to use*, *convenient*, and *customizable*. It has to be *next-level*. Add a real-time collaboration and a zero-config infrastructure to that and you get the Codesphere cloud. Codesphere is so much more than just a web IDE: it is the symbiosis of a next-level IDE with cloud services - everything you need to build your application from the ground and launch it to production.

# Afterword
I believe that Codesphere will simplify my life and the lives of other developers, allowing us to focus on what really matters. #justcode

---

At Codesphere, we are not building just another new product, we are creating a foundation for developers to thrive and achieve their goals.  🚀

---

Let us know: which obstacles do you face in your daily life as a developer?
What's vue.js?
Tags: webdev
Published: 2021-01-10 12:24:48

[Vue.js](https://vuejs.org/) it's a JavaScript framework for building front-end UIs. In Vue.JS you can start simple and then progressively add in the tools and features that you need to build a complex web application.  

At its core it provides a way to build components that encapsulate data or state in your JavaScript and then connect that state reactively to a template in HTML. 

We call these components declarative **views** because the same data inputs will always produce the same output in the visual UI.

## How does it work?

When we declare data on this data object it links or binds it to the HTML on the template above when the value of the data changes the component will automatically rerender. In other words it's reactive and the framework does a ton of work under the hood to make sure that this process is performance across a huge component tree we can work with this data in the template thanks to views HTML based template syntax we can interpolate a value for expression using double braces and we also have a variety of directives to control the behavior of the HTML based on the data.

We can use Vue.js to only render an element when the value is True and then we might have a fallback element after that that's only rendered. 

We can do that directly in the template or define a custom method and the components methods object the method has access to our reactive data and that
means all we have to do is change the value of the data and the component will automatically rerender and that's all it takes to build an interactive reactive declarative UI component with Vue.js.

You can see [vue.js examples](https://vuejsexamples.net/) here.

## Who uses Vue.js?

The framework is loved by developers for the simplicity but also its ability to scale up in complexity incrementally its plugin system allows you to easily drop in things like a router state management firebase support and more and perhaps
best of all it's not sponsored by some mega corporation. 

It's not pressured to push out new releases all the time and does a great job listening to its community.
Mini-mp3-player
Tags: c, mp3player, productivity
Published: 2021-01-10 12:18:53

---
title: Mini-mp3-player
published: true
description: 
tags: c,mp3player,productivity
// cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8h9wvksokmfmzxvihyx5.png
---
https://github.com/rafapaezbas/mini-mp3-player

## What is mini-mp3-player?
Mini-mp3-player is a minimal, distracionless terminal mp3 player.

## How do you use it?
First thing you have to do is compiling the source code. Mini-mp3-player is coded in C and uses [SDL2](https://www.libsdl.org/download-2.0.php) and [Ncurses](https://invisible-mirror.net/archives/ncurses/) libreries.
 
The code and compilation has only been tested in a Ubuntu system, the followed step are:
```
apt-get install libsdl2-dev libsdl2-mixer-2.0-0 libncurses5-dev libncursesw5-dev && make install
```

## Usage
Once the code has been compiled run:
```
sudo mini-mp3-player -c {path-to-music-collection}
```
This command will create or refresh a collection file used by mini-mp3-player.
If you already have a collection, only run:
```
sudo mini-mp3-player
```

Skip to next song pressing -n- or quit pressing -q-
Make your terminal powerful, and beautiful! | Zsh | Powerlevel10k theme
Tags: linux, zsh, terminal, powerlevel10k
Published: 2021-01-10 12:16:54

In this, I have explained all the steps that you require to make your terminal look better and powerful. 
{% youtube 8Cz1dEnQbUM %}

Commands: {% github seema1711/All-YouTube-Projects no-readme %}

You can connect with me on:
🎥[YouTube](https://youtube.com/BashWoman)
⚒[LinkedIn](https://linkedin.com/in/seemasaharan)
🧵[Twitter](https://twitter.com/SeemaSaharan5)
✍[Hashnode](https://bashwoman.hashnode.dev)
📷[Instagram](https://instagram.com/bashwoman)
Connect to a PostgreSQL Server via SSH Tunnel
Tags: bash, ssh, postgres
Published: 2021-01-10 11:54:32

If you use a bastion server to access a postgresql, or any other sql database for that matter, you'll need
to create an ssh tunnel to access it. Some DB clients handle this automatically for you, but if you want to
interact with the database through the shell you'll need to create it yourself.

## What is a SSH Tunnel?

Put simply, a ssh tunnel is a way to redirect requests to a port on localhost to a remote server.

![SSH Tunnel Graph](https://dev-to-uploads.s3.amazonaws.com/i/eh31gbna26h1jlc17fb1.png)

## Creating the Tunnel

Before creating the tunnel, you will need to know three things: the bastion server's hostname, your username on the bastion server, and the sql server's hostname. You should also verify that you can ssh into the bastion server. To do this, run the follwing command and enter your password when prompted.

```bash
ssh <username>@<bastion_server>
```

### Adding your Profile (Optional)

You can add your ssh key to the bastion server so that you don't have to type in your password every time you connect. To do so, use the following command:

```bash
ssh-copy-id <username>@<bastion_server>
```

### Open the Tunnel

Now that you know you can connect to the bastion server, open the tunnel like this:

```bash
ssh -L localhost:5433:<sql_server>:5432 <username>@<bastion_server>
```

You should see the standard bash prompt that came up when you directly logged into the bastion server.
Leave this window open to keep the tunnel open. Now when you connect to the port `5433` on `localhost`, 
you'll actually be talking to the sql server on port `5432`!

To verify that your connection works, open a new terminal and execute:

```bash
psql --port=5433 --host=localhost -c "SELECT * FROM pg_catalog.pg_tables"
```

You should see a list of tables returned.

### Create SSH Config (Optional)

Okay, I forget the command to open a tunnel all the time. Plus it's a pain to have to look up the hostname of two servers every time you want to connect to the database. To simplify things, you can create a ssh config with all of the tunnel settings. Edit your `~/.ssh/config` file and add the following entry:

```bash:title=~/.ssh/config
Host bastion-production
  HostName <bastion_server>
  User <username>
  LocalForward localhost:5433 <sql_server>:5432
```

Now to create the tunnel, just run `ssh bastion-production` and it will behave the same as the previous command.


**Artwork**

Photo by [Daniel von Appen](https://unsplash.com/@daniel_von_appen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/ssh-tunnel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
LGTM Devlog 15: Sprint 2 plans
Tags: devjournal, github, git, python
Published: 2021-01-10 11:52:24

Sprint 2 time! What am I going to do/achieve this time?

Now that we have webhooks for forks coming in, it means we have all the information needed to create user accounts, and also start the game. Starting the game involves creating whatever database entities are needed, and then starting the first game quest/mission.

![LGTM architecture diagram](https://dev-to-uploads.s3.amazonaws.com/i/22njf086kh40lo1cobj5.png)
 
# Account storage
We need to start storing user accounts. Since we're on Firebase, the easiest solution here is to use Firebase Auth. So this task is simply about creating the relevant endpoints to do so

# Quest storage
I'm going to start calling these "quests" now. These have to be defined somehow, and stored somewhere. This sprint's main task is to explore and define how these "quests" will be stored.

# Task summary
So our task summary looks like this. These items are a little coarse, as there's a lot of investigation that's needed still.

![Sprint 2 plan](https://dev-to-uploads.s3.amazonaws.com/i/tkrv3wbpui9cgx8rll9a.png)
TypeScript vs JavaScript
Tags: javascript, typescript
Published: 2021-01-10 11:52:16

# Go with TS if: 

- high fluctuation
- using cypress to do UI-Tests
- doing agile software development:
 - pair programming
 - TDD
 - agile methodologies according to agile manifest: DoD, DoR, etc.
- following clean code principles
- doing Angular (opinionated framework)
- doing React / Vue
- caring about code quality
- writing tests in Jest/Jasmine
- utilizing IDE features to autocomplete, refactor, especially in IntelliJ

# Go with JS if
- creating a POC app in 1 hour
- creating a mock server for local development
- creating a quick script in `Fastify` to host a SPA application
Deploying a portfolio website with DigitalOcean's app platform
Tags: portfolio, dohackathon
Published: 2021-01-10 11:46:45

## Portfolio Site

### Category Submission: Personal Site/Portfolio


### App Link: https://portfolio-site-9s4jh.ondigitalocean.app/


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


### Description: A very minimal looking portfolio site having links to my different social accounts and some general info.
 

### Link to Source Code: https://github.com/Devansh-Maurya/Devansh-Maurya.github.io

### Permissive License
MIT


## Background
A portfolio site is a very good tool for any software developer to present his profile and create a branding, so I thought why not take this hackathon as an opportunity to deploy my site on DigitalOcean and learn something new.

### How I built it
I used DigitalOcean's app platform for deploying, with code hosted on Github. DO's integration with Github provided a very quick way to deploy the website.
List of great Trainings for a Java/Typescript Developer
Tags: java, typescript
Published: 2021-01-10 11:44:56

1. Certified Scrum Master
2. AWS CDA
3. Oracle Java Developer
4. iSAQB Architecture Foundation Level
5. 1 TDD based Framework Training, e.g. Angular, React, Spring Boot
6. Soft skills Training: communication, conflict management, presentation skills etc.

P.S.: try JHipster
Idris2+WebGL, part#3: Preliminary performance test
Tags: idris, functional
Published: 2021-01-10 11:31:28

---
title: Idris2+WebGL, part#3: Preliminary performance test
published: true
series: Idris2 and WebGL
tags: #Idris, #functional
canonical_url: https://drbearhands.com/idris-webgl/part3/
---

I decided to run some preliminary performance tests.
While a spinning triangle is not a very relevant benchmark, the code is still at the stage where I can easily rewrite the entire thing in native JavaScript for an apples-to-apples comparison. If my worries result in seriously slower code we might be able to see some effect at least.

I wanted to measure FPS. To so so I [enabled an FPS counter in the browser](https://cesium.com/blog/2014/12/01/webgl-profiling-tips/) and [disabled vSync](https://stackoverflow.com/a/18062444) to get values above the 60 FPS cap. A restart of the browser was required for changes to take effect.

Note: I'm on Linux (Pop!_OS) running nvidia-driver-455 on a GTX 1660 super GPU and an i5-6600K CPU.

![FPS counter overlay](https://dev-to-uploads.s3.amazonaws.com/i/obiwgh5zbbzttpkekidn.png)

The spinning triangle got about 287 FPS using native JS and 280 when compiling from Idris (it drops when taking screenshots). Various minifiers and optimizers seemed to either output non-functioning code, make no changes or have no effect on performance.

So there does appear to be some effect on performance, but not so much as to have me worried yet.

Idris still has a big trick to pull: compiling to Web Assembly. Since Idris has a C++ backend, and [emscripten](https://emscripten.org/) exists, there could be a substantial opportunity for performance improvements here. For the moment, this does not seem relevant to test, as the code is mostly calls to WebGL functions. API calls cannot be made from WASM yet so we'd mostly be adding JS-calling overhead. On the other hand, I expect getting that idea to work will require a substantial effort that I'd rather spend doing something else. Once the CPU load gets more substantial this would be an interesting comparison.
Random Book Recommender - DigitalOcean App Platform Hackathon 
Tags: dohackathon, python, webdev
Published: 2021-01-10 11:18:47

## What I built
As someone who loves to read, I'm always looking for the next eye-opening book that can make time seem like a breeze. I've created an app that recommends random books to users.

### Category Submission: 
Random Roulette

### App Link
Check out the App [here](https://crispy-octo-barnacle-xz94s.ondigitalocean.app/)

### Screenshots
![Landing Page](https://dev-to-uploads.s3.amazonaws.com/i/tt2yqdl1kz507jgx3wbs.png)
![Book recommendation page](https://dev-to-uploads.s3.amazonaws.com/i/bq78p3b2n9ncasg1q2a4.png)

### Description
The app is designed to be simple and straightforward to use, recommend a book to the user and help them discover a new perspective on life or get enveloped in an exciting adventure that makes time pass feel ever so fast.

Users click on the "Recommend a book" button which then recommends a book at random. Users can also view the book by clicking on the "View book" button.

### Link to Source Code
Source code can be found [here](https://github.com/yasseriz/Book-Recommender)

### Permissive License
MIT

## Background
I've always wanted to discover new books but didn't know where or how to start. After I'd finish a book I would feel lost so as to not know what to read next. I was inspired by the random name generator that is so widely available on the internet. If people could use such a tool to get a name, then I could build something similar to help me discover new books. And so, that's what I ended up doing!

### How I built it 
I was able to make use of both DigitalOcean's App Platform and Databases for my app. I used python and Flask as the backend while using HTML with Bootstrap for the frontend. Was able to learn to send data between frontend and backend through HTTP requests as well as configure environment variables for secrets. 

Future plans include adding filters for recommendations as well as adding links to purchasing the book and also including more information such as genre and a short summary. I also plan to use docker and CI/CD tools for more automation in the future. 

### Additional Resources/Info
Both of DigitalOcean's infrastructure used in this project use the lowest end infrastructure configurations available.
Parameter Validation and Files
Tags: powershell, cli, shell
Published: 2021-01-10 11:10:52

Happy new year! This week I learned something about how to handle parameter validation in a powershell script. I'm working on a deployment script where I need to handle file and folder paths.
I passed those paths as a parameter and needed to validate it.

Here is what i learned:

**Check if you have an absolute path:**

```powershell
param (
    [ValidateScript({
        if(-Not([System.IO.Path]::IsPathRooted($_))) {
            throw "Not an absolute path!"
        }       
        return $true
    })]
    [string]$path
)
$path
```
Here i use a .NET Library Method from the System.IO.Path class.
Read more about it here:

https://riptutorial.com/powershell/example/17158/calling--net-library-methods

**Check if the path exists:**

```powershell
param (
    [ValidateScript({
        if( -Not(Test-Path $_)) {
            throw "The path doesn't exist!"
        }       
        return $true
    })]
    [string]$path
)
$path
```

**Check if the parameter path is a file:**

```powershell
param (
    [ValidateScript({
        if( -Not(Test-Path $_ -PathType Leaf)) {
            throw "The parameter path has to point to a file!"
        }       
        return $true
    })]
    [string]$path
)
$path
```

**Check if the parameter path is a folder:**

```powershell

param (
    [ValidateScript({
        if( -Not(Test-Path $_ -PathType Container)) {
            throw "The parameter path has to point to a folder!"
        }       
        return $true
    })]
    [string]$path
)
$path
```

**Validate that the path has no illegal characters:**

I have seen other articles on the net where the writer suggests to set the parameter type of the path to System.IO.Path to make sure it doesn't contain any illegal characters.

Example:
```powershell
param (
    [System.IO.Path]$path
)
$path
```
I disagree with this approach as it makes the function more difficult to handle as you have to make sure that you are passing file paths and not Strings anymore. Something like this will not work:

```powershell
function test {
    param (
        [System.IO.Path]$path
    )
    $path
}     
$toTest = @(D:\temp, D:\backup)
foreach($item in $toTest) {
    test -path $item
}
```

My suggestion would be to keep the String type of the parameter and use the -isValid Parameter of the Test-Path function. Something that looks like this:

```powershell
param (
    [ValidateScript({
        if(-Not(Test-Path $_  -isValid)) {
            throw "The Parameter may not contain the following characters: "+([IO.Path]::GetInvalidFileNameChars() -Join '')
        }
    })]
    [String]$path
)
$path
```

It keeps the usage of these explicit .NET calls in your validation script and you are still able to pass paths in string arrays to the function.