DEV Community: Dany the spacecowboy

Building a Bingo game backend with encore.dev

Dany the spacecowboy — Wed, 05 May 2021 02:55:06 +0000

You can check the original post in my blog

First of all, let's talk about encore.dev which is a magical Go backend framework with almost 0 boilerplate,tracing out of the box, serverless deploys immediately, support for postgreSQL, auth and much more! I first heard about this framework in the TLDR Newsletter and I tried it for a little bit and I'm falling in love with it even though I barely know how to code in Go!

To start a new project you need to download and install encore, the good thing is that is available in brew for mac so we can just do the following command in our terminal:

$ brew install encoredev/tap/encore
//then run 
$ encore app create

When doing the

encore app create

it will ask you to login in our encore app to create a new project, after doing that it will ask you for the name of the app and a starter template, for this project I chose the Hello World template just to have a base to start with, after finishing with the prompt questions you'll have something like this

Now if we go into that folder with

cd bingo

and then do

encore run

we should be able to go to


 and see the "API Explorer" which is a nice interface that lists all our API endpoints so we can trigger the request from there with a custom body, params and all that
![encore api explorer](https://i.imgur.com/bSQuZfR.png)
There's also a nice thing about this app that encore creates for us, we also have available an auto generated API docs which specify a little description about the API endpoint, the params types and response schema of each defined endpoint

## Creating our bingo database and migration

In this post I won't be generating all the authentication part of the app, since it's a small project, I will be creating the following routes with it's functionality:
- User creation route (with a number list)
- Randomizer route (to get a random number and compare to the number list of a specified user)

### Doing the migration
So let's start with how the migration of the user is going to look, to create the right file, we need to add a new folder called

 ```bingo```

 on the root of the project, then create a

 ```migration```

 folder with a file on it called

 ```1_create_user_table.up.sql```

, 
__Notes:__
- the number of the file means the order that the migrations are going to be executed
- after the first underscore (_) comes the name of the migration
- we have to add the extension

 ```.up.sql```

 to all migrations



```sql
CREATE TABLE client (
  email TEXT PRIMARY KEY,
  list INTEGER []
);

Defining the logic of the route

after doing this, whenever we do encore run the next time it will run our migration, but before that let's create a


 file inside the bingo folder to create our routes inside of it.

first we need to include the package name which should match the folder name (our bingo service) then after that we should define our imports and include encore sqldb handler inside of it


```go
package bingo

import (
    "context"

    "encore.dev/storage/sqldb"
)

now we need to declare some structs for our response and request for the route to be used inside the function to cover our needs, we need a struct for the request params and a struct for the response we're sending, that should look like the following

type UserParams struct {
    Email string
}

type RegisterResponse struct {
    Email string
    List  []int
}

then it comes the fun part, creating the function that in charge of creating the list, the user, store it in the database and returnn it, NOTE: keep in mind that we need to add the comment

//encore:api public

before the function so encore can detect it as an API route, the following code looks something like this:

//encore:api public
func RegisterUser(ctx context.Context, params *UserParams) (*RegisterResponse, error) {
    var list = generateList(0, 100)
    var user RegisterResponse
    err := sqldb.QueryRow(ctx, `
    INSERT INTO "client" (email, list)
    VALUES ($1, $2)
    RETURNING *;
  `, params.Email, list).Scan(&user.Email, &user.List)
    if err != nil {
        return nil, err
    }
    return &user, nil
}

func generateList(min, max int) []int {
    a := make([]int, max-min+1)
    for i := range a {
        a[i] = min + i
    }
    return a
}

Verifying the database

Now after doing that we can do

encore run

go to localhost:4060 and try hitting the registerUser Endpoint with the request to call the API

quick note: To check the database data, you can do

encore db conn-uri ${service name}

in this case service name is bingo so it should be

encore db conn-uri bingo

, then you can take this URL and use it in postico or some other postgreSQL UI app to see the table and the rows, also you can use the PSQL command in mac (you need to install it first with brew)

Selecting a number and updating the array

Now the next task is to get the list array from a user, then select a random number from the list, remove that number from that list, updating it in the database and return the selected number! so let's get started, we will do this code in the same bingo.go file:

//encore:api public
func DrawFromList(ctx context.Context, params *UserParams) (*DrawResponse, error) {
    var list []int // empty list to be asssigned after the SQL query
    err := sqldb.QueryRow(ctx, `
    SELECT list from "client"
    WHERE email = ($1)`, params.Email).Scan(&list)
    if err != nil {
        return nil, err
    }
  var response DrawResponse
  // generate a random number everytime you hit the request 
    rand.Seed(time.Now().UnixNano())
    var randomIndex = rand.Intn(len(list) - list[0] + 1 + list[0])
  // assign the random number to the response selected struct
    response.Selected = list[randomIndex]
  //remove the item from the array by the index
    list = RemoveIndex(list, randomIndex)
  // update the list of the user with the new one without the selected item
    sqldb.QueryRow(ctx, `
    UPDATE "client"
    SET list = ($1)
    WHERE email = ($2)`, list, params.Email)
    response.Removed = true
    return &response, nil
}

//Function to remove an item from an array by the index
func RemoveIndex(s []int, index int) []int {
    return append(s[:index], s[index+1:]...)
}

After this we can commit what we did, and then run

git push encore

to build the project and deploy it inside encore.dev platform (which uses a free tier of aws under the hood) and if we go to encore.dev and select the project you should see a build completed

Also, to check the database in production, we can use

encore db shell bingo --env=prod

and from here we will be able to see our database with psql from the terminal

So TLDR:

In this tuto we created a encore.dev backend app from scratch which uses two routes to create a user based on an email and assigns a list of a 100 numbers to it, and another route to draw a random number and remove it from that user array list

you can test this API on this url https://bingo-c7m2.encoreapi.com/prod/bingo.RegisterUser with this CURL to register:

curl --location --request POST 'https://bingo-c7m2.encoreapi.com/prod/bingo.RegisterUser' \
--header 'Content-Type: application/json' \
--data-raw '{
    "Email": "your-mail@gg.com"
}'

