teleren/devto huggingface dataset:
Netlify build logging with Datadog
Tags: jamstack, javascript, netlify, datadog
Published: 2021-03-02 15:39:25

[Netlify's build plugins](https://docs.netlify.com/configure-builds/build-plugins/create-plugins/) allow us to to perform a variety of custom build/deploy related tasks.  One such task might be to log deployment status in [Datadog](https://www.datadoghq.com/) for analysis. Thankfully this is easy using [agent-less logging](https://docs.datadoghq.com/logs/log_collection/nodejs/?tab=winston30#agentless-logging).

Here's what a simple log plugin might look like.

```javascript
const createLogger = require('./logger');

module.exports = {
  onSuccess: async ({ inputs: { service } }) => {
    const logger = createLogger({ service });
    logger.info('Deploy successful');
    await logger.send();
  },

  onError: async ({ inputs: { service } }) => {
    let logger = createLogger({ service });
    logger.info('Deploy failed');
    await logger.send();
  },
};

```

And below, a logger implementation using [Winston](https://github.com/winstonjs/winston#winston).
```javascript
const {
  env: { DATADOG_API_KEY, VERSON, ENVIRONMENT },
} = require('process');

function createLogger({ service }) {
  const { createLogger, format, transports } = require('winston');
  const queryString = require('query-string');
  const { combine, json, timestamp } = format;

  const query = queryString.stringify(
    {
      ddsource: `nodejs`,
      service,
      ddtags: [`env:${ENVIRONMENT)}`, `releaseVersion:${VERSON)}`],
    },
    { arrayFormat: 'comma' },
  );

  const httpTransportOptions = {
    host: 'http-intake.logs.datadoghq.com',
    path: `/v1/input/${DATADOG_API_KEY}?${query}`,
    format: combine(timestamp(), json()),
    ssl: true,
  };

  const logger = createLogger({
    level: 'info',
    exitOnError: false,
    transports: [new transports.Http(httpTransportOptions)],
  });

  return {
    info: (...args) => logger.info(...args),
    send: () => {
      const completePromise = new Promise((resolve) => {
        logger.on('finish', () => {
          clearTimeout(timeout);
          console.log(`Successfully sent logs to Datadog`);
          resolve(true);
        });
      });

      logger.end();
      return completePromise;
    },
  };
}
```
Day 64 Of 100DayOfCode: Data Visualization Using Matplotlib
Tags: womenintech, 100daysofcode, codenewbie, beginners
Published: 2021-03-02 15:36:43

Today is my 64th day of #100DayOfcode and #python. Like yesterday today also learned more from [Datacamp](https://campus.datacamp.com/courses/intermediate-python/matplotlib?ex=15). Completed some chapter related to matplotlib. Here is one code to visualize data with the help of histogram.
# Code

