teleren/devto huggingface dataset:
101. Symmetric Tree
Tags: algorithms, javascript, codenewbie, leetcode
Published: 2021-02-08 02:05:51

###Description:
Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center).

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

```javascript
// Recursive solution
// Look at both children at the same time and check if they are a mirror image
var isSymmetric = function(left, right = left) {
    // Check for the base cases where a child is null or if both children are null
    if(left === null && right === null) return true;
    if(left === null || right === null) return false;
    // Check if the mirror node vals are the same
    // If they are then continue checking children nodes
    return left.val === right.val && isSymmetric(left.left, right.right) &&  isSymmetric(left.right, right.left);
};

// Iterative solution
// Breadth first search approach
// Push in child nodes in mirror order
// Make sure each mirror node val is equivalent
var isSymmetric = function(root) {
    // Create the queue and add root node twice
    // Each instance reference represents one side of the tree
    const q = [];
    q.push(root);
    q.push(root);
    while(q.length) {
        // Get the current nodes to check
        const left = q.pop();
        const right = q.pop();
        // Use the same logic in the recursive solution
        if(left === null && right === null) continue;
        if(left === null || right === null) return false;
        if(left.val !== right.val) return false;
        q.push(left.left);
        q.push(right.right);
        q.push(left.right);
        q.push(right.left);
    }
    return true;
};
```
Como limitar WIP no Jira?
Tags: agile
Published: 2021-02-08 01:20:20

1. Acesse o board (Kanban ou Scrum) no Jira.
 
