DEV Community: Gustavo Castillo

Server-Sent Events in Go: An efficient real-time communication alternative

Gustavo Castillo — Sat, 24 Jun 2023 22:24:46 +0000

Original posted in my website

Introduction

In today's software engineering landscape, real-time communication plays a crucial role in many modern applications. One technology that has gained popularity in this realm is Server-Sent Events (SSE).

In this article, we will explore what Server-Sent Events are, compare their features to WebSockets, provide a code example in Go and JavaScript, discuss the advantages and disadvantages of using Server-Sent Events, and draw a conclusion about their utility in general.

What are Server-Sent Events?

Server-Sent Events is a technology that allows servers to asynchronously send data to clients through a persistent HTTP connection. Unlike other real-time communication techniques like WebSockets, SSE utilizes a unidirectional connection from the server to the client.

This means that the client can only receive updates from the server without the ability to send data back directly.

WebSockets vs Server-Sent Events

While WebSockets and Server-Sent Events share the common goal of enabling real-time communication, there are key differences between them. WebSockets provide a bidirectional persistent connection, allowing both the client and server to send and receive data at any time.

On the other hand, SSE relies on a unidirectional connection, which limits communication solely from the server to the client. This difference makes SSE more suitable for use cases where data updates in real-time primarily originate from the server, such as news feeds or live events.

Code example

Here is a basic example showcasing the implementation of Server-Sent Events in Go and how to receive events in JavaScript.

server.go

package main

import (
  "fmt"
  "net/http"
  "time"
)

func main() {
  http.HandleFunc("/events", func(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "text/event-stream")
    w.Header().Set("Cache-Control", "no-cache")
    w.Header().Set("Connection", "keep-alive")
    w.Header().Set("Access-Control-Allow-Origin", "*")

    for {
      // Simulate sending events every second
      fmt.Fprintf(w, "data: %s\n\n", time.Now().Format(time.Stamp))
      w.(http.Flusher).Flush()
      time.Sleep(1 * time.Second)
    }
  })

  http.ListenAndServe(":8080", nil)
}

client.html

<script>
  const eventSource = new EventSource('http://localhost:8080/events')

  eventSource.onmessage = function (event) {
    console.log('Message received: ', event.data)
  }

  eventSource.onerror = function (event) {
    console.error('An error occurred:', event)
  }
</script>

Advantages

Simplicity: Server-Sent Events utilize an event-based interface that is easy to implement both on the server and client sides.
Compatibility: SSE is supported by all modern browsers, making it an accessible choice for developers.
Efficiency: Unlike WebSockets, SSE employs a standard HTTP connection, avoiding the additional overhead associated with establishing and maintaining a WebSocket connection. This can result in more efficient utilization of server resources.

Disadvantages

Unidirectional communication: SSE only allows communication in one direction, limiting its usage in scenarios that require constant bidirectional interaction between the client and server.
Limited support in older browsers: While modern browsers fully support SSE, older browsers may offer incomplete or no support at all. This restricts the target audience of the application.
Lack of error control: In SSE, if the connection is lost, the client will automatically attempt to reconnect. However, more advanced error handling and connection recovery must be implemented manually.

On Server-Sent Events

Server-Sent Events provide an effective and efficient option for implementing real-time communication in web applications. Their simplicity, compatibility, and efficiency are notable highlights that make them appealing for certain use cases.

However, their unidirectional nature and limitations in support for older browsers may influence the choice of using SSE compared to other alternatives like WebSockets. As with any technology, it is crucial to carefully evaluate the application requirements and project needs before deciding which real-time communication approach to employ.

Conclusion

In summary, Server-Sent Events are a valuable and viable choice for implementing real-time communication in web applications, offering an efficient and user-friendly solution in scenarios where unidirectional communication suffices, and modern browser support is a priority.

Versioning binaries in Go

Gustavo Castillo — Thu, 16 Sep 2021 22:23:28 +0000

In this article we will learn how to add a version to our binaries in Go using a Makefile file and a third party package to print our logo in ASCII code.

Having a version in our binaries is very important since with it, we could know which version of our application we are running on production, in addition our users could report errors for specific versions and thus be able to fix them.

Makefile to create the binary add version, and build time

# Get version from git hash
git_hash := $(shell git rev-parse --short HEAD || echo 'development')

# Get current date
current_time = $(shell date +"%Y-%m-%d:T%H:%M:%S")

# Add linker flags
linker_flags = '-s -X main.buildTime=${current_time} -X main.version=${git_hash}'

# Build binaries for current OS and Linux
.PHONY:
build:
    @echo "Building binaries..."
    go build -ldflags=${linker_flags} -o=./bin/binver ./main.go
    GOOS=linux GOARCH=amd64 go build -ldflags=${linker_flags} -o=./bin/linux_amd64/binver ./main.go

After this we will only need to execute the make build command from our terminal to create the binary with its respective version and build time.

Create the main file in Go


package main

import (
    "flag"
    "fmt"
    "os"

    "github.com/morikuni/aec"
)

var (
    buildTime string
    version   string
)

const binverFigletStr = `
_     _
| |__ (_)_ ____   _____ _ __
| '_ \| | '_ \ \ / / _ \ '__|
| |_) | | | | \ V /  __/ |
|_.__/|_|_| |_|\_/ \___|_|

`

func printASCIIArt() {
    binverLogo := aec.LightGreenF.Apply(binverFigletStr)
    fmt.Println(binverLogo)
}

func main() {
    displayVersion := flag.Bool("version", false, "Display version and exit")

    flag.Parse()

    if *displayVersion {
        printASCIIArt()
        fmt.Printf("Version:\t%s\n", version)
        fmt.Printf("Build time:\t%s\n", buildTime)
        os.Exit(0)
    }
}

Repository and video

If you want to see the complete code or the video where I explain how to do it step by step I leave you here the links:

GitHub repository
Video tutorial (In Spanish).

Build a game with Svelte, XState and SpeechRecognition

Gustavo Castillo — Mon, 22 Mar 2021 00:43:50 +0000

Hello folks this weekend I've been playing with XState, Svelte and the SpeechRecognition API 🎤, so I decided to build a mini number guessing game and model my states with a statechart, so let's see how to do it.

If you want to try it out go to this 🌎 Live demo (only works on Chrome desktop or mobile).

Note: The SpeechRecognition only recognises words in English (or at least I couldn't make it work in Spanish 😝), so even though the game is in Spanish you must say the number in English.

Types

As we're going to use TypeScript let's define our types first.

export type NumberGuessContextType = {
  recognition: SpeechRecognition | null
  randomNumber: number
  hint: string
  error: string
  isChrome: boolean
}

export type NotSupportedErrorType = {
  type: 'NOT_SUPPORTED_ERROR'
  error: string
}

export type CheckReadinessType = {
  type: 'CHECK_READINESS'
}

type NotAllowedErrorType = {
  type: 'NOT_ALLOWED_ERROR'
  error: string
}

type SpeakType = {
  type: 'SPEAK'
  message: string
}

type PlayAgainType = {
  type: 'PLAY_AGAIN'
}

export type UpdateHintType = {
  type: 'UPDATE_HINT'
  data: string
}

export type NumberGuessEventType =
  | NotSupportedErrorType
  | CheckReadinessType
  | NotAllowedErrorType
  | SpeakType
  | PlayAgainType
  | UpdateHintType

export type NumberGuessStateType = {
  context: NumberGuessContextType
  value: 'verifyingBrowser' | 'failure' | 'playing' | 'checkNumber' | 'gameOver'
}

Add global type for SpeechRecognition

The SpeechRecognition API is very experimental, so in order to TS knows about it we've to tech TS how to treat this API, let's declare a global interface to type webkitSpeechRecognition.

export declare global {
  interface Window {
    webkitSpeechRecognition: SpeechRecognition
  }
}

Machine

Now is the turn of our state machine, this is where we're going to put all the logic behind our little game.

import { createMachine, assign } from 'xstate'
import type {
  NumberGuessContextType,
  NumberGuessEventType,
  NumberGuessStateType,
  NotSupportedErrorType,
  UpdateHintType,
} from 'src/machine/types'

const numberGuessMachine = createMachine<
  NumberGuessContextType,
  NumberGuessEventType,
  NumberGuessStateType
>(
  {
    id: 'guessNumber',
    initial: 'verifyingBrowser',
    context: {
      hint: '',
      recognition: null,
      randomNumber: -1,
      error: '',
      isChrome: false,
    },
    states: {
      verifyingBrowser: {
        entry: 'checkBrowser',
        on: {
          NOT_SUPPORTED_ERROR: {
            target: 'failure',
            actions: 'displayError',
          },
          CHECK_READINESS: {
            target: 'playing',
            actions: 'initGame',
            cond: 'isSpeechRecognitionReady',
          },
          NOT_ALLOWED_ERROR: {
            target: 'failure',
            actions: 'displayError',
            cond: 'hasError',
          },
        },
      },
      playing: {
        after: {
          2500: {
            actions: 'clearHint',
            cond: 'hasHint',
          },
        },
        on: {
          SPEAK: {
            target: 'checkNumber',
          },
        },
      },
      checkNumber: {
        invoke: {
          id: 'checkingNumber',
          src: 'checkNumber',
          onDone: {
            actions: 'updateHint',
            target: 'gameOver',
          },
          onError: {
            actions: 'updateHint',
            target: 'playing',
          },
        },
      },
      gameOver: {
        exit: 'initGame',
        on: {
          PLAY_AGAIN: {
            target: 'playing',
          },
          SPEAK: {
            target: 'playing',
            cond: 'isPlayAgain',
          },
        },
      },
      failure: {
        type: 'final',
      },
    },
  },
  {
    actions: {
      checkBrowser: assign({
        isChrome: _ => navigator.userAgent.includes('Chrome'),
      }),
      displayError: assign<NumberGuessContextType, NotSupportedErrorType>({
        error: (_, event) => event.error,
      }) as any,
      initGame: assign({
        hint: _ => '',
        recognition: _ => new window.SpeechRecognition(),
        randomNumber: _ => Math.floor(Math.random() * 100) + 1,
      }),
      updateHint: assign<NumberGuessContextType, UpdateHintType>({
        hint: (_, event) => event.data,
      }) as any,
      clearHint: assign({
        hint: _ => '',
      }),
    },
    guards: {
      hasError(_, event: NumberGuessEventType) {
        if (event.type === 'NOT_ALLOWED_ERROR') {
          return event.error !== ''
        }
        return false
      },
      hasHint(context) {
        return context.hint !== ''
      },
      isUnsupportedBrowser(_, event: NumberGuessEventType) {
        return event.type !== 'NOT_SUPPORTED_ERROR'
      },
      isSpeechRecognitionReady() {
        window.SpeechRecognition =
          window.SpeechRecognition || window.webkitSpeechRecognition
        return window.SpeechRecognition !== undefined
      },
      isPlayAgain(_, event: NumberGuessEventType) {
        if (event.type === 'SPEAK') {
          return event.message === 'play'
        }
        return false
      },
    },
    services: {
      checkNumber(
        context: NumberGuessContextType,
        event: NumberGuessEventType
      ) {
        if (event.type !== 'SPEAK') {
          return Promise.reject('Acción no válida.')
        }

        const num = +event.message

        if (Number.isNaN(num)) {
          return Promise.reject('Ese no es un número válido, intenta de nuevo')
        }

        if (num > 100 || num < 1) {
          return Promise.reject('El número debe estar entre 1 y 100')
        }

        if (num === context.randomNumber) {
          return Promise.resolve('¡Felicidades has ganado!')
        }

        if (num > context.randomNumber) {
          return Promise.reject('MENOR')
        }

        return Promise.reject('MAYOR')
      },
    },
  }
)

export { numberGuessMachine }

Using our machine

Time to use our numberGuessMachine in the App component.

<script lang="ts">
  import { onMount, onDestroy } from 'svelte'
  import { interpret } from 'xstate'
  import { realisticLook } from 'src/utils'
  import { numberGuessMachine } from 'src/machine/numberGuess'

  const service = interpret(numberGuessMachine).start()

  function onSpeak(event: SpeechRecognitionEvent) {
    const [result] = event.results
    const [transcripts] = result
    const { transcript: message } = transcripts
    service.send({
      message,
      type: 'SPEAK',
    })
  }

  onMount(() => {
    if (!$service.context.isChrome) {
      return service.send({
        type: 'NOT_SUPPORTED_ERROR',
        error: 'Lo siento, tu navegador no soporta la API SpeechRecognition.',
      })
    }

    navigator.mediaDevices
      .getUserMedia({ audio: true })
      .then(() => {
        service.send({
          type: 'CHECK_READINESS',
        })

        const recognition = $service.context.recognition
        if (!recognition) {
          return
        }

        recognition.start()
        recognition.addEventListener('result', onSpeak)
        recognition.addEventListener('end', () => recognition.start())
      })
      .catch(() => {
        service.send({
          type: 'NOT_ALLOWED_ERROR',
          error:
            'Por favor, permita el uso del 🎤 para poder jugar. Y después recargue la página.',
        })
      })
  })

  onDestroy(() => {
    $service.context?.recognition?.stop()
    service.stop()
  })

  service.onTransition(state => {
    if (state.matches('gameOver')) {
      realisticLook()
    }
  })
</script>

<section class="container" data-state={$service.toStrings().join(' ')}>
  {#if $service.matches('failure') && !$service.context.isChrome}
    <div>{$service.context.error}</div>
  {/if}
  {#if $service.matches('playing')}
    <div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        class="mic"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
        />
      </svg>

      <h1>Adivina el número entre 1 y 100</h1>

      <h3>Menciona el número que desees (en inglés).</h3>

      <div class="msg">
        {$service.context.hint}
      </div>
    </div>
  {/if}
  {#if $service.matches('gameOver')}
    <div>
      <h2>
        {$service.context.hint}
        <br />
        <br />
        El número era: {$service.context.randomNumber}
      </h2>
      <button
        class="play-again"
        on:click={() =>
          service.send({
            type: 'PLAY_AGAIN',
          })}>Play</button
      >
      <p class="mt-1">O menciona "play"</p>
    </div>
  {/if}
  {#if $service.matches('failure') && $service.context.isChrome}
    <div>
      {$service.context.error}
    </div>
  {/if}
</section>

Notes

💻 Source code: number-guess

Happy coding 👋🏽

Infinite Scrolling with Svelte 3, XState and IntersectionObserver

Gustavo Castillo — Mon, 01 Feb 2021 19:01:01 +0000

Introduction

A year ago I created a post related to infinite scrolling with Svelte and IntersectionObserver, this time I'm going to show you a similar project (we could say it's the second version) using XState.

If you want to try it out go to this Live Demo

Create the project folder

Execute these commands in your terminal one by one in order to use the Svelte template.

# Install a Svelte project using sveltejs/template
$ npx degit sveltejs/template infinite-scroll

# Change working directory
$ cd infinite-scroll

# Install npm dependencies
$ npm install

# Install XState
$ npm install xstate

# Run the dev server
$ npm run dev

Create components

Create a folder called components inside src one, then create four components: Character.svelte, Footer.svelte, Header.svelte, and Loader.svelte, make sure you use Svelte's file extension, which is .svelte.

The components are basically the same as the previous post you can find the code here.

Create utility functions

Create a folter called lib inside src one, then create an index.js file, so let's implement some util functions to make our life easier:

export const transformCharacter = character => {
  const {
    id,
    name,
    status,
    species,
    created,
    image,
    gender,
    origin,
    location,
  } = character
  return {
    id,
    name,
    image,
    status,
    species,
    gender,
    created,
    origin: origin.name,
    location: location.name,
  }
}

// Format created date.
export const relativeTime = created => {
  const createdYear = new Date(created).getFullYear()
  const currentYear = new Date().getFullYear()
  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
  return rtf.format(createdYear - currentYear, 'year')
}

// Util function to fetch the list of Characters.
export const fetchCharacters = async (context) =>  {
try {
    const endpoint = context.characters.length > 0 ? context.pageInfo.next : 'https://rickandmortyapi.com/api/character'
    const blob = await fetch(endpoint)
    const { results, info, error } = await blob.json()
    if (!blob.ok) {
      return Promise.reject(error)
    }
    const characters = results.map(result => transformCharacter(result))
    return Promise.resolve({ characters, info })
  } catch (error) {
    return Promise.reject(error.message)
  }
}

Create the State Machine

In lib folder create a file called scrollMachine.js, and let's implement our state machine using XState.

import { createMachine, assign } from 'xstate'

const scrollMachine = createMachine({
  id: 'scrollMachine',
  context: {
    characters: [],
    pageInfo: {},
    error: '',
  },
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: {
          target: 'loading',
        },
      },
    },
    loading: {
      invoke: {
        id: 'characters',
        src: 'fetchCharacters',
        onDone: {
          target: 'success',
          actions: 'setCharacters',
        },
        onError: {
          target: 'failure',
          actions: 'setError',
        },
      },
    },
    loadMore: {
      invoke: {
        src: 'fetchCharacters',
        onDone: {
          target: 'success',
          actions: 'setMoreCharacters',
        },
        onError: {
          target: 'failure',
          actions: 'setError',
        },
      },
    },
    success: {
      on: {
        FETCH_MORE: {
          target: 'loadMore',
          cond: 'hasMoreCharacters',
        },
      },
    },
    failure: {
      type: 'final',
    },
  },
}, {
  guards: {
    hasMoreCharacters: ({ pageInfo }) => pageInfo.next,
  },
  actions: {
    setCharacters: assign({
      characters: (_, event) => event.data.characters,
      pageInfo: (_, event) => event.data.info,
    }),
    setMoreCharacters: assign({
      characters: ({ characters }, { data }) => [...characters, ...data.characters],
      pageInfo: (_, { data }) => data.info,
    }),
    setError: assign({
      error: (_, event) => event.data,
    }),
  },
})

export default scrollMachine

Update App component

<script>
  import { onMount, onDestroy } from 'svelte'
  import { interpret } from 'xstate'
  import { fetchCharacters } from './lib'
  import scrollMachine from './lib/scrollMachine'
  import Header from './components/Header.svelte'
  import Loader from './components/Loader.svelte'
  import Character from './components/Character.svelte'
  import Footer from './components/Footer.svelte'

  // Let's pass the fetchCharacters function
  // as a service to our state machine.
  const machine = scrollMachine.withConfig({
    services: { fetchCharacters },
  })

  // Interpret our machine and start it ("create an instance").
  const service = interpret(machine).start()

  // Create options to our IntersectionObserver instance.
  let options = {
    root: document.getElementById('scrollArea'),
    rootMargin: '0px',
    threshold: 0.5,
  }

  // Handle intersection and send `FETCH_MORE` event to
  // our state machine if there are more characters to load.
  let observer = new IntersectionObserver(event => {
    const [entries] = event
    if (!entries.isIntersecting || !$service.context.pageInfo.next) {
      return
    }
    service.send({ type: 'FETCH_MORE' })
  }, options)

  // Fetch characters on component mounts.
  onMount(() => {
    service.send({ type: 'FETCH' })
    observer.observe(document.querySelector('footer'))
  })

  // Remove observer from our target to avoid potential memory leaks.
  onDestroy(() => {
    observer.unobserve(document.querySelector('footer'))
  })
</script>

<style>
  .container {
    min-height: 50vh;
    background-color: var(--text-color);
  }
  .inner {
    max-width: 80em;
    margin: 0 auto;
    padding: 3rem 0;
    display: grid;
    grid-gap: 20px;
    justify-items: center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .loader,
  .error {
    padding-top: var(--padding-lg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .error {
    color: var(--orange-color);
    font-size: 18px;
  }
</style>

<Header />
<section class="container" id="scrollArea">
  {#if $service.matches('success') || $service.matches('loadMore')}
    <div class="inner">
      {#each $service.context.characters as character (character.id)}
        <Character {character} />
      {/each}
    </div>
  {/if}
  {#if $service.matches('failure')}
    <div class="error"><span>{$service.context.error}</span></div>
  {/if}
  {#if $service.matches('loading') || $service.matches('loadMore')}
    <div class="loader">
      <Loader />
    </div>
  {/if}
  <Footer />
</section>

Notes:
Rick and Marty API docs can be found: here
GitHub Repository: here
Youtube video (Spanish): here

Happy coding 👋🏽

Git tricks

Gustavo Castillo — Sun, 27 Dec 2020 00:53:10 +0000

Some useful git tricks I use all the time, the list can be updated later.

# Stash track/untrack changes
$ git stash -u or git stash --include-untracked

# Rename local branch
# If you are on the branch you want to rename:
$ git branch -m new-name

# If you are on a different branch:
$ git branch -m old-name new-name 

# Delete the old-name remote branch and push the new-name local branch.
$ git push origin old-name new-name

# Reset the upstream branch for the new-name local branch. Switch to the branch and then:
$ git push origin -u new-name

# Add file to the last commit (avoid this if the commit is already public 🙅🏼‍♂️)
$ git add my_missing_file
$ git commit --amend --no-edit

# List all origin from the remote repo
$ git remote prune origin --dry-run

# Prune origin in your local repo
$ git remote prune origin

# Prune when you fetch from a remote
$ git fetch --prune

# List all branches which have been merged
$ git branch --merged

# Prune local branches which have been merged
$ git branch -d branch-to-delete

# List all branches which have been NOT merged
$ git branch --no-merged

# Prune all branches which have been NOT merged
$ git branch -D un-merged-branch-to-delete

Update a local fork at the terminal Explanation

$ git remote -v
$ git remote add upstream [github url]
$ git remote -v
$ git fetch upstream
$ git checkout master
$ git merge upstream/master
$ git push origin master

Infinite Scroll with Svelte 3 and IntersectionObserver 😍

Gustavo Castillo — Wed, 15 Jan 2020 03:45:03 +0000

Introduction

Recently I've been learning Svelte 3, which is a frontend framework to cybernetically enhanced web apps and I liked it a lot. In this article, I'm going to show you how to build an application with an infinite scroll using IntersectionObserver and Svelte.

In my opinion, the best way of learning a new technology is by doing lots of toy projects, and having fun in the process, so let's get started.

Create the project folder

Execute these commands in your terminal one by one in order to use the Svelte template.

# Install a Svelte project using sveltejs/template
$ npx degit sveltejs/template infinite-scroll

# Change working directory
$ cd infinite-scroll

# Install npm dependencies
$ npm install

# Run the dev server
$ npm run dev

Create component's files

Create a folder called components inside src one, then create four components: Character.svelte, Footer.svelte, Header.svelte, and Loader.svelte, make sure you use Svelte's file extension, which is .svelte.

Implement Footer component

<style>
  .footer {
    display: flex;
    justify-content: center;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .footer a {
    color: inherit;
    text-decoration: underline;
  }
</style>

<footer class="footer">
  <span>Built with Svelte 3 original design by &nbsp;</span>
  <a href="https://axelfuhrmann.com/" target="_blank" rel="noopener">
    Axel Fuhrmann
  </a>
</footer>

Implement Header component

<style>
  .header {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
  }

  .title {
    font-size: 3.6em;
    display: flex;
    color: var(--text-color);
    align-items: center;
    flex-direction: column;
  }

  .title span {
    display: block;
    background-color: var(--text-color);
    border: medium none;
    font-size: 1.875rem;
    color: var(--orange-color);
    padding: 0 1rem;
    transform: skew(2deg);
  }
</style>

<header class="header">
  <h1 class="title">
    The Rick and Morty APP
    <span>Clone</span>
  </h1>
</header>

Implement Loader component

<style>
  .spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
  }

  .spinner div {
    transform-origin: 20px 20px;
    animation: spinner 1.2s linear infinite;
  }

  .spinner div:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 1.5px;
    left: 18px;
    width: 1.5px;
    height: 4.5px;
    border-radius: 10%;
    background: #fff;
  }

  .spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }

  .spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }

  .spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }

  .spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }

  .spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }

  .spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }

  .spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }

  .spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }

  .spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }

  .spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }

  .spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }

  .spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }

  @keyframes spinner {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
</style>

<div class="spinner">
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
  <div />
</div>

Implement Character component

<script>
  import { relativeTime } from '../lib'

  export let character = {
    id: 0,
    image: '',
    name: '',
    created: '',
    status: '',
    species: '',
    gender: '',
    origin: '',
    location: '',
  }
</script>

<style>
  .character {
    min-width: 300px;
    border-radius: 0.625rem;
    overflow: hidden;
    margin-bottom: 0.625rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px,
      rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  }

  .image-container {
    position: relative;
    width: 100%;
    background: rgb(32, 35, 41) none repeat scroll 0% 0%;
  }

  .image-container img {
    margin: 0;
    opacity: 1;
    transition: opacity 0.5s ease 0s;
  }

  .name-container {
    width: 100%;
    background: rgb(32, 35, 41) none repeat scroll 0% 0%;
    opacity: 0.8;
    position: absolute;
    bottom: 0px;
    padding: 0.625rem;
  }

  .name {
    color: rgb(245, 245, 245);
    font-size: 1.625rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    font-stretch: expanded;
  }

  .id {
    color: rgb(187, 187, 187);
    margin: 0;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
  }

  .info {
    padding: 1.25rem;
    height: 100%;
    background: rgb(51, 51, 51) none repeat scroll 0% 0%;
  }

  .info > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0.75rem 0px 0.375rem;
    border-bottom: 1px solid var(--boder-bottom-color);
  }

  .info > div span {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgb(158, 158, 158);
  }

  .info > div span:nth-child(2) {
    color: var(--orange-color);
  }
</style>

<article class="character">
  <div class="image-container">
    <div>
      <img src={character.image} alt={character.name} />
    </div>
    <div class="name-container">
      <h2 class="name">{character.name}</h2>
      <p class="id">
        id: {character.id} - created {relativeTime(character.created)}
      </p>
    </div>
  </div>
  <div class="info">
    <div>
      <span>STATUS</span>
      <span>{character.status}</span>
    </div>
    <div>
      <span>SPECIES</span>
      <span>{character.species}</span>
    </div>
    <div>
      <span>GENDER</span>
      <span>{character.gender}</span>
    </div>
    <div>
      <span>ORIGIN</span>
      <span>{character.origin}</span>
    </div>
    <div>
      <span>LAST LOCATION</span>
      <span>{character.location}</span>
    </div>
  </div>
</article>

Create utility functions

Create a folter called lib inside src one, then create an index.js file, so let's implement two util functions to make our life easier:

export const transformCharacter = character => {
  const {
    id,
    name,
    status,
    species,
    created,
    image,
    gender,
    origin,
    location,
  } = character
  return {
    id,
    name,
    image,
    status,
    species,
    gender,
    created,
    origin: origin.name,
    location: location.name,
  }
}

export const relativeTime = created => {
  const createdYear = new Date(created).getFullYear()
  const currentYear = new Date().getFullYear()
  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
  return rtf.format(createdYear - currentYear, 'year')
}

Update App component

<script>
  import { onMount } from 'svelte'
  import { transformCharacter } from './lib'
  import Header from './components/Header.svelte'
  import Loader from './components/Loader.svelte'
  import Character from './components/Character.svelte'
  import Footer from './components/Footer.svelte'

  let loading = true
  let characters = []
  let pageInfo = {}
  let options = {
    root: document.getElementById('scrollArea'),
    rootMargin: '0px',
    threshold: 0.5,
  }
  let observer = new IntersectionObserver(handleIntersection, options)

  async function handleIntersection(event) {
    const [entries] = event
    loading = true
    try {
      if (!entries.isIntersecting || !pageInfo.next) {
        loading = false
        return
      }
      const blob = await fetch(pageInfo.next)
      const { results, info } = await blob.json()
      characters = [
        ...characters,
        ...results.map(result => trasformCharacter(result)),
      ]
      pageInfo = info
      loading = false
    } catch (error) {
      loading = false
      console.log(error)
    }
  }

  onMount(async () => {
    try {
      const blob = await fetch('https://rickandmortyapi.com/api/character')
      const { results, info } = await blob.json()
      characters = results.map(result => trasformCharacter(result))
      pageInfo = info
      loading = false
      observer.observe(document.querySelector('footer'))
    } catch (error) {
      loading = false
      console.log(error)
    }
  })
</script>

<style>
  .container {
    min-height: 50vh;
    background-color: var(--text-color);
  }

  .inner {
    max-width: 80em;
    margin: 0 auto;
    padding: 3rem 0;
    display: grid;
    grid-gap: 20px;
    justify-items: center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .loader {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<Header />
<section class="container" id="scrollArea">
  <div class="inner">
    {#each characters as character (character.id)}
      <Character {character} />
    {/each}
  </div>
  <div class="loader">
    {#if loading}
      <Loader />
    {/if}
  </div>
  <Footer />
</section>

Notes:
Rick and Marty API docs can be found: here
GitHub Repository: here

Happy coding 👋🏽

Using Live Reload in Go

Gustavo Castillo — Sat, 21 Dec 2019 02:19:19 +0000

When we're developing APIs in Go or any other language it's important to have tools that help us to automate certain tasks like Live Reload, I'd had been using realize to doing it, but it seems to have some issues when working with Go modules, I tried some different solutions and they didn't work for me 😭.

Luckily I found a very handy package that can helps us to achieve this task adn it's called modd, let's give it a try and see how it works:

Create the basic project structure

$ mkdir live-reload && cd live-reload && mkdir cmd
$ go mod init
$ touch cmd/main.go

Open main.go file and type the following

package main

import (
    "fmt"
    "log"
    "net/http"
)

func main() {

    mux := http.NewServeMux()

    mux.HandleFunc("/", homeHandler)
    mux.HandleFunc("/contact", contactHandler)

    log.Println(fmt.Sprintf("Server running on http://localhost%s 🐹", ":4000"))
    err := http.ListenAndServe(":4000", mux)
    if err != nil {
        log.Fatalf("could not run the server %v", err)
        return
    }
}

func homeHandler(w http.ResponseWriter, r *http.Request) {
    w.Write([]byte("Hello from home handler"))
}

func contactHandler(w http.ResponseWriter, r *http.Request) {
    w.Write([]byte("Hello from contact handler"))
}

Installing modd package

$ brew install modd

Create modd config file

# run _only_ changed tests
**/*.go {
    prep: go test @dirmods
}

# run and rebuild the app
# make sure you type your app name adter -o flag and daemon command
**/*.go !**/*_test.go {
    prep: go build -o live-reload ./cmd
    daemon +sigterm: ./live-reload
}

Then execute modd command inside root project:

$ modd

You should see something like this in your terminal:

Go to your main.go file and update homeHandler

//... other code
func homeHandler(w http.ResponseWriter, r *http.Request) {
    w.Write([]byte("Hello from home handler changed and live reload 😎"))
}
//... rest of the code

After that modd is going to re-compile your server and now you can visit http://localhost:4000 and see the updated version, your terminal should look like so:

Conclusion

Hope it helps, happy coding 👨🏽‍💻

Let's talk about Maps in Go

Gustavo Castillo — Sun, 24 Nov 2019 19:09:31 +0000

Introduction

One of the most used and versatile data structures in programming is Hash Tables it is used to save an unordered collection of data in key: value format in which all the keys are unique and the value associated with every key can be retrieved, deleted or updated in constant time no matter how large the hash table. The way we use it in Go is through Maps.

What is a Map?

A map is a reference to a hash table, and a map type is defined map[K]V, where K and V are the types of its keys and values. Some characteristics about maps are:

All keys in a given map are of the same type.
All values in a given map are of the same type.
Keys do not need to be of the same type as the values.
Key type K must be comparable using == (to check if a given key already exists in the map).
Floating-point numbers are comparable, but it's a bad idea to use them as keys.

Creating Maps

Create a map using the built-in function make:

package main

import "fmt"

func main() {
    // mapping from strings to ints
    ages := make(map[string]int)
    fmt.Println(ages) // map[]
}

Use a map literal to create a map with some initial data:

package main

import "fmt"

func main() {
    ages := map[string]int{
        "gustavo": 26,
        "jhon": 20,
    }
    fmt.Println(ages) // map[gustavo:26 jhon:20]
}

Use built-in function make and subscript notation:

package main

import "fmt"

func main() {
    ages := make(map[string]int)
    ages["gustavo"] = 26
    ages["jhon"] = 20

    fmt.Println(ages) // map[gustavo:26 jhon:20]
}

Access to Maps values

Maps values are accessed through subscript notation:

package main

import "fmt"

func main() {
    ages := map[string]int{
        "gustavo": 26,
        "jhon": 20,
    }

    fmt.Println(ages["gustavo"]) // 26
}

Update a Map value

We use subscript notation and assign a new value to the key:

package main

import "fmt"

func main() {
    ages := map[string]int{
        "gustavo": 26,
        "jhon": 20,
    }

    ages["gustavo"] = 30

    fmt.Println(ages["gustavo"]) // 30
}

Delete a Map value

Use built-in function delete:

package main

import "fmt"

func main() {
    ages := map[string]int{
        "gustavo": 26,
        "jhon": 20,
    }

    delete(ages, "gustavo") // remove element ages["gustavo"]

    fmt.Println(ages) // map[jhon:20]
}

What if the element isn't in the map?

A map lookup using a key that isn't present returns the zero value for its type.

package main

import "fmt"

func main() {
    ages := map[string]int{
        "gustavo": 26,
        "jhon": 20,
    }
    ages["karla"] = ages["karla"] + 1

    fmt.Println(ages) // map[gustavo:26 jhon:20 karla:1]
}

Accessing a map element using subscript notation always returns a value as we saw in the previous example, but some time you need to know whether the element was really there or not.

package main

import "fmt"

func main() {
    ages := map[string]int{
        "gustavo": 26,
        "jhon": 20,
    }

    age, ok := ages["karla"]

    if !ok { // "karla" is not a key in this map, age == 0
        fmt.Println("Element is not in the map")
        fmt.Printf("The age is = %d", age) // 0
    }
}

Print all Map values (not in order)

package main

import (
    "fmt"
)

func main() {
    ages := map[string]int{
        "gustavo": 26,
        "jhon": 20,
    }

    for key, value := range ages {
        fmt.Println(key, value) // gustavo 26 jhon 20
    }
}

Print Map in order

We must sort the keys explicitly, for example:

package main

import (
    "fmt"
    "sort"
)

func main() {
    ages := map[string]int{
        "gustavo": 26,
        "jhon": 20,
    }
    var keys []string
    for age := range ages {
        keys = append(keys, age)
    }

    sort.Strings(keys)

    for _, age := range keys {
        fmt.Printf("%s\t%d\n", age, ages[age]) // gustavo 26 jhon 20
    }
}

Conclusion

Maps are really helpful so I hope it helps you to understand how use them in your Go apps.

Happy coding 👋🏽.

MongoDB GUI tools for managing your DB's

Gustavo Castillo — Tue, 17 Oct 2017 00:11:26 +0000

When we are working with databases is very useful to manage them using a tool which allows us to query and visualize our information not only fast, but also easy. I'm using mongodb in a project and I have found some GUI tools which I think you can find helpful. Let's get started to see them.

MongoDB Compass (official tool for mongodb)

"MongoDB Compass is designed to allow users to easily analyze and understand the contents of their data collections within MongoDB and perform queries, without requiring knowledge of MongoDB." Official site

Robo 3T & Studio 3T

"Robo 3T (formerly Robomongo) is the free lightweight GUI for MongoDB enthusiasts."official site"

"Are you serious about MongoDB? Choose Studio 3T - our fully featured IDE for MongoDB professionals."

Features:

Fully featured IDE with embedded shell
Visual Query Builder
In-Place editing
IntelliShell with Auto-Completion
Query MongoDB with SQL
Export to / import from SQL DB
Aggregation Pipeline Editor

Note: Studio 3T is a paid software, but it's really complete you can download the free trial for 14 days and give it a try

MongoBooster

"MongoBooster is a shell-centric cross-platform GUI tool for MongoDB v2.4-3.4, which provides fluent query builder, SQL query, update-in-place, ES2017 syntax support and true intellisense experience." official site

Note: if you know any other tool, please let me know in the comments section :), happy coding!

How to email your users without sending them spam?

Gustavo Castillo — Fri, 06 Oct 2017 00:15:40 +0000

Email functionality is something we use (almost) all the time in our web applications, so it's really important to test this feature while we're in development stage and avoid sending spam to our users. Because of that I'm writing this post to tell you about Mailtrap which is a fake smtp testing server for dev teams. In order to use Mailtrap you have to follow this steps to setup your inbox:

Create an account clicking here.
Write a name for your inbox (I'm going to use "testing") and click the green button with the text Create Inbox.
Click in your testing inbox in order to see your credentials.

Now let's talk about Go code, for this tutorial I'm going to use gomail package for sending emails click here to download it. Create the following project structure inside your go workspace:

mailing\
    image.jpg // May be any image you want to.
    mail.html
    main.go

Open mailing folder in your favourite code editor, then open main.go file and write the following code:

package main

import (
        "fmt"
        "io/ioutil"
        "gopkg.in/gomail.v2"
)

func main() {
        file, err := ioutil.ReadFile("mail.html") 
        if err != nil {
                fmt.Errorf("Could not open the file due to %v ", err.Error())
                return
        }

        // put your own credentials instead
        // order: Host, port, username, password
        m := gomail.NewMessage("smtp.mailtrap.io", 2525, "bc580f0dd3826c", "caec98e37af35d")
        m.SetHeader("From", "gcdcoder@gmail.com")
        m.SetHeader("To", "fake-user@mail.com")
        m.SetHeader("Subject", "welcome to my site")
        m.Embed("image.jpg")
        m.SetBody("text/html", string(file))

        dialer := gomail.NewDialer()

        if err := dialer.DialAndSend(m); err != nil {
                fmt.Errorf("Could not send the Email due to %v ", err.Error())
                return
        }
        fmt.Println("Email sent successfully!")
}

Now open mail.html file and write the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Email</title>
    <style>
        body, html {
            background: #eee;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            margin: 0;
            padding: .5em 0;
            text-align: center;
        }

        img {
            max-width: 100%;
            width: 250px;
            height: 150px;
            margin-top: 1em;
        }

        h1 {
            margin: 0;
            color: steelblue;
            text-align: center;
            font-family: sans-serif;
        }

        a {
            text-decoration: none;
            display: block;
            width: 200px;
            color: #fff;
            background: steelblue;
            text-align: center;
            padding: .5em 0;
            font-family: sans-serif;
            margin-left: auto;
            margin-right: auto;
            margin-top: 1em;
        }
    </style>
</head>
<body>
    <h1>Saludo de bienvenida</h1>
    <img src="cid:image.jpg" alt="Image">
    <a href="http://twitter.com/gcdcoder" target="_blank">Click me!</a>
</body>
</html>

Time to test our code open a terminal in your mailing folder and write the following command:

go run main.go

After a while you should see the message Email sent successfully!, then visit your inbox in Mailtrap and you should see a new email open it and vualÃ¡ there you have it!.

Note: I am reading the mail.html file using ioutil package for simplicity, I know this is not the best way of doing it you should use html/template package instead.

Thanks for reading and happy coding! ;)

How to upload files with Golang and Ajax?

Gustavo Castillo — Wed, 16 Aug 2017 17:00:16 +0000

Uploading file(s) is a common functionality that we want to use in our websites, it could be for user's profile avatar, an image gallery, a cover post and so on, but What if you want to do it by using Ajax. Let's see how I solved this problem.

First of all let me give you the project structure:

public\
    api.js
    app.js
    index.html
    style.css
controllers\
    file.go
files\

Then let's create the index.html file inside public folder and write the following code:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
    user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0">
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
    <title>File upload using Ajax</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data" class="uploadForm">
        <input class="uploadForm__input" type="file" name="file" id="inputFile" accept="image/*">
        <label class="uploadForm__label" for="inputFile">
            <i class="fa fa-upload uploadForm__icon"></i> Select a file
        </label>
    </form>
    <div class="notification" id="alert"></div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="api.js"></script>
    <script src="app.js"></script>
</body>
</html>

Let's add some basic CSS styles and create the styles.css file inside public folder:


body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;    
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body,
.uploadForm,
.uploadForm__label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uploadForm {
    width: 600px;
    max-width: 600px;
    height: 300px;
    flex-direction: column;    
    border: 2px dashed gray;
    font-family: inherit;
}

.uploadForm__input {
    display: none;
}

.uploadForm__label {
    border: 1px solid gray;
    padding: .5em 2em;
    color: deepskyblue;
    transition: transform .4s;
    flex-direction: column;
}

.uploadForm__label:hover {
    cursor: pointer;
    transform: scale(1.01);
    box-shadow: grey 2px 2px 10px;
}

.uploadForm__icon {
    font-size: 1.8em;
}

.notification {    
    display: none;    
}

.success,
.error {
    right: 30px;
    z-index: 10;
    width: 300px;
    bottom: 40px;
    padding: 1em;
    height: auto;
    text-align: center;
    display: block;
    position: fixed;
    font-family: inherit;
    animation: alert .8s forwards;
}

.notification.success {
    background: #D9EDF7;
    color: #31709C;
}

.notification.error {
    background: #F2DEDE;
    color: #B24842;
}

@keyframes alert {
    0% {
        opacity: 0;
        bottom: -40px;
    }

    100% {
        opacity: 1;
        bottom: 40px;
    }
}

Next let's create the app.js file inside public folder too and write the following code:

(function (d, axios) {
    "use strict";
    var inputFile = d.querySelector("#inputFile");
    var divNotification = d.querySelector("#alert");

    inputFile.addEventListener("change", addFile);

    function addFile(e) {
        var file = e.target.files[0]
        if(!file){
            return
        }
        upload(file);
    }

    function upload(file) {
        var formData = new FormData()
        formData.append("file", file)
        post("/upload", formData)
            .then(onResponse)
            .catch(onResponse);        
    }

    function onResponse(response) {
        var className = (response.status !== 400) ? "success" : "error";
        divNotification.innerHTML = response.data;
        divNotification.classList.add(className);
        setTimeout(function() {
            divNotification.classList.remove(className);
        }, 3000);
    }
})(document, axios)

Finally we need to create api.js file one more time inside public folder and write this code:

"use strict";

function post(url, data) {
    return axios.post(url, data)
        .then(function (response) {
            return response;
        }).catch(function (error) {
            return error.response;
        });
}

Well, after all this let's finally write some Go code. I'm going to start by creating the file.go file inside controllers folder and write the following:

package controllers

import (
    "fmt"
    "io/ioutil"
    "mime/multipart"
    "net/http"
)

// UploadFile uploads a file to the server
func UploadFile(w http.ResponseWriter, r *http.Request) {
    if r.Method != http.MethodPost {
        http.Redirect(w, r, "/", http.StatusSeeOther)
        return
    }

    file, handle, err := r.FormFile("file")
    if err != nil {
        fmt.Fprintf(w, "%v", err)
        return
    }
    defer file.Close()

    mimeType := handle.Header.Get("Content-Type")
    switch mimeType {
    case "image/jpeg":
        saveFile(w, file, handle)
    case "image/png":
        saveFile(w, file, handle)
    default:
        jsonResponse(w, http.StatusBadRequest, "The format file is not valid.")
    }
}

func saveFile(w http.ResponseWriter, file multipart.File, handle *multipart.FileHeader) {
    data, err := ioutil.ReadAll(file)
    if err != nil {
        fmt.Fprintf(w, "%v", err)
        return
    }

    err = ioutil.WriteFile("./files/"+handle.Filename, data, 0666)
    if err != nil {
        fmt.Fprintf(w, "%v", err)
        return
    }
    jsonResponse(w, http.StatusCreated, "File uploaded successfully!.")
}

func jsonResponse(w http.ResponseWriter, code int, message string) {
    w.Header().Set("Content-Type", "application/json")
    w.WriteHeader(code)
    fmt.Fprint(w, message)
}

As our final step let's create the main.go file in your root directory and use the file package like so:

package main

import (
    "log"
    "net/http"

        // Note this is my path according to my GOPATH, chage it according to yours.
    "bitbucket.org/gustavocd/upload-img/controllers"
)

func main() {
    http.Handle("/", http.FileServer(http.Dir("./public")))
    http.HandleFunc("/upload", controllers.UploadFile)
    log.Println("Running")
    http.ListenAndServe(":8080", nil)
}

Notes

I'm not handling validation (you should do it), but it should work like a charm.
I'm using my GOPATH root, please change according to yours.
Keep learning and happy code :).