teleren/devto huggingface dataset:
That 70's Serverless Article
Tags: serverless, aws, devops, configuration
Published: 2020-12-21 15:12:46


---
title: That 70's Serverless Article 
published: true
description: This article has been making the rounds on Twitter & LinkedIn, inciting and resonating with people. Either “I completely disagree with this guy! 🤬” or “YES, this guy gets it! 🙏🏼”. I’m… both. He invokes both my 20’s-Jesse-thinks-he-knows-everything-and-must-own-this-wrongness and my 40’s wistfulness at simpler tooling. Let’s tackle both.
tags: serverless,aws,devops,configuration
canonical_url: https://jessewarden.com/2020/12/that-70s-serverless-article.html
cover_image: 
---

This article has been making the rounds on Twitter & LinkedIn, inciting and resonating with people. Either “I completely disagree with this guy! 🤬” or “YES, this guy gets it! 🙏🏼”. I’m… both.

<http://evrl.com/devops/cloud/2020/12/18/serverless.html>

He invokes both my 20’s-Jesse-thinks-he-knows-everything-and-must-own-this-wrongness and my 40’s wistfulness at simpler tooling. Let’s tackle both.

Serverless workflows aren’t slow; I have no idea what in Zeus’ name he’s doing. Here’s Python; all steps are milliseconds to 5 seconds:

- python index.py
- pytest
- aws lambda update-function && aws lambda invoke
- behave (depending on mock speed)

You see the logs in your Terminal/IDE. If you want to log into AWS CloudWatch to see your logs, sure, you can do that.

As an art student UI guy turned back-end, function as a service is WAY simpler. I don’t have to know anything about Unix. I can deploy it as a monolith OR a microservice. I can use both a monorepo OR repo per service. My code just works.

More importantly, I don’t have to update servers every month w/security patches & re-test and hope the latest AMI doesn’t sabotage my logs or some other whack permission again.

You do microservices because large codebases are horrible, regardless of language.

CloudFormation/Terraform/Yaml are all terrible. Dhall is nice, but we need much better tooling here.

Erlang’s deployment process is the best. The industry moving away from that model is quite sad.
Configuration of HAProxy using Ansible
Tags: ansible, haproxy, linux
Published: 2020-12-21 15:07:18

Hello everyone,

In this blog, we are going to Configure **Reverse Proxy** i.e. **Haproxy** and update it's configuration file automatically on each time a new Managed node (Configured With Apache Webserver) join the inventory

Before we start we should know what is HAProxy?

##What is HAProxy?

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

HAProxy is free, **open-source** software that provides a **high availability load balancer and proxy server for TCP and HTTP-based applications** that spread requests across multiple servers. It is written in C and has a reputation for being fast and efficient.

Let's get started...

My setup is something like this, I have configured 3 servers in my virtual machine, one is **load balancer** or Frontend and the other two are **Backend Server** 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vbgk1rcsa39htby5759d.jpg)

### Configure the Control node 

> Create an Inventory and add Frontend and Backend servers IP, username, and password.

> Check the connectivity of servers using ping command

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

> Now create Playbook 

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

In this playbook, HAProxy is installed in Frontend that is in load balancer and in Backend webserver is configured and PHP file is uploaded for demo purpose.

> HAProxy Configuration

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

> Now run the playbook

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

- Now check-in Load Balancer HAProxy is installed or not

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

Here you can see it is installed successfully!!

> Now let's check HAProxy is working or not

For this demo, I have created a PHP code that will open in the browser and will show IP address, from this we can clearly see in the backend how traffic is managed or how the load is distributed.

- from my Load Balancer or Frontend Ip i will on PHP code in the browser.

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

Here you can see PHP code works fine and notice the IP Address, this IP is of one of the Backend server.

- Now let's see what happens when I will refresh the page or when traffic comes

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

Here you can see the IP of another Backend server. That's how we can manage load in web server.

That's how we can configure HAProxy using Ansible..

Thank you!!❄
Music and News Mozendi Blog
Tags: discuss
Published: 2020-12-21 15:05:53

