teleren/devto huggingface dataset:
GitBook: my Dev Moleskine.
Tags: git, github, productivity, snippets
Published: 2019-07-10 23:31:13

---
title: GitBook: my Dev Moleskine.
published: true
description: Alternative gitbook use ideas.
tags: Git, GitHub, productivity, snippets
---

Today I want to show you a very useful tool to write documentation and organize code annotations or links: [GitBook] (https://www.gitbook.com/).

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

As you can imagine, GitBook is a Git's *spin-off* with a pretty UX and based on similar concepts of Git. It has a free layer and is possible to create an account using the same Git credentials. 

GitBook tool is oriented to be used for dev teams to write and delivery app docs through the so-called spaces, a set of pages that automatically generate a TOC index and include a search field. Premium version allows teamwork, integration with Slack and other powerful features.

I use GitBook as my personal dev [Moleskine] (https://en.wikipedia.org/wiki/Moleskine) notebook, writing any code snippets, annotation, etc, in a space named, guess how, CODE. Also, I use it to store article's links that I found in coffee breaks and I'll read later or I want to store it, course mostly DEV articles.

![](https://thepracticaldev.s3.amazonaws.com/i/37wzx6ev7cnak6mr561q.gif)

What other things do you use it for?
What would an ideal onboarding situation look like?
Tags: discuss, onboarding, career, jobs
Published: 2019-07-10 22:32:00

---
title: What would an ideal onboarding situation look like?
published: true
description: In a perfect world, how should a tech company onboard a new employee?
tags: dev discuss, onboarding, career, jobs
---
>It always fascinates me how much focus the recruitment process receives, while the actual onboarding process that employees go through sometimes ends up resembling a trial by fire event.

This discussion can be agnostic of experience level, remote/on-site, and specific role. (Or, you can segment it out by all these various aspects.)

Or here's some other prompts:
- What's one area most companies fall short for onboarding new employees?
- What's an experience that exceeded your expectations and made you feel part of the team from the beginning?
- Do you know of any tools that have improved onboarding at your company?
Steal From the Players Who Beat You
Tags: productivity, career
Published: 2019-07-10 20:45:05

---
title: Steal From the Players Who Beat You
published: true
description: Don't fixating on your effort. Focus on what others are do right and how to make their strategies your own.
tags: #productivity #career
---

My kids are deep into the card game [Sushi Go](https://amzn.to/2Lcn8LL).

The first week of gameplay, Rock lost every game.
He was fed up on Sunday.

> I try harder than all of you and I'm always last!
> This game isn't fair.

That resonates with me.
Trying hard, losing, and watching others succeed.
I'm sure it resonates with you too.

It feels fair that if you try harder, you get further.
But direction is more important than effort.
Effort in the wrong direction takes you further from a goal.

So I tell him:

Your strategy sucks.
It doesn't matter how hard you try.
Stockpiling Maki only gets you a 6 points per round.
You're gonna lose.
Pull your head out of your butt and try something different.
Steal from the players who beat you.

He did.
Now he's winning.
Guess I need to steal from him now. 

🍣 @chantastic

Question:
Where do you put effort in the wrong direction?
Where does ego prevent you from identifying a better strategy?
Custom react hooks vs services
Tags: discuss, react, javascript
Published: 2019-07-10 19:47:06

I'm having a tough time explaining the difference between a custom react hook and a service. 

It's easy to see the utility of the built in ones, but what about custom hooks?

with a regular service, I can :

- import it to any component, provide it's functions and or state.
- call or make use of react hooks.

***When would you write a custom hook and when would you opt for a service?***

***What can you do with a custom hook that you can't do with a service?***
Today I Learned - maxlength
Tags: html, vue
Published: 2019-07-10 19:36:53

---
title: Today I Learned - maxlength
published: true
description: Today I Learned about the maxlength property on input elements.
tags: HTML, Vue
---
# TIL - maxlength

_10.07.2019_

I was building a vue component, which should limit the amount of characters (alphabetical and digits) a user could enter. To implement this behaviour I did something like the following 

```vue
<template>
	<input type="text" @keydown="handleKeyDown" v-model="value"/>
</template>
<script>
export default {
	name: 'BaseInput',
	data() {
		return {
			valuie: 'Lorem ipsum'
		}
	},
	methods: {
		handleKeyDown(e) {
			if(this.value.length >= 50 && e.keyCode >= 48 && e.keyCode <= 90) {
				e.preventDefault();
				return;
			}
		}
	}
}
</script>
```

What this should do is enable all keys Aa-Zz and 0-9 as long as the character limit, in this case 50 has not been reached. System keys like DEL, ENTER, TAB… should not be affected by this and always work. 

At the first look this may seem to work fine but as always with user input there are a lot of edge cases that are unknown at the time of implementation and could lead to bugs.

Thanks to an a lot more experienced colleague I've learned about **maxlength**. This is a browser implementation of limiting an input to a character count, which works like this

```html
<input type="text" maxlength="50" />
```

Same effect as above but with way less code.

## Caveats

1. Setting the value programmatically

It's still possible to programmatically set the value of a limited field e.g.

```html
<input type="text" id="testid" maxlength="10" />

<script>
	const el = document.getElementById('testid');
	el.value = 'Text with more than ten characters';
    // This will work just fine.
</script>
```



2. maxlength is (mostly) not a proper validator

If you're working with an API where the length of inputs it important, maxlength is no replacement for proper validation as data could still be manipulated for AJAX or similar.



## Sources

- https://developer.mozilla.org/de/docs/Web/HTML/Element/Input

- https://html.com/attributes/input-maxlength/
Getting undefined error for string variable
Tags: nextjs
Published: 2019-07-10 18:57:43

We are creating a simple search application with ReactJS and NextJS.  We are searching Elasticsearch indexes.  It's been going well, but now I need to make some results look better.  I'm getting a field back when doing a search, which is a JSON object full of \n\n characters (after using JSON.stringify on the object) that I need to convert to carriage returns.

When I just use the value of this field in a browser, it's one long string.  When I attempt to do:
  let fc = JSON.stringify(fieldname);
  newfc = fc.replace("\n", ""); // for example - I really need to use br

I get "fc undefined".  But fc displays properly until I try to use replace or split, or any method on it.  I have no errors in the console.

Why am I getting undefined on this string?  Is there another way I should be converting \n to carriage returns?
Terraform: turn a centos vm into a linux router
Published: 2019-07-10 18:51:22

---
title: Terraform: turn a centos vm into a linux router
published: true
description: 
tags: 
---

while building your VM, enable IP forwarding and also pass this remote-exec

```
  provisioner "remote-exec" {
    inline = [
      "echo \"net.ipv4.ip_forward=1\" | sudo tee /etc/sysctl.d/ip_forward.conf",
      "sudo /usr/sbin/sysctl --system",
      "sudo systemctl start firewalld",
      "sudo systemctl enable firewalld",
      "sudo firewall-cmd --permanent --direct --passthrough ipv4 -I FORWARD -i eth0 -j ACCEPT",
      "sudo firewall-cmd --permanent --direct --passthrough ipv4 -t nat -I POSTROUTING -o eth0 -j MASQUERADE -s ${var.network["subnet"]}",
      "sudo firewall-cmd --reload",
    ]
```
xtrlock
Tags: linux, devrel
Published: 2019-07-10 18:45:19

Part of the devrel life is the booth. When I'm boothing, I like to have my laptop there and open to a cool project or demo. If I'm lucky, there will be a TV or monitor for me to connect to as well.

Folks will come up and talk to me and ask me questions. That's great and literally what I am there for. But I get squeamish about being a step or two away from my unlocked computer. I also don't want to close or lock my computer. A lock screen looks weird in a booth. If my laptop is closed it is annoying to tell someone 'let me show you!' then we both wait around for an agonizing few seconds while I reconnect to wifi/ssh/whatever.

Enter `xtrlock(1)`. This utility has existed since at least 1993 and is part of a wonderful ecosystem of old Unix/X11 tools that have been largely forgotten. 

From the man page: `Lock X display until password supplied, leaving windows visible`. This locks the screen for input, but leaves whatever I had open visible. That means slides, terminals, or demos are still being displayed and I have peace of mind that I'm not being compromised.

Pratically, `xtrlock` takes effect immediately and has no option for a delay. So what I actually do is type `sleep 5; xtrlock` and use the five second sleep to hide/minimize whatever terminal that command was written in.

I show various things, but one thing I'm trying to do is have terminal based demo scripts that can be run without my interaction. Unlike videos, they are running against real infrastructure, and I can `^C` the script and dig in deeper to the demo with an attendee if I need to. That repo is [here](https://github.com/nibalizer/booth-demos)
How to resolve import for the .graphql file with typescript and webpack
Tags: graphql, typescript, webpack, node
Published: 2019-07-10 18:26:18

Hi, I’m Mohsen ZareZardeyni, and I’m a software engineer at [Sigma Telecom LLC](https://sigmasoftwares.com/).

At Sigma, for developing our back office application, we decided to use GraphQL, Typescript and Apollo server. We choose Schema first approach and stored our schema in separate `.graphql` files. In order to import our schema within our Typescript code, we ended up using Webpack as our transpiler.

As I was looking for a way to do so, I didn’t find any good tutorial on this matter so I’m providing this tutorial for future researchers!🤠

First, you need to add the following configuration to your `tsconfig.json`. This will tell Typescript to use the `src/@types` folder in addition to `node_modules/@types` in order to identify your types.

{% gist https://gist.github.com/mohsen89z/68caada27a0ff74099cd2863fdac136d %}

Then you need to introduce `.graphql` files to Typescript. In order to do this, you need to create a `graphql.d.ts` in your `src/@types` folder. The following code will tell typescript every time it sees an imported file with the `.graphql` extension, it will provide a `GraphQL DocumentNode`, which is the type you need to provide for your GraphQL Schema.

{% gist https://gist.github.com/mohsen89z/1bfd1af5ffcd8bf401aad88e0d4165fc %}

In our case, we used apollo-server from [Apollo Foundation](https://dev.to/t/apollo), but any other GraphQL server library uses the same pattern. With previous steps, the following code will let you import your `.graphql` files without any typing issue.

{% gist https://gist.github.com/mohsen89z/88c6eef36b59926971f69cee20c1543d %}

Finally, the last step is to tell webpack how to treat `.graphql` imports. The following code will tell `webpack` every time it sees a `.graphql` file, it should use `graphql-tag/loader` in order to load the content.

{% gist https://gist.github.com/mohsen89z/a86df8de7523ed52b023bbb9520fb1db %}

Hope this helps you:)

Also, you can find me on [linkedin](https://www.linkedin.com/in/mohsen89z/) and [twitter](https://twitter.com/MohsenZZardeyni).
Angular 9|8 NgSwitch Directive Tutorial with Examples
Tags: angular, angular98, ngswitch, ngswitchdirective
Published: 2020-01-31 21:54:40

---
title: Angular 9|8 NgSwitch Directive Tutorial with Examples
published: true
tags: Angular ,Angular 9|8, NgSwitch, NgSwitch Directive 
canonical_url: https://www.positronx.io/angular-8-ngswitch-directive-tutorial-with-examples/
---

The post [Angular 8 NgSwitch Directive Tutorial with Examples](https://www.positronx.io/angular-8-ngswitch-directive-tutorial-with-examples/) appeared first on [positronX.io](https://www.positronx.io).

In this Angular 8 tutorial, we’ll learn to work with NgSwitch directive. We’ll understand the `ngSwitch` structural directive with real-world examples. NgSwitch is a built-in Angular 8 template directive, and it works the same way as the JavaScript’s switch statement does. This directive helps in showing or hiding the templates based on the conditional statement.

To make the **NgSwitch** work declare the NgSwitch structural directive on the main HTML element. Inside the NgSwitch container define the **\*ngSwitchCase** statement, the `*ngSwitchCase` statement refers to one of the possibility from the multiple possibilities tree. If one statement doesn’t match with the expression, it goes to another ngSwitchCase statement, and if it doesn’t match with the expression, then it shows the result from the element where a \*ngSwitchDefault statement is defined.


[Click here to read more](https://www.positronx.io/angular-8-ngswitch-directive-tutorial-with-examples/)
Physical and Mental Conditioning for Developers
Tags: physical, mental, conditioning, training
Published: 2019-07-10 17:29:32

We tend to focus too much on developing the skills for our jobs. We neglect a very important component of our performance: ourselves!

Physical and mental health both determine the ceiling for your job performance. While you might be adept at writing device driver software, your ability to execute on that particular skill hinges on whether your mind and body will _let_ you. If you're mentally and physically exhausted, you are far more likely to make mistakes or take longer to do a particular task.

Toward that end, you should include both physical and mental training in your daily life. Neither is easy, but both are necessary. Diet is also extremely important, but it's outside the scope of this post.

There is a lot of great reading available on this subject. I'll list a handful of bullet points for you to look into further.

> Note: I am not a doctor, nor a psychologist. The following is based on my own experiences and research. Consult a physician before attempting any drastic changes in exercise.

## Physical Training

### Goals

* Maintain flexibility
* Maintain good posture
* Develop pushing strength
* Develop pulling strength
* Maintain moving stamina

### Points to Iterate On

The following are specific ways to work on the above goals.

* **Strength training:** Practice lifting and pulling heavy things. Your body counts as a heavy thing.
* **Endurance training:** Practice moving around quickly enough to get your heart rate up for longer periods of time than you're used to.
* **Flexibility training:** Practice stretching whenever possible and practical. Yoga is good for this. Acroyoga is better.
* **Regular movement:** Practice getting up and moving around for at least five minutes every hour.

## Mental Training

### Goals

* Choose and maintain a positive attitude
* Manage expectations effectively
* Use positive self-talk
* Maintain concentration
* Set realistic goals
* Manage anxiety effectively
* Manage emotions effectively

### Points to Iterate On

The following are areas to iterate on that will assist in developing the above skills.

* **Goal-setting:** Practice setting goals of varying complexity and time constraints, recording your results, and then altering future goal criteria based on the outcome.
* **Self-talk:** Whenever you catch yourself thinking negatively about yourself, practice inverting that thought into a positive version.
* **Breathing:** Practice being both aware of your breathing and controlling it.
* **Visualization:** Practice imagining a positive future state of what you're working on.
* **Routines:** Practice setting and maintaining routines, particularly in the morning and evening.
* **Mindfulness:** Whenever possible, practice mindful awareness of yourself and your surroundings. Avoid multitasking.
Try-Catch vs if-else
Tags: javascript, webdev
Published: 2019-07-10 17:22:24

Hello everyone. So I was thinking critically about the Try-Catch-finally blocks in Javascript and when logically comparing it to the if-else statements, I'm thinking the try-catch block is just a newer and fancier way to do if-else in certain situations.

Who wants to change my mind?

😅
Music + code = a chance to win $5k? We're hosting an online music-themed hackathon! 
Tags: music, replit, showdev
Published: 2019-07-10 17:16:52

---
title: Music + code = a chance to win $5k? We're hosting an online music-themed hackathon! 
published: true
description: We're giving away $5k to the best program, website, app, or project that features music. 
tags: music, replit, showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/b4n3qwwtnu9e3lgbq31i.png
---

## **[🎵 Repl.it Online Music Hackathon](https://repl.it/talk/challenge)**

This one is a little different from hackathons we've done in the past:

* We're open to any kind of submission, so long as it's built on Repl.it and incorporates music in some way. 
* We have one stellar judge, Tom Lehman, the CEO of Genius. 
* Most exciting of all: our grand prize is $5,000 (with $2,500 and $1,00 second & third prizes!) 

You better get building! We already have some great submissions:
* [Turn any song into a rhythm game](https://repl.it/talk/challenge/BeatKeeper-Make-a-rhythm-game-out-of-literally-any-song/16433)
* 👇 [An IDE that plays soothing music while you code](https://repl.it/talk/challenge/Environ-The-Bridge-Between-Music-and-Code/16381)

{% replit @vedprad1/Environ %}
A changelog generator for gitmoji convention
Tags: javascript, github, gitmoji
Published: 2019-07-10 17:06:32

## gitmoji

It is a commit message convention created by [Carlos Cuesta](https://twitter.com/crloscuesta) 😎. It describes the purpose of this convention on gitmoji's [repository](https://github.com/carloscuesta/gitmoji/) on GitHub:

> Gitmoji is an initiative to standardize and explain the use of emojis on GitHub commit messages.

> Using emojis on commit messages provides an easy way of identifying the purpose or intention of a commit with only looking at the emojis used. As there are a lot of different emojis I found the need of creating a guide that can help to use emojis easier.

## gitmoji-changelog

With [Benjamin Petetot](https://twitter.com/bpetetot) and [Fabien Juif](https://twitter.com/fabienjuif) we worked on a command line tool that generates changelog files for javascript projects following gitmoji convention. We simply named it `gitmoji-changelog` 😀.

![gitmoji-changelog usage](https://media.giphy.com/media/YnGvythaZFO8D3OR1Z/giphy.gif)

Here is an example of [generated changelog](https://github.com/bpetetot/conference-hall/blob/master/CHANGELOG.md) using `gitmoji-changelog`


You can find out more about usage on our [repository](https://github.com/frinyvonnick/gitmoji-changelog) 👌!

## 2.0 is in alpha 🎉

`gitmoji-changelog` is still evolving. We are currently working on a version 2.0.0 💪 It is already available in alpha 🎉

You can find out new features in our [changelog](https://github.com/frinyvonnick/gitmoji-changelog/blob/master/CHANGELOG.md#200-alpha1-2019-06-12) 😉!

To test it you can install the alpha version:

```sh
npm install -g gitmoji-changelog@alpha
```

Feedback or ideas are appreciated 🙏 Please tweet me if you have questions [@YvonnickFrin](https://twitter.com/YvonnickFrin)!

Want to support ? Don't forget to leave a ⭐️
Do you like being an IC (individual contributor) or a manager? 
Tags: discuss, career
Published: 2019-07-10 16:58:56

---
title: Do you like being an IC (individual contributor) or a manager? 
published: true
tags: discuss, career, productivity
---

For many companies like Microsoft, etc, there usually is two career tracks, IC track and manager track. 

Primarily a lot of engineers do not like manage people, like to work on code, but they need a career path to grow also. While manager's duties include coaching and grow other people, and at high enough sometimes managers no longer code himself. 

What is your preference and why?
Changelog(newdev.struggles)
Tags: beginners
Published: 2019-07-10 16:33:26

Making changes is difficult even if you are the type of person who embraces change. But, making a career change in you 30s and up while maintaining a family can seem impossible. Also, the software world can be very overwhelming to new devs. Backend, front-end, php, node.js, Ruby, CI, git, frameworks, server-side, client-side, deploy, codecamps,and the list goes on. So deciding the best direction for you can be a daunting and discouraging task. And I would be a liar I'd I said I haven't gotten discouraged myself.

The biggest mistake I feel I have done, learning the languages and not developing a portfolio. However, I have had many other pitfalls as well. Chasing trends, following tutorials instead of learning the basics, hopping languages before fully understanding the current language, to name a few.

Chasing trends - one thing I have noticed about aspiring to be a fulltime dev is there are new trends everyday. It is hard to weigh through the things you should learn and the thing you can learn. If you chase these trends you can end up in an endless loop of learning and never actually understanding what you are coding.

Tutorials - tutorials can be a great tool but they can also be a crutch. I can't count how many times I have followed a tutorial that was much too advanced for my skill level. So in the end you can replicate the code but not be able to utilise it on your own. I have learned that the basics are more important than trying to do something "cool and fun". Keep in mind your skill level when opening a tutorial, as your skills increase these tutorial will become reference guides.

Hopping languages - stating with html, now I need css, now I need functionality JavaScript, wait darn I need a data base SQL, now I need to use the data php... and the rabbit hole goes further. It is easy to go down the rabbit hole and never really get anywhere but frustration. Moving from language to language without understanding the current language your on is easy to do when your not experienced.

And I'll end on this point advice is great, but everyone has their own stack and may tell you it's the best. That can send you down another rabbit hole. Be cautious of these rabbit holes they can detour, frustrate, and discourage you.