teleren/devto huggingface dataset:
[PT-BR] Desbravando o VIM
Tags: vim, git, ptbr, diary
Published: 2019-09-08 04:20:32

E cá estamos, feito pinto no lixo, descobrindo as coisas e perdendo medo das novas tecnologias. Havia pegado um curso na Udemy do Willian Justen, feito 15% dele (instalado o git) e abandonado. Porém, após  leitura de um artigo dele próprio sobre ter o blog próprio e ler sobre blogs estáticos, precisei aprender a mexer no Git. E no curso o Willian usa o VIM.
Uma das coisas que tem deixado alguns piscineiros (ou nadadores da 42) de cabelos em pé é o fato de que teremos somente o VIM e o EMACS disponível para dias de prova. As pessoas torcem o nariz para os dois e perguntam: "mas porquê não usar o bloco de notas?". Nota: na 42 as máquinas são todas iMacs. E Bloco de notas parece coisa do Windows: eu pelo menos, nunca usei nada assim no macOS. 
Mas pela necessidade de se usar Git para poder usar o Gatsby como plataforma de blog na Netlify, e ela pede que se faça via Git... lá fui eu voltar para o curso esquecido de Git e Github para iniciantes.
Com Github já andei brincando na marra, e consegui inclusive hospedar um minisite em HTML AMP nele. Mas ainda não manjava .git .
Com o curso, estou enfim entendendo que o VIM é um editor dentro do terminal, e não um novo terminal. Eu estava me confundindo a esse ponto. E no curso estou vendo a facilidade de usar o VIM: eu consigo alternar entre os comandos de terminal para criar arquivos e os comandos de VIM para editar esses arquivos. Não saio da janela do terminal. Isso vicia.
Using a background scheduler - Building SaaS #4
Tags: python, django, saas
Published: 2019-09-08 03:45:44

{% youtube BZBS8Lukqw0 %}

In this episode, we added Celery beat to College Conductor.  Celery beat is the scheduler for the Celery worker system.

I walked through how to test new infrastructure, confirmed that Celery beat worked, then showed how to add it to Ansible, the infrastructure deployment tool.