and this CURL to draw a number

curl --location --request POST 'https://bingo-c7m2.encoreapi.com/prod/bingo.DrawFromList' \
--header 'Content-Type: application/json' \
--data-raw '{
    "Email": "your-mail@gg.com"
}'

Sources

Creating a wheel of fortune

Dany the spacecowboy — Tue, 27 Apr 2021 20:24:09 +0000

Check out the demo here to be excited about what you can build✨✨ https://tacowheel.netlify.app/

A couple of weeks ago, I wanted to explore the magic of SVG✨ so I thought of creating a little sample of a wheel of fortune taking into account SVG collisions using GSAP since it's a big deal in the SVG community, to make it more fun, I consumed an API that returns taco recipes to help you choose what kind of tacos to eat on taco Tuesday 🌮.

So let's jump on this mini tutorial on how to build a wheel of fortune

The beginning of the project

Since I'm in love with vite, I used vite create app to start a react app with vite under the hood to make it fast! besides that, I installed gsap, recharts (which I will explain in a minute), and react-uuid (to generate unique ids)

Creating the wheel

I tried to create the wheel using handcrafted SVG, but I kinda cheat on this part, I saw this really cool repo that does kinda what I want and decided to copy its wheel functionality using recharts which is a react library for charts, so here's the code of how I created the wheel (which is a pie chart but don't tell anyone):

//we want fixed width and height to match the arrow position that we will be creating later
<PieChart width={400} height={400} style={{ margin: "0 auto" }}>
    <Pie
        /*this is an array of items with the next structure
        [{
          id: uuid(),
          name: sliceName,
          times: 1, // this is to indicate the value of the slice
          background: randomColorFunction,
        },...]
        */
        data={items}
        labelLine={false}
        label={renderCustomizedLabel}
        fill="#8884d8"
        dataKey="times" // should match the 'times' key
        isAnimationActive={false}
        redraw={false} // to not recalculate the position of the slices after spinning
    >
        {items.map((el, index) => (
        <Cell key={`cell-${index}`} fill={el.background} />
        ))}
    </Pie>
</PieChart>

now, the label on it has a function to render the actual text that is positioned inside the slice, we calculate the x and y coordinates to position the text, so that function looks something like this:

const renderCustomizedLabel = ({
    cx,
    cy,
    midAngle,
    innerRadius,
    outerRadius,
    index,
  }) => {
    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
    const x = cx + radius * Math.cos(-midAngle * RADIAN);
    const y = cy + radius * Math.sin(-midAngle * RADIAN);
    return (
      <text
        x={x}
        y={y}
        textAnchor="middle"
        dominantBaseline="central"
        fontSize={calcSize('fontsize')}
      >
        {name}
      </text>
    );
  };

after creating this component you should have something like this:

Making the wheel spin

to make the wheel spin, I use the next function which incorporates the magic of GSAP

let pos = 0;
async function rotate() {
    let x = randomNumber(1080, 1800); //between 4-6 wheel turns
    pos = pos + x;
    await gsap.to(".recharts-pie", // recharts automatically adds this class to the pie chart
     {
      duration: 1,
      rotation: pos,
      transformOrigin: "50% 50%",
      ease: " power2. ease-in-out",
    });
  }

Adding an arrow to identify the winner

Now the fun part begins, after having the wheel spinning, we want to check which slice is the winner, to do that, I added a little triangle created on css and then I assign it an id of #arrow to it

then, to check the collision, I modified the rotate function defined before to check for the collision

const [winner, setWinner] = useState(undefined);
async function rotate() {
    let x = randomNumber(1080, 1800); //between 2-4 wheel turns
    pos = pos + x;
    await gsap.to(".recharts-pie", {
      duration: 1,
      rotation: pos,
      transformOrigin: "50% 50%",
      ease: " power2. ease-in-out",
    });
    //get all the pie slices by the classname
    let pieSectors = document.getElementsByClassName("recharts-pie-sector");
    Array.from(pieSectors).forEach((sector, index) => {
        // iterate through them to check which one is hitting the arrow
      if (Draggable.hitTest(sector, "#arrow", '50px')) {
        setWinner(items[index]);
      }
    });
  }

One thing to notice is that the last param of the hitTest function is a threshold which you can indicate how many pixels can be overlapping between the two components to count it as a hit

Takeaways of this project

you can check the source code in here and a little demo of the app in here I added some media queries so the wheel can be playable on all the sizes and a button to call the rotate function

Also, some notes:

the smaller the wheel, the harder it is to check for collisions since a lot of pie slices will overlap with each other
if you start adding more slices, you will have the same overlapping problem
right now the demo has like a 95% accuracy

Sources

Chrome 90 Dev updates

Dany the spacecowboy — Sun, 18 Apr 2021 21:08:54 +0000

You can check the original post on my blog in both English and Spanish

Earlier this week, I saw that Chrome was getting its 90 update and they release a cool video about it with a lot of new stuff coming to the browser, the two main things that got my attention were:

new CSS overflow clip
Declarative Shadow DOM

So let's jump on the first one, since this is a CSS feature I'm gonna be doing some small demos with Codepen to show what's up

CSS Overflow Clip

first of all, everybody at some point in their life struggles with CSS, so let's define what the overflow property does first, according to w3schools:

The CSS overflow property controls what happens to content that is too big to fit into an area.

to show you more in detail about the different behavior of the overflow and the current ones here's the Codepen demo

Overflow visible (default): the content doesn't care about the size of its parent and it grows no matter what
Overflow hidden: the content is quite shy on this one, once the content surpasses the parent container, it stops showing
Overflow scroll: this one is simple, no matter what happens you will always have a scroll, simple but effective some times (can look ugly though)
Overflow auto: the smartest of all, while the content fits it doesn't show a scrollbar, but once it starts overflowing, it starts showing a scrollbar (you can click on the button of the last box to see the behavior)

Overflow clip:

Note Since this is available starting Chrome 90 if you specify it and don't have that version, It will fallback to overflow visible since it's the default value
What the clip value does, it's pretty similar to the hidden one, and what it does differently, is that it doesn't apply a scroll container to the box, resulting in a better performance when rendering the CSS into the document

Also, when adding overflow clip, you have access to the property overflow-clip-margin which lets you control how much of content do you want to show after the parent is reached
Bonus: I found a bug when adding a border-radius to the overflow clip resulting on the overflow-clip-margin not being applied, so you can try it on the codepen demo by removing the border-radius: 0 !important

Declarative Shadow DOM

before writing this post, I had never heard of the shadow DOM, but what it does is control the way the browser handles all the complex HTML elements under the hood, if you're interested in more about this, I recommend reading this article about it, also before chrome 90, the only way to create a shadow DOM was with the use of JS, but now with this new update, it's possible to create a shadow DOM with HTML which now can be used when doing SSR (Server side rendering)

Sources

Dates in JS and the Temporal proposal

Dany the spacecowboy — Tue, 13 Apr 2021 02:08:37 +0000

you can check the original post on my blog in both english and spanish

If you're a developer, you have used dates at a certain point in your life, and if you have used dates, you probably had a hard time

Most people agree with me. Handling dates in Javascript can be painful by itself, that's why the community created libraries like momentjs, date-fns, luxon, dayjs, and some others that are doing a great job! But first of all, I want to talk about this old man and probably the parent of all the other ones: MomentJS

A little bit of history

MomentJS was and is still a really powerful library, it was the go-to library for dates of almost everybody until recently, we have to keep in mind that this library was built in 2011, which for javascript that's like a long time ago and things have been evolving a lot (just to give you more context, ES6 was released on June 2015) so this library was built before all that.

After people started realizing that MomentJS was kind of heavy and that newer and faster alternatives were starting to appear, the end of MomentJS was getting close (I'm not saying that you won't be able to use the library, but now it's not recommended to do it anymore), the main pain point of MomentJS was the lack of support for "Tree shaking".

Last year the Chrome Dev Tools started complaining about the size of a website and recommending to switch from momentJS to another alternative which is kinda forcing the developers to close the cycle and put an end to the MomentJS era.

Last but not least, I appreciate all the hard work that the team behind MomentJS has been doing over the years, and thanks to the effort they're helping to shape the future of native JS date handling features.

The arrival of Temporal

Temporal is a proposal that wants to be included in future JS versions (ES6, ES7 which all of this is handled by TC39) to provide native support for date handling for the browser without the need of external libraries, this isn't just because of how hard was to handle dates before, but because almost every website now includes one date library (date-fns, dayjs, etc..) and every time you visit a page you're constantly downloading the code for one of these libraries which takes some time that we can save by having a native solution that works well (Sorry not sorry Date Object)

Let's get started with some code samples

I know I know... I'm boring you with some date and JS history but it was kinda important to get some context, now let's get to the fun part, start implementing some basic date handling functions!

since the proposal hasn't been accepted yet, we need to use the Temporal polyfill to use all its functions

$ npm install --save proposal-temporal

const { Temporal } = require('proposal-temporal');

//Or, import it as an ES6 module:
import { Temporal } from 'proposal-temporal/lib/index.mjs';

To handle and play with the current time we make use of the Temporal.now Object, which contains a couple of functions to get the date in different formats / different timezones


Temporal.now = {
    instant: [Function: instant$1],
    plainDateTime: [Function: plainDateTime],
    plainDateTimeISO: [Function: plainDateTimeISO],
    plainDate: [Function: plainDate],
    plainDateISO: [Function: plainDateISO],
    plainTimeISO: [Function: plainTimeISO],
    timeZone: [Function: timeZone],
    zonedDateTime: [Function: zonedDateTime],
    zonedDateTimeISO: [Function: zonedDateTimeISO]
}
Temporal.now.instant() // Temporal.Instant <2021-04-13T00:35:19.899119896Z>
Temporal.now.timeZone() // Temporal.TimeZone <America/Chihuahua>

Plain Dates, Times, DateTimes

Temporal adds a couple of classes that I group because they're all "plain", but also include a lot of methods inside of them to make them powerful, keep in mind that we need to initialize them first

const date = new Temporal.PlainDate(2020, 05, 22); // Temporal.PlainDate <2020-05-22
const time = new Temporal.PlainTime(04, 20); // Temporal.PlainTime <04:20:00>

// we can also use some properties to get cool info
const daysInWeek = date.daysInWeek; // 7
const daysInMonth = date.daysInMonth; //31

Some date difference sample

the duration on this sample marked by <P862D> is from the ISO 8601 which starts with a P (for Period) and a T (for time)

const temporalStart = new Temporal.PlainDate(1997, 05, 22);
const temporalEnd = new Temporal.PlainDate(1999, 10, 01);
const temporalDiff = temporalEnd.since(temporalStart);
d = Temporal.Duration.from(temporalDiff); 
// in this sample 
// d = Temporal.Duration <P862D> {
//   days: 862
// }

Timezones

Timezones are key when building web apps that target users all across the globe and can also be difficult to play with and even to wrap your head around outside of a programming context (or at least for me it's too hard haha)

//know the time at London
Temporal.now.zonedDateTimeISO('Europe/London') //Temporal.ZonedDateTime <2021-04-13T02:26:27.448187407+01:00[Europe/London]>

Sources

From Vue2 Master to Vue3 Noob

Dany the spacecowboy — Mon, 05 Apr 2021 01:39:56 +0000

you can check the original post on my blog in both english and spanish

so I used to tell myself I was good at building webapps with vue, but then the vue3 nation attacked (yes, an avatar reference).
with this introduction to vue3, a lot of things changed, I like to think about it as the react hooks change but for vue, the main thing I consider that is a major and it's worth getting used to it and learn is the Composition API which I'll be talking more in detail while creating a simple webapp to display some pokemon data

Setup()

Vue3 introduces a new component option called setup, which is the entrypoint for the composition API, it's important to know that the code written here is executed before the creation of the component therefore the data, computed, and method options aren't available inside of it.
The setup component options contains two parameters

props
context (which contains attrs, slots, emit)

In this example I'll be getting the pokemonId prop or if it doesn't exist I'll be assigning one randomly,
then I'll call the API to get the pokemon sprite, the return of the setup options allows you to use those values on the template

setup(props) {
    const pokemonId = props.pokemonId || Math.ceil(Math.random() * 500)
    const pokemonSprite = getPokemonData(pokemonId); //magic function that returns a sprite
    return {
        pokemonId,
        pokemonSprite
    }
}

after this we can just do this inside the template to show the sprite image:

<template>
    <img :src="pokemonSprite" alt="pokemon sprite" />
</template>

Ref() and Reactive()

Vue3 by default doesn't make every variable reactive, you have to define it yourself using the new
ref(), reactive() methods

these methods are really similar, the main difference is that is recommended to use ref() on data types (ints, bools, strings, etc..) and to use reactive() on data structures (arrays, sets, json, etc...)

for example, if we want to add a button to randomize a pokemon sprite on click, we need to make the pokemonId prop reactive:

import { ref } from 'vue'
setup(props) {
    let pokemon = ref({})
    const getPokemonData = async (pokemonId) => {
        const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`)
        pokemon.value = await response.json();
    }
    getPokemonData(props.pokemonId);
    return {
        pokemon,
        getPokemonData
    }
},
methods: {
    randomize() {
        this.getPokemonData(Math.ceil(Math.random() * 500));
    }
}

and then in our template we can just do this:

<template>
    <div v-if="pokemon.sprites">
        <img :src="pokemon.sprites.front_default" alt="pokemon sprite" />
        <button @click="randomize">Randomize</button>
    </div>
</template>

Lifecycle hooks

Another new addition to vue3, is the ability to call lifecycle hooks only inside the setup component option, replacing all the other components options we used to have(mounted {}, created{}, etc..) with the new variants (onMounted(), onCreated(), etc..)
this makes the code more readable since in the setup, you'll be declaring all the initialization of your component in a single place

we can change our pokemon randomizer code to make use of the onMounted hook inside the setup

import { ref, onMounted } from 'vue'
setup(props) {
    let pokemon = ref({})
    const getPokemonData = async (pokemonId) => {
        const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`)
        pokemon.value = await response.json();
    }
    onMounted(getPokemonData(props.pokemonId));
    return {
        pokemon,
        getPokemonData
    }
},

Script setup

Now that I understand how the setup worked, I wanted to go even further explorating the <script setup> proposal
after playing with it for a couple of minutes, I understood how awesome it is! the time saving and less code written are really good benefits of it, it adds a couple of new different syntax for props, but nothing to extreme,
this is how the pokemon randomizer code looks like with the script setup:

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
  pokemonId: Number,
});
let pokemon = ref({})
const getPokemonData = async (pokemonId) => {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`)
    pokemon.value = await response.json();
}
const randomize = () =>  {
    getPokemonData(Math.ceil(Math.random() * 500));
}
onMounted(getPokemonData(props.pokemonId));

you can check the source code in here

Sources