teleren/devto huggingface dataset:
10 habits of 10x developer
Tags: programming, webdev, beginners
Published: 2021-12-27 19:26:38

Over 16 years of educating, tutoring and mentoring developers I have recognized ten habits that differentiate 10x developers from others. 10x developers:

1. Take insane amount of notes 
2. Start to code only when they gather all information and requirements needed to implement a feature
3. First reproduce the bug before looking into the code
4. Validate results early and often with all stakeholders
5. Effectively manage incoming messages and tasks
6. Kick off day with an easy task to boost speed
7. Make sure they work in a proper task order everyone is happy with
8. Understand improving the development process as a part of their responsibilities
9. Ask a lot of questions
10. Value a team compromise more than their private opinions
11 bonus: master providing solutions rather than memorizing useless aspects of technologies

I have met hundreds of developers during my career so far, and the list above is bulletproof way to point out a person that is 10x developer.

If you want to learn more about how to become 10x developer, follow me!
How to Create Aliases on macOS with Terminal
Tags: tutorial, beginners, webdev, programming
Published: 2021-12-27 20:57:05

Aliases are those badass secret identities and mysteries that developers type into their terminal to perform a task faster and make their workflow simpler. For the longest time, I procrastinated creating aliases because the thought of learning how to do it *seemed* really hard. But actually, it's extremely easy. And its made my life SO MUCH better, so I wanted to share how to do it. 

## Creating Aliases for Zsh Shell

- Go to your terminal
- Type in the command
```
cd ~
```
To make sure you are at your root directory,
- Then type in 
```
open .zshrc
```
to open up your `.zshrc` folder. You should see a screen like this:

![Screen Shot 2021-12-27 at 1.56.33 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640588200204/KYFzYOtwz.png)

- Scroll down to where it says something like **# alias ohmyzsh="mate ~/.oh-my-zsh"**
- After the hashes, type in your own alias, i.e.:
```
alias cmsg="git commit -m"
```
Every time I want to run `git commit -m`, I can now use `cmsg` to do that task.

- Next `Cmd + S` to Save. Close the window.
- THEN for the changes to take affect, you will have to enter the following in your terminal:
```
source .zshrc
```

### Example Aliases

Alias names can often be hard to come up with for beginners—I know it was for me until I saw a senior engineer using some of them—so some examples would be:

```terminal
alias project:start="yarn"
alias project:build="yarn project build"
alias project:test="yarn test"

alias project:start="yarn && yarn project build"
alias project="/application/documents/project/project-file"
```

Voilà You can now use your alias to perform the task you want faster. 


If you have any questions, feel free to DM me on  [Twitter](https://twitter.com/zahrakhadijha) !
A11y tips: add a skip link
Tags: a11y, tips, html
Published: 2021-12-28 07:35:41

A skip link is **a link located at the beginning of the page and that allows the user to jump directly to certain blocks** (main content, main search, important asides...) without having to go through all the previous elements that are repeated throughout of the entire site (logo, main navigation...).

It is **especially useful for users who navigate with the keyboard**, and it can also be an aid for those who navigate using headings or landmarks.

There are several rules to follow to build a good skip link:

- It must be the first focusable element on the page.
- May or may not be visible to all users all the time.
- If it is hidden from startup, it should be visible when you receive the keyboard focus.
- Must be an internal link (starting with `#`).
- When clicking on it, the focus should move to the target element. For greater security in this behavior, it is better to add `tabindex="- 1"` to that target element and thus make it focusable.

Although all content should be contained in a landmark region, **the skip link can be located outside of any landmark**. Some validators will flag it as a warning but it is not a violation of the WCAG.

You can see some examples of skip links on the [British Government](https://www.gov.uk/) page or on [Wikipedia](https://en.wikipedia.org/). Try navigating with the keyboard from the address bar and see how it behaves.
Create a slug system with Strapi v4
Tags: strapi, strapiv4, slug, javascript
Published: 2021-12-28 15:09:52

---
title: Create a slug system with Strapi v4
published: true
description: Steps to create a slug system with Strapi v4
tags: strapi, strapiv4, slug, javascript
cover_image: https://images.pexels.com/photos/574069/pexels-photo-574069.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260
---


Let's create a slug system with Strapi V4.


1 Create a new file following this structure

```
./src/api/[api-name]/content-types/[content]/lifecycles.js
```
We can control the lifecycle on this file, so we can transform our information on several events. Check the documentation.

2 Install slugify dependency

```
yarn add slugify
```

3 Add code on your lifecycle file.

```
const slugify = require("slugify");

module.exports = {
  beforeCreate(event) {
    const { data } = event.params;
    if (data.title) {
      data.slug = slugify(data.title, { lower: true });
    }
  },
  beforeUpdate(event) {
    const { data } = event.params;
    if (data.title) {
      data.slug = slugify(data.title, { lower: true });
    }
  },
};

```

As you can see the slug is based on our title.

That's it!

So easy
Help please
Tags: react, javascript
Published: 2021-12-28 15:56:08

Hello, I'm new here in the community and I need help please, I have an application in Reactjs, yesterday I update all my dependencies, and I run my application with npm start and I got these errors, can you help me please


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jp0fxjj1xhdotzr5xlxs.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wb6ro5gd9r42tl3nzqd3.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qei1i60e3264h6eezfa4.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/di0om6x6ey2ntvq52mov.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gld7h89dzl0v02l041il.PNG)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgg9ll7vd7jdof6g7for.PNG)
[BTY] Day 2: Fancy packages to work with Dataframe
Tags: betterthanyesterday, python, pandas, dataanalysis
Published: 2021-12-28 16:19:07

