teleren/devto huggingface dataset:
How do I organize my work day (+Tools)
Tags: productivity, linux, ubuntu
Published: 2020-08-22 14:35:29

Every day, before getting into work, I always take 5-10 minutes to plan my day. That involves listing all the tasks that I want to get done in:

* The current sprint at [Kudos](https://www.kudos.com/)
* Personal errands
* Home tasks
* Any hobby (music, reading, podcasts...)
* Any other thing that is on my mind

And here it's how I do it!

## First things first (The magic tools)

### 1. ElementaryOS
I have to say that I am a fan of Linux and especially a big fan of **[ElementaryOS](https://elementary.io/)**. It looks incredibly beautiful and it is so easy to use that I don't feel like using any other OS these days.

### 2. Planner
And by using ElementaryOS in my day-to-day work I came across a task manager called [Planner](https://blog.elementary.io/appcenter-spotlight-planner/).

Here are some features that I find very very useful:
* Put each task into its project (Work, Personal, Home)
* Set subtasks to each task
* Create recurring tasks
* Set deadlines
* Cloud Sync if I need to access it from my phone (Todoist)
* Most important: List all the tasks that are due to Today 🎉️ 🚀️

![My Planner](https://dev-to-uploads.s3.amazonaws.com/i/3n3rkxfpbjn753hci2td.png)

## How I use it

Simple as that: Before starting my day I open "Planner" and write down everything that I need to get done by the end of the day.

As the tasks get done I check them off the list and if something does not get finished I just reschedule it for the next day. That will be the first I will see in the morning when opening my computer.

## Try it for yourself

Before starting your day, try taking some time to write down what you need to get done. And it doesn't matter if you are using ElementaryOS, Planner or any other tool. Just write it down because **once you do it you feel like you just committed to something.**

## Bonus

If you don't use ElementaryOS or Planner here are some tools to achieve the same effect:

* 📰️ Notebook (classy and effective)
* [Todoist](https://todoist.com/pt-BR)
* [Google Keep](https://keep.google.com/)

> What other tips do you have to plan/organize your daily routine?
How Tesla has been Optimizing its Software and Hardware for FSD Capabilities and a Hyper Efficient Robo-Taxi Fleet?
Tags: computervision, activelearning, selfdriving, robotaxi
Published: 2020-08-22 14:35:01

**Full article:**
https://medium.com/towards-artificial-intelligence/how-tesla-has-been-optimizing-its-software-and-hardware-for-fsd-capabilities-and-a-hyper-efficient-21493079b9bd?source=friends_link&sk=efab60f937d28854911d84aa6b463772

## Motive:

I have been following and hearing about Tesla’s work over the past 6 years or so, but I have been listening to them only from the past couple of years.

I believe, to innovate, we need to stay curious and push the boundaries of our scientific limits. Needless to mention, incorporating an optimistic mindset and culture is pivotal to overcoming the challenges while pursuing these endeavors. Also, Innovation (say, space exploration) fosters a peaceful connection with other nations by finding a common ground. This article is one such example that encompasses my understanding and intuition of Tesla Autopilot AI and its potential that are backed by some facts and ongoing research.

## Brief Overview:

**PART 1:** Andrej Karpathy (Director of AI and Autopilot Vision)
Concepts covered: The Essentials for Neural Networks (Large dataset, Varied dataset, Real dataset), Object Detection, Corner Cases, Data Engine, Fleet Labeling & Learning, Path Prediction, Depth Perception from VISION only.

**PART 2:** Stuart Bowers (Former VP of Engineering)
Concepts covered: Packaging the Hardware and AI into a viable product at production, Sensor Redundancy, Vector Space, Shadow Mode, Feature life cycle.

**PART 3:** Pete Bannon (VP of Hardware Engineering)
Concepts covered: A Full Tour of FSD Computer — Image Signal Processor, Neural Network Processor, Video Encoder, GPU, Main Processor, Safety System, Security System, Control Energy, Post Processing, Neural Network Compiler, HW 2.5 vs FSD Results Comparison.

**PART 4:** Elon Musk
Concepts covered: The Robo-Taxi Fleet & Cost Model, The Future of Self-Driving.

Read the full article on Medium:
https://medium.com/towards-artificial-intelligence/how-tesla-has-been-optimizing-its-software-and-hardware-for-fsd-capabilities-and-a-hyper-efficient-21493079b9bd?source=friends_link&sk=efab60f937d28854911d84aa6b463772
FILE COMPRESSER USING PHP
Tags: file, compress, zip, archive
Published: 2020-08-22 14:33:23

Today i was looking for various means to compress all files using PHP without using any third party online tools but unfortunately what i found was zip archives compress, zar and the rest. There was no single library on the internet designed with PHP to handle file compression including compressing zip files. I was curious and i had to design one.

I eventually did the design which i tested with a zip file having size of about 9.5MB and my PHP Class was able to compress this down to 8.2MB which was still okay for me. At least over 1.3MB was removed from the actual zip file.

I know you will want to ask whats the difference. The truth is that assuming you have a whole bunch of those zip files lets say 10 in which each had 9.5MB. Calculating this will give you a bunch of 95MB, thats lots of memory.

Looking through this you will see that over 13MB difference was removed when compressed. This 13MB could be used to save other files.

Designing a class that does this job took me 4 hours with over 15 test analysis.

If you are also curious about me and wish to use my library for your applications below is how to use it.

## Install:
Use composer to install
```php
composer require mitmelon/compress
```

## Usage :

```php
require_once __DIR__."/vendor/autoload.php";

// Initialize library class
$compress = new Compress\Compress;

/**
 * @param $filePath string
 * File location to be compressed
 *
 * @param $storePath string
 * Path to output compressed binary file to
 *
 */
$compress::compressFile($filePath, $storePath);

//Compress Image file
$compress::compressFile(__DIR__.'/image.png', __DIR__.'/image.txt'));

// Compress PDF
$compress::compressFile(__DIR__.'/file.pdf', __DIR__.'/file.txt'));
//Compress as lot files you want including zip files

/**
 * UnCompress Image file [Get original file back from stored binary]
 * @param $storePath string
 * Path containing binary file which was compressed
 *
 * @param $fileOutputPath string
 * Path to output original file to
 *
 */
$compress::uncompressFile($storePath, $fileOutputPath);

//Uncompress Image
$compress::uncompressFile(__DIR__.'/image.txt', __DIR__.'/image.png');

// Uncompress PDF
$compress::uncompressFile( __DIR__.'/file.txt', __DIR__.'/file.pdf')

```

You can also find the github library here.
https://github.com/mitmelon/Compress
  

Please feel free to make a pull request incase you find any bugs or want to add something to it.

Best of wishes.
NaN - It's Not A Number🙄
Tags: javascript, webdev, node
Published: 2020-08-22 14:15:39

According to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN), 

> NaN is a property of the global object. In other words, it is a variable in global scope.

> The initial value of NaN is Not-A-Number — **the same as the value of Number.NaN**. In modern browsers, NaN is a non-configurable, non-writable property. Even when this is not the case, avoid overriding it. It is rather rare to use NaN in a program.

Hear the value of NaN is Number.NaN. But, wait!

```javascript
NaN === Number.NaN // false
```

Maybe because of the type you think🤔

```javascript
NaN == Number.NaN // false
```

Somewhat reasonable explanation started [here](https://en.wikipedia.org/wiki/NaN#Comparison_with_NaN) when I followed the links.

With a lot of confusion around NaN, let us see how we could arrive at a value of NaN.
There are 5 different operations which could result in NaN.
+ Numbers that can't be parsed
```javascript
parseInt('Integer') ⇒ NaN
Number('%^@#') ⇒ NaN
```

+ Math operation where the result is not a real number
```javascript
Math.sqrt(-1); ⇒ NaN
```

+ The operand of an argument is NaN
```javascript
NaN + 20 ⇒ NaN
60 * NaN ⇒ NaN
```

+ Indeterminate form
```javascript
0 * Infinity ⇒ NaN
```

+ Any operation that involves a string and is not an addition operation
```javascript
"Integer" * 5 ⇒ NaN
```

For geekier discussions, reach out to me on twitter at [@radnerus93](https://twitter.com/radnerus93), 📥 DM always open.
How to flatten a nested array in Javascript
Tags: javascript
Published: 2020-08-22 14:13:25

Today, I'll show you two ways to flaten a nested array regardless of how deeply nested it is.

### 1. Using Array `flat` method 

```js
function flatten(arr) {
  return arr.flat(Infinity)
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten(numArr) // [1, 2, 3, 4, 5, 6, 7]
```

### 2. Using Recursion and Reduce
```js
function flatten(arr) {
  const newArr = arr.reduce((acc, item) => {
    if (Array.isArray(item)) {
      acc = acc.concat(flatten(item));
    } else {
     acc.push(item);
    }

    return acc;
  }, []);

  return newArr;
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten(numArr) // [1, 2, 3, 4, 5, 6, 7]
```
Deploying h5ai on heroku and using git as a storage
Tags: heroku, github, git, storage
Published: 2020-08-22 14:09:36

![heroku](https://www0.assets.heroku.com/assets/home/hero/data-a4eeceb4fc7926c678eb97c570037dc83f75a052f523f1c3014b1c0b1d505bf6.png)

## [h5ai!](https://larsjung.de/h5ai/)
![h5ai](https://img.sur.ly/thumbnails/620x343/a/arter97.com.png)
h5ai is a modern file indexer for HTTP web servers with focus on your files. Directories are displayed in a appealing way and browsing them is enhanced by different views, a breadcrumb and a tree overview. Initially h5ai was an acronym for HTML5 Apache Index but now it supports other web servers too.

## Deploying h5ai
Fork [h5ai on heroku using git as a storage!](https://github.com/Chityanj/h5ai-on-heroku-using-git-as-storage) 
The whole file structure for this app is like this:

```bash
your git repo folder
  ├─ .gitignore
  ├─ composer.json
  ├─ composer.lock
  ├─ Procfile
  └─ web
      ├─ _h5ai
      ├─ your files
      ├─ and folders
      ├─ more folder or files
      └─ .htaccess
 ```     
## On Heroku - Uses heroku dyno shared storage 
Deploy it using heroku cli 
```bash
$ git remote set-url origin <your heroku app git url>
# Put your Files and Folders under web/ directory
$ git commit -m "update files"
$ git push heroku master
```

## On GitHub - 100 mb file size limit repo size limit 100gb
Open your heroku app and go to deployment and choose the forked repo 
Upload files either using github web interface or cli
```bash
# Put your Files and Folders under web/ directory
$ git commit -m "update files"
$ git push 
```
## On Gitlab -1gb file size limit 10gb repo size limit
Import the project to your gitlab account and create a .gitlab-ci.yml inside the project repo 
Copy the below code to .gitlab-ci.yml 
```yml
heroku:
 stage: deploy
 
 script:
 - apt-get update -qy
 - apt-get install -y ruby-dev
 - gem install dpl
 - dpl --provider=heroku --app=$HEROKU_APP_PRODUCTION --api-key=$HEROKU_API_KEY
  
 only:
 - master
 ```
You will need to create two CI/CD variables go to project setting> CI/CD> Variables

```bash
$HEROKU_APP_PRODUCTION #Name of your app
$HEROKU_API_KEY # heroku account api key get it from your heroku account settings
```
Upload files either using github web interface or cli

```bash
# Put your Files and Folders under web/ directory
$ git commit -m "update files"
$ git push 
```
#### Enjoy!
Building your own React Hooks.
Tags: react, javascript, webdev
Published: 2020-08-22 14:03:59

## Hooks

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

React has various build-in hooks, 
- useState
- useEffect
- useContext
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue

## Custom Hooks

When we want to share stateful logic among react components, we can go for custom hooks. A custom Hook is just a JavaScript function whose name starts with `use` and that may call other react Hooks.

Let's create a `useClipboard` hook which copies a given text to the clipboard. We'll use the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) to achieve this. 

Unfortunately, Firefox doesn't fully support **Clipboard API** so make sure you use Chrome or Safari. 

You can view the end result here - https://7lyrf.csb.app/
When you click on `copy` button, the code will be copied to your clipboard and you can paste it anywhere. Note that when you try to click the `copy` button within the `codesandbox` you will get permission denied, so open the output link in the new tab and interact with it.

{% codesandbox custom-react-hook-7lyrf view=split %}

Let's first look at the `Clipboard.js` file. Clipboard API does asynchronous read from and write to the system clipboard. So I'm setting `isCopied` state to `true` when our text is copied successfully and setting it to `false` when there is an error.

`setClipboard` is where we define the logic for copying to clipboard. First I'm checking if I have `clipboard-write` permission. If the permission is granted or if it is prompted to the user, we can use `navigator.clipboard.writeText` to set our text to the system clipboard. I'm returning `[isCopied, setClipboard]` similar to how useState returns two variables. You can return any number of values though.

Next, I'm using useEffect to reset the `isCopied` state after a specified time interval. Finally exporting our `useClipboard` hook.

Now let's look at how we use our custom hook. In the `App.js` file, I'm importing our `useClipboard` hook and calling it with a time interval. As we defined, it will return `isCopied` bool and `setClipboard` function which we can use to set our text to the clipboard. 

I have a `code` tag with `console.log('Hello world')` text and a button `copy` which when clicked will copy the content of the `code` to our system clipboard. When the text is copied I'm changing the button label to `copied` based on the `isCopied` state and resetting back to `copy` after our specified interval. 
Great. Now we implemented our own custom hook which we can share among our components.

That's it, folks, thanks for reading this blog post. Hope it's been useful for you. Please do comment your questions and suggestions

## References
- https://reactjs.org/docs/hooks-custom.html
- https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
- https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
- https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API
location-based background - cool css trick
Tags: react, css, pwa
Published: 2020-08-22 13:54:09

this weekend I have transformed my project ["web desktop environment"](https://github.com/shmuelhizmi/web-desktop-environment) (which you can read more about [here](https://dev.to/shmuelhizmi/a-web-based-desktop-environment-1440)) into a to a PWA (progressive web app) and in the process of doing so, I learn a really cool trick that made my PWA fill much more alive, the trick was making the background of the PWA app window relative to his position.

# live in action 🎞🎞
{% youtube GGs4AzDP8S0 %}

# create one yourself
```jsx
import React, { useState, useEffect } from "react";
// import our css styles
import "./styles.css";

export default function App() {
  const [top, setTop] = useState(0); // track to position of the window relative to the top
  const [left, setLeft] = useState(0); // track to position of the window relative to the left
  useEffect(() => {
    const loop = setInterval(() => {
      if (window.screen.availWidth - window.innerWidth === 0) { // check if we are in window maximize mode
// if we are in window maximize mode reset the background position        
        setTop(0);
        setLeft(0);
      } else { // else set the top and left states to the window location
        setTop(window.screenY)
        setLeft(window.screenX)
      }
    }, 500); // check only 2 times a second to avoid performance lost
return () => clearInterval(loop); // stop loop when component unmount
  }, [])
  return (
    <div className="App">
      <div
        className="Background"
        style={{
					width: window.screen.width, //set the image full resolution base on screen resolution
					height: window.screen.height,
					transform: `translate(
            -${left && left % window.screen.availWidth /* in case we are running on a secondry ( left will be equal to primary screen + it's position on the relatve screen) screen we want to only get the position relative to the screen we are running on */}px,
            -${top && top - 40 /* remove 40px to account for top tabs and navigation bar */}px
             )`,}}
        />
    </div>
  );
}

```

```css
/* fullscreen */
.App {
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.Background {
  background: url("https://picsum.photos/1920/1080"); /* random image api */
  position: absolute;
  transition: transform 400ms; /* animation for background position change */
}

```


# demo
{% codesandbox relative-background-zprwk %}


# check out web desktop environment
{% github shmuelhizmi/web-desktop-environment %}
{% link https://dev.to/shmuelhizmi/a-web-based-desktop-environment-1440 %}
Finishing Cisco DevNet, 7 years R/S work experience, suggestions on how to use AWS or other means to get all topics to click?
Tags: aws, python, devops, career
Published: 2020-08-22 13:41:30

So as I wrap up the DevNet within the next month or so, I'd like to expand into AWS as it fascinates me, but with 7 years of standard Everything Engineer at an MSP they are not really trying to utilize or even care I'm gaining this skillset- My question is can anyone advise of resources used to get semi real world experience to survive a tech interview.

Wondering if any found tools that really brought all the tools together, as to this day I know the topics fairly well, wondering if anyone here has advice? Jump ship ASAP to get Dev related role or can the Public Cloud AWS platform be enough to explore, and if so what Technologies might bring together the DevOps experience / mindset?

I already play with Lambda / EC2 / S3 / API Gateway for fun, but I never seem to really feel like the topics ate cohesive just mindlessly spinning up microservices / APIs / S3 / Lambda as my training isn't doing a great job of explaining how they integrate (Udemy class).

Any input appreciated!
3 advices for devs in startup projects
Tags: agile, beginners, career
Published: 2020-08-22 10:50:52

# Write tasks
Many non-devs think developing an app is only about coding. No, it's not!  

* Who stays in touch with stakeholders?
* Who makes sure everything is legal?
* Who is responsible for testing and will find testers?
* Who cares about marketing and those social media accounts?
* Who looks for new colleagues once we need new skills? 
* Who controls the budget?
* ...

Of course, a dev could do all this too. But a dev shouldn't waste his time for those tasks. There are plenty of features to build which only devs can do!

*BTW: I recommend [trello.com](https://trello.com) for writing up and displaying tasks to your colleagues.*

# Select tasks for the next Sprint
The most annoying thing is when someone starts talking about  tasks which are absolutely unimportant at the moment and you cannot even stop him. 

By selecting the tasks you avoid those unnecessary conversations and only discuss what's selected.

# Assign tasks
Devs are energetic people and love coding. Isn't it annoying when you expect other colleagues to work as hard you but they don't?

By assigning tasks everyone commits himself to do it and knows other colleagues expect this. 

# Conclusion
Personally I think the team is the most important thing in a startup. By keeping an eye on those three advices you know from the start how well the team will perform. Finally, you know if the startup project is worth your time or not.
Browser game with React
Tags: react, javascript, css, game
Published: 2020-08-22 13:34:23

As a weekend project, I decided to try something fun with react like building a mini browser game. And the outcome isn't too bad - [void-dodge](https://kailash-sankar.github.io/void-dodge)

This post will briefly describe how it was done without going into the code, the source code can be viewed [here](https://github.com/Kailash-Sankar/void-dodge)

##  Concept
Obstacle dodge games like flappy bird seemed relatively easy to try. Adding a space theme and making it vertical, we would have an area with a space ship moving left and right and asteroids sliding down.
```
 ----------
|    AA  A |
|          |
| AAA   AA |
|          |
| <- S ->  |
|          |
-----------
```

Imagine the area of the game is like a grid, asteroid and ship occupy cells within it. Asteroid cells are rendered from the top of the grid and move down with time and at some point it will be in the same row as the ship, if A and S occupy the same cell then it's game over otherwise we bump up the score.

## Components

I considered the cell size as 64px

**Playground:** A box of 706 x 512 with a border, this will be the container of the game 

**Ship**: A 64x64 cell, placed slightly below the middle of the playground. The ship will only move left and right,

**Asteroid belt**: A row with 8 cells, there will be two types here. Filled cells which represent objects and empty cells for the ship to pass through.

## Gameplay

The asteroid belt is generated by picking a few random indexes to keep as empty and marking the rest as filled.

The left pixel position of the cells which are filled out is kept in an array. When the belt is horizontally aligned with the ship and if it's current left position is contained within this array then we have a collision.

The belt is generated outside of the playground area, animated by CSS, and then removed once it passes through. The belts are maintained as a queue - a belt added and one removed every 2 seconds by an interval code. 

The collision checks are run by another interval code every ~100ms, inefficient but does not affect a game this tiny considering we only have at max 4-5 instances of the belts active at a time.

I used the redux store to maintain the game state, score, and the final summary info. The game state can have three values - intro, game in-progress, and game over. The score is persisted on to localStorage,  keeping the most recent 5 and also the top score.

I added [react-particles-js](https://www.npmjs.com/package/react-particles-js) and some retro music to make the environment more engaging and icons from icon finder to get the space theme.


That's all folks :)
August 22nd Side Project Checkin
Tags: watercooler, sideprojects, discuss, checkin
Published: 2020-08-22 13:33:31

---
title: August 22nd Side Project Checkin
published: true
description: Come share what you're up to this weekend.
tags: watercooler, sideproject, discuss, checkin
series: Side-project Checkin
//cover_image: https://direct_url_to_image.jpg
---
# Hi y'all! 👋
Hope you had a good week. It's Saturday. It's freedom. Any plans to work on that one project that's been on your mental shelf? Getting ready to release an update? Let us know down below!