Music is an art form, and a cultural activity, whose medium is sound. General definitions of music include common elements such as pitch (which governs melody and harmony), rhythm (and its associated concepts tempo, meter, and articulation), dynamics (loudness and softness), and the sonic qualities of timbre and texture (which are sometimes termed the "color" of a musical sound). Different styles or types of music may emphasize, de-emphasize or omit some of these elements. Music is performed with a vast range of instruments and vocal techniques ranging from singing to rapping; there are solely instrumental pieces, solely vocal pieces (such as songs without instrumental accompaniment) and pieces that combine singing and instruments this according to the wikipedia site. News text is text that contains current or actual events.

News in the form of reports on events. There are also those who say that news is new information presented in clear, actual and interesting reading and writing.

Resource :https://mozendi.blogspot.com
Why developers dislike "no code"?
Tags: discuss, devops
Published: 2020-12-21 15:05:01

Planning to write a blog about this topic, but before I do, I would like to hear your thoughts on "no code". 

Do you like “no code”? 
What do you like/dislike about it?

Personally  I dislike the term, and I'm planning to write an article about why. 

I would like to hear your perspective first though, so hopefully my article will be more well rounded.
Artworks for the DigitalOcean App Platform Hackathon
Tags: svg, potatoes, dohackathon, trulysilly
Published: 2020-12-21 15:03:15

In this article I want to show you the artwork I created for this month's DO Hackathon.

## Idea - Potatizer

After reading the requirements and seeing the available categories, I had wanted to do a very **stupid application** related to potatoes for a long time, so I decided to choose as a category:

> **Random Roulette**: Build a wacky app that doesn’t fit into one of the categories above. Looking for some truly silly and/or fun submissions.

Since the main objective was to have a few laughs and, why not, learn something new while doing it, I thought of creating an application to **randomly generate your potato mood** of the day.

## Illustrator artworks

I started looking for emojis and potato memes for the application. As they didn't look like what I imagined, I decided to create my own with the help of [Flaticon](https://www.flaticon.com/) and my beloved [Illustrator](https://www.adobe.com/products/illustrator.html).

### Potato emojis

The moods I have prepared for this first version are:

