teleren/devto huggingface dataset:
Cara Mengaktifkan GZIP di Nginx untuk Ubuntu Server
Tags: nginx, ubuntu, linux, security
Published: 2021-10-04 05:07:54

GZIP adalah sebuah jenis kompresi data yang sering digunakan. Pada tutorial ini kita akan belajar tentang bagaimana cara mengaktifkan GZIP di Nginx untuk mengkompres konten ataupun data, hal ini akan mengurangi ukuran konten yang dikirim ke pengunjung website sehingga proses penyajian konten menjadi lebih cepat, dan juga meningkatkan kinerja dari website tersebut.

Untuk dapat mengaktifkan kompresi GZIP di Nginx, Kamu membutuhkan modul dari Nginx yaitu `ngx_http_gzip_module`. Modul ini akan mengkompres semua respons HTTP (file) yang valid menggunakan metode GZIP. Modul ini berguna untuk mengurangi ukuran transfer data dan mempercepat halaman web untuk aset statis seperti JavaScript, file CSS, dan lainnya.

Baca Juga : [Cara Konfigurasi HTTPS Nginx di Ubuntu](https://ruangkoding.id/cara-konfigurasi-https-nginx-di-ubuntu/)

## Langkah-langkah Mengaktifkan GZIP di Nginx
Edit file `/etc/nginx/nginx.conf` atau buat file konfigurasi baru bernama `/etc/nginx/conf.d/static_gzip.conf` :
```
sudo nano /etc/nginx/nginx.conf
```
Kemudian scroll sampai ke bagian Gzip Settings lalu uncomment sehingga isinya menjadi seperti berikut :
```
##
# Gzip Settings
##
 
gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# Specify the minimum length of the response to compress (default 20)
gzip_min_length 500;
```
 
Setelah itu simpan dan tutup file lalu lakukan verifikasi bahwa tidak ada kesalahan dalam file konfigurasi tersebut :
```
$ nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
```

Jika tidak ada pesan error, maka kita bisa mengaktifkan GZIP di Nginx dengan cara merestart nginx dengan perintah berikut :
```
sudo service nginx reload
```
atau dengan perintah
```
sudo systemctl reload nginx
```
ataupun juga dengan perintah berikut :
```
sudo /etc/init.d/nginx reload
```
Setelah itu kita dapat mengecek apakah aktivasi GZIP di Nginx sudah berhasil dengan perintah curl :
```
curl -I -H 'Accept-Encoding: gzip,deflate' https://nama-domain-kamu/file.css
```
Kemudian hasilnya adalah sebagai berikut :
```
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 05 Mar 2017 18:45:31 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Vary: Accept-Encoding
X-Whom: l1-com-cyber
Strict-Transport-Security: max-age=15768000; includeSubdomains
Link: ; rel="https://api.w.org/"
X-Varnish: 1812270 1794298
Age: 475
Via: 1.1 varnish-v4
Front-End-Https: on
Content-Encoding: gzip
```
Jika terdapat baris seperti Content-Encoding: gzip berarti proses aktivasi GZIP di Nginx sudah berhasil. Silahkan dicoba dan semoga bermanfaat.
Divtober Day 3: Quick
Tags: codepen, divtober, css, art
Published: 2021-10-04 04:09:45

---
title: Divtober Day 3: Quick
description: An animated version of Aesop's The Hare and the Tortoise drawn using CSS and a single HTML element for Divtober
published: true
tags: codepen,divtober,css,art
series: divtober
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rbj287liszmcl7it07w.png
---

An animated version of Aesop's The Hare and the Tortoise drawn using CSS and a single HTML element for [Divtober]():

{% codepen https://codepen.io/alvaromontoro/pen/LYLozab %}

If it goes too quick (or is it fast?), here is a screenshot of the animation:

![A tortoise on a skateboard with a rocket attached to its shell reaches the finish line (with the word Meta in Spanish) ahead of a sad/surprised hare](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rbj287liszmcl7it07w.png)

----

Something I learned from coding this one: Safari has some type of problem with the radial gradients when they have a value of 100%. It shows them squared. An easy hacky solution: use 99.9% instead of 100%.
Async + Await
Tags: node, javascript, npm
Published: 2021-10-04 03:48:59

## What is control flow?
It is the **order** in which statements, instructions, or functions **are executed in our code**. JavaScript is an *asynchronous* language, meaning that it reads code line by line, from top to bottom.

If there is a line that needs to *fetch* any information from a database, for example, it will kick off that data fetching and 
continue reading the next lines immediately, instead of waiting for the fetching to be done. 

JavaScript being *asynchronous* makes it difficult to write any code that will suddenly stop or block any application process. In the past some of the solutions for this issue were implementing callbacks, which is *a function that gets passed as the last argument of another function*. 

This was fine until you encounter what developers call **Callback Hell**, which is a callback within a callback, within a callback, and so on, which makes it very difficult to read and maintain the code. 

## What is a promise?
A **promise** is the *state of the result that gets return*, so instead of having 10 lines of code indented with all those callbacks you can do it step by step. If something bad happens to the data, then you have an error handling, such as try catch. If you get the data successfully, then you execute a code, and like this, you write `.then` for each action that you want. 

**Async + Await** is the same as promises but with a better syntax. Rather than having `.then`, we can put `await` in front of the promise and it will temporarily freeze that line of code until the promise is *resolved* or *rejected*, and then continues reading the following lines.

`promises.all()` are **Mega promises**, which are no other thing than a promise made of many promises, and it will return a promise where it will only resolve itself when all pieces of data are resolved. 

## Browser API's

Most new browser API's are build on native promises. **Fetch** is the way to get data from an API, so we can use await fetching data. 

The fetch API is like a *double promise*, because you fetch some data from your API and then you need to *convert that data* (most of the time we want to convert it into JSON). **Axios** is also based on promises and they have some JSON defaults, so we don't need to convert the data.

JS's `util` package has a **promisify** function that *converts callback-based functions to promise-based functions*, so we can use our code on callback-based API's.

Since **Async + Await** is not built in every browser, something that we can do in order to make our code compatible with everything, is to go to Babel.com and *convert the code*.

## Error handling
Error handling methods, such as `try-catch`, let you place the code that you want to execute in your program in the `try` part, and if anything happens, any errors can be handle in the `catch` part.

There is no way to **abort or cancel a promise**, when, for example, you have two fetch requests going at the same time. One thing that you can do is `abortController()`, which will *cancel one or more web requests*.
Prueba de los programas
Published: 2021-10-04 03:24:58

Este artículo fue creado para una tarea de la Universidad Francisco Gavidia, las imágenes las extraje de [Pega Community](https://community.pega.com)

# Experiencia propia creando prueba de los programas
En mi trabajo he desarrollado pruebas para escenarios completos del sistema así como pruebas unitarias, debido a que utilizo una herramienta low-code conocida como [Pega](https://www.pega.com/) esto es bastante sencillo.

En Pega ya se tienen configuraciones como plantillas que se pueden programar que se les llama rule, para hacer pruebas unitarias utilizamos una "Test Case" rule, donde básicamente se escribe un resultado esperado de otra rule que puede setear información por ejemplo: 

![Ejemplo de Test Case](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhas7u7e6t458h5ui3o4.png)
 
En este caso se espera que para la Data Page Customer, cuando se le pase un parametro de ID = Cust-1, que corra en menos o igual de 0.01 segundos y que tenga un output donde la Data Page se le setee el ID a "Cust-1" y el name a "AmCo".

Se puede tener varios test cases en un proceso para hacer distintas pruebas unitarias.

![Como se ven los test case de una rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1apzc7ccr4w1zmqjc2rn.png)

Para probar un escenario completo utilizamos otra rule llamada "Scenario Test Case" que hacen una prueba completa de un escenario con la UI, [vínculo un video para una demostración] (https://www.youtube.com/watch?v=z_Cs8RbTFYE) es una funcionalidad parecida a Cypress, pero que ya está integrada en el sistema. 
 

# Tipo de prueba que no he probado anteriormente
Basado en el [anterior articulo.](https://dev.to/esrene99/aspectos-a-considerar-en-la-prueba-de-un-programa-3m9b)

Una prueba de instalación es algo que no he realizado antes, al menos con la intención de hacer la prueba propiamente descrita, imagino que este tipo de prueba las hace más frecuentemente IT, y me pareciera bastante interesante si equipos de IT corren un script para validar todos los programas funcionen de la manera esperada en un equipo para evitar hacer pruebas manuales en los equipos de todos los clientes.
Is it possible to do triangular arbitrage on Coinbase?
Tags: wolfram, finance, tutorial, crypto
Published: 2021-10-04 02:49:11

> Triangular arbitrage is the result of a discrepancy between three foreign currencies that occurs when the currency's exchange rates do not exactly match up. These opportunities are rare and traders who take advantage of them usually have advanced computer equipment and/or programs to automate the process. - [Investopedia](https://www.investopedia.com/terms/t/triangulararbitrage.asp)

### Illustration of how it works?

Let's use a fictitious ideal example.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24jed60iwksryk66lyk7.png)
 

You can see here that if you have 1 unit of `USDC` you can sell it for 3 units of `BTC`. Then you can sell 3 units of `BTC` for 1 unit of `ETH` each so you get 3 units of `ETH`. Now, you call sell 3 units of `ETH` for 2 units of `USDC` each, so you get 6 units of `USDC`. Thus by going in such a cycle you can make initial investment of 1 unit into 6 units. Pretty sweet deal 🚀🚀🚀


Let's try seeing if we can do the same thing on Coinbase Pro and make some real 💸. 

### How to get data?
- After reading [Coinbase API docs](https://docs.cloud.coinbase.com/exchange/reference/exchangerestapi_getproducts)

{% replit @Bobrinik/Coinbase %}

You will get trading pairs that are available on Coinbase Pro.

You can save them to a file and then load them into your Python script to do the analysis.

## Let's explore it 🔬

I decided to analyze this data with Wolfram Language since it's much easier and faster.

- [Interactive example in Wolfram Cloud](https://www.wolframcloud.com/obj/9d469f68-3792-42f9-9929-b77894975277)

Here is how the directed graph of trading pairs looks like.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59z7o9x8ebx9dnkp9qco.png)
 
  

Now, we need to find out if there are any cycles that we can exploit to do Triangular Arbitrage.

 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qewrof7qqknb8l2fwsj.png)
 

Interestingly, there are no cycles within the trading pair graph. So it seems that you cannot do triangular arbitrage within the broker without withdrawing your money and then buying crypto again 😞

- View live triangular arbitrage opportunities on Binance
    - https://eugenioclrc.github.io/binance-crypto-triangular-arbitrage/
Adding Dynamic Css Background Image Using Styled Components In React
Tags: react, css, javascript, styledcomponent
Published: 2021-10-04 02:10:17

```
import React from "react";
import styled from "styled-components";


const Home=()=>{
return ( 
<Wrap backgroundImage={backgroundImage}> 
</Wrap>
)
}


const Wrap = styled.div`
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: ${(props) =>
    `url(${require(`../images/${props.backgroundImage}`).default})`};
  display: flex;
  flex-direction: column;
  justify-content: space-between; //vertical alignment because of flex direction column
  align-items: center; //horizontal alignment because of flex direction column
`;

```
The Only Github Link You Wanted To Know
Tags: github, programming, opensource, productivity
Published: 2021-10-04 02:00:53

So, you want all repositiories sorted by stars!  

[HERE YOU ARE](https://github.com/search?o=desc&q=stars%3A%3E1&s=stars&type=Repositories)  

Only repositories are shown. As a bonus check this [awesome](https://github.com/sindresorhus/awesome) repo
MAKNA CANTIK BAGI WANITA (Studi tentang Pemaknaan Wanita Konsumen Natasha Mengenai Kecantikan)
Published: 2021-10-04 02:00:53

Kecantikan adalah sesuatu yang sangat melekat pada wanita. Beau-itu sendiri didefinisikan sebagai indah dan menarik. Kriteria yang indah bagi seorang wanita ideal; kulit cerah; dan rambut lurus, hitam dan panjang. Dengan hadirnya globalisasi, rasa keindahan kemudian menjadi seragam di semua wilayah dan masing-masing negara. Seluruh masyarakat mengakui wanita cantik yang memiliki kriteria dengan simbol-simbol yang disebutkan. Media iklan memiliki kontribusi yang besar bagi penyebaran makna yang indah ini. Di antara banyak iklan pada keindahan ini yang kemudian sebagai wanita menjadi cantik sempurna. Ini kemudian digunakan oleh industri kecantikan dengan menghadirkan klinik kecantikan. Kehadiran klinik kecantikan ini bertujuan untuk memenuhi keinginan wanita dengan layanan perawatan kecantikan yang mendukung penampilan wajah mereka dan tubuh mereka.

Klik for more:  https://www.tipskumparan.com

Dalam penelitian ini merumuskan makna indah menurut perempuan yang menjadi konsumen di klinik kecantikan yaitu Natasha perawatan kulit. Setiap wanita harus memiliki motivasi tersendiri untuk datang ke klinik kecantikan. Selain itu, mereka pasti memiliki arti keindahan sudut pandang mereka, apakah dipengaruhi oleh orang asing dan berasal dari diri mereka sendiri. Penelitian ini telah dilakukan secara kualitatif dengan pendekatan deskriptif. Lokasi pencarian berada di Yogyakarta yang melibatkan 7 informan. informan ini terdiri dari 4 wanita karier (kerja), 2 siswa yang bekerja independen dan 1 mahasiswa di perguruan tinggi negeri. Semua informan ini Natasha Skin Care pelanggan dan rata-rata telah menjadi klien sejak preseden 1 tahun. Atas dasar hasil penelitian, berbagai motivasi diperoleh belakang wanita untuk datang ke klinik kecantikan. Melakukan perawatan di sebuah klinik kecantikan bagi mereka adalah bentuk untuk menjaga penampilan mereka untuk tetap cantik. Selain itu, mereka lebih dipercayakan untuk merawat tubuh klinik kecantikan karena spesialis kecantikan dapat dihitung. Wanita-wanita ini juga menafsirkan arti yang baik karena pengaruh dari keluarga, status ekonomi, tingkat pendidikan, jenis pekerjaan dan usia perbedaan. Keindahan bahwa perempuan-perempuan juga memberikan dampak sosial sebagai mudah untuk mencari pekerjaan, mudah untuk mendapatkan pacar, mudah diterima di lingkungan sosial dan menjadi lebih percaya diri. Dari penelitian ini, kita dapat melihat bahwa setiap wanita memiliki arti yang indah masing-masing. Hal ini disebabkan perbedaan yang dimiliki oleh setiap wanita. Perbedaan usia, status ekonomi, jenis pekerjaan, tingkat pendidikan dan keluarga, jauh menentukan makna indah dari seorang wanita. Selain itu, keindahan yang dimiliki oleh seorang wanita dapat membantu dia terus diakui dalam lingkungan masyarakat. Tidak dapat dipungkiri bahwa kecantikan penting bagi setiap wanita.
From MTG to Programming: Timmy, Johnny and Spike
Tags: beginners, programming, devjournal, codenewbie
Published: 2021-10-04 00:48:10

If you've played MTG ([Magic the Gathering](https://magic.wizards.com)) then you've might have heard of *them*.

If you haven't, then let me introduce you to them... and don't worry, they are just personalities and you're probably one of them.

## Timmy

The power gamer, they want to play big, flashy spells and creatures and end the game with a bang.

## Johnny

The combo players, they make crazy decks that might not even work most of the time, but when it works...

## Spike

The tournament player, they play to win no matter what it takes.

This is, of course, a grossly oversimplification. But for the sake of a primer, it will work.

---

## What does that have to do with programming?

Is what you might be asking... and I will say: Everything!

As programmers, we too have ways to approach things in one of those ways.

### The Timmy Programmer

For the Timmy Programmer, to develop something is to have fun.

Performance might not matter much, what matter is: "what if we could have RTX On [Dino Game](https://en.wikipedia.org/wiki/Dinosaur_Game)?"

Or... how many ways you can print [console.log multiple times in JavaScript](https://github.com/Noriller/js-console.log)?

Most people when learning how to program will be here... they star learning and every time the code compiles is a great victory that comes with a sense of: but... what if I do _____?

### The Johnny Programmer

The Johnny Programmer are those you have to keep in check and with a few reminders of [YAGNI](https://en.wikipedia.org/wiki/You_aren't_gonna_need_it) and [KISS](https://en.wikipedia.org/wiki/KISS_principle).

Similar, but different to Timmy, Johnny wants to have millions of small moving parts using every and all data structures and algorithms to make the most polished and perfect code that cover all edge cases.

If you've seen a new grad or someone who just got out of a bootcamp and wants to over complicate a simple TODO app... then you've seen Johnny. 

### The Spike Programmer

The Spike Programmer is the profissional programmer. They just want to get the job done.

---

## So... what kind of programmer are you?

And it's worth highlighting that's there's no "right" answer, sometimes you need to get the job done and sometimes you need to think in crazy ways to cover every possibility.

And sometimes, we just want to have fun trying something... just because!

---

[![Buy me a Coffe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9fmg69eiiotp9kl89q8.png)](https://buymeacoffee.com/noriller)

Cover Photo by [Ryan Quintal](https://unsplash.com/@ryanquintal?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
I Created A Website That Tracks The Best Giveaways in Gaming!
Tags: showdev, webdev, programming, api
Published: 2021-10-04 00:46:46

I'm having lots of fun collecting free games from Epic Games Store, Steam and other places. It's just crazy how my games collection has grown. What a time to be a gamer! So it just made sense to build a dedicated platform coded from the ground up that tracks all these cool giveaways at [GamerPower.com](https://www.gamerpower.com).

![GamerPower](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5czl6emysxwb0n1swy5.jpg)

But honestly, just between us, the truth is that I had this exact same idea 14 years ago... I even tried to launch this project several times before under different names: GivewayGamer.com, LootXP.com, and others, but I was never able to fully realize my idea because gaming giveaways were actually very rare, plus my skills as a developer were very limited.

Only last year (2020) I was able to launch GamerPower the way I always imagined, and finally everything made sense, nowadays there is literately hundreds of [gaming giveaways](https://www.gamerpower.com/giveaways) to track and explore and our users already saved thousands of dollars in games and in-game loot (Up to $4181 just in this year alone, and counting!). And for my surprise GamerPower surpassed 1 Million views just in the first Months of life. 

![GamerPower](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj7rzkf7n5ti4ocnjj9q.jpg)

Since launch until now I already added a TON of new features including a user feed and a free public [Gaming Giveaways API](https://www.gamerpower.com/api-read) that everyone can easily access without the need of keys or accounts.

To celebrate the latest update, GamerPower 2.0 recently launched on Product Hunt and reached the top 10 products of the day (6th position). So I'm very proud of this project. Anyway, I really hope you guys like it. Feedback is welcome. Thanks in advance.
t3rm.dev is a web-based terminal where commands are minted as collectible NFTs
Tags: nfts, ethereum, crypto, nft
Published: 2021-10-04 00:11:45

# Welcome to t3rm.dev, the unstoppable CLI where commands are minted as NFTs.

> Why do we need a command line interface on IPFS, connected through Ethereum, where commands are minted as NFTs, you ask? **Because it’s f*cking cool.**

You will find [t3rm.dev](https://t3rm.dev) at the intersection of art, dev, and 80s nostalgia.

Each command line program is minted as a unique NFT using the IPFS protocol to store the metadata and source code, similar to artwork / video NFTs.

The website runs as a serverless dApp, hosted with a dnsLink over IPNS using Fleek, where commands are discovered and mirrored by a peer-to-peer network and cached onto Cloudflare and other gateways. There is no API or backend running underneath t3rm — everything runs through the Ethereum blockchain.

# Getting started

1. Visit [t3rm.dev](https://t3rm.dev)
2. Run the command: `connect`
3. Run the command: `info`

To get information about a token or package, you can run the command `info token <id>` or `info pkg dev.t3rm.<name>`.

# Discover your identity

There are **1,337** unique identities on [t3rm.dev](https://t3rm.dev) for users to discover. Each identity is a tradable collectible NFT rendered in text-form. These NFTs grant their owner access to special privileges within the platform and voting rights inside the [t3rm DAO](https://snapshot.org/#/t3rm.eth).

1. Run the command: `connect`
2. Run the command: `whoami`

# Mint your command

To create a new package on the t3rm platform:

1. Run the command: `connect`
2. Run the command: `mint`

*Note: we recommend that packages use the bundle prefix: `dev.t3rm.` for best compatibility.*

# Create your artwork

[Art.txt](https://art-txt.xyz) allows anyone to mint quotes and artwork as 100% on-chain text-based NFTs.

![Art-txt.xyz homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydv45jzvlfwxzdp2i5u0.png)

1. Run the command: `connect`
2. Run the command: `art`

Art.txt has a new graphical interface at [https://art-txt.xyz](https://art-txt.xyz). While many projects claim to be "on-chain," Art.txt is 100% on-chain with the storage of each character forever etched into the Ethereum smart contract.

The artwork created on Art.txt is viewable in SVG-form (see: [https://opensea.io/collection/art-txt](https://opensea.io/collection/art-txt)) or raw-text form.

For help setting up your package or using [t3rm.dev](https://t3rm.dev), stop by our Discord community at [discord.gg/t99bHhMQtK](discord.gg/t99bHhMQtK)