teleren/devto huggingface dataset:
An easy way to hide an email from bots with react.
Tags: react, lazyloading
Published: 2019-11-07 19:22:49

---
title: An easy way to hide an email from bots with react.
published: true
description: a trick to protect a contact email address from bots
tags: react, lazy loading
---

# An easy way to hide an email from bots with react.

I think that it's important to protect your email address from webcrawlers.

Some companies use contact us forms, some freelance developers put the email address in the form of "contact me at foobar @ gmail dot com" or something like that.

This is a fun way to retrieve an email address from a static react site by leveraging lazy loading. It's a pretty simple concept: lazy load a component containing the email address based on a trigger (in this case a button click).

The code:

```
import * as React from "react";

export interface IContactMeHrefProps {}

export const ContactMeHref: React.FC<IContactMeHrefProps> = props => {
  return (
    <div>
      <a href="mailto:foobary@gmail.com">
        foobar@gmail.com
      </a>
    </div>
  );
};

export default ContactMeHref;
```

```
import * as React from "react";
const ContactMeHref = React.lazy(() => import("../resume/Contact"));

export interface IContactMeGateProps {}

// Make user click a button to show email adderss via lazy loading
export const ContactMeGate: React.FC<IContactMeGateProps> = props => {
  const [showingEmail, setShowingEmail] = React.useState(false);

  let email = showingEmail ? (
    <ContactMeHref />
  ) : (
    <button
      onClick={() => setShowingEmail(true)}
    >
      Click for contact info
    </button>
  );
  return (
    <React.Suspense fallback={<div>loading...</div>}>
      <div>
        {email}
      </div>
    </React.Suspense>
  );
};

export default ContactMeGate;
```

You can find an example of it on my website at [hkievet.com](hkievet.com).
Dashboard for TYPO3 - The past, the present and the future
Tags: typo3, dashboard
Published: 2019-11-18 15:36:47

---
title: Dashboard for TYPO3 - The past, the present and the future
published: true
date: 2019-11-07 19:18:00 UTC
tags: TYPO3, Dashboard
canonical_url: https://www.richardhaeser.com/typo3-blog/dashboard-for-typo3
---

One and a half year ago, at TYPO3 Camp Venlo, I had a chat with Mathias Schreiber and Benjamin Kott about an important missing feature: a dashboard for TYPO3. Currently there is no user-friendly way to give users an overview of what is happening in the TYPO3 installation. We talked about a dashboard and that this is a feature a lot of users would love. I promised Mathias and Benjamin that after the SEO enhancements, I would deliver a dashboard in core. Now 1,5 year later, I am happy to tell you more about the dashboard for TYPO3.

Read more on https://www.richardhaeser.com/typo3-blog/dashboard-for-typo3
Delta-Eos (ASCII Detective Sci-fi game) - Starting to Play Like a Game
Tags: ruby, gamedev, showdev
Published: 2019-11-07 19:10:30

---
title: Delta-Eos (ASCII Detective Sci-fi game) - Starting to Play Like a Game
published: true
description: 
tags: ruby, gamedev, showdev
series: delta-eos
---


I am getting close to having all the core functionality in the game:

* skill system (working)
* experience (working)
* dialogue engine (almost complete)
* object interactions (nearly complete)
* inventory (just starting)

## How to run the game

Its open-source so if you want to try whatever I'm working on you can just download the repo from GitHub at [https://github.com/omenking/delta-eos](https://github.com/omenking/delta-eos)


To run the game:

```rb
bundle install
bundle exec ruby main.rb
```





## Experience and Skills

So for the experience, I decided to use square root. The level is dynamically calculated based on the collected experience.


```ruby
  def level
    (0.08 * Math.sqrt(self.exp)).floor
  end

  def next_exp
    val = (self.level+1) / 0.08
    (val*val).floor
  end

  def prev_exp
    val = (self.level) / 0.08
    (val*val).floor
  end
```

Every level you points. I keep track of points_used to determine how many points you have avaliable eg.

```ruby
(data.level - data.points_used)
```

I now have this cool overlay you can use to upgrade your skills when you have available points.

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

## Cool New Rooms

I don't plan too far ahead, I just make rooms interesting and determine their purpose in the story after the fact.

