teleren/devto huggingface dataset:
Trello to Notion for free
Tags: productivity
Published: 2021-06-01 18:12:36

---
title: Trello to Notion for free
published: true
date: 2021-06-01 18:03:40 UTC
tags: productivity
canonical_url: https://www.mskog.com/posts/trello-to-notion-for-free
---

 ![Trello to Notion for free](https://s3-eu-central-1.amazonaws.com/mskog-cms/2021/06/photo-1601933470096-0e34634ffcde.jpeg)

[Notion](https://www.notion.so/) recently make [their API](https://developers.notion.com/) public. This has been a long awaited thing that opens up a lot of possibilities for Notion users like myself. My current setup is using [Trello](https://www.trello.com) as an inbox of sorts and then I move the cards manually to Notion as part of my daily routine. This is of course boring and can now be automated using the new Notion API.

My first version of this used [Zapier](https://zapier.com/). Zapier is a no-code solution for things like this. It can connect pretty much anything to everything. You can get a notification to Slack when someone subscribes to your Twitter account, automatically share posts in an RSS feed to your LinkedIn profile, and so on.

They have a great interface for this and it makes things very easy to use. The free version comes with 100 tasks a month. A task a single thing that Zapier does. Moving a Trello card to Notion is a single task for example. However, I also want Zapier to delete the card when it has been moved. This means that I now need two tasks to do this and the free version will not be enough.

The cheapest plan costs $19.99 a month billed annually and includes 750 tasks a month. This would be enough but since I don't use Zapier for other things then this is quite a bit of money just for this.

[Automate.io](https://automate.io/) is another option and includes 600 monthly actions for $9.99 a month.

I eventually decided to just use [Huginn](https://www.mskog.com/posts/self-hosted-tools-for-web-development) instead. It turned out that the Notion API is pretty easy to use with Huginn but there is a lot of nested data in it. It took quite some time to get it working so I thought that I'd share my Huginn scenario here so that you can get started quicker.

Click [here](https://gist.github.com/mskog/e676a711a31d200a2ebed9bfd3612907) to get it. It is shared though Github gists.

You will need to fill in the following:

**NOTION_DATABASE_ID**. The ID of the database to create tasks in. Simply browse to the database in Notion to find it.

**NOTION_API_SECRET.** [Sign up for the Notion API](https://developers.notion.com/docs) to find it. Do note that you have "share" the database with the API to make it work.

**TRELLO_LIST_ID**. The list to pull cards from.

**TRELLO_API_KEY** and **TRELLO_API_TOKEN**

My scenario is pulling cards from two different Trello boards to two different Notion databases: one for personal use and one for work. Simply delete the Agents you don't want.

Enjoy your free API integration!
What is a build system and what is CI?
Published: 2021-06-01 17:45:52

For a long time, I thought I knew the answer to that question. A build system understands your software, how to build and test it. And a CI is a loop that runs the build system on a server.

When I was the tech lead for Angular CLI, I asked a lot of our big corporate users "what build system do you currently use" and the most common response was "Jenkins". Of course with my preconception of what these terms mean, I thought they were just wrong.

It turns out they were right, because they turned Jenkins into the build system. They probably started in the small scale with a build system for the frontend code (let's say npm scripts) and a build system for the backend (let's say Maven), and at that time Jenkins would have run these independently. As things got complex and interconnected, they'd need integration tests, so no surprise, the one common place these could be added is using some Groovy code or a plugin to Jenkins (There should be a software aphorism "any tool with sufficient adoption grows a plugin ecosystem, thereby rendering it redundant with tools it should have complimented".)

Now they created a build system you can't run locally on your machine, only in the CI environment, and kinda ruined CI for everyone. Now engineers have to wait forever to go through a CI loop to get something green, because it's too hard to reproduce the failure locally to fix it. It's sad, but understandable the way this evolved.

There are build systems which are meant to generalize across the stack and are locally-reproducable ([Bazel](http://bazel.build) of course) - but what I've learned is that to sell that solution, you have to frame it as replacing CI, not replacing the build system. After switching to Bazel, you actually have a "CI" you can run locally on your machine, with a server that runs that thing in a loop. And you try not to get too hung up on how the term "CI" lost all its meaning in the process.
Where In The Array A Number should Be Inserted By Order
Tags: javascript, devops, tutorial, beginners
Published: 2021-06-01 17:42:33

```
function getIndexToIns(arr, num) {
  return num;
}

getIndexToIns([40, 60], 50);
```
* Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.
* For example, `getIndexToIns([1,2,3,4], 1.5)` should return `1` because it is greater than `1` (index 0), but less than `2` (index 1).

* Answer:
```
function getIndexToIns(arr, num) {
  arr.sort(function(a, b) {
    return a - b;
  });

  for (let i = 0; i < arr.length; i++) {
    if (arr[i] >= num) return i;
  }

  return arr.length;
}

getIndexToIns([40, 60], 50); // will display [40, 50, 60]
```
#### Explanation:
 * First I sort the array using .sort(callbackFunction) to sort it by lowest to highest, from left to right.
 * Then I use a for loop to compare the items in the array starting from the smallest one. When an item on the array is greater than the number we are comparing against, then we return the index as an integer.
Typical issue I'm having making a 'Chrome-extension'
Tags: discuss, help
Published: 2021-06-01 17:39:27

Today I decided to make a Chrome-extension and the typical issue I was having are:
### First-The Size
I first created the `manifest.json` as it described in the [Chrome Dev Docs](https://developer.chrome.com/docs/extensions/mv3/getstarted/#manifest), and then created a file `Popup.html` and some css and js file also I worked on the extension as a usual website on my browser to avoid again and again reloading the extension but when I loaded it using chrome dev tools the size of every element in the extension block was shrinked .
_So tell me why this happening_

### Second - External Libraries
As I said earlier I was firstly using my browser to do all the stuffs, so I used the font-awesome library but it isn't working in the extension. I Searched about this on Google and found that it's something related to `content_security_policy` and I have to mention the site in _manifest.json_.
So, what is `content_security_policy` and would I have to mention it for each and every external scripts.

### Third - How to Search ?
This Problem  is the only one which made me write this post.
I mean, How do I search on Google for problem related to Chrome Extension whatever I search it shows me results from chrome webstore for different extension after that it shows blogs suggesting different types of related extension.
No matter what I search it shows me extensions only.

### I am new to extension building
Please give me some useful suggestions or say tips that I should do.
<hr>
Removing An array With a Falsy Value
Tags: devops, tutorial, beginners, javascript
Published: 2021-06-01 17:26:27

```
function bouncer(arr) {
  return arr;
}

bouncer([7, "ate", "", false, 9]);
```
* We should remove all falsy values from an array.
* Falsy values in JavaScript are `false`, `null`, `0`, `""`, `undefined`, and `NaN`.

####Hint:
```
// regular for loop that I use which is 
for (let i = 0; i < arr.length: i++) { // which reads indexes.
// This new method while watching videos which is 
 for (let elem of arr {
 console.log(elem); 
 }
// basically its a loop that goes through all the elements themselves instead of going through the indexes.
 if (false) {
 console.log("hello") 
; // it wont call out hello because false is a falsey value
```

* Answer:
```
function bouncer(arr) {
  let result = [];
  for (let elem of arr) {
    if (elem) result.push(elem);
  }
  return result;
}

bouncer([7, "ate", "", false, 9]); // will display [7, "ate", 9]
```
Day 99
Tags: 100daysofcode, programming
Published: 2021-06-01 17:21:36

Day 99/200 of #200DaysOfCode #100DaysOfCode

- Solved three problems on Codewars.

1 - The good old olden early years (5 kyu)
2 - Numerology (6 kyu)
3 - TGI Friday!! (6 kyu)
Using slice() and splice()
Tags: devops, tutorial, beginners, javascript
Published: 2021-06-01 17:18:38

```
function frankenSplice(arr1, arr2, n) {
  return arr2;
}

frankenSplice([1, 2, 3], [4, 5, 6], 1);
```
* Here You are given two arrays and an index.
* Let's Copy each element of the first array into the second array, in order.
* We begin inserting elements at index n of the second array.
* Then you should return the resulting array. The input arrays should remain the same after the function runs.
####Hint:
* The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
* The `splice()` method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place

* Answer:
```
function frankenSplice(arr1, arr2, n) {
  let copiedArr = arr2.slice();
  copiedArr.splice(n, 0, ...arr1);
  return copiedArr;
}

console.log(frankenSplice([1, 2, 3], [4, 5, 6], 1)); // will display [4, 1, 2, 3, 5, 6];
```
🔥 Naming conventions of JavaScript Functions
Tags: javascript
Published: 2021-06-01 17:14:21


☑️Function names should start with a character
☑️Function names should be a verb/actions
        Ex: getUser(), listUsers(), totalCars(), calculateArea()
☑️Just like in Java, functions are methods which ends with () and starts with smallCase and follow camelCasing
☑️A function can be declared in 2 ways. 
    ☑️. Function expression
    ☑️. Function declaration
☑️Function can accept arugments like variables, objects, arrays and another function. 
    Note: Function accepting another function ---> This concept is called call back function in Javascript
☑️. A function can return or not return any type(data)
☑️. typeof keyword is used to find the recieved data type for a function
☑️. Function invoking with in same JS files
☑️. Function invoking within different JS files
☑️. One function should perform one task and the name of the function should be the purpose of that function
☑️. Functions are created with an intension of code re-usability
Episode 6: Mentorship with Cheese Sauce
Tags: teaching, learning, programming, mentorship
Published: 2021-06-01 16:46:00

The café's temporal stabilizer has gone out, and there's only one person who can fix it: the inimitable @vaidehijoshi! Turns out, being a cheese sauce expert can really come in handy in time travel. Who knew?

Vaidehi chats with Jason and Bojan about teaching computer programming, debugging with print statements, and empowering software teams.

We might even have discovered where all bugs ultimately come from!

Listen now.

{% podcast https://dev.to/bughunters/episode-6-mentorship-with-cheese-sauce %}

---

BaseCS: https://medium.com/basecs

Vaidehi on Twitter: https://twitter.com/vaidehijoshi

56k Emulator: http://56k-emulator.co.uk/

Music by: [https://audionautix.com](https://audionautix.com)

Sponsored by Softerrific: [https://www.softerrific.com/](https://www.softerrific.com/)
Wait... Computers are stupid?
Tags: computerscience, softwareengineering, technology
Published: 2021-06-02 13:57:33

---
title: Wait... Computers are stupid?
published: true
date: 2021-06-01 16:42:01 UTC
tags: ComputerScience,SoftwareEngineering,technology
canonical_url: 
---

Computers have been around for a fairly long time, and during that time, they have been misconceived for being "smart" or "clever" or whatever term you prefer to call them. Emphasis on **"misconceived"** though, computers aren't really the smartest of folks, and maybe one could go as far as to say they're pretty stupid.

Okay, so computers aren't smart, no big surprise there, but why exactly have they been mistaken for having incomprehensible amounts of knowledge for so long? Well, the answer is simple, it's all in the **"how"** of computers. You see, computers may not actually be stupid, they're just obedient, very good at taking instructions, and following orders precisely, and they're also quick, **very quick!** It's just who they are.

While obedience sounds like something you'd appreciate from something you own, it has a downside. Computers lack something you and I don't even think about often, something that comes standard, as a default to our system: **common sense**. If I'm a 7-year old kid and you adopt me to be part of your family (thus you, being my owner) and you tell me to jump off a balcony of a tall building, the most likely outcome of that instruction would be laughter because you'd really have to be joking. But a computer? uhh, well, a computer probably WOULD jump off if it has legs. The point here is that I (the 7-year old kid) would be taking into account the building's height from which attempting to land my feet on the ground without taking the stairs or elevator (jumping) would very much break most bones in my human body, shatter my human organs and render me dead!

Another downside here is the following of precise instruction. Sure, this may sound okay but if you're a programmer then you know how much of a problem this can be.

So yeah, that's it, computers aren't really smart... they're just obedient and really good at following your instruction. But you already knew that, didn't you?
Launching a GUI application inside the docker container
Published: 2021-06-01 16:05:48

 STEP 1:- Launching  Container
 docker run -it --name ml --net=host --env="DISPLAY" --volume="$HOME/.Xauthority:/root/.Xauthority:rw" centos
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g60lmllfbif3si5yd2wt.png)
After running this command it will lunch docker container name as ml
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmqzghsdj6oscle8bvt7.png)
 
STEP 2:- Installing python3
yum install python3
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zvp4hrzk0kbgpr63xtl.png)
 
STEP 3:- Installing jupyter notebook
pip3 install jupyter
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mngk0lwaip4l7jbiimpa.png)

STEP 4:- Installing Firefox
yum install firefox
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y60tcd33yzgkked9htja.png)
 
STEP 5:- Launching jupyter notebook
jupyter notebook
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nmz7iotbiu34zykgndp.png)
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/148iqgc82y3rl5kkekum.png)
Running GUI Applications inside Docker Container
Tags: docker, devops, linux
Published: 2021-06-01 16:05:01

<h2>What is DOCKER?</h2>

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries and configuration files; they can communicate with each other through well-defined channels.

<h2>What is GUI ?</h2>

The graphical user interface is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, instead of text-based user interfaces, typed command labels or text navigation.

Lets Directly Jump to Practicles : 

Docker Engine Must be Installed in the Base OS / Host .

To confirm whether docker is installed or not we can use :
[root@os]~#  docker --version

Docker Engine must be in running state .
[root@os]~# systemctl start docker

[root@os]~# systemctl status docker
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o6msokvshm1ruqit7c6.png)

We must have a docker image to execute our task .

[root@os]~# docker pull centos:latest

We will now create a Dockerfile in which we will specify our Requirements for our own custom Image

[root@os]~# vim Dockerfile 

FROM centos:latest
RUN yum install firefox -y 

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

[root@os]~# docker build -t firefox:v1 .
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz11ig4sbwwq8vf0phlq.png)

docker build will help us to make our own customized image with tag firefox:v1
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ln9fp1a8rej91tae8zj8.png)

[root@os]~# docker run -it --name task2 -e DISPLAY=$DISPLAY --net=host firefox:v1
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wu412ytz0626yuyrhvrx.png)

$DISPLAY == Enivornment Variable for our Display :0 is the main display.
--net=host == Using Socket to make connect between docker and base OS (Host)

[root@os]~# firefox

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

[root@os]~# jupyter notebook

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

In Addition to firefox i used jupyter notebook as a GUI APP.

<marquee>Thanks for Visiting my Article </marquee>
Web Development and Web Developer
Tags: webdeveloper, wedevlopment
Published: 2021-06-01 15:58:14

This is my first blog, and as you may know, I am a complete novice when it comes to web development. I wanted to tell you about my experience. Let's get this party started.

As the first question that comes to mind what is web development or who is a web developer? The answer is that web development includes all the knowledge related to the web, how a website or web app works, and who has all the knowledge related to this stuff is known as a Web developer.

The following question may arise: why should you learn web development? Because: 

- First and foremost, there is a good career and income.
- You can create your own websites.
- You can create your own web apps, such as Facebook and Twitter.
- There are countless ways to make money online, even in rural areas.
- Web developers are always in demand in the IT industry.

I hope you understand the significance of a web developer. You can learn more about it by Googling it. So that's all for now, and I'll see you in the next blog.
Predict time
Tags: machinelearning, deeplearning, datascience, analytics
Published: 2021-06-01 15:45:02

How to predict the closing time of a new issue in Open Status using ML/ DL/ analytics? The historical data contains dates of when an issue is in ['Opened','Closed','Implemented','Rejected'] Status.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odhwit9za4zege3ghigd.png)
Understand Polymorphism once for all
Tags: typescript, polymorphism, programming, oop
Published: 2021-06-01 15:44:49

The main reason for using interfaces is to achieve polymorphism and to provide developers with the ability to implement interface methods in their own way in the future.

In this example I will use TypeScript and I will put the repository at the end of the note

Suppose we have an interface and three classes:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cn3ocgbfbn4n8ncc3b7.png)

