teleren/devto huggingface dataset:
Printing output is slowing down your API
Tags: node, api, debugging
Published: 2022-01-03 14:11:16

---
title: Printing output is slowing down your API
published: true
description: printing output to terminal is slowing down your API.
tags: nodejs, api, debugging
---
I got bored and did a quick experiment. Nothing fancy, just a simple Nodejs API that stores your name and age into MySQL database.
The script is shown below. Notice that there's a console.log that prints the SQL statement before the query.

![nodejs store name and age into mysql](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxd0ey5m19sjek7pmg4u.png)
 
Using a simple bash command to loop, query the API and take the time elapsed; there's a 1-second difference between code with and without console.log.![bash script to query API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in5bchd1253aftpa5jvx.png)
 

console.log is useful for debugging, but make sure you remove them in production :)
what is composer, NPM and PIP?
Tags: javascript, php, python, webdev
Published: 2022-01-03 14:00:47

#php ~ #composer
#Python ~ #pip
#javascript(#Nodejs) ~ #NPM

We are used composer, pip, npm for download our project needed dependency, framework, library and plugin. All programming languages have a native composer and Package manager.

#DEVCommunity
#webdevelopment
TypeScript 'instanceof' interface is it possible? 
Tags: typescript
Published: 2022-01-03 13:55:26

---
title: TypeScript 'instanceof' interface is it possible? 
published: true
description: Let's leverage the power of union types and literals type to make interface type more real in runtime.
tags: TypeScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yinkc7hxw3bvcbbg9m0.png
---
I really like the power of interfaces in TypeScript and its duck typing. But what really bothers me is that I cannot check whether is something an instance of interface. 

For example, we have decided to build a role model for the user class. User class will have different roles and based on role type it either has permissions or not. And we decided to describe roles as interfaces.

So I want to have code like this:
``` TypeScript
class User {
    constructor(readonly role: IReader | IWriter){};
}

interface IReader  {
}

interface IWriter {
    readonly permissions: Array<string>
}

function guardAccess(user: User){
    // Oh no it is not working 😱
    // Error TS2693
    if (user.role instanceof IReader){
      throw new AccessDeniedException();
    }
}

```

But in TypeScript, it won't work. Because types do not exist in runtime. There is no such thing as an interface in JavaScript.

