teleren/devto huggingface dataset:
Two hacks for a seamless Zoom experience 
Tags: zoom, remote, productivity
Published: 2020-05-13 06:58:50

---
title: Two hacks for a seamless Zoom experience 
published: true
description: The two hacks will make your remote life with Zoom and Google Chrome a little bit easier.
tags: zoom, remote, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/rkkrqcfruo3ydackkjqh.png
---

# Hack #1 - Open Zoom without prompt
## The Issue
You know the pain. 
For every new Zoom call you have to confirm a prompt in order to join it.
No matter what kind of calendar or meeting reminder you're using, you can't avoid to open chrome and submit the prompt.

![Chrome prompt without checkbox](https://dev-to-uploads.s3.amazonaws.com/i/xoftsugjqnsnktf0lznn.png)

## The Solution
Using an older chrome version to get the checkbox back?
No, not really an option.

Luckily this feature is not gone, just hidden. 
Follow this simple steps to get it back:

1. Have Chrome version > 79
2. Run the following command in terminal `​defaults write com.google.Chrome ExternalProtocolDialogShowAlwaysOpenCheckbox -bool true`
3. Restart Chrome

After restarting chrome you're able to tick the checkbox to always open Zoom directly without prompting.

![Chrome prompt with checkbox](https://dev-to-uploads.s3.amazonaws.com/i/6v2oq00ptrp0b5hn3wgq.png)

# Hack #2 - Zoom Closer for Google Chrome
## The Issue
You're pretty busy and hopping from call to call.
Every new call is a new tab in Chrome and you end up like this...

![Open zoom tabs](https://dev-to-uploads.s3.amazonaws.com/i/rkkrqcfruo3ydackkjqh.png)

## The Solution
Some smart people came up with Chrome plugins for this issue.
Every new tab is just temporarily open and will be closed automatically.

Just search for "Zoom Tab Closer" in the chrome web store and install one.
I linked the *Zoom Closer* which works pretty fine for me.

# Credits
[1] https://superuser.com/questions/1498967/how-to-always-open-certain-app-links-in-chrome-without-prompt
[2] https://chrome.google.com/webstore/detail/zoom-closer/appjbedfhcmpknanmbndpojcllfaemal
Are you starting to forget everything?
Tags: watercooler, productivity, discuss, help
Published: 2020-05-13 06:51:53

I am lately forgetting everything about writing code, article and other things. I now do silly mistakes. 

What can I do so that I remember everything again and to get motivated? 

Also have you guys experienced the same if so can you help me how to deal with it?

I really need help! Thanks
particles.js
Tags: codepen
Published: 2020-05-13 06:51:25

<p>particles.js - A lightweight JavaScript library for creating particles (canvas)</p>

<ul>
<li><a href="http://vincentgarreau.com/particles.js/" target="_blank">http://vincentgarreau.com/particles.js/</a></li>
<li><a href="https://github.com/VincentGarreau/particles.js/" target="_blank">https://github.com/VincentGarreau/particles.js/</a></li>
</ul>

{% codepen https://codepen.io/VincentGarreau/pen/pnlso %}
Role of UI/UX in Full-Stack Development
Tags: UI, UX, FullStack, Software
Published: 2020-05-13 06:47:24

Full-Stack development is a term that denotes the development of both server-side and client-side parts of a web application. It means the development of both front and back-end parts.

In general, full-stack web developers are known for their ability to create a wholesome website and web application. These developers generally work on debugging, database, backend and frontend of websites and web applications.

What is UI/UX in web and web app development?

UI denotes User-Interface and UX denotes User Experience as most of us know. Any website and even any app are identified as the best only when these things are offered. It means that only when the users get the best experience, they are best. In the same way, the interface should be easy for any person to use. So, not just a UX/UI Designer, but even a full-stack developer should be considerate about these two things.

What is the role of UI/UX in full-stack development?

As mentioned earlier, a full-stack developer will work both on the server and the client-side of a web or app development. So, they can get a complete picture of the process of development. As they get a complete view, they should be cautious in the development process. They should make sure that the full-stack website that they develop should provide the best experience and interface for users.

Comprehensive thinking:

The biggest benefit for full-stack designers is their comprehensive thinking ability. A designer with design and development process knowledge also knows about the restrictions of web/app design. It means that they can have complete control over the expectation of the design of an app or website. When they are familiar with the process, they can make their team even more convenient to gain knowledge on user experience, marketing and development. In turn, they can get seamless co-operation from their team. The result will be the development of the app or website with the best UI/UX design.

Conclusion:

In short, the fundamental goal of any business is to increase growth. They wish to achieve this by increasing sales. With the right UX/UI design in full-stack development, they can achieve these goals. With the best user experience and interface, customer satisfaction for any business will improve. In turn, there will be a considerable increase in the number of users for any business application. The same thing will happen with the best UI/UX in full-stack website development. So, full-stack developers should focus on the best UI/UX design!
Vanilla JavaScript Trim White Space
Tags: javascript
Published: 2020-05-13 06:44:36

Let's dive into the `JavaScript` methods for removing white space from a string.

We are going to use the `trim`, `trimStart`, and `trimEnd` methods in `Vanilla JavaScript`.

## Vanilla JavaScript trim() method

The `trim()` method is an easy way to remove white space from the beginning and end of a string; it will return a new string.

```js
var quote = "  Gotta Catch 'Em All.      ";
console.log(quote.trim());
// "Gotta Catch 'Em All."
```

Super simple as you can see, we removed all trailing and ending whitespace.

## Vanilla JavaScript trimStart() method

The `trimStart` method is the same as the `trim` method above, but it will only trim the beginning of the string.

```js
var quote = "  Gotta Catch 'Em All.      ";
console.log(quote.trimStart());
// "Gotta Catch 'Em All.      "
```

## Vanilla JavaScript trimEnd() method

Yes, you guessed it right, this one is again the same but will trim only the end of our string.

```js
var quote = "  Gotta Catch 'Em All.      ";
console.log(quote.trimEnd());
// "  Gotta Catch 'Em All."
```

Feel free to play around with this Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="NWGzVRG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vanilla JavaScript Trim White Space">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/NWGzVRG">
  Vanilla JavaScript Trim White Space</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Why is Node.js a popular full-stack web framework?
Tags: javascript, software, web, node
Published: 2020-05-13 06:37:48

JavaScript has gone on to define popular computer languages of modern times in the recent past mostly owing to the huge demand globally for web applications. For most of the coders, while program coding for multiple browsers, JavaScript seems to be the only choice for all front-end developers. 

One often-repeated argument is the acknowledgement of other coding languages such as TypeScript, Dart or CoffeeScript as alternatives of Javascript. But, the truth be told TypeScript is identified as a super-set of JavaScript which includes many object-oriented programming features, which include classes, optional static typing and interfaces, and moreover it still in a nascent stage. On the other hand, CoffeeScript is also viewed majorly as a kind of syntactic sugar which will eventually be referred down by the use of JavaScript. And for Dart, a coding language is also categorized as a major object-oriented language with C-like syntax and similarity and is dependent upon JavaScript for compiling into popular browsers.

With the rise and growth of Node.js, JavaScript has taken a leap into no longer being confined as just a front-end developer tool and additionally back-end is not perceived as rocket science anymore by front-end coders.
Over the last few years, coders had the tendency to refer JavaScript as the only available silver bullet which can accommodate coders in every situation such as desktop application, web server, front-end, embedded system, databases and a whole lot more.

Furthermore, considering the widespread audience for JavaScript, Node.js has made some significant gain for all full-stack web developers. But it is to be noted that Node.js is designed as a lightweight language and therefore can only provide fundamental functionalities which include working as webserver to propel the web application level development speed.

Further understanding the absolute need of Node.js, one is also advised not to use Node.js for various CPU-intensive operation; whereas heavy computation only further negates almost of its other advantages.
Where Node.js shine brightly is while building quickly scalable forms of network and its applications, as it possesses the capability to handle large instances of simultaneous established connections with a high amount of throughput, further equating to a classic case of scalability.

Also considering how Node.js works under the hood of your computer device is unique in comparison to other such technology with each individual request spawning a new line of thread. Since it uses non-blocking I/O, allows for multiple connections.
Laravel Datatables | Yajra Datatables for Laravel 7
Tags: datatable, laravel, yajra
Published: 2020-05-13 06:34:13

Hello Artisan 

In this tutorial, i am going to share with you how to install and use datatables in laravel 7 application. In this laravel demo datatable tutorial i will use datatables laravel datatables plugin. I will write step be step tutorial for laravel 7 datatables ajax.

https://www.codechief.org/article/laravel-datatables-yajra-datatables-for-laravel-7
Converting a Node project to Deno
Tags: node, deno, convert, typescript
Published: 2020-05-13 06:15:23


I was intrigued to test Ryan Dhal's [Deno](https://deno.land/) and nothing better than some personal project to make it right.

![Deno](https://raw.githubusercontent.com/kt3k/deno_sticker/master/sticker.png)

Some important stuff before:

- [Convert your project to TypeScript](https://dev.to/suhas_chatekar/converting-a-javascript-project-to-typescript-one-file-at-a-time)
- [Some gotchas about existent modules](https://medium.com/@mudgen/porting-node-js-code-to-deno-e7225bd5be58)
- [Read basic stuff about Deno](https://deepu.tech/deno-runtime-for-typescript/) 


## Remove all NPM files and node_modules

You don't need anything more than Deno, but some tasks will be converted to some Deno "out of the box" command (e.g. `deno test`), and for others, I'll use a Makefile for convenience.

  - Remove `package.json`, `package-lock.json`, and all related stuff. Check this file for all `NPM` possibilities: https://github.com/github/gitignore/blob/master/Node.gitignore
  - Remove `node_modules`


## Add file extensions to imports

Add `.ts` to all import statements.

One easy way using VS Code ["search and replace"](https://code.visualstudio.com/docs/editor/codebasics#_find-and-replace):
- Enable regex
- For **Search** field use from `(.+?)(?=.ts')`
- For **Replace** field use from `$1.ts`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zccqypfn4gf8s5ahbzj8.png)


## Fix parser warnings and adapt the logic

Deno uses strict guidelines using the TypeScript and style guide. It includes some logical/code adaptations.


## Optional: convert tests and test task

- Short version: https://github.com/denoland/deno/blob/master/docs/testing.md
- Follow the "out of the box" test suite https://deno.land/std/testing
- Convert from `npm test` to something like:

```bash
# Optional Makefile for convenience
test:
	deno test
```


## Convert install task and add the first dependency

Forget `npm install`. [You can use `dep.ts`](https://github.com/denoland/deno/blob/master/docs/linking_to_external_code.md#it-seems-unwieldy-to-import-urls-everywhere), but it's not required. I'm using a Makefile to keep track of all dependencies:

```bash
# Optional Makefile for convenience
install:
	deno install --unstable --allow-read --allow-run -f https://deno.land/x/denon/denon.ts;
```


## Convert run and dev tasks (with Denon)

Here I'm using [Denon](https://deno.land/x/denon) module, the Nodemon for Deno, to watch and reload file changes.

```bash
# Optional Makefile for convenience
dev:
	denon $(ENTRY_POINT)
run:
	deno run $(ENTRY_POINT)
```


## Set entry point

Change the entry point file name from `index.ts` to `mod.ts` [Deno/Rust standard](https://github.com/denoland/deno/blob/master/docs/contributing/style_guide.md).


## Use my project as a template

All these steps are documented on my project: https://github.com/jotafeldmann/elevators/pull/1


Enjoy and, please, send me feedback to improve.
TypeScript with worker_threads and hot reload
Tags: typescript, node, help
Published: 2020-05-13 06:10:24

One of the way is indeed using [threads.js](https://threads.js.org/) (and [observable-fns](https://github.com/andywer/observable-fns)), but I came with a Native way (for Node 10+ latest with CLI --experimental option and Node 12+).

That is using [tsc-watch](https://github.com/gilamran/tsc-watch) instead of ts-node-dev.

```ts
// Main thread
import { Worker } from 'worker_threads'

// eslint-disable-next-line func-call-spacing
const socketMap = new Map<string, (msg: any) => void>()

// Inside Websocket function
  conn.socket.on('message', (msg: string) => {
      const { id, type, filename } = JSON.parse(msg)

      const isNew = !socketMap.has(id)
      socketMap.set(id, (json: any) => {
        conn.socket.send(JSON.stringify(json))
      })

      if (isNew) {
        const spawn = () => {
          const worker = new Worker(path.join(__dirname, '../worker/process-upload.js'))

          worker
            .on('online', () => {
              worker.postMessage({ id, type, filename })
            })
            .on('message', (status = 'done') => {
            socketMap.get(id)!({ id, status })
            })
            .on('error', (err) => {
              console.error(`Error: ${filename}, ${err.message}`)
            })
            .on('exit', (code) => {
              if (code === 0) {
                console.log(`Worker: ${filename} exited with code ${code}`)
                socketMap.get(id)!({ id, status: 'done' })
              } else {
                console.log(`Worker: ${filename} exited with code ${code}`)
              }
            })
        }

        spawn()
      }
    })
```

```ts
// Worker thread

import { parentPort } from 'worker_threads'

const parent = parentPort!

const postMessage = (msg: string) => parent.postMessage(msg)

parent.on('message', ({ id, type, filename }) => {
  // Some better-sqlite3 write and AdmZip sync stuff.

  process.exit(0)
})
```

[This project](https://github.com/patarapolw/rep2recall/blob/master/packages/e-server/src/router/file.ts).

But for some reasons,

- sometimes Worker thread exits with Code 1 (possibly some kind of default termination), and I cannot use `on('exit')` directly without checking exit code...
  - If I use threads.js, error throws clearly (inside Observable) that it is due to database write lock; and `console.log` works properly.
  - worker.on('exit') is called with code 1, but the worker thread does not seem to stop (there is still writes to the SQLite).
- `console.log` not really working in Worker threads.
Multi-OS build with Appveyor and Travis CI
Tags: electron, node, python, go
Published: 2020-05-13 05:59:55

And it also allows C compiling to binary, as long as you can get the right setup.

I use this with Node better-sqlite3, where prebuilt binary for Windows is not working (with Electron), and I am running development on MacOS.

[.travis.yml](https://github.com/patarapolw/rep2recall/blob/master/.travis.yml)

[appveyor.yml](https://github.com/patarapolw/rep2recall/blob/master/appveyor.yml)

This is also a possibility with Python `PyInstaller` / `py2exe` / `py2app`, and Golang with cgo.

Not yet sure about packaging Java...
Automating requests in postman which require Authorization
Tags: apitesting, beginners, javascript, postman
Published: 2020-05-13 05:59:20

If sending a request demands new authorization token each and every time, running the requests as a collection might be a little tricky. 
Postman provides us an option to parameterize the access token generation process by adding a pre-request script and environment variables.

Parameterize the authorization at the collection level with the below code:

```javascript
let tokenUrl = 'url';
let clientId = '<>';
let clientSecret = '<>';
let scope = '<>';
 
let getTokenRequest = {
    method: 'POST',
    url: tokenUrl,
    auth: {
        type: "basic",
        basic: [
            { key: "username", value: username },
            { key: "password", value: password }
        ]
    },
    body: {
        mode: 'urlencoded',
        urlencoded: [
            { key: 'grant_type', value: 'username' },
            { key: 'scope', value: scope }
        ]
 
    }
     
};
 
pm.sendRequest(getTokenRequest, (err, response) => {
    let jsonResponse = response.json(),
        newAccessToken = jsonResponse.access_token;
 
    console.log({ err, jsonResponse, newAccessToken })
     
    pm.globals.set('accessToken', newAccessToken);
    pm.environment.set('accessToken', newAccessToken);
    pm.variables.set('accessToken', newAccessToken);
});
```
PWA vs a progressive web app: what's the difference?
Tags: discuss, webdev
Published: 2020-05-13 05:46:23

You know how sometimes the English language can be vague with wording and phrases? This is one of those times. I know that the acronym PWA stands for Progressive Web App but is there a difference when saying
1. an app is a PWA, and
2. that a web app is progressive

or none at all? HELP!
Linux SSH Session Is Slow
Tags: linux, ssh, sshd
Published: 2020-05-13 05:31:48

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/e7bqvh6su0b9lehmqfqw.jpg
title: Linux SSH Session Is Slow
published: true
description: My linux SSH Session is very slow, Despite the fact that i have free resources available.
tags: linux, ssh, sshd
---
This post is for you if you've run into the problem where your ssh session is painfully slow despite the fact that there free resources available on your machine.

First thing you want to check is latency to your server from your development machine. You can do that by ping or trace route. If you find that Latency is in-fact your issue. We can slightly improve by disabling Reverse DNS Lookup by server. Here's a [full argument](https://unix.stackexchange.com/a/56947) in favor of disabling reverse dns lookup.

How to do it?
You should head over to `sshd_config` file. 
Add this key to your file `UseDNS no`.

You might have to disconnect from your ssh & reconnect again in-order to see the changes.

I hope it helps :)
Position and Rotation Copy Tips in Unity
Tags: unity3d
Published: 2020-05-13 05:30:09

Unityで以下のようなことをしたい時、別にこれでも良いのだが
A.position = B.position;
A.rotation = B.rotation;


このSetPositionAndRotationを使う方が若干パフォーマンスに優れる。
A.SetPositionAndRotation(B.position,B.rotation);
https://docs.unity3d.com/ScriptReference/Transform.SetPositionAndRotation.html
JavaScript: I built a server-side rendering starter project with ReactJS and Express.js
Tags: react, node, serversiderendering
Published: 2020-05-13 05:03:50

Let's keep this short.
Here's the link to the repository - [react-ssr-starter](https://github.com/thediggu/react-ssr-starter)

### Motivation
Having worked with ReactJS for over two years now, the one issue I've always had with it was the initial render time. The script files always needed to be fetched from the server first and then ReactJS starts reading your bundle and renders your project. This was rather slow, especially in cases where I wanted to host a simple page that shows me daily reports for my apps. I've always known that server-side rendering greatly improved the first-time load performance but till now, I'd only ever used templating engines like [Pug](https://pugjs.org/api/getting-started.html) for SSR and never tried building an SSR project with both ReactJS and Express.

After a lot of trial and errors, and understanding why certain things don't work(even though they make logical sense), I built this starter project for you to clone and get started with your development work without having to worry about setting up the project from scratch but worry only about the core logic of what you're trying to build.

### Contribution
Feel free to dive in! [Open an issue](https://github.com/thediggu/react-ssr-starter/issues/new/choose) or submit PRs. There's always something we can all learn.

### Feedback
I'm always open to hearing from you about what you have to say. If you have any questions, I'll be glad to answer them. Cheers!


Stay home. Stay safe. Wash your hands.
Single Element in a Sorted Array - LeetCode
Tags: binarysearch
Published: 2020-05-13 04:59:01

---
title: Single Element in a Sorted Array - LeetCode
published: true
description: LeetCode Medium Problem Solution
tags: binary-search
---

For any Algorithm question, whenever you see a keyword **Sorted** think of _Binary Search_

In the given problem, there is one unique element and rest of all the elements are paired, also the elements are in sorted array

Let's consider this example, with start and end index pointing to first and last element of the array

nums = [1,1,2,3,3,4,4,8,8]

![Binary Search 1](https://i.imgur.com/lvG1tA1.png)

Now the _mid_ is 3

if you analyze the diagram

* nums[mid] == nums[mid - 1]

Now there are two cases

1. Either the element lies from start to mid
2. Or the element lies from mid to end

You can say the element lies in a part where the length is not even

So the conditions will be

1. if mid to end is even then the element lies from start to mid, so `end = mid - 2`. Why `mid - 2` because we don't want to iterate `nums[mid]` and `nums[mid - 1]` again
2. if mid to end is odd then the element lies from mid to end, so `start = mid + 1`

Now Let's consider a case where `nums[mid] == nums[mid + 1]`

![binary-search-2](https://i.imgur.com/rsC5Hhr.png)

The conditions for this scenario is

1. if start to mid is even, then element lies from mid to end, so `start = mid + 2`
2. else `end = mid - 1`

Now there comes a scenario where nums[mid] is not equal to nums[mid + 1] or nums[mid -1], that's the element we have to return

Here is the code

```js
var singleNonDuplicate = function(nums) {
	let start = 0, end = nums.length - 1
	while(start <= end) {
		let mid = Math.floor((start + end) / 2)
		if(nums[mid] == nums[mid - 1]) {
			let isEven = (end - mid) % 2 == 0
			if(isEven) {
				end = mid - 2
			} else {
				start = mid + 1
			}
		} else if(nums[mid] == nums[mid + 1]) {
			let isEven = (mid -start) % 2 == 0
			if(isEven) {
				start = mid + 2
			} else {
				end = mid - 1
			}
		} else {
			return nums[mid]
		}
	}
};
```