teleren/devto huggingface dataset:
NFT Games Like Diablo 3 Auction House
Published: 2022-01-14 20:30:54

Seriously. I was reading about NFT games and it feels like its only advantage is that you can buy stuff using real money (crypto) with/without having to transact within the game platform. Its like the Diablo 3 auction house on steroids. We know how this ends. Unless these NFT game developers make their games have this great game experience they would just end up closing their company.
Programming Privacy
Tags: machinelearning, ai, todayilearned, programming
Published: 2022-01-14 20:25:46

For any #developers who have *data privacy* on their 2022 New Year's resolutions list, check out this 4-part video series on setting up your Gretel environment! 

In 20 mins, you can be programming privacy like a pro. 🦾 
{% youtube Qd9DhW5K3iw %}
Tasker, React/Redux + Rails API Final Project
Tags: javascript, react, rails, beginners
Published: 2022-01-14 20:01:15

{% youtube J9bljYT1Fdc %}

[View Tasker's Front-End on GitHub](https://github.com/helloamandamurphy/tasker-frontend)
[View Tasker's Back-End on GitHub](https://github.com/helloamandamurphy/tasker-backend)

## Summary
When I sit down to work, I usually have several tasks that need to get done. An old fashioned to-do list is pretty good, but what I find is that I usually get stuck on one task and at the end of my work time, I haven't accomplished what I needed to get done that day. My husband and I came up with the idea of Tasker as a time management application, where you could input tasks and the amount of time you wanted to spend on each. Tasker would start a timer for each task, and alert you when it was time to move to the next task.

***

## Languages and Tools Used
Ruby, Ruby on Rails API, PostgreSQL, ActiveRecord, HTML, Semantic UI, React, Redux

***

## Features
* Created a React app using ES6 JavaScript, stateless components, and container components
* Implemented react-router for RESTful routing; Redux middleware to respond to and modify state change; and fetch requests to send and receive data from the API
* Utilized Rails API, ActiveRecord, PostgreSQL, and rendered JSON for back-end development

***

## Obstacles Encountered
Thanks to the great Globetrotter walkthrough video series available on Learn, I didn't encounter many obstacles.

The biggest issue I encountered was adapting my idea to something I could build in a short period of time. I was over ambitious in my desire to have users in my project, and that ate a lot of time I could have used to build the core components of the application. Earlier this week I realized that after months of working on the project, I had met all of the project requirements despite not having the ability to add tasks or run a timer (which were kind of the point.) I've decided to turn this project in with the intention of continuing to work on adding those features in the future.

***

## What's Next
* Adding an approximate start time to the List forms
* Adding CRUD capabilities to Tasks through the List form
* Creating a timer for each task based on the assigned amount of time available
* Adding check points to the List creation/edit forms to make sure the time assigned to tasks is not over or under the total work time.
* More items can be found in my DevLog for the project.


***

Thanks for reading. 

-A

**Connect with Me**
[GitHub](https://github.com/helloamandamurphy)
[LinkedIn](https://www.linkedin.com/in/helloamandamurphy)
Hosting an API with GitHub Pages
Published: 2022-01-18 18:42:11

---
title: Hosting an API with GitHub Pages
published: true
date: 2022-01-14 19:47:19 UTC
tags: 
canonical_url: https://blog.seancoughlin.me/hosting-an-api-with-github-pages
---

## Background

[GitHub Pages](https://pages.github.com/) is a free website hosting tool provided by GitHub. [I previously wrote about GitHub pages being an excellent place to host a personal website or project page.](https://blog.seancoughlin.me/building-a-personal-website-with-github-pages) Additionally, it is a great choice to host a JSON API.

An [API](https://en.wikipedia.org/wiki/API) is a connection between computers. An example API would be the [Spotify API](https://developer.spotify.com/documentation/web-api/) which provides music data.

## Tutorial

First, you will need to create a special `[username].github.io` repository. This repository will be home to your GitHub Pages website. The repository name must **exactly** match the format `[username].github.io`, otherwise GitHub will not generate a live website.

![Create a new GitHubPages Repo](https://cdn.hashnode.com/res/hashnode/image/upload/v1642186114174/26yRishrk.png)

I have already made a GitHub Pages repository so the name is taken for me. Your custom `[username].github.io` will be available.

After creating `[username].github.io` open the terminal, clone the repository, and cd into the directory.

```
git clone https://github.com/Scc33/Scc33.github.io.git
cd Scc33.github.io

```

Inside the repository you can create a `.json` file. That `.json` file will become your publicly accessible JSON API.

![Example json file](https://cdn.hashnode.com/res/hashnode/image/upload/v1642187567249/8-aI-Cce4.png)

After adding a `.json` file add, commit, and push your changes to GitHub.

```
git add .
git commit -m "Create JSON API"
git push -u origin master

```

Once you commit and push your changes to the codebase, GitHub will automatically build your changes and publish the code to the internet. It should only take a few minutes for the changes to become visible.

That's all it takes! You now have a JSON API for the world to see. Your new JSON API will be located at the URL `[username].github.io/[file-name].json`. Your API can be seen using any web browser or an API testing tool like [Postman](https://www.postman.com/).

## Conclusion

GitHub Pages is a great tool for quickly creating a JSON API. In just a few minutes it's up and running!

### Pros

- The entire build process is [automated](https://github.com/features/actions) and site changes are published to the internet within minutes.
- GitHub Pages supports [HTTPS](https://en.wikipedia.org/wiki/HTTPS) to protect your site and users from malicious tampering.
- Best of all, it's free!

### Cons

- [GitHub limits page traffic.](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#usage-limits) Published sites are capped at 1GB in size and there is a 100 GB _soft_ limit on bandwidth per month.
Optimize Your Webserver by Installing a Single NGINX Module
Tags: opensource, linux, webdev, showdev
Published: 2022-01-14 18:54:41

---
title: "Optimize Your Webserver by Installing a Single NGINX Module"
published: true
cover_image: "https://bbss.dev/images/pagespeed/cover.png"
tags: ["OpenSource", "Linux", "Webdev", "ShowDev"]
canonical_url: https://www.bbss.dev/posts/pagespeed/
---

In 2012, Google released version 1.0 of their [PageSpeed modules](https://www.modpagespeed.com/) for NGINX and Apache. It has gone largely unnoticed since then. The short of PageSpeed is that if you add it to your web server, you can configure it to optimize anything passing through it using techniques such as minification, format conversion, and even injecting scripts to lazy-load images. You can read more about what it does on [the official site](https://developers.google.com/speed/pagespeed/module).

It sounded great in theory, but how properly install it with NGINX wasn't obvious. While Google does publish [scripts](https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source) to help with the installation, it requires a non-trivial depth of knowledge to do right. After struggling with it for many hours, I wrote a guide for personal future reference.

I recently returned to those notes to entirely automate the process using GitHub Actions. The work is open-source and available on [GitHub](https://github.com/knyzorg/nginx-pagespeed).

## Installation

Run the following as root on a Debian-based machine:

```bash
sudo su
apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 8028BE1819F3E4A0
echo "deb https://nginx-pagespeed.knyz.org/dist/ /" > /etc/apt/sources.list.d/nginx-pagespeed.list
echo "Package: *" > /etc/apt/preferences.d/99nginx-pagespeed
echo "Pin: origin http://nginx-pagespeed.knyz.org/" >> /etc/apt/preferences.d/99nginx-pagespeed
echo "Pin-Priority: 900" >> /etc/apt/preferences.d/99nginx-pagespeed
apt update
apt install nginx-full # If NGINX is already installed, an `apt upgrade` works too
echo "pagespeed on;" > /etc/nginx/conf.d/pagespeed.conf
echo "pagespeed FileCachePath \"/var/cache/pagespeed/\";" >> /etc/nginx/conf.d/pagespeed.conf
echo "pagespeed FileCacheSizeKb 102400;" >> /etc/nginx/conf.d/pagespeed.conf
echo "pagespeed FileCacheCleanIntervalMs 3600000;" >> /etc/nginx/conf.d/pagespeed.conf
echo "pagespeed FileCacheInodeLimit 500000;" >> /etc/nginx/conf.d/pagespeed.conf
echo "pagespeed RewriteLevel CoreFilters;" >> /etc/nginx/conf.d/pagespeed.conf
systemctl reload nginx
```

The installation process is explained more thoroughly on the GitHub page if you're curious.

Once that is done, you will have an active NGINX + PageSpeed installation that will receive the same updates as upstream NGINX. You can learn more about individual filters that you can enable in the [documentation](https://www.modpagespeed.com/doc/config_filters).

*This post was originally shared on my [Building Better Software Slower](https://www.bbss.dev/posts/pagespeed/) blog*
A recipe sharing web app with Django and React
Tags: showdev, django, react, javascript
Published: 2022-01-14 18:51:39

Hello everyone. I've built a recipe sharing app using Django rest framework and React.js. This application has taught me a lot and wanted to share it with you guys.

### Main technologies used for the project
- Django, Django rest framework
- React.js, Redux, TailwindCSS

### Some of the features
- JWT based user registration and login.
- CRUD endpoints for recipes.
- Like and bookmark feature.
- Unit testing on the backend.
- Documentation of the API using `drf_spectacular` which supports OAS3.

=> There are some things to be fixed on the frontend and other features will be added soon.

### Screenshots and GIFs


![Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ca5plg2vrlur6r7g251d.gif)


![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve8combnqx7sylmzs2th.gif)


![Quick View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axc2ktealdpkmxkqtof4.gif)


![Recipe Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llhuseqbqmh0sml5ke7w.gif)


The frontend and backend are hosted separately on **Netlify** and **Heroku** respectively. 

https://mesob-recipe.netlify.app/

You can test the endpoints here: https://recipe-backend-api.herokuapp.com/

If you like the project, give it a star on GitHub.

Link to GitHub repo: 

- **Backend:** https://github.com/earthcomfy/recipe-api
- **Frontend:** https://github.com/earthcomfy/react-recipe-app

**Note:** If you guys would like to see a tutorial on how some of the features are done, especially on the integration of Django and React, let me know in the comments section down below. I'll make sure to write a detailed article about the topic.

Any suggestions and feedbacks are welcome. 

Thanks for your time.
Hosting customers sites
Tags: jamstack, cloud, devops, webdev
Published: 2022-01-14 18:47:08

Hi, I'm creating a websites with JAMstack and I'm wondering how such sites sohuld be hosted for clients when the development is done.

I definitely don't want to host them on my servers even charging a fee for that. I don't want to be on the front line when there's a problem. Especially in the future, when the number of hosted projects may go into the hundreds.

Also I don't fell safe about hosting them in cloud. What if something goes wrong and the customer receives a large bill which the supplier does not cancel? What if I mess up some serverless function or client credentials get stolen? I would feel guilty because I recommended such a service.

The last option I see is to buy the server by the client and place the project with him each time. But that option isn't perfect also bacause it would require me to repeat the same configuration work multiple times.

This is not a problem with small landing pages that can be put on the cloud free tier, but what about larger projects?

How do you handle this?
What was your win this week?
Tags: discuss, weeklyretro
Published: 2022-01-14 18:30:07

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Cleaning off your desk ... or whatever else might spark joy ❤️ 

---

I hope you have time to relax and take a victory lap in the next few days!

![Donkey in a hammock](https://media.giphy.com/media/3djolNOedd5pS/giphy-downsized-large.gif)
Testing your Raku module using Github Actions
Tags: raku, githubactions, testing, tdd
Published: 2022-01-14 18:26:18

---
title: Testing your Raku module using Github Actions
published: true
description: How to use a specific GitHub Action to test, and cache, and anything else you would want to do, in Raku.
tags: raku, githubactions, testing, tdd
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jyity6pjmngk5oomt5k.jpg
---

Using [the Raku test GitHub Action](https://github.com/JJ/raku-test-action) ([here](https://github.com/marketplace/actions/raku-test-action) in the marketplace), copy this into a `test-raku.yaml` file:

```yaml
on: [ push, pull_request ]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Test via install
        uses: JJ/raku-test-action@main
```

That will install (and cache) dependencies before testing, and then do the test.

That's it ⃰.

---

 ⃰ I guess a bit of a making of is in order.

This is what is called a [composite GitHub action](https://docs.github.com/es/actions/creating-actions/creating-a-composite-action?learn=create_actions&learnProduct=actions). These types of actions enable the possibility of doing several steps, and we needed that, mainly to take care of the cache. How to do so was the subject of [my previous post](https://dev.to/jj/designing-containers-for-github-actions-5h84). While the cache is going to be generated *outside* the container, the rest of the action is going to run *inside* a container. Except for setting up the cache, the rest is run inside [a container that runs this image](https://github.com/jj/alpine-raku/pkgs/container/raku-zef-gha) and that has been designed specifically for GitHub actions (using what's mentioned above).

What happens if this one-size-fits-all does not fit you? Well, you can still use [`Github::Actions`](https://github.com/jj/alpine-raku/pkgs/container/raku-zef-gha), that comes with its own container. But I guess that'll be the topic of a different post.
Ethernaut Hacks Level 0: Hello Ethernaut
Tags: ethereum, solidity, openzeppelin
Published: 2022-01-14 18:14:32

This is the level 0 of [Ethernaut](https://ethernaut.openzeppelin.com/) game.

## Pre-requisites
- Basics of [web3js](https://web3js.readthedocs.io/en/v1.5.2/getting-started.html)

## Hack
I assume you've read instructions of the level 0 and acquired test ether. The level contract methods are injected right into our browser console, so we can start calling methods.

Let's start.
The instructions asks to call this method in console:

```javascript
await contract.info()

// Output: 'You will find what you need in info1().'
```

We follow the output and call:
```javascript
await contract.info1()

// Output: 'Try info2(), but with "hello" as a parameter.'
```

Following...
```javascript
await contract.info2("hello")

// Output: 'The property infoNum holds the number of the next info method to call.'
```

To get `infoNum` we call it's public getter:
```javascript
await contract.infoNum().then(v => v.toString())

// Output: 42
```
Note that `infoNum()` returns a BigNumber object so we convert it to string to see actual number.

Proceeding with `info42`:
```javascript
await contract.info42()

// Output: 'theMethodName is the name of the next method.'
```

Again, following output:
```javascript
await contract.theMethodName()

// Output: 'The method name is method7123949.'
```

And so:
```javascript
await contract.method7123949()

// Output: 'If you know the password, submit it to authenticate().'
```

Ok...but what's the password? Let's inspect the contracts ABI:
```javascript
contract

// Output: { abi: ..., address: ..., ...., password: f () }
```

Upon inspecting we see there's a `password` method for contract. Let's call it:

```javascript
await contract.password()

// Output: 'ethernaut0`
```

We got the password. Finally:
```javascript
await contract.authenticate('ethernaut0')
```
and confirm the transaction on metamask. Submit instance.

Level completed!

_Learned something awesome? Consider starring the repo [here](https://github.com/theNvN/ethernaut-openzeppelin-hacks)_ 😄

_and following me on twitter [here](https://twitter.com/heyNvN)_ 🙏
How to reference a local Webpack npm package
Tags: webpack, javascript, react, npm
Published: 2022-01-14 18:04:36

_With the help of [this question and answer](https://stackoverflow.com/questions/15806241/how-to-specify-local-modules-as-npm-package-dependencies):_

Install the local npm package using the file path. Check `node_modules` to see the installed package.

```bash
npm install --save ../
```

_(or `--save-dev` depending on the requirements) && (in this example the package exists in the parent directory)_

Note that you only specify the path to the package. No filename should be referenced. 

The package will be referenced with the local file package. Note the `file:` protocol.

```js
{
  "name": "venom",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "hulk": "file:../"
  }
}
```
VS Code Setup, Themes, Fonts for 2022
Tags: vscode, programming, beginners, productivity
Published: 2022-01-14 18:02:00

Good environment == Increased productivity. 

I use VS Code to learn programming and build projects. It took me time but i have mastered using VS Code efficiently. In this post I will show you my theme(s) and fonts. In the next few posts I will talk about how to boost your productivity and work flow while coding in VS Code.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpnrc4elh7wt4h65se6x.png)

I have hidden the Panel(cmd+j), Activity bar and Side bar(cmd+b). 
You can always add the Activity bar but for me personally Activity bar is a bit distracting. It can be added or removed easily. Go to View >> Appearance >> Show Activity bar.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm7xod6gysih48xytj81.png)

This much is enough for me to be focused on code. I still have the mini map, it looks cool and doesn’t really distract me.

Themes - 

The one I currently use is Shades of Purple.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1v0g31ee4rzm4j5wjh18.png)

The others which I really like -

Winter is coming (Dark Blue)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k37g1yerrabet3evdxtl.png)

--------------------------------------------------------------
Palenight Theme

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ofj17gqsl8j14ftznbd.png)

--------------------------------------------------------------
One Dark Pro

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1jnef2zrcrfk1g73rp5.png)

--------------------------------------------------------------
Monokai Classic

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hphm9750d4ux9r5d73ss.png)

--------------------------------------------------------------
Dracula

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lyx1lfdbx1efoeq0vrm.png)

--------------------------------------------------------------
Abyss

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7m5ggk7ssfdkqeezdnd.png)

--------------------------------------------------------------
Red

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx6omlvdzajwa04xktb9.png)

--------------------------------------------------------------
Fonts - 

The one I use is Cascadia Code. The number fonts are really good looking.

The one I recommend is Fira Code, very popular and free.
Day 1 - Design Patterns
Published: 2022-01-14 17:49:57

A goal for this year: write at least 1 post about what have I learned in a the past weeks. So without further ado, let us begin.

**Design patterns**
Been in this industry for almost 8 years, I am thinking about recently what's next for me aside from keep coding for the next 5 to 10 years. The answer that came naturally to my mind is to reach for Software Architect.

So let's start with design pattern. I found a great video by Jack Herrington [here](https://www.youtube.com/watch?v=FLmBqI3IKMA) and he briefly explain some design patterns that I have came across before, or at least have seen it and wasn't unaware of it's implication.

In that video, he mentioned singleton, facades, strategy, observable and bridge pattern. These pattern quite common that I came across with at least once in almost every framework that I worked with.

Take strategy design pattern for example, in NestJs official documentation, they uses [passport](https://www.passportjs.org/) for their authentication and its heavily depends on the Strategy design pattern. Each strategies has different implementation but the beauty of I personally think is that the way for using these implementation is consistent to apply them, making the code more cleaner.

Another example: Observable, used by NestJs interceptor and its powered by RxJs for intercepting the into a function's input / output. This mainly for transform the data in that manner with extra layer of logic without tainting the original logic in the function. 

Of course the list goes on, but I decide to call it a day for now. Stay tuned for my next post.