```python
# Scatter plot
plt.scatter(gdp_cap, life_exp)

# Previous customizations
plt.xscale('log') 
plt.xlabel('GDP per Capita [in USD]')
plt.ylabel('Life Expectancy [in years]')
plt.title('World Development in 2007')

# Definition of tick_val and tick_lab
tick_val = [1000, 10000, 100000]
tick_lab = ['1k', '10k', '100k']

# Adapt the ticks on the x-axis
plt.xticks(tick_val, tick_lab)

# After customizing, display the plot
plt.show()
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 64 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>Pandas, Matplotlib From [Datacamp](<a href="https://t.co/AuqgT6yZkY">https://t.co/AuqgT6yZkY</a>)<a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/CodeNewbies?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbies</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/O4ZtdmgUPN">pic.twitter.com/O4ZtdmgUPN</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1366772663092350977?ref_src=twsrc%5Etfw">March 2, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
3 Best Money Worth Coding Platform.
Tags: codenewbie, programming, webdev
Published: 2021-03-02 15:32:56

##Why these coding websites?
When I am web development before one year, I was confused about where to start and had a question that is what is programming and coding. It takes serval months to understand the difference between programming and coding. 

##Learn By Platform.
Nowadays programming and coding becoming easier to understand because of these website programming platforms, The three platform I personal refer for people is CODEDAMN, EDUNOIX and EDUCATIVE.IO these are my favorite website which provides many programming resources. About Web, Mobile and desktop.

#Three Website are:
 * Codedamn - https://codedamn.com
 * Educative.io - https://www.educative.io
 * Eduonix - https://www.eduonix.com

Try these Sites.
Basic config nginx with static CRA files in container
Tags: docker, react, production, nginx
Published: 2021-03-02 14:31:58

การตั้งค่า Dockerfile กับ React เบื้องต้น

## โครงสร้างโปรเจค
- src/
- production.Dockerfile
- nginx.conf
- package.json

## ขั้นตอน
1) เตรียมไฟล์ nginx
```conf
server {
 listen 80;
 location / {
  root   /usr/share/nginx/html;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;
 }
 error_page   500 502 503 504  /50x.html;
 location = /50x.html {
  root /usr/share/nginx/html;
 }
}
```

2) เขียน Dockerfile ตามนี้
```Dockerfile
# --- ขั้นตอนการ build ไฟล์ให้ออกมาเป็น static files ---
FROM node:alpine as builder
# เพื่อให้เข้าถึงไฟล์ build ง่ายๆ ให้เก็บไฟล์ไว้ในโฟรเดอร์ที่เข้าถึงง่าย ๆ
WORKDIR /app
COPY . /app
# เพื่อให้สั่งทำงานบางคำสั่งได้โดยตรงเช่นพวก webpack, carco, etc
ENV PATH /app/node_modules/.bin:$PATH
# ลง packages ต่างๆ ใน package.json
RUN yarn
# สั่งสร้างไฟล์ static files
RUN yarn build

