teleren/devto huggingface dataset:
X-Bows keyboard a review
Tags: xbows, keyboard, mechanical, ergonomic
Published: 2021-08-29 06:54:03

This is a quick review of the X-Bows ergonomic mechanical keyboard. 

The short story is that it's a fantastic keyboard. Especially if you're used to split keyboards, 10 finger typing and using a mac.  

# The long story:

I have a history with ergonomic keyboards over the years I've used

- Microsoft Natural Ergonomic 4000
- Microsoft Sculpt
- Logitech K350 Wireless Wave Keyboard

I have less experience with mechanical keyboards having only used a cheap straight mechanical keyboard with blue switches that I bought on Amazon. 

The X-Bows that I have is a 2nd hand [Nature model](https://x-bows.com/collections/keyboards/products/x-bows-nature-ergonomic-mechanical-keyboard) with silent brown switches. Which helps to keep my home environment more comfortable with both myself and my wife working from home. 

## There is a learning curve

Despite the fact that I've used ergonomic and split keyboards before, and that I learned to type as a child, I found the transition to the X-Bows difficult but in the end manageable.  

Why does 10 finger typing matter? The X-Bows is a split keyboard and so if your fingers like to jump the centre line and do things like using the left index finger to type `n` then you'll find any split keyboard difficult. 

The layout of the standard keys on the keyboard is different in a bigger way to the previous ergonomic/split keyboards I've used, adding extra keys between the two halves. This has led, and sometimes still leads to, some erroneous keypresses. The biggest issue that I have faced as I was adjusting to the layout was the additional enter key in the middle of the keyboard. For my first few weeks messages that I sent in Slack often ended at the first B.  This was a result of me over reaching and hitting enter as well as b.  It made for some odd messages as I started a new job, but nothing that couldn't be laughed off. 

## Mac Vs Windows

The other thing to note is the layout is much better suited to working on a Mac than a Windows machine.  I regularly switch between the two operating systems having a Mac for a work machine and a more budget conscious Windows machine for my personal use. 

The large Alt keys are great when working on a Mac as I have my Mac set up to map external keyboards to map the command key to the keyboard Alt key. I do this so as to maintain the same keyboard layout as the laptop keyboard. 

For windows the I've found that the lack of home and end keys on the keyboard is problematic. It turns out the weather in code or a text editor I want to got the start and end of a line quite often. This is far from a critical failure for the keyboard just a mild inconvenience.  

# Overall

The X-Bows has found a long term place on my desk. The silent brown switches are fantastic.  The keyboard layout is learnable and feels efficient once it has been learned. Other niceties like the rgb backlights make it a fun keyboard to use. 

These days 90% of my typing is done on my work Mac so the lack of home and end keys isn't more than a mild inconvenience most of the time.
Making Tables Scrollable in CSS
Tags: css, html
Published: 2021-08-29 06:47:25

Because [HTML tables](https://htmlreference.io/tables/) are set to `display: table` by default, adding scrollbars to them is a bit nonintuitive.

We can set our tables to `display: block` and modify their `overflow` from there, but I've found wrapping tables in containers to be more adaptable and flexible.

## Vertical table scrollbars

First, let's set up vertical scrolling.

Consider the following `<table>`, which is wrapped in a `<div>` container:

```html
<div class="tableContainer">
    <table class="table">
        ...
    </table>
</div>
```

We can set a height for the table's container and modify the table such that it will fit snug within the container:

```css
.tableContainer {
    height: 300px;
    overflow: hidden;
}
.table {
    position: sticky;
    top: 0;
    width: 100%;
}
```

In this example, I set the height to `300px` - but you can set it to whatever you want!

Our table will now have an inset vertical scrollbar and will expand no further than the height we set.

## Horizontal table scrollbars

If you want to implement horizontal scrolling, there is an approach very similar to the vertical scrolling example:

```css
.tableContainer {
    overflow: hidden;
    width: 800px;
}
.table {
    position: sticky;
    top: 0;
    width: 100%;
}
```

I set the width here to `800px`, but again, you can change it to whatever you want.

If you want both horizontal *and* vertical scrollbars for your table, simply specify both a `height` and a `width` in `.tableContainer`.

## Conclusion

And that's how you can make your tables scrollable with just a bit of CSS!

I refer back to this snippet all the time, and I hope you found it useful too.
React interview questions
Tags: react, interview
Published: 2021-08-29 06:29:00

Here are some of the questions I was asked while being interviewed for the post of senior react developer. 
- What is a pure function
- What is the difference between DOM vs React DOM
- In webpack what is loader vs plugin
- In typescript what is module vs namespace
- In react what is shallow rendering
- Differentiate between redux/flux/mobx trees
- In redux what is the concept of async calls

Do you remember some of yours?? Kindly share in the comments for the benefit of the community. Thanks
Reverse Image Search with Google Cloud
Tags: googlecloud, machinelearning
Published: 2021-08-29 06:06:36

Almost every marketplace e-commerse system now trying Machine Learning or Deep Learning to leverage their sales. Like recommendation system, trail room and reverse image search.
What is reverse image search?

Say you liked one shoe image at Instagram. Then you can scan that image and with the help of reverse image search will find out where you can buy the similar shoe.

So this is really wonderful for marketplace companies as well. Also you referal marketing companies can use this reverse search engine as a powerful tool for them. Each search result link will be a deep link for a specific product into one e-commerce site. So when a person click on that link to go and purchase that product. Marketing company will earn the referral bonus as well.

Lets start with Google Cloud Free version
Setting up Vision API in your project.

Go to your project browser and select one you want to work with in Google Cloud Platform. 

https://console.cloud.google.com/

If no project exist then you have to create a project.

After that go to https://console.cloud.google.com/apis/api/vision.googleapis.com/

Enable the API

Then go to https://console.cloud.google.com/storage/ and create a Cloud Storage bucket. Give the bucket permission as fine-grain.

In the Cloud Console, go to the Cloud Storage Browser page.
Click Create bucket.

In the Create bucket dialog, specify the following attributes:
Name: A unique bucket name. Do not include sensitive information in the bucket name, because the bucket namespace is global and publicly visible.

Default storage class: Standard

A location where bucket data will be stored.
Click Create.

After bucket creating we need to upload a image to test for reverse image search with API.

Upload a image to the bucket like below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yoajqff16w6kwde7gxh.jpeg)

After the file is uploaded and listed in the Cloud Storage Browser, share the image publicly. Here you need to give the permission for your image object. So that public can view from the browser.

You will get a public url for you image.

Open the API Explorer from your Cloud Vision API page of your cloud consol admin panel.

You can test your image public url. Or you can use this https://cloud.google.com/vision

Also you can get the code tutorial here https://cloud.google.com/vision/product-search/docs/tutorial
How to learn Machine Learning in 6 month
Published: 2021-08-29 06:02:55

Yes, this is enough time for you to start with Machine Learning application. 

Let begging with confidence and target.
Prerequisite to learn Machine Learning
Math and Statistics. Machine Learning algorithms based on some primary math and stat mainly. But also used Calculus and higher statistics as well.

You can find the basic learning materials for machine learning prerequisite following

https://www.khanacademy.org/math/linear-algebra
https://www.khanacademy.org/math/statistics-probability
https://www.khanacademy.org/math/calculus-1
https://www.khanacademy.org/math/differential-calculus
https://www.khanacademy.org/math/multivariable-calculus
For advance, the learner can find the following useful
https://ocw.mit.edu/courses/mathematics/18-06-linear-algebra-spring-2010/ [by world’s best Prof. Gilbert Strang]
https://www.edx.org/micromasters/mitx-statistics-and-data-science

Hope most of the math and stat part you have already done in your school education. If not then kindly complete these tutorials or similar tutorials.

Many people ask me that are the math and stat must require to learn ML? yes they are required to understand the ML model algorithm available with many different libraries you will work on. Not only that you need to understand the problem you will be working on. The fundamental element of any ML or DL application is data. To understand the data and to clean them properly for preparation are all required to understand the math and stat.

But don’t be worry if you are not familiar already with them. Go ahead and follow the links I have provided above. They are really easy to learn when you put your concentration and mind. Wish you all the best.

The second step to learn the best language for ML, python. You can follow

https://www.edx.org/xseries/mitx-computational-thinking-using-python
https://www.freecodecamp.org/news/search/?query=python
https://learn.datacamp.com/

The third step is to find out a really great course for machine learning. Yes, it is really difficult as there are plenty and most of them are worth it.

Start with https://www.coursera.org/learn/machine-learning/home/welcome also can try https://courses.edx.org/course_modes/choose/course-v1:MITx+6.86x+1T2021/

These both course will make you so confident that you can really start with ML and start to solve problems step by step. 

If you are eager to do some more certification you can go ahead as well for references.

Where you will find materials.

You need a lot of data to practice. You will get them from many places but start with and continue use for some good source of data are

https://www.kaggle.com/
https://scholar.google.com/
https://www.visualdata.io/discovery

You can also follow this link for more dataset.
What is the best way to upgrade?

Join an open-source team to solve a real-life problem. You can find out at 

https://callforcode.org/
https://opensource.google/projects/list/machine-learning
and many more.

Hope this will help you to start your journey for Machine Learning. If you are from a different country and love to work remote can contact after learning. 
Thanks.
Aggregation Pipeline
Tags: mongodb, database, beginners, datascience
Published: 2021-08-29 04:35:55

Welcome back everyone.  For this post I am going to continue talking about databases, specifically the aggregation pipeline in MongoDB.  Most people learn how to pull data by using find commands in the Mongo Shell.  While this is fine for simple queries it becomes insufficient as requests become more complex.  This is where the aggregation pipeline comes in.  It breaks up the query process into stages that form the pipeline.  A generic example can be seen below.

![MongoDB Aggregation Pipeline Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nv658jlurveur105ubp.png)

The most common stages are:

- Match: Filters the documents to pull what is needed

- Group: Separates the documents into specified groups

- Sort: Sorts the documents in each group (ex: ascending or descending)

There are other more complex stages such as unwind and project but we will not be going over them.

The syntax to create a pipeline is to first create an array of JSON documents that contain each stage in the order you wish them to be performed.  See an example below.

```
pipeline = [
	{$match : {name: “John”},
	{$group : {_id: “city”},
	{$sort: {age: 1}
]
db.collection.aggregate(pipeline)
```

Walking through the example, the pipeline first finds all of the documents that have a name that equals John.  It then groups all of the John’s by their city and sorts them in each group by their age in ascending order.

As you can see this form of query can be extremely powerful and enhance readability of complex operations.  It is important that as you learn to use the framework that the stages are ordered in ways to increase performance and do not hit the memory limitations.  Let me know down below if you enjoyed the post and I hope you have a great rest of your week.

Resources:

1. Couto, J. (2021, May 4). The beginner's guide to MongoDB Aggregation (With Exercise). Studio 3T. https://studio3t.com/knowledge-base/articles/mongodb-aggregation-framework/.

2. Aggregation pipeline. Aggregation Pipeline - MongoDB Manual. (n.d.). https://docs.mongodb.com/manual/core/aggregation-pipeline/.
Animations Pt. 2
Published: 2021-08-29 04:35:31

I learned a ton about creating animations over the last two days.

First, here's the fruit of my labor - the animation of our client's logo:


While imperfect, I'm happy with how it turned out. It was a learning experience, and in that regard it was a total success. I've learned the fundamentals of animating html elements (simple structural elements elements like `<p>`s but also `<img>`s and `<svg>`s) and have also seen some of the wild possibilities that exist to create attractive, compelling, and beautiful experiences for users and viewers.

This was pretty simple to put together. Here's the code that represents the horizontal left-right movement of the 'U';

```javascript

#u {
  position: relative;
  margin:0px;
  padding:0px;
  animation: u-xAxis 5s 1 forwards;
}

@keyframes u-xAxis {
  0% {
    transform: translateX(.8em);
   }
  100%{
    transform: translateX(0em);
  }
}
```

The first code block is standard css. We're interested in the `animation` value. Here we specify properties of the animation including the animation name (the name of the keyframes that define the time values for our animation sequence), the duration, number of repeats, and the direction.

There are other options too, but those are the ones I used in this project.

I think of the keyframes as the engine of the animation. It defines the time intervals over which elements change. And it's easy. Well, the theory is easy. Defining rulesets to achieve your vision - less easy.

What I've got going here is that at 0% elapsed-time (before any time has passed), I'd like to apply the translateX css property to any elements that is assigned this ruleset. And at 100% elapsed-time (at the end) I want those elements to have the property assigned at that point. You can set intervals at any point along the way and even combine them to achieve the effects you want.

There's a sea of creative, imaginative css animations out there. Explore, learn, and be inspired!
Leetcode 56: Merge Intervals
Tags: python, sorting, leetcode
Published: 2021-08-29 03:44:10

Problem statement:
https://leetcode.com/problems/merge-intervals/

- Straight forward solution is to sort the intervals by start time, iterate them and check if two intervals overlap. If they overlap we take the union of those intervals; Otherwise, we take both of them. 

Python
```python
class Solution:
    def merge(self, intervals: List[List[int]]) -> List[List[int]]:
        # sort intervals by start time
        intervals.sort(key=lambda i: i[0])
        
        res = []
        res.append(intervals[0])
        n = len(intervals)
        for i in range(1, n):
            if res[-1][1] >= intervals[i][0]:
                res[-1][1] = max(res[-1][1], intervals[i][1])
            else:
                res.append(intervals[i])
        return res
```
LeetCode 417. Pacific Atlantic Water Flow (javascrpt solution)

Tags: javascript, algorithms
Published: 2021-08-28 23:33:37

###Description:
There is an m x n rectangular island that borders both the Pacific Ocean and Atlantic Ocean. The Pacific Ocean touches the island's left and top edges, and the Atlantic Ocean touches the island's right and bottom edges.

The island is partitioned into a grid of square cells. You are given an m x n integer matrix heights where heights[r][c] represents the height above sea level of the cell at coordinate (r, c).

The island receives a lot of rain, and the rain water can flow to neighboring cells directly north, south, east, and west if the neighboring cell's height is less than or equal to the current cell's height. Water can flow from any cell adjacent to an ocean into the ocean.

Return a 2D list of grid coordinates result where result[i] = [ri, ci] denotes that rain water can flow from cell (ri, ci) to both the Pacific and Atlantic oceans.

###Solution:
Time Complexity : O(n^2)
Space Complexity: O(n^2)

```javascript
var pacificAtlantic = function(heights) {
    // Set amount of rows and columns to variables
    const numRows = heights.length
    const numCols = heights[0].length
    
    // Create matrixes to hold which cells can visit each ocean
    const pacific = Array(numRows).fill().map(() => Array(numCols).fill(false))
    const atlantic = Array(numRows).fill().map(() => Array(numCols).fill(false))
    
    // Run dfs on first and last columns that touch an ocean
    for (let col=0 ;col<heights[0].length;col++){
       dfs(0, col, -Infinity, pacific)
       dfs(numRows - 1, col, -Infinity, atlantic)
    }
    
    // Run dfs on each cell on the top and bottom rows that touch an ocean
    for (let row = 0;row<heights.length; row++){
        dfs(row, 0, -Infinity, pacific)
        dfs(row, numCols - 1, -Infinity, atlantic)
    }
    
    // Starting from an edge of heights that touches an ocean, move inward and add all cells to the ocean matrix that can spill into the previously vistited cell
    function dfs(i, j, prev, ocean){
        // Stop dfs if we given coordinates that are not on the board, if the value of the cell we are visiting cannot spill water into the previous cell, or if we have already visited this cell
        if (i<0 || i >= numRows || j < 0 || j >= numCols || heights[i][j] < prev || ocean[i][j]) {
            return
        }
        
        // Set this cell as visited by the current ocean
        ocean[i][j] = true
        
        // Look in all directions to find more nodes that can visit the current ocean by flowing into the cell at [i, j]
        dfs(i+1, j, heights[i][j], ocean)
        dfs(i-1, j, heights[i][j], ocean)
        dfs(i, j+1, heights[i][j], ocean)
        dfs(i, j-1, heights[i][j], ocean)    
    }

    const res = []
    
    // Check which cells [i, j] are able to touch both oceans by checking if a cell is in both ocean matrixes
    for (let i=0;i<numRows;i++){
        for (let j=0;j<numCols;j++){
            if (atlantic[i][j] && pacific[i][j]){
                res.push([i, j])
            }
        }
    }
    return res
}
```
About me | #FirstPost
Published: 2021-08-29 03:39:14

Hi there, welcome to my first post on dev.to.


###Introduce
My name is Muhammad Naufal Ardhani, you can call me Naufal if you want, I am now 16 years old and still a high school student in Jakarta.

###Passion
* Hacking
* Robotics
* Basketball

###Projects
* [domhttpx](https://github.com/naufalardhani/domhttpx) - google search engine dorker with HTTP toolkit built with python, can make it easier for you to find many URLs/IPs at once with fast time.
* [RPC](https://github.com/naufalardhani/cpanel-pass-reset) - An easy tool to reset cpanel password when you can't upload backdoor to server. This tool will be useful only if the password reset feature on cpanel is activated.

###Social Media
* [Instagram](https://www.instagram.com/naufalardhani_/)
* [Twitter](https://twitter.com/owpalll)
* [Github](https://github.com/naufalardhani)
* [Facebook](https://www.facebook.com/naufal.ardhani.1/)
* [LinkedIn](https://www.linkedin.com/in/naufalardhani/)
The thesis, antithesis and synthesis in software development
Tags: todayilearned, learning, development, codequality
Published: 2021-08-28 18:45:48

The Philosopher Georg Wilhelm Friedrich Hegel wrote that progress is not always linear, and instead is often messy, and only achieved by lurching from one mistake to another. It usually takes 3 lurches or 3 swings of a pendulum to arrive at a balanced outcome. I see this often played out in Software Development, such as through the adoption of a new development practice.

For example the enlightenment movement principle truth was the use of reason. This led to the rise of romanticism, which challenged the enlightenment with the notion that emotion was more important. Both movements contained truth but were extreme in aspects and contained distortions of the truth, leading to a clash of ideas. This clash was necessary to form ideas that closer resembled the truth.

Hegel views these three stages as the thesis, antithesis and synthesis. In this case, the enlightenment being the thesis, romanticism being the antithesis and the clash of the two being the synthesis.

Growth requires the clash of divergent ideas and will therefore be painful and slow. Both overreactions are inevitable, and part of the process. They clash and interact until the best elements are formed into a synthesis.

In software development this theory often gets played out in the industry at large and also at the company level.

Take for example unit testing. Writing unit tests after code could be viewed as the thesis, but it was an extreme position. The advent of Test Driven Development proposed a new approach, but also often got applied in an extreme manner, i.e. TDD must be applied in 100% of all cases. Ideally, companies move to the synthesis stage, allowing the clash of the ideas, resulting in a synthesis whereby the right approach is applied according to context.

The synthesis is no guarantee. Often the synthesis is delayed or never reached, by repeated lurches towards extreme positions. To ensure the synthesis takes place, it requires letting go of dogmatic thinking, discussing and actively listening to alternative viewpoints, and experimenting to find the right balance.
Scheduler_V1
Tags: python, codecademy
Published: 2021-08-29 03:33:06

A simple application created to satisfy the project requirement @codecademy.

Depending on the user's choice, lists the minutes available for studying and topics to cover using random.randint()

Very basic stuff but exciting things learnt along the way...

LINK : https://github.com/asinhacode2/Project_Python.git