teleren/devto huggingface dataset:
The Rule of Three, Life Hacks to make your Interviews (and just about anything else) Easier
Tags: interview, lifehacks, timemanagement, research
Published: 2021-06-20 00:52:05

<!-- wp:heading -->
<h2>The rule</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The Rule of Three is quite simple. In terms of any topic, commit to summarizing that topic in 3 points. Not two. Not four. Three.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Applying the rule: the interview process</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As a novice interviewer, I found the interview process to always be overwhelming. Even the rudimentary ritual of coughing up the 'elevator' speech always felt ham-handed, incomplete, and unsatisfying. Nowadays, I can recite it pretty smoothly:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> "My name is Michael Landry, I am a business owner, and software engineer, with experience in the government and financial industries"</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I'll admit, it's not the greatest elevator speech ever spoken, but I am comfortable with it, as comfortable as I am with just about most things, and it is the ease of mind that is so wonderful about the Rule of Three. By applying the Rule of Three, you know when you are 'Done.'  By only providing two points, it feels incomplete. By providing four points, it takes on a sense of rambling, which has always been a weakness of mine. Five is simply right out.  Three is the correct amount for just about any topic, and if we need to go deeper or extend on a point, you can simply take any point you already mentioned, and recursively apply the Rule of Three on a subpoint of the topic. Easy.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Use it everywhere</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I use this rule to shop for hotels, research something new, collect information, and just about anything. It's a good guide for making sure I don't waste too much time overkilling something that just needs a little attention, while supplying enough data points to establish patterns. </p>
<!-- /wp:paragraph -->
<i>Image courtesy of Columbia pictures</i>
Supercharge your .env powered projects!
Tags: env, hotreload, processenv, dotenv
Published: 2021-06-20 00:14:05

Hello out there !

I Just create a tiny lib to solve a common problem with .env files , 
... and wanted to share it :D

The Problem:
Well with git and other code versioning systems  we want to keep our secretes documented but conveniently ported to our code.
There comes dotenv lib  which does its job nice and smooth..

-- But --
If you want to update any of these env variables described in your .env file , you must stop/kill/close the proccess of your app , and restart it -- you guessed right.
Having a web server running 24/7  we don't want any zero down time at all..

Installation:
```bash  
npm install env-hot-reload 
```
or ```bash 
yarn add env-hot-reload
```

So here comes my lib ,( env-hot-reload ) in play 
```js
const  envHotReloader = require('env-hot-reload');
new envHotReloader({
function runs on every .env update
    watchInterval: 1500  // optionall default 3500
   }).watch()
```
after adding these 4 lines to your app , every change to .env will take effect instantly to your `process.env` variable.

Bonus:
You can specify a callback function to triggered every time something is changed to your config.

```js
const  envHotReloader = require('env-hot-reload');
new envHotReloader({
    onEnvChange: myFunctToCall, // optionall callback function runs on every .env update
    watchInterval: 1500  // optionall default 3500 in ms
   }).watch()

function myFunctToCall() {
    // your code to run on .env is updated...
  }
```
In github repo you will find an express server  under examples folder , which i found it a common use case .
Included a function to restart webserver in new port when you will change it from .env .

Give it a try ,
 I hope you 'll found it usefull ,
if you have any question just drop a comment 

Links:
https://www.npmjs.com/package/env-hot-reload
https://github.com/Kos-M/env-hot-reload

Thanks  for your time!!
Kos M <<
Adding Custom Easing to the Web Animation API
Tags: webdev, typescript, javascript, webanimation
Published: 2021-06-19 23:29:33

---
title: Adding Custom Easing to the Web Animation API
description: How to add custom easing to the Web Animation API (WAAPI). You do so, by using Arrays generated using easing functions.
canonical_url: https://blog.okikio.dev/adding-custom-easing-to-the-web-animation-api/
tags: webdev, typescript, javascript, webanimation 
published: true
---


