teleren/devto huggingface dataset:
Suggest me the right Linux distro
Tags: webdev, linux, help, discuss
Published: 2020-11-15 09:55:40

Hello, good people of Dev! I need some help from the Linux users out there.

I've been thinking to switch to Linux (again) after being fed up (again) with Windows' constant lagging on my PC. I'm a web developer and just want a distro which is performant, good looking and has an abundancy of all the required packages (without any workarounds).

The distros in the banner are the ones I've been considering. 

- **Linux Mint Cinnamon**: I've heard it's [very good for web development](https://nolanlawson.com/2020/05/10/linux-on-the-desktop-as-a-web-developer/). It's lightweight and performant and I've heard some good things about Cinnamon. I've used Mint in the past (like 5-6 years ago).

- ~~**Ubuntu 20.04**~~: I've used Ubuntu and have been considering it only for: familiarity and availability of a large user-base. My main pet-peeves while using Ubuntu 18.04 were the unavailability of these following features: 
   - In Windows, the clipboard is at my disposal when I pressed `Win + v`. I didn't really search for a clipboard manager that does this.
   - Blue light filter. I tried using Redshift but for some reason, I couldn't get it to work.
   - Hibernation

- ~~**Manjaro**~~: I don't know anything about it.

- ~~**Peppermint OS**~~: I was considering it because some people claim it to be super performant. 

- **Pop!_OS**: Super pretty! Lots of support for it on the comments below! I'll probably end up using this.

So, suggest me anything that you think will suit me! 
- Web Development
- Kinda done with the *lag-ful* experience in Windows.
- Will run on Dual boot alongside Windows (which I'll mainly use for Photoshop, Premiere, etc).
- Wants small important features which were mentioned as pet peeves of Ubuntu above.

**Laptop Specs**:
- 1 TB **HDD**
- Intel Core i5 8th Gen @1.60GHz
- 8GB RAM
- Nvidia GeForce MX130

Thanks!

*Edit: add laptop specs*

----

### Update

Thank you everyone for the suggestions and inputs! By far I've cut the list short to **Mint Cinnamon** and **Pop!_OS**. I looked at Fedora too but as I'm not really familiar with it, I doubt if I'll be using it.

Thanks for your inputs on **Manjaro** and letting me know about other cool distros like **Zorin OS** and **Elementary OS**. I'll surely try them out in the future!

P.S. I researched a bit and found out that the hibernating feature is not available out of the box in any Linux distribution(?).

### Update: Aug 2021

I bought an SSD *and* shifted to **Linux Mint** and have been using it for a month.
- I don't miss the hibernate feature because booting & shutting down takes less than 10 seconds
- I use [CopyQ](https://hluk.github.io/CopyQ/) for clipboard management
- Yet to find a Redshift alternative that can be turned on at any time and not just during the night

Thanks everyone for the inputs!
Tailwind CSS Pagination
Tags: css, html, webdev, uiweekly
Published: 2020-11-15 09:53:50

Pagination is used to show a large document or data on a web page from different views in the number list. So here we made simple pagination in tailwind CSS with the help of tailwind classes.

In this element, we used flex classes to make our element centered, and also we used SVG icons from Heroicons. Here we used background color classes and padding, margin classes with we used borer utility classes to show this element more attractive. We also used hover on these elements with different sides.



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-pagination/)
Todo App with MERN Stack (MongoDB, Express, React, Node)
Tags: javascript, mongodb, react, showdev
Published: 2020-11-15 09:37:08

Hello World, this is my first project for MERN Stack, [TodoApp](https://github.com/stanleyowen/TodoApp). Although it is simple, it is an appreciation to leave any suggestion or comment to improve this apps.

If you like the article, don't forget to give a star on  [https://github.com/stanleyowen/TodoApp](https://github.com/stanleyowen/TodoApp)

Happy Coding!

You may also like these articles:
{% link https://dev.to/stanleyowen/todo-application-an-open-source-and-easy-to-use-web-application-f55 %}

{% link https://dev.to/stanleyowen/fire-ui-a-user-friendly-and-reliable-css-framework-229d %}
Binary Search Tree And Real-world Applications
Tags: programming, algorithms
Published: 2020-11-15 09:30:38


A byte-sized article that can teach or remind you of a programming concept and/or language in <2 minutes.

---

# Definition

A binary search tree (BST) is a binary tree data structure that has:

- The left subtree of a node contains only nodes with values less than the node's value.

- The right subtree of a node contains only nodes with values greater than the node's value.

- The left and right subtree each is a binary search tree, too.

![Binary Tree](https://cdn.hashnode.com/res/hashnode/image/upload/v1605279558566/Y2a0xjvoL.png)
*(Image's source: GeeksForGeeks)* 

---

# Real-world Applications

## 3D game engines

Almost every 3D engine uses BST to determine which objects should be rendered in a 3D world, which is basically buffering Z orders instead of recalculating complex 3D positioning on every render.

It's famously used in Doom 1993 as the first time a BST had even been used in a game.

![Doom](https://cdn.hashnode.com/res/hashnode/image/upload/v1605280414259/hUUT8S8tH.png)
*(Image's source: Wikipedia)* 

## Compilers

To efficiently parse syntax expressions (e.g. programming languages), compilers use a special BST called syntax tree.

![Syntax tree](https://cdn.hashnode.com/res/hashnode/image/upload/v1605281114465/rI3Z3MKKD.jpeg)
*(Image's source: Wikipedia)* 

---

Hope you learned something new from this article 🙏!

If you have any comments, please leave them below. You can always DM and ask me anything on Twitter ([@phuctm97](https://twitter.com/phuctm97)) 😉
Basics SQL - SELECT Information
Published: 2020-11-15 09:01:31

[Cheat-Sheet](http://www.sql-tutorial.net/SQL-Cheat-Sheet.pdf)

# Statements 
## SELECT
```SQL 
SELECT column1, column2, ...
FROM table_name; 
``` 
```SQL 
SELECT * FROM table_name; 
``` 
## Filter with [WHERE](https://www.w3schools.com/sql/sql_where.asp) 
```
SELECT firstname, birthday FROM customers WHERE lastname='Mueller';
```
- an equal value `=` or different value `!=`
- a higher value `>` (or higher than or equal to `>=`), a lower value `<` (or lower than or equal to `<=`)
- a value from several possible values with `IN`
- a numerical value (or a date) from within a range `BETWEEN xx AND yy`
- a chain starting with or ending with with `LIKE` and the `%` joker
- a value `IS NULL` or `IS NOT NULL`

## [Limit](https://www.w3schools.com/sql/sql_top.asp) the result 
`SELECT <champs> FROM <table> LIMIT <nb_results>;`
`SELECT * FROM customer LIMIT 5 OFFSET 20;`
Be careful: it is a common mistake to write LIMIT 25 OFFSET 20, assuming this will retrieve results 21 to 25, but it would actually return results 21 to 45!)

## [ORDER BY](https://www.w3schools.com/sql/sql_orderby.asp) Sorting and filtering
`SELECT firstname, lastname FROM customer ORDER BY lastname ASC, birthday DESC;`
the youngest Memebers of Müller: 
```SQL
SELECT * FROM customer WHERE lastname='Müller' ORDER BY birthday DESC LIMIT 0,3;
```
A [Challenge](https://www.khanacademy.org/computing/computer-programming/sql/sql-basics/pc/challenge-box-office-hits-database) - try yourself
My way to handle money format input in Laravel
Tags: laravel, html, webdev
Published: 2020-11-15 09:01:06

Common usage of website is to handle data about finance, which is the most data is money and it has a format. In Indonesia for example the format is like Rp1.500.000,00. The problem is with default HTML input, it can't show format like that by default. So how to handle it? At least here's my may to do that in Laravel based website.

### **Database side**
It has to handle in three side, the first in inside the database where you want to store the data. On sql there is *decimal* type that you can use to store number with commas. So in the migration you can simply use 
```php
$table->decimal('amount', 8, 2);
```
8 is the total digits and 2 is decimal digits. Refer to the [official documentation](https://laravel.com/docs/8.x/migrations#available-column-types).

### **HTML side**
So after we set database column to proper type, next we need to set the html input to prevent unwanted data that user accidentally input. In html there is
```html
<input type="number">
```
to handle number input. You can use attribute `step` to define decimal digit right on the input. There're other additional attributes that you can use to, find more [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)

### **Laravel Blade side**
Lastly, when you want to show the data to the user. Data format from database usually will look like this `1500000.00` and you want to show it like this `1.500.000,00`. To do this you can use php `number_format()` function inside the blade.
```php
number_format($data, 2, ',', '.');
```
The first parameter is your number, next is how many decimal digit you want to show, the third is decimal separator, and the last is thousand separator. Read more in [PHP manual](https://www.php.net/manual/en/function.number-format.php)

Those are my way to handle money data, thanks for reading this and if you want to say something leave it in discussion.
picoCTF: where are the robots
Tags: cybersecurity, webdev, security
Published: 2020-11-15 08:33:49

### **Challenge**
Name: where are the robots

Points: 100

Description: 
> Can you find the robots?

Link: https://jupiter.challenges.picoctf.org/problem/56830/

{% collapsible Hints %}

1. What part of the website could tell you where the creator doesn't want you to look?

{% endcollapsible %}


### **Solution**

Go to /robots.txt

Look for the `Disallow: /1bb4c.html`

Go to that page

And done


### **Protect Your Apps From This**
**don't save secrets on the client** 😉
c#9 is finally here (this is not about init-only or records)
Tags: csharp, dotnet
Published: 2020-11-15 08:13:15

c# 9 and .Net 5 are finally officially released, and everybody blogs about init-only properties and records - which are very exciting and long-awaited features that I'm sure will be used a lot and contribute a lot to code quality.

However, I would like to address another great thing about c# 9 that I didn't see a lot of bloggers excited about - and that is the [improvements of pattern matching.](https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-9#pattern-matching-enhancements) Specifically, the adding of the `not` keyword - as it relates to an older post I've published almost exactly a year ago: 
{% link https://dev.to/peledzohar/the-perfect-non-null-test-4ohm %}
In c# 9, We finally actually do have the perfect non-null test, and it's way better than `x is object` because it's much, much more readable:

```csharp
if(x is not null) { /* No explanation needed... */ }
```

See when I first started using x is object in my code, My team leader have complained that it's less readable than the  x != null we had all over our code base. I actually had to convince him that this is a better option. With the c#9 new syntax, anyone reading the code that has even minimal knowledge of c# and the English language can instantly understand it - which finally, makes it truly the perfect non-null test.
StatelessWidget and StatefulWidget in Flutter.
Tags: flutter, dart, widgets, beginners
Published: 2020-11-15 08:06:46



A Flutter Widget extends the standard classes. The class extended determines the type of widget we are dealing with.
There are 2 classes which you will be extending 99% of the times. They are

**1)StatelessWidget**

The Widgets which extend StatelessWidget never change. 
For eg: Text Widget(which displays text),Icon Widget(which shows the icons),their state never changes. They are also called as stateless Widgets because they don't have any state.
Example of such class:

```Flutter
class Codeitout extends StatelessWidget {
       Widget build(BuildContext context) {
            return new Text("Codeitout!");
       }
} 
```


**2)StatefulWidget**

The Widgets which extend StatefulWidget change their state(some changes occur) whenever a user interacts with it.
 For eg: TextField widget,CheckBox,etc.
When we extend StatefulWidget,we actually need to create 2 classes:
a)the stateful widget class
b)a state class

Example of it is:

```flutter
class NavBar extends StatefulWidget {
  @override
  _NavBarState createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {
  int _index=0;
  final List<Widget> _page=[
    Dummy(Colors.yellow,0),
    Dummy(Colors.pink,1),
  ];
  void onTabTapped(int index) {
   setState(() {
     _index = index;
   });
 }

  @override
  Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
        child: _page.elementAt(_index),
      ), // new
     bottomNavigationBar: BottomNavigationBar(
       elevation: 20,
       onTap: onTabTapped, // new
       currentIndex: _index, // new
       items: [
         new BottomNavigationBarItem(
           icon: Icon(Icons.home),
         ),
         new BottomNavigationBarItem(
           icon: Icon(Icons.mail),
         ),
         
       ],
     ),
   );
  }
}
```
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-11-15 08:04:47


Holla coders!
This was the first time I contributed in some open source project i.e in Hacktoberfest 2020.
I contributed by sharing four PRs and it is soo much happening for me that all my four PRs has passed the 14 days review period and for that I have earned a reward as well.
I chose projects  which were very simple according to me because it was just the beginning.
My overall experience to contribute in the open source project of Hacktoberfest 2020 was very pleasant.
I would love to participate  in these types of projects again!
Do visit the events page at

https://mandrillapp.com/track/click/30270081/hacktoberfest.digitalocean.com?p=eyJzIjoiUnhTLWFyaGt1MkxLYVFYOU4yVFVpSHp3Y1I4IiwidiI6MSwicCI6IntcInVcIjozMDI3MDA4MSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL2hhY2t0b2JlcmZlc3QuZGlnaXRhbG9jZWFuLmNvbVxcXC9ldmVudHNcIixcImlkXCI6XCI4MmU4ZDc4NTllNDg0NGYwOWYwNWE4OTcxNGJmYTE4NFwiLFwidXJsX2lkc1wiOltcIjE3ZjE5ODVmMTgxNzAwMmUzMzlmMzg4MTc5Yjc0OTc2M2YyYTZiYmFcIl19In0
Local Python Module imports when using virtualenv
Published: 2020-11-15 07:49:44

Importing modules in python3 can be unnecessarily confusing, especially when using virtualenv

Suppose you have this file structure:
```
.env
test.py
cool_modules
    |--__init__.py
    |--cool_module1.py
    |--cool_module2.py
```

To prevent import errors while using virtualenv `.env`:

cool_module1.py:
```python
class CoolModule1():
    ...
```

cool_module2.py:
```python
class CoolModule2():
    ...
```

Here's the critical part. 
__init__.py:
```python
# The part to note here is you have to use `parent_folder.child_file`
from cool_modules.cool_module1 import CoolModule1
from cool_modules.cool_module2 import CoolModule2
```

test.py:
```python
from cool_modules import CoolModule1, CoolModule2
```

That's it!

If this helped you out, follow me on Twitter: [emmanuel_n_k](https://twitter.com/emmanuel_n_k)
Creating a Coding Interview Study Guide in Ruby
Tags: javascript, computerscience, ruby, career
Published: 2020-11-15 07:33:14

As a follow up to my [previous post](https://dev.to/123jackcole/creating-a-coding-interview-study-guide-p37), I'm going to be creating a study guide on various computer science concepts that would be helpful for coding interviews. All of the code for this will be done in ruby. If I previously posted about a topic I'll be sure to link to it.

You're going to need to know iteration and recursion, arrays and matrices, [linked lists](https://dev.to/123jackcole/learning-linked-lists-6bf), [queues](https://dev.to/123jackcole/learning-queues-4jnc), [stacks](https://dev.to/123jackcole/learning-the-stack-6n5), [heaps](https://dev.to/123jackcole/learning-heaps-in-javascript-1ocf), sets, hash maps, [trees](https://dev.to/123jackcole/learning-binary-trees-part-1-implementation-55bb), binary search, [graphs](https://dev.to/123jackcole/learning-graphs-part-1-implementation-4kpc), [traversals](https://dev.to/123jackcole/learning-graphs-part-2-traversal-3088) like [breadth-first search](https://dev.to/123jackcole/learning-binary-trees-part-2-breadth-first-search-454a) and [depth-first search](https://dev.to/123jackcole/learning-binary-trees-part-3-depth-first-search-2n8o), [tries](https://dev.to/123jackcole/learning-tries-in-javascript-5geg), and [sorting algorithms](https://dev.to/123jackcole/sorting-algorithms-in-javascript-5f4b) (particularly merge sort and quick sort). Also knowing some dynamic programming concepts could be helpful such as [memoization](https://dev.to/123jackcole/learning-memoization-1gp7) and [divide and conqueror](https://dev.to/123jackcole/divide-and-conqueror-1c4b).

The file with all of the code examples can be found [here](https://github.com/123JackCole/Tech-Interview-Cheatsheet). I'll be continuously updating and refactoring the code. Hopefully this is helpful to anyone else reading this. If I miss anything be sure to let me know and I'll update it.
Tests are awesome!
Tags: testing, beginners, opensource, codenewbie
Published: 2020-11-15 07:11:15

---
title: Tests are awesome!
published: true
description: Why automated software testing is fun!
tags: testing, beginners, opensource, codenewbie
//cover_image: https://direct_url_to_image.jpg
---

Probably one of the most underrated programming task is writing test. It's a pity though as it is one of the most satisfying programming task.

Tests are short, much shorter than the code they are testing. So you need a lot less investment to finish one.

Tests are (or should be) much simpler than the code they are testing.

Tests are the proof that the code still works the same way as it worked yesterday.

Tests can be super interesting, especially when mocking is involved.

## Tests and Open Source

If you are interested in contributing to an Open Source project, start by finding a small project that does not have tests or that has a low test coverage and contribute there.

If you are interested in the steps of contributing, try this explanation:

{% link c99srs/how-to-contribute-to-open-source-project-3ojo %}

or this might be even better:

{% link doctolib/make-your-first-pull-request-to-an-open-source-project-1m57 %}

If you'd like to get help, comment here with the main programming languages you are interested in and if possible even with the project you'd like to contribute to.
How Web and Browser work ?(behind the scenes) 
Tags: webdev, javascript, webperf, browser
Published: 2020-11-15 07:09:28

I always wonder how the web and the browser render the pages we are accessing, so I did a deep dive into the concepts behind it 🧐 

After that, I thought let's conclude it to understand it better 💡 So, I created an interactive [presentation](https://www.slideshare.net/vibhorgrover/how-web-works-and-browser-works-behind-the-scenes-239265405) about the concepts, to help myself and everybody in order to understand it more

this presentation can help you in understanding what happens when you enter a URL in your browser and how the page is displayed by the browser, and how we can improve the performance of our applications.
To diff two files side by side, without opendiff, Microsoft Visual Studio Code, Perforce diff works too
Tags: diff
Published: 2020-11-15 07:05:34

`opendiff` can be large, because XCode is required to run, depending on your platform, and it can take a good 35GB or more.  But if you already have Microsoft Visual Studio Code, we can first [add it to the command prompt](https://code.visualstudio.com/docs/setup/mac) by bringing out the command palette, type in `shell`, and choose

> Install 'code' command in PATH

and then in Bash or Zsh, it can be

    code --diff file1.js file2.js

or just use `-d`

    code -d <path1> <path2>

Perforce diff can be used as well, and it'd be smaller size than `opendiff`
Conveniently link users to a pre-filled New GitHub Personal Access Token Page
Tags: github
Published: 2020-11-15 06:29:41

My use case was allowing users to update a CLI tool directly from a private repo's releases that they would already have access to. The CLI tool required a valid GitHub access token with specific permissions.

To make this easy for the users, I wanted the CLI tool to open up directly into a pre-filled permissions page, instead of having to fill it in based on a `README.md` entry.

I dug around the page for the `id` of the `input` fields to see if I could use those to pre-fill. After trying a few variations I found it!

The base URL is
```
https://github.com/settings/tokens/new
```

Appending the following query parameters onto the URL allows us to pre-fill the form.

For Example:
```
https://github.com/settings/tokens/new?description=my-cli-tool&scopes=repo,read:packages,read:org
```

`description` fills the "Note" field.
`scopes` allows for a comma-separated list of the scopes.

Now your user only needs to press "Generate token" at the bottom of the page.
Top Deployment For React
Tags: react, javascript, devops, discuss
Published: 2020-11-15 06:25:09

1 - Vercel 
    Its One of The best deployment Services for react and other js framework...
It's Free And Awesome .

2 - Netlify 
    Its One of Most Used Deployment services used so far...
I am too Fond of it
It's more then sufficent for Beginners 

3 - Render 
    Its is also used by developers largely.
It also provide pipelines for deployment
New Path Taken!
Tags: 100daysofcode
Published: 2020-11-15 06:21:54

I was trying to spare time for this challenge for long time but never made it, then i realized its now or never so, I'm publicly committing to the 100DaysOfCode Challenge starting today!
 * will code for at least an hour every day for the next 100 days.
 * will tweet about my progress every day -> using the hashtag #100DaysOfCode also post on dev for more accountability
 * will push code to GitHub every day so that anyone can see my progress.
 * will update the (Log)with the day's progress and provide a link so that others can see my progress.
Converting GIF to MP4
Tags: gif, javascript, webdev, webassembly
Published: 2020-11-15 06:02:00

GIF's are awesome we use them everywhere. But the issue with GIF's are they are usually much larger in size compared to their video counterparts.

{% youtube blSzwPcL5Dw %}

To overcome this we usually convert GIF to MP4 and play them in loop. Usually we do this conversion in the server using **ffmpeg** or wrapper over **ffmpeg**. This conversion might be resource intensive.

Luckily there is [WASM port](https://ffmpegwasm.github.io/) of **ffmpeg**. Which means we could use it to convert GIF to MP4 easily as follow

```javascript
import FFmpeg from '@ffmpeg/ffmpeg';
import { even } from 'prelude-ls';

const { createFFmpeg, fetchFile } = FFmpeg;

const ffmpeg = createFFmpeg({ log: true });

document
  .getElementById('fileInput')
  .addEventListener('change', async ({ target: { files } }) => {
    const { name } = files[0];
    await ffmpeg.load();
    ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
    await ffmpeg.run('-f', 'gif', '-i', name, 'output.mp4');
    const data = ffmpeg.FS('readFile', 'output.mp4');
    const video = document.getElementById('player');
    video.src = URL.createObjectURL(
      new Blob([data.buffer], { type: 'video/mp4' }),
    );
  });
```


Here is the [demo](https://rafi993.github.io/conveting-gif-to-mp4/) and here is the [source](https://github.com/Rafi993/conveting-gif-to-mp4) 

## Note
* There could be additional flags supplied to ffmpeg to limit the frame rate, height and width of the video file...