# --- ขั้นตอนการตั้งค่า nginx ---
FROM nginx:alpine
# คัดลอกไฟล์มาจาก container ที่แล้ว
COPY --from=builder /app/build /usr/share/nginx/html
# ใส่ nginx config ที่เราตั้งเอง
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 80
# Run nginx บน foreground
CMD ["nginx", "-g", "daemon off;"]
```

3) สั่ง build ไฟล์
```shell
docker build \
-t my-react-app:v1.0 \
-f production.Dockerfile \
.
```

4) ลอง run
```shell
docker run -p 80:80 -t my-react-app:v1.0
```

ขอขอบคุณแหล่งที่มา https://medium.com/swlh/dockerizing-a-react-application-with-docker-and-nginx-19e88ef8e99a
Contribute to Open-Source without coding
Tags: opensource, development, codenewbie
Published: 2021-03-02 15:27:35

*(This is cross-posted from my podcast's [Instagram](https://www.instagram.com/tech.n.savvy/))*

Open-source software is software whose code is publicly accessible and can be modified by anyone. Contributing to an open-source project is beneficial to developers of all skill levels. You get to experience navigating large codebases, collaborating with other developers, and grow a public reputation.

From the outside, it would seem that the only way to contribute to open-source is to contribute code for bug fixes or new features. That is false. There are many different ways someone can contribute to open-source projects that don't involve submitting code.  

1. Documentation is a great way to start contributing to open-source if you like writing and are good at explaining topics. Providing documentation allows you to get a deeper understanding of the project while providing vital information to developers using the software.

2. If your talents lie in design, you could contribute to or create a style guide so that the project has a cohesive and consistent visual UI.

3. If you have a lot of knowledge about the project and like helping others, you could answer questions on the project's open issues or on Stack Overflow.

When it comes to open-source projects, it's not just about the code. It's also about building and helping the community around it. If you enjoy using some open-source software, see how you can get involved with that community!

What are some other ways people can start contributing to open-source projects?
Wappalyzer : identifies technologies on websites with this Chrome Extension
Tags: webdev, opensource, chrome, extensions
Published: 2021-03-02 15:19:40

## Concepts

Wappalyzer is a browser extension that uncovers the technologies used on websites. It detects content management systems, web shops, web servers, JavaScript frameworks, analytics tools and many more.

## Examples

### Amazon

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

### Django

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

### ReactJS

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

## Link

* [https://www.wappalyzer.com/](https://www.wappalyzer.com/)

* [https://github.com/AliasIO/wappalyzer](https://github.com/AliasIO/wappalyzer)
5 things you need to do as a new developer
Tags: beginners, webdev, codenewbie, computerscience
Published: 2021-03-02 14:45:05

If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on  [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/).

## 1. You need start now

The best time to start is now. You don't need to have everything figured out in the beginning.

Just start and your path will become clear as you make progress.

## 2. You need to be consistent

Don't code 4 hours in one day and then 0 hours for the rest of the week.

Instead code for one hour everyday.

You can code for as little as 15 minutes everyday but try to be as consistent as you can.

## 3. You need to build projects

Your job as a developer is not to complete courses/tutorials.

You need to build something.

Yes, your first project will be really bad. You don't even need to finish it. Just build something.


## 4. You need to join a community

This is the best thing you can do in the beginning. Why?

You connect with people that have the same passion as you.

You'll be more motivated to code every day.

Bonus points if you document your journey.


## 5. You need to code along when using a course/tutorial

You learn nothing just by watching a video.

You need to code yourself. Play around with the concepts you learned. Build some small projects.

Practice makes perfect.

## Conclusion

I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) .
PopCritic
Published: 2021-03-02 14:35:30

> Movies Reviewed by people, for people

PopCritic is a movie review website which is focussed on various aspects of films and help people find the best film to watch next.

[popcritic.web.app](https://popcritic.web.app)

[github.com/theabbie/PopCritic](https://github.com/theabbie/PopCritic)

## Overview

![PopCritic Desktop](https://raw.githubusercontent.com/theabbie/PopCritic/master/Images/desktop.JPG)

## How To Use?

You Need to create an account in order to post reviews and add new movies to the list.

To log in, click on the "log in" button, it only supports Google Sign-in, user details and email will be taken from Google.

It allows only single session per user, so, if you log in, all other sessions will be logged out.

Once you log in, you will be able to add new movie, to add new movies, Search for it in the search bar,

![PopCritic Search](https://raw.githubusercontent.com/theabbie/PopCritic/master/Images/search.JPG)

If you click on any movie, it will be added to the list if not already present, and, you will be redirected to the movie page.

On the movie page, you can post reviews, and a 5-star rating. You can only post 1 review per movie.

![PopCritic Search](https://raw.githubusercontent.com/theabbie/PopCritic/master/Images/review.JPG)

All your reviews will appear on your user page.

## Tech Stack

* Node.JS
* PostgreSQL
* React.JS

## Entity-Relationship Diagram

![PopCritic Search](https://raw.githubusercontent.com/theabbie/PopCritic/master/Images/ERD.png)

## Try Locally

Go to `web/popcritic` and run,

```sh
npm install
npm run start
```

## Team

* [Aditya Unnikrishnan](https://github.com/CharieBlastX7)
* [Gabriel Rajendran](https://github.com/rgab1508)
* [Abhishek Chaudhary](https://theabbie.github.io/)
* [Gregory](https://github.com/gregbg218)
Airbnb Clone 
Published: 2021-03-02 14:07:31

As a final portfolio project for my completion of my software engineering bootcamp at Flatiron, I chose to clone airbnb using react as a frontend library and ruby-on-rails a backend.  Bofore I start developing the clone, I tried to study every aspect of airbnb's webpage. 

Backend

The backend for the project was developed by using ruby-on-rails. In creating the backend, I migrated four models to represent categories, homes, cities and hosting. The hosting models is a join table model to link the other three models. The category model is used to model the different categories of postings that are hosted in airbnb. These categories include apartments, entire homes, cabins etc. While the city model is used to describe the address or location of the particular hosting. The last model is to represent the different aspects of a given hosting. Home model represents the description details of the hosting, the price and etc.  

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

In the frontend of the clone application, I used react library to create the user interface. The interface was designed to have three pages. The landing page, a signup page and a page that renders the available apartments for hire in a particular city. The user is presented with a form that the user could enter the name of the city. Moreover, the checkin and checkout dates are also rendered in the landing page. Once the user enters and clicks the search button, the user will be directed to the details page where all the apartments available
for hire. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ql3orduhiunq4xubwj5h.png)
In developing the interface, I used different libraries. Among these libraries I used google-maps-react and react-google-places-autocomplete to render google map functionalists to the application. As the user is required to pick the checkin and checkout dates, react-datepicker was implemented to render two months calendar for the user to pick the two dates.
Just published "Aprende TDD", the book
Tags: tdd, testing, outsidein
Published: 2021-03-02 13:49:26

I've just published [Aprende Test Driven Development](https://leanpub.com/tddcourse), a book in Spanish to help you to learn TDD by practice, covering all topics related, even outside-in mockist style vs classic style, and how to organize coding-dojos, among others.

The book includes a lot of examples and code exercises explained step by step in several languages, such as PHP, Python, Scala, Ruby, Golang, Kotlin and Javascript.

Currently is [available via LeanPub](https://leanpub.com/tddcourse). Nevertheless I'm considering to make printed version in Lulu.

Also, if there are enough people interested, I'm open to translate it into English.
Auto repeat requestAnimationFrame()
Published: 2021-03-02 13:40:10

We have `requestAnimationFrame()`, but it is like `setTimeout()`: we have to keep calling it.

Can we have something that is more like `setInterval()`, something we can "set it, and forget it"?

We can write our own routine:

```js
        function requestAnimationFrameRepeat(fn) {
          let continueToUpdate = true;

          function updater() {
            if (continueToUpdate) {
              fn();
              requestAnimationFrame(updater);
            }
          }

          requestAnimationFrame(updater);

          return function () {
            continueToUpdate = false;
          };
        }
