teleren/devto huggingface dataset:
Akthar's Personal Portfolio
Tags: dohackathon
Published: 2021-01-09 14:05:05

## What I built
A Fully Responsive Personal Portfolio/CV

### Category Submission: 
Personal Site/Portfolio

### App Link
https://my-web-cv-dpote.ondigitalocean.app/

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

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

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

### Description
This project is a static web site of my personal profile highlighting my skills, professional experience, and contributed projects. I have also added animations, and transitions to catch the viewers' eye.

Technologies used - HTML, CSS, JavaScript

### Link to Source Code
https://github.com/aktharrr/my-web-cv

### Permissive License
MIT License

## Background
I already knew about Digital Ocean and its services and I really wanted to try and figure out how it works and more insights but I couldn't try as I had no real projects to implement. And luckily I saw the DigitalOcean App Platform Hackathon on Dev and thought why not give it a try. Even though I wanted to build something creative and unique I didn't have enough time to work on it, so I decided to build my personal portfolio and make it live with Digital Ocean while learning about Digital Ocean and its new Digital Ocean App Platform.

### How I built it 
Initially, I built my personal portfolio website on my localhost machine with the HTML, CSS, and javascript knowledge that I had. And I added some beautiful animations on the website to make sure that the designs are up to the current trend and standard.

The next step was to host the portfolio website and with the help of Digital Ocean's App Platform. With just a few clicks I managed to host the portfolio code directly from my GitHub repository. That was pretty easy and didn't cost me anything. I personally have a hard time with hosting websites, some platforms require tedious configurations to be done, and in some cases, it messes up CSS and JavaScript configurations after hosting. With the App Platform, But I had no issues with Digital Ocean App Platform. And the notion of auto app detection was pretty cool and the way how it automatically pre-configure the environment, I really loved it. And the Autodeploy feature where the app is deployed within seconds the code is updated in the GitHub repository was also pretty cool. Overall for me, using Digital Ocean's App platform was a new and effortless experience. 

Thank you Digital Ocean and Dev.
ReactPeg: Declarative parser generator based on PEG.js
Tags: parser, react, peg, typescript
Published: 2021-01-09 13:49:43

Now, we can generate parser in "react" style: declarative & composable:

![carbon](https://dev-to-uploads.s3.amazonaws.com/i/6tde3penxj1ec59mnewh.png)

* playground: https://mistlog.github.io/react-peg-playground/
* docs: https://mistlog.github.io/react-peg-docs/docs/getting-started
* template project: https://github.com/mistlog/react-peg-template
My Experiences With Various Languages and Frameworks
Tags: frontend, webdev
Published: 2021-01-09 13:37:49

I've tried learning many coding languages and even though I understood the concepts and always tinkered with each one, many were just not for me. Ruby, C, C++, and Python were just some of the languages I've taken classes on that I had fun learning and making small projects with, but I didn't feel the same sense of passion when it came to those, more back-end languages. I also explored with Php, a popular back-end language and while I didn't like Php, I fell in love with it's framework Laravel. I'm currently learning react, a more front-end focused framework in my opinion, and I'm really enjoying it.

I'm curious to know whether other front-end devs have decided they want to pursue front-end, because they don't enjoy back-end languages as much. Or maybe because you just simply enjoy designing visual components and would rather that than code algorithms. 

Thanks for reading!
~ Matthew Marquise
Daily Developer Jokes - Saturday, Jan 9, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-09 13:00:12

---
title: "Daily Developer Jokes - Saturday, Jan 9, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Jan%209%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258eb1a429.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why was the developer's family upset with them at dinner?

___A:___ They forgot to git squash before going home
 -->
Tailwind CSS Starter Template
Tags: css, html, webdev, weeklyui
Published: 2021-01-09 12:59:25

Starter Template layouts are mostly used to starting any website without doing any extra codes. Just you have customized and change text or heading which you want a change. So here we made a basic and user-friendly interface with the help of Tailwind CSS.



In this starter Template, we used one main navbar and also we used a card section to show services and team section. Here we also used one contact us form and one simple footer with copyright text on the bottom side. To make it more attractive we used the best color combination classes on the hover side and also we used grid class to make templates more beautiful. Only in these templates, we used tailwind CSS utilities class and component which already has given. Here also modify the class for hover and also we used font awesome icons with suitable color executions.

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

[Source Code](https://w3hubs.com/tailwind-css-starter-template/)
Echo
Tags: dohackathon
Published: 2021-01-09 12:55:06

## What I built
An echo tool that demonstrates the usage of Web Speech Recognition & Synthesizer API. 

### Category Submission: 
Random Roulette

### App Link
https://echo-788wj.ondigitalocean.app/

### Screenshots
![Echo](https://dev-to-uploads.s3.amazonaws.com/i/7sri6n7swjoe7luf6yda.PNG)
### Description
 Web Speech Recognition & Speech Synthesizer API allows users to recognize the speech and also synthesizes speech from text. This app demonstrates the usage of web API. This app recognizes what the user speaks and converts it to text. With the text passed to Speech synthesize API echos the voice of what users have spoken before.

### Link to Source Code
https://github.com/saravananselvamohan/echo

### Permissive License
MIT

## Background

Web API for Speech Recognition & Speech synthesizer reduces the dependency on residing on service vendors. And also Web API runs directly on the browser with no dependency. These API could be greatly helpful to those looking for Speech Recognition & Speech Synthesizer services for their applications 

### How I built it 
 Using HTML, Javascript & Web API

[ What I learned]
Deploying a Static site in Digital Ocean
Usage of Speech Recognition & Speech Synthesizer Web API


### Additional Resources/Info
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis
https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
How do session and cookie work?
Tags: session, cookie, http, beginners
Published: 2021-01-09 12:47:36

#What is session?
Session is used to identify a user and store the user information. When you first login to a certain web application, an unique session id is created and stored in the web server. For example, if you add an item to your cart on an EC website, this information is also added to the session. In this way, session consists of an unique id and other user-related information. When you visit the same website again, you can open your personal page without entering your name or password. That is because the session id is used to find out who you are.

#What is cookie?
Web clients, web browsers in other words, also hold the session ids created in the web sites you have visited. The session ids stored in web browsers are called cookies.

#How do they work?
When you visit a website, your browser sends cookie information to the web server as a part of its http request. The web server finds the session id that matches with the cookie sent from your browser. Going through this process, the web server recognizes who is visiting the web site.
Run a cheap Postgres / PostGIS server on a Digital Ocean droplet for USD$6 per month
Published: 2021-01-09 12:44:47

*The following shouldn't be used for anything where data security is a concern. This is a proof of concept only.*

*Before you go down this route, just know Digital Ocean offers managed database solutions for about $15 per month which offers far better availability, data resiliency, security and pretty much everything else.*

Sure, having a database run on a small [droplet](https://www.digitalocean.com/products/droplets/) means the performance isn't great, but sometimes you need to run something on the cheap. This is a way to do just that.

## Create a droplet
https://cloud.digitalocean.com/droplets

- Image <- Ubuntu (I used the 20.04 LTS x64)
- Shared CPU <- Basic Plan
- Block Storage <- 10GB (larger volumes cost more)
- Data center <- somewhere close to your server
- Host name <- something useful
- Cert / Password <- Password is easier for most people

You can leave everything else as it is. 
## SSH to the droplet 
- Username: root
- Password: [created in previous step]
- Host/IP: Should be showing in the [droplet overview](https://cloud.digitalocean.com/droplets).

### Install Postgres / Postgis
```sh
apt-get update -y && apt-get upgrade -y && \
apt-get install postgis # or postgres if that is all you need
```

### CHANGE THE POSTGRES PASSWORD!
```sh
sudo -u postgres psql # Run psql with the postgres user
# In psql, issue the change password command \password
 \password postgres
# Enter new password:
# Enter it again:
```

### Edit the configs

#### Stop Postgres
```
systemctl stop postgresql
```
#### Find the version of postgres you are running
```bash
ls /etc/postgresql  # lists the version folders
# "12"
```
#### Find the `/mnt/` point of your block volume
```bash
ls /mnt
# volume_lon1_01 or similar
```

#### Move the postgres data
[This post](https://www.tutorialspoint.com/how-to-change-postgresql-data-folder-location-on-ubuntu-16-04) was useful for pointers on moving the data.
```
rsync -av /var/lib/postgresql /mnt/[BLOCK VOLUME]/
```

#### Edit `/etc/postgresql/[VERSION]/main/pg_hba.conf`
_Change:_
```bash
# IPv4 local connections:
host    all             all             127.0.0.1/32               md5
```
_to:_
```bash
# IPv4 local connections:
host    all             all             0.0.0.0/0               md5
```
#### Edit `/etc/postgresql/[VERSION]/main/postgresql.conf`
_Change:_
```bash
listen_addresses = 'localhost' # listening address
data_directory = '/var/lib/postgresql/12/main' # data
```
_to:_
```bash
listen_addresses = '*' # listen to all 
data_directory = '/mnt/[BLOCK VOLUME]/postgresql/[VERSION]/main' # use block storage
```
## Start Postgres
```bash
 systemctl start postgresql
```

## Finally, configure the droplet firewall 
*Never open a database to the open web without securing it first!*

https://cloud.digitalocean.com/networking/firewalls

1. Create a firewall
1. Add the Postgres port to the firewall
 - Incoming TCP Port 5432 from All Sources
conflict resolution
Tags: ruby, git, devjournal
Published: 2021-01-09 12:42:04

It’s the first full week of Jan. this year, how many of your New Year’s resolutions have you kept unbroken… so far?

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

In connection with resolution, one of the many popular things that we (like/have to) resolve is conflict. Often arise when there are two or more parties involved in a given situation, conflicts, also happen in software development. When the same line or portion of a code has been changed on two separate machines, the version control system issues a conflict. Some code and real-life similarities of conflicts are: (1) they are often — at first — perceived as scary. (2) they bring about fear of the things closely associated to them, like for example, fear of using Git or other version control systems, but fear not because (3) there are many ways to resolve them. one (highly-effective way) is enough communication among the involved parties — and it applies to both software development and its real-life analogy.

Further reading:
* coderefinery.github.io/git-intro/08-conflicts — for more information on the 2nd, 3rd, etc. highly-effective ways to resolve code conflicts
* centimentalcomics.com — shameless plug

---

*This is 1 of the 12-ish posts in “Love Letters To Ruby”. a collection of contents about some Ruby programming concepts and how they shape modern life and or how modern life shapes them.*
My Journey To Becoming A Developer.
Tags: frontend, webdev
Published: 2021-01-09 12:32:12

Once upon a time I was introduced to HTML, CSS, and JS. Fast forward years later... I've taken numerous classes and have expanded my knowledge to the point where I not only feel confident in my ability to create modern, stunning, and even minimalistic, yet fully functional UIs that users fall in love with. Two of my relatives originally encouraged me to give HTML and CSS a shot. If I'm being completely honest, I wasn't super thrilled of the thought of code. I had always thought coding was very complex and there weren't many people who did it, therefore there were little or no communities of coders to get help from or to help out or just to simply connect with. I was very wrong. Not only are there a ton of coders/programmers, there's so many communities and platforms for us to connect on!

I've always been a creator, and coding has allowed me to express that in ways I've never been able to before. Some paint portraits, compose music, cook dishes, and I code. I love the process of going from a blank webpage to a full functioning one. It's my canvas.

Would love to connect with more developers on DEV as well as on GitHub and Linkedin! 

Thanks for reading!
~ Matthew Marquise

More posts to come soon!
Module 3 - Making websites interactive
Tags: javascript, html, css, scrimba
Published: 2021-01-09 12:07:24

Maybe my 2 followers thought about where have I disappeared? 
After completing the module I decided to make interactive tutorial out of DOM because I didn't understand everything fully and here's my site on **[CodePen](https://codepen.io/pr0grammingteenager/full/ZEpjMEK)**

Long story short, I underestimated how hard it is to do a website like that so it took me a few days, but after all I managed to make this **behemoth**, the site is not responsive and the code is very bad but hey, at least I am confident in my DOM skills now. Maybe this site will also help you to understand it a little bit better.

Feel free to leave comment or advice!
Create 3 different types of Loading Screens in React (Part-3)
Tags: react, javascript, webdev
Published: 2021-01-09 11:37:44

This is the part 3 of *Create 3 different types of Loading Screens in React* where we're going to build 3rd type of Loading Screen.

In this part we are not going to use any library instead we are only using simple css styling.

Now the logic of displaying pre-loader is same as in the part-2 so here I'm not going to show you the whole process.

Create new file PreLoader3.js

Copy the whole code from PreLoader2.js file and remove all code related with react-Lottie library and keep everything as it is.

only change return statement as shown below,

```
 return (
    <>
      {!completed ? (
        <>
          {!loading ? (
            <div className="spinner">
              <span>Loading...</span>
              <div className="half-spinner"></div>
            </div>
          ) : (
            <div className="completed">&#x2713;</div>
          )}
        </>
      ) : (
        <>
          <h1>Your Data</h1>
        </>
      )}
    </>
  );
```
In the above code,

div with the class spinner contains Loading text and spinner.
while div with the className completed contains success symbol.(&#x2713;).

Now let's do some css styling.

crate separate file preloader3.css for styling and import it in the preloader3.js file.

{% gist https://gist.github.com/codebucks27/8e5552dcc539f15aca7916480b84c3dc %}

Now,
.spinner class is simply box for spinner.

.spinner span contains styling and animation for loading text.

.half-spinner contains styling for spinner.
now to cut this whole spinner as in line no 20 you just have to set border top to transparent.

.completed contains styling and animation for success(&#x2713;) symbol.

This is the End of this whole series.

You can find Full-Code repository from [here](https://github.com/codebucks27/React-Loading-Screen).

### Thanks For Reading and Supporting.😄

Feel free to visit my youtube channel: 
####[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

Follow me on Twitter where I'm sharing lot's of useful resources!
####[@code.bucks](https://twitter.com/code_bucks) 😉
Script Looping mkdir
Tags: tutorial, shell
Published: 2021-01-09 11:37:19

## English
At this time I want to create a folder on a different dir, but with the same folder placement, for example; `dir1/folder`, `dir2/folder/folder1` dst, and repeated with folder names and multilevel folder placements as well.

Initially I will do this using the sh script related to `mkdir dir1/folder` etc., but I want to make a script so that this activity can be repeated later by changing the parameters:
### Stages:

1. Declaration of _path name_ and array with folder name
2. _Looping script_ with _for_
3. Save the file `name_script.sh`
4. Run the script in terminal `$sh name_script.sh` or `$ ./name_script.sh`

## Indonesia
Pada kali ini saya ingin melakukan pembuatan folder pada dir yang berbeda, namun dengan peletakan folder yang sama, semisal; `dir1/folder`, `dir2/folder/folder1`dst, serta dilakukan berulang dengan nama folder dan penempatan folder yang bertingkat juga.

Awalnya akan mengerjakan ini dengan menggunakan script sh terkait `mkdir dir1/folder` dst, namun saya ingin membuat script agar kegiatan ini nanti dapat diguanakan berulang lagi dengan menggati parameternya saja:

### Tahapan:
1. Deklarasi _path name_ dan array dengan name folder
2. Melakukan _script looping_ dengan _for_
3. Save file `name_script.sh`
4. Jalankan script di terminal `$ sh name_script.sh` atau `$ ./name_script.sh`

## Code
```sh
ch="dir1/folder/folder2/"  
declare -a arr=("folder/" "folder/folder1"  "folder/folder1/folder2")

for i in "${arr[@]}"
do 
   mkdir $ch$i 
done
```
***DONE***
Create 3 different types of Loading Screens in React (Part-1)
Tags: react, javascript, webdev
Published: 2021-01-09 11:37:17

Hey People,

I was finding a good way to make Loading screen/animation for my small React application, and I found 3 different ways to make good loading screens,

*Type-1* : Using [react-loading](https://www.npmjs.com/package/react-loading) library.
*Type-2* : Using [react-lottie](https://www.npmjs.com/package/react-lottie) library.
*Type-3* : Using simple **CSS**.

This post will be the 3-part series.

If you prefer to watch video tutorial then you can watch it here else just watch first 2 minutes to get an idea of what we're going to build here..and keep reading!😄

{% youtube Y7pL5wG5QOg %}

**Let's Start Building...**

Create your react app with,

`npx create-react-app React-Loading-Screen`

Next, install two libraries that we're going to use.

`npm install react-loading react-lottie`


> NOTE: Here, I'm using [jsonplaceholder API](https://jsonplaceholder.typicode.com/guide/) to get data, to show how we can use pre-loader when using API.


**Type-1**

Create separate file like PreLoader1.js.

Create Functional Component and here, we're going to use two state,

```
const [data, setData] = useState([]);
const [done, setDone] = useState(undefined);
```
**data state**: To store data which comes from API call.
**done state**: It is boolean to decide weather to show pre-loader or not.

Now in the useEffect,

```
  useEffect(() => {
    setTimeout(() => {
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((json) => {
          console.log(json);
          setData(json);
          setDone(true);
        });
    }, 2000);
  }, []);
```
Now in the above useEffect method,
First we use fetch method to get data from api then we convert that data into json,
then we will set data state with json data, and after that set done state to true.

>NOTE: Here I have used time out function for 2 seconds so that we can see loading screen for more time.

Now let's render our component.

{% gist https://gist.github.com/codebucks27/c173c40b93fdb4e48269c00cdeeec9d8 %}

*Line 22:* 
we will check if **done** state is false then we will render pre-loading component else we will render data we want to show.

*Line 23:*
Here I have used react-loading library, where we only have to set type, color, height and width. you can find more functionalities on [this](https://www.npmjs.com/package/react-loading) url.

*Line 30:*
From here I have mapped data state inside the ul tag which returns title of each post in li tag. *(use console.log() inside useEffect to see what kind of data we are getting)*

That's the end of Part-1 here.
A repository with more than 250 web development resources
Tags: react, html, css, webdev
Published: 2021-01-09 11:35:47

Hi, I'm Marian. I compiled a list with all my resources that have helped me in my web development projects in the last 2 years. 

[https://github.com/isarisariver/webdev](https://github.com/isarisariver/webdev)

I am currently working on a due-date driven task management app called [Cow Pilot](https://www.cow-pilot.io) and wanted to have a single location for all my links and snippets rather than having it scattered across multiple apps and browsers.

I divided it into the following categories:

- General
- Html
- CSS
- Javascript
- Node JS / Express JS
- Heroku
- React
- Libraries
- Landing Page
- MongoDB
- Design
- Git / GitHub
- VS Code
- Security, CORS and Authentication
- Auth0
- Videos
- Snippets and Commands


Most of the resources are aimed at (advanced) beginners I guess, since I am a noob myself. The resources range from Stack Overflow answers over long form blog posts to official references.

I hope it's useful. Feel free to share it.

Cheers,
Marian
Writing User-Friendly Logging With TypeScript and Node.js
Tags: node, logging, programming, softwaredevelopment
Published: 2021-01-10 11:23:21

---
title: Writing User-Friendly Logging With TypeScript and Node.js
published: true
date: 2021-01-09 11:34:22 UTC
tags: nodejs,logging,programming,softwaredevelopment
canonical_url: https://medium.com/swlh/writing-user-friendly-logging-with-typescript-and-node-js-6af6b3a5d2ab
---

[![](https://cdn-images-1.medium.com/max/1024/1*GZqljUTNQRNf9NvIJTNvcg.png)](https://medium.com/swlh/writing-user-friendly-logging-with-typescript-and-node-js-6af6b3a5d2ab?source=rss-269f954fad8c------2)

Comprehensive logging using text styling and emojis

[Continue reading on The Startup »](https://medium.com/swlh/writing-user-friendly-logging-with-typescript-and-node-js-6af6b3a5d2ab?source=rss-269f954fad8c------2)