So I will think "I want a big gate that opens as you approach it"

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

## Dialogue Engine

I manage dialogue within JSON files. I've most or less define the structure for all possible outcomes.

![](https://thepracticaldev.s3.amazonaws.com/i/e3odhwczefa37fi5zd91.png)
What's new in Apache JMeter 5.2?
Tags: apache, jmeter, performancetesting, loadtesting
Published: 2019-11-07 18:06:56

---
title: What's new in Apache JMeter 5.2?
published: true
description: This blog post highlights the new features of Apache JMeter 5.2
tags: apache, jmeter, performance testing, load testing
---

# Introduction

Apache has released it's newer version of JMeter yesterday called JMeter 5.2. It comes with loads of features, bug fixes, enhancements and many more.

# What's new in Apache JMeter 5.2?

## New Protocol 

* Now JMeter will support bolt protocol to test the cypher queries for Neo4j. All you need is to add the Bolt Configuration and Bolt Request to your test plan. But bolt implementation comes with limitations.

## JMESPath Extractor

* Working with JSON response now its simpler. Thanks to JMESPath. JMeter now supports JMESPath in the Post Processor element group.

## JDBC Enhancements

* Now you can Pre-Init the JDBC Initializer by setting the flag. Also, you can specify how many rows you would like to fetch in the JDBC Request.

## StringtoFile()

* You can write text to the file using StringtoFile() function. It will come handy to write some log info the file. It supports append too.

## JAR file updates

Below JARs got updated.

``
Updated to httpclient/httpmime 4.5.10 (from 4.5.7)
Updated to dnsjava 2.1.9 (from 2.1.8)
Updated to jsoup 1.12.1 (from 1.11.3)
Updated to rsyntaxtextarea 3.0.4 (from 3.0.2)
Updated to caffeine 2.8.0 (from 2.6.2)
Updated to commons-codec 1.13 (from 1.11)
Updated to commons-lang3 3.9 (from 3.8.1)
Updated to commons-pool 2.7 (from 2.6)
Updated to commons-text 1.8 (from 1.6)
Updated to freemarker 2.3.29 (from 2.3.28)
Updated to httpcore/httpcore-nio 4.12 (from 4.11)
Updated to jodd 5.0.13 (from 5.0.6)
Updated to log4j 2.12.1 (from 2.11.1)
Updated to ph-commons 9.3.7 (from 9.2.1)
Updated to ph-css 6.2.0 (from 6.1.1)
Updated to Mozilla Rhino 1.7.11 (from 1.7.10)
Updated to Saxon-HE 9.9.1-5 (from 9.9.1-1)
Updated to slf4j 1.7.28 (from 1.7.25)
Updated to tika-core and tika-parsers 1.22 (from 1.21)
Updated jackson-annotations, jackson-core and jackson-databind to 2.9.10 (from 2.9.8)
``

## HTTP Samplers

* Lots of bug fixes in the HTTP samplers. In the HTTPS Test Script Recorder, the transactions/request numbers will be appended at the end.

Above are just the glimpse, you can head to this [page](http://jmeter.apache.org/changes.html) for more details.

I publish more often at my blog [QAInsights](https://qainsights.com).

You can find my YouTube video below.

{% youtube sN0a3XLTEoE %}
My Ask-Me-Anything Session with Career Karma
Tags: beginners, career
Published: 2019-11-07 18:04:07

When Timur Meyster of <a href="https://careerkarma.com">Career Karma</a> asked to host an Ask-Me-Anything with their squads, it was a most humbling moment; this meant the opportunity to encourage and embolden those who sought to transition into tech like I did. Our session was just amazing; I was awed by the determination I felt from the students, and they literally hailed from all career paths and walks of life. Spending time with Career Karma has made me so hopeful for the future of tech, for its diversity, inclusivity and strength.

The recording of the AMA is below. Enjoy! 😄

{% youtube UJvbjsnOoM0 %}

---

> Enjoy content similar to this post on <a href="https://arit.dev">**Arit, Developer!**</a> <a href="https://tinyletter.com/arit">
Subscribe to Arit's Newsletter</a> to receive quasi-monthly emails whenever she publishes a new story.
The 'not class' pattern
Tags: javascript
Published: 2019-11-07 17:39:20

I am coining the term 'not class' because until anyone tells me what this is I am going to refer to it incorrectly otherwise.

The premise is simple, Classes in JavaScript are just a little restrictive, when you go down this route you lose the flexibility of using objects, what if you wanted multiple inheritence or a proxyless new hook and so on. I believe strongly (as an ex class lover) that this pattern is a better way.

I also really like the word `new`, so here is the code.

``` js
const MemoryCtrl = {
  new(config) {
    // a new instance of this entire object will be created
    // I could change what new does, or even add some extends methods bellow
    const inst = Object.create(this)
    this.construct(inst, config);
    return inst;
  },
  construct(inst, config) {
    inst._memory = new WebAssembly.Memory(config);
    inst._mut = new Uint8Array(this._mut);
  },
  append(...bytes) {
    this._mut.findIndex((occupied) => !occupied);
    // Some stuff here
  },
  clear() {
    // Some stuff here
  },
  view() {
    console.log(this._mut);
  }
}

const mem = MemoryCtrl.new({
  initial: 255,
  max: 255
});
```

I could also turn this into a builder patter, or perhaps restrict the amount of methods returned for true privacy, there is a lot of flexibility here.

Anyway, let me know if you like it or hate it and wish I would just use classes and why.
JavaScript Random Function Explained
Tags: javascript, computerscience, tutorial
Published: 2019-11-07 17:38:40

The random function in JavaScript is used to generate randomly generated numbers while programming. Random generation can be used for generating random numbers, procedural levels for games, and much more. It can also be used to pick certain routes through code based on random selection rather than the result of user interaction.

The random function is within the 'Math' object in JavaScript. When calling the random function a number between 0 and 0.999 recurring will be returned. A new random number will be returned each time the method is called, or each time the page is reloaded. The below code snippet show setting the return value to a variable called 'ran', whose value will be a random number between 0 and 0.9 recurring.

```javascript
var ran = Math.random();
```

You can also change the numbers that are randomly generated. The below code shows multiplying the return result of the random function by the number 6. This will generate a decimal point number from 0 to 5.9 recurring. This is because the lowest number generated from the random function is 0 and the highest number is 0.9. 0 times 6 equals 0. 0.9 times by 6 is 5.9. This is how the below code generates numbers from 0 to 5.9.

```javascript
var ran = Math.random() * 6;
```

The minimum number generated can also be changed. The below algorithm shows how to generate a random number between 1 and 10. This is because we are multiplying the random function by 9, which returns a result between 0 and 9. Then we add the number 1 to the result. This results in a function between 1 and 10. The last line then rounds the number, to remove the decimal points. This algorithm can be quite difficult to understand so read it through and play around with the code yourself.

```javascript
var max = 10;
var min = 1;

var value = Math.random() * (max-min) + min;
value = Math.round(value);
```

The random function returns a number between 0 and 0.9 recurring. Using a surrounding algorithm, a number between any minimum and maximum number can be randomly generated. The above algorithm can be difficult to understand initially, so read it through and play around with it until you understand how it works.

This article was originally posted on my website: https://acroynon.com/
Build a simple blog with GraphQL, Node.js, SQLite and (VUE, Angular Or ReactJS)
Tags: graphql, node, javascript, sql
Published: 2019-11-07 17:27:08

##What gonna we do?

In this tutorial, we will show you how to create a simple and powerful **Blog** with (**VUE**, **Angular** and **React**), **GraphQL**, **Node.js** and **SQLite**. 

####We will divide this tutorial as follows:
- Part 1: Build a web api with GraphQL, Node.js and SQLite.
- Part 2: Build a Client in VUE.
- Part 3: Build a Client in Angular.
- Part 4: Build a Client in ReactJS.

##Prerequisites
- Node.js and JavaScript knowledge
- NPM Command
- knowledge of VUE,Angular or ReactJS

##What is GraphQL?

According to https://graphql.org/learn: *GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data*                          

##Well let's start the game

- Set up the project, run this on your favorite terminal:
 - <code>mkdir micro-blog</code>
 - <code>mkdir micro-blog-api</code>
 - <code>cd micro-blog-api</code>
 - <code>npm init -y </code>
- Install the following dependencies:
 - <code>npm install  graphql express --save</code>
 - <code>npm install  express-graphql --save</code>
 - <code>npm install  sqlite3  --save</code>
- Create an **index.js** in the root to configurate GraphQL.
- Paste this code on **index.js**:
{% gist https://gist.github.com/jgilbertcastro/43971315805763bf261efa26081da434.js %}
- Create a **graphql** folder and then create a **post** folder inside
-Create a post.js inside of **post** folder.
- Paste this code on post.js
{% gist https://gist.github.com/jgilbertcastro/36fab3f864f09f6d05ab002ab15d590b.js %}
- Update the package.json file to add de following script to start the api server
 - <code>"start": "node index.js"</code>
- Then on console or terminal run de server:
 - <code>npm run start</code>
- Then if all is correct open your browser and go to localhost:4000/graphql and you gonna see your graphql server run:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/txki3olyv9gf0i6ykoqa.PNG)
- If you want select all post run this
 {% gist https://gist.github.com/jgilbertcastro/9754260debab3b374cf4a889ad89f5d7.js %}
- If you want to create
{% gist https://gist.github.com/jgilbertcastro/da41e08a30d98894a4c451f71cf087e1.js %}
- If you want to update
{% gist https://gist.github.com/jgilbertcastro/586c9ea02b8ee511f713e08d6ee0d0b8.js %}
- If you want to delete
{% gist https://gist.github.com/jgilbertcastro/38200a9860398ff83f022d2a90f7e8e5.js %}

*This is all, if you want to clone this project go to github:* https://github.com/jgilbertcastro/micro-blog

In the **part 2** i'm gonna show you how to build a client for consume this API.
What Are the Most Important CS Principles to Learn as a New Dev from a Non-Traditional Background?
Tags: discuss, computerscience, codenewbie, webdev
Published: 2019-11-07 17:23:19

We all know that bootcamps don't spend a ton of time teaching computer science topics/principles and focus more on the skill of coding and *learning how to learn*. Those who are self-taught may or may not concentrate on it as well. I know that understanding CS principles is important to ones success as a SWE, so I want to pose this question:

**What do y'all think are the most important CS principles that someone with a non-traditional background should concentrate on before landing their first job?**

I want this to be a resource for people with non-traditional backgrounds to get an idea of what is most important to know / concentrate on before entering their first software engineering role; this way, we can try to make the gap in knowledge for a non-traditional professional the **tiniest** bit smaller. 

Let's do our best to try and help others improve instead of putting others down.

![Spongebob and Patrick giving each other a high-five](https://media.giphy.com/media/3oEjHV0z8S7WM4MwnK/giphy.gif)
It's time to localize your prices
Published: 2019-11-07 17:21:51

---
title: It's time to localize your prices
published: true
description: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2v5okl3i877zxkuny81j.jpg
tags: 
---

**Discrimination I'm not native English speaker so please do not be annoyed if you see mistakes in my article.**

I came from a third world country, where living cost is cheap. but Learning tech from paid resources was/is not that easy. Buying a book that cost 30$ for me would be 1500EGP, which is more than the minimum wage in my home country.

I have to admit I downloaded many pirated content because I could not afford it when I started working in tech and many people are still doing that.

It's more challenging when you start your own startup in tech. infrastructure cost would make your business run out of cash after a month probably if you build it on AWS or Azure probably. then what is the alternative. Let's do it old school then, rent a VPS or server and you would need to maintain every single service like DB, logging, storage, etc. but what about tracking, mobile app crashes and other services which you could not build or maintain yourself.

I'm not sure if this is realistic but using popular tech tools is a luxury in some counties and I believe they should probably try to localize their prices to help people to focus on building great apps not waste time to replicate the needed tools.
Setting up Intellij to close previously running build
Tags: help, java
Published: 2019-11-07 16:28:30

Hello there, I've been struggling with this problem for 2 days now and I am completely lost.

So I've upgraded to most recent IntelliJ Idea and it turns out that they've changed the default "Build and Run" option to be Gradle (under `Preferences > Build, Execution, Deployment > Build Tools > Gradle`. Which is totally fine by me, if not that annoying feature where it now starts up as many instances of the program as you click run.

It used to be like this:

1. I punch in a few lines of code
2. Ctrl + R to build and run (under Mac, Windows has another shortcut)
3. Old instance of my program terminates
4. New instance of my program launches
5. Go to step 1 and repeat ad infinitum

And now it's like this
1. Ctrl + R to build and run
2. Gradle builds the program
3. Program starts up, but the build keeps spinning

Build only stops when I close the program manually. If I press Ctrl + R again, a new build launches with a new instance of the program and I find myself running 15 instances of slightly different programs more times than not.

So ideally I would like the build to be marked as complete when the actual build finishes and not when I close program. Also I would like to run only one instance of the program at a time and if I build a new one, I want old one to close down.

By the way, Parallel run is not checked under run configurations.

## Another Problem

Now I could just change "Build and Run" option to be IntelliJ and be happy with the old functionality that I liked before. The problem is - when I do this it suddenly can't find any of my resources. The resource folder is marked as resource root. I can also find my resources moved to `build/resources/main/`. But `getClass().getResource("/asd.fxml")` always returns null.

I also cannot change anything in `File > Project Structure` as applying any changes starts throwing all kinds of errors, and the structure is managed through Gradle anyway.

I'll buy a pizza for anyone who helps me with either of the problems.
Defining Drupal - What is the difference between all these different Drupal versions?
Tags: drupal, webdev
Published: 2019-11-07 17:09:11

![confused puppies](http://giphygifs.s3.amazonaws.com/media/7K3p2z8Hh9QOI/giphy.gif)

There are three different versions of Drupal that you could download and install today: Drupal 6, Drupal 7 and Drupal 8. On top of that, maybe you’ve heard about this Drupal 9 that’s coming out. Which one should you choose? What’s the difference?

First off, Drupal 6, while popular, is no longer being supported by the Drupal community. I would not build a site in Drupal 6, especially since there’s no benefit these days to doing so. 

Drupal 7 is the most popular version of Drupal right now and will be supported until November of 2021. Drupal 7 has a lot of things going for it: extensive documentation, lots of public modules, and plenty of support from those who have websites on it. However, it is super difficult to migrate a Drupal 7 site to Drupal 8, so upgrades after November 2021 will be much harder and the site will likely have security issues. In 2019, I don’t recommend building a Drupal 7 site, especially since it will teach you outdated ways of using Drupal and it would be better to start with Drupal 8.

Drupal 8 has less documentation and public modules, but it is currently supported. In addition, when Drupal 9 launches in June 2020, the migration will be as simple as a core update. This means creating a Drupal 8 site may be more difficult up front, but in the long run will be much easier to maintain. As we go forward, I’m going to focus on creating a Drupal 8 site since I believe that is the best bet for building a Drupal site in 2019. If you want to build a Drupal 7 site, then good news! There’s lots of options on the web for learning how to do that. I’d start here: https://www.drupal.org/docs/7/install
I wrote a Multiplayer Text Adventure Engine using Node.js
Tags: showdev, node, javascript, gamedev
Published: 2019-11-07 16:55:58

---
title: I wrote a Multiplayer Text Adventure Engine using Node.js
published: true
description: And here is how I did it, in 4 different articles detailing my experience
tags: showdev, nodejs, javascript, gamedev
---

So, last year I wrote a Text Adventure game engine using Node.js, capable of taking several players on the same adventure through a text-based client and some basic chat features.

I had a lot of fun working on it and after the fact, I wrote a series of articles describing how I and what I did to get it working.

If you're interested, the full series just got published in Smashing Magazine.

* Part #1, [the architecture](https://www.smashingmagazine.com/2018/12/multiplayer-text-adventure-engine-node-js/)
* Part #2, [creating the server](https://www.smashingmagazine.com/2019/10/multiplayer-text-adventure-engine-node-js-part-2/)
* Part #3, [writing the terminal client](https://www.smashingmagazine.com/2019/10/multiplayer-text-adventure-engine-node-js-part-3/)
* Part #4, [adding chat to the mix](https://www.smashingmagazine.com/2019/11/multiplayer-text-adventure-engine-node-js-part-4/)

That's it,