```

So instead of calling `requestAnimationFrame(ourUpdateFunction)`, which is for one time only, we can call `requestAnimationFrameRepeat(ourUpdateFunction)` and get back a function `stopTheUpdateFn`.

Then `ourUpdateFunction` will be invoked automatically, every time before the JS engine is updating what is to be shown on screen.

And when we want it to stop, simply call `stopTheUpdateFn` by  `stopTheUpdateFn()`, and it will stop, immediately, with the next upcoming update not to be run at all.
Event Subscription for RDS in AWS
Tags: aws, rds, eventsubscription, database
Published: 2021-03-02 13:32:20

Amazon RDS generates a significant number of events in categories that you can subscribe to using the Amazon RDS Console, AWS CLI, or the API.

Suppose you have an requirement, where you would like to get notified about various events on the RDS such as their Availability (Instance shutdown, Instance restart), Failover, Configuration Change, AutoScaling triggered(When Storage comes down to 90%), event subscription is the tool to use.

In this post, we are going to create a Event Subscription, and check out the various steps that can be followed.

Console Method:

Go-to Event Subscription in the RDS Console, and click on Create Event.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyfj3gndp6j8n5m24xug.JPG)

Fill-out the Details as such.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/824mcwiezclgpi24mzz3.JPG)

In the above Image, we have provided Name for the Event Subscription as "Test-Event".

Target Section:
It implies on how do you want to get notified, If you already have an SNS topic, you can use that. We have selected "ARN", you must create an Amazon Simple Notification Service topic and subscribe to that topic with the Amazon SNS console or Amazon SNS API. You will also need to retain the Amazon Resource Name (ARN) of the topic because it is used when submitting CLI commands or API operations.

Source Section:
It is the type of resource this ES(Event Subscription) will consume events from.
We have List which has options as below:
  a. Instances
  b. Security Groups
  c. Parameter Groups
  d. Snapshots
  e. Clusters
  f. Cluster Snapshots.
We have used Instances for our case. You can select all Instances in the ACCOUNT for that specific REGION. Or you can select specific instances only, depends on your use-case.

Event Categories to Include:
One can select to get notified of all the Events that RDS provides, or a selection of Events depending on your use-case.
Below are the Event List from which you can choose.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yhwc7m6t2p6b3r4qgea.JPG)

Below is the Link with detail list of all the Events along with description.

https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/USER_Events.html#USER_Events.Messages

Click on Create, a Mail will be sent out to the SNS enlisted topic. Subscribe to the same, and now you will get notified for all the events via mail.

Below is the sample snippet an overall ES will look like.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxmqy4d0vdpayb0g1wfg.JPG)

One can also modify the Event later on depending on the needs, and can add/remove Instances, or add/remove Events as such.
Go - package is not in GOROOT
Tags: go
Published: 2021-03-02 13:23:26

The below error occurred when I had changed `GOPATH`, made two packages, and written some codes.

```shell
% package other/pkg1 is not in GOROOT (/usr/local/go/src/other/pkg1)
```

The cause is a package structure. Putting it together solves it.

# Error

Below is the directory structure when the error occurred.

```sh
${GOPATH}/src
|-- other
|   |-- go.mod
|   `-- pkg1
|       `-- pkg1.go
`-- prj
    |-- go.mod
    `-- main.go
