teleren/devto huggingface dataset:
All About the Template Tag
Tags: html, javascript, tutorial, a11y
Published: 2020-04-07 15:00:05

The template tag was first introduced in HTML 5.2, and has not received much fame since. It has ninety-five percent global browser support ([source](https://caniuse.com/#feat=template)), so there’s not much of a reason to avoid it.

But what does the template tag actually do?
* It stores HTML for later, so complex items are easy to replicate.
* It’s invisible to users, screen-readers, and Search Engines, making SEO and accessibility (a11y) simple.
* Since you are writing HTML in the HTML file, your code will read as simply as if it were written for two-year old children. (_Disclaimer: I have not tested this_).

Let’s give an example of somewhere we would use the template tag.

Consider a **static** page which pulls news from an API such as Hacker News’. We aren’t using React, nor Express. We can pull data from [the Hacker News API](https://github.com/HackerNews/API), but how do we display them to the user?

1. We could use document.createElement. However, someone reading our code wouldn’t look for HTML inside the JavaScript file.
2. We could set the innerHTML to an HTML string. Except, this exposes a security risk called[ Cross Site Scripting](https://en.wikipedia.org/wiki/Cross-site_scripting). Thank you to [moomin](https://linuswillner.me/) for pointing this out.
3. The best option seems to be the template tag.

You can learn more about using the template tag [on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template). Also, check out the Hacker News example [on Codepen](https://codepen.io/b3u/pen/WNvaZVY).

---
Note: This post first appeared on [my blog](https://binyamin.substack.com/p/all-about-the-template-tag).
Invert Binary Tree - Google interview question
Tags: career, javascript, interview, challenge
Published: 2020-04-07 14:59:58


"You developed an app which has over a <strong>million</strong> downloads, that's cute! But can you invert a binary tree "?

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

Question: Invert a Binary Tree.
 
What's meant by <strong>"Invert Binary Tree ?</strong>"

It means for each node, the <strong>left-subtree</strong> of the node becomes the <strong>right-subtree</strong> and <strong>right-subtree</strong> becomes <strong>left-subtree</strong>. 


Let's simplify the question step by step: 

Step 1 > How to traverse the tree?
Aim : Our main aim is to:
      1> visite each node.
      2> swap left subtree and right subtree.
      3> go deep in the respective subtree and repeat.

 So it makes sense to use <strong>DFS<strong> in this case.

Step 2> How do we swap?
        1> we could simply swap the sub-trees using a temporary container.

Let's visualize this : 

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

Let's write some code :
```javascript
var invertTree = function(root) {
    return dfs(root);
};

function dfs(root){
    if(root == null) return null;
    let temp = root.left;
    root.left = root.right;
    root.right = temp;
    dfs(root.left);
    dfs(root.right);
    return root;
}

```

That's it !, now you know how to solve a question which is frequently asked at google!

github :  https://github.com/AKHILP96/Data-Structures-and-Algorithms/blob/master/problems/invertBinaryTree.js
How to detect when the user stops typing
Tags: javascript, tutorial
Published: 2020-04-07 14:21:34

---
title: How to detect when the user stops typing
published: true
description: How to detect when the user stops typing
tags: javascript, tutorial
---

##Background
It is common to add keystroke events to input elements to detect when a user is typing such as <code>keypress</code>, <code>keydown</code>, and <code>keyup</code>. But sometimes, these alone are too granular for your needs. Imagine sending a Fetch request to your server to update a DB record after every keystroke!

With just a little bit of code, we can make handling user keystrokes more practical and more performant.

###Practical applications
1. Implement an auto-save feature
2. Keep your local data store up-to-date
3. Synchronize the view with real-time collaborators

##Here's what you're going to build
{% jsfiddle https://jsfiddle.net/aichforhuman/9146qbwy/ result,js,html %}

###Let's define some basic variables
```javascript
let timer,
    timeoutVal = 1000; // time it takes to wait for user to stop typing in ms

// pointers to our simple DOM elements
const status = document.getElementById('status');
const typer = document.getElementById('typer');
```

###Add two separate event listeners on keypress and keyup
```javascript
// detects when the user is actively typing
typer.addEventListener('keypress', handleKeyPress);
// triggers a check to see if the user is actually done typing
typer.addEventListener('keyup', handleKeyUp);
```

###Create a timeout on keyup event
```javascript
// when the user has stopped pressing on keys, set the timeout
// if the user presses on keys before the timeout is reached, then this timeout should be canceled via the keypress event
function handleKeyUp(e) {
  window.clearTimeout(timer); // prevent errant multiple timeouts from being generated
  timer = window.setTimeout(() => {
  status.innerHTML = 'All done typing! Do stuff like save content to DB, send WebSocket message to server, etc.';
  }, timeoutVal);
}
```

###Clear the timeout object on keypress
```javascript
// when user is pressing down on keys, clear the timeout
// a keyup event always follows a keypress event so the timeout will be re-initiated there
function handleKeyPress(e) {
  window.clearTimeout(timer);
  status.innerHTML = 'Typing...';
}
```

##That's it!
See how simple that was? Now you can make a more accurate determination on when the user has stopped typing and process data more intelligently.


##Make it better - other things to think about!
1. How would you handle Backspace events?
2. How would you handle version control?

_Follow me on Twitter https://twitter.com/eddieaich_
Links of Free hosting sites
Tags: webdev, beginners, hosting, testing
Published: 2020-04-07 14:58:26

Am a Junior Dev in coding and just finished my developer portfolio which I want to make it live for everyone to see and access. I was able to complete it during this lock down of covid-19. I need you to drop the link of free hosting site to host my personal web. I will really appreciate it from other devs.
Thanks
React array for video
Published: 2020-04-07 14:56:27

Can someone help? :)
I'm having trouble with my react code. 

I want the videos to play when the button is pressed. 

Sofar i have: 

import React, { Component } from 'react';
import ReactPlayer from 'react-player';


let Array =['c/Users/laurenpople/praactice/public/Loop.mov ','c/Users/laurenpople/praactice/public/Antarctica\ Updated.mov', 'c/Users/laurenpople/praactice/public/Australia\ Updated.mov', 'c/Users/laurenpople/praactice/public/Europe\ Updated.mov ']
//let vid;

class App extends Component {

  constructor (props) {
    super(props);

    this.state = {
      Array :
      ['c/Users/laurenpople/praactice/public/Loop.mov ','c/Users/laurenpople/praactice/public/Antarctica\ Updated.mov','c/Users/laurenpople/praactice/public/Australia\ Updated.mov', 'c/Users/laurenpople/praactice/public/Europe\ Updated.mov ']
      
    }
    this.playVideo = this.playVideo.bind(this);
    this.changeVideo = this.changeVideo.bind(this);
  }

  changeVideo (keyValue) {
    this.setState({vidURL: keyValue.keyCode})
  }

  playVideo() {
    switch(this.state){
      case 68: 	console.log("d");
      return (<ReactPlayer url='c/Users/laurenpople/praactice/public/Antarctica\ Updated.mov' playing />)
      
      case 70: console.log("f");
      return (<ReactPlayer url='c\/Users/laurenpople/praactice/public/Australia\ Updated.mov' playing />)
      
      case 71: console.log("g");
      return (<ReactPlayer url='c/Users/laurenpople/praactice/public/Europe\ Updated.mov' playing />)
      
      default: console.log();
      return (<ReactPlayer url='c/Users/laurenpople/praactice/public/Loop.mov ' playing />)
      }
      
      
      };

  render(){
Five tips to hire an animation company
Published: 2020-04-07 14:52:31

Video animations are a trending marketing tactic which can be used to convey the brand message of the company. However, it is difficult to animate a video for which most brands hire a video animation company to do the job. <a href="https://www.animationdok.com/whiteboard-animation">Whiteboard Animation Services</a> It is imperative for a company to be able to create an effective video that can attract the audience while conveying the brand’s message. Choosing the right services for your animated video can be evaluated by the following factors.

1.	Writing a killer script
2.	Understandable voice-overs
3.	An engaging storyboard
4.	High-quality illustrations 
5.	The quality and duration of the video

What do you think?
A GraphQL API for currents cases about COVID-19
Tags: graphql, covid19, node, contributorswanted
Published: 2020-04-07 14:50:27

Hi everyone! With this whole Corona virus scenario and as a lover of the open source community I wanted to contribute someway...so I did a GraphQL API for currents cases about COVID-19. 

Feel free to use the API!

# Links
Repo: https://github.com/anajuliabit/covid-graphql-api.
Heroku: https://covid-graphql-api.herokuapp.com/graphql

If you have questions, suggestions, or feedback, please leave it in the comment section. Pull requests are welcome too!
Building A Knowledge Graph Of Commercial Real Estate At Cherre - Episode 127
Published: 2020-04-07 14:22:05

<p>Knowledge graphs are a data resource that can answer questions beyond the scope of traditional data analytics. By organizing and storing data to emphasize the relationship between entities, we can discover the complex connections between multiple sources of information. In this episode John Maiden talks about how Cherre builds knowledge graphs that provide powerful insights for their customers and the engineering challenges of building a scalable graph. If you’re wondering how to extract additional business value from existing data, this episode will provide a way to expand your data resources.</p><p><a href='https://www.dataengineeringpodcast.com/cherre-knowledge-graph-episode-127/'>Listen Now!</a></p>
Most Common Reasons Why Outsourcing Software Development Necessary
Tags: softwaredevelopment, outsourcingsoftware, customsoftware, softwaredev
Published: 2020-04-07 14:22:03

As the US economy drives towards globalization, several software companies are hard to get the chance to cut their cost, optimize efficiency and great customer service. If you are a company who wants to cut their costs then outsource software development is the best procedure that you must follow.

[Outsourcing software development](https://www.galaxyweblinks.com/?utm_source=dev.to&utm_medium=article&utm_campaign=most-common-reasons-why-outsourcing-software-development-necessary) has proven to be a great success for many companies worldwide. According to many IT Experts, startups & outsourced software development is a perfect match.

If you have taken one step of startup then outsourcing not an option but you should follow it. Your product can seriously benefit from it.

To build a high quality product, you need skilled professionals to work with you. Does not matter whether you’re a startup or looking to enlarge your corporate, hiring the perfect technical team is very important decision bearing in mind that they are going to be the builders of what you’re building.

Listed Below Are The Factors That You Should Know Why Outsourcing Is Important:

__1 – Cost Savings__

It reduces the workload in employee by cutting the outsourcing costs.  You won’t need to make any upfront asset, which makes software development projects much more attractive. It is absolutely necessary to know the standard hourly price and a projected timeline for your project before you go for any further changes.

__2 – Time Savings__

Software development takes less time when people are working on your applications around the clock, so you can get your product to market more quickly than your competitors can.

__3 – Lack of in house experience__

When the internal team of the firm are not sufficient to enhance the company business, then Outsourcing software development will bring new heights to accomplish a business worldwide.

__4 – Flexibility__

When you outsource, you don’t have to spend time recruiting, hiring, training, and housing employees for short-term projects.

__5- Brilliant IT Professionals__

You’ll have instant access to some of the best and brightest information-technology specialists by going foreign and bypassing the gaps in hiring pools in more developed countries.

__6- Intensive Strategy Planning__

Outsourcing software development helps in streamlining the business development processes. It will provide an intensive strategy to have a good advantage in the technical race.

__7 – Better Obedience__

Outsourcing software development helps in creation an automated compliance system that will reduce human follow-ups in business processes.

__8 – Improved Precision__

Offshore development will improve work accuracy in terms of given deadlines on a project. Defined software will deliver accurate results in less turn around time.
Building The Seq Language For Bioinformatics
Published: 2020-04-07 14:19:34

<p>Bioinformatics is a complex and computationally demanding domain. The intuitive syntax of Python and extensive set of libraries make it a great language for bioinformatics projects, but it is hampered by the need for computational efficiency. Ariya Shajii created the Seq language to bridge the divide between the performance of languages like C and C++ and the ecosystem of Python with built-in support for commonly used genomics algorithms. In this episode he describes his motivation for creating a new language, how it is implemented, and how it is being used in the life sciences. If you are interested in experimenting with sequencing data then give this a listen and then give Seq a try!</p><p><a href='https://www.pythonpodcast.com/seq-bioinformatics-language-episode-257/'>Listen Now!</a></p>
QA Processes Setup on a Project
Tags: qa, testing
Published: 2020-04-07 14:17:19

It is not easy to set up the QA process on a project. It is not wise to release a product without proper testing and quality check. This is a step by step presentation of what testing activities must be implemented at every stage of the software development process.

Planning and analysis
+Requirements testing
+Project test plan
+Test scenarios. 

Development
+System check
+Integration testing
+Performance testing
+UX testing
+Bug fixing.

Deployment and delivery
+Smoke tests
+User acceptance testing
+Migration testing
+Final testing report.

Maintenance and support
+Regression testing
+Test plan and scenarios updates
+Automated script updates.

http://hire-tester.com
Stateful vs Stateless flutter widget
Tags: flutter
Published: 2020-04-07 14:16:15

Stateful widget is that which maintains State and responds/rebuilds (itself) when there are any changes in the state.
Where as Stateless widget does not have a state. It is static and cannot rebuild. 

*In simple words - Stateful widgets are mutable & Stateless widgets are immutable*

#lets go through some code

We are going to have '*Text*' widget and '*TextField*' widget to see the difference between Stateful and Stateless widget.
{% gist https://gist.github.com/Prakash-Selvaraj-Ash/9b2315eaa7d25cd5481758b5681153bc %}

The above snippet is the syntax/signature for the stateless widget.
It has '__class__'  which '__extends StatelessWidget__' 

'**build**' override method is responsible to draw the UI.

We are having a field called '*textValue*' which was given to '*Text*' widget and the same field was changed by handing '*onChanged*' in '*TextField*' widget.
But the changes in TextField was not reflecting in the Text widget. Means the state of '*textValue*' is immutable

Let us take the same scenario in Stateful widget.

{% gist https://gist.github.com/Prakash-Selvaraj-Ash/bfcd3e1f68eea4a77ee61115d9f9b122 %}

The above snippet is the syntax/signature for the stateful widget.
It has '__class__'  which '__extends StatefulWidget__' 

Stateful widget will overrides a createState to get the state for the widget.
Now it is State's responsibility to update the UI. Yes you guessed it.
build method will be available in State & not in the widget itself.

This time everything is same but with a little change in onChanged text field callback, Yes the '*setState*' does the trick here.

whenever the setState called, the build method will be triggered to re-draw or re-build

Yes !! now you got the difference between Stateful and Stateless widget in flutter

![success](https://thumbs.gfycat.com/FavorableBoldConey-size_restricted.gif)

[Github project link](https://github.com/Prakash-Selvaraj-Ash/prakash.selvaraj-outlook.com/tree/master/stateful_less_widget)

Happy coding 😇😇 !!
What areas do you pay special attention to when it comes to testing your mobile app in 2020?
Tags: testing
Published: 2020-04-07 14:15:29

Let's travel back in time and take a look at the key areas for testing mobile applications from 2013 to 2017. Performance, security, and functionality testing were on leading positions back then and stay high in demand even now. 

https://www.statista.com/statistics/500605/worldwide-mobile-application-testing-focus-areas/
Tested by professionals to provide the quality approved by users and ensure 5-star reviews
Tags: qa, mobile, testing
Published: 2020-04-07 14:13:22

If this is what you're looking for developing an app and planning a QA process, we know how to help and make our practical experience work for your success.

We will run your app on real devices to simulate actual usage environments and deliver actionable test reports with logs, screenshots, and videos, allowing you to fix any issues and take the app back to a more stable state.

Platforms we test on:
- Android 
- iOS
- Windows Phone. 

Focus on the following testing types:

Functional 
Cross-browser 
Multi-device
Acceptance 
Usability
UX/UI
Load
Regression

http://hire-tester.com

#QA #SoftwareTesting #statista #HireTester #mobiletesting
Do you use some kind of GUI for git, and if you do, when do you have to resort to terminal?
Tags: git, discuss
Published: 2020-04-07 13:31:00

Currently I use VSCode, and I almost never resort to Version Control tab, but when I do, it is convenient.

![VSCode Version Control](https://res.cloudinary.com/practicaldev/image/fetch/s--A8w3HK9o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/JVgU4P3.png)

For commands starting with `git ` I commonly used are

```sh
git add .
git commit ...
git push ...
git pull ...
git submodule ...
git worktree ...
git branch ...
git rm --cache ... 
```

Never used `git checkout`, the GUI already helped for checking out.

I will try to use these more

```sh
git merge ...
git commit --amend
git rebase -i
```

And I might try to use `git push -f` less.

For non-directly git, I use

```sh
git config --global core.editor nano
gi node,macos > .gitignore
java -jar ~/bfgTAB --delete-files *** && git reflog expire --expire=now --all && git gc --prune=now --aggressive
# Might be safer than git filter-branch --tree-filter 'git clean -f -X' -- --all
```

`gi` is https://docs.gitignore.io/install/command-line#macos-bash

Perhaps I should try [this](https://github.com/commitizen/cz-cli) as well.

```
git cz
```
A Quick Intro To OvermindJS In ReactJS
Tags: react, javascript, tutorial, webdev
Published: 2020-04-07 13:41:44

>[Overmind](https://overmindjs.org/) - "frictionless state management" - https://overmindjs.org/

This is a quick video integrating state management into a Two Tab React JS application similar to the one used in this post [Two Ways To Manage State In React JS](https://dev.to/aaronksaunders/two-ways-to-manage-state-in-react-js-5dkb). 

I started to investigate Overmind because I really liked [MobX](https://mobx.js.org/README.html) and this looked very similar to me in some ways, i liked the simplicity of just calling functions in my components!!

Since I wrote the blog post about [Two Ways To Manage State In React JS](https://dev.to/aaronksaunders/two-ways-to-manage-state-in-react-js-5dkb) I thought that this is a great third alternative so here is the video, hope you enjoy

- Application code can be found on codesandbox.io - [Source Code](https://codesandbox.io/s/ionic-react-overmind-simple-0l8ue?file=/src/overmind/index.js)
- Blog post on State Management with useReducer and React Context can be found here: https://dev.to/aaronksaunders/two-way...
- Check Out All By Technical Post: https://dev.to/aaronksaunders
- Overmind: https://overmindjs.org/
- Ionic Framework and ReactJS https://ionicframework.com/docs/react

{% youtube IFbQ6jlQYWs %}
🦄 The Ultimate Gatsby Cheat Sheet [PDF + Infographic]
Tags: beginners, gatsby, inthirtyseconds, react
Published: 2020-04-07 13:35:31

**Gatsby** is a fantastic tool to build websites rapidly. It is an open-source framework created on top of React that lets you develop high-performance websites in no time.

Gatsby's novel plugin system enables you to use all the popular tools like GraphQL, Typescript, Markdown with only a few lines of code.

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

📁 [Download](https://github.com/godcrampy/cheat-sheets/blob/master/gatsby/gatsby-cheatsheet.pdf) the pdf version of this cheatsheet
🌟 All my cheat-sheets are in this [repo](https://github.com/godcrampy/cheat-sheets/) (Star it!)
🚀 Find me on [Instagram](https://www.instagram.com/godcrampy/) | [Github](github.com/godcrampy) | [Twitter](twitter.com/godcrampy) | [Website](sahil.surge.sh)
😄 Have a wonderful day!
Matt's Tidbits #63 - Some good news about AGP 3.6.2
Tags: mattstidbits, android, gradle, tidbittuesday
Published: 2020-04-07 13:28:19

[Last week, I wrote about `when` statements in Kotlin.](https://medium.com/@matthew.b.groves/matts-tidbits-62-when-you-re-feeling-exhausted-16ce590efcea) This time, I have a very quick tidbit about Android Gradle Plugin 3.6.2.

If you've been following my blog, you may have seen a number of stories recently about the (painful) upgrade process I experienced when updating to version 3.6.1 of the Android Gradle Plugin (Tidbits [#61](https://medium.com/@matthew.b.groves/matts-tidbits-61-getting-out-of-a-dependency-cycle-aa07795abbd0), [#59](https://medium.com/@matthew.b.groves/matts-tidbits-59-unexpected-new-lint-features-dd962326fb64), and [#58](https://medium.com/@matthew.b.groves/matts-tidbits-58-a-strange-issue-when-upgrading-to-android-studio-3-6-fdd68f2c813)).

So, when I saw that Android Studio (and AGP) 3.6.2 were released this week, I naturally approached this latest release with some trepidation.

The wonderful news is, I am happy to report that the AGP 3.6.1 -> 3.6.2 migration was completely painless and trivial! No compilation errors. No lint errors. Everything just works.

I wanted to share my experience so others knew it was safe to upgrade - this one was easy! :-) If you do run into any issues with that particular upgrade, please let me know in the comments - I would be interested to hear what problems you encounter! And, please follow me on Medium if you're interested in being notified of future tidbits.

Interested in joining the awesome team here at Intrepid? [We're hiring!](https://intrepid.io/careers)

*This tidbit was originally delivered on April 3, 2020.*