teleren/devto huggingface dataset:
Apa itu REST API?
Tags: architecture
Published: 2021-01-18 16:36:40

Istilah REST API sedang populer, naik daun, dan memang sering diterapkan oleh berbagai tim programmer. Kalau temen-temen belum tau ini apa, tenang, ada banyak orang di seluruh dunia juga sedang mempelajarinya. Informasi bagus agar temen-temen gak merasa sendirian ahahaha...

Oke, masuk ke materi.

## Pengertian
REST API ini tu arsitektur dalam pengembangan aplikasi yang memisahkan bagian tampilan (frontend) dengan alur bisnis (backend) dan pengiriman datanya melalui jalur HTTP.

## Keuntungan
Nahhh... Ini beberapa keuntungan kalau kita menerapkan REST API nih.
1. Kode lebih mudah dikelola karena frontend dan backend dibuat terpisah.
2. Lebih mudah mencari akar masalah saat terjadi error. Kalau error di frontend ya cari aja di situ, begitu juga dengan backend, jangan cari yang bukan tempatnya ya ahahaha...
3. Kalau kita ber-tim, pembagian tugas jadi lebih mudah.
4. Karena menggunakan protokol HTTP, REST API jadi lebih familiar bagi kebanyakan orang. Kan banyak orang udah pada tau cara pakai si HTTP ini. Minimal, saat mengunjungi website.

## Kekurangan
Kalau sudah tau untungnya apa, sekarang kita perlu tau kekurangannya ni, supaya kita bisa antisipasi hal-hal yang tak diinginkan. Jadi ini nih kekurangannya.
1. Kode yang dikelola jadi lebih banyak. Kalau biasanya cuma 1 projek aja, sekarang jadi 2 projek (frontend dan backend).
2. Tidak disarankan untuk solo player (sendirian). Semakin banyak yang dikelola, semakin banyak yang diatur, dan semakin banyak pula yang harus dilakukan. Kasian kamu kalau sendirian 😊

> Saya sejauh ini menerapkan REST API dengan hati riang-gembira.
> \- *@hadihammurabi*

## Komunikasi Data pada REST API
Nahhh... Kalau temen-temen tertarik untuk menerapkan REST API, berarti harus ngerti ni gimana caranya berkirim data antara frontend dengan backend. Kita lanjuuuttt yaaa...

```
|-------------|                 |-------------|
|  Frontend   |  <-- HTTP -->   |   Backend   |
|-------------|                 |-------------|
```

Jadi untuk proses pengambilan data, frontend mengakses sebuah URL yang ada di backend, kemudian backend akan mengirimkan datanya sebagai respon. Pada dasarnya, sama seperti kita mengunjungi halaman web, kita lakukan request, kemudian webnya tampil.

Terus, kalau frontend mau kirim data, juga sama-sama mengakses URL yang ada di backend. Hanya saja kali ini dengan menyertakan data yang dikirim. Misal di frontend, usernya mau login, terus frontend kirim data ini ke backend.

Sebetulnya, cara kerjanya sesimpel ini.

# Penutup
Karena baru pengenalan, jadi segini dulu ya pembahasan tentang REST API. Di artikel-artikel selanjutnya, kita bahas lagi lebih detail. Bahkan sampai koding kalau bisa.

Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎
Check if two trees are the same
Tags: programming
Published: 2021-01-18 16:35:01

Two binary trees are considered the same if they are structurally identical, and the nodes have the same value.
```
     1               |             1
   /   \             |           /   \
  2     3            |          2     3
```
The above trees are the same as the structure is identical and nodes have the same value.
```
     1               |             1
   /   \             |           /   \
  2     1            |          1     2
```
The above trees are not the same because nodes don't have the same value.
---

If you're curious to solve this problem before checking out the solution. Try it out in [Leetcode](https://leetcode.com/problems/same-tree/) 😉 .

You can find my solutions to other leetcode problems at https://github.com/harsha-sam/Leetcode-Solutions.

---
## Solution
I'll be using the boilerplate code from leetcode. You can directly submit the solution and verify, once you understand how the algorithm works.

- Depth-first search both trees at the same time and return false if the structure is not identical or if the node values don't match.