```

`prj` package is unable to refer to `other/pkg1` although it is in `GOPATH`.

Codes are below.

**prj/main.go**

```go
package main

import "other/pkg1"

func main()  {
	pkg1.Func()
}
```

**other/pkg1/pkg1.go**

```golang
package pkg1

import "fmt"

func Func() {
	fmt.Println("called func in pkg1")
}
```

# Fix

To include `other` in `prj` solves the error.

```sh
${GOPATH}/src
`-- prj
    |-- go.mod
    |-- main.go
    `-- other
        `-- pkg1
            `-- pkg1.go
```

**prj/main.go**

```go
package main

import "prj/other/pkg1"

func main()  {
	pkg1.Func()
}
```
How to Install Caddy on Ubuntu 20.04
Tags: caddy, webserver, ubuntu, linux
Published: 2021-03-02 13:20:29

In this article, we'll explain you how to install Caddy on Ubuntu 20.04. This article will guide you with the installation process and host a website.

The Caddy web server is an open-source web server written in Go. It is designed around simplicity and security that comes with a number of features that are useful for hosting websites. Caddy is both a flexible, efficient static file server and a powerful, scalable reverse proxy.

####Prerequisites
A Ubuntu install dedicated server or KVM VPS.
A root user access or normal user with administrative privileges.

<a href="https://www.hostnextra.com/kb/how-to-install-caddy-on-ubuntu-20-04/">Install Caddy on Ubuntu 20.04</a>

####1. Keep the server up to date

 # apt update -y && apt upgrade -y

####2. Install Caddy

Following command will install and automatically starts and runs Caddy for you as a systemd service named caddy using our official caddy.service unit file.

First, add GPG key using following command:

 # curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo apt-key add -

Next, add repository and update it:

 # curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee -a /etc/apt/sources.list.d/caddy-stable.list

 # apt update

Finally, install Caddy using following command:

 # apt install caddy

Now, navigate to your browser and enter your server IP or domain name:

http://Server-IP

OR

http://example.com

####3. Configure Domain with Caddy

Before moving following, first set up domain's A/AAAA  DNS record at your registrar or control panel.

Note: Replace hostnextra.com with your domain name

Create a directory for your website files

 # mkdir -p /var/www/html/hostnextra.com

Next, if you are using SELinux than you need to change the file security context for web content. (Optional)

 # chcon -t httpd_sys_content_t /var/www/html/hostnextra.com -R
 # chcon -t httpd_sys_rw_content_t /var/www/html/hostnextra.com -R

Now, open Caddy's configuration file and add your domain name and change website's root directory.

 # vi /etc/caddy/Caddyfile

Replace :80 with your domain name and change the site root to /var/www/html/hostnextra.com as

Once you done with the changes reload the caddy.service to reflect the changes.

 # systemctl reload caddy

Now, create a index.html file in /var/www/html/hostnextra.com using following command:

 # vi /var/www/html/hostnextra.com/index.html

Add HTML code.

Finally, refresh the page in your browser and you will see our newly created index.html.

In this article, we have seen how to install Caddy on Ubuntu 20.04.