teleren/devto huggingface dataset:
Adding keyboard shortcuts in React
Tags: react, webdev, javascript
Published: 2019-06-26 18:06:19

Keyboard shortcuts are a great feature for your React app. They help power users to get the most from your application, and can greatly reduce the time spent navigating menus and suchlike.  I am currently building a web based markdown editor (because the world definitely need another one of those). I'm aiming for complete minimalism so that when writing it's just the raw text, with a preview pane which shows up when you use a keyboard shortcut.  

A quick Google threw up [react-hotkeys](https://github.com/greena13/react-hotkeys) which seemed great for the task. It's super simple to configure and set up.

```react
const keyMap = {
    PREVIEW: "ctrl+shift+p",
};
class App extends Component {

    handlers = {
        PREVIEW: event => this.setState((state) => {
            return {
                ...state,
                preview: !state.preview
            }
        })

    };
...
<div className="App">
                <GlobalHotKeys keyMap={keyMap} handlers={this.handlers}/>
... the rest of your code here....

```

The __keymap__ is a list of the actions you want to make available (you can make up any name you want for your commands) mapped to the keyboard shortcut you want for it.  __handlers___ is an object, mapping the command names to an event handler function.  In the sample I update the preview field in my state, which is used to toggle a className in my app to either display or hide the preview div.

After dropping this code into my app the shortcut worked first time, __except for when my cursor was in a text area__.  Given that my app is almost 100% textarea this was a problem!  I discovered that react-hotkeys disables shortcuts from firing from inside textareas and other inputs by default, which makes 
 total sense. The standard when building webapps is for shortcuts to be single letters (eg. 'c' will compose a new email in gmail), and if you're typing a message out you don't want it to fire your shortcuts.

react-hotkeys has a configure method which allows you to modify the defaults.  Placing this configuration in my component makes hotkeys work irrelevant of focus:

```react
configure({
    ignoreTags: []
})
```

Simple!
obligatory 'I am using the new windows terminal' post
Tags: productivity
Published: 2019-06-26 16:58:13

![anime](https://thepracticaldev.s3.amazonaws.com/i/ys5ilrshh15p7qbfenri.gif)

- install windows terminal
- open and `ctrl + ,`
- tilt head back slightly and pour animation into the conical receptors

here's my configuration

https://gist.github.com/funnymania/6d5bc704e0667ce9da0d21c92b9573ab

Open the terminal and type 'Ctrl + ,' to bring up configuration

Have fun ;*
Declaration of Digital Independence
Tags: freedom, codepen, rights
Published: 2019-06-26 16:46:33

Now you can be like Nicholas Cage & steal the {Digital} Declaration of Digital Independence, brought to you by Wikipedia founder, [Larry Sanger](https://larrysanger.org).

About the [Declaration of Digital Independence](https://larrysanger.org/2019/06/declaration-of-digital-independence/) 👈

You can make something too: 👇

{% codepen https://codepen.io/vuild/pen/ydzpgP %}
ANIMACIÓN CON JQUERY UTILIZANDO SETINTERVAL Y LAS ETIQUETAS HTML5 POLYLINE ellipse y text svg
Tags: codepen, setinterval, jquery
Published: 2019-06-26 16:43:28

{% codepen https://codepen.io/cvdgp/pen/EBXEOd %}   Ejecutar una accion cada x segundos
         La función setInterval nos permitirá realizar una acción cada x milisegundos, tiene dos parámetros la función que le pasamos y el tiempo en milisegundos que retrasa su ejecución. En el siguiente ejemplo se modificara el color del texto de nuestra <strong>imagen svg cada x segundos. Como setInternal ejecuta nuestra función hasta que finalice he creado un array con los colores que le pasamos a la función y luego la he llamado dentro de otro setInternal. Es como un bucle anidado.</p>
Byte Sized Episode 1: Grace Hopper
Tags: bytesized, history, computerscience
Published: 2019-06-26 16:27:52

---
title: Byte Sized Episode 1: Grace Hopper
published: true
description: The full story of Grace Hopper's compiler, delivered in a couple of minutes.
tags: bytesized, history, computerscience
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--pvolAdo0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/lso5u223mlbo4zb4ityl.png
series: Byte Sized Season 1
---

Today's episode of Byte Sized is about [Grace Hopper](https://en.wikipedia.org/wiki/Grace_Hopper)'s contributions to computer history.

### 💬 If you know any more Grace Hopper factoids, leave a comment and let the community know!

Follow **Byte Sized** for an adventure through computer history, a few minutes at a time.

{% organization bytesized %}

<center>
# **Today's Sponsor**
</center>

![](https://thepracticaldev.s3.amazonaws.com/i/xmbh3ifs8i5xwqi2we3q.png)

The sponsor of this episode is [DEV](/) itself (this website). DEV is also the producers of this series.

We are looking to partner with organizations for future episodes, and we felt like "show and tell" was the best way to find the right folks.

By sponsoring Byte Sized and future original video productions, you will receive about 30 seconds in between the episode and the next-episode preview.  You can use that time to teach our community about your product or service, or to address this audience in other creative ways.

You will also get an additional write-up just like this. DEV staff will work with you to help ensure that your message is as valuable and relevant as possible for the community.

DEV is visited by over 3 million software developers per month and is the fastest growing coding community on the planet.
Vue Dapp Tutorial with Truffle & Drizzle
Tags: ethereum, blockchain, dapp, drizzle
Published: 2019-06-26 15:54:20

---
title: Vue Dapp Tutorial with Truffle & Drizzle
published: true
description: 
tags: Ethereum, Blockchain, Dapp, Drizzle
---

{% youtube XaVEZ1ucxac %}

In this [tutorial](https://youtu.be/XaVEZ1ucxac), I will show you how you can create a Vue Dapp on the Ethereum Blockchain.

We are going to use Drizzle, the frontend framework for building Dapp easily. We will also use the Drizzle Vue plugin that connect Vue to Drizzle and provides some ready-to-use vue components to interact with Ethereum and smart contracts.
Who is hiring? (As of June 2019)
Tags: whoishiring
Published: 2019-06-26 15:46:35

---
title: Who is hiring? (As of June 2019)
published: true
description: Members of the dev.to community sharing open job opportunities at their companies.
tags: whoishiring
---

This is our monthly thread where community members share openings at their companies.

Here a few ground rules:

- Please only post if you are personally part of the hiring company (no recruiting firms)
- Please provide brief background on what your company does
- Only one post per company (you can list multiple openings in the post)

Consider using this template:

```
Company Name | Job Title | Location | Remote or Onsite | (optional) Salary Range | Sponsor visa?

About the company — background, size, etc (1-3 sentences)

About the role(s) — languages, requirements, etc (1-3 sentences)

Do you sponsor visas?

How to Apply — email or application link
```

---

We also wanted to share some quick careers-related notes from our fantastic Sustaining Sponsors.

### Digital Ocean

> At **DigitalOcean**, we're simplifying cloud infrastructure for developers. Here you'll get to work with some of the smartest and most interesting people around; solving unique and complex technical challenges on a scale matched by few companies. If you get excited about stretching yourself in new ways, developing yourself to your fullest potential, with amazingly supportive friends and colleagues; [we want to talk to you](https://www.digitalocean.com/company/careers/?utm_source=devto&utm_medium=display&utm_campaign=Devto_2018_Brand)!


### GoCD

> **GoCD** is a free and open source CI/CD tool by ThoughtWorks. You can model your complex workflows, deploy to popular cloud environments such as Kubernetes, and visualize your end-to-end workflows — [download and use for free](https://www.gocd.org/download/).  While we don't have any open positions, there are many ways to [contribute to the community](https://www.gocd.org/contribute/).

### CodeStream

> **CodeStream** is a Y-Combinator-backed, New York based company that helps dev teams discuss, review, and understand code. Most of our employees work remotely from their location of choice.  We have a number of open positions, ranging from Python and Java engineers, to growth hackers, and enterprise sales reps.  A full list of openings is available on our [Careers page](https://www.codestream.com/careers?utm_source=devto&utm_medium=whoishiring).
Long-lived JVM applications memory usage tuning
Tags: jvm, devops, glibc, memory
Published: 2020-05-23 19:37:50

---
title: Long-lived JVM applications memory usage tuning
published: true
date: 2019-06-26 15:31:54 UTC
tags: jvm,devops,glibc,memory
canonical_url: http://www.streppone.it/cosimo/blog/2019/06/long-lived-jvm-applications-memory-usage-tuning/
---

A few days have passed since the last blog post about [jvm memory usage monitoring tools](http://www.streppone.it/cosimo/blog/2019/06/jvm-memory-usage-monitoring-tools/), and I have learned so much about patterns of JVM memory usage and magic flags to use to influence it. I still can’t call myself an expert, but judging from the corpus of stackoverflow posts about jvm and memory, at least I’m not totally clueless. :-)

**EDIT** : this post has now been further extended and published on the [newly published Kahoot engineering blog](https://kahoot.com/tech-blog/optimizing-jvm-memory-usage-in-kahoot-gameservers/).
listdir vs scandir vs glob - The one and preferably only one obvious way to do it!
Tags: python, opensource
Published: 2019-06-26 15:27:04

You know, sometimes when I read those python aphorisms like "beautiful is better than ugly" I wonder whether the makers were being sarcastic or real, and I'm not kidding!

Its not just about `listdir` and `scandir`, a whole lot of things are ambiguous and you'll find a lot of different ways to do those same things thus contributing to a non-standard and messy system of working. setuptools and distutils are the obvious examples, there are so many setuptools components that still internally use the old distutils packages that its astonishing. The easy_install is yet another way to do the same packaging dance!

Sometimes, a functionality in shutil is broken and you need to import the alternative from good old distutils which is truly absurd and preposterous. Most recently, I came stumbled across just this:

```python
from distutils.dir_util import copy_tree
```

The shutil.copy_tree is broken (it doesn't automatically create non-existent folders and there are some other irregularities), so I had to use the copy_tree from distutils.dir_util module.

Here is another great example. `distutils.core`, `pkg_resources` and there is another package called `site` all doing basically one and the same thing. In this instance, I had to write a local version of `pip --freeze` that checked my local setup.py and generated the requirements.txt from that instead of globally installed modules. As you can see, there are perhaps a lot of confusing ways of implementing this same thing:

```python
#!/usr/bin/env python
import os
import distutils.core
import pkg_resources

if __name__ == "__main__":
	setup = distutils.core.run_setup("setup.py")
	ss = ""
	for req in setup.install_requires:
		 vv  = pkg_resources.get_distribution(req).version
		 ss += "%s==%s\n" % (req, vv)
	ss = ss.strip()
	print(ss)
	open('requirements.txt','w').write(ss)
	print("Written to requirements.txt")
```

So, please tell me again, is this for real or sarcasm!

```
Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren't special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.
In the face of ambiguity, refuse the temptation to guess.
**There should be one-- and preferably only one --obvious way to do it.**
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.
Although never is often better than *right* now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea -- let's do more of those!
```
At what point do you know you have a bad application architecture?
Tags: database, scalability
Published: 2019-06-26 15:15:50

---
title: At what point do you know you have a bad application architecture?
published: true
description: At what point do you know you have a bad application architecture?
tags: database, scalability
---

From my personal experience, the moment you find yourself writing scrips to clean up data; like cleaning the database every so often, scripts to clean up images, et cetra, you have an architecture that is not scalable.

The second observable sign is when you find yourself adding database columns to hold computed values that are easy to evaluate at application runtime or boolean fields whose states/values depend on other values database values, or when you start accumulating database enums to handle state change.
How do you explain what you do?
Tags: discuss
Published: 2019-06-26 15:01:27

Hi dev.to community! I am tired of saying:

* I do things with computers
* I create documents with code 
* I fix bugs for XYZ department

BORING!!!

I was wondering if people have more creative ways to describe what they do, especially if you do something else than websites or web apps. These two are easy to explain to anyone.
Testing KPI
Tags: testing
Published: 2019-06-26 14:58:07

I was reading through this article, [8 Key Performance Indicators For Quality Releases](https://www.softwaretestinghelp.com/key-performance-indicators-quality-releases/), and while it specifies some important modern test changes and needs... My reaction is that I don't want to be reviewing these metrics and don't want management using them to review test progress.

I think defect tracking and identifying patterns is very important, but this DDE smells of defend ourselves to management because they don't believe we are valuable. And I understand that is the point of KPI, something was sold and proof should be shown and maybe even billed to.

I am working to bring manual test effects together in order to provide consistency and automation across products. I understand this desire to show off the value (which will be missed because we didn't have tracking before). I'm just thinking off all the little things that get caught through adhoc testing. How this KPI creates a huge desire to spend time putting everything down, something I'm already being pressured for to prove testing. 

My goal to measure success is to raise a teams confidence of release. Consider a team willing to ship to production once their automated pipeline is complete. They don't have metrics showing them that they found more bugs in development than occur in production, they aren't being arrogant and just assuming they'll deal with prod issues when they come.

This team will get that confidence by being involved, knowing what test efforts where taking place, knowing that production issues were reliably replicated in the pipeline. They'll be confident because they only changed this one thing and it wasn't a six week dev effort by three different developers.

Now this is a tall order when you have clients on a one month release cycle with a one to two month lead time. But progress towards the confidence is still the best indicator.
Do you know what you optimize for?
Tags: productivity, mindfulness
Published: 2019-06-26 14:44:29

As developers, we spend a fair amount of time optimizing code.

However, we also spend a lot of time optimizing our behavior. Often we are unaware of this.

For example, if you choose to park close to the door when you drive to work, you are optimizing for something. If you choose to park at the back of the parking lot, you are optimizing for something else. You may not be aware of what you're optimizing for, though, and that's the point of this post. You might just be deciding on something without fully understanding why.

Try paying attention to one particular action you take that you normally do without thinking. What are you optimizing for when you do it? What _could_ you optimize for?
Release of GraphQL: The Documentary w/ Lee Byron, Dan Schafer & Nick Schrock
Tags: graphql, opensource, programming
Published: 2019-06-26 14:19:42

---
title: Release of GraphQL: The Documentary w/ Lee Byron, Dan Schafer & Nick Schrock
published: true
description: We just released a documentary about GraphQL, tracing the story of how it came to be, the initial problems it was created to address at Facebook and how it went on to become a community tool used by hobbyists as well as big tech companies such as Twitter, Airbnb and Github. Hope you enjoy it!
tags: Graphql, opensource, open-source, programming
cover_image: https://i.ibb.co/MhC8vj9/201905-Graph-QL-Out-FB-Cover.png
---

{% youtube 783ccP__No8 %}

**GraphQL: The Documentary** was filmed over a few months in both San Francisco and Berlin, with the help and support of the GraphQL community.

Starring **Lee Byron, Dan Schafer and Nick Schrock**, as well as other influential GraphQL community members, GraphQL: The Documentary explores how and why GraphQL came to be and highlights the power of open source communities. 

GraphQL's inception was tasked to solve a specific problem that not only affected Facebook (where it was initially developed), but many other tech companies including Twitter, Airbnb and Github, who are all featured.

We make open-source documentaries because it's our way of giving back to the open-source technologies we and other companies use and the communities that build around them, but also because their stories are aspirational and amazing to see close up. :) 

This will be our third open-source documentary, following our documentaries about [Ember.js](https://www.youtube.com/watch?v=Cvz-9ccflKQ&list=PLtEPUaeDclku1ECmuN3IsUimHApukWIOf&index=3) and [Elixir](https://www.youtube.com/watch?v=lxYFOM3UJzo&list=PLtEPUaeDclku1ECmuN3IsUimHApukWIOf&index=2).

Hope you enjoy it!

[Follow us on Youtube](https://bit.ly/31Q7wm6) for more video content, including our upcoming open-source documentary on Evan You and Vue.js
Any Cordova plugin to call an external Android app?
Tags: cordova, hybridapps, android
Published: 2019-06-26 14:00:29

---
title: Any Cordova plugin to call an external Android app?
published: true
description: Need a Cordova plugin
tags: Cordova,hybrid-apps,android
---

 I have tried many online available plugins for this task but none of them are working. I need to pass an explicit intent to launch my own Android application.
#CodepenChallenge Pure CSS Google Chome no connection dinosaur
Tags: codepen, css, html, showdev
Published: 2019-06-26 13:19:37

# Idea

<p>Borrowed Google Chrome's "no internet connection" dinosaur. </p>

<p>I did this a year ago, when I thought that "What if, I should make a 3d pixel art, instead of 2d".</p>

<p>And so, happened that the 'Codepen Challenge' for that week is about dinosaurs.</p>

<p>The first thing popped out from my mind is the Google Chrome's "no internet connection" dinosaur game.</p>

<p>I did not use any pre-processors for CSS and Javascript for animation.</p>

<p>But I used the CSS variables, for a little convenience. I don't know much about CSS variables that time, and I totally don't know about HTML pre-processor.</p>

# Demo

<p>Here is the demo of the dinosaur.</p>

{% codepen https://codepen.io/takaneichinose/pen/EOppjZ %}
Weekly Picks #81 — Development Posts
Tags: webdev, javascript, vue, github
Published: 2019-06-27 09:56:29

---
title: Weekly Picks #81 — Development Posts
published: true
tags: webdev,javascript,vuejs,github
canonical_url: https://medium.com/daily-now/weekly-picks-81-development-posts-edc039038292
cover_image: https://cdn-images-1.medium.com/max/1024/1*Q-MqKbC_9FEv8MJeM-ucRQ.jpeg
---

- [15 Visual Studio Code Shortcuts You Should Know](https://app.dailynow.co/r/545d40e7e22cc43efacbb75f75a3af17) by [Brandon Burrus](https://medium.com/u/3146d6dce9f3)
- [Announcing Frontity 1.0!](https://app.dailynow.co/r/b995ab04566287646ba646afec6b9cfb)
- [GitHub acquires Pull Panda and makes its code review tools available for free](https://app.dailynow.co/r/abc51e231a0ea848415f5ca6db24f698)
- [Tools that will make a web developer’s life easier](https://app.dailynow.co/r/b3010245020d05768de366411445d27c) by [David Yu](https://medium.com/u/6560fd596636)
- [Debugging Javascript Like a Pro](https://app.dailynow.co/r/11833f04ac70d4abb8a1a50a0ceab9a4) by [Garrett Camp](https://medium.com/u/2f20a79e622a)
- [Can I Have 4 Minutes Of Your Time To Make You A Better Developer?](https://app.dailynow.co/r/d19d20e0ed495db7762ca82253f9cff8) by [Daan](https://medium.com/u/9a5b40458190)
- [VueJS is dead, long live VueJS!](https://app.dailynow.co/r/c7aad999e0bbc41590c1e63cbb44ee24)
- [Page Building using Micro-frontends](https://app.dailynow.co/r/1ddd2987a2fe2f54cec3a281904809fe) by [Felipe Guizar Diaz](https://medium.com/u/bd35c34ebe66)
- [RecordScreen.io — Record screen right from browser. No installation required.](https://app.dailynow.co/r/ce10c5e0e09ecb3ba3107f76d6ca5ec7)
- [Why Let’s Encrypt is a really, really, really bad idea…](https://app.dailynow.co/r/70a87fcaddfec2ca302ebd74a7df8321) by [John Horst, CISSP® — ISSAP®, NQV](https://medium.com/u/e60481bc5a60)

* * *

[_Thanks to Daily_](https://www.dailynow.co/) _developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab._

[![](https://cdn-images-1.medium.com/max/1024/1*7bwIhcH467BKX5Ni8XWpQg.jpeg)](https://www.dailynow.co/)
A Moment of gratitude for the community
Tags: meta, community
Published: 2019-06-26 12:50:15

Seeing this tweet warmed my heart so much, and it just reminded me how amazing this big community we have is.

{% tweet 1143358254027661312 %}

The replies to the tweet seemed to be in agreement. It's been a great ride so far. Let's keep up the great work. 😊