```python
# Definition for a binary tree node.
# class TreeNode:
#     def __init__(self, val=0, left=None, right=None):
#         self.val = val
#         self.left = left
#         self.right = right
class Solution:
    def isSameTree(self, p: TreeNode, q: TreeNode) -> bool:
        return self.helper(p, q)
    
    def helper(self, node1, node2):
        # returns false if structure is not identical
        if node1 and not node2 or node2 and not node1:
            return False
        elif node1 and node2:
            if not self.helper(node1.left, node2.left):
                return False
            if node1.val != node2.val:
                return False
            if not self.helper(node1.right, node2.right):
                return False
        return True
```
Time Complexity: `O(N)`
Space Complexity: `O(tree height)`
Creating a Chrome extension in JavaScript
Tags: chrome, javascript, extension
Published: 2021-01-18 16:21:05

I was greatly surprised today, how simple it is to write your own extensions for Google Chrome browser. No SDK installing, no extension compilation process, nor anything like this.

**Just a folder with a bunch of files and literally a few dozen lines total (JavaScript, HTML, manifest.json and the extension icon).**

In below example I show how to create a simple extension with an icon in Chrome toolbar. When you click the icon, a popup comes up (written in HTML). When you click the button in popup, JS dialog is displayed, and a minor modification in the current page DOM is applied (change `<body>` element background color to red).

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

## manifest.json
```
{
  "manifest_version": 2,

    "name": "My test extension Rob",
    "description": "This is a Chrome extension lab",
    "version": "0.1",

    "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["dom.js"]
    }
    ],

    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    },
    "permissions": [
      "activeTab"
    ]
}

```

## popup.html
```html
<!doctype html>
<html>
  <head>
    <title>My extension</title>
    <script src="ext1.js"></script>
  </head>
  <body>
  <div style="background-color: #ddd; width:300px">
    <h1>This is my extension Rob</h1>
    <button id="btn1">Przycisk1</button>
  </div>
  </body>
</html>
```

```javascript
document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('btn1');
  checkPageButton.addEventListener('click', function() {

        chrome.tabs.getSelected(null, function(tab) {
          chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
             //console.log(response.dom);
          });
        });

  }, false);
}, false);
```

```javascript
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.action == "getDOM") {
        alert('Rob\n'+document.title);
        document.body.style.backgroundColor = 'red';
   }
 else
   sendResponse({});
});
```

You can clone this extra simple example from my github repo: https://github.com/rnowotniak/chrome-extension-lab
MERNG/Apollo/GraphQL +Strapi.js hosted by Heroku using ELECTRON.JS
Tags: react, devops, help, graphql
Published: 2021-01-18 16:19:29

I’m looking to make a site that using Electron for updating products. 

Has anyone used a:
MERN +
+ Strapi
+ Apollo GraphQL 
+ HEROKU 
+ ELECTRON (for CRUD)
Getting over Imposter Syndrome
Tags: beginners, career, productivity, impostersyndrome
Published: 2021-01-18 16:16:00

![Among Us Imposter](https://dev-to-uploads.s3.amazonaws.com/i/ntmgq7kdpsxx7qqp42v8.jpg)

This article was originally posted at <a href="https://www.lindaojo.com/blog/getting-over-imposter-syndrome/">lindaojo.com</a>

In this short article, I will expose the fraud that is your imposter syndrome by asking you a few questions. Let's dive in!

Firstly you should know that imposter syndrome is a product of your mind. Being more successful will not make it go away. 

<h3>Who is an imposter</h3>

An imposter is a person who pretends to be somebody else, often through means of disguise. It is safe to assume that in the case of a developer,  it's someone who claims to have skills and experiences that they don't possess. Is that what you are doing? I hope not.

<h3>What exactly are you "pretending" to be?</h3>

If you think you are an imposter, that means you believe you are pretending to be something you are not. My question to you is what exactly are you "pretending" to be?

For instance, are you pretending to be a junior, mid or senior developer?

<h3>What are your expectations?</h3>

Now you know what you are pretending to be. Ask yourself if you meet the requirements to be such a person.

Example, if you think you are a junior developer pretending to be a senior developer, then ask yourself:

<strong>What skills of a senior developer am I lacking?</strong>

<strong>What kind of skills should a senior developer have?</strong>

Once you have answered the questions above, You need to check if your answers are accurate and realistic.

<h3>Are your expectations realistic?</h3>

<strong>What are real world expectations of your current job title? </strong>

Do you think the expectations you set for yourself are realistic? If yes then work towards meeting those expectations to boost your confidence.

If you think the expectations are unrealistic, then, you are expecting too much of yourself and can ease up a bit.

Setting unrealistic expectations is very common amongst new developers. For instance, expecting yourself to remember the syntax for every programming language is impractical. It's alright to google even the simplest syntax.

<h3>Are you "deceiving" a lot of people?</h3>

If you think you are an imposter but some how no one has been able to find out cause you complete your tasks and build great products then you should remind yourself more often of your achievements and give yourself a bit of credit.

<h3>Appreciate your work</h3>

Internalize the kindness you show to others.
It is very easy to downplay our wins and exaggerate the wins of those around us, because we witness our trials and errors, not theirs.

I hope answering some of the questions above helps you realise you are probably not an imposter.

<a href="https://lindaojo.com/articles" target="_blank">Read more of my articles</a>
What is Instance Based and Model Based Learning ?
Tags: machinelearning, datascience
Published: 2021-01-18 15:44:30

#### When we classify Machine Learning on the basis of how our system generalizes or predicts we end up with two types :

#### - Instance Based Learning 
#### - Model Based Learning 

Let's see what these two things mean :
### Instance Based Learning :

A system is called to be learning by instance when it learns by heart from the data provided to it and thus generalizes or predicts on the basis of some similarity measure or similar feature that it found occurring on every data or some data .

I have explained both the types here with an example fir better understanding  :

{% youtube t7vlECAFQlY %}

### Model Based Learning :

A system is called model based when it learns from the data and creates a model, which has some parameters and it predicts the output by using this data trained model.

I would not get into the mathematics but for better understanding you can imagine a model as a equation and the parameter (theta) and the input data (x) as variables in it .

And by using optimizing techniques like Gradient Descent we find an optimal value of theta .

Thus when we substitute both the optimized parameter and the input value i.e the test data into the model or the equation and we get the best output or prediction .

#### Recent article :
  - [How to Encrypt your Password in Python using the Cryptography Package ?](https://saumya.hashnode.dev/how-to-encrypt-your-password-in-python-using-the-cryptography-package)

##### You can find the all my work in my [GitHub](https://github.com/saumya66/) . If you like it do Follow 🌟 !!

#### I also create Computer Science related content on Youtube at [Future Driven](https://www.youtube.com/channel/UCx-HdHfKu1rXgNIfNaKMsAA) write blogs on my [Personal Site](https://www.thecsengineer.com/#blog) . 🧡✔


#### I hope you learned from the blog and Do comment and let me know your thoughts .🤞😃
15 Great Websites to Learn Front-end Development
Tags: webdev, programming, productivity, frontend
Published: 2021-01-18 15:29:46

### I have created this amazing list of web resources which will help you become a **front-end developer** in 2021.

#### 1. [developer.​mozilla.​org](developer.​mozilla.​org)
For front-end ( HTML, CSS & JavaScript ) reference and learning.

#### 2. [w3schools.​com](w3schools.​com) and [w3resource.com](w3resource.com)
For HTML, CSS, JavaScript reference and learning.

#### 3. [htmlreference.​io](htmlreference.​io) and [cssreference.​io](cssreference.​io)
For HTML and CSS visual guide & reference from the creator of Bulma.

#### 4. [javascript.​info](javascript.​info)
Amazing resource to learning JavaScript.

#### 5. [css-tricks.​com](css-tricks.​com)
Learn everything about CSS (they've got some seriously awesome tricks).

#### 6. [freecodecamp.​org](freecodecamp.​org)
A free bootcamp for web developers (absolutely worth it!).

#### 7. [udemy.​com](udemy.​com)
Best collection of programming courses.

#### 8. [codepen.​io](codepen.​io)
The best place to build, test, and discover front end code.

#### 9. [repl.​it](repl.​it)
Learn, build, collaboration and host your code in one place.

#### 10. [caniuse.​com](caniuse.​com)
Check cross browser compatibility of front-end tools.

#### 11. [javascript30.​com](javascript30.​com)
Build 30 small projects with JS in 30 days.

#### 12. [30secondsofcode.​org](30secondsofcode.​org)
Short code snippets for all your front-end developer needs.

#### 13. [1loc.​dev](1loc.​dev)
Favourite JavaScript single line code.

#### 14. [goalkicker.​com](goalkicker.​com)
Free notes related to front-end technologies.

#### 15. [roadmap.sh](roadmap.sh)
Step by step guides and paths to learn different tools or technologies.

***And of course, don't forget about DEV...*** 👨‍💻
NodeJs: Dependency-based attacks
Tags: security, node, javascript, npm
Published: 2021-01-18 15:19:41

I recently wrote a GitBook explaining how dependency-based attacks work and how we can prevent these attacks when we are developing on NodeJs

[NodeJs: Dependency-based attacks](https://gabrielrumiranda.gitbook.io/nodejs-dependency-based-attacks/)

I am open to suggestions and criticisms
How to do sentiment analysis?
Tags: nlp, node, javascript, tutorial
Published: 2021-01-18 15:13:15

Sentiment analysis is used to check if a phrase has positive or negative sentiment. To get the sentiment score, start by reading the phrase using <a href="https://winkjs.org/wink-nlp/read-doc.html">readDoc</a>. Then using the `its.sentiment` property of the <a href="https://winkjs.org/wink-nlp/leveraging-out.html">out()</a> method, get the sentiment score of the phrase. This is how you can check if a phrase is positive or negative:

```javascript
// Load wink-nlp package & helpers.
const winkNLP = require( 'wink-nlp' );
const its = require( 'wink-nlp/src/its.js' );
const model = require( 'wink-eng-lite-model' );
const nlp = winkNLP( model );

const text = 'Very excited to be part of the @winkjs_org team:D!';
const doc = nlp.readDoc( text );

// Calculate sentiment score
const sentiment = doc.out( its.sentiment );
console.log( 'Sentiment Score:', sentiment );

if( sentiment > 0 ) {
  console.log( 'Sentiment: Positive' );
} else {
  console.log( 'Sentiment: Negative' );
}

// -> Sentiment Score: 0.6
// -> Sentiment: Positive
```

The sentiment score will be between `-1` and `1`, with `0` representing an overall neutral sentiment. You can get the sentiment of the entire  document, or a single sentence in a text.

Sentiment analysis can be used to judge the overall response to an event, product etc. In chatbots, it can be used to change the response based on the sentiment of the message it has received. See our <a href="https://winkjs.org/showcase-hashtag/">Twitter Hashtag showcase</a> to see this in action.

winkNLP's <a href="https://github.com/winkjs/wink-eng-lite-model">English language lite model</a> uses <a href="https://github.com/winkjs/wink-eng-lite-model/blob/master/ACKNOWLEDGEMENT.md#ml-senticon">ML-SentiCon</a> as a base with further training. For emojis it uses the <a href="https://github.com/winkjs/wink-eng-lite-model/blob/master/ACKNOWLEDGEMENT.md#emoji-sentiment-ranking">Emoji Sentiment Ranking</a>. Together, they deliver an <a href="https://github.com/winkjs/wink-eng-lite-model#sentiment-analysis">f-score</a> of about 84.5%.
Introducing - Hasura Advanced Tutorial
Tags: graphql, graphqljanuary, guidesandtutorials, tutorial
Published: 2021-02-02 12:48:43

---
title: Introducing - Hasura Advanced Tutorial
published: true
date: 2021-01-18 14:50:08 UTC
tags: GraphQL,GraphQLJanuary,GuidesAndTutorials,Tutorial
canonical_url: https://hasura.io/blog/introducing-hasura-advanced-tutorial/
---

![Introducing - Hasura Advanced Tutorial](https://hasura.io/blog/content/images/2021/01/introducing_hasura_advanced_tutorial-1.png)

_Our #GraphQLJanuary continues with blog posts, live streams, Discord Q&A, office hours, and more. For a schedule of upcoming events, join the community or register at [https://hasura.io/graphql/graphql-january/](https://hasura.io/graphql/graphql-january/)._

For quite a long period of time, our [GraphQL Tutorials](https://hasura.io/learn/) (colloquially referred to as ‘Learn’) have been one of the most highly trafficked areas of the website. This content, alongside other resources like our [GraphQL hub](https://hasura.io/graphql/), form the basis for how many people first learn about GraphQL and then, ultimately, explore whether Hasura is the right product for their needs.

As with any other rapidly growing, open-source project -- Did you hear we [surpassed 100M downloads](https://twitter.com/HasuraHQ/status/1347910584486875136)? -- there comes a point where tutorials expand from conceptual ([What is GraphQL?](https://hasura.io/learn/graphql/intro-graphql/introduction/)) to implementation ([front-end](https://hasura.io/learn/) and [back-end](https://hasura.io/learn/graphql/hasura/introduction/) tutorials). And, then suddenly something more is needed.

We are pleased to introduce the [Hasura Advanced Tutorial](https://hasura.io/learn/graphql/hasura-advanced/introduction/).

This course is meant to be taken by users of Hasura who need to optimise their application for production use cases. If you are new to Hasura, head to the [Hasura Basics](https://hasura.io/learn/graphql/hasura/introduction/) tutorial to get a fair idea of setting up Hasura and leveraging the fundamental features before diving into this tutorial.

Of course, with that said, understanding optimisation and implementation best-practices can be an important part of learning about and vetting a solution.

Because we are the sort of people for whom open-source software makes sense, each of these tutorials is MIT-licensed. We welcome your feedback, participation, and pull-requests. Join us on the [https://github.com/hasura/learn-graphql/](https://github.com/hasura/learn-graphql/) repository to participate.

As part of #GraphQLJanuary, we will be live-streaming this tutorial over the course of the upcoming weeks. Join us on the [Hasura Twitch channel](https://www.twitch.tv/hasurahq) to participate in the stream. Or, catch-up after the fact on the [Hasura Youtube channel](https://www.youtube.com/hasurahq).

Happy learning!
Frosted Glass UI CSS effect in 5 minutes and why you should not use it (for now)
Tags: webdev, tutorial, beginners, css
Published: 2021-01-18 14:44:02

I see a lot of Glass UI examples floating around.
Here is a short video how you can achieve that and at the end we will talk if you should use it or not!

{% youtube QwvumtfGZUY %}

You can find the link to the code in the video description!

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
Need help with mocha in vue
Tags: vue, testing, help
Published: 2021-01-18 14:42:11

so the problem i got is that mocha is giving a error on the first line. do i need to add anything in my config file so it wont check this.

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c2jheymrr0i99fjkyw4r.PNG)
How to rename a git branch
Tags: github, git, webdev
Published: 2021-01-18 14:39:38

## Rename local branch

To rename a *local* branch in git

- Move on the branch you want to rename
```shell
git checkout -b feature/wrong-name
```

- Rename it locally
```bash
git branch -m feature/new-awesome-name
```

> ⚡️ Bonus tip
>
> If you have [ohmyzsh](https://github.com/ohmyzsh/ohmyzsh) installed, you can use its shortcut `gbm`.

## Rename remote branch

To rename a *remote* branch is quite longer:

- Unset the upstream branch to unlink local and remote branch
```bash
git branch --unset-upstream
```

Note: if you followed the previous step, you don't have to delete local branch because you have already renamed it!

- Update the upstream branch to the new one and push it
```bash
git push --set-upstream origin feature/new-awesome-name
```

- Delete remote branch
```bash
git push origin --delete feature/wrong-name
```
Save Hash Links for Future Reference.
Tags: productivity, github
Published: 2021-01-18 14:39:17

## The Context
I was reading an amazing article about [JavaScript Best Practices](https://github.com/ryanmcdermott/clean-code-javascript). <br />
While going through it, there were some **points** that I found really useful and productive. <br />
I wanted to **save** those points, which in turn would make it easier for me to **reference** back in the future. <br />

## Birth of SaveHash
As a solution to my problem mentioned above, I created SaveHash.
SaveHash makes it easier for readers to **save** *hash*(#) links and refer back to it in the future. <br />
[Get It Here](https://addons.mozilla.org/en-US/firefox/addon/savehash/) <br /><br />

## Here is the Demo
![Demo GIF](https://res.cloudinary.com/rdaahal/image/upload/v1609770198/saveHash/saveHash_demo_mpx0f3.gif)

## The extension workflow looks like this,
![SaveHash extension workflow](https://dev-to-uploads.s3.amazonaws.com/i/wqftditfwna8ug5danaw.png)

### This project is OpenSource. 
Feel free to contribute by following [this](https://github.com/rahuldahal/save-hash/blob/master/CONTRIBUTING.md) guide..
Top 5 Unknown Machine Learning Models Repository On Github To Help You Through Your Data Science Projects
Tags: python, machinelearning, datascience, computerscience
Published: 2021-01-18 14:20:57

[Top 5 Unknown Machine Learning Models Repository On Github To Help You Through Your Data Science Projects-Includes links to Repository on Github](https://medium.com/analytics-vidhya/top-5-unknown-machine-learning-models-repository-on-github-to-help-you-through-your-data-science-99386f641f68?source=friends_link&sk=b4eefc4c738e93b7baf74903746025c7)

###TensorFlow is a free and open-source software library for machine learning. It can be used across a range of tasks but has a particular focus on training and inference of deep neural networks. Tensorflow is a symbolic math library based on dataflow and differentiable programming.

##Here is the link to the article I wrote on Top 5 Unknown Machine Learning Models Repository On Github To Help You Through Your Data Science Projects(Includes links to Repository on Github)

(#datascience #machinelearning #python #deeplearning #Tensorflow #keras #pytorch #models #machinelearningmodels)