## Ok, so how can we fix this?
We can use [string literal types](https://www.typescriptlang.org/docs/handbook/literal-types.html) in TypeScript to identify the interface. Let's update our code:

``` TypeScript
class User {
    constructor(readonly role: IReader | IWriter){};
}

interface IReader  {
    readonly name: "reader",
}

interface IWriter {
    readonly name: "writer"
    readonly permissions: Array<any>
}

function guardAccess(user: User){
    // ✔️ no error
    if (user.role.name === "reader"){
      throw new AccessDeniedException();
    }
}
```

It allows us to get data that is available only in a certain interface.
``` TypeScript
// lets create a user with role reader
const user = getUser();
if (user.role.name === "reader"){
    user.role.name;
    user.role.permissions; // 🛑 error
}
else if (user.role.name === 'writer'){
    user.role.name;
    user.role.permissions; // ✔️ no error
}
```

Also it TypeScript will help us to control the values of the role's name.

``` TypeScript
if (user.role.name === "editor"){
 // 🛑 Error: TS 2367This condition will always return 'false'
 // since the types '"reader" | "writer"' and '"editor"' 
 // have no overlap.
}
```

That is it. Now we can have similar behavior to the instance of the interface in TypeScript. 

Thank you for reading!
Loops in JS
Tags: javascript, beginners, programming, webdev
Published: 2022-01-03 13:52:05

`Loops` **wowww** 😃, incredible, it sound really strange, it's petty similar to the concept you _already know_.

## What is exactly `loops`:
Loops is a resource 🥰 that allows you iterate data or to do an action the needed times. For instance, you can print `Hello` in console twice without writing the `console.log` statement twice.

```js
console.log("Hola");
console.log("Hola");
```
It's the worst approach you can do, here, I'm really glad to introduce you `looping`:

```js
for(let i =0; i<2; i++) {
  console.log("Hola");
}
``` 

It's look likes a **joke** 🥶, but no, imagine you need to write 1K times "Hello" in console, would you write `console.log("Hello")` 1000 times?

If your answer is `YES`, let me say **you're crazy 👨🏻‍💻**
Yes, this is the _main aim_ of this type of `loops` but there are more methods to achieve this `aim` 😇 when you are trying to parse an `array`, let's see an example:

```js
const data = ["a", "b", "c"]

for (let item of data) {
  console.log(item);
}
``` 

This code will print three lines, one per **item** on the **array**, here you can see how this code looks like, also you can use `loops` to get each key of a key-value pair (objects), let's see an example: 

```js
const data = {
  "a": 1,
  "b": 2,
  "c": 3
}

for (let key in data) {
  console.log(`key: ${key} @ value: ${data[key]}`);
}
```

Here, you can **see** 😜 that we're printing all the pairs `key-value` from the above object, it allows us to load an object without knowing anything about the length or the properties it could have. 
Yes, I know, it bring us a lot of extra _possibilities_ to work 🙏 with the data you need, `objects`, `arrays`. 

Also, there is another methods to perform an **array** `looping`, for example a `forEach` sentence, which return a `callback` with the execution for each value, let's see an example:

```js
[1,2,4].forEach((value, index) => {
  console.log(`The value in index ${index} is ${value}`)
});
```
This code allows you to run specific sentences per each _item on the array_ 😁.

I know that there are more methods like `map` but its aim  isn't exactly to iterate each item on a array, we'll see it on the following posts.

That's all for the today post, I hope you have just learnt a lot, I mean you have understood what `looping` means and how it looks using **JS**.

I strongly recommend you to take a look about it using real code, you can use replit to see what are you writing in real time.

[REPLIT](https://replit.com/languages/nodejs)
TIL: MySQL timestamp column can't go beyond '2038-01-19 03:14:07'
Tags: mysql, discuss, beginners, postgres
Published: 2022-01-03 13:08:28

MySQL 'timestamp' type column cannot store value beyond '2038-01-19 03:14:07' UTC, i.e., Int32 limit (2147483647).

What do you think about Postgres timestamp column. Can they?
How To open any GitHub repository in VS Code in your browser
Tags: vscode, webdev, beginners, tutorial
Published: 2022-01-03 12:57:44

There's something really cool I found! Are you ready?

If you browse GitHub often, you might come across an interesting project, but wish you were able to navigate it quickly? While GitHub has added dozens of shortcuts over the years, wouldn't it be nice to be able to open two files side-by-side, press cmd-click to jump straight into a function definition, or even use some shortcuts you use every day?

These features appear to be provided by github1s. Let's see how it works. 

When you're on a GitHub repository github.com/someperson/someproject add 1s to the URL (github1s.com/someperson/someproject) and boom! It Opens up VS Code in your browser so that you can inspect some code.

## Watch it in action 

{% youtube DSDbjGJv5ao %}

## GitHub is rolling out Codespaces and VSCode

With Codespaces entering GitHub you can also change a repo URL such as
github.com/muthuannamalai12/muthuannamalai12 and to github.dev/muthuannamalai12/muthuannamalai12 or press `.`  from the GitHub UI to access VSCode!

{% youtube rJwKZyYr1GY %}

This is very exciting, friends! 

From my end, that's all I have to say.

> You can now extend your support by buying me a Coffee.😊👇

<a href="https://www.buymeacoffee.com/muthuannamalai" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

Thanks for Reading 😊
Share your laptop stickers!
Tags: stickers, laptop, watercooler, gear
Published: 2022-01-03 12:57:40

![A silver HP laptop, closed, showing the stickers on the top](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no1jladxecta8zxz2z2m.jpeg)

I recently rebuilt my HP laptop from scratch, to install Ubuntu 21.10 on a new SSD. Dev config is another post.

(yes, I know it is missing DEV stickers - I need to find my spares!)

New Year, new setup - new stickers! Share what you're rocking, in the comments below 😻
How to create a React tree view component.
Tags: javascript, webdev, react, beginners
Published: 2022-01-03 12:50:41

**Quick Summary**: in this article, we are going to build a reusable react tree component

A **react tree view component** is a graphical user interface component that represents a hierarchical view of information, where each item can have several subitems. They are often seen in the sidebar, file manager applications.

Let's start by creating the tree data. The `treeData` is an array of `node` objects.
###Each node object has the following fields.
* key
* label
* children: The children field is an array of a `node` object.
```javascript
const treeData = [
  {
    key: "0",
    label: "Documents",
    children: [
      {
        key: "0-0",
        label: "Document 1-1",
        children: [
          {
            key: "0-1-1",
            label: "Document-0-1.doc",
          },
          {
            key: "0-1-2",
            label: "Document-0-2.doc",
          },
        ],
      },
    ],
  },
  {
    key: "1",
    label: "Desktop",
    children: [
      {
        key: "1-0",
        label: "document1.doc",
      },
      {
        key: "0-0",
        label: "documennt-2.doc",
      },
    ],
  },
  {
    key: "2",
    label: "Downloads",
    children: [],
  },
];
```

```javascript
function App() {
  return (
    <div className="App">
      <h1>React Tree View</h1>
      <Tree treeData={treeData} />
    </div>
  );
}
```
We then proceed to create a `Tree` component that takes the `treeData` as a prop.
The `Tree` component maps through the `treeData` and returns a `TreeNode` component that takes the tree `node` as a prop.
```javascript
function Tree({ treeData }) {
  return (
    <ul>
      {treeData.map((node) => (
        <TreeNode node={node} key={node.key} />
      ))}
    </ul>
  );
}
```
###The `TreeNode` component incorporates the following.
* A `showChildren` state is the state responsible for displaying the `Tree` component.
* A `handleClick` is a  click handler function that toggles the `showChildren` state.

The `TreeNode` component displays the node `label`

The `TreeNode` component also conditionally renders the `Tree` component if the `showChildren` state is true and passes the node `children` to the `Tree` component as a prop.
```javascript
function TreeNode({ node }) {
  const { children, label } = node;

  const [showChildren, setShowChildren] = useState(false);

  const handleClick = () => {
    setShowChildren(!showChildren);
  };
  return (
    <>
      <div onClick={handleClick} style={{ marginBottom: "10px" }}>
        <span>{label}</span>
      </div>
      <ul style={{ paddingLeft: "10px", borderLeft: "1px solid black" }}>
        {showChildren && <Tree treeData={children} />}
      </ul>
    </>
  );
}
```
##This would be the result.

![React Tree component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryj7xfeniwst345v65oh.gif)
Joined as a fresher software developer in a cool company
Tags: python, beginners, developer
Published: 2022-01-03 12:48:49

Am quite excited to see where this takes me.
Have been assigned to perform unit tests for now and its helping me get a full understanding on our software. It's challenging, but that's what will make me come out of this a much better programmer and developer. 

It feels quite awkward to ask questions as I feel very stupid, but I need to get over that to get better quicker.

If anyone happens to read this, please feel free to give any advice, it would mean the world.
Multi-Cloud is NOT the solution to the next AWS outage.
Tags: leadership, softwaredevelopment, technology, devops
Published: 2022-07-17 13:56:12

---
title: Multi-Cloud is NOT the solution to the next AWS outage.
published: true
date: 2022-01-03 12:04:49 UTC
tags: leadership,softwaredevelopment,technology,devops
canonical_url: https://faun.pub/multi-cloud-is-not-the-solution-to-the-next-aws-outage-bb41c0b14573
---

[![](https://cdn-images-1.medium.com/max/2600/0*v3yLF0diiOcQIKaH)](https://faun.pub/multi-cloud-is-not-the-solution-to-the-next-aws-outage-bb41c0b14573?source=rss-6e21f0d290d1------2)

There are many things you can do first in terms of disaster recovery.

[Continue reading on FAUN Publication »](https://faun.pub/multi-cloud-is-not-the-solution-to-the-next-aws-outage-bb41c0b14573?source=rss-6e21f0d290d1------2)
Quasar admin CRM with Quasar 2!
Tags: vue, javascript, css, quasarframework
Published: 2022-01-03 12:02:43

I have migrated my Quasar Admin CRM template to Quasar 2! I am offering it at the cheap price of $49! If you want to purchase, please send me an email at mayank091193@gmail.com

Live demo: 

## https://next-quasar-admin-crm.netlify.app/

Do let me know in case of any questions.
Problem with Google Sign-in in Android Project - APK - Prod Version Problem
Tags: nrkdrk, android, google, firebase
Published: 2022-01-03 11:50:23

I am using google login in an android project. The login process, which works smoothly on devices installed through Android studio, does not work when published on the play store. The app's release and debug sha1 values have been added to firebase and gcp Credentials. In other words, sha1 values created according to debug and release states are available on both platforms. On devices installed as debug, the application can be logged in without any problems, but when it is published on APK or play store, it cannot be logged in. How can I solve this problem?

[address](https://stackoverflow.com/questions/70563565/problem-with-google-sign-in-in-android-project-apk-prod-version-problem)
CQRS, direto ao ponto
Tags: programming, cqrs
Published: 2022-01-03 11:48:38


Com todo o seu charme, essa é daquelas expressões em inglês que arrepia a espinha de qualquer iniciante, e que todo profissional quando compreende o conceito, repete com orgulhos nos olhos.([veja como é a pronúncia](https://belintani.com/assets/audio/posts/2022-01-02-cqrs-direto-ao-ponto/CQRS.mp3))

CQRS é a abreviação de _Command and Query Responsibility Segregation_.

O que isso quer dizer?

> #### Não misture "leitura dos dados" com "gravação dos dados"!

### Quando usar
**Sempre que possível**. O "papo" de _over-engineering_ não se encaixa tão bem aqui, uma vez que não é tão complexo assim.
Claro, sem hipocrisia, numa distribuição orientada à _microservices_, existe chance de ser um trabalho chato e menos justificável.

### Como implementar
Existem duas técnicas, no qual vi ser as mais comuns:

1 - Criando classes distintas, separando propriedades editáveis de dados disponíveis para consulta.

```c#
    public class CreatePlayer
    {
        public string Name { get; set; }
        public string Alias { get; set; }
        public string DefaultPassword { get; set; }
    }

    public class UpdatePlayer
    {
        public string Name { get; set; }
        public string Alias { get; set; }
        public string Password { get; set; }
    }

    public class FindPlayer
    {
        public Guid ID { get; set; }
        public string Name { get; set; }
        public string Alias { get; set; }
        public DateTime CreatedTime { get; set; }
    }
```

2 -  Separando acessos distintos de leitura e escrita, de preferência com credenciais diferentes para acesso à base de dados.

Um método deve ser _Command_ ou _Query_, nunca ambos.
**_Command_** se refere às funções de criação, alteração ou exclusão.
E por eliminação, **_Query_** são as consultas.


### Benefícios
#### - **Princípio da responsabilidade única**
Ao separar os métodos, já encontrará o código quebrado para uma única responsabilidade, o que facilitará na implementação de cobertura de testes, e também na própria manutenção.

#### - **Dimensionamento Independente**
Caso tenha um _software_ com mais requisições de leituras do que gravação, é ideal usar dois bancos de dados separados, podendo dimensionar os seus modelos de forma independente.

Além disso, podemos desnormalizar o banco de dados de leitura, o que resultará em consultas simples, junções menos complexas, e tempo de resposta rápido.

#### - **Separação de preocupação**
As regras de persistência e atualização dos dados não irão influenciar nas consultas, e entregar credenciais distintas trará menores preocupações no acesso aos dados.
Não basta estar blindado ao "_sql-injection_", mas também a atenção para erros humanos, o que acontece com frequência em projetos de objetos dinamicamente mapeados por um ORM.


**CQRS** é simples, mas que traz preocupações reais do mundo corporativo, e este conceito será referenciado em outros textos futuros, principalmente sobre tópicos relacionados à segurança da informação.

---

Originally published at [https://belintani.com](https://belintani.com/posts/cqrs-direto-ao-ponto/) on January 2, 2022.
Use enum class to avoid String errors.
Tags: java, oop, programming, mobile
Published: 2022-01-03 11:47:12

Have you got a Logic error in String before specially in Upperletter or Lowerletter?

Here is the solution, but first let's get into this problem.

assume you have a guitar market or any kind of market and the guiter class like that 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5xckf4i5nnr1qf9fwr3.PNG)

And you have a lot of guitar models and types, so when I search for a special kind I want as a customer 

When I search maybe I write small letter or a capital one so the search will find nothing as the types of guitar marked as a String value.

**So What is the Solution?**
The solution is using the **enum** class.

## **what is the enum class ?**
An **enum** is a special "class" that represents a group of constants (unchangeable variables, like final variables). 


**How to create an enum class?**
When you create a class you will choose the enum kind like this.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcrn4izb7trno8wnirdr.png)


You will save constant values in the enum class like this 

```
public enum Type {
    ElECTRIC, ACOUSTIC;

    public String toString(){
        switch(this){
            case ElECTRIC : return "Electric";
            case ACOUSTIC : return "Acoustic";
            
            
            default :
                throw new AssertionError(this.name());
        }
    }
}
```



You can change the value of constant in toString method or let it.

And when you search for it, you will write (**enumClassname.value**) 

Then you won't face any logic error in your project 

So look again at guitar class after changing every string type to enum class.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0xlb7397s3unnq8serd.PNG)


**Note:** If you are mobile developer or web developer the enum class like a spinner and you select you want from it 

_**Resources:**_
Head first object-oriented analysis and design Book 


See you Soon ^_^
JavaScript RPG Game Development | Episode 1: Getting Started With rpg.js
Tags: rpgjs, html, javascript
Published: 2022-01-03 11:42:03

---
title: JavaScript RPG Game Development | Episode 1: Getting Started With rpg.js
published: true
description: In this video series I started to play around with rpgjs to create a Final Fantasy type of browser game. Join me for the fun!
tags: rpgjs, html, javascript
canonical_url: https://www.timo-ernst.net/blog/2022/01/03/lets-build-a-final-fantasy-style-browser-game-with-rpg-js-episode-1/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9279nq8w1kt4fujciu03.jpg
---

In my childhood I loved playing games like Final Fantasy or Shining Force for Playstation and Sega Genesis which are so called JRPGs (Japanese Role Playing Games). By today’s standards they can easily be called retro as their graphics do not hold up when compared to current-gen consoles. However, I still believe that these games have a certain charm and character to them, so I wanted to try to code a JRPG myself.

## Introducing rpg.js

So, after doing some research, I stumbled over this framework called [rpg.js](http://rpgjs.dev/), which is a framework for – you guessed it – RPGs. Based on a first glance, I immediately noticed how mature it seems to be and it is actively maintained (last commit is just 14 days ago!). It’s based on TypeScript, Node and VueJs which is an amazing tech stack.

As I have pretty much zero experience with this framework, I thought, why not make this a community project? So, I kicked off this YouTube video series below in which you can join me doing first steps in creating the game. I’d love to have your input by providing ideas for the name, game mechanics and storyline. If you have anything to contribute, please don’t hesitate and put your thoughts into the comments section!

{% youtube W4SVdtY6wZs %}

## Links

- My source code: http://github.com/valnub/jrpg
- rpg.js http://rpgjs.dev
- Free 16x16px spriteset (maps + chars) https://opengameart.org/content/tiny-16-basic
- My Blog https://www.timo-ernst.net
- Twitter https://www.twitter.com/timo_ernst
Send Magento order status update message to customers using Twilio
Tags: webmethods, integration, connectors
Published: 2022-01-06 12:01:00

---
title: Send Magento order status update message to customers using Twilio
published: true
date: 2022-01-03 11:36:57 UTC
tags: webmethods, integration, connectors
canonical_url: https://tech.forums.softwareag.com/t/send-magento-order-status-update-message-to-customers-using-twilio/254251
---

## Summary

This article describes the step-by-step process of creating the Integration for sending Magento order status update to customer using the **Magento and Twilio** connectors in **[webMethods.io](http://webmethods.io/) Integration**. Check it out in the [Software AG Tech Community](https://tech.forums.softwareag.com/t/send-magento-order-status-update-message-to-customers-using-twilio/254251)!

## Pre-requisites

- The user needs to have active **Magento E-commerce** and **Twilio** account.

- Active **[webMethods.io](http://webmethods.io/) Integration** cloud tenant.

## Contents

- **Section 1:** Configure **Magento E-commerce** and **Twilio** accounts in **[webMethods.io](http://webmethods.io/) Integration**
- **Section 2:** Creating the integration for sending order status update message.
Custom ScrollBars
Tags: css, webdev, beginners, programming
Published: 2022-01-03 11:31:00

Well, 

So in my early stages of web dev, I built a few websites that had very long pages, I was into a big thought that this kinda you know the grey scroll bar sucks because it was grey and my whole design being good and this scroll bar grey made me customize the scrollbar.

I searched on google how to do it and i hardly found any.

So i would like to help beautiful people who came here with this code snippet.
Enjoy!

```css
body::-webkit-scrollbar {
  /* Required for Base of the bar for basically for setting the width ;)  */
}
 
body::-webkit-scrollbar-track {
  /* the "track" of the bar, For Customizing The Background! */
}
 
body::-webkit-scrollbar-thumb {
  /* the actual draggable element! */
}
```