teleren/devto huggingface dataset:
Atualização automática de página HTML
Tags: html, codepen, braziliandevs, webdev
Published: 2021-01-08 17:49:36

Olá pessoal, hoje irei deixar uma dica rápida de como realizar o _refresh_ (atualização) automático de uma página **HTML**.

Vamos utilizar a _tag meta_ com o atributo _http-equiv_ com valor _refresh_ e também o atributo _content_ com valor em segundos para a página aguardar para efetuar a atualização.

```html
<meta http-equiv="refresh" content="60">
```

Crie uma página HTML e adicione o código acima e observe a página atualizar sozinha após 60 segundos.

{% codepen https://codepen.io/franciscochaves/pen/zYKLNbP default-tab=html,result %}

Valeu pessoal 😎✌️!
Debugging! 
Tags: javascript, cpp, android, development
Published: 2021-01-08 17:46:48

The things is that to keep a balance in learning and implementing the things
I had like stuck on a api call for since like 3 days and yaaaa i know api had done projects on that but debugging the things may be the issue will be of backend response or from the testing team... So debugging is really important but in. The means time u shud be learning the things as well
So ya at 4th day have finally done that api task which was assigned to me in my internship program.. And seriously yaahoooo when u will do it u will fell yahooooooooooooooo....




Best regards
Siddharth 
Sde intern @stirringminds New Delhi
Podcast #FalaDev - Vamos falar de Microsserviços
Published: 2021-01-21 19:54:16

---
title: Podcast #FalaDev - Vamos falar de Microsserviços
published: true
date: 2021-01-08 17:42:39 UTC
tags: 
canonical_url: https://blog.lsantos.dev/podcast-faladev-vamos-falar-de-microsservicos/
---

Tive o enorme prazer de ser convidado para fazer parte do incrível podcast **#FalaDev** , da RocketSeat, juntamente com o Wesley Willians para podermos falar sobre **Microsserviços**!

Neste podcast falamos sobre como podemos entender microsserviços, como eles funcionam, quais são os casos clássicos, como podemos melhorar nossas arquiteturas e como podemos ser muito mais eficientes em termos de custo e também de projetos usando microsserviços!

{% youtube Fjmd-uWir0Q %}

### Links Comentados

- [Microsserviços: dos grandes monólitos às pequenas rotas](https://medium.com/@khaosdoctor/microservi%C3%A7os-dos-grandes-mon%C3%B3litos-%C3%A0s-pequenas-rotas-fbfd4ee99f36)
- [Ajude a gente a traduzir o site do TypeScript para PT-BR](https://github.com/microsoft/TypeScript-Website/issues/233#issuecomment-664529171)
- [Trabalhando com Linkerd](https://dev.to/azure/uma-introducao-a-service-mesh-com-linkerd-p2a)
- [Jaeger e Linkerd](https://dev.to/azure/saiba-de-tudo-sobre-seus-servicos-com-jaeger-e-linkerd-58a6)
- [O que são service meshes](https://dev.to/azure/elevando-o-nivel-de-microsservicos-com-service-meshes-13n2)
Test APP to SaaS Business Journey on DO's App Platform
Tags: dohackathon
Published: 2021-01-08 17:38:12

## What I built
We have built SaaS Application for Gamification.
It's called Priiize.com - Virtual Scratch-Off Cards Generator!

### Category Submission: 
Built for Business

### App Link
https://priiize.com/

### Description
Priiize.com is Virtual Scratch-Off Cards Generator!
Scratch-off Cards Gamification is a proven technique that motivates customers, employees, and learners. They create fun, engaging challenges that increase productivity and retention through incentivizing positive behaviors. 


## Background
(What made you decide to build this particular app? What inspired you?)
We are already using Digital Ocean's droplet to deploy our APIs and Front end. But we found that is difficult to manage, maintain, and mainly hard to scale as we are not from a DevOps background.
The recent incident of heavy load on the server makes us think about an alternative solution for future scaling and at that time Do's App Platform comes as a savior for us :)

### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)
Recently we came across the New DigitalOcean’s App Platform and quickly created demo apps to give a try and it's just gone smoothhhhh....
Then we moved all our existing droplets to App Platform and never went back. 
It's a really awesome experience to date
Easy to Deploy
Easy to Manage
Easy to Scale
&
Free for Static Website Deployments
What else do you need to scale your business?

### Additional Resources/Info
As of now, we are using
3 APPs to deploy our whole SaaS Application
1 Managed Database
1 Space for Images
The meaning of the '.PHONY' target inside a Makefile
Tags: todayilearned, makefile, make
Published: 2021-01-08 17:13:07

---
title: The meaning of the '.PHONY' target inside a Makefile
published: true
description: 
tags: todayilearned, makefile, make
//cover_image: https://direct_url_to_image.jpg
---

Inside the `Makefile` of a project you can find a `.PHONY` element followed by a label and then the same label used as a [target](https://www.gnu.org/software/make/manual/html_node/Rules.html#index-target) for the Makefile.

For example:

```Makefile
.PHONY: build
build:
        go build
```

`.PHONY` is actually itself a target for the `make` commandand and it denotes labels that do not represent files of the project. What does it mean?

In the general case, assuming that there are no files called __build__ in the project, when not using the `.PHONY` target, like so

```Makefile
build:
        go build
```

everytime the `make build` command is invoked it will execute the specified command (in this case `go build`). However, if there was a file named __build__, the `make build` would be bound by the presence of this file and executed only if that file was updated.

The `.PHONY` target overrides this last behaviour and let's the `make build` execute no matter of the presence of a file named __build__.

For a more in-depth overview head to the `make` command [reference](https://www.gnu.org/software/make/manual/html_node/Phony-Targets.html).
Use Power Automate to copy a Template Folder
Tags: powerautomate, sharepoint, lowcode, nocode
Published: 2021-01-08 17:09:06

When I start a project, there are usually three files that I know I'm going to need. Originally, I had template files that I would copy manually from a default folder into a new folder specifically for the project. Not a complicated process, but I only have three files. Some teams can have many files they need to copy for each new client or project! If you store your project files in SharePoint, you can take advantage of this Power Automate Instant Flow to automate your project kick-off.

The first step in creating this automation is to create a template folder in SharePoint containing all the default files you need to kick-off your project. You can store it in the same place as you want to store the project files or you can store it somewhere else. Here's mine as an example:

![View of template folder to be copied](https://raw.githubusercontent.com/Cmohan/sharepoint-copy-folder-flow/main/template-folder.png)

Once you have this folder setup, you can begin creating the Power Automate Instant Flow. The trigger is the "For a selected file" SharePoint block. This will add this flow to the SharePoint document library menu so you can trigger it from the SharePoint site itself. In the trigger block, you can also add a field so you can enter the name of the client or the project to be added the new folder.

Once the trigger is setup, you can begin adding the following blocks to build the automation flow:

1. Create new folder - This block creates a new folder using the client/project name in the document library for project files.
2. List folder - This block lists all the files and sub-folders in a folder. It doesn't go into the sub-folders though. If you have sub-folders, you'll need to repeat this block for each of those to get all the files.
3. Copy File - For each file in the folder create a new copy of the file in the new client/project folder. You can choose to keep the same name as the original file or you can give it a new name that includes the client or project name.

Here's what the automation looks like in the Flow Designer:

![View of automation in Flow Designer](https://raw.githubusercontent.com/Cmohan/sharepoint-copy-folder-flow/main/Flow.png)

This is a small automation that you can get up and running quickly. It's also a great way to get started with Power Automate and see what other automation options it has for you.
Putty connection to AWS Linux instance
Tags: cloud, aws, ssh, putty
Published: 2021-01-08 17:00:34

I have registered my personal **AWS** account today (FINALLY). The entire process was easy for me, however, I encountered an issue when I try to connect to **AWS** Linux instance from ssh within Windows.

I am always using Putty for connection to my Cloud servers. Thus I firstly tried Putty in same way I used to connect to AliCloud. Unfortunately I encountered the following error message. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4mitvpmzi51ciev54p9a.png)

Then I tried to use `ssh -i xxx.pem ...` command in CMD console. However, AWS sent back the following complaints: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yo4klawgfeusf198ttfg.PNG)
It seems a permission issue which can easily been solved using `chmod` in Linux. However, I am using Windows and I'm really not familiar with the complicated "permission" rules in Windows. Some online articles presents solution of this issue using `icacls`. However, it did not work in my case. 

Official doc of AWS has presented a really [useful solution](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/putty.html). It's quite simple and efficient. Following this tutorial, I executed **Putty Key Generator**, load my "xxx.pem" file and export an `.ppk` key file.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/41vtui2gweeeo1tueq3t.PNG)

Then in **Putty** interface, I load my `.ppk` key file (as shown below) and try the ssh connection as usual. And it works.  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b70ol1oljx2ak81gdix6.PNG)

Reference:
https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/putty.html
Remotely connect to a running docker container
Tags: docker, devops, linux, systems
Published: 2021-01-08 16:51:53

![Take control](https://dev-to-uploads.s3.amazonaws.com/i/5wf8ffut3p3gz8nkpql6.jpeg)

A moment ago, when using Jenkins at `$work`, I discovered that I could connect *remotely* to a running docker container.

It is VERY handy ! Thanks to it you can deeply debug what's wrong with a continuous integration run. There is even a "Pause" button (in Jenkins) that allows you to inspect a particular step or just avoid you the rush on fast runs.

And honestly, the first time I experimented, I found it a bit "magic" ! :grin:

Below is a detailed explanation on how to make the magic happens :smiley:

## Expose tcp connection on dockerd side
To be able to connect remotely, you have to start dockerd with the `-H tcp://0.0.0.0:2375` option to expose the tcp socket.

Edit your docker systemd service to add a tcp socket :
```bash
dockerd -H fd:// -H tcp://0.0.0.0:2375 --containerd=/run/containerd/containerd.sock
```

Reload service config:
```bash
$ systemctl daemon-reload
``` 

And restart `dockerd`:
```bash
$ systemctl restart docker
```

## Run a sample container
I will take a small `alpine` and just run a "never ending script" inside:

Write a Dockerfile:
```dockerfile
FROM alpine

COPY w.sh w.sh
CMD ["./w.sh"]
```

And a while/sleep loop `w.sh` to maintain it alive:
```bash
#!/bin/sh

while true; do sleep 2 ; echo "alive"; done
```

Build the image:
```bash
$ docker build . -t persist
```

And finally, start the container:
```bash
$ docker run -itd persist
f70b46b77105700d3420b88323d07edff9146f435a13c73029efd92197ef9030
```

## Connect from client
Now on your laptop (for instance) you can now connect to your docker container simply like this:
```bash
$  docker -H tcp://the-url-or-ip exec -ti f70b46b77105700d3420b88323d07edff9146f435a13c73029efd92197ef9030 /bin/sh
```

And you get your shell:
```bash
/ #
```

Tadaaa !

![Tadaaa](https://dev-to-uploads.s3.amazonaws.com/i/yhce6495warb8aj8zf9b.jpeg)
Omega App : Client
Tags: dohackathon, react, redux
Published: 2021-01-08 16:44:43

### Packages we need.

```json
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.11",
"axios": "^0.20.0",
"bootstrap": "^4.5.2",
"query-string": "^6.13.5",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
```

### Routes
* `/login` : Login Page
* `/signup` : Signup Page
* `/resetPassword/:token`: Reset Password
* `/verifyEmail/:token` : Verify Email
* `/dashboard` : Dashboard Page
* `/subscriptions`: Subscription Page

### Environment variables
```
* REACT_APP_SERVER_ENDPOINT=<Server API Endpoint ex: /api>
* SERVER_URL=<Server URL ex: http://localhost:5000>
```

### Reducers
* `authReducers.js` : Handle Auth data
* `errorReducer.js` : Handle Errors data
* `loadingReducer.js` : Handle Loading
* `spreadsheetsReducer.js` : Handle Spreadsheets data
* `subscriptionsReducer.js` : Handle Subscriptions data
* `userReducer.js` : Handle Users data

### Actions
* `authActions.js` : Handle Auth actions
* `errorActions.js` : Handle Error actions
* `spreadsheetsActions.js` : Handle Spreadsheet actions
* `subscriptionsAction.js` : Handle Subscription actions
* `userAction.js` : Handle User actions
Omega App: Server
Tags: dohackathon, node, mongodb
Published: 2021-01-08 16:44:18

### Packages we need.

```json
"@sendgrid/mail": "^7.2.4",
"bcrypt": "^5.0.0",
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",
"debug": "~2.6.9",
"dotenv": "^8.2.0",
"express": "~4.16.1",
"express-validator": "^6.6.1",
"googleapis": "^40.0.1",
"http-errors": "~1.6.3",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.10.2",
"morgan": "~1.9.1",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0"
```
### Our Endpoints

* `/api`: API_ENDPOINT
* `/api/docs`: API_DOCS
* `/api/auth`: AUTH_ENDPOINT
* `/signup` : AUTH_SIGNUP
* `/login` : AUTH_LOGIN
* `/verify/:token` : AUTH_VERIFY_EMAIL
* `/api/auth/verify/`: AUTH_VERIFY_FULL
* `/resend` : AUTH_VERIFY_EMAIL_RESEND
* `/recover` : AUTH_RECOVER
* `/reset/:token` : AUTH_CHECK_RESET_LINK
* `/reset/:token` : AUTH_RESET
* `/api/auth/reset/` : AUTH_RESET_FULL

* `/api/user` : USER_ENDPOINT
* `/update` : USER_UPDATE
* `/updatePassword` : USER_UPDATE_PASSWORD
* `/deleteAccount` : USER_DELETE_ACCOUNT

* `/resetPassword` : CLIENT_RESET_PASSWORD_PATH
* `/verifyEmail` : CLIENT_EMAIL_VERIFICATION_PATH

* `/api/subscriptions` : SUBSCRIPTIONS_ENDPOINT
* `/add/google` : SUBSCRIPTIONS_ADD_GOOGLE
* `/add/google/callback` : SUBSCRIPTIONS_ADD_GOOGLE_CALLBACK
* `/updateSubscription` : SUBSCRIPTIONS_UPDATE_SUBSCRIPTION

* `/api/spreadsheets` : SPREADSHEETS_ENDPOINT

### Environment variables
```
* API_ENDPOINT=<API Endpoint ex: /api>
* SERVER_ROUTE=<Inital route of server after domain name. ex: /app>
* CLIENT_URL=<Client URL ex: http://localhost:3000>
* MONGO_URI=<MongoDB URI>
* JWT_SECRET=<Random String for JWT Secret>
* SENDGRID_API_KEY=<Sengrid API Key>
* SENDGRID_FROM_EMAIL=<Email of the sender>
* GOOGLE_CLIENT_ID=<Google Client ID>
* GOOGLE_CLIENT_SECRET=<Google Client Secret>
```

### Models
* `EmailVerificationToken.model.js` : Email verification token model
* `User.model.js` : User model

### Middlewares
We need the below middlewares.
* `jwt.js`: Handle JWT Token
* `validate.js`: Handle email, username, password validation
* `authenticated.js`: Handle the authentication

### Controllers
* `auth.js` : Handle all authtication requests
* `user.js` : Handle all User related requests
* `subscriptions.js` : Handle all subscriptions (Google Accounts) related requests
* `spreadsheets.js` : Handle all spreadsheets related requests.
Omega: The Spreadsheet Manager
Tags: dohackathon, react, node, mongodb
Published: 2021-01-08 16:44:00

## What I'm building
In this hackathon, I'm building an app to manage spreadsheets from different Google accounts in one place.

Here, In this project, we will mainly use,
1. **JWT** for Authentication with Username & Password
2. **SendGrid** to send Email Verification, Password Verification URLs.
3. **Google OAuth2** to add Google Accounts
4. **Google Drive API** & **Google Spreadsheet API** to get all the spreadsheets.

### Category Submission: 
**Built for Business**
logbootstrap
Tags: node, javascript
Published: 2021-01-08 16:39:33

---
title: logbootstrap
published: true
description: how to color the logs of a nodejs application
tags: nodejs, javascript
//cover_image: https://direct_url_to_image.jpg
---

During a developer's work on a nodejs application are often used console.log to visualize the progress of code at critical points, for quick debugging, or to display any warnings and errors in your code.

The [logbootstrap module](https://gzileni.github.io/logbootstrap/) is very simple because it allows you to use colored log messages. The colors available are the same as in the BootStrap tool kit:

* green : successful message
* yellow: for a warning
* cyan: a simple piece of information
* gray: a secondary message
* blue: a very important primary message
* red: error message

Let's create a simple nodejs application:

```
$ mkdir ~/helloworld
$ cd ~/helloword
$ npm init
$ npm install logbootstrap
$ nano index.js
```
the index file.js will be a simple Endpoint API with the most classic "Hello World!"

```
const http = require('http');
const log = require('logbootstrap);

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
  log('info', 'Server running at http://' + hostname + ':' + port + '/');
  log('success', 'Success log information');
  log('warning', 'Warning log information');
  log('secondary', 'Secondary log information');
  log('primary', 'Primary log information');
  log('danger', 'Danger log information');
});
```
We run the code:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1lnyevzwym8km96gg7rg.png)

Good Colorful Code !

GitHub Projects: [https://gzileni.github.io/logbootstrap/](https://gzileni.github.io/logbootstrap/)
Question
Tags: javascript
Published: 2021-01-08 16:26:03

Hello everyone, thanks for all the help recently I've been using Script Editor on the Mac and I have a question if these lines of code works on other platforms:
 app = Appllication.currentApplication();
app.includeStandardAdditions = true;
color = app.dispalyDialog("What is your favorite color?", { defaultAnswer: "" }).textReturned;
if (color == "black") {	app.dispalyDialog("I like black too!");
} else {	 
app.dispalyDialog("Interesting, I like black myself.");
}
Intro to Arduino
Tags: arduino
Published: 2021-01-08 16:17:21

After graduating from Flatiron School I started exploring the idea of getting into robotics. I wasn't really sure where to start so I went down some rabbit holes and landed on getting the Arduino starter kit. Its a really awesome kit and comes with all the basic components to get you started. The best part about the kit is that it comes with a tutorial book. The book does a really good job at slowly introducing you to the different components through different circuit builds. 

Theres also some coding that goes into the projects which is also provided so you can learn some C++ along the way. The programming language they introduce you too is called Arduino language which is essentially a framework built on top of C++. It's been really interesting to work with, the biggest adjustment for me so far is remember the ";" is required at the end of a line, haha. 

One of my favorite projects I have worked on so far is a musical keyboard. They introduce a new concept called a resistor ladder. Which is essentially a way to connect multiple switches to the same analog input. 

The main components to this build are buttons, a piezo, resistors, and a few wires. The piezo is the device that emits the different frequencies. The different frequencies are determined by the amount of voltage that is able to go through the button whenever you press it. The way the voltage is controlled is using different levels of resistors. So the code for this is pretty simple. You basically want to write a bunch of conditional statements to emit a specific frequency depending on a range of voltage values. 

If you are interested in what the actual code looks like stay tuned for next week. Im going to get a little more in depth on what goes into coding an Arduino project. I am thoroughly enjoying the ride that I have gotten on and can't wait to see what I am able to produce in the future. Right now my end goal is to make a little droid friend that can roam around my apartment just living its best life! Thanks for taking the time to read this. Hope you have a great day!
DO Hackaton Log #4
Tags: dohackathon, react, typescript, node
Published: 2021-01-08 16:12:50

Hi devs,

My appllication is finally ready! You can go to [this link](https://dbug.xyz) right now to try it out. In case you haven't read the last posts, dbug is an application where programmers can post short project ideas or problems they are trying to solve and other programmers can offer their contact information for pair programming. Here is a demo of the features:

### Edit your contact information
![Contact change demo video](https://dev-to-uploads.s3.amazonaws.com/i/1zb4bsyn94mt4egyqv4h.gif)

It is required to have at least one of any contact information available (meet, discord or zoom). This information is not public and only gets sent to the author of projects you decide to share your contact with.

### Add a new project
![New project demo video](https://dev-to-uploads.s3.amazonaws.com/i/txgreeus4c89o5a1hevz.gif)

You may only have one active project at once. The projects stay up indefinitely until you either delete it or choose a contact offer.

### Share your contact information
![Share your contact demo video](https://dev-to-uploads.s3.amazonaws.com/i/ttbkz6ngs73ibsizeqlj.gif)

You can do this on as many projects as you want, it does not guarantee that the author of that project will be able to contact you as they may select some other contact offer. Also the project list has an infinite scroll feature.

### Receive and select contact offers
![Contact selection demo](https://dev-to-uploads.s3.amazonaws.com/i/59v983gv1wg8civqtpq5.gif)

New contact offers will show up on the project page. Once you select one, you are taken to a screen were you can see all of the contact information that was made available by that user. This will also close that project.

### What I've learned
Building this submission has given me the opportunity to learn a lot of new technologies:

* **TypeORM**
I had already worked with TypeORM before but in a much simpler capacity. Now I know a lot more about relations and queries.
* **react-query**
This I had never used before, it took a while for me to figure out how this library is supposed to be used and I considered giving up on it and just doing the axios requests manually but I'm glad I didn't, this tool is a huge time saver and makes querying an API a hundred times easier.
* **Storybook**
Also had used before but only on a very surface level. You can read my other post on this series if you want to know more about Storybook it is a great took for front-end work.

### Finalizing
Now I just need to write some readme files before making my submission. I hope you all had as much fun as I did in this hackaton!