teleren/devto huggingface dataset:
Add some flavour to your ls
Tags: linux, bash, opensource, tutorial
Published: 2020-05-30 13:28:26

>Originally published at my [blog](https://www.codingindian.codes/linux/2020/05/30/add-some-flavour-to-your-ls.html)

Most of us use `ls` just the way it is provided by default but today we are going to add some flavour to boring `ls` using `exa`, as they say `exa` is a modern version of `ls`.

But wait a minute before we begin the setup lets see what is the difference between the ls before and afterwards.

**Before exa**

![Before exa](https://www.codingindian.codes/assets/uploads/term_bf_exa.png "Before exa")

**After exa**

![After exa](https://www.codingindian.codes/assets/uploads/term_af_exa..png "After exa")

**So Let's begin !!!**

## STEP-1: Installing exa using cargo

If you don't have cargo already installed you need to install it first and then proceed further.

Ubuntu users can install it via apt

```bash
sudo apt-get install cargo
```

For other distros visit [this link](https://doc.rust-lang.org/cargo/getting-started/installation.html), it will take just few minutes.

- - -

Now that you have cargo installed run the following command

```bash
cargo install exa
```

it will take around 4-5 minute because of the build process of `exa`

## STEP-2: Adding exa to the PATH

Open your terminal's rc file and just add the following to it

```bash
# PATH
export PATH=$HOME/.cargo/bin:$PATH

# Alias
alias ls="exa -al --color=always --group-directories-first"
```

- - -

### That's it

you have successfully configured your terminal with the fancy ls :)
Front End Architecture 101
Tags: frontend, architecture, 101
Published: 2020-05-30 13:24:23

Focus on Entities first, Then use cases then go the Presentation layer.

# Loose Coupling, High Cohesion.

**Coupling**: The degree of direct knowledge that one element has of another!

**High Cohesion**: Keep similar & related things together!!!
 
Do front end as `Loose Coupling, High Cohesion!`

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

As you look in the image above, Start from Entities, Then Use Cases and then the UI! It's a good practise... Do remember the dependency rule.

[Check this talk by Nir Kaufman @ ReactNYC](https://youtu.be/o8THlN8hgcw)
Bop-It inspired game for your browser 
Tags: react, showdev, javascript, gamedev
Published: 2020-05-30 13:14:52

Hi Devs,

Here is a link to checkout the game:
https://tapturnswipe.netlify.app/

I recently had the idea to recreate a similar experience to a game that I played growing up...
![Bop It](https://dev-to-uploads.s3.amazonaws.com/i/5kdx0ocdaovyguimolxl.gif)

So, I came up with Tap Turn Swipe. It is a small browser game that takes inspiration from Bop It. The game is pretty simple, an command will display on the screen and you will have a certain amount of time to complete the action. If you don't complete the action in time, or if you accidentally choose the incorrect action the game ends.

Let me know what you think! 

Here is a video demo:
{% youtube oKJjufgoLXU %}

Codesandbox:
[https://codesandbox.io/s/tap-turn-swipe-hunm5](https://codesandbox.io/s/tap-turn-swipe-hunm5)

Github:
[https://github.com/raulmartinez1855/tap-turn-swipe-game](https://github.com/raulmartinez1855/tap-turn-swipe-game)
need a clone website of bet365.com
Tags: html, css, javascript, typescript
Published: 2020-05-30 13:05:28

sir, i need your help.i am new in development.i want to do my first project to create a betting clone or similar like bet365.i need fully clone where i need only 4sports such as soccer,basketball,cricket and tennis.i need especially soccer and cricket.if you wish you can add more some sports.and also add deposit/withdhaw gateway nettelar. and i want also add my counties bkash gateway.
i know you know better all features of bet365.
in one word i need clone of bet365
I gave you a few features, although you know better.
You will do the rest on your own initiative, just copy or clone of bet365..
Data Structures & Algorithms in JavaScript(Sorted linked list)
Tags: javascript, datastructure, beginners
Published: 2020-05-30 12:57:38

Hello Everyone, this is part 8 in the series of blogs about data structures and algorithms in JavaScript, In this blog, I will cover *Sorted linked list*.

# What is Sorted linked list?
>*A sorted linked list is a list that keeps its elements sorted. To keep all elements sorted, instead of applying a sorting algorithm.* - Learning JavaScript Data Structures and Algorithms Third Edition



## List Of Operations Available
* All methods will same as the __[single linked list](https://dev.to/swarup260/data-structures-algorithms-in-javascript-single-linked-list-part-1-3ghg)__ .we will only overwrite the insert method.


## Implementation of Sorted linked list in Javascript

The SortedLinkedList class does not need and additional properties, so we can simply extend the LinkedList Class, only overwrite the required methods.

```javascript
  class SortedLinkedList extends LinkedList {
    constructor(func, CompareFun = defaultCompare){
        super(func);
        this.CompareFun = CompareFun;
    }
} 
  
```

# Insert


While Insert an element in SortedLinkedList, There are two scenarios:-

1. __*SortedLinkedList is Empty*__ 
 * Called Parent [Insert Method](https://dev.to/swarup260/data-structures-algorithms-in-javascript-single-linked-list-part-1-3ghg#insert) and set the index to zero.
  
2. __*SortedLinkedList is Not Empty*__ 
 * Get the Next Sorted Position/Index using the getNextSortIndex method. 
 * Called Parent [Insert Method](https://dev.to/swarup260/data-structures-algorithms-in-javascript-single-linked-list-part-1-3ghg#insert) and set the index to Next Sorted Position. 

```javascript
    insert(element, index =0){
        if (this.isEmpty()) {
            return super.insert(element,index)
        }else{
            const pos = getNextSortIndex(element);
            return super.insert(element,pos);
        }
    }

```
# GetNextSortIndex

**This method returns the sorted index by iteratively comparing the element with the linked list's nodes or until all nodes have been iterated.**

```javascript

    getNextSortIndex(element){
        let current = this.head;
        let i = 0;
        for (; i < current.next != null ; i++) {
            if (this.CompareFun(element,current.element) == Compare.LESS_THAN) {
                return i;
            }
            current = current.next;
        }
        return i;
    }

```
you get the full source [here](https://github.com/swarup260/Learning_Algorithms/blob/master/data_structure/SortedLinkedList.js)

# Conclusion 
The complexity of the Sorted Linked List will be the same as Single Linked List. 

So, stay tuned for the next blog, in which I will cover another __DS [SET](https://dev.to/swarup260/data-structures-algorithms-in-javascript-sets-2acm)__
Hosting architecture - A diagram
Tags: watercooler, architecture
Published: 2020-05-30 12:51:07

Today's diagram illustrates the hosting architecture based on Firebase.

![Hosting architecture based on Firebase](https://dev-to-uploads.s3.amazonaws.com/i/vozbw7drjnotp0h1gyyi.png)

Check out the other posts in this series for more diagams. One diagram per day until I drew all diagrams I need for my book, www.gum.co/cloud-native-web-development.

[Diagram source](https://excalidraw.com/#json=5639039470272512,w_ydi0KawtMCcayf_qqDLg) (if you want to edit/reuse it)
Quick way to make an image responsive
Tags: css, responsive, html, webdev
Published: 2020-05-30 12:19:45

Add the following to your image's style attribute.

```
<img style = "width: 100%; height: auto;" src = "some-image-source">
```

If you want to set a max-width, 

```
<img style = "width: 100%; height: auto; max-width: 200px;" src = "some-image-source">
```

Cheers! Happy coding!
What is the ideal way to develop a visual-heavy design like this? 
Tags: help
Published: 2020-05-30 12:48:05

I'm working on a project similar to this and wanting to see how to make my developers life easy with good practices inlining with the development aspect in mind. I don't really know who will be developing this one as yet, client hasn't finalized it yet, so I want to know before I start so I can avoid any back and forth also some burning from the developer who is going to develop this. :) 

Thank you in advance.
Airtable to Codepen / Vue.js / AIT_fake_db
Tags: codepen, vue, airtable
Published: 2020-05-30 12:36:45

{% codepen https://codepen.io/mauro99/pen/XWmQzjv %}

### I built a working code to retrieve data from fake Airtable database with axios. You can see the code below perfectly working. No problem to retrieve data when is on the main table. Yet as you can assume some fields are connected to other tables (named in Airtable: parent child data or fields). Is the case in my table when you have the field "ORGANIZZAZIONE" (Organization) that is connected to another table having the organization datails as for example: NOME (Name) and TIPOLOGIA (Activity). As you can see in the code when I try to access to this data (ORGANIZZAZIONE) I have bad results. Probably I have to build an "axios.all" request but I can't find the right way.
The idea  to append the data with another AIRTABLE'S API call to a child table it is OK (in code is in comment to JS file) ...but it is not working. So can you help me?
Deno Vs Node
Tags: node, javascript, deno
Published: 2020-05-30 12:34:16

## **Deno & Node**
Deno and Node both of them are a runtime environment for javascript that is developed by Ryan Dah and both of them build on V8 engine that is used by Chrome.
Deno first introduced in 2018 as Initial release by Ryan.

## **What is the difference between Deno & Node?**
- Deno uses ES modules so there will be no usage for require() in the future.
- there is no NPM and package.json you can import you js modules as a file path or URL like the browser.
- support for typescript out of box.
- Deno requires explicit permissions for file, network, and environment access.
- Browser compatibility, you can run the same script in the browser and Deno(if you are not using the global object).


## **Is Deno going to replace Node?**

in my opinion and according to Ryan, No it will not,
and I think in the soon future there will be a lot of frameworks that support Deno, for example, there will be express for Deno also


you can find more in [Deno](https://deno.land/manual) website
Avoid boilerplate setup code with Pemplates
Tags: boilerplate, starterkit, showdev, webdev
Published: 2020-05-30 12:31:06

There is a lot of technologies to choose from when you start developing something, and all of them need some initial setup. Usually this setup is repetitive, and nowadays there is a word for it: boilerplate.

There is a lot of developers trying to simplify the setup by creating a templates repositories, but it takes some time to find what you need.

That why I decided to create [Pemplates](https://thirsty-leakey-8f0295.netlify.app/): a simple search engine for projects templates. You just put keywords you need (ex: vue typescript) and it shows you all the repositories on github for those keywords meant to be used as starter kit/project template.

This project is completely opensource (you can find it's code on [Github](https://github.com/OleksandrDemian/pemplates_lite_web)) and I just made it this morning. At the moment it will be hosted on netlify's [random url](https://thirsty-leakey-8f0295.netlify.app/), but I will move it to a custom domain as soon as I can.
Vim modes diagram
Tags: vim, editor, ide, diagram
Published: 2020-05-30 11:50:23

Hi there,
I'm a [vim](https://en.wikipedia.org/wiki/Vim_(text_editor)) lover and a visual learner, so I created a diagram of Vim's modes. It helped me to understand and remember available modes and how to switch into them.

I thought it's worth sharing it so that others can benefit from it as well.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1j5qd2rcvkpivob871wm.png)

Here is a [version](https://docs.google.com/drawings/d/e/2PACX-1vRh7udyHb_juNMRTZjIbcej1HvLrFmJi3dhixsCsokjBVBd-DCiNDoLwxi7aKgLdJ8F0Kqv06tISrKc/pub?w=1440&h=1080) to print out.
Free IBM Coure Python for Data Science by IBM
Tags: python, machinelearning, webdev, beginners
Published: 2020-05-30 11:49:49

---
title: Free IBM Coure Python for Data Science by IBM
published: true
description: 
tags: #python #machinelearning  #webdev #beginners 
---
This free Python course provides a beginner-friendly introduction to Python for Data Science. Practice through lab exercises, and you’ll be ready to create your first Python scripts on your own!

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

###About This Python Course:
This introduction to Python will kickstart your learning of Python for data science, as well as programming in general. This beginner-friendly Python course will take you from zero to programming in Python in a matter of hours.

Upon its completion, you’ll be able to write your own Python scripts and perform basic hands-on data analysis using our Jupyter-based lab environment. If you want to learn Python from scratch, this free course is for you.

You can start creating your own data science projects and collaborating with other data scientists using IBM Watson Studio. When you sign up, you get free access to Watson Studio. Start now and take advantage of this platform.

[How to Subscribe Python for Data Science by IBM?] (https://gscode.in/python-for-data-science/)
Deno PostgreSQL Tutorial
Tags: deno, webdev, tutorial, beginners
Published: 2020-05-30 11:47:27

<strong>Deno PostgreSQL</strong> is a library that allows us to connect our deno application to Postgres SQL Database (both local and online). I've done a quick tutorial to describe how to install and use it.

{% youtube gaN4VghWhNk %}
<center>[Youtube: Deno PostgreSQL](https://youtu.be/gaN4VghWhNk)</center>

Included in this video are:
- Importing Postgres into deno
- Creating a client connection
- Testing postgresql connection
- Creating a new postgres table
- Inserting data into the table
- Select row from the table

Deno PostgreSQL:
https://github.com/deno-postgres/deno-postgres

Deno:
http://deno.land/

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
balalaika IT newsletter #2
Tags: react, node, java, webdev
Published: 2020-05-30 11:34:58

---
title: balalaika IT newsletter #2
published: true
description: Curated IT newsletter. From Russia with love. Issue #2.
tags: #react #node #java #webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7dwkz927sf2ausnqygq3.jpg
canonical_url: https://blog.balalaikait.com/balalaika-it-newsletter-2
---

# Frontend
- Mark Erikson (Redux maintaiiner) provides us with ["details on how React rendering behaves, and how use of Context and React-Redux affect rendering"](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/). Must-read for every React dev!
- Facebook has finally released [its own state management library](https://recoiljs.org/). It's still experimental, but it's definitely worth a try. Given that it comes from the same company, it's reasonable to expect that it plays nice with the upcoming concurrent mode, suspense, and anything else we don't know of yet.
- [A great read from Harry Roberts](https://csswizardry.com/2020/05/the-fastest-google-fonts/) on how to make your font render faster than ever.

# Node.js
- In our view, it's the most comprehensive yet not bloated [guide on how the event loop works](https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810). An absolute must-read for every Node.js developer!
- Have you ever wondered how V8 manages its memory? [Here is a concise overview with great visuals](https://deepu.tech/memory-management-in-v8/). 

# General
- A long-read coming in 9 parts on [what every programmer should know about the memory](https://lwn.net/Articles/250967/). It is 13 years old, but it is as relevant today as it was back then.
- Async context propagation is a pain in the ass in any eco-system. Google provided us with an [outstanding comparison of how different languages and frameworks approach it](https://docs.google.com/document/d/1tlQ0R6wQFGqCS5KeIw0ddoLbaSYx6aU7vyXOkv-wvlM/edit?usp=sharing).
- [A new episode of a never-ending battle between Kyle Kingsbury (author of a well-known Jepsen)  and MongoDB](http://jepsen.io/analyses/mongodb-4.2.6). He evaluated MongoDB version 4.2.6, and found that even at the strongest levels of read and write concern, it failed to preserve snapshot isolation. MongoDB promises a patch in 4.2.8.
- Everybody knows B-trees, right? But what about other ways to speed up your search? [Marko Kevac from Badoo speaks about their usage of bitmap indexes](https://youtu.be/WvlUH6MjUuI).

# Bonus
- Did you know that it's simple enough to build a time series storage on top of RocksDB which is capable of writing 400K data points/sec on decent HW? And yes, it uses bitmaps. Andrey P, who is a big fan of time series (and bitmaps), recently [did a talk on the topic](https://youtu.be/1fzae--iHYU).
🐹 Create, develop and manage your projects through an accompanying graphical user interface.🎉
Tags: javascript, react, laravel, php
Published: 2020-05-30 11:01:21

This awesome tool allows developers to graphically create a new project, live monitor app performance, add templates to project, and more. This is a pretty big deal, as getting familiar with this tool can make spinning up and maintaining any type of application.

## Advantages and use cases
- Manage your local projects
- Configure your application without messing up the config files
- Install templates

## Installation
You can install it using the installers below :

> Distributions available for Linux, macOS, Windows.
```sh
git clone https://github.com/Routine-App/Routine.git
```
Move to the appropriate directory: cd `<YOUR_PROJECT_NAME>`.

Run npm run routine in order to start Routine project.

Now you can go to localhost:8080 and see your app!

## Supported Templates

- [electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate)
- [hackathon-starter](https://github.com/sahat/hackathon-starter)
- [laravel](https://github.com/laravel/laravel)
- [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate)
- [server-configs-nginx](https://github.com/h5bp/server-configs-nginx)
- [TypeScript-Node-Starter](https://github.com/Microsoft/TypeScript-Node-Starter)

## Requirements

Routine has a few requirements you should be aware of before installing:

- [Golang](https://golang.org/)
- [Node.js & NPM](https://nodejs.org/en/download/)

Feel Free to contribute on GitHub : https://github.com/Routine-App/Routine

Thanks for reading! you can support the Routine project directly by r giving it a star on github
GitHub: https://github.com/Routine-App/Routine
LaraLens a Laravel command for inspecting configuration
Tags: laravel, package, php, opensource
Published: 2020-05-30 10:54:35

LaraLens is a Laravel Artisan Command to show you the current configuration of your application. It is useful to show in your terminal the status of:

- some useful configuration variable;
- the database connection;
- the tables in the database;
- the connection via HTTP request.

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

## Why?
When I have a new Laravel Application deployed on the target server, usually I perform a list of commands in order to check the configuration, the connection to database, inspect some tables, the response of the web server. I tried to show more information in just one command. This is useful also when the installation of your Laravel application is on premises, and someone else takes care about the configuration. So, in this scenario usually, as developer, your first question is: "how is configured the application?".

## Installation
In your Laravel application, you can install the package via composer:

```
composer require hi-folks/lara-lens
```



## Usage

```bash
php artisan laralens:diagnostic
```


![Executing Laralens to inspect your Laravel application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryagpu0qqwgy476x5w5b.gif)



### Usage: control the database connection


You can see database connection information, and you can choose the table to check, and the column used for the "order by" (default _created_at_):
```sh
php artisan laralens:diagnostic --table=migrations --column-sort=id
```
To retrieve the latest user (creation date):
```
php artisan laralens:diagnostic --table=users --column-sort=created_at
```
To take the latest user (update date):
```
php artisan laralens:diagnostic --table=users --column-sort=updated_at
```

### Usage: control the output
You can control the output via the _show_ option. You can define:

* config
* connection
* database
* runtime
* migration
* all
The defalut for _--show_ option is _all_.


```sh
php artisan laralens:diagnostic --show=config --show=connection --show=database --show=runtime --show=migration
```

If you want to see only database information:

```sh
php artisan laralens:diagnostic --show=database
```



## References

### Github repository
{% github Hi-Folks/lara-lens no-readme %}

### Packagist
The Packagist page is: https://packagist.org/packages/hi-folks/lara-lens
Page layout: full-sized vs boxed
Tags: css, webdev, discuss, design
Published: 2020-05-30 10:39:55

I started working on a personal website. Something like a "presentational" site, but that I'm planning to transform it in much more than that by including a bunch of data from private and public APIs etc. Even blog posts.

While there's a lot of _noise_ about how a page should be designed, I can't seem to be able to decide between a full-size layout or a boxed one.

![Full-boxed-layout](https://www.skyartstudio.com/wp-content/uploads/2013/08/featured-full-box.png)

My first thought was to go with boxed sized and a nice, faded, background image. However most demo websites and repos on GH that I checked out were going for a full sized pages.

How do you decided between the two and what would you recommend me?
Node.js: Migration from JavaScript to TypeScript
Tags: node, javascript, typescript, tutorial
Published: 2020-05-30 10:26:07

Hi! I've recorded a small tutorial about migration a small Node.js application to TypeScript. If you're not familiar with TS yet but want to migrate an existing project, you may find this video helpful.

P.S. It's not difficult, at all... :)

{% youtube qFMMOJucqTw %}

Thanks for watching! Any feedback is appreciated!

Follow JavaScript Room blog on Instagram: https://www.instagram.com/room_js