This is the connector interface.

Now we are going to implement the Wifi communication.

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

Here we have developed our concrete class called WifiConnector which has its own implementation of type Connector.

---

Now we are creating our System which has a Connector component. This is called dependency injection.

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

---

### Let's look at this line of code ...

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

Connector is an interface and must have the method doConnect().

Now, since Connector is an interface, the System class has much more flexibility.

We can pass any type that has implemented the Connector interface.
In the future, the developer will achieve more flexibility.

---

For example, now the developer wants to add a Bluetooth  connection module:

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

We see that WifiConnector and BluetoothConnector have their own implementation.
There is a different way to connect.

So we can pass any of them to the System class as a constructor parameter. This is called polymorphism.

The System class is now not aware of whether it is Bluetooth or Wifi. We can even add another communication module such as Infrared, Bluetooth5 and whatever, simply by implementing the Connector interface.

This is called [**Duck Typing**](https://en.wikipedia.org/wiki/Duck_typing). The connector type is now dynamic since doConnect() is just a placeholder and the developer implements it as their own.

Here is the [**repository**](https://github.com/MateoCerquetella/polymorphism-ts) in case you need it and thanks for reading!
Every Icon you need in reactJS project. ft. react-icons
Tags: react, reacticons, webdev, icons
Published: 2021-06-01 15:44:40

## Hello Developers 👋👋👋

I just wanna share an awesome library(or whatever it is called) for **Icons** in **ReactJS**.

### React-Icons

React-Icons enables you to use famous icon provider's icons in React component format.

**React Icons have Icons from**
* Font Awesome
* Heroicons
* Typicons
* VS Code Icons
* css.gg
* And a lot.

### Show me the code 🤓🤓🤓
```npm
    npm install react-icons --save
```

```jsx
    import { IconName } from 'react-icons/Icon-Provider';
```
For example

```jsx
    import { HiAcademicCap } from "react-icons/hi";
```

And it will give you something like this

```tsx
    <HiAcademicCap />
```

And Kabooom! You have your Icon.

### Customizing Icons

We have few options to play around also

* size
* color
* style
* className
* And some-others

let's see the code in action

```jsx

    <HiAcademicCap
        color="blue"
        size="3rem"
        style={{
          color: "red"
        }}
        className="black-color"
    />

```

* Here, first preference will be given to **style** color (red)
* Then to **color** property(blue), then to the color in our **className** (black)
* To increase the side we have **size**

Thanks for reading.
#EnjoyLearning.

Closing here 👋👋👋
> This is **Shareef**.
> [GitHub](https://github.com/shareef99)
> My [Portfolio](https://portfolio.shareef.vercel.app/)
> Twitter [ShareefBhai99](https://twitter.com/shareefBhai99)
> [Linkedin](https://www.linkedin.com/in/nadeem-shareef-7a8394182/)
> [React-Icons](https://react-icons.github.io/react-icons/)