2 packages I want to mention is [pandas-profiling](https://github.com/pandas-profiling/pandas-profiling) and  [Mito](https://trymito.io).


### pandas-profiling 
It will generate profile reports from a pandas DataFrame. It's more powerful than the default `df.describe()`. These are statistics presented in an **interactive** HTML report:

- Type inference: detect the types of columns in a dataframe.
- Essentials: type, unique values, missing values
- Quantile statistics like minimum value, Q1, median, Q3, maximum, range, interquartile range
- Descriptive statistics like mean, mode, standard deviation, sum, median absolute deviation, coefficient of variation, kurtosis, skewness
- Most frequent values
- Histogram
- Correlations highlighting of highly correlated variables, Spearman, Pearson and Kendall matrices
- Missing values matrix, count, heatmap and dendrogram of missing values
- Text analysis learn about categories (Uppercase, Space), scripts (Latin, Cyrillic) and blocks (ASCII) of text data.
- File and Image analysis extract file sizes, creation dates, and dimensions and scan for truncated images or those containing EXIF information.

### Mito

The main functionalities are exploring, transforming, and presenting your data with the ease of Excel. All without leaving Jupyter (see the [video demo](https://www.youtube.com/watch?v=b94KgHZyt_E&list=TLGGGtIOMhraeGQyOTEyMjAyMQ&t=11s)). It's so easy to use and it really makes "advanced data analysis accessible to all."

Check it out!
Vagrant with xdebug
Tags: xdebug, php, vagrant, vscode
Published: 2021-12-28 16:33:37



Finally i found the problem ,

    change the vagrant timezone to be same as host timezone
    server xdebug configuration .ini file changed to be :

```
xdebug.idekey=VSCODE
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.remote_autorestart = 1
xdebug.client_port=9003
xdebug.discover_client_host=1
xdebug.max_nesting_level = 512
xdebug.log_level=10
xdebug.connect_timeout_ms=600
xdebug.log=/var/log/xdebug/xdebug33.log
xdebug.show_error_trace=true
```

note that this configuration related to xdebug V3

    in vagrant file , add port 80 as forwrded_port to be like this


```
Vagrant.configure(2) do |config|
  config.vm.box_url = "file:///Users/toqaabbas/projects/theqar_vagrant/ubuntu16_php7.4_vagrantbox"
  config.vm.box = "baazbox"
  config.vm.provider "virtualbox" do |v|
    v.memory = 5120
    v.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate//var/www","1"]
    v.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/var/www","1"]
  end

  #config.vm.box = "ubuntu/xenial64"
  config.vm.network "private_network", ip: "192.168.33.33"
  config.vm.network "forwarded_port", guest: 80, host: 80 
  config.vm.provision :shell, :inline => "sudo rm /etc/localtime && sudo ln -s /usr/share/zoneinfo/Asia/Amman /etc/localtime", run: "always"

  config.vm.synced_folder "../", "/var/www"

  config.vm.provision "fix-no-tty", type: "shell" do |s|
    s.privileged = false
    s.inline = "sudo sed -i '/tty/!s/mesg n/tty -s \\&\\& mesg n/' /root/.profile"
  end

  config.vm.provision "file", source: "root", destination: "~"
  config.vm.provision :shell, path: "setup_vagrant.sh"
  config.vm.box_check_update = false
end

```

and then run "vagrant reload" to re-build vagrant again
finally change lanuch.json to be :

```
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www" : "/Users/myusername/projects"
            },
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9003
        }
    ]
}
```

the most important part was the correct location of "pathMappings"

and finally it's works :)
Hooks
Published: 2021-12-28 19:35:58


React's new feature is the React hook.It has made many difficult things easier since it came. The hook can be compared to a hook. The hook helps to hold something in place, just as the hook holds something in place.We can store any data in external file in the form of stat with the help of hook. We can use this data by calling Hook as we need. This increases the mobility of the web.Hook is a method that does not require any kind of function. It can only be used in React. It cannot be used in ordinary JavaScript.To use the hook you have to call it at the beginning of the reaction.
The hook does not work inside a function or inside a loop or anywhere else.
So everyone has to call the start hook.

Pre-requisites for React Hooks
Node version 6 or above
NPM version 5.2 or above
Create-react-app tool for running the React App.


Custom Hooks
A custom Hook is a JavaScript function. The name of custom Hook starts with "use" which can call other Hooks. A custom Hook is just like a regular function, and the word "use" in the beginning tells that this function follows the rules of Hooks. Building custom Hooks allows you to extract component logic into reusable functions.
Speeding up geodata processing with feather
Tags: feather, geodata, pickle, geopandas
Published: 2021-12-28 20:15:04

Previously, on [speeding up geodata processing](https://dev.to/spara_50/speeding-up-geo-data-processing-ig7)...

In this post, I compare the read and write performance of the feather file format against the pickle file format.

> From Hadley Wickham's [blog](https://www.rstudio.com/blog/feather/):

> What is Feather?

> Feather is a fast, lightweight, and easy-to-use binary file format for storing data frames. It has a few specific design goals:

> - Lightweight, minimal API: make pushing data frames in and out of memory as simple as possible
> - Language agnostic: Feather files are the same whether written by Python or R code. Other languages can read and write Feather files, too.
> - High read and write performance. When possible, Feather operations should be bound by local disk performance.

Geopandas has supported the feather format since version 0.8, and the test used version 0.10.

```python
import geopandas as gpd
import time
import pickle
from pyogrio import read_dataframe
import warnings; warnings.filterwarnings('ignore', message='.*initial implementation of Parquet.*')

# read shapefile
read_start = time.process_time()
data = read_dataframe("Streets.shp")
read_end = time.process_time()

# write feather test
write_start = time.process_time()
data.to_feather('test_feather.feather', 'wb')
write_end = time.process_time()

write_time = write_end - write_start
print(str(write_time/60)+" minutes to write feather file")

# read feather test
read_start = time.process_time()
csv_feather_df = pd.read_feather('csv_feather.feather')
read_end = time.process_time()

write_time = read_end - read_start
print(str(write_time/60)+" minutes to read feather file")
```

## Results

| r/w minutes | pickle | feather 
|-----|--------|---------
| read | 0.92 | 1.07 
| write | 4.36 | 1.69

Read times are comparable, but write times 4x faster. The longer write time is probably caused by converting geometry to a [Well Known Binary](https://en.wikipedia.org/wiki/Well-known_text_representation_of_geometry), which is compatible with the feather format. The caveat is that the feather format is subject to change, as evidenced by the import `ignore warning`.

## Thoughts

If your data is static or distributed, the pickle format may be better. Feather may be the right choice if you need to transfer geodata within a processing workflow with a file, e.g., from Python to R.
HTML-Form 📝
Tags: html, css, javascript, webdev
Published: 2021-12-28 23:36:31

Going to start my journey and mark 100 days calendar.👨‍💻🚀

Day: 1/100 📅

<u>**Project - 1 🔨**</u>

```
# HTML Form📝  

> Client side form validation with HTML 📜

`Check required, length, email and password match 📧`

- Create form UI 👨‍💻
- Show error messages under specific inputs ⚠️
- check Required() to accept array of inputs 🔣
- check Length() to check min and max length 〽️
- check Email() to validate email with regex ✔️
- check Passwords Match() to match the confirm password 🔑

```
Publish ➡️ [Netlify](https://keen-jennings-d13a2c.netlify.app)

Source Code </>👉 [GitHub](https://github.com/itsahsanmangal/HTML-Form)
Reporting dan logging di PostgreSQL
Tags: logging, postgres
Published: 2021-12-29 02:48:46

## Tujuan

- Log query yang berjalan mulai dari 2 detik (2000ms)
- Memastikan file log berada di direktori /var/log/postgresql
- File log tergenerate harian
- Log mencatat kapan dijalankannya sebuah query

PostgreSQL yang digunakan versi 12

Create direktori /var/log/postgresql dan set user ownernya
```
# mkdir /var/log/postgresql
# chown -R postgres.postgres /var/log/postgresql
```

Sesuaikan bagian logging di file /var/lib/pgsql/12/data/postgresql.conf
```
...
log_min_duration_statement = 2000
log_directory = '/var/log/postgresql'
log_filename = 'postgresql-%Y-%m-%d.log'
...
```

Reload konfigurasi PostgreSQL
Secret Key Cryptography
Tags: security, computerscience
Published: 2021-12-29 05:18:44

Hi.  I have just finished writing my first "real" book (that is, not counting my 5 books of Sudoku puzzles and SumSum puzzles.)  The title is, you guessed it, "Secret Key Cryptography," and that is exactly what it's about.
   If anyone is into writing cryptography primitives, this book is loaded with ideas, 140 different types of ciphers in all, at every level of security, including a practical method for achieving the One-Time Pad.  A big feature of the book is a novel method to accurately measure the security of a block cipher.
   The book is aimed at professional engineers, however I have made a great effort to make the book readable for non-technical people.  You won't find a single footnote, or theorem or proof.  You won't find integrals, summations, Venn diagrams, transforms or circuits.  There isn't a single line of code.  In short, there is nothing that would keep a smart high school student from learning cryptography.
   Let me say a bit about what else is in there, besides cryptography.  There is a lot about text compression.  Anyone who has worked in this field knows that arithmetic coding beats discrete codes, such as Huffman codes, and that adaptive coding like Lempel-Ziv-Welch beats fixed codes.  So far as I know, my book has the first algorithm that combines arithmetic coding with adaptive coding to produce a compression that beats LZW, while having essentially the same speed and storage requirements.
   A portion of the book is already available through the Manning Early Access Program at https://www.manning.com/books/secret-key-cryptography  There is a discount code **mlrubin** that gets you 50% off all versions of the book until Jan. 11.
5 WEB UX LAWS EVERY DEVELOPER SHOULD KNOW
Tags: javascript, webdev, design, programming
Published: 2021-12-29 08:21:55

---
title: 5 WEB UX LAWS EVERY DEVELOPER SHOULD KNOW
published: true
description: 
tags: javascript, webdev, design, programming
cover_image: https://i.imgur.com/aglkI3m.png
---

## 1. JAKOB’S LAW

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Websites do better the more standardized their design is.

![jakob](https://4ciipx2wt5iq3qj5qr4cu74k-wpengine.netdna-ssl.com/wp-content/uploads/2021/07/Jakobs-Law.png)

## 2. FITT’S LAW

The time it takes someone to select an object in the screen depends on how far the cursor is from the object and the size of the object. Thus, the longer the distance and the smaller the target’s size, the longer it takes.

![fitt](https://4ciipx2wt5iq3qj5qr4cu74k-wpengine.netdna-ssl.com/wp-content/uploads/2021/07/Fittss-Law-1.png)

## 3. MILLER’S LAW

The average person can only keep 7 (plus or minus 2) items in their working memory. Organize content into smaller chunks to help users process, understand, and memorize easily.

![miller](https://4ciipx2wt5iq3qj5qr4cu74k-wpengine.netdna-ssl.com/wp-content/uploads/2021/07/Millerss-Law.png)

## 4. LAW OF PROXIMITY

Objects that are near, or proximate to each other, tend to be grouped together.

- Proximity helps to establish a relationship with nearby objects.
- Proximity helps users understand and organize information faster and more efficiently.

![proximity](https://4ciipx2wt5iq3qj5qr4cu74k-wpengine.netdna-ssl.com/wp-content/uploads/2021/07/Law-of-Proximity.png)

## 5. HICK'S LAW

The time it takes to make a decision increases with the number and complexity of choices. Hick’s Law is a fairly commonsense idea: the more choices you present to a person, the longer they take to make a decision. It’s essentially a fancier way to describe the KISS rule: Keep It Simple, Stupid!

![hick](https://4ciipx2wt5iq3qj5qr4cu74k-wpengine.netdna-ssl.com/wp-content/uploads/2021/07/Hicks-Law.png)


### Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

[Subsribe to Visualway's newsletter](https://tinyletter.com/visualway)
Striver's SDE Sheet Journey - #8 Merge Overlapping Subintervals
Tags: beginners, programming, computerscience, codenewbie
Published: 2021-12-29 09:14:24

> **<u>Problem Statement</u> :-**

_Given an array of intervals where `intervals[i] = [starti, endi]`, merge all overlapping intervals, and return an array of the non-overlapping intervals that cover all the intervals in the input._.

**Example 1:**

```
Input: intervals=[[1,3],[2,6],[8,10],[15,18]]
Output: [[1,6],[8,10],[15,18]]
```
**Explanation :** _Since intervals [1,3] and [2,6] are overlapping we can merge them to form [1,6]
 intervals._

_So, in this problem, we need to merge those intervals which are overlapping, which means intervals that start point lies between the start & endpoint of another interval._

##  <u>Solution 1</u>


**step-1** first, we need to **sort** the `intervals` on the basis of their starting point. by doing this we can easily merge overlapping adjacent intervals.

**unsorted intervals**
![dsa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7ahbqnqqn5rplzzmmq7.png)

**sorted intervals**

![dsa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iig6aamvyjncml77sgcm.png)


**step-2** take the interval and compare its `end` with the next interval `start`.
  > **1** if they overlap, update the `end` of the first interval with the max end of overlapping intervals.

  > **2** if they do not overlap, move to the next interval.

See below the java version of this approach.

> Java

```java
class Solution {
    public int[][] merge(int[][] intervals) {
       
        final int start =0, end =1;
        List<int[]> validIntervals = new ArrayList<>();
        
        // sort the array by thier starting point
        Arrays.sort(intervals,(a,b)-> Integer.compare(a[0],b[0]));
        
        // store first interval as valid
        validIntervals.add(intervals[start]);
        
        
        for(int i=1; i<intervals.length;i++){
            int[] interval = intervals[i];
            int[] validInterval = validIntervals.get(validIntervals.size()-1);
            
            // if intervals overlapping,then marge
            if(validInterval[end] >= interval[start]){
               validInterval[end] = Math.max(interval[end],validInterval[end]); 
            }else{
                validIntervals.add(interval);
            }
        }
        
        return validIntervals.toArray(new int[validIntervals.size()-1][]);
    }
}
```

**Time Complexity :** sorting the intervals array + traversing through the array => **O(nlogn)** + **O(n)**

**Space Complexity :** creating a new n size of array => **O(n)**

Thank you for reading this blog. if you find something wrong, let me know in the comment section.
Quickly ship your changes to git? Use 'ship'
Tags: bash
Published: 2021-12-29 10:25:31

Ship is a small cli command I wrote that automatically adds and commits all your changes and pushes them to your current branch. It then lets you know if it succeeded or failed.

To add ship to your cli, copy and paste this into your terminal:

```echo "ship () { BRANCH=$(git branch --show-current); git add . && git commit -m \"${1:-Improvements}\" && git push -u origin \"$BRANCH\" && say you shipped it || say something went wrong }" >> ~/.zshrc && source ~```

Go ahead and try it! Hope you like it ;)

P.S. only tested on MacOS.