DEV Community: subliminal_大衛

Abecedario Espanol

subliminal_大衛 — Sat, 05 Nov 2022 14:03:02 +0000

My girlfriend is from Sevilla (Spain) and is currently looking for a job as language or history teacher in Berlin. I wanted to help her a bit by creating a website for her. While the website is far from being ready, we decided to begin with a teeny-tiny app that teaches you to pronounce the spanish alphabet, which has quite a few pecularities. The alphabet is represented by little black boxes with clickable letters. Special character are being identified by a small black cross that reveals more info when clicked.

The prototype is currently deployed on Netlify: teresais-alfabeto. The source code is on Gitlab.

How does the Browser speak spanish?

What may appear complicated is in fact really easy. I learned the basics in Wes Bos’s wonderful Vanilla JS course JavaScript30. With only a few lines of code you can use the SpeechSynthesis Constructor by MDN Web Docs. So all i really had to do was to define a new object instance in the data section of my App.vue.

Ups! Did I mention that I used Vue for the site? If you don’t know what Vue is you’ll find a free tutorial on the Scrimba site. It is really basic but should suffice to understand my code.

Anyway I defined some variables in the data section, namely synth and pronounciation:

data () {
    return {
      data: this.$store.state.alphabet,
      synth: window.speechSynthesis,
      voiceSpanish: [],
      pronounciation: new window.SpeechSynthesisUtterance
    }
  },

In the method section I started with the method speakLetter()

methods: {
    speakLetter({msg}) {
      var voiceList = this.synth.getVoices()
      this.voiceSpanish = voiceList.filter(item => item.name === "Jorge")
      this.pronounciation.text = msg.toLowerCase()
      this.pronounciation.voice = this.voiceSpanish[0]
      this.synth.speak(this.pronounciation)
    }
}

First I call the list of available voices with the .getVoices()-method using the synth-variable we declared above and filter through it looking for the “Jorge”-voice. (My daughter seems to like this particular voice ;-)) Then we’ll set the text-attribute of the SpeechSynthesisUtterance instance to the text submitted in the function parameter and the voice-attribute to the voice of “Jorge”. Finally the speak()-method does the job of firing the voice.

The LetterShow-Component

The LetterShow-component is being called by App.vue to show the responding letters. For this purpose I have prepared a data.json-file that i’ve loaded into the Vuex-store.

It is really just an object that contains the letters and indicates if they have some special features or not. If so, those are being specified in the infotextRojo and infotextVerde-keys (Indicating strong and weak consonants in the spanish language).

I’m looping through this object with a v-for-directive and showing every letter with the LetterShow-component. Here is the HTML-part of it:

<template>
  <div class="letter-box">
      <h1 class="main-letter" @click="speak">{{ msg }}</h1>
      <p v-if="special" class="info-letter" @click="showModal">&#x2795;</p>
      <p v-else class="info-letter"></p>
  </div>
</template>

If the letter is special we’ll show a cross that activates the Modal-component to show the special cases. Both, the LetterShow and the Modal-component, fire Custom Events to trigger the speakLetter-method. That’s about it.

Misc

I guess my explication is somewhat abstract, so I’m inviting you to clone the repository and play around with it on your machine.

Currently it is not running on the mobile browsers I tried and I’m guessing it has to do with the experimental nature of the SpeechSynthesis Constructor.
Also, to make sure that I’m really getting the “Jorge”-voice I had to fire the speakLetter-method once on page mount, because the SpeechSynthesis starts with the voice of an american woman by default.

mounted() {
    this.speakLetter({msg: ""})
  }

As you can see, i’m just calling the speakLetter*-method with an empty message, so that it is forced to load “Jorge” afterwards.

Have fun playing around!

Building a devblog with Site.js and Hugo static site generator

subliminal_大衛 — Sun, 31 Jan 2021 19:50:45 +0000

Introduction

Some days ago i stumbled upon the amazing small-tech.org project by Aral Balkan and Laura Kalbag. I have been following their work for a while and i'd like to support them a bit by using and exploring their Small Web construction set. It comes bundled with the Hugo static site generator, so I was immediately able to use the nice Ghostwriter Theme for this blog.

Installing Site.js and Initiating a Hugo project

Everything started with the installation of Site.js as recommended by the developer. Type the following code in your favourite command line tool (i use Hyper or the built-in terminal from VSCode).

curl -s https://sitejs.org/install | bash

Now you are ready to create a folder for your Hugo project and jump into it:

mkdir my-hugo-blog
cd my-hugo-blog

and create a new site using the following command:

site hugo new site .hugo

Now you'll find the Hugo folder structure in the directory you created. Open this in your favourite code editor.

Installing a Hugo Theme

For starters i chose the Ghostwriter Theme from https://themes.gohugo.io, but this is really up to you.
Instead of cloning the repo into my directory i chose to download the .zip from the Github Page and unpacked it in the themes-folder of my Hugo project.

Now we have to tell our project that we want to use the installed Theme. Open the config.toml file in the projects root directory. Mine looks like this:

baseURL = "/"
languageCode = "en-us"
title = "SubGuy's Devblog"
theme = "ghostwriter-master"
paginate = "10"

[Author]
name = "Subliminal_Guy"


[Params]
mainSections = ["post"]
intro = true
headline = "subguy's devblog "
description = "babbeling code since 2017" 
github = "https://github.com/SubliminalGuy"
gitlab = "https://gitlab.com/subliminal_guy"
twitter = "https://twitter.com/SubKid"
opengraph = true
shareTwitter = true
dateFormat = "Mon, Jan 2, 2021"
authorbox = true

[Permalinks]
post = "/:filename"

Copy everything. The most important part for now is, that you set the title as you like and the theme to "ghostwriter-master" (or whatever the directory name for your installed theme is - it has to be verbatim).
Take a look at the [Params]. Most of them are pretty self-explanatory. You can play around with them later.

Now you can copy the post-folder in "themes/ghostwriter-master/exampleSite/content" (respectively "themes/YOUR-THEME-FOLDER-NAME/exampleSite/content") into the content-folder of your projects root directory.

Launching the blog

Now start the development server by typing the following command into the terminal. This should work from your root directory.

site

If you now check your browser at https://localhost you should see the following:

I deleted all the blogposts and created a new one with the following prompt:

site hugo new post/building-a-devblog.md

In this file I finally entered the Markdown for my first blog post that you're currently reading.

And now?

The deployment of this blog on a VPS of your choice is as easy as it gets. Simply install Site.js in the designated directory, upload the files we created and enter:

site enable

Your blog should be live immediately. Enjoy!