teleren/devto huggingface dataset:
Playgrounds & Sandboxes
Tags: javascript, react, notes
Published: 2020-04-25 05:59:36

Found a really neat [React playground](http://codesandbox.io/) today!

(Reposted from my [Indiehackers post](https://www.indiehackers.com/post/titans-journal-day-13-playgrounds-sandboxes-8da2b25caa))

While running node from the terminal is good for quick syntax checks, I've been using [LeetCode](http://leetcode.com/) for more involved sandbox coding. But the LeetCode React playground never worked for me, and it only provides 10 free playgrounds.

LeetCode:
![LeetCode](https://titans-finance.s3-ap-northeast-1.amazonaws.com/pub/LeetCode_BST.png)

I'm already paying for too many SaaS tools, so I started using another free playground service by [Codepen](https://codepen.io/). By default, it brings up HTML, CSS, and JS coding pads. I only want to use it for JS, so I minimized the HTML and CSS and bring up the console to cover the output. This set up is able to accomplish the same I have on LeetCode, and the console output looks beautiful on Codepen. The only catch here is that the free accounts can only do public playgrounds, which doesn't really matter to me as these are only playgrounds.

Codepen:
![Codepen](https://titans-finance.s3-ap-northeast-1.amazonaws.com/pub/CodePen.png)

These playgrounds I can easily create locally if I want to. However, I don't want to create a new React folder every time when trying something out. React requires more files in the folder and requires some kind of deployment to view the output.

Having a truly working React playground would be so much easier for trying out frontend codes--I have fallen in love with the [CodeSandbox](http://codesandbox.io/) playgrounds! (See banner image). You can choose the version of React you wanna run, plus create your own templates. You can also deploy the apps to free services like [Zeit](https://zeit.co/) or [Netlify](https://www.netlify.com/).

CodeSandbox Deployment:
![Codesandbox](https://titans-finance.s3-ap-northeast-1.amazonaws.com/pub/CodeSandbox_Deploy.png)

[CodeSandbox](http://codesandbox.io/) also has playgrounds for different stacks, including [fastify](https://www.fastify.io/)--my favorite minimalist backend framework.

With these playgrounds and testing tools, I can experiment with new ideas and or try out new codes easily, which ultimately improves the overall quality of the codebase.

What are your favorite playgrounds?
Typescript Compiler
Tags: typescript, javascript, webdev
Published: 2020-04-25 05:48:56

Typescript is rapidly gaining momentum. So, today I thought I talk about it a little. Here is an overview of the typescript architecture.

## Typescript Architecture

Overall the typescript architecture is 

```
                                                                |------------|
                           |----------------------------------> | TypeScript |
                           |                                    |   .d.ts    |
                           |                                    |------------|
                           |
|------------|          |-----|               |-----|           |------------|
| TypeScript | -parse-> | AST | ->transform-> | AST | ->print-> | JavaScript |
|   source   |    |     |-----|       |       |-----|           |   source   |
|------------|    |        |          |                         |------------|
                  |    type-check     |
                  |        |          |
                  |        v          |
                  |    |--------|     |
                  |--> | errors | <---|
                       |--------|

```

Let us now discuss each step briefly:

1. Parse: It is a traditional recursive descent parser, tweaked a bit to support incremental parsing, that emits an abstract syntax tree (AST). It is a tree that helps in identifying which files are imported in a file.

1. Type Checker: The type-checker constructs a symbol table and then performs type analysis of every expression in the file, reporting errors it finds.

1. Transform: The transform step is a set of AST to AST transformations that perform various tasks such as, removing type declarations, lowering module and class declarations to ES5, converting async methods to state-machines, etc.

1. Print: Actual conversion of TS to JS the most expensive operation of the whole process.

So, what is the use of all this? Actually typescript provides some extension points which we change the output and make many awesome things.

# Extension points

TypeScript supports the following extension points to alter its output. You can: 

1. Modify the TypeScript source it sees (CompilerHost.getSourceFile)

1. Alter the list of transforms (CustomTransformers). You can read about how to create a custom transform which is the most recommended way to change a typescript program [here](https://dev.doctorevidence.com/how-to-write-a-typescript-transform-plugin-fc5308fdd943).

1. Intercept the output before it is written (WriteFileCallback)

It is not recommended to alter the source code as this complicates the managing of source maps, and is not supported by TypeScript's language service plug-in model.

> Let me know your thoughts on this. Would you love to have more such articles?
VS Code debug com ts-node e ts-node-dev no Docker
Tags: dev, debug, typescript, vscode
Published: 2020-04-28 14:56:17

---
title: VS Code debug com ts-node e ts-node-dev no Docker
published: true
date: 2020-04-25 05:26:13 UTC
tags: Dev,debug,typescript,vscode
canonical_url: https://marquesfernandes.com/vs-code-debug-com-ts-node-e-ts-node-dev/
---

Se você está tendo problema para debuggar no VS Code os seus [projetos com Typescript](https://marquesfernandes.com/desenvolvimento-otimizado-em-nodejs-com-typescript-docker-e-eslint/) que usam ts-node ou ts-node-dev, como linhas erradas no debbuger ou ele não selecionando nenhuma linha, não se preocupe, a solução é simples.

Por algum motivo o debugger do VS Code se confunde ao tentar interpretar os arquivos .map e acaba selecionando as linhas erradas, o que pode inviabilizar o uso do debbuger na sua aplicação. Essa solução serve também para quem estiver desenvolvendo com [Docker](https://marquesfernandes.com/conteineres-e-docker-o-que-e-e-para-que-serve/).

Explicarei passo a passo as configurações para que você identifique qualquer possível problema em seu projeto.

## Configurando o package.json

Ele deve incluir o `ts-node` ou `ts-node-dev` nas suas dependências:

```
"devDependencies": { "ts-node": "8.9.0", "ts-node-dev": "1.0.0-pre.44",}
```

Crie um script para rodar o seu projeto com ts-node-dev ou ts-node:

```
"scripts": { "dev": "ts-node-dev --inspect=0.0.0.0:7001 --exit-child --respawn src/index.ts",}
```

### Configurando seu tsconfig.json

Precisamos sempre habilitar a opção de `sourceMap` em `compilerOptions`, essa opção faz com que o compilador gere os arquivos de mapeamento necessários para o debug funcionar corretamente:

```
"compilerOptions": { ... "sourceMap": true}
```

## Configurando o debugger do VS Code

Crie ou modifique seu `.vscode/launch.json` . Não esqueça de configurar para a porta que configuramos nosso script de execução no`package.json` .

```
{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "attach", "name": "Docker: Attach to Node", "port": 7001, "address": "localhost", "localRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "/app/\*": "${workspaceRoot}/\*" }, "remoteRoot": "/app/" }]}
```

A sacada está aqui na propriedade `sourceMapPathOverrides`, precisamos explicitamente indicar para o debugger qual o caminho ele deverá seguir dos arquivos sourcemap para os arquivos dentro do contêiner Docker.

```
"sourceMapPathOverrides": {
  "<WORKDIR>/\*": "${workspaceRoot}/\*"
}
```

Existe uma [issue em aberto no repositório do Typescript](https://github.com/Microsoft/vscode-recipes/issues/187)sobre esse problema, por enquanto a solução é usar essa configuração.

Agradecimentos a solução original: [https://medium.com/@mitsuhideohi/debugging-uncompiled-typescript-code-running-on-a-docker-container-213418ab2b1f](https://medium.com/@mitsuhideohi/debugging-uncompiled-typescript-code-running-on-a-docker-container-213418ab2b1f)

O post [VS Code debug com ts-node e ts-node-dev no Docker](https://marquesfernandes.com/vs-code-debug-com-ts-node-e-ts-node-dev/) apareceu primeiro em [Henrique Marques Fernandes](https://marquesfernandes.com).
Is it possible to nest an array in a JavaScript object?
Tags: javascript, explainlikeimfive, webdev, beginners
Published: 2020-04-25 05:25:27

So I've gotten to JavaScript objects and it's very cool. Almost cooler than arrays but I've got an issue. I know it's possible to nest objects in arrays and I've done them but I can't seem to do it the other way round.

I've googled this and I haven't gotten a satisfactory response.

Thanks.
Export pbix file from Power BI service via PowerShell
Tags: powerbi, powershell
Published: 2020-04-25 05:08:24

---
title: Export pbix file from Power BI service via PowerShell
published: true
description: Export pbix file from Power BI service via PowerShell
tags: PowerBI,PowerShell,
---

Power BI let's you download pbix from UI but you can also export it via API.

[Download a report from the Power BI service to Power BI Desktop](https://docs.microsoft.com/en-us/power-bi/service-export-to-pbix)

[Power BI Rest API: Reports - Export Report](https://docs.microsoft.com/en-us/rest/api/power-bi/reports/exportreport)

Power BI team also released PowerShell module for PowerBI. So I explain how you can download pbix file via PowerShell.

# Check the Report Id

Open a report on Power BI service and confirm the report id.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yq61tf9o8qdue90mhhml.jpg)

# PowerShell

Open PowerShell as Administrator and install PowerBI module.

```powershell
Install-Module -Name MicrosoftPowerBIMgmt
```

Then login to Power BI service.

```powershell
Login-PowerBI
```

Finally download pbix file.

- Replace ReportId
- Replace OutFile

```powershell
$date = (Get-Date).ToString("yyyyMMdd")
$ReportId = "960e6b3d-b1ce-49fb-8e87-201d6e02f1e0"
$OutFile = "C:\Users\kenakamu\Desktop\test$date.pbix"

Invoke-PowerBIRestMethod -Method GET `
-Url https://api.powerbi.com/v1.0/myorg/reports/${ReportId}/Export `
-ContentType "application/zip" -OutFile $OutFile
```
It fails if the file already exists, so I use date to make unique name.
Python resource limitation
Tags: python
Published: 2020-04-25 04:18:49

---
title: Python resource limitation
published: true
description: Specifying the exact amount of resource in python using built-in modules
tags: python
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/07b2i1ubhj6rei0c1vly.jpg

---

It turns out that you can explicitly specify the number of resources for a particular application in Python. By resources, I mean CPU, memory, number of processes, number of open files, call stack, etc. Python's [resource](https://docs.python.org/3/library/resource.html) module in the standard library gives you an easy way to do that and more.

An example of CPU time limitation:

```python
import signal
import resource


def time_exceeded(signo, frame):
    raise SystemExit('Time\'s up!')

def set_max_runtime(seconds):
    _, hard = resource.getrlimit(resource.RLIMIT_CPU)
    resource.setrlimit(resource.RLIMIT_CPU, (seconds, hard))
    signal.signal(signal.SIGXCPU, time_exceeded)

if __name__ == '__main__':
    set_max_runtime(15)
    while True:
        pass
```

Result:
```bash
Time's up!
```

In this program `resource.setrlimit()` is used to set a soft and hard limit on a certain resource.

A soft limit is a current limit, which can be reduced or increased by the process over time. When an operating system reaches the soft limit, it usually limits or notifies the process by a signal.
The hard limit is the upper limit of the values that can be used for the soft limit. It can only be lowered to the soft limit and can never be raised by the user process. To raise the hard limit, you must be a superuser.

Example of limiting the number of processes:

```python
import signal
import resource
import multiprocessing

def set_max_processes(n):
    _, hard = resource.getrlimit(resource.RLIMIT_NPROC)
    resource.setrlimit(resource.RLIMIT_NPROC, (n, hard))

if __name__ == '__main__':
    set_max_processes(2)
    def f(x):
        return x*x

    p = multiprocessing.Pool(5)
    print(p.map(f, [1, 2, 3]))
```

Result:
```bash
BlockingIOError: [Errno 11] Resource temporarily unavailable
```

It would be best to check the [documentation page](https://docs.python.org/3/library/resource.html) of the resource module to find out what other resources can be restricted.

------

**Thank you for reading!**

Any questions? Leave your comment below to start fantastic discussions!

Check out [my blog](https://luminousmen.com/) or come to say hi 👋 on [Twitter](https://twitter.com/luminousmen) or subscribe to [my telegram channel](https://t.me/iamluminousmen).
Plan your best!
Blockchain dev with PYTHON3
Published: 2020-04-25 03:56:40

I started working on Blockchain dev with PYTHON. The app below gives you the balance of your Ether. A work in progress, but excited at where this will go.


"""
from web3 import Web3

infura_url = 'https://infura.io  info here'
web3 = Web3(Web3.HTTPProvider(infura_url))

print(web3.isConnected())

print(web3.eth.blockNumber)

balance = web3.eth.getBalance('your key here')

print(web3.fromWei(balance, 'ether'))

"""


https://web3py.readthedocs.io/en/stable/web3.eth.html
#FRANCNSTEIN © 2020 | Created 𝗐𝗂𝗍𝗁 ❤
Covid'19 Pandemic IT Transformation
Tags: workfromhome, remotejob, covid19, technology
Published: 2020-04-25 03:53:10

---
title: Covid'19 Pandemic IT Transformation
published: true
description: We are adopting new work pattern. 
tags: #workfromhome, #remotejob, #covid19, #technology
---
Covid'19 Pandemic transform our IT Industry. Most of the company opt the Remote work and learning how to manage. Other hand people also facing challenges but slowly they adopt this culture. There are lot of tools available on market to mange our communication eg Skype, Team, Zoom, Google Meet etc. 

Advantage of remote job is we can work from any where and we can avoid our expenses by paying high rent, shopping etc. And can stay in our native place along with parents. By opting this we stay healthy, good food, less accident and contribute to build our nation etc.

E-learning, E-Commerce, Conference, Security sector are trying to deliver the best service to people. Also these company making their products more secure and user-friendly. As people are more depend on the technology. Most of the things are online. We should always ready for challenges and learn new things.
How to change commit message?
Tags: git, github, productivity
Published: 2020-04-25 03:20:55

# How to change commit message?


If you mistakenly wrote the wrong message **`git commit -m "the wrong message"`**, 
there is a command called **`git rebase -i HEAD~n`**. 
( Thank God !!! )

### *1º STEP*: KNOW WHERE YOUR COMMIT IS LOCATED.
--------------------------------------------------

But before changing the commit message, you need to know the position of the commit in chronological order. For that, just run the command **`git log --oneline`**, something like this will appear:

**`93ed9ab message 1` -> last commit.**

`93ed9ab message 2`

`93ed9ab message 3`

**`93ed9ab message 4` -> the wrong message !**

Now we know the position of the message !

### *2º STEP*: RUN THE CHANGE COMMAND
-------------------------------------------

To update the message of this commit in position 4, we need to run the command as follows: **`git rebase -i HEAD~4`**.

Next, a file in your terminal will open a sequence of commits as follows:

**`pick 93ed9ab message 4` -> the wrong message !**

`pick 93ed9ab message 3`

`pick 93ed9ab message 2`

`pick 93ed9ab message 1`

### *3º STEP*: SET THE COMMIT THAT WANTS TO CHANGE THE MESSAGE.
------------------------------------------------

To change the commit message we need to change the word **`pick`** by **`reword`** in the message that we are going to change, as follows:

### ! Tip for inserting or editing file in windows git bash:
1- At the terminal:
* Press the **`I`** key and start editing the file.
* When finished editing or inserting, press the **`ESC`** key, and then to save the edition type **`:wq`** and press **`ENTER`**.

After the change it will look like this:

**`reword 93ed9ab message 4` -> the wrong message !**

`pick 93ed9ab message 3`

`pick 93ed9ab message 2`

`pick 93ed9ab message 1`


Then save the file and close it.

### *4º STEP*: CHANGE COMMIT MESSAGE


Soon after, another file will be opened for editing the commit message, appearing as follows:

**`message 4`**

 Follow the previous steps to edit and save the file and ready commit message changed. \o/

 ### *5º AND LAST STEP*: SEND CHANGES TO GITHUB FORCING THE **`git push`**.
 -------------------------------------------------


Now we need to commit the changed message to github. Run the following command:

 **`git push --force`**

Ready change of the completed message and available on the remote server ! . \o/


 #### **Congratulations !!!**
 #### **GOOD STUDIES !**
 -------------------------------------------------

 **Author:** Alef Ojeda de Oliveira.

 **github:** [nemuba](https://github.com/nemuba).

 **linkedin:** [alef-ojeda](https://www.linkedin.com/in/alef-ojeda/).
Hosting a website locally.
Tags: php, apache2, mariaDB, hosting
Published: 2020-04-25 03:17:09

Till this day I was using PHP servr (PHP -S) on Android (termux) to host a website locally. Now I want to use a database too. So I'm planning to host the website with Apache2. I've downloaded Apache2, PHP and MariaDB on Android with termux. Now I dont know how to integrate them. I hope someone understand me. Thanks in advance.
How to create own Giphy clone in React
Tags: react, css, reactnative, javascript
Published: 2020-04-25 03:00:55


![Giphy clone in React](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/04/giphy-3.gif?fit=750%2C422&ssl=1)

This article is for the React Beginners who wants to create something cool using there React skills. We are basically gonna create a Giphy clone here. I think you already have used Giphy gifs on social media. This article is gonna be straight to the point with all necessary items.

## [Live Demo](https://giphyhub.netlify.com/)

## [Source Code](https://github.com/narendersaini32/giphyhub)

Last year I created a Giphy clone using the Giphy APIs to improve my skills.

The whole Giphyhub project is divided into 3 parts.

## [1. API keys](https://developers.giphy.com/docs/api/#quick-start-guide)

The first step is to get the API keys so that we can make API calls to the giphy and get the list of gifs to display on our project. For that you basically need to create an APP on giphy developer website and after creating the app you need to generate the keys.

## [2. Get Gifs](https://developers.giphy.com/docs/api/endpoint#trending)

There is a lot of ways to get the Gifs. One simplest way is to make a Request to the  [trending](https://developers.giphy.com/docs/api/endpoint#trending)  api which simply gonna return you the list of trending gifs. You can also try random, search, translate and other apis to get the list of gifs.

```
api.giphy.com/v1/gifs/trending
```

Request Parameters:

Example:

Description:

**api_key:** _string(required)_

`YOUR_API_KEY`

GIPHY API Key.

**limit:** _integer (int32)_

`20`

The maximum number of objects to return. (Default: “25”)

**offset:** _integer (int32)_

`5`

Specifies the starting position of the results. Defaults to 0.

**rating:** _string_

`g`

Filters results by [specified rating](https://developers.giphy.com/docs/optional-settings#rating). If you do not specify a rating, you will receive results from all possible ratings.

**random_id:** _string_

`e826c9fc5c929e0d6c6d423841a282aa`

An ID/proxy for a specific user.

## 3. Display the Gifs

After getting the list of Gifs you basically need to display those gifs in your cards/ normal elements that’s up to you. To make it look good you can add various stuff like transition, hover effects and sharing options as well.

Those are the basic stuff to create the Giphy Clone.

Apart from that you can also add few extra features likes.

-   Search bar for searching the Gifs.
-   Different tabs/menu for showing Trending, searched, sticker Gifs.
-   Auto load new list on scroll.
-   Custom designs for your cards.
-   Download options.
-   Sharing to social media.

You can find all the source code on below repo on Github. Feel free to use it.

## [Live Demo](https://giphyhub.netlify.com/)

## [Source Code](https://github.com/narendersaini32/giphyhub)

[Top time picker packages for React](https://blogreact.com/time-picker-packages-for-react/)
Install docker on Linux
Tags: docker, linux, ubuntu, archlinux
Published: 2020-04-25 02:26:50

Run the following command to install docker on Linux.

####*Ubuntu*
***$sudo apt install docker.io***
####*Arch Linux*
***$sudo pacman -S docker*** 
####*Fedora*
***$sudo dnf install docker***
####*CentOS*
***$sudo yum install docker***

Check if the docker is running with the following command 
***$sudo docker ps***

But, if you will run it without *sudo* you will get the following error:

#####Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.40/containers/json: dial unix /var/run/docker.sock: connect: permission denied#####
This happens due to the permission issue as the current user is not having permission to run docker. 

Run the below command to add the current user to ***docker*** group
***$sudo usermod -a -G docker $USER*** 

You ***must*** logout and login or restart to let the system run group policy again and add the current user to the docker group
Run below command after re-login

***$docker ps -a*** (to see all processes - running/exited)

To check successful installation of the docker
***$docker run hello-world***
Output
--------
*Hello from Docker!
This message shows that your installation appears to be working correctly.*

***Congratulations! you successfully installed docker on your system***

###Happy dockering! & keep learning!
How to possibly fix your npm globally installed binary not being found
Tags: npm, node, nvm
Published: 2020-04-25 20:47:40

---
title: How to possibly fix your npm globally installed binary not being found
published: true
date: 2020-04-25 02:09:01 UTC
tags: npm, node, nvm,
canonical_url: https://www.gilcreque.blog/2020/04/24/how-to-possibly.html
---

This line in my `~/.npmrc` file has been killing my sanity for longer than I want to admit.

> `prefix=/Users/myusername/.nvm/versions/node/v10.0.0`

If your globally installed npm binaries are not being found it could be because somehow you have a prefix set like the one above. I’m using nvm and I could not figure this out. All I had to do was delete this line and my binaries were finally installing in to the correct directory. I slayed the beast just now thanks to [this handy issue comment](https://github.com/nvm-sh/nvm/issues/1954#issuecomment-442275974).
Architecture for High-Throughput Low-Latency Big Data Pipeline on Cloud
Tags: bigdata, analytics, cloud, architecture
Published: 2020-04-25 01:02:20

*Scalable and efficient data pipelines are as important for the success of analytics and ML as reliable supply lines are for winning a war.*

---

For deploying big-data analytics, data science, and machine learning (ML) applications in real-world, analytics-tuning and model-training is only around 25% of the work. Approximately 50% of the effort goes into making data ready for analytics and ML. The remaining 25% effort goes into making insights and model inferences easily consumable at scale. The data pipeline puts it all together. It is the railroad on which heavy and marvelous wagons of ML run. Long term success depends on getting the data pipeline right.

This article gives an introduction to the data pipeline and an overview of architecture alternatives.

[Continue reading »](hhttps://www.ml4devs.com/articles/scalable-efficient-big-data-analytics-machine-learning-pipeline-architecture-on-cloud/)