I recently posted about [@okikio/animate](https://npmjs.com/@okikio/animate), a new Animation library that uses the Web Animation API (WAAPI) to create smooth, and highly performant animation.

{% link https://dev.to/okikio/okikio-animate-animejs-but-built-on-the-web-animation-api-nin %}

Well a major limitation of the Web Animation API and consequently [@okikio/animate](https://npmjs.com/@okikio/animate), was that it didn't support custom easing, this limitation is on the verge of being removed.

Based on a comment by @jakearchibald on Github and an article by [kirillvasiltsov](https://www.kirillvasiltsov.com/writing/how-to-create-a-spring-animation-with-web-animation-api/)

{% github https://github.com/w3c/csswg-drafts/issues/229#issuecomment-860778689 %}

{% github https://github.com/w3c/csswg-drafts/issues/229#issuecomment-861415901 %}

Using the fact that WAAPI allows for linear easing, I created a small function that generates a set of arrays that create custom easing effects like bounce, elastic, and spring. As of right now it builds on top of [@okikio/animate](https://npmjs.com/@okikio/animate) but that isn't absolutely necessary, it just may not be as comfortable as using it with [@okikio/animate](https://npmjs.com/@okikio/animate). 

You can view a demo below,

{% codepen https://codepen.io/okikio/pen/abJMWNy %}

As of right now if I add this to the [@okikio/animate](https://npmjs.com/@okikio/animate) library it will more than double the size of the library (_**Note**: treeshaking the actual package `@okikio/animate` while custom easing isn't in use will cause it to excluded from the final build reducing the size down to `~5.79 KB`_).

I'm not sure if I should make Custom Easing a separate package or build it directly into [@okikio/animate](https://npmjs.com/@okikio/animate), please tell me what you think in the comments below.

* * *

This article also appeared on my blog, [blog.okikio.dev](https://blog.okikio.dev/adding-custom-easing-to-the-web-animation-api).

Photo by [Ellen Qin](https://unsplash.com/@ellenqin) on [Unsplash](https://unsplash.com/photos/fIMqGvVaATk).
C# and ASCII art
Published: 2021-06-19 23:09:29

So I'm starting to learn C#. It's a legendary language and I feel like breaking out of the React path I've been on as soon as I finish building my restaurant POS with React and NextJS. I'll continue the blog following the build out and how to leverage Keystone.ts to build mutations and queries along with some fun tricks I learned from Wes Bos' Advanced React Tutorial. 
Today, however, we're starting a new journey, and as such, we're going to cover something kind of simplistic: ASCII art! 
I've always been in the dark as to how people made this kind of art. It is defined as the images a computer can create using the 95 ASCII characters defined by the ASCII Standard from 1963 including it's extended proprietary character sets. This all means, we can create cumulative images using our computer's printable characters combined in specific orders.
C# comes with its own `console.log` method but is better known as it's wordier version 
`Console.WriteLine()`.
How do we get data displayed in the the console? All we need is `Console.WriteLine()` and whatever message we want to world to see, like so:
`Console.WriteLine("I like Pizza!")`
Our love of pizza will be displayed on the console and we can revel in our computer savvy. The artistic capabilities of our WriteLine method are quite a bit more useful than printing out strings. You can create your own ASCII images by printing any combinations of characters, lined up strategically, to produce shapes and even value (the shading from white to black produced with the amount of characters that might overlap or lay adjacent to eachother). Since it's early on in my knowledge of C# and ASCII art, I won't show off my less-than-novice artistic sensibility but you can checkout a ton of examples here https://www.asciiart.eu/
Also, the next time you're hanging out in Visual Studio and need a break from the monotany, give Console.WriteLine a try and start stringing your "strings" together to create your own ASCII art.
Happy coding.
NightCode Summer Hackathon 2021
Tags: github, programming, hackathon
Published: 2021-06-19 22:51:39

NightCode's Summer Hackathon 2021 is a two day (48 hour) event managed by the non-profit organization NightCode. NightCode is a student-led, non-profit organization based in Dallas, Texas that aims to establish a community where we can spread enthusiasm and knowledge about Computer Science and technology through various events such as hackathons, workshops, guest talks and courses.

This hackathon is for middle and high school students of all experience levels. Teams have a maximum capacity of 4 people. Our theme will be announced during our Opening Ceremony.

We have a total prize pool of $1850 made up of prizes, merch and participation awards.

This hackathon is from July 9th to July 11th.

Devpost: https://nightcode-2021.devpost.com/
Website: https://nightcode.vercel.app/
Setting Up The Laravel Queue Worker on Heroku
Tags: heroku, laravel, php, cloud
Published: 2021-06-19 21:57:25

![Heroku photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kd7qw6v4vz1bjl7xfw13.png)

You've successfully deployed your Laravel App on Heroku. Next you figure out you can't start your queue workers like you normally would on your traditional apache/nginx servers. You try all the available commands but they all don't seem to work.

Here's how to set up a Laravel queue worker on Heroku to allow your long process task to run in the background.


All you have to do is enter a configuration for the Procfile that’s located in the root level of the project directory as well as spin up a new [Heroku dyno](https://www.heroku.com/dynos) instance.

To define the queue, you have to name the queue first (which can be anything that you want, for this example "worker") 

> **`worker: php artisan queue:listen `** 

and then proceed to chain it with the 
> **`php artisan queue:work`**

command to ensure it's running.

You can also pass any of the flags that are provided by the
> **`queue:work`**

command depending on your needs.  

Assuming your Laravel app has already been deployed, your next move is to run 

> **`heroku ps:scale web=1 worker=1 --app your-heroku-app`**

from your command line, and this will ensure that your Laravel application has another dyno called `worker`. Once you have done that, Heroku will be able to process your Laravel queues.
Memento Vivere
Tags: reflections
Published: 2021-06-19 21:47:04

---
title: Memento Vivere
published: true
description: Remember what life can do.
tags: Reflections
slug: memento-vitae
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bws2vd0uoev528u8kkyi.png
canonical_url: https://www.swyx.io/memento-vitae
---

{% youtube kYfNvmF0Bqw %}

> “When you grow up you tend to get told that the world is the way it is and your life is just to live your life inside the world. Try not to bash into the walls too much. Try to have a nice family life, have fun, save a little money. That's a very limited life. Life can be much broader once you discover one simple fact: **Everything around you that you call life was made up by people that were no smarter than you.** And you can change it, you can influence it… Once you learn that, you'll never be the same again.”
>
> — Steve Jobs

The common reminder, "*Memento mori*", is often interpreted as a call to withdraw our ambitions and not take pride in our achievements.

I worry that this makes us too fatalistic, nihilistic, and self centered. "Nothing I do matters, so why should I bother?"

*Memento mori* is no guide to life. Fortunately, I've found it has an opposite: 

**Memento vivere**. *Remember that you must LIVE*.

The way things are is often how we think the way things will always be. But nothing could be further from the truth:

- The iPhone was introduced in 2007, 14 years ago.
- The World Wide Web was invented in 1990, 31 years ago.
- The Personal Computer revolution started in 1977,  44 years ago.
- Richard Nixon took the US off the gold standard in 1971, meaning the current international financial system is only 50 years old.
- Color TV first aired in 1951, 70 years ago.
- Nuclear bombs were developed in 1945, 76 years ago.
- Automatic washing machines rolled out in the 1930s.
- Home radios and refrigerators were first introduced in the 1920's.
- Henry Ford first sold the Model T automobile in 1908.
- Thomas Edison started the Edison Electric Illuminating Company in 1882.
- Alexander Graham Bell made the first telephone call in 1876.

What are we doing today that will find its place on a list like this, 100 years from now?

{% tweet 1394098022523490305 %}
How to Make a Bar Chart Race With Python in 2 Minutes
Tags: python, chart, tutorial, programming
Published: 2021-06-19 21:35:41

## How to create a cool bar chart race animation the easiest way.

**Prerequisites:** having Python installed on your pc or being registered for Google Colaboratory.

# Step 0

First create a new directory for the project (if you use Google Colaboratory skip to step 1)
```
mkdir my_bar_chart_race
```

Then create a new virtual environment, and activate it
```
python3 -m venv venv
source venv/bin/activate
```

# Step 1
If you haven’t already, install pandas
```
pip3 install pandas
```

Install the library we’ll use to create the bar chart race named, you won’t guess it, bar_chart_race
```
pip3 instll bar_chart_race
```

# Step 2
Now that we have the necessary libraries installed, let’s load our data.

In this tutorial, we’ll create a bar chart animation of the 2020 MotoGP World Championship’s title race. If you’re not familiar with this sport — that’s bad — don’t worry.
I will sum it up briefly for you to better understand what the data means.

## How MotoGP works
MotoGP is the premier class of motorcycle road racing. A championship is held every year and consists of many races (or Grand Prix). After each Grand Prix, each rider gains some points depending on his final position at the GP. At the end of the season, the rider with the most point wins the championship.

The point system in use since 1993 is the following:
![1_fF8ZmCdekNvNOqRSpmEMsw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf2hmvafy5nnwz83053c.png)
 
## The dataset
![1_Ae6Xx-cugqR_oSVK0S4tBg (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khbp03pwtujvoutv9xo7.png)
 
You can find the dataset [here](https://gist.github.com/lorenzofelletti/36df65f62e927108b628614030a25cda).

# Step 3
Now the cool part: coding!

## Import the libraries
```Python
import pandas as pd
import bar_chart_race as bcr
```

## Load the dataset
```Python
df = pd.read_csv('./2020-championship.csv')
df = df.set_index('race')
```

## Let the magic happen
The final result is only one line of code away
```Python
bcr.bar_chart_race(df=df, title='2020 MotoGP Championship Race', orientation='h', sort='desc', n_bars=10, steps_per_period=40, period_length=2000)
```

Ok, we’ve done with the coding. You can save and run the program, and you will obtain as output the bar chart race video.


# Done!
Congrats, you’ve finished. As easy as that.

{% youtube ZVJ2n3m-bug %}

That was just a short introduction to this library. You can unleash your imagination creating much more advanced races with it.
Top 10 Programming Interview Questions
Tags: ios, webdev, javascript, productivity
Published: 2021-06-19 21:25:07

#####In this Tutorial, I have Provided the Most Common Coding Interview Questions

We are all aware that answering the most basic coding or programming interview questions determines how we perform in an interview. The interview may be for Java, C++, or a JavaScript requirement, but the basis remains the same, that is how strong we are in the foundations of programming logic.

Also if our approach is prompt and subtle in an interview, the probability of selection is higher. So read on for cracking the coding interview questions.

Q #1) How can you reverse a string?

Q #2) How to get the matching characters in a string?

Q #3) How to get the non-matching characters in a string?

Q #4) How do you prove that the two strings are anagrams?

Q #5) How to calculate the number of numerical digits in a string?

Q #6) How to compute the first character of a string that is not repeated?

Q #7) How to get the matching elements in an integer array?

Q #8) Implement the insertion sort algorithm.

Q #9) How to perform swapping two strings by not using a third variable?

Q #10) Implement the process of reversing a linked list.

Q #11) How to get the length of a linked list?

Q #12) How to verify if a number is prime or not?

Q #13) Compute the first five Fibonacci numbers.

Q #14) How to reverse a number?

Q #15) Determine the factors of a number.

#####I have a [Instagram Theme Page](https://www.instagram.com/vikcodes/) related to programming, you can follow it if you want to :)

If this blog gets a good response then I will provide the answers of this questions ( who don't know that ) although you can always search the questions and get the answers yourself

You can also tell the topic in which you want the next blog :)

Yup another small blog though ;-;
Need ideas about some SW/application for writing
Tags: typescript, angular, reactnative, node
Published: 2021-06-19 16:49:57

Hi, I want to write about some technical discussion about system designs, architecture designs, programming techniques and how to deal with troubles in real-world but I've found that it is very difficult to just explain topics via multiple arbitrary and unconnected examples. I've got some topics in my mind but I cannot convey them into words. My writing is not good enough. So I'm thinking of implementing some real product while writing about it at a same time. I can post all the design considerations here and will receive feedbacks which will help me (and maybe other people) a lot.

The problem is that I cannot think of any ideas about software/applications that are not only practical but also useful for real-life use cases. Simple case studies are good but I'm afraid of that the readers will lose the interest. So any suggestion would be welcome and appreciate.

Thank you very much.
FARM STACK [ FastAPI +React+ mongoDB]
Tags: mongodb, python, react, webdev
Published: 2021-06-19 21:09:31

{% youtube oGwszbCH5Z4 %}


This is my latest video on YouTube, the FARM stack course, although this stack is not as popular as MERN, MEAN , LAMP, JAM etc.. it is my favorite stack, I created a full fledged application using FARM stack for a client who wanted to take orders for her flower shop that consists of 4 branches in the Polish capital, Warsaw.

The prerequisites to follow along is to have the basic understanding of the following  :

1- HTTP request methods
2- Async/Await Syntax
3- Python language in general and FASTAPI in particular
4- JavaScript ES6 and React JS basics
5- Database systems, and specially NOSQL
6- Fundamentals of MongoDB
7- How client talks to the server (Axios/ HTTP methods)

I hope you will enjoy the video, you can contact me here by dropping a comment or you can mail me on info@bekbrace.com

Source code: https://github.com/BekBrace/FARM-Stack-Course

Have a good one - Bek
JS30 Days 11- 14
Tags: javascript, javascript30, learninpublic
Published: 2021-06-19 21:00:04

This post is a few days late because I had a bit of a setback this week. My apartment lost power and internet for a couple of days, everything is fixed now but it was definitely stressful to deal with. 

## Day 11 - Custom HTML5 Video Player 📀
[GitHub](https://github.com/beendra/JS30/tree/main/11%20-%20Custom%20HTML5%20Video%20Player)
The versaitlity of event listeners is amazing. I was suprised that with a few choice event listeners and functions that most of the functionality of a video player can be created. I had thought that this one would be way more complicated than it was. I think my favorite function created in this app was handleProgress() for updating the progress bar while the video was playing. 
![Screen Shot 2021-06-18 at 9.15.03 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nyqebsjdpvz99xx934c.png)
 
---

## Day 12 - KOANMI Code, Key Sequence Detection
[GitHub](https://github.com/beendra/JS30/tree/main/12%20-%20KONAMI)
KONAMI code is when someone inputs a sequence of keys and then it causes something to happen like an easter egg on a site. To make that happen there needs to be key sequence detection on an input/the window/etc for that secret key to be heard. I like that this exercise gave some more pracitce with using .splice() on an array and I loved that there is such a thing as cornify_add(). The creativity of fellow developers is always amazing to me.
![Screen Shot 2021-06-19 at 2.45.34 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o9smceu7ffbj6032h9o.png) 

---

## Day 13 - Slide in on Scroll
[GitHub](https://github.com/beendra/JS30/tree/main/13%20-%20Slide%20'n%20Scroll)
This was a little more complicated than I expected. This one created a page where images were hidden and would slide into the frame and become visible on scroll. Since the event listener was on scroll, a debounce function was used. The debounce function is available in many languages and it limits the rate that a function will fire at. So it will only run the function we need through debounce by the designated amount of time given which makes for a smoother running and more efficient application. 
![Screen Shot 2021-06-19 at 3.10.35 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga1iwvcq1zi8u8hpz3f8.png)

---

## Day 14 -
[GitHub](https://github.com/beendra/JS30/tree/main/14%20-%20ObjectsArrays%20ReferenceVsCopy)
This exercise was all about Object and Arrays and making a reference vs. a copy and how they can be manipulated. If you make a reference to an array and update that array it will edit the original array as well because it is an array reference and not an array copy. So they both are pointing to the same array. To fix this a copy needs to be made instead. There are a few techniques to do this. You could .slice() to make a copy of an array. You can also create a new array and concat the old one or even use the ES6 spread operator. When those new copies of arrays are created and updated, the original one is not changed. This also applies to objects.