Show notes for this stream are at [Episode 4 Show Notes](https://www.mattlayman.com/building-saas/background-scheduler/).

To learn more about the stream, please check out [Building SaaS with Python and Django](https://www.mattlayman.com/building-saas/).
Building our website's CMS
Published: 2019-09-08 03:42:45

Our micronation, https://promatia.com (previously https://arkovia.com) is building a digital government, and our website will use a content editor in the myPro app (the citizen portal)

The content editor will be restricted to government staff.

We are using:
- NodeJS
- VueJS
- ContentEditables
- MongoDB
- GraphQL

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7vdwto488nopq0aao73l.png)
Learning Node/Express on the fly
Tags: codenewbie, todayilearned, javascript, webdev
Published: 2019-09-08 02:47:49

I have managed to max out my Youtube API query limit (10,000 units) on my own developing my website. There are a few workarounds to this conundrum and I decided that instead of setting up multiple API keys and swapping them out that I should bite the bullet and build the back-end. Luckily, it will not be used regularly until next week so I have a little bit of time (and a back-up solution).

Initially, I wanted to build the back-end in a new language instead of what I already know (Rails), probably Java/Spring Boot or Python/Django. However, since I need it up and running quickly I thought it would make sense to take a language I already know, Javascript, and learn some new skills, NodeJS and Express. I know I'm using PostgreSQL and wanted something close to what I already know for a smooth transition. I went with Sequelize due to it's similarities to Active Record.


robinwieruch.de has been my best resource by far.

There are free tutorials in the blog section including setting up NodeJS with Babel, Express, Sequelize, and making the REST API with it.

It has an abundance of information, I recommend checking it out!
Visual Studio Code on a remote server
Tags: remote, code, vscode, ssh
Published: 2019-09-08 02:14:35

These days, it is easy to set up a web server where you can program remotely using virtually any client device.

It is not difficult to do this using secure shell alone, but here are a few methods that can enhance this experience using the [Visual Studio Code](https://code.visualstudio.com) editor.

## Definitions

- CL = Command Line
- FS = File System

## Pre-Requisites

This tutorial assumes that you are already famaliar with using [secure shell (SSH)](https://en.wikipedia.org/wiki/Secure_Shell).

You _should_ at least be famaliar with logging into a remote server using [key-based authentication](https://www.ssh.com/ssh/key/).

## Method 1 : code-server

[Code-server](https://github.com/cdr/code-server) creates a web server with an instance of a web version of Visual Studio Code that you can access via a browser.

0. Install code-server on your server.
1. Access server's CL via SSH.
2. On server, run  `code-server <path to workspace or directory>`.
3. You can access server's FS and CL through password-secured web interface at <serveraddress>:8443

## Method 2 : sshcode

[Sshcode](https://github.com/cdr/sshcode) works similarly to code-server (it's actually built on top of it) but uses a client program to set up the web server. Additionally, if you're using chrome, it will open a customized window with Visual Studio Code keybinding in tact.

0. Install chrome and sshcode on client
1. On client, run `sshcode <user>@<serveraddress>`
2. Access server's FS and CL through chrome window.

## Method 3 : Visual Studio Code

0. Install [Visual Studio Code](https://code.visualstudio.com/) on client
1. Install [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) extension
2. From extenison menu, connect <user>@<serveraddress>
3. Access server's FS and CL through Visual Studio Code
4. From extension menu, tunnel ports from server to client.

## Next Steps

To supplement the above methods, you may want to learn about:
- mounting file remote folders locally and using any editor you want using [sshfs](https://github.com/libfuse/sshfs)
- accessing other resources on your remote maching via [tunneling](https://www.ssh.com/ssh/tunneling/example).
- mitigating unstable remote [mobile] connections with [mosh](https://mosh.org/).
- customizations and pitfalls of above programs by reading their documetion.
Setting up PostgreSQL on Windows
Tags: database, sql
Published: 2019-09-08 02:03:46

Moving from OSx or Ubuntu to Windows can be frustrating at first - no more brew, no more apt install. These are the steps to get PostgreSQL running on your windows machine fast.

- Download the installer from the link provided in this page https://www.postgresql.org/download/windows/
- Execute the installer and let it install it to your machine. You may uncheck Stack Builder from the component list if you don't need it.
- Once installed, open pgAdmin4 and congratulations you have a working PostgreSQL database!
What is the JAMStack missing to compete with Wordpress?
Tags: discuss, jamstack, wordpress
Published: 2019-09-08 01:32:09

---
title: What is the JAMStack missing to compete with Wordpress?
published: true
description: Wordpress is king in the freelancing world. What can JAMStack do to compete or takeover?
tags: discuss, JAMStack, Wordpress
---

The JAMStack is on the rise and I love the development environment it provides, but in the freelance world it is not the preferred option. Right now Wordpress is king. What does the JAMStack need to compete?
TIL: Focus events include a relatedTarget property
Tags: webdev, javascript
Published: 2019-09-18 20:06:20

---
title: TIL: Focus events include a relatedTarget property
published: true
tags: webdev, javascript
canonical_url: https://www.stefanjudis.com/today-i-learned/focus-events-include-a-relatedtarget-property/
---

Today I came across [an MDN page](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget) describing the `relatedTarget` property of focus events. `blur`, `focus`, `focusin`, and `focusout` count as focus events.

It turns out that if you attach a `focus` event listener the fired event will include not only a `target` element but also a `relatedTarget` element.

```javascript
document.querySelector('button')
  .addEventlistener('focus', (event) => {
    console.log(event.target);        
    // 👆 the element that received focus
    console.log(event.relatedTarget); 
    // 👆 the element that lost focus (if any)
  });
```

The rules for `target` and `relatedTarget` in focus events are as follows:


| Event name | target                  | relatedTarget           |
| ---------- | ----------------------- | ----------------------- |
| `focus`    | element receiving focus | element loosing focus   |
| `blur`     | element loosing focus   | element receiving focus |
| `focusin`  | element receiving focus | element loosing focus   |
| `focusout` | element losing focus    | element receiving focus |


Using `relatedTarget`, you can figure out what the previously focused element was when a user is "tabbing" around in your interface. 

`relatedTarget` can also be `null` when there was no previous/next target. This happens, for example, when a button had focus, and the user clicks something that is not focusable.

That's complete news to me! 😲

If you want to play around and see the property in action, I built [a quick prototype on CodePen](https://codepen.io/stefanjudis/pen/YzKYbPO).
Play games on your terminal using emacs
Tags: todayilearned, emacs
Published: 2019-09-08 08:55:52

---
title: Play games on your terminal using emacs
published: true
tags: todayilearned, emacs
canonical_url: https://wangonya.com/blog/play-games-on-terminal-emacs/
---

If you've never opened [emacs](https://www.gnu.org/software/emacs/) before, here's a great chance to do it for the first time (like me 😅). Turns out, emacs comes with some pretty nice old school [games](https://www.emacswiki.org/emacs/CategoryGames) built in.

<small>Note: I'm assuming you're on a *NIX system</small>

To play, start emacs on the terminal:

```
$ emacs
```

I thought I'd have to install emacs on my Mac but have it already there on my Linux (Manjaro i3 18.0.4) but to my surprise, it was already there on my Mac and I had to install in on Linux. So if you run the command and see something like `Unknow command emacs`, you'll need to install it first.

If the command runs successfully, you should see something similar to the screenshot below.

[![emacs](https://wangonya.com/static/73f4b9c7236e40fe6fa36d6b3f1b84ec/b9e4f/emacs.png "emacs")](/static/73f4b9c7236e40fe6fa36d6b3f1b84ec/9288f/emacs.png)<figcaption>emacs</figcaption>

Linux decided to install a GUI one 🤷🏽‍♂️

[![emacs GUI](https://wangonya.com/static/3614c7828d780ef6fd599ce6306f86a2/b9e4f/emacs-gtk.png "emacs GUI")](/static/3614c7828d780ef6fd599ce6306f86a2/8d69c/emacs-gtk.png)<figcaption>emacs GUI</figcaption>

Press the **`escape`** then **`x`** keys, and `M-x` should appear at the bottom of the screen.

Next, type in the name of the game you want to play. You can pick from [this list](https://www.emacswiki.org/emacs/CategoryGames#toc1). I like snake, so that's what I'll type in.

[![playing snake on emacs](https://wangonya.com/static/25c9858ae310f5bd31714f1c4c77515f/b9e4f/emacs-snake.png "playing snake on emacs")](/static/25c9858ae310f5bd31714f1c4c77515f/df67e/emacs-snake.png)<figcaption>playing snake on emacs</figcaption>

[![emacs snake2](https://wangonya.com/static/dd0eb3e2d0c1836f5a2f71699a0e6d5d/b9e4f/emacs-snake2.png "emacs snake2")](/static/dd0eb3e2d0c1836f5a2f71699a0e6d5d/8d69c/emacs-snake2.png)

You can quit emacs by pressing `Ctrl-x Ctrl-c`.
Flutter Performance Tips (#1): const constructors
Tags: flutter, dart
Published: 2019-09-07 21:12:22

When we use `setState()` Flutter calls the build method and rebuilds every widget tree inside it. The best way to avoid this is by using const costructors.

**Use const constructors whenever possible** when building your own widgets or using Flutter widgets. This helps Flutter to rebuild only widgets that should be updated.

So if you have a `StatefulWidget` and you are using `setState((){})` to update that widget and you have widgets like:

```dart
class _MyWidgetState extends State<MyWidget> {

  String title = "Title";
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: <Widget>[
          const Text("Text 1"),
          const Padding(
            padding: const EdgeInsets.all(8.0),
            child: const Text("Another Text widget"),
          ),
          const Text("Text 3"),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          setState(() => title = 'New Title');
        },
      ),
    );
  }
}
```

If you run this code and press the floating action button, all the widgets defined as const won't get rebuilded.
Game dev for beginners like me
Tags: gamedev, csharp, beginners
Published: 2019-09-07 20:49:05

---
title: Game dev for beginners like me
published: true
description: A way to start with game dev in Unity
tags: 
- gamedev
- csharp
- beginners
cover_image: https://images.unsplash.com/photo-1490810194309-344b3661ba39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1590&q=80
---
### You can see the original post with the game developed in [my personal blog](https://luturol.github.io/gamedev/game-dev-for-begginers-like-me)

In the beginner of this is, I've got into a vibe of thoughts which I questioned what I liked to program. The good side and bad of been a dev is that you end up doing a lot of different stuff and, by consequence of the market, you end up in other fields of acting. I went through the banking sector, ERP of small enterprises, hospital management, and maybe in the near future banking sector again. The point is that in programming, you can do a lot of stuff, a lot of interesting stuff. But knowing what you really like to program is another 500.

Been in love with programming is an extra bust of productive, that even when you're tired and exhaust you are going to code because you like it. You enjoy coding that, so you will do, you will learn and get motivated by the end of the day.

What was always in love was RPG games, so I'm gonna on an adventure to learn how to make games.

Found out some [dev.to](http://dev.to) articles to help me find the right path to follow.

[This article](https://dev.to/arnaudmorisset/an-overview-of-the-javascript-gamedev-ecosystem-4afb) by @arnaudmorisset clarify some doubts of which language and where to start. It made go motivated to C# and Unity. Why? Just because I know how to code in C# and I like it.

Thus, I followed a Youtube tutorial from  [GamePlusJames](https://www.youtube.com/user/gamesplusjames) and learn it a lot of stuff about 2D games and scripting with Unity. The fact of knowing C# helped a lot but still got some doubt. 

## Doubts that came while doing Snowball Fight Tutorial:

1. How to build the project? Unity has a lot of different types of building your project and configs. Which one I use and why?
    In the last video, he explains how to build and configure to play on windows.
2. There is a way to make Unit Test to my business logic?
3. How to connect on database?
4. How to use HTTP Request to other services?

## The path I've found:

This [tutorial from GamePlusJames](https://www.youtube.com/watch?v=p23J5-1OTAM&t=196s) is perfect for those that don't know yet how to programming and don't know anything about Unity. He explains very well what he is doing through the videos.

There is this Udemy class [Complete C# Unity Developer 2D: Learn to Code Making Games](https://www.udemy.com/unitycourse/) that teaches you how to program C# from the start and stuff about Unity. You will code at least 4 projects during the classes.
How to Install Ubuntu on VirtualBox | Linux Tutorial
Tags: linux, ubuntu, virtualbox, tutorial
Published: 2019-09-07 20:27:27

---
title: How to Install Ubuntu on VirtualBox | Linux Tutorial
published: true
description: Today you'll learn how to install Ubuntu on VirtualBox.
tags: linux, ubuntu, virtualbox, tutorial
---

###In this video I'm showing you how to install Ubuntu on VirtualBox.

Running Ubuntu like this has many purposes, and can be especially convenient for techies who want to explore a flavor of Linux without having to worry about breaking things on their main machine. 

Using a VirtualBox, your "real" system is separated and protected from anything you do inside it. So hack away! 

Here's what you need to get rolling with this: 
1. VirtualBox: https://bit.ly/1nlDA5d
2. Ubuntu Desktop: https://www.ubuntu.com/download/desktop

***

_This video originally appeared on www.youtube.com/realtoughcandy_.
 Come follow me there!
Share the development and design tools you use
Published: 2019-09-07 20:24:27

I wanted to share a website I built for developers and designers to share the tools they use. I was inspired - like many of us are - by Wes Bos https://wesbos.com/uses and Adam Wathan https://adamwathan.me/uses who have uses pages on their sites.

It's called [uses.tools](https://uses.tools). You can use your own affiliate links to the tools you use if you have them and I collect no personal info via GitHub connect... couldn't email you even if I wanted to :D

Coming next: I'd love to have 15 minute calls with developers and designers for them to share the tools they use. It would be tour of their environment (MTV Cribs but for dev setups haha). Record it via Zoom / Hangouts and then publish to YouTube and post on site. If anyone is interested, hit me up on Twitter @usestools or @leighchalliday.

This was built with Next.js, GraphQL (Apollo client + server), hosted on Zeit Now, database is Postgres.
NativeScript Fetch to HttpClient Conversion and Gotchas
Tags: nativescript, javascript
Published: 2019-09-07 19:35:00

Converting fetch to HttpClient to make API calls is pretty straightforward. But sometimes it's not done correctly, especially when abusing the async pipe.

<br/><br/>

It may be beneficial to use HttpClient instead of the good old global fetch API that lives in a browser and NativeScript apps alike. When building Angular apps with NativeScript, using HttpClient has some added sugar like being able to use Http interceptors as well as getting an RxJS Observable as a result by default. But there are some things to watch out for when converting from using fetch to using HttpClient.

<br/><br/>

In this second part of the two-part video series, I first show you how to perform the conversion from the fetch API to using HttpClient in a NativeScript with Angular app. Then I show you some troubles you can face that may not be so obvious on the surface. And, of course, I'll show you how to eliminate those troubles.

<br/><br/>

This video builds upon what we've already done in part one: [Easy Dev Backend for NativeScript apps](https://dev.to/digitalix/easy-dev-backend-for-nativescript-apps-1jm0).

<br/><br/>

{% youtube sFOUij61TvI %}

You can find a lot more NativeScript Tutorials on my YouTube channel: https://www.youtube.com/channel/UCajiMK_CY9icRhLepS8_3ug

<br><br>

You'll find more content about NativeScript in our courses area on [NativeScripting.com](https://nativescripting.com). The new [Hands-on UI course](https://nativescripting.com/course/nativescript-hands-on-ui) is a pretty popular starting point for those starting out learning NativeScript and how to work with UI.

<br/><br/>

Let me know if you enjoyed this short tutorial on Twitter: <a href="https://twitter.com/digitalix" target="_blank">@digitalix</a> or comment here. And send me your NativeScript related questions that I can answer in video form. If I select your question to make a video answer, I'll send you swag. Use the hashtag #iscriptnative.

<br/><br/>
Easy Dev Backend for NativeScript Apps
Tags: nativescript, javascript
Published: 2019-09-07 19:17:40

During development, I prefer using a local backend that I quickly spin up along with my NativeScript apps. Why? It's easy, it's offline, it gives me more control, and it allows me to reason about my app in a more realistic way during development.

<br/><br/>

This is part one of a two-part video series on using NativeScript with a local dev backend.

### Part One

In this first video I use a collection of free and open source tools to get you up and running quickly and easily. We use Node and Express to run a local server, test out the API endpoints with Postman, and then convert the Hello World NativeScript with Angular app to fetch its data from this server. We even simulate a network delay and see how it effects loading and displaying of data.

<br/><br/>

I use a similar technique in the [NativeScript with Angular Pro course](https://nativescripting.com/course/nativescript-with-angular-pro/) and the [NativeScript Core Pro course](https://nativescripting.com/course/nativescript-core-pro/) right here on NativeScripting.

<br/><br/>

This video comes in at fifteen minutes - a bit longer than usual. But it's definitely worth watching.

<br/><br/>

{% youtube j5KyMJFTklw %}

You can find a lot more NativeScript Tutorials on my YouTube channel: https://www.youtube.com/channel/UCajiMK_CY9icRhLepS8_3ug

<br><br>

### Part Two

In the second part of the two-part series, I show how to convert a fetch API call to using HttpClient and RxJS Observables to get data for the details page, and some problems that one could face while doing this.
See [part 2 here](https://dev.to/digitalix/nativescript-fetch-to-httpclient-conversion-and-gotchas-2jpm).

<br><br>

For more video tutorials about NativeScript, look at our courses on [NativeScripting.com](https://nativescripting.com). The new [Hands-on UI course](https://nativescripting.com/course/nativescript-hands-on-ui) is a pretty popular starting point for those starting out learning NativeScript and how to work with UI.

<br/><br/>

Let me know if you enjoyed this short tutorial on Twitter: <a href="https://twitter.com/digitalix" target="_blank">@digitalix</a> or comment here. And send me your NativeScript related questions that I can answer in video form. If I select your question to make a video answer, I'll send you swag.

<br/><br/>