teleren/devto huggingface dataset:
Heroku Free Plan: How to improve user experience
Tags: heroku, javascript, ux, serverless
Published: 2021-07-18 18:17:37

Do you have multiple projects hosted on Heroku? Today, I will show you a workaround for dealing with Heroku's 10-30 secs load times and provide a better experience for your users.

Heroku can be a great PaaS solution for quickly deploying your projects/portfolio and sharing it on the web. But a significant drawback is that your app will go to sleep after 1 hour of inactivity. So unless you are planning on paying for the service, users viewing your project will often have to wait between 10-30 seconds before your app wakes again. You can find more information on this topic [here](https://blog.heroku.com/app_sleeping_on_heroku).

There's nothing worst than putting lots of work on a project to have most of your users clicking away. So today, I will show you how to improve the user experience of slow loading times and increase your user retention rate in three simple steps.

### Step 1: Setup
You will need to create a loading page to provide user feedback(eg. progress bar) and redirect the user to your app once your Heroku app has woken up. You should host the loading page on a site that will respond to a user request right away, such as Netlify or Vercel. And the page must handle dynamic routing to retrieve the project id from the URL parameters. I decided to add a loading page to my portfolio site that I've built using NextJS and hosted on Netlify.

### Step 2: storing your data and routing
You should have a place to store all the information about your projects. I decided to create a separate JSON file. Each project must have a unique ID and a link to your app hosted on Heroku. Every time a user visits your loading page, we will use the project's ID to retrieve the app's URL hosted on Heroku. 

### Step 3: Fetch and Redirect
Now that we have the Heroku URL, we will make a fetch request to this URL and wait for a response. In the meantime, we can show a loading progress bar to the user. Then redirect the user once Heroku responds to our fetch request. And that's all!

####Progress bar animation
Here is how I configured my progress bar animation to provide user feedback.

On average, a Heroku app will take 10-15 seconds to wake up. Therefore I  configured my progress bar to fill up to 97% within 15 seconds. If the Heroku app responds before the 15 seconds are up, I will redirect the user to my Heroku app. And if that Heroku takes longer than 15 seconds to load, I would redirect the user either way. I figured that after 15 seconds have gone by, the user will most likely click away due to the long wait time. 




#####And the final product...

![Loading Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54q75usx4d6h14ldxoq9.gif)

Thanks for reading, and I hope this article helps you showcase your projects to more people.
Learn Working with Git and Bitbucket
Tags: bitbucket, git, github, version
Published: 2021-07-18 18:03:51

In this article, I will explain to you how to work with git and bitbucket. This is a direct practice example for the beginner

Before start this article please read some good tutorial about git so you can understand well.

###### Step: 1 Download Git and install

Download Git  https://git-scm.com/download and then install.
![Download Git and install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzrbk63zechvvigxgywv.png)
No need check anything on the installation process just click next on the whole process.

######Step: 2 Create an account at Bitbucket

Create an account at https://bitbucket.org
![Create an account at Bitbucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qajo79tm8u4i0jzyhp8.png)
######Step:  3 Run Git Bash
![Run Git Bash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xftvtbx181mp4tvqt6cd.png)
######Step: 4 Git setup command (Only first time of git setup)
1. git config –global user.name “Name” **e.g (git config –global user.name “yuvrajkhavad”)**
2. git config –global user.email “your email id” **e.g (git config –global user.email “yuvraj@zindex.co.in”)**
3. ssh-keygen
4. Press enter without entering any file name.
5. Enter the two-time password then display a newly generated file path. **(Note: This password will use for clone project, push project and pull project).**
6. Open file folder mention in git bash and copy the key from those locations
7. Then add a key in Bitbucket 
    1. Log in to Bitbucket.
    2. Go to **View Profile**
    3. Click on **SSH keys** and then **Add key.**
    4. Paste the key into the text box:
    5. Click **Add key**. You’re done!
8. Then create a new project repository and copy the project URL because we have to use at step 5.1

###### Step: 5 then move the folder to the location where you have to clone project

1. cd c: **(Note: Move-in C directory)**
2. cd test/ **(Note: Move to a particular folder of your project)**

######Step: 6 Clone (copy) project in the local computer (Only first time of starting new project)
1. git clone <git repo url>   e. g (git clone git@bitbucket.org:zindexsolutions/test.git)
2. Then type “Yes”
3. Then enter your password

###### Step: 7 Regular Commands

1. git status
2. git add . / -A                   **e.g (git add .)**
3. git commit -m “<commit message>” **e.g (git commit -m “First Commit”)**
4. git pull origin <branch name> **e.g (git push origin master)** It will copy files bitbucket to local
5. git push origin <branch name> **e.g (git push origin master)** It will upload files local to bitbucket account

It’s done. Let me know have any problem happy to help. Just sent mail at **yuvraj@zindex.co.in.**
HTML Lists part 2
Tags: html, webdev, beginners
Published: 2021-07-18 17:52:15

This post is part 2 of 2 on HTML Lists.  Previously I covered `<ol>, <li> and <ul>` elements. If you would like to see that blog post:
https://dev.to/charityparks/html-ol-li-and-ul-elements-explained-19dp
Today i'm going to cover `<dl>, <dt> and <dd>`.

The `<dl>` element is how you create a 'definition list'. This would typically be muliple terms and their definitions. Inside the `<dl> element you will have <dt> and <dd>` elements.  `<dt>` stands for 'definition term' and the `<dd>` stands for the 'definition' itself. 

Here is an example of the code followed by the result:

Code: 

`<dl>
  <dt>Twine</dt>
  <dd>Light thread</dd>
  <dt>Yarn</dt>
  <dd>Long continuous length of fibers</dd>
  <dt>Rope</dt>
  <dd>Multiple strings that are twisted together</dd>
</dl>`

Result:

Twine
    Light thread
Yarn
    Long continuous length of fibers
Rope
    Multiple strings that are twisted together

Enjoy and Happy Coding!
Linux: echo
Tags: linux, bash
Published: 2021-07-18 17:46:05

# echo

* Write output to standard input


| Option      | Usage       | Example       |
| :-----:     |  :----      | :---          |
| `-n`        | Do not appened to a new line. The terminal curser will be in the same line as the output instead of being in a new line by default . | `[aaakriti@aakriti ~]$ echo -n "Harry Potter" ` <br /> `Harry Potter[aaakriti@aakriti ~]$ write your next command here`|
| `-e`        | enables interpretation of `\` backslash escapes        | Will be used in combination of `\` options      |
| `-E`        | Opposite of `-e`. Explicitly supress interpretation of backslash escapes       | Will be used in combination of `\` options   |
| `\a`   | Alert through Volume. Make sure your volume is high. It will ring a *ting* on an output        | `[aaakriti@aakriti ~]$ echo -e "\aHarry Potter"`  <br /> `Harry Potter`    |
| `\b`      | Backspace, removes all spaces between the texts       | `[aaakriti@aakriti ~]$ echo -e "Harry \bPotter"` <br /> `HarryPotter`   |
| `\b`   | It removes the n no. of character occurring before the `\b` used. Depending on the no. pf times used        | `[aaakriti@aakriti ~]$ echo -e "Harry\b\bPotter"`  <br /> `HarPotter`     |
| `\c`      | Suppress further output. Will not output whatever is written after `\c`       | `[aaakriti@aakriti ~]$ echo -e "Harry \c Potter is my favourite"` <br /> `Harry`   |
| `\e`      | Escape character. Omits the just next single character succeeding to `\e`      | `[aaakriti@aakriti ~]$ echo -e "\eHarry"` <br /> `arry`   |
| `\n`   | Creates a new line        | `[aaakriti@aakriti ~]$ echo -e "Harry \nPotter \nis \nmy \nfavourite"` <br /> `Harry` <br /> `Potter` <br /> `is` <br /> `my` <br /> `favourite`     |
| `\r`      | Carriage return. Will not return whatever is return before `\r`. opposite of `\c`    | `[aaakriti@aakriti ~]$ echo -e "Harry \r Potter is my favourite"` <br /> ` Potter is my favourite`   |
| `\t`   | Horizontal tabs. Use tabs as spaces.     |  ![Example](https://github.com/Aakriti94/articles/blob/master/linux-commands/Images/echo-t.jpg)  |
| `\v`   | Vertical tab space. In a slanting manner       | ![Example](https://github.com/Aakriti94/articles/blob/master/linux-commands/Images/echo-v.jpg) |

## Other tricks

| Option      | Usage       |
| :-----    |  :----      |
| `echo *`   | Lists all files and folders        |
| `echo $x`      | echo value of a variable       |
| `\n + \t`   | new line + tab        |
| `\n + \v`  | new line + verticle tab  |
| `echo "Test" > testpage.log`  | will add contents to a file |
| 1. `echo 'Harry "Potter"'` <br /> 2. `echo "Harry \"Potter\""`  | `Harry "Potter"`  |
| `echo $(command)`  | Output of the command |
| `echo ~`  | home folder  |
| `echo {1..5}`  | `1 2 3 4 5`    |
| `echo $((50*2))`   |  `100`   |
| 1. `echo -e "\033[1;37mWHITE"` <br /> 2. `echo -e "\033[0;34mBLUE"` | Display in respective colors|

## Fun tricks

* Make someone get lost in dark black world of linux: 
` echo -e "\033[0;30mBLACK"`
{"mode":"full","isActive":false}
React 18: What’s changed? [Automatic Batching]
Tags: react, javascript, webdev, reactnative
Published: 2021-07-18 17:39:14

Since it’s initial release back on May 29, 2013, React has gone from strength to strength, finding new and exciting ways to shake up the Front-End world. Most developers can certainly agree that React has revolutionised the way in which we create and implement user-friendly interfaces. Certainly If you are a React developer, then there is no doubt that you’ve heard about React 18.

Obviously there is still a lot more information yet to be released, but in this series of posts we are going to take a quick 1 minute dive into some of the latest and greatest features that React 18 has to offer us. 

###Automatic Batching

A revolutionary new feature that React 18 is set to offer us is automatic batching. If you haven’t already heard of batching in React, it is what happens whenever multiple state updates are combined into a single re-render. If you’re calling multiple state updates in a different context such as a callback, a promise or a timeout, React won’t batch these two updates into one and you’ll get two re-renders when you probably only needed one. With automatic batching the plan is for state updates to be batched automatically by default, regardless of the context. You will still have the option of not batching your updates, but you will need to use flushSync to re-render your component every time it has finished running the function. As flushSync actually forces the complete re-rendering for updates that happen inside of a call, you should use it very sparingly.

In the next post we are going to take a look at Transitions!
JasonBase ProcessWire Example
Tags: php, processwire, json
Published: 2021-07-18 17:21:49

---
title: JasonBase ProcessWire Example
published: true
description: A place to store your jsons
tags: php, processwire, json
//cover_image: https://direct_url_to_image.jpg
---

This is just an experiment I made some years ago that enables you to store jsons in a website. Although I recommend using other services like https://neocities.org/ but this is fine for testing and quick mockups.

{% github joyofpw/jasonbase %}
Güneşte kurutarak biber salçası nasıl yapılır?
Published: 2021-07-18 17:21:30

Güneşte kurutarak biber salçası nasıl yapılır? Güneşte kurutarak biber salçası hiç bir kaynatma işlemi olmadan olarak özellikle Urfa Biber salçası olarak bilinen bir salça türüdür. 

Urfa biber salçası olarak bilinen dünya'nın en kaliteli salçalarından biridir. tamamen güneşte kurutularak ince ince serilerek yapılan bir salça türü olduğundan dolayı biber salçası çok lezzetli olmakla beraber yemeklere kattığı lezzet oldukça lezzetlidir. 
<a href="https://urfayoresi.com/product-category/salca/">https://urfayoresi.com/product-category/salca/</a>
What is Data Science?
Published: 2021-07-18 17:01:11

Did you know how big tech companies like Google, Facebook, youtube, amazon know what are you looking for .?? How to they suggest the things that you think of like if you are buying a mobile from amazon how do they suggest a back cover and guard glass for your mobile through you haven't searched for it. ?
How Facebook, google shows the advertise of the same thing that you searched a few minutes ago in amazon or in Flipkart .??




It's all because of the data scientist who are hired by the companies to write machine learning algorithms so that they can recommend the things of your choice.




# So what is Data Science?
Data science is the multi-disciplinary field that uses scientific methods, processes, algorithms, and systems to extract knowledge and insights from structured and unstructured data.

Data scientist should have skills in these fields: - 




Roles and responsibilities:-
Let's discuss each field and how they are inter-related to each other. 

First thing a data scientist should know is the Business understanding of the company or else it won't be possible to solve the problem. 
The second thing is to collect the data.
And then comes Data cleaning i.e, handle the missing values, applying one-hot encoding & related stuffs, then as the data is ready to use. 
Data exploration comes into play where the data is visualized using graphs so that they could get an idea of the data.
Then Feature engineering comes it's main aim is to lower down the features that are not important or they are not playing a vital role in the dataset.
So after that, the dataset is ready to fit into a model then machine learning algorithms are being applied to train the data and to make predictions.
After that we have to visualize the data using graphs and plots and have to make a report and share it to stakeholders then they take decisions on how they can increase the sales of the company.

![Data science](https://dev-to-uploads.s3.amazonaws.com/i/85msvwnpu1iy3e8mftvo.jpeg)

Conclusion:
Data science is a buzzworthy career. People of any domain can pursue a career in it but must have an idea of maths, statistics, programming language and it is a fast-growing career and have a lot of opportunities for freshers.
IPFS or HTTP
Tags: ethereum, blockchain
Published: 2021-07-18 17:01:04

Today I am going to talk about IPFS and what it is. IPFS or **InterPlanentary File systems** is a protocol and peer to peer distributed file system. You can compare IPFS to HTTP, which I will discuss soon.

Right now when we surf the web our data is being kept tracked by big tech companies such as Google and Facebook. They are able to store the data that they have about each user in a central location and use the data however they would like to. We as a user do not have any control over the data that they have.

Lets talk about how centralized applications store data and how IPFS stores data.  In centralized applications location based addressing is used and  IPFS uses content based addressing as you can see below.

![content-based-addressing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnj01tk65o84jm3tt5et.PNG)

 With IPFS you are able to store the following:
 
 1. text
 2. images
 3. videos
 4. websites
 5. dapps

The data is stored decentralized and you have control over your data not another company. That is powerful because you as a user have full control of the data that you produce. The data can not be changed or manipulated by another user.

Many companies are using IPFS, such as Brave, Audius and Fleek to name a few. IPFS is a really powerful tool and I look forward to using it in future projects.

Here is a link to the IPFS white paper if you would like to learn more about the protocol.

https://github.com/ipfs/papers/raw/master/ipfs-cap2pfs/ipfs-p2p-file-system.pdf

Thanks for reading.

Happy coding!
Day 145
Tags: 100daysofcode, programming
Published: 2021-07-18 16:54:26

Day 145/200 of #200DaysOfCode #100DaysOfCode 

- Solved four problems on Codewars.

1 - Fun with lists: countIf (6 kyu)
2 - Fun with lists: lastIndexOf (7 kyu)
3 - Fun with lists: indexOf (7 kyu)
4 - Fun with lists: length (7 kyu)
Build a Netflix Landing Page Clone with HTML and CSS
Tags: webdev, html, beginners, tutorial
Published: 2021-07-18 16:49:52

## Getting Started
In this video,we will build netflix clone using html and css.This  tutorial is target towards beginners who want to improve their design skills by cloning website using html and css.
Download the starter file via [github](https://github.com/learnwithchristopherglikpo/netflix) in order to follow along with the video.

{% youtube nrYUIq17C6c %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Looking to get started with video/podcasts? Here is an amazing tool 🚀
Tags: tutorial, podcast
Published: 2021-07-18 16:49:25

Hey There! 👋🏾

If you have been thinking of starting something in the video/podcast space but have postponed it because of your speaking skills not being up to the mark?

Well, here's is a tool that can help!

I recently purchased the lifetime deal for an **Appsumo** product called **play.ht** that lets you create realistic audio by typing in a text script and I must say I'm amazed!

{% youtube PFT4eDg3By8 %}

Here is the [link](https://play.ht/) to the site where you can try it out yourself. 

#### Impressed? There's more!

If you look at the pricing on the official website, you can see they are all recurring subscriptions 😔
![pricing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1e4xslwecsgfow8mh2i.png)

---

But just for the next few hours, **Appsumo** is running a deal wherein you will be able to get a 🎉lifetime membership🎉 for Play<dot>ht. Check out the deal by clicking the image below (*affiliate link*):
[![appsumo deal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfx97ek0rieyauw7nx6h.png)](https://appsumo.8odi.net/5bA062)


Check it out and go for it if the product matches your requirement. It even comes with an inbuilt **podcasting** solution!

I've bought it and will be using it for videos on my [YouTube channel](https://www.youtube.com/c/ComScienceSimplified). 

That's all for now 🙌🏾 Follow me on **twitter** for more frequent updates:

{% twitter 1414997357477777411 %} 

Cheers!
Developer tips you need to know
Tags: showdev, discuss, devjournal, codequality
Published: 2021-07-18 16:48:05

Before building a website 

People usually say to learn HTML, Css or Javascript or any web technologies 

Or backend like node js, mongo, firebase etc.

But there is something more important than that before getting started / while building

![Coding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bps3d4qp7qy7qqh6x8rr.jpeg)

📌 Make sure you have a proper folder structure before writing the code

You cannot just fill code in your app just like that

📌 Make sure the number of lines in a file doesn't exceed a specific limit

And incase it exceeds make sure you split the code into different modules or files

📌 The character limit of the line of code also shouldn't exceed much 

You can check some of the eslint best practices for this

https://eslint.org/

📌 Make sure you add comments in the code. Even if you are a pro in coding if someone else views your code they must be able to understand

📌 Have meaningful names,

let a = 10 ❌
let num1 = 10 ✅

📌 When building also make sure you use constants and make sure similar code is not repeated.

📌 There is something called TDD - 
Test Driven Development

Most don't use it, make sure you write test cases both frontend and backend it is essential for building a perfect application

📌 An app created with test cases will be more noticed than a normal app especially in interviews 

📌 Even after developing an app and pushing your code in git make sure you specify the version (Eg- node or react version ) of the technology you have used

📌 Because somecases people may clone your repository & if it doesn't work your work may get unnoticed

📌 Above are some of the points which I look into working on other people's code especially

Or when I develop applications

If you have any more input feel free to mention in the comments below.

If you find this post valuable share it with your friends

For more tech information & developer tips stay connected with me via [Twitter](https://twitter.com/Dhanush_Nehru)
Competitive Programming Goals
Tags: documenting
Published: 2021-07-18 16:38:24

> Every start has an end, whether we like it or not. But, the process you go through during those times, makes you a better version of yourself.

Let me write down where I want to be, with regards to my competitive programming skills.
I will divide it into two parts: 
- Maths 
- Art 

#### Maths: End goals. Quantitative. Win/Loss.

2021: Base building.
- Learning the basics algorithms and data structures.
- Codeforces: Specialist by the end of year.

2022: Introducing yourself.
- Master on codeforces.
- Google CodeJam Top 2000.

2023: Attacking
- Legendary GrandMaster
- 1st on the world ranking Codeforces, Atcoder.
- Google CodeJam Winner.
- Facebook HackerCup Winner.

#### Art: The journey. Road less taken.
- Document the journey of learning and being the best in the world.
- Consistently practicing and enjoying new algorithms.
- Writing some real life code example.
- Learning Parallel algorithms.
- Inspire atleast one person to take up competitive programming.
 
The goals are looking far bigger right now, as it should. Further we practice, better will be the chances of achieving them.
We will always keep adding or subtracting to this goal list. And at last, if we don't achieve the goal we will label it as an experiment :-) But let us not think ahead now. Keeping my head down and starting practicing.

P.S: The end goal is to beat `tourist`. xD