![Potato emojis](https://dev-to-uploads.s3.amazonaws.com/i/2zjzr1atvw7wzfeowphv.png)

- Laughing
- In love
- Thug life
- Eing
- Crying
- Sick
- Angry
- Sleepy
- COVID mask

### Potato background

To give the application a more childlike and fun look I have created this background

![Potatoes background](https://dev-to-uploads.s3.amazonaws.com/i/av8n5u2omeuqbq07aell.jpg)

and exporting it to svg, I have animated it by playing with opacities and transition begin time:

```
<animate attributeType="CSS" attributeName="opacity" dur="2.5s" repeatCount="indefinite" values="0.25;1;0.25" begin="2s" />
```

The final result will be:

![Background potatoes animated](https://dev-to-uploads.s3.amazonaws.com/i/i05wuk390zt2utrgk5ti.gif)

### SEO assets

Once the basic assets for our application were created, I decided to go ahead and have everything ready to share on social networks and to install the PWA on our device.

So I prepared the favicons for our app, choosing laughing emoji as the logo:

![Icon potatizer](https://dev-to-uploads.s3.amazonaws.com/i/8cxncfuytpl3apjf2nzs.png)

And a card to share on social networks:

![Social media artwork](https://dev-to-uploads.s3.amazonaws.com/i/3bkh5mz5k7txfk9ry204.jpg)

## To be continued

In the next post, I will tell you about the progress I have been making in terms of the code, in which I am using NuxtJS with its PWA module and with the static SPA mode 🎇

I hope you find the result fun, because doing so is ✨🥔
A personal website boilerplate for lazy developers
Tags: devtoapi, typescript, scss, react
Published: 2020-12-21 14:58:20

---
title: A personal website boilerplate for lazy developers
published: true
description: Project B-TOP
tags: devtoAPI, typescript, scss, react
//cover_image: https://direct_url_to_image.jpg
---

I created an app for lazy developers who wants a personal website. I worked with React + TypeScript and it works with full of APIs. Thanks to APIs we don't have to write similar things everywhere.

It gets your name, title, and city that you live in from your GitHub profile. There is a section for your articles on dev.to. There's an about page that contains your StackOverflow reputation etc. And a very simple contact page with the formspree API.

All you need to do is write your usernames to the related fields.

For instance, you need to write your GitHub username like this:

`<Github username="github" />`

You can find an example [here](https://demirkaya.net/).

You can find the code [here](https://github.com/3mincan/b-top/).
Integrate CarsXE API & Zapier
Tags: carsxe, zapier, api, nocode
Published: 2020-12-21 14:56:39

## Connect CarsXE with 2000+ Apps
We're super excited to announce that you've been [invited](https://carsxe.us20.list-manage.com/track/click?u=54a14da813b6ec21f0d5aa7d0&id=645c142463&e=312e8f6f61) to use our Zapier integration before it's available for everyone! Zapier allows you to create a Zap in minutes, no code required! Connect CarsXE API with your favorite apps from Google Forms, Google Sheets, Trello, Stripe, Shopify, Airtables, PayPal, Slack, and so much more! See how it works [here](https://carsxe.us20.list-manage.com/track/click?u=54a14da813b6ec21f0d5aa7d0&id=ec210675f1&e=312e8f6f61)!
Steri Bucket - initiative to save water
Published: 2020-12-21 14:49:19

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ph0k5ywg2cxji7gu3r6w.png)
An equipment used to clean untreated waste water from household. It kills bacteria, viruses, protozoa and other pathogens, by UV Sterilization Principle.
## Features of Steri-Bucket : 
- Basic principle behind Steri-Bucket is UV-Filtration.
- Container is made up of Aluminum because aluminum is reflecting back harmful UV rays of wavelength 250 nm to 400 nm, and for cleaning water we need approximately 300 nm UV rays.
- Container with a capacity of 20L, can clean the water in 4 minutes.
- It kills bacteria, viruses, protozoans and other pathogens.
- It works on solar-cell, that makes it rechargeable and increase its efficiency and durability.

## Call of Crisis - Need of Steri-Bucket
> Need of Steri-Bucket arises from critical situation of water. There are 1.1 billion people about a sixth population of the world do not have access to clean and safe water. More problems arise in rural regions. According to the Food and Agricultural Organization (FAO) of the United Nations, around 1.2 billion people live in areas of physical scarcity. An estimated two-thirds of the world’s population lives in areas subject to seasonal water scarcity at least one month of the year.
In our households, too: 
- One bath uses about 80 liters of water
- A five-minute shower uses 45 liters
- When you flush your little flush, it uses around 4 liters of water
- One full load in the washing machine uses anything between 50 and 100 liters

## Water Stress Predictions
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nuurwxwdgsc4tbpp9sj7.jpg)

## Working
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aew4fxp9eyukdekqdg96.jpg)
- Household-Waste water will be fed to Steri-Bucket from inlet pipes.
- Inlet pipes will have screening plate to filtrate insoluble and solid waste from water
- Once the water is filled up to specific mark, IoT sensors comes into role and turn UV lamp on.
- UV rays are highly effective against all viruses, bacteria and protozoa. It will derive power supply from Solar cells and batteries are kept as an alternative.
- It will take up to 3-4 minutes on an average to clean the water.
- Treated water can now be taken from outlet pipe and can be used for multiple purposes like Charging underground water resources, irrigating fields, as well as with some more efficiency in model, this water can be fit for drinking too.
```This project is originally developed by my team Freak Developers at Smart India Hackathon in 2019```
Building Animeccha - Going live but not really !!!
Tags: dohackathon, digitalocean, react, javascript
Published: 2020-12-21 14:46:31

So continuing from my previous post, the app was ready enough to test on the Internet and I hooked the github repo's main branch to Netlify. 

Cool now let's test these changes on the Internet. 
The home page shows fine, the anime page shows fine and now the loading almost 500 images moment. 

![nail biting](https://media1.giphy.com/media/HThocT5vEPT9K/giphy.gif)

Tiktok Tiktok Tiktok .... Damn this is taking a lot of time. I forgot about latency that going live on Internet brings for assets. 

Okay after a good amount of seconds, the montage is loaded. 
So I started scrolling expecting the below:-
![Scrolling](https://static1.squarespace.com/static/5cc1fd04e8ba44fdd787ac7b/5cd310378408840001a87584/5cf3050b81528700010da60b/1559432380695/somuchfun.gif?format=1500w)

Instead what happened:-
![Lag gif](https://media1.tenor.com/images/16fa1ac46938420e394453cbc2b5ccc9/tenor.gif?itemid=15348457)

The images weren't scrolling smoothly as on my localhost. And yes they wouldn't dude, COZ I AM MAKING REQUEST EACH TIME WHEN THE USER SCROLLS !!!!!

So now what ?? Well just store the loaded images in React state 😎 and re-deploy. 

After few seconds, THIS WORKS!! 

![Smart](https://memegenerator.net/img/instances/67855344.jpg)

(Eventually instead of state, I chose Ref since I really didn't need a state update-render cycle)

So currently all the images are a part of my Git repo in anime specific folders and they become part of the build. Hmmm if only there was a dedicated service that could store those assets and even allow Image transformation on the fly...

Well that's where Netlify's **Large Media Service (LMS)** comes into picture. It used git's **LFS (Large File System)** to store only pointers to the assets in my github repo and the actual assets are stored by Netlify. 

And the plus point is the image transformation parameters I am getting to append to each image request and get as per the given width and height which is good to reduce network bandwidth utilisation and thus also the time. 

![proud baby](https://i.imgflip.com/4/7bk2.jpg)

Now comes the interesting part:-
Netlify LMS allows 2500 transformations per month in their free tier. But I have like 500 images in just one single scene and it only took loading 5 montages to break that limit.
So instead of asking me to upgrade my tier to paid plan for more image transformations, Netlify upgraded it to 100,000 transformations per month and I was happy that how generous they are, only to later realize that I am now being charged and if not paid within 28 days of their billing cycle, my account gets suspended. 

![pikachu suprise](https://i.kym-cdn.com/entries/icons/original/000/027/475/Screen_Shot_2018-10-25_at_11.02.15_AM.png)

So well, it was time to revisit the hackathon's requirement i.e. hosting my app on the App Platform by DigitalOcean. But that means loosing speed in images delivery or is it ?? 

Catch you peeps in the next part where we are going to leverage DigitalOcean's Spaces before we head for App Platform.
Converting an Array to JSON Object in JavaScript
Tags: javascript, languages, frontend
Published: 2021-01-12 14:07:53

---
title: Converting an Array to JSON Object in JavaScript
published: true
date: 2020-12-21 14:30:22 UTC
tags: JavaScript,Languages,Frontend,Javascript
canonical_url: https://qvault.io/2020/12/21/converting-an-array-to-json-object-in-javascript/
---

 ![javascript on laptop](https://qvault.io/wp-content/uploads/2020/12/javascript-on-laptop.jpg "javascript on laptop")

The post [Converting an Array to JSON Object in JavaScript](https://qvault.io/2020/12/21/converting-an-array-to-json-object-in-javascript/) first appeared on [Qvault](https://qvault.io).

JSON, or “JavaScript Object Notation”, is one of the most popular data exchange formats, particularly in web development. If you have an array of data but the program you’re communicating with requires an object, don’t fear, we’ll go over some easy conversion methods.

## Quick Answer – JS Array to JSON

Arrays are actually valid JSON, so if you just need to prepare your array in order to make a [fetch request](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) with it, it’s as easy as using the `JSON.stringify()` method.

```
const resp = await fetch('https://example.com', {
    method: 'POST',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify([1, 2, 3, 4, 5])
  });
```

The `JSON.stringify()` method converts a JavaScript object, array or value to a JSON string that can be sent over the wire using the Fetch API (or another communication library).

## Weird Answer – Array to JSON with indexes as keys

If you didn’t want the direct string representation of a `JSON` array, perhaps you want an object where the keys are the indexes of the array. For example:

```
["apple", "orange", "banana"]

// becomes

{
  "0": "apple",
  "1": "orange",
  "2": "banana"
}
```

To get a JSON object from an array with index keys you can use the [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) method in conjunction with `JSON.stringify` following code:

```
const array = ["apple", "orange", "banana"]
const jsonString = JSON.stringify(Object.assign({}, array))
// jsonString becomes
// {"0":"apple","1":"orange","2":"banana"} 
```

## Thanks For Reading!

Take [computer science courses on our new platform](https://app.qvault.io/)

Follow and hit us up on Twitter [@q\_vault](https://twitter.com/q_vault) if you have any questions or comments

[Subscribe](https://mailchi.mp/5c7f5c281bbe/qvault-newsletter-subscribe) to our Newsletter for more programming articles
UI Dev Newsletter #36
Tags: html, css, javascript, webdev
Published: 2020-12-21 14:29:12

- [What Makes CSS Hard To Master](https://bit.ly/3p8jvpX)
Tim Severien reflects on the CSS language and finds out what makes it hard.


- [Creating UI Components in SVG](https://bit.ly/3nBqhEv)
Sarah Drasner illustrates the possibilities that SVG opens up for UI component development by walking through and breaking down one particular use case, the timeline.


- [Creating randomness with pure CSS](https://bit.ly/3mAmDJL)
Adir Slutzki shows how to make a random card effect using pure HTML and CSS.


- [Lots of Ways to Use Math.random() in JavaScript](https://bit.ly/37AAmvT)
Jwahir Sundai showcases different creative usages of Math.random() in JavaScript, including random animation, random image and random background color.


- [Sticky CSS Grid Items](https://bit.ly/38jUTnr)
Melanie Richards explains the problem and the solution on how to make a grid item sticky.


- [Boop! - A whimsical twist on hover transitions](https://bit.ly/38gGLvi)
Josh Comeau describes how to build an animated “boop” hover effect in React.


- [Customer Experience or User Experience?](https://bit.ly/3re6op3)
Bob Salmon writes about his understanding of CX and UX terms, how they’re similar and different.


- [HTML Tags Memory Test](https://bit.ly/3p9JPA5)
Paul Foster makes a game-like demo about how many HTML tags can you remember?



Happy coding!
Introducing get-changelog v2
Tags: node, npm, changelog, javascript
Published: 2020-12-21 14:20:50

# :mag: What is get-changelog

**get-changelog** (:star: https://github.com/Clement134/get-changelog) is a collection of tools to easily find changelog files from npm packages.

Sadly at the moment there is no official way to specify location of a changelog file in an npm package. The most common way is to read *CHANGELOG.md* file in the root directory of the project. But some packages use other files or even github releases.
The purpose of these tools is to handle all these exceptions and return the *url of the changelog file*.

# New features

This new release focus on three keywords: :watch: *performance*, :dart: *accuracy* and :computer: *user experience*.

## :watch: Better performance

The main purpose of this tool is to reduce manual finding so performance is very important.

In the library many http request are tried to check every possible location. By performing *head* requests instead of *get* we have achieved a **performance boost of 30%**.

Additionally, in the previous versions some files in the txt format were analyzed. But after analysis of the changelog files of the 1000 most popular npm packages (more on that in a next article) we found that usage of those files were very uncommon compared to the analysis cost. So we have decided to analyze txt files only if the --txt option is provided. It could result in **x2 speed up for packages using github releases**.

## :dart: Increased accuracy

Due to the diversity of the possible changelog file names, it's not trivial to find the changelog file of a project. By analyzing the 1000 most popular npm packages we have managed to **add 60 exceptions for popular packages** ([exception file](https://github.com/Clement134/get-changelog/blob/master/packages/get-changelog-lib/data/changelogs.json)).

To grow up this list and keep it up to date we also added a link in the console reporter to fill a new issue for wrong changelog location.

![issue-suggestion](https://dev-to-uploads.s3.amazonaws.com/i/qrr0kdpy0scilwu8e6t6.png)

We also added **support for gitlab hosted packages**.

## :computer: Improved user experience

Some new features have been added to the console reporter such as a **new table visualization** or **the sort of updates by order of importance**.

![check-example](https://dev-to-uploads.s3.amazonaws.com/i/xw7jvjb5zr40otatyglt.png)

We also **reduced the needs of github token** making the tool work without it (but without default branch detection and github release verification).

# Conclusion

I learned a lot working on this new release and I hope it will be useful for some of you.
If you have ideas to improve these tools feel free to add a comment or write an issue in the [project](https://github.com/Clement134/get-changelog).

I am also curious to know *if some of you ever struggle finding changelog files?*