teleren/devto huggingface dataset:
Node JS Tizen CLI
Tags: node, javascript, tizen, samsung
Published: 2021-05-30 02:53:16

> If you're looking for the full fledged Tizen CLI visit the Tizen Devleoper website [here](https://developer.tizen.org/).

## Why a Node JS derived Tizen CLI?
Create an OS-agnostic command-line tool for web developers that can be installed with contemporary IDEs like Visual Studio Code.
 
And, of course, get familiar with Node JS, low-level APIs that communicate with the OS. Hence the bash scripting nature of the CLI tool, but instead using JavaScript.

## How does it work?
The Node JS CLI depends on the Tizen SDK and platform tools to compile, sign, package, and install Tizen Web Apps on the Tizen Emulator and Samsung Watch Device. You can learn more about the Tizen OS platform and dev tools [here](https://docs.tizen.org/platform/what-is-tizen/overview/).

At this moment the current version of the CLI supports only macOS. Possibly with a little more time and TLC it can support Linux and Windows.

## Node JS CLI Preview

1) Create a New Project

> *This commands creates a new Tizen Web App for wearables. Learn more about creating tizen web apps [here](https://tinyurl.com/2z4xb2mu).*

![Create a new project](https://cdn.josuebustos.com/static/gif/tizen-create.gif)

2) Create a Certificate

> *Allows you to install apps on the Tizen Emulator and on the Samsung Galaxy Watch device.*
 
![Create a certificate](https://cdn.josuebustos.com/static/gif/tizen-cert.gif)

3) Package your web app into a .wgt file

> *This is the equivalent to a APK android file that you install on Android devices. You can learn more about the Tizen Web Application architecture [here](https://docs.tizen.org/application/web/).*

![Package your project](https://cdn.josuebustos.com/static/gif/tizen-generate.gif)

4) Launch the Tizen Emulator
![Launch Tizen Emulator](https://cdn.josuebustos.com/static/gif/tizen-emulate.gif)

5) Debug

> *This command launches the Chrome Developer Tool web inspector.*

![Debug your app](https://cdn.josuebustos.com/static/gif/tizen-generate.gif)

6) Shutdown

> *This command terminates both the Chrome Dev Tool and emulator at the same time.*

![Shutdown](https://cdn.josuebustos.com/static/gif/tizen-shutdown.gif)

Now, I can install Node JS Tizen CLI with NPM anywhere on my local machine using Terminal or iTerm.  When writing this, the Web debugger continues to only work with Google Chrome 80 and below. Luckily you can find a clean copy on the interwebs.

Can anyone create a Node JS CLI absolutely? Yes, though, your mileage will vary. Below is a list of domain knowledge I needed on hand to put all the pieces together and some new items I had picked up along the way to get me to the finish line:

- Tizen CLI instructions
- Node JS CLI
- JavaScript (Pure ES6)
- Shell scripting (Unix/macOS)
- Chrome Dev Tools
- Terminal (macOS)
- File system (map Tizen specific scripts in Node JS)
- Google, StackOverflow, Stack Exchange, etc!
- TCP, UDP (Networking)
- Wireshark

If you enjoyed this short segment, stay tuned for more CLI adventures.

Until next time.
Remmina: Keyboard layouts between Linux and Windows in RDP
Tags: remmina, keyboard, remote, locale
Published: 2021-05-30 02:27:59

I use [Linux](https://linux.org/) desktop as my workstation, whose keyboard layout is general "jp".
I had to connect to a [Windows](https://www.microsoft.com/en-us/windows) machine with [Remmina](https://remmina.org/), one of remote desktop clients, the other day. Additionally, I had to connect to [CentOS](https://www.centos.org/) servers via [SSH](https://www.openssh.com/), whose locale is "C", inside it.
What happened then? I pushed `:` in my keyboard and `'` appeared in the screen, for example. It made me puzzled, when using [Vim](https://www.vim.org/), etc🤕
It seemed caused by the difference of keyboard layouts between the Linux machines bridged by the Windows machine.
I found the solution finally. It was easy operation to configure Remmina.
Open its "Preferences":

![remmina-preferences](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vu68kw6hf4lsoxpaa99.png)

Then, activate "Use client keyboard mapping":

![remmina-preferences-rdp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54qvafbwktda1lvsui29.png)

It made my work more comfortable🙂
How to Create Your Own Snippets in VS Code
Tags: vscode, snippet, extensions, programming
Published: 2021-05-30 01:50:06

---
title: How to Create Your Own Snippets in VS Code
published: true
description: How to Create Your Own Snippets in VS Code
tags: #vscode #snippet #extensions #programming
---
I am always looking for a new way to improve my workflow, to be more efficient. I found that using snippets is one of many things that surely can enhance my productivity. With snippets, using only several characters you get a chunk of codes that you often use. Certainly, there are a lot of snippet extensions in the VS Code marketplace. These snippets are super awesome, offering you a huge number of snippets; any snippet that you can imagine probably exists there. But, to be honest, I only use a few of them, and I have a hard time remembering their prefixes. I feel that it is better to create my own snippet that suits my own workflow, and hence I can remember easily.

Here is how I create my own snippets:


1. Install  [Snippet Creator Extension](https://marketplace.visualstudio.com/items?itemName=wware.snippet-creator) 

2. In the editor, type a block of codes that you want to use as the snippet. Highlight them, open the command palette ( use `ctrl` + `shift` + `p`), select `Create Snippet`,  and if you follow the suggested options, you will be fine. 
![Create Snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7f740gyztndx48b6w5w.gif)

3. Modify the created snippet to further accommodate your needs. Open command palette and select `Preference: Configure User Snippets`.
![Modify Snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kdi764oax2rp42uvgm2.gif)



Now you can enjoy it. 
![Use Snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydt2i7leg70sk3uoge3l.gif)
[PT-BR] Programação Orientada a Objetos
Tags: programming, showdev, beginners
Published: 2021-05-30 01:27:45

<u>Origem</u>

O termo Programação Orientada a Objetos (POO) foi criado por Alan Kay, um dos autores da linguagem Smalltalk.  Mas, mesmo antes da criação do Smalltalk, algumas das ideias da POO já eram aplicadas, sendo que a primeira linguagem de programação a realmente utilizar estas ideias foi  o Simula 67 que introduziu noções de classe e herança embora não necessariamente esses nomes, criada pelos noruegueses Ole-johan Dahl e Kristen Nygarrdem em 1967. Entretanto o paradigma orientado a objetos só veio a ser aceito realmente nas grandes empresas de desenvolvimento de Software por volta dos anos 90.

<u>Conceito</u>

A POO foi criada para tentar aproximar o mundo real do mundo virtual: a ideia fundamental é tentar simular o mundo real dentro do computador. Logo, não há nada mais natural do que utilizar Objetos, afinal, nosso mundo é composto de objetos. Então, ao programar orientado a objetos não teremos apenas funções que são chamadas uma seguida da outra, mas sim objetos que possuem estado e comportamento.

<u>Vantagens</u>
1. <strong>Confiável</strong> – O isolamento entre as partes gera software seguro. Ao alterar uma parte, nenhuma outra é afetada.

2. <strong>Oportuno</strong> – Ao dividir tudo em partes, várias delas podem ser desenvolvidas em paralelo.

3. <strong>Manutenível</strong> – Atualizar um software é mais fácil. Uma pequena modificação vai beneficiar todas as partes que utilizarem o objeto.

4. <strong>Extensível</strong> - O software não é estático. Ele deve evoluir e crescer para permanecer útil.

5. <strong>Reutilizável</strong> – Podemos usar objetos de um sistema que criamos em um outro sistema futuro.

6. <strong>Natural</strong> – Mais fácil de entender. Você se preocupa mais na funcionalidade do que com os detalhes de implementação.

Alguns exemplos de linguagens orientadas a objetos modernas utilizadas por grandes empresas em todo o mundo são:

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zmujw2edj1pii33gyn8.png)

Caso queira realizar um projeto comigo (ou até mesmo bater papo), não hesite em me enviar uma mensagem, acesse o link das minhas redes sociais abaixo: ⤵️

[Instagram](instagram.com/celycodes)
[Twitter](twitter.com/celycristhyne)
[GitHub](https://github.com/celenny)
[LinkedIn](https://www.linkedin.com/in/celenny)
Why Software Quality Matters
Tags: software, codequality, craft, code
Published: 2021-05-30 01:03:51

---
title: Why Software Quality Matters
published: true
description: Some random thoughts I had on software quality today
tags: software, quality, craft, code
//cover_image: https://direct_url_to_image.jpg
---

It's important for managers of software development to pay attention to the quality of their output in addition to the quantity for the simple reason that poor software will always lead to future problems. Whether it is through organization changes, or attrition, it is likely that the developers that write a system may not be the ones who modify that system down the line. If proper focus is not paid to the quality of the code being written, the following types of problems can occur:

- Poor code will be difficult for future developers to work with which will add friction to their work or onboarding and slow down future growth opportunities for the organization. 


- Poor code will scale poorly. A shortcut here, a shortcut there, and you can easily end up with a mess down the line that will cost support hours (both dev and infrastructure) and analysis and development hours to fix. 


- Poor code will make good coders write poor code. Much like the broken window fallacy, developers may not see value in putting effort into fixing garbage code, especially if the organization already does not give code quality importance.


There are lots of issues with not giving good code quality the importance it deserves. Great software managers should pay attention to it.
How To Fix Merge Conflicts in yarn.lock and package-lock.json
Tags: javascript, webdev, programming
Published: 2021-05-30 13:41:17

---
title: How To Fix Merge Conflicts in yarn.lock and package-lock.json
published: true
date: 2021-05-30 00:00:00 UTC
tags: javascript, webdev, programming
canonical_url: https://mannes.tech/merge-lock-file/
---

Merge conflicts happen.

With lock files, this can happen if you have different packages (or package versions) installed than in the branch you want to merge.

Fixing the `package.json` definition may take some work, but in difficult cases you can work together with the colleague who made the changes in the other branch.

But the `yarn.lock`file (or `package-json.log`)? Oh my..

It's so long and may have dozens of conflicts for every single conflict in `package.json`.

The thing is.. You don't need to fix those merge conflicts yourself.

It is a file that's generated. Not written by a human.

Fixing merge conflicts there is a simple three-step process:

```bash
# 1.
rm yarn.lock

# 2.
yarn

# 3. 
git add yarn.lock
```

_Replace `yarn.lock` with `package-lock.json` if you're using npm._

Make your developer life simpler. Don't edit machine-generated files by hand. Simply regenerate them.
Software development is so much more than writing code
Tags: learning, teaching, softwaredevelopment, coding
Published: 2021-06-01 18:04:55

---
title: Software development is so much more than writing code
published: true
date: 2021-05-30 00:00:00 UTC
tags: learning,teaching,softwaredevelopment,coding
canonical_url: https://jhall.io/archive/2021/05/30/software-development-is-so-much-more-than-writing-code/
---

A common frustration I hear (and feel) is that traditional (and even less traditional) education doesn’t do a very good job of preparing people for a software development career. Most education focuses fairly narrowly on _how to code_.

The problem is that learning to code is only a small part of learning to be a productive software developer.

Software development usually involves writing code, and other closely related tasks:

- Writing code
- Debugging code
- Writing and executing automated tests

Many or most of these one might assume are covered in a typical bootcamp.

But software development also involves many non-coding activities:

- Talking to customers/end users, to understand their needs and desires
- Designing software and other computer systems (both before, and during the act of coding)
- Prioritizing tasks
- Communicating the intent of your code (both in the code itself, as well as in documentation and other artefacts)
- For many: Shipping, deploying, maintaining code once it’s written
- Branch and feature management (in git or some other VCS)
- Proper/best for generating and reading logs
- Monitoring and alerting
- Considering the security implications of code and systems

What else would you put on this list?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Console.log(everything)
Published: 2021-05-29 23:46:56

As a new developer, things like debugging can be tedious, confusing, and disheartening. Thinking and planning in a computer language calls for incremental building of the behavior you want and when conceptualizing that behavior it often helps to just "take a look under the hood." Thanks to console.logs you can see an element you want created, observe what kind of promise you get after a fetch call, and track the behavior of your functions. 
The MDN definition for console.log states 
"The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects."
When making a fetch call in a Javascript application I wanted to make, I plugged by returned promise in a "data" variable into a console.log and behold the console showed me the structure and content of the promise in the dev tools. 
During a tutorial build out of a NextJS/ Advanced React webpage, we console.log the return of some functions to see their behavior in action. Console.log is one of the most important tools in my development practice.
Cache Control for React App with Nginx
Tags: react, nginx, cache
Published: 2021-05-29 23:34:50

The cache issue which typical React App confronts, can be solved by Nginx configuration
<!-- more -->

## Common Deployment

After the app is built, we can just use Nginx to point to the static files

```
server {
  listen 80;
  root /PATH/TO/APP/build;
  try_files $uri $uri/ /index.html;
}
```

## Cache Issue

When access page for the first time, all the page and resources are from server, as the following image shown:

![](https://chanvinxiao.com/cn/blog/cache-control-for-react-app-with-nginx/fresh.png)

Close the browser, then reopen, Input address, press Enter, the browser will get the cache from local, as the following image shown:

![](https://chanvinxiao.com/cn/blog/cache-control-for-react-app-with-nginx/cache.png)

Even if the page was updated between the two request, the browser would not get the update from the server, since `disk cache` does not communicate with server

## Solution

If the resource file is updated, the file name will changed, so the cache of resource won't be a problem, we just need to disable the cache of page

Just replace
```
  try_files $uri $uri/ /index.html;
```
With
```
  location / {
    if ( $uri = '/index.html' ) {
      add_header Cache-Control no-store always;
    }
    try_files $uri $uri/ /index.html;
  }
```
- Since all the pages is eventually pointed to the entrance file, so all the actual [`$uri`][nginx-uri] are `/index.html` for pages
- `no-store` is the strictest value for [`Cache-Control`][cache-control] to disable cache, to make sure the browser won't use any cache
- Since [`add_header`][add-header] with `if` can not be placed directly inside `server`, so we need to add the location layer 

## Result

This way, when we request page the second time, the page won't cache, but the resources will be cached if no change, as the following image shown:

![](https://chanvinxiao.com/cn/blog/cache-control-for-react-app-with-nginx/index.png)

You can access the following address, try to operate, and inspect the corresponding network request:
> http://react.chanvinxiao.com

## Summary
- Weird cache problem will arise when input address and press Enter in browser
- We can determine if the request is page through `$uri` of Nginx
- The Cache Control header can be set via `add_header` of Nginx


[nginx-uri]: http://nginx.org/en/docs/http/ngx_http_core_module.html#var_uri
[cache-control]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control
[add-header]: http://nginx.org/en/docs/http/ngx_http_headers_module.html#add_header
Best Open Source Apps to Contribute to
Published: 2021-05-29 22:17:20

# If you have an open source app or know one put it in the comments so I add it here

# [Rhyme Player](https://github.com/Rhyme-Player)
This is still under development giving it a start on [github] (https://github.com/RhymePlayer/Rhyme-Player) will help
I am currently working on this project please give it a star on github and test it for bugs
Rhyme Player is a great music player that supports multiple music file types it can play local music or music from the internet supporting `Light` and `Dark` Themes
![Alt Text](https://user-images.githubusercontent.com/77546233/119336809-60c78b00-bc8e-11eb-8051-95a2412f5e68.png)

# [PenPot](https://github.com/penpot/penpot)
This is still under development giving it a start on [github] (https://github.com/penpot/penpot) will help
Penpot - The Open-Source design & prototyping platform
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7fjgwdlvnvw55qj8c39.jpeg)

# [Akira](https://github.com/akiraux/Akira)
This is still under development giving it a start on [github] (https://github.com/akiraux/Akira) will help

Akira is a native UI/UX Designing app for the linux users
![Alt Text](https://raw.githubusercontent.com/akiraux/Akira/master/data/screenshots/screenshot-1.png)

# [Brave Browser](https://github.com/brave/brave-browser)
Three times faster than Chrome. Better privacy by default than Firefox. Uses 35% less battery on mobile.
![s](https://brave.com/static-assets/images/optimized/desktop-hero-screenshot@1x.en.webp)
# [Linux](https://github.com/torvalds/linux)
Now this is not an app this is an Operating System that uses `unix` as shell which is the same as `macos` more private than `windows` and works better
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5vy54tk6i2arj849knm.png)

# [Visual Studio Codium](https://github.com/VSCodium/vscodium)
This is Visual Studio Code but the difference is that it is
completely open source since `VSCode` have some code property when you download

![s](https://vscodium.com/img/vscodium.png)
My 2021 Reading List
Published: 2022-04-05 04:36:06

---
title: My 2021 Reading List
published: true
date: 2021-05-29 22:05:41 UTC
tags: 
canonical_url: https://cantillo.dev/posts/my-2021-reading-list/
---

Last year I did read several books, mostly because the COVID-19 pandemic, tired of watching netflix I decided to read a book instead. 
Started with some from the backlog. And this year the tradition continues -the pandemic haven't finished yet- but also I learnt a lot last year. 
However this year I want to make more public my reading list, and also write more. For that reason I want to start writing little essays from the 
latest books.

This is my reading list:

1. Ask Your Developer: How to Harness the Power of Software Developers and Win in the 21st Century by Jeff Lawson | [Amazon](https://www.amazon.com/dp/B083XL677V)
2. Working Backwards: Insights, Stories, and Secrets from Inside Amazon by Colin Bryar and Bill Carr | [Amazon](https://www.amazon.com/Working-Backwards-Insights-Stories-Secrets/dp/1250267595)
3. An Ugly Truth: Inside Facebook's Battle for Domination by Sheera Frenkel and Cecilia Kang | [Amazon](https://www.amazon.com/Sheera-Frenkel-ebook/dp/B07YSHD2C5/)
4. Staff Engineer, Leadership beyond the management track by Will Larson [Amazon](https://www.amazon.com/dp/B097CNXP89)
Visualising data
Published: 2021-05-29 20:49:25

As a backend engineer, I always wanted to build graphs to show some data interactively. I look up a few libraries but they are not quite easy to use as a relatively new React dev. So I ask my si-fu @_denb again, he recommended me to look at [visx/xychar](https://airbnb.io/visx/docs/xychart). And yea, it was surprising neat!

Step 1: display a simple line chart
https://codesandbox.io/s/visx-xychart-00-qp99f
{% codesandbox visx-xychart-00-qp99f %}

The main thing to display the data is just this piece of code. Simple enough!
```
      <XYChart height={300} 
        xScale={{ type: 'band' }} 
        yScale={{ type: 'linear' }}>
          <Axis orientation="bottom" />
          <Axis orientation="left" />
          <LineSeries data={data} dataKey="line" {...accessors} />
      </XYChart>
```

Step Final: custom y axis, adding glyph and toolstips, etc
{% codesandbox xychart-final-example-8zj10 %}
In the final code, I tried to represent a team match position. Since position 1 means the team is a top, I will need to reverse the y-axis. And to make it the graph interactive, I added some icons on the data points and tools tip

visx has other lower level libraries, but I found xychart is really battery included and simple to use :D
JavaScript Quick Tip: Create A Cancelable Promise Delay
Tags: javascript
Published: 2021-05-29 20:45:32

You might see the need to wait for a short period before you do a certain action from time to time. JavaScript has `setTimeout` for this, and it works perfectly fine. But what if you want to work with Promises and perhaps even async/await?

`setTimeout` breaks this pattern because it takes a callback. But gladly, we can combine both to create a delayed Promise you can await if you want.

## The Code

```JavaScript
const delay = (delay, value) => {
  let timeout;
  let _reject;
  const promise = new Promise((resolve, reject) => {
    _reject = reject;
    timeout = setTimeout(resolve, delay, value);
  });
  return {
    promise,
    cancel() {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
        _reject();
        _reject = null;
      }
    }
  };
};
```

## Usage

You can then use it like this afterward:

```JavaScript
const delayed = delay(5000, "This value is returned by the promise");

// This await only returns after at least 5 seconds.
// Execution is halted before it continues after the
// Promise resolves.
const value = await delayed.promise;

// more operations...
```

And if you want to take advantage of being able to cancel it, you can use it like this:

```JavaScript
const delayed = delay(5000, "value");
delayed.promise
  .then((value) => console.log(value))
  .catch(() => console.error("Rejected"));

// This will be executed before the promise fires. 
// Thus, the Promise is canceled and
// the catch is executed.
delayed.cancel();
```

## The Whole Tip As An Image

If you like visual content more, or if you simply want to store it for later, I put all this into one single image for you. I hope you like it!

![A picture showcasing the above code](https://cdn.hashnode.com/res/hashnode/image/upload/v1622279367792/k1B-G4j1M.png)

## Before You Leave

If you would love to read even more content like this, feel free to visit me on [Twitter](https://twitter.com/intent/follow?screen_name=oliverjumpertz) or on [LinkedIn](https://www.linkedin.com/in/oliverjumpertz/).