2. Clique no botão de configuração e selecione a opção 'Configurações do quadro':
![1_qGJ-WPifqAi2WPO6c-aj-w](https://dev-to-uploads.s3.amazonaws.com/i/dno5i8tx7svb0p6znnvy.png) 

3. Selecione a opção ‘Colunas’:
![1_P5ifzDy-K4up862aZpEUFA](https://dev-to-uploads.s3.amazonaws.com/i/9zhumcyo4bf4zapo8x1u.png)
 

4. Selecione a opção ‘Contagem de Itens’ ou ‘Contagem de itens excluindo as sub-tarefas’:
![1_3Sh24L3xSnGo89sydkc5Ag](https://dev-to-uploads.s3.amazonaws.com/i/u2fr0l113vdevaq1v9rp.png) 

5. Após selecionar uma das opções acima será habilitado os campos ‘quantidade mínima’ e ‘quantidade máxima’:
![1_vLSHOEAkBHdW8QDgJgYumw](https://dev-to-uploads.s3.amazonaws.com/i/tzrq578fjy52pvf0p7r0.png)

Quando preencher a quantidade máxima na coluna e no board estiver um total de cards superior ao número preenchido, será destacado com cor vermelha. O mesmo ocorre com a quantidade mínima mas na cor amarelo.
No exemplo abaixo a quantidade Máx é de 1 card, porém, existe 2 cards na coluna ‘In Test’.

![1_bZ3zBkfXmMrjz8gene-OAg (1)](https://dev-to-uploads.s3.amazonaws.com/i/3b64gfwwjg7y9ozr5sbg.png)
De-experimentalizing Perl subroutine signatures
Tags: programming, perl, work
Published: 2021-02-08 02:48:30

---
title: De-experimentalizing Perl subroutine signatures
published: true
date: 2021-02-08 00:16:13 UTC
tags: Programming,Perl,work
canonical_url: https://phoenixtrap.com/2021/02/07/de-experimentalizing-perl-subroutine-signatures/
---

On the heels of my [blog article](https://phoenixtrap.com/index.php/2021/01/27/better-perl-with-subroutine-signatures-and-type-validation/) and [upcoming presentation](https://phoenixtrap.com/index.php/2021/02/07/im-presenting-at-houston-perl-mongers-this-week/) comes Paul Evans’ call to [de-experimentalize](https://github.com/Perl/perl5/issues/18537) (is that a word?) subroutine signatures in Perl core. It’s been stable for over four years now, and the “experimental” tag has been holding back developers big and small, so I fully support this effort. Maybe it can make it into Perl 5.34? Here’s hoping.
How to check if an element is attached to the DOM using JavaScript?
Tags: javascript
Published: 2021-02-08 00:00:00

---
  title: How to check if an element is attached to the DOM using JavaScript?
  published: true
  tags: JavaScript
  date: Mon Feb 08 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-element-connected-to-dom-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-32ced6c870fda9880453611a52440b34.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-element-connected-to-dom-javascript)
  
To check if an element is connected or attached to the DOM or the `document` object ( or otherwise called the `context`), you can use the `isConnected` property in the element's object in JavaScript.

```js
// Check if an element is attached to DOM
console.log(h1Tag.isConnected); // true
```

- The `isConnected` element property returns boolean `true` if it connected to the DOM (`document` object) and `false` if not.

To understand it better let's first make an `h1` tag using the `createElement()` method available in the global `document` object like this,

```js
// Make a custom h1 tag
const myh1Tag = document.createElement("h1");
```

Now let's check to see the value of the `isConnected` property in the `myh1Tag`.

```js
// Make a custom h1 tag
const myh1Tag = document.createElement("h1");

// Check the value of isConnected
console.log(myh1Tag.isConnected); // false
```

As you can see that the `isConnected` property returns boolean `false` because this is not connected to the DOM yet.

Now let's append the `myh1Tag` to the DOM using the `appendChild()` method available in the `document.body` object and check the value again like this,

```js
// Make a custom h1 tag
const myh1Tag = document.createElement("h1");

// Check the value of isConnected
console.log(myh1Tag.isConnected); // false

// Append myh1Tag to DOM
document.body.appendChild(myh1Tag);

// Check the value of isConnected
// to see if the element is attached to DOM
console.log(myh1Tag.isConnected); // true
```

Now the property returns boolean `true` because it is attached to the DOM.

See the above example live in [JSBin](https://jsbin.com/xuxagifara/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Debugging Go in Vim
Tags: go, vim, beginners
Published: 2021-02-22 13:59:53

---
title: Debugging Go in Vim
published: true
date: 2021-02-08 00:00:00 UTC
tags: go,vim,beginners
canonical_url: https://bhupesh.me/debugging-golang-vim-neovim/
---

Using `make` in Vim/NeoVim can be a handy utility if you want to quickly build, run & debug programs. The make command is governed by the program set in `makeprg`.

By default `makeprg` is set to the **make** utility, popular in C/C++ development. Let’s see how to configure this for Go. Before we do that, let's create a sample Go file with some errors 😅️

```go
package main

import (
	"fmt"
)

func main() {
	fmtPrintln("Hello")
	fmtPrintln("World")
}

```

If you want to **run** your Go programs directly:

```vim
:set makeprg=go\ run\ %
```

If you just instead want to **build** :

```vim
:set makeprg=go\ build\ %
```

Note: the make command will automatically create a binary with the same file (buffer) name. So you don’t need to specify the `-o` flag.

Now all you need to do is run `:make`, you can also set some accessible key bindings. I have these in my vimrc

```vim
nnoremap <A-m> :make<bar>cw<CR>
inoremap <A-m> <Esc>:make<bar>cw<CR>
```

To take things further, you can also combine the **golint** tool with **go run**

```vim
:set makeprg=golint\ %\ &&\ go\ run\ %
```

Since you are probably using multiple languages at once, you need to set the make command on each FileType. Add this auto-command in you `.vimrc` or `init.vim`

```vim
autocmd FileType go setlocal makeprg=go\ run\ %
```

> Make sure to use `setlocal` and not `set`

## How to fix errors

Vim provides a separate window to show errors called the error-window more formally know as the _quickfix_ window.

Combine the make command with `copen` to open a **quickfix** window

```vim
:make | copen
```

This will first build the program then open a new window at the bottom, listing all the errors.

I prefer `cw` instead of `copen` since it opens the quick fix window only if there are any errors. This makes it a perfect match with the make command

```vim
:make | cw
```

You can press Enter (<CR>) on each error listed to directly go to the error line in the program (vim will open the file if it isn’t already opened)

Use `cn` and `cp` to go to the next & previous item in quickfix list respectively. Add these mappings

```vim
map <C-j> :cn<CR>
map <C-k> :cp<CR>

\" I prefer these instead. Suit yourself!
nnoremap <kPlus> :cn<CR>
nnoremap <kMinus> :cp<CR>
```

Let’s see how all this setup works

![go-make-demo](https://ik.imagekit.io/bhupesh/go-make-demo_3Vx1GHQsv.gif)

## Resources

Read the following vim manual pages for more insights:

1. `:help makeprg`
2. `:help quickfix`
Resistance is expected
Tags: productivity, career
Published: 2021-03-01 13:50:26

---
title: Resistance is expected
published: true
date: 2021-02-08 00:00:00 UTC
tags: productivity, career
canonical_url: https://jhall.io/archive/2021/02/08/resistance-is-expected/
---

Picture this…

You just watched an amazing YouTube video about a new programming technique that you’re absolutely _convinced_ will revolutionize your team’s workflow.

Maybe you’ve stumbled upon a new IDE plugin that removes 30% of your bugs automatically.

Or maybe it’s a blog post that puts into perfect words the frustrations you’ve been feeling about the chaos your team is going through, and offers three simple steps to solve them all.

So you tell your team about the amazing new knowledge and…

Bob argues.

Alice says you it’ll never work.

Charlie rolls his eyes.

Why so much resistance to such a _great_ idea?

![](https://jhall.io/images/resistance-is-expected.jpg)

Don’t take the resistence personally. It often means you’ve poked a sensitive spot, and it could mean that you’re onto something.

> Resistance is a predictable, natural reaction against the process of being helped and against the process of having to face up to difficult problems.  
> — **Peter Block**
Flutter going to kill other development tools

Tags: flutter, dart, android, mobile
Published: 2021-02-07 23:59:42

Now a days flutter is going to make a great graphical app development tool. App development on flutter is too easy and versatile. Actually flutter growth rates is going too good. It going incredible fast.

No doubt, all flutter team are working hard to make it better and better. Through flutter, you can create android, ios app, mac book, windows, Linux, and almost every platform. Now Google has announced google’s upcoming operating system fuchsia os will support flutter.

Flutter Built technology:
Flutter made with C, Dart, C++ and Skia. Skia is 2d rendering engine. Flutter run your code compiled with C, C++ and Android’s NDK. Your dark code compiled into native with ARM and x86 libraries.

Actually everything you would make through one codebase. Normally we have to code for every platform differently, it actually time-consuming and very costly. Using flutter you have to make one flutter code and this code will use for every platform rapidly. It just saves a lot of time and money for development.

Now a days many startups using to develop their app and also many top companies using flutter to make their app like google adware analysis, Alibaba etc…

Flutter’s material design and its animation make it more attractive and more feature able. Most other app development tools can’t beat flutter at least it’s design and animation.

##Some real facts/advantages about flutter –
* **Flutter is Faster:** We are not sure about it, but most probably true. Flutter itself an android and ios independent UI. Other tools like React native convert their UI to android and IOS UI objects. It’s a plus point for a flutter. Because if I am making an app, I need a custom design for my user. So there is no limitation on flutter.
* **Security:** You can see that Google makes flutter and they build themself many apps of their production app like Google pay/Tej Payment app, Adware app, etc. And it also comes in many packages, you don’t have to do anything with this. But Other companies make their development tool but they never build much product with these tools. And You know [Security is a big issue now](https://centocode.com/android-phone-hacking-apps-using-backdoor-apk/).

Read Full Article On: [Centocode](https://centocode.com/flutter-going-to-kill-other-development/)
Jawaban WOW
Tags: wow, wordsofwonders, gamewow, wordsofwondersnet
Published: 2021-02-07 23:43:17

Kunci Jawaban WOW (Words of Wonders Lengkap) – Game WOW (Words of Wonders) adalah game puzzle berkonsep teka-teki silang, yang menantang kecerdasan dan kemampuan Anda dalam bermain kosa kata. Game ini tersedia dalam berbagai macam bahasa dan pemainnya pun tersebar dari seluruh penjuru dunia.

Game yang sudah didownload lebih dari 50 juta pengguna ini bisa Anda download dari Google Playstore atau App Store jika Anda pengguna iPhone. Anda bisa memainkannya dalam bahasa Inggris ataupun Indonesia. Atau jika Anda sedang belajar bahasa asing, Anda pun bisa kok memilih dalam bahasa Spanyol, Prancis, Italia, dan masih banyak yang lainnya.

Words of Wonders (WOW) bisa membantu Anda, teman, atau adik Anda dalam dapat meningkatkan kosa kata maupun kemampuan mengeja sambil berkeliling mengenal beragam keajaiban serta kota-kota yang menawan dari seluruh penjuru dunia. Jadi, game ini memang sangat cocok dimainkan baik sendiri, bersama teman, maupun keluarga.

Cara bermain di game Words of Wonders (WOW), Anda memulai dengan beberapa huruf sebagai petunjuk. Lalu, rangkai huruf-huruf ini menjadi beragam macam kata atau istilah, sampai kotak puzzle yang disediakan habis terisi. Simple kan?

Ketika Anda berhasil menyelesaikan level-level di tempat tertentu, Anda akan diajak menunjungi tempat baru sambil menyelesaikan level selanjutnya.

Meski konsep dan cara bermainnya cukup sederhana, tapi tidak dengan jawaban-jawabannya. Semakin tinggi level Anda, semakin sulit kata-kata yang harus Anda temukan. Nah, untuk mempermudah Anda, di sini kami sajikan kunci jawaban WOW (Words of Wonders) secara lengkap khusus buat Anda yang kesulitan menyelesaikan teka-teki di level tertentu.

Berikut ini adalah Kunci Jawaban WOW (Words of Wonders) Lengkap. Silahkan kunjungi https://masdece.id/ untuk menemukan kunci jawabannya.
Chartjs with Gradient Background
Tags: javascript, chartjs
Published: 2021-02-07 21:43:27

How to add a gradient background for the entire [Chart.js](https://www.chartjs.org/) and not just for the dataset, that was my first question when I started to play with it, so here I am...

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

### Chart Plugins
The [Chartjs Plugins](https://www.chartjs.org/docs/latest/developers/plugins.html) are the most efficient way to customize or change the default behavior of a chart. They have been introduced at version 2.1.0 (global plugins only) and extended at version 2.5.0 (per chart plugins and options).

With a custom plugin we can draw a custom background implementing the function "beforeDraw".

>There were some changes to the plugin interface in the ChartJs version 3, this code example was updated to reflect it, thanks to Hung Tran for pointing me out.

The following plugin draws a [custom gradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient) in the chart background:

```
var GradientBgPlugin = {
  beforeDraw: function(chart, args, options) {
    const ctx = chart.ctx;
    const canvas = chart.canvas;
    const chartArea = chart.chartArea;

    // Chart background
    var gradientBack = canvas.getContext("2d").createLinearGradient(0, 0, 0, 250);
    gradientBack.addColorStop(0, "rgba(60, 174, 163, 0.7)");
    gradientBack.addColorStop(0.5, "rgba(255, 255, 255, 0)");
    gradientBack.addColorStop(1, "rgba(32, 99, 155, 0.7)");

    ctx.fillStyle = gradientBack;
    ctx.fillRect(chartArea.left, chartArea.bottom,
      chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
  }
};

```

Then insert the custom plugin in the Chart configuration and voilà:

{% jsfiddle https://jsfiddle.net/ricnish/6284o57q/28  js,html,result %}
Introducing Pajer
Tags: django, beginners, webdev, scraping
Published: 2021-02-07 23:02:28

Hey, I'm John and I'm new to DEV and coding in general. I began learning to code around September last year and I've really been enjoying it. I hope to learn a lot from you guys and this amazing community.

Pajer is my first full-stack project with a django and celery backend (its still in its development stage). 

The purpose for this post is for your feedback on it. Let me know what you guys think and what can be improved upon. Thank you 🤗

[pajer.herokuapp.com](https://pajer.herokuapp.com)

{% github Xavin616/Pajer %}
fishing ranking
Tags: writing, productivity
Published: 2021-02-07 22:56:25

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

Ibarat mengejar sesuatu, sepertinya kita mengejar yang keliru. 

#365figures #visualthinking #academicdrawing

01-02-21
hidrogeologi di sekitar kita
Tags: writing, productivity
Published: 2021-02-07 22:50:57

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

baca di sini https://derwinirawan.wordpress.com/2021/02/07/sesi-tanya-jawab-seminaring-hidrogeologi-di-sekitar-kita/?fbclid=IwAR0qDqaHHEvEbHgIwhAEZB6_YZXOu833B_2bkHQyayqPQp5N9WEwhh9JGw8

06-02-21
React state vs props 
Published: 2021-02-07 19:05:57

Around a month into learning & working on react, I was confident I understood the core concepts & most of the basics, if not some of the advanced topics. That's when i casually mentioned to a friend about my progress & in good humour, she asked me a simple question. 'What is the difference between props & state?' I was blank. I knew how to use them but didn't know how to put it in words. Sometimes the simplest things might be the hardest to understand deeply. I spent sometime to sit & think about the main differences & list them out as my first tech blog post! :D




Differences between react state & props:








STATE:
1. State is the data that component maintains.
2. States can be defined in the component itself, or can be passed.
3. State is mutable i.e, components that have access to changing the state, can do so for all components including it’s parent.
4. It can be set 2 ways. As an object in the constructor in class based components, and using ‘use State’ hook in function components.








PROPS: 
1. Props are arguments passed into react components via HTML attributes.
2. Props are passed down from parent components, i.e have uni-directional flow.
3. Props are immutable. They are like information passed down & cannot ideally be changed by child components.
4. Props are set/defined as attribute & value in parent component. It is passed down to children and accessed via the ‘props’ keyword in functional components & ‘this.props’ keyword in class based components.
maui
Tags: writing, productivity
Published: 2021-02-07 22:42:12

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5o2o8ta05wj9vtylivsa.jpg)

Maui says, “Let’s not overuse nature!”

Membaca beberapa artikel tentang berkurangnya luas hutan di Kalimantan, bencana banjir di perkotaan, dan tanah longsor di daerah pegunungan, membuat saya menggambar ini.

#365figures #sketchnote #visualthinking #academicart #academicdrawing

04-02-21
activate
Tags: writing, productivity
Published: 2021-02-07 22:39:04

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

Perjalanan sekolah (apapun itu) memang melelahkan kadang membingungkan, ada juga momen-momen yang mengesalkan. Ini hanya salah satunya. 

#365figures #visualthinking #academicdrawing #academicart #scicomm

05-02-21
Throttlestop settings for Dell 17 7773
Published: 2021-02-07 22:35:06

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0y757t9ze38hxyykews.jpg)
I’m presenting at Houston Perl Mongers this week
Tags: news, personal, programming, perl
Published: 2021-02-08 02:47:45

---
title: I’m presenting at Houston Perl Mongers this week
published: true
date: 2021-02-07 21:42:19 UTC
tags: News,Personal,Programming,Perl
canonical_url: https://phoenixtrap.com/2021/02/07/im-presenting-at-houston-perl-mongers-this-week/
---

I’ll be presenting **[“Better Perl: Subroutine Signatures and Type Validation”](http://houston.pm.org/posts/1612187912)** (based on my [earlier blog post](https://phoenixtrap.com/index.php/2021/01/27/better-perl-with-subroutine-signatures-and-type-validation/)) for [Houston Perl Mongers](http://houston.pm.org/) on **Thursday, February 11 at 6:00 PM** Central US time.

[Check here](https://www.timeanddate.com/worldclock/fixedtime.html?msg=Houston+Perl+Mongers+meeting&iso=20210211T18&p1=104&ah=2) to see what time that is in your local time zone, then [go here](https://us02web.zoom.us/j/920069702) at that time to open the Zoom meeting ID 920 069 702. **You’ll need a password**; run this Perl code to get that:

```perl
print +(0b1000100).((3<<2)*10).(010)
```
if open access has a face
Tags: writing, productivity
Published: 2021-02-07 22:34:55

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8o9vujkzcjjqpfjczvli.jpg)

Kalau #openaccess punya wajah, bagaimana rupanya?

If openaccess has a face, what would it be like?

#365figures #scicomm #openscience #visualthinking #academicdrawing

06-02-21
JS: Check if an email is valid
Tags: javascript, tutorial, webdev, codequality
Published: 2021-02-07 22:34:21

`Hello World!` The sixth episode of the series  - A CSS/JS trick in 5 minutes.
My first ever [Dev.to article](https://dev.to/devlorenzo/the-fabulous-list-of-all-form-input-types-48ig) was about HTML forms, in the last part, I explained you how to check if an email is valid. I will do the same here while going a little bit deeper.

--- 

First We have to know how emails are done. In big lines, we know that their divided into two parts and always contain @. This [w3 resource](https://www.w3resource.com/javascript/form/email-validation.php) explains that better. 

A base solution can be:
```
function checkEmailValidity (email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
}
```
This function will just check if the email contains one (and doesn't contain more) @. This is better when you want to be inclusive (you think it's better to have some fake email while annulling the possibility to reject the right ones). 

We have to use regex to know if the email is valid, if you don't know how they work, check this:
>  A JavaScript Regular Expression (or Regex) is a sequence of characters that we can utilize to work effectively with strings. Using this syntax, we can search for text in a string, replace substrings in a string or extract information from a string.
> Check [this cool article](https://itnext.io/javascript-fundamentals-understanding-regex-fd81891375e0) to learn more about regex.

---

We could also use a more advanced regex to check other parameters such as first character, unallowed characters, or invalid domain names:
```
function checkEmailValidity (email) 
{
 if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(myForm.emailAddr.value))
  {
    return (true)
  }
    return (false)
}
```
---
If you need it I also did [an article on how to check if a password is valid](https://dev.to/devlorenzo/js-check-if-a-password-is-valid-746).

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

---

## **[Subscribe to our newsletter!](https://worldindev.ck.page/)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!