Forem: Rustam Apay

Guitar Playing Analysis App (vibe coded in 1 day)

Rustam Apay — Sat, 29 Nov 2025 23:22:06 +0000

I really like Sting's music, and every time I came across a guitar in various random circumstances in my life, I always started learning his songs. First and foremost, it was Shape of My Heart, and then Fragile. I easily found full guitar lesson tutorials for them on YouTube.

But for my third favorite song, Desert Rose, I couldn't find a lesson for it anywhere, probably because it's not typically played on the guitar. I started searching YouTube simply for performances of the song on guitar, and I only liked one specific rendition. Naturally, it wasn't in a lesson format, but just a performance of the playing and the song.

I was so determined to learn it that I took screenshots of every finger position and marked the picking patterns on those screenshots. Then I started to doubt that I might have misheard or incorrectly marked something on the images. I also used a service to remove the girl's vocal track which was distracting from the guitar playing.

And then I remembered that vibe coding exists nowadays. Why not write an application for this kind of analysis of musical pieces? And today, I wrote it in a single day.

What does it do? We can conveniently rewind the video with tenth-of-a-second accuracy and catch the moments when the musician changes their finger positions. Then, on a guitar simulation, we mark the spots where the notes and strings are being fretted. We also mark the picking pattern in its chronological order.

If we need to use the same finger position and picking pattern, we can reference it linked to the video. That is, having created a position once, we can use it repeatedly later on. Afterwards, we see the complete list of played excerpts.

We can click on them and listen to them separately, refining and checking our notation. And also polishing our own playing by example.

You can try out this application by downloading it from GitHub. You only need to place your video in the public/video.mp4 folder.

React Component to npm Package: Minimal Setup with Rollup, Vite, and GitHub Pages

Rustam Apay — Tue, 09 Sep 2025 20:09:10 +0000

Sometimes you need to create an npm package for a React component so it can be reused across different projects. For this, you need to organize the code properly:

make React and TypeScript work together,
ensure that changes in your component are immediately visible in a demo page (hot reload),
build the final component as an npm package,
publish the demo app so others can see how it works.

Packing a React component into a sharable npm module used to be annoying and difficult for me (shame on me). In the past, I used TSDX, but it hasn’t been updated for three years.

Then I tried building such a setup with Cursor AI, but it kept generating extremely random, messy, and buggy code. After that, I followed some YouTube tutorials, but they were overloaded with unnecessary details.

So finally, I came up with this blueprint, which includes:

Minimal dependencies
Vite config for hot reload in the demo app, so changes in the package are reflected immediately
Rollup configuration to build the module
Vite config to build the demo app for production
gh-pages config to publish the example app

If you’re interested, you can try the code yourself:

https://github.com/ApayRus/react-component-npm-package

React Typescript Provider Boilerplate Snippet

Rustam Apay — Mon, 31 Jul 2023 00:00:13 +0000

Hi friends. In my last projects I use providers a lot:

Auth (login, logout, user)
AppState (which part of the app is loaded and which is not, user settings)
NavigationProvider (page neighbors, go next, go back)
ModalsProvider (open in modal form a component with some props)

So I came up with a provider snippet, which is easy to copy, past, expand and use from everywhere.

Boilerplate

Provider.tsx

import React, { createContext, useState } from 'react'

// rename Context and Provider to something meaningful, they will be imported from other components

interface Props {
    children: JSX.Element | JSX.Element[]
}

interface State {}

interface Methods {}

interface ContextType {
    state: State
    methods: Methods
}

const defaultContextValue = {} as ContextType

export const Context = createContext<ContextType>(defaultContextValue)

const defaultState = {}

const Provider: React.FC<Props> = ({ children }) => {
    const [state, setState] = useState<State>(defaultState)

    // here write some functions that change state, then put them to the mothods object 

    const methods = {}

    const contextValue = { state, methods }

    return <Context.Provider value={contextValue}>{children}</Context.Provider>
}

export default Provider

Usage example

Provider

App.tsx

import Provider1 from './Provider1'
import Provider2 from './Provider2'

const App = () => {
    return (
        <Provider1>
            <Provider2>

            </Provider2>
        </Provider1>
    )
}

Context

When every provider has the same structure, you can use any of them easily/intuitively from anywhere.

Component.ts


import { useContext } from 'react'
import { Context1 } from './Provider1'
import { Context2 } from './Provider2'

const Component = () => {
    const { state: provider1State, methods: provider1Methods } =
        useContext(Context1)
    const { state: provider2State, methods: provider2Methods } =
        useContext(Context2)

    return (
        <div className='someComponent'>
            <div>{provider1State.someField}</div>
            <div>{provider2State.someField}</div>
            <button>provider1Methods.someMethod</button>
            <button>provider2Methods.someMethod</button>
        </div>
    )
}

In a real project you'll have meaningful names for every provider (not Provider1, Provider2 as in the example above) so it'll be easy to read and write code even when many providers meats together in one component. E.g. authState.userName, authMethods.login, appState.contentLoaded.

If you don't like such an approach, look at useReducer hook.

How I discovered an ideal stack for mastering HTML and CSS - Vue without build

Rustam Apay — Sat, 20 Aug 2022 08:06:00 +0000

Disclaimer: this is not a pure tech article, with detailed manual. It is a story about: decision-making problem, thinking logic, and random life events influencing us. Anyway, you'll find all necessary tech info too.

Stack-choosing pain

At the beginning of my professional developer way (summer 2017), I was close to madness of the choice of frameworks. I was working on my first full-stack project with Meteor/Blaze, just because I found a cool tutorial about it on Youtube and moved through it.

Soon I understood that blaze is outdated or just not popular. And every day during a month I was reading comparisons like: "Angular vs React vs Vue".

One of mine experienced dev friends said: "React is an ugly garbage, Vue is elegant". Another one said: "Vue is a toy for hipsters. It isn't used widely. React is cool". Switching focus between react/vue pros and cons was poisoning my mind ¹.

Finally, I told to myself:

Stop!
From now, I will stick to React.
Just because it is most popular.

At that time I didn't use npmtrends.com, but the same picture appeared after reading different articles and Quora discussions.

And I stuck to it tightly until the end of 2021 ².

There are so many things to learn even/especially when you use only 1 frontend framework: bots, backend frameworks, mobile apps, cloud services… I always kept in mind the pain of choosing a frontend framework and in 3 years I never thought to change it. Until once, when I realized, that I didn't use HTML/CSS for that 3 years. So I made a simple HTML/CSS layout of screen keyboard for my 2 y.o. son:

And tried to flavor it with some interactivity -- animation of pressed button and playing audio with its name. Also, I needed a way to display all keys in a loop, what I could do with React in 1 line:

keys.map(keyButton => <Key {...keyButton} />)

My first attempt was with vanilla JS, but direct manipulations on DOM (templates, shadow DOM) looked overwhelmed, annoying, and ugly. It makes me cry looking at code like:

document.querySelector('#parent').appendChild(childElement)

So, I needed something modern, but still simple. And I found the article: Vue JS App Without Build. I tried it and it worked. I fell in love with this approach. I was surprised, that we can use a modern framework in modular/component way without any installation, bundling, build. Of course, for small funny hobby projects.

There is also an interesting story how I took a step away from React/JSX/JSS to HTML/CSS/JS. It was not a quick decision, but a long process…

Switching a social media

At the end of 2020 I disabled my accounts on Facebook and Instagram because I spent a lot of time there. The next year was productive and by the way I learned Open Source deeply. I even translated the whole site (with a lot of content) OpenSource.guide into my country language. There I met lots of quotations from the Twitter, like it was a main network for programmers. But I didn't use it before. So autumn 2021 I started my English Twitter.

A JS guy

To avoid wasting of time, I subscribed only topics related to my work: JavaScript, NodeJS, NextJS, MongoDB, React, Material-UI, Ionic, React-Native, TypeScript, NestJS, TypeORM. Have you noticed in this list the absence of words: HTML, CSS? It is because I was JS-oriented dev as described in: "The Great Divide: Two front-end developers are sitting at a bar. They have nothing to talk about".

For 3 years before I worked only with NodeJS, React, Material-UI, React-Native, RN-Elements, so I never went outside:

JSX -- instead of HTML
JSS -- instead of CSS

HTML/CSS/Vue propaganda on Twitter

Despite my preferences, HTML/CSS persistently appeared in my news feed every day. I have a guess how that happened.

When beautiful ladies start learning "TECH", they begin from HTML/CSS. And guess, who succeed in social media getting most likes and love from His Highness The Algorithm? -- Beautiful ladies. In #techTwitter there are so many lonely guys, giving thousands of likes and retweets for girls.

After a couple of months on Twitter I feel ashamed, that I haven't done anything in plain HTML/CSS for years. So, I dramatically didn't have common topics to talk to tech girls.

Also, I remembered one guy tweet, that Vue is more like a way to organize vanilla JS code amongst HTML/CSS. Regularly I met loving tweets about Vue from its community. And I began thinking of it.

MacBook and Screencast lessons

At the end of 2021 I bought a MacBook and tried it to record coding lessons. I wanted to experience the entire process:

to choose an interesting yet simple project
to record screencast while coding
to voice over
to edit video

to feel in shoes of tech edu celebrities like Brad Traversy or Maximilian Schwarzmüller -- how they make such a great content? But I was thinking towards very beginners, who may find it difficult to get why we use a terminal or bundler.

Bootstrapping

I thought: it will be good to keep things as simple as possible and avoid:

installation
bundling
build

because for a newbie these steps are distracting and frustrating. And honestly, all these things that happen in a magic black window (terminal) with bash commands is not a software design or coding. It is file manipulations and tooling. So, I wanted to separate these concepts -- to take care of newbies.

Also, Vue is a great choice when you want to practice HTML/CSS. There is a saying:

Use Vue if you want JS in your HTML
Use React if you want HTML in your JS

Keyboard Sounder App

So, that's what I've done with a such stack:

I am planning to record a detailed video tutorial on how to code this app from the scratch, because I find the app to be the perfect teaching example for many reasons. In the meantime, I'll write briefly the most important thing about the file structure:

index.html
index.js
App.js
LangSwitcher.js
Keyboard.js
Key.js

index.html

<head>
  <script src="vue.global.3.2.31.js"></script>
</head>
<body>
  <main id="vue-app"></main>
  <script src="index.js" type="module"></script>
</body>

index.js

window.addEventListener('load', () => {
    Vue.createApp(RootVueComponent).mount('#vue-app')
})

App.js, LangSwitcher.js, Keyboard.js, Key.js -- they are all Vue components and have the same structure:

const template = 
  /*html*/
  `<div>
    some content with vue template elements 
    like v-if, v-bind, v-for
   </div>`

export default {
  template, 
  data() {...},
  props: {...},  
  methods: {...}, 
  computed: {...}, 
  components: {...}, 
}

And it is a miracle! -- when you open served index.html, all things works together well, without any additional steps.

Conclusion

I love this vue without build stack -- because it isn't a stack, but a pure HTML/CSS/JS with one imported script in the head of index.html.

Someone can say, that switching between frameworks/tools is easy. Yes it is, when you are already skilled. But when you are a newbie, it is better to stick to one tool you know well, it will release the energy to move forward learning key concepts without being distracting by tools. ↩
There is an interesting story about Richard Feynman's painful choice between Cornell and Caltech Universities in the book "Surely You're Joking, Mr. Feynman" in the chapter "An Offer You Must Refuse". ↩

14. Styling

Rustam Apay — Thu, 18 Aug 2022 06:26:08 +0000

Width of keys

Current keyboard layout looks not realistic. E.g. space button is small like alt or ctrl.

How keyboard looks:

How keyboard should look:

If we look at the second image, or on a real keyboard, carefully, we'll notice that there are the primary keys: letters and numbers, and secondary keys: Tab, Backspace, Ctrl, Alt etc.

All primary keys have the same fixed width. But their number decreases from the top rows to the bottom. And the secondary buttons compensate for this decrease in number by increasing their width.

Rows 2 and 3 contain 13 primary keys and 1 secondary each. Backspace and Tab have the same width, and it is about 1.8 of primary key width. So we can say, that each row width is 14.8 units.

Row 4 contain 11 primary keys and 2 secondary. CapsLk and Enter have the same width:
(14.8 - 11)/2 = 1.9

Counting like this number of primary keys and width compensation of secondary keys in each row, and doing some approximation to achieve more realistic view, we get styling for the keyboard.

styles.css

/* specified keys */

/* 1st row */

.key.Backspace {
    flex: 1.8;
}

/* 2nd row */
.key.Tab {
    flex: 1.8;
}

/* 3d row */
.key.CapsLock {
    flex: 2;
}

.key.Enter {
    flex: 2;
}

/* 4th row  */
.key.ShiftLeft {
    flex: 2.5;
}

.key.ShiftRight {
    flex: 1.5;
}

/* 5th row  */
.key.Space {
    flex: 8;
}

With these styles our keyboard looks realistic.

Vertical alignment

Now the keyboard placed at the top of the screen. It's kinda asymmetric. Let's center it vertically.

Open developer tools: mouse right-click on the chrome page --> Inspect --> tab Elements (near the Console). Look at element nesting.

In order to center <div id="app"> we'll add to an element that wraps it (body) the style display: flex and other styles. We also add semantic tags: header, footer and main -- good attributes of an internet page.

index.html

<body>
    <header>
        <h1>Keyboard Learning App</h1>
        <p>
            Read a tutorial for beginners on
            <a href="">how to code this app from the scratch</a>
        </p>
    </header>
    <main>
        <div id="app"></div>
    </main>
    <footer>
        <div class="socialLinks">
            <a href="https://github.com/apayrus/keyboard">Github</a>
            <a href="https://twitter.com/ApayRus">Twitter</a>
        </div>
    </footer>
    <script src="./index.js" type="module"></script>
</body>

styles.css

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    margin: 0; /* by default body has margin 8px, we don't need it */
    padding-left: 8px;
    padding-right: 8px;
}

header {
    text-align: center;
}

main {
    width: 100%;
}

footer {
    text-align: center;
}

a {
    text-decoration: none; /* removed underline */
}

a:visited {
    color: blue;
}

.socialLinks a {
    display: inline-block;
    margin: 0.5rem;
}

Result

Diffs in code 14

Entire code after the chapter 14

Congratulations

Thank you my dear friend, if you followed this tutorial until now. You spent a lot of time to learn all these things (14 chapters). Honestly, me too -- to write it.

I hope this tutorial will help to newbies around the world. And the project itself will help to people to see how their languages all are fit into a single hardware keyboard with fixed number of keys. It unites us.

13. Refactoring and data filling

Rustam Apay — Thu, 18 Aug 2022 05:44:07 +0000

Functions that work with assets
- getAudioFileName and getKeyLabels
- loadKeyboardData
- playKeyAudio
- Conclusion
Change file structure
getKeyContent
Remove unnecessary code
Data filling
Maintainable, extensible

When you write code initially, it is like a draft. You do it fast and your only goal is to make it working and to see how things fits to each other. After a while you do a revision of your code, and edit it, making it clearer, shorter, more reusable, split it into logical modules.

It is good to move out from components everything without this to some modules (utils). Another hint for you is a length of file: a module with more than 100 lines is an applicant to been split.

If you look at our project file structure, you'll notice, that there are main code and assets -- additional files that we read and use from components, e.g. keyboard data files and audios.

It is good to move functionality related to external files into separate module. Maybe we decide to change our file structure in the future, and it will be easy to rewrite paths to files in one place, instead of seeking for them in all components.

Functions that work with `assets`

`getAudioFileName` and `getKeyLabels`

If you remember, on top of Keyboard.js and Key.js we placed functions, that aren't part of components. Create in the project root directory a new file utils.js and move them there. "Move" means cut (copy and delete ctrl+x) from components, and paste to utils.js).

utils.js

export const getAudioFileName = (keyContent, shiftKey) => {
    ...
}

export const getKeyLabels = keyContent => {
    ...
}

Write export before each function, so we can import them from other files.

On top of Keyboard.js add line:

import { getAudioFileName } from '../utils.js'

On top of Key.js add line:

import { getKeyLabels } from '../utils.js'

Code of 2 components became clearer.

Open the app. It should work as before.

`loadKeyboardData`

Look at Keyboard method getKeyboardData:

Keyboard.js

async getKeyboardData(lang) {
    const { default: keyboardData } = await import(
        `../keyboardData/${lang}.js`
    )
    this.keyboardData[lang] = keyboardData
}

There is an operation with an asset file -- keyboard data. Let's move it to utils.

Add to utils.js a new function:

utils.js

export const loadKeyboardData = async lang => {
    const { default: keyboardData } = await import(`../keyboardData/${lang}.js`)

    return keyboardData
}

In Keyboard.js import it, and use inside getKeyboardData method:

Keyboard.js

import { getAudioFileName, /* add:  */loadKeyboardData } from '../utils.js'
...
methods: {
    ...
    async getKeyboardData(lang) {
                this.keyboardData[lang] = await loadKeyboardData(lang)
            },
    ...
}

Now we get keyboard data in loadKeyboardData, so the name getKeyboardData isn't intuitive as before. Let's rename it to setKeyboardData. In Keyboard.js find/replace old name with the new one (ctrl+h, Replace All). There were only 3 matches.

Open the app, it should work as before.

`playKeyAudio`

In Keyboard.js method playKey look at function playKeyAudio.

Keyboard.js

const playKeyAudio = (lang, code, shiftKey) => {
    const keyContent = this.getKeyContent(lang, code)
    const fileName = getAudioFileName(keyContent, shiftKey)
    const audio = new Audio(`../keyboardData/${lang}/${fileName}.mp3`)
    return audio.play()
}

It also has a link to an external file, so let's move it to utils.js.

In utils.js there is no this, because this is a component itself, so we should rewrite playKeyAudio without this.

utils.js

export const playKeyAudio = (lang, keyContent, shiftKey) => {
    const fileName = getAudioFileName(keyContent, shiftKey)
    const audio = new Audio(`../keyboardData/${lang}/${fileName}.mp3`)
    return audio.play()
}

In top of Keyboard.js import this new function, and remove getAudioFileName import, because we use it now only in utils.

Keyboard.js

import { playKeyAudio, loadKeyboardData } from '../utils.js'
...
methods: {
    ...
    playKey(keyContent) {
        const { code } = keyContent
        const { shiftKey, currentLang } = this

        playKeyAudio(currentLang, keyContent, shiftKey).catch(() => {
            // fallback
            if (this.currentLang !== 'en') {
                const keyContent = this.getKeyContent('en', code)
                playKeyAudio('en', keyContent, shiftKey)
            }
        })
    },
}

Open your app. It should work as before.

Conclusion

By moving all functions working with external files (assets) we achieved:

clarity of components -- they became shorter and clearer
flexibility of the whole project.

E.g. now we can change file structure of the project easily, because every link to assets are placed in one module. We can add new assets into game rapidly, develop advanced methods to work with them etc. It is easy to do, because all logic related to assets are placed in one place.

Diffs in code 13.1

Change file structure

In the folder keyboardData create a folder sounds and move there en, ru, ar folders.

In utils for path in playKeyAudio add /sounds/:

utils.js

const audio = new Audio(`../keyboardData/sounds/${lang}/${fileName}.mp3`)

Open the app. It should work as before.

Despite the fact that we have changed file structure of our project, we are not afraid that we forget to change some path somewhere in components. Because every functions that use files are placed compactly in one module.

Diffs in code 13.2

`getKeyContent`

getKeyContent looks like something working outside components, even thought it doesn't work with assets. It does universal calculation for any keyboardData and key code. Let's move it to utils, and extend its functionality:

utils.js

export const getKeyContent = ({ keyboardData, code = '', value = '' }) => {
    return keyboardData.flat().find(elem => {
        const { main, shifted } = elem
        return elem.code === code || value === main || value === shifted
    })
}

We replaced argument lang with keyboardData to remove this from the function. Now, before every call of getKeyContent, we should rewrite code using lang and this to calculate keyboardData.

We replaced set of arguments (lang, code) with the object { keyboardData, code, ... } -- to not care about their ordering anymore.

We added a new argument value - to find keyContent not only by its code, but also by its value.

And we specified default values for code and value: { code = '', value = '' } to prevent errors when only one of them is specified.

Let's rewrite Keyboard using new version of getKeyContent.

Keyboard.js first lines

import { playKeyAudio, loadKeyboardData, /* add: */ getKeyContent } from '../utils.js'
...

Find (ctrl+f) all getKeyContent matches in Keyboard.js, and replace it with the rewritten imported function, with new arguments:

Keyboard.js mounted

/* replace: 
const keyContent = this.getKeyContent(this.currentLang, code)
with next 2 lines */
const keyboardData = this.keyboardData[this.currentLang]
const keyContent = getKeyContent({ keyboardData, code })

Keyboard.js methods playKey

/* replace: 
const keyContent = this.getKeyContent('en', code)
with next 2 lines */
const keyboardData = this.keyboardData['en']
const keyContent = getKeyContent({ keyboardData, code })

Now we have the universal advanced function to work with keyboardData, that we can improve easily in the future. We will use it chapter 15 to add new feature to the app.

Open the app. It should work as before.

Diffs in code 13.3

Remove unnecessary code

In index.html remove all commented code inside <body> tag. We don't need it anymore.

index.html

<body>
    <div id="app">{{ message }}</div>
    <script src="./index.js" type="module"></script>
</body>

In App.js remove from the template first line App-{{currentLang}}.

In Keyboard.js remove from the template first 2 lines:

<div>activeKey: {{activeKey}}</div>
<div>shiftKey: {{shiftKey}}</div>

Diffs in code 13.4

Data filling

The joyful moment has come to see the entire keyboard.

Download the project repo archive and unzip it. Remove folder keyboardData from your project. Copy folder keyboardData from the downloaded project and put it to your project root folder. In other words -- replace your old incomplete data with the new complete data.

Result

3 language keyboards with 6 rows and 80 keys should work just like before our 3 test rows with 15 keys worked.

Maintainable, extensible

Notice, that adding new data didn't affect on our main code base. We didn't do any extra steps to make the app working. It just works itself, because we separated main code from data.

It's been said, that our app is:

maintainable
extensible

If someone tomorrow will send to us a new keyboard data: Japanese, Hebrew, Georgian, Armenian, Hindi, Thai... We can upgrade our app in 1 minute. In other words: we can maintain and extend the app easily.

Diffs in code 13.5

Entire code after the chapter 13

12. Playing audio 2. Keyboard layout global and local parts

Rustam Apay — Thu, 18 Aug 2022 05:43:51 +0000

Keyboard layout: global and local parts
Fallback keyboardData.en state
Method getKeyContent
Method playKey

Keyboard layout: global and local parts

Any keyboard has local specific keys, and common keys for all languages (they are without titles on the picture below):

Most common keys don’t have specific names in different languages. E.g. Escape, Tab, Caps Lock, Shift, Ctrl, Alt, Enter, Delete -- they all sound in 90% cases in English. Space, Arrows, F1-F12 usually have local names.

For now, to play audio of a key, we must put a sound file into keyboardData/langCode/ folder. It would be good, if we can use sounds from keyboardData/en/ like escape.mp3 for any language. But we will also leave the option to use local sounds for any of keys. Sounds from the folder en/ will be played only if others were not specified.

In programming such approach is called fallback -- when something doesn't work in one way, and me make it works in another way.

Fortunately, audio.play() returns a promise, and we can catch error if file doesn't exist, and play another file.

In our piece of keyboard the "global layout" sounds are escape, left shift, right shift, tab, f1-f6 in the folder keyboardData/en/.

For now, they work only for currentLang: 'en'.

Our goal is to make en/escape.mp3 playing in ru and ar keyboards, if in ru/ and ar/ folders they are not specified.

In Keyboard.js method setActiveKey add after audio.play():

Keyboard.js methods

...
setActiveKey(keyContent) {
    const fileName = getAudioFileName(keyContent, this.shiftKey)
    const audio = new Audio(
        `../keyboardData/${this.currentLang}/${fileName}.mp3`
    )
    /* add catch after play:  */
    audio.play().catch(() => {
        if (this.currentLang !== 'en') {
            const audio = new Audio(`./keyboardData/en/${fileName}.mp3`)
            audio.play()
        }
    })
    ...
}

Now audio files from the folder en/ sounds also for langs ru and ar. Except ShiftRight and ShiftLeft.

That is because of difference of keyContent for languages. Keys escape, tab, f1-f6 -- are identical for en.js, ru.js and ar.js in keyboardData/ folder and getAudioFileName returns the same name for any language, and it can be played.

Keys ShiftLeft, ShiftRight for en have additional field: mainName. Compare:

keyboardData/en.js

{
    code: 'ShiftLeft',
    label: 'Shift',
    mainName: 'left shift'
}

keyboardData/ru.js and ar.js

{
    code: 'ShiftLeft',
    label: 'Shift',
}

Because of this difference in keyboards data, file names for en will be left shift, right shift. File names for ru and ar will be: shiftleft, shiftright (as code).

We could add mainName for each global key for every language keyboard data as in en, end audios will sound. But it is a lot of work if we'll have lots of keyboards. And it is better to improve our code once instead of continuous synchronization and data duplication.

Fallback `keyboardData.en` state

Perhaps you already guessed, that we need keyContent of keyboardData/en.js from any language keyboard to get right file name to play audio fallback.

The problem is that for now we don't have access to different keyboardData at the same time. When we switch languages, keyboardData state are completely replaced by new data.

That is how we get keyContent from keyboardData on keydown event.

Keyboard.js

mounted() {
    this.getKeyboardData(this.currentLang)

    window.addEventListener('keydown', event => {
        event.preventDefault()
        const { code } = event
        const keyContent = this.keyboardData
            .flat()
            .find(elem => elem.code === code)
        this.setActiveKey(keyContent)
    })
...
}

We loaded keyboardData asynchronously from the file /keyboardData/langCode.js before. Then we get keyContent from it by key code.

For currentLang we always have keyboardData -- it is loaded to component state on mounted() or when user clicked on langCode in LanguageSwitcher.

It would be good if keyboardData for en loaded by default at first time, will be always available as a fallback, when we need keyContent of a global layout keyboardData/en.js.

Let's refactor Keyboard state, to store there all loaded keyboardData for all langs. Find all this.keyboardData in code, and add to it [lang]. In template this. isn't written, so we find there keyboardData and add to it currentLang.

Keyboard.js methods

async getKeyboardData(lang) {
    const { default: keyboardData } = await import(
        `../keyboardData/${lang}.js`
    )
    /* add [lang]: */>
    this.keyboardData[lang] = keyboardData
}

Keyboard.js mounted

/* add [this.currentLang] */
const keyContent = this.keyboardData[this.currentLang]
    .flat()
    .find(elem => elem.code === code)

Keyboard.js template

<!-- add [currentLang] -->
<div
    v-for="(row, index) in keyboardData[currentLang]"
    :class="['row', 'row-'+(index+1)]"
></div>

Open the app. It should work as before.

Method `getKeyContent`

Now we have immediate access to keyboards, that we opened before, without need to load them every time.

Let's make our code more universal by creating a new method:

Keyboard.js methods:

getKeyContent(lang, code) {
    return this.keyboardData[lang].flat().find(elem => elem.code === code)
}

Rewrite old code using this method.

Keyboard.js mounted:

mounted() {
        this.getKeyboardData(this.currentLang)

        window.addEventListener('keydown', event => {
            event.preventDefault()
            const { code, shiftKey } = event
            /* replace :

            const keyContent = this.keyboardData[this.currentLang]
                .flat()
                .find(elem => elem.code === code)

            with : */
            const keyContent = this.getKeyContent(this.currentLang, code)

            this.setActiveKey(keyContent)
        })
        ...
        }

Use new method to play audio fallback:

Keyboard.js methods

setActiveKey(keyContent) {
            const { code } = keyContent
            const { shiftKey, currentLang } = this

            // we created a new function
            // because we call all this code twice in this method
            const playKeyAudio = (lang, code, shiftKey) => {
                const keyContent = this.getKeyContent(lang, code)
                const fileName = getAudioFileName(keyContent, shiftKey)
                const audio = new Audio(`../keyboardData/${lang}/${fileName}.mp3`)
                return audio.play()// promise, we can catch error if file doesn't exist
            }

            playKeyAudio(currentLang, code, shiftKey).catch(() => { // fallback
                if (this.currentLang !== 'en') {
                    playKeyAudio('en', code, shiftKey)
                }
            })

            this.activeKey = keyContent
            clearTimeout(this.timeout)
            this.timeout = setTimeout(() => (this.activeKey = { code: '' }), 1000)
        },

Check how app works. Shift should sound with any language layout.

Diffs in code 12.1

Method `playKey`

There is something wrong in our code. Playing audio happens inside setActiveKey. But what if we want to play audio without activating key, or activate key without playing audio?

Let's create a new method playKey and remove playing logic from setActiveKey.

Keyboard.js methods

setActiveKey(keyContent) {
        this.activeKey = keyContent
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => (this.activeKey = { code: '' }), 1000)
    },
playKey(keyContent) {
    const { code } = keyContent
    const { shiftKey, currentLang } = this

    const playKeyAudio = (lang, code, shiftKey) => {
        const keyContent = this.getKeyContent(lang, code)
        const fileName = getAudioFileName(keyContent, shiftKey)
        const audio = new Audio(`../keyboardData/${lang}/${fileName}.mp3`)
        return audio.play()
    }

    playKeyAudio(currentLang, code, shiftKey).catch(() => {
        // fallback
        if (this.currentLang !== 'en') {
            playKeyAudio('en', code, shiftKey)
        }
    })
},

Find in code every setActiveKey call, and place after it playKey, to keep previous functionality.

Keyboard.js mounted

window.addEventListener('keydown', event => {
    event.preventDefault()
    const { code } = event
    const keyContent = this.getKeyContent(this.currentLang, code)
    this.setActiveKey(keyContent)
    /* add: */
    this.playKey(keyContent)
})

Also pass it to Key component and use it there.

Keyboard.js template

<vue-key ... :playKey="playKey" />

Key.js props

props: {
    ...
    playKey: Function,
    },

Key.js methods

keyClick(keyContent) {
            this.setActiveKey(keyContent)
            // add:
            this.playKey(keyContent)

            if (keyContent.code.includes('Shift')) {
                this.toggleShiftKey()
            }
        }

Check the app. It should work as before. But now code is more flexible, we can use it in more ways.

Diffs in code 12.2

Entire code after the chapter 12

11. Playing audio

Rustam Apay — Thu, 18 Aug 2022 05:43:31 +0000

Prepare audio files
HTML5 audio element
Data model extension
getAudioFileName
Testing
Dynamic audio playing

Prepare audio files

We will use a short mp3 files for each key value. In the folder keyboardData create folders: en, ru, ar. Move audio files with numbers (for 3 langs) to the folders.

GITHUB

Note:

If you need to make many files from one, I highly recommend free audio editor Audacity. There you can select parts of an audio and attach text labels to them (ctrl+b). Then in menu: File --> Export --> Export Multiple --> Split based on: Label.

For example, you have 1 audio file with numbers from 0 to 9.

You will get files: 0.mp3, 1.mp3, ... 9.mp3.

HTML5 audio element

In App.js methods, at the beginning of setActiveKey add 2 lines:

App.js methods

setActiveKey(keyContent) {
  const audio = new Audio(`./keyboardData/en/1.mp3`);
  audio.play();
  ...
}

That's how audio element works.

Now when you click on any button, will be played one file en/1.mp3. You guess that we need to play different files. But there is a problem to identify them in our data model. If you remember, each key is represented by object:

const key = {
    code,
    label,
    main,
    shifted
}

Data model extension

Key data aren't filled in the same way. Keys have such different set of props:
file naming

Only code

{
    code: 'F1'
}

File name F1.mp3 is good for such keys.

main and shifted

{
    code: 'Digit1',
    main: '1',
    shifted: '!',
    // should add:
    shiftedName: 'exclamation mark'
},

Here we cannot use code as before. Because there is only 1 code, but we need 2 audio files for main and shifted values.

Furthermore, ! is forbidden symbol for file names. So it would be good to have an additional field shiftedName: 'exclamation mark', that we'll use in a file name.

Value of main is good for filename 1.mp3, but sometimes we will need an additional field mainName.

1.mp3 or exclamation mark.mp3 would be good filenames for keyContent above.

lower and upper case letters

{
    code: 'KeyQ',
    main: 'q',
    shifted: 'Q',
    // add:
    shiftedName: 'q'
},

Here it is enough to have only 1 file q.mp3 for both values q and Q.

How do we fill our data now? We add to every main and shifted values that we can't or don't want to use as a file name, additional values: mainName and/or shiftedName.

The idea behind this different approach to each key type, instead of writing filename for every key value, is that we are trying to avoid overloading of our keyboardData/lang.js files. So we will add a minimum info do keyboard data file, and then calculate filenames from that minimum.

getAudioFileName

const getAudioFileName = (keyContent, shiftKey) => {
    const { main, mainName, shifted, shiftedName, code } = keyContent

    let fileName

    if (shiftKey) {
        // will be returned 1 of 3 values (if it exist). priority to the first one
        fileName = shiftedName || shifted || code
    } else {
        fileName = mainName || main || code
    }

    // to have a guarantee, that everything is written in the same (lower) case
    return fileName.toLowerCase()
}

Notice, that we call any audio file by its lower case name. So we don't need to change keyboard data for values like q-Q. When you name files make sure they are in lowercase.

Testing

When you wrote a function, and you're not sure if it works or not, you should test it.

The simplest way: copy/paste the function to console (Chrome --> DevTools --> Console). (code above without word const)

Also copy to the console keyContent examples that we wrote before. Put them to the array input:

const input = [
    { code: 'F1' },
    {
        code: 'Digit1',
        main: '1',
        shifted: '!',
        shiftedName: 'exclamation mark'
    },
    {
        code: 'KeyH',
        main: 'h',
        shifted: 'H'
    }
]

Then call getAudioFileName with these data entities and different shiftKey values, in the console.

getAudioFileName(input[0], false) // f1
getAudioFileName(input[0], true) // f1
getAudioFileName(input[1], false) // 1
getAudioFileName(input[1], true) // exclamation mark
getAudioFileName(input[2], false) // h
getAudioFileName(input[2], true) // h

That is called testing. Programmers save such a code with:

input,
call(input),
correct output

to special files -- called tests. Then, after codebase has changed, we run the tests to check that we haven't broken anything.

Dynamic audio playing

Add that function definition at the top of Keyboard.js, just after imports:

Keyboard.js

import Keyboard from './components/Keyboard.js'
import LangSwitcher from './components/LangSwitcher.js'

const getAudioFileName = (keyContent, shiftKey) => {
    ...
}

And call it where we played static audio before.

Keyboard.js methods

setActiveKey(keyContent) {
    const fileName = getAudioFileName(keyContent, this.shiftKey)
    const audio = new Audio(
        `./keyboardData/${this.currentLang}/${fileName}.mp3`
    )
    audio.play()
    ...
}

Now when you click on different buttons, you hear a particular key sound, even when you switch languages. Don't forget, that for now we have files only for numbers 0, 1, ..., 9 -- they are correct for en and ru. But for playing Arabic numbers you should add their mainNames to keyboardData/ar.js.

keyboardData/ar.js

{
    code: 'Digit1',
    main: '١',
    // add:
    mainName: '1',
    shifted: '!'
},
...

Or you should rename files to ١.mp3, ٢.mp3 e.t.c.

As you can see, our approach of file naming and data filling is flexible.

Diffs in code 11

Entire code after the chapter 11

10. CSS animation

Rustam Apay — Thu, 18 Aug 2022 05:43:13 +0000

Color
Conditional rendering v-if
Additional keyframe (0% 30% 100%)
Animated resize (transform)
The value of the pressed key

Color

We are making the app for children first. Let's make the active key appearance more attractive, to get better educational effect.

In styles.css create pulse animation. And replace background-color with it in .key.active.

styles.css

.key.active {
    /* background-color: red; */
    animation: pulse 1s;
    position: relative;
}

@keyframes pulse {
    0% {
        background-color: black;
    }
    100% {
        background-color: red;
    }
}

Result

Now background-color changes smoothly. @keyframes set how to change style property over time. In our case: from black to red in 1 second.

You can try to add to @keyframes also size change (width, height).

@keyframes pulse {
    0% {
        background-color: black;
        width: 100%;
        height: 100%;
    }
    100% {
        width: 150%;
        height: 150%;
        background-color: red;
    }
}

And you will see, that it doesn't work. That's because Keys are displayed inside flex container.

Conditional rendering `v-if`

To achieve more freedom with active key resize animation, we need a new independent element over the old active key. We will display it only when key is active.

To show one element over another, the first one should have a style position: relative and the second position: absolute.

styles.css

.key {
  ... position: relative;
}

.key.active {
  animation: pulse 1s;
  position: absolute;
  z-index: 2;
}

z-index:2 means that element will be displayed over elements with z-index:1 (default).

Add a conditional rendered element (active key) to Key template.

Key.js template

<div
    :class="[
                'key', 
                keyContent.code, 
                { shiftKeyPressed: isShift && shiftKey && !isActive }
            ]"
    @click="keyClick(keyContent)"
>
    <!-- add: -->
    <div v-if="isActive" :class="['key', 'active', keyContent.code]">
        <div>{{main}}</div>
        <div>{{shifted}}</div>
    </div>
    <div class="main">{{main}}</div>
    <div class="shifted">{{shifted}}</div>
</div>

Result

Additional keyframe (0% 30% 100%)

Now animated resize works. But it is too slow. Let's make resizing 3 times faster, and color pulse leave as it is. We need an additional keyframe for that.

styles.css

@keyframes pulse {
    0% {
        background-color: black;
        width: 100%;
        height: 100%;
    }
    /* add: */
    30% {
        width: 150%;
        height: 150%;
    }
    100% {
        background-color: red;
        width: 150%;
        height: 150%;
    }
}

Result

Now resize happens in 30% of 1 sec, and color pulsation in 100% of 1 sec.

Animated resize (transform)

Instead of width/height changing, lets we use another CSS prop transform.

styles.css

.key.active {
    animation: pulse 1s;
    /* position (4 lines) : */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    /* to compensate .key style: */
    padding: -0.5rem;
    margin: -0.2rem;

    /* to center content vertically and horizontally: */
    display: flex;
    align-items: center;
    justify-content: center;

    transform-origin: center;
}

@keyframes pulse {
    0% {
        background-color: black;
        transform: scale(100%);
    }
    30% {
        transform: scale(130%);
    }
    80% {
        transform: scale(130%);
    }
    100% {
        background-color: red;
        transform: scale(100%);
    }
}

Result

Now it looks better, isn't it?

The value of the pressed key

When key contains 2 values: main and shifted we don't want to activate both of them. Because we will sound each of them separately.

Let's create a new computed value, that returns only 1 value for active key:

Key.js computed

value() {
    const { main, shifted, code } = this.keyContent
    return (this.shiftKey ? shifted : main) || code
}

If shiftKey is true value is shifted, otherwise value is main. If value doesn't exist we return code.

Replace with this value main in shifted in the template:

Key.js template

<div v-if="isActive" :class="['key', 'active', keyContent.code]">
    <div>{{value}}</div>
</div>

Result

Now we see only 1 value in the active box, which is correct. This is especially important since we want to sound all keyboard symbols.

Diffs in code 10

Entire code after the chapter

9. Interactivity 3. Set `activeKey` by click. `shiftKey` app state

Rustam Apay — Thu, 18 Aug 2022 05:42:56 +0000

Set activeKey by click
- Method
- Event
- The key full info
Move shiftKey to state
- Holding shift style

Set activeKey by click

Some people don't have a physical keyboard, but only a screen one. And they also want to learn letters with our cool app.

To add @click event to Key we need first to encapsulate key activation into a method.

Method

Add a new method to Keyboard.js.

Keyboard.js methods:

setActiveKey(keyContent) {
    this.activeKey = keyContent
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => (this.activeKey = { code: '' }), 1000)
}

And call this new method from mounted()

Keyboard.js

mounted() {
    this.getKeyboardData(this.currentLang)

    window.addEventListener('keydown', event => {
        event.preventDefault()
        const { code, key, shiftKey } = event
        this.setActiveKey({ code, key, shiftKey })
    })
},

Event

Send a new method setActiveKey from the Keyboard to the Key:

Keyboard.js template:

<vue-keyboard ... :setActiveKey="setActiveKey" />

In Key.js receive this method (add it to props), and add its call to the template.

Key.js props:

props: {
    ...,
    setActiveKey: Function
}

Key.js template

<div
    :class="['key', {active: activeKey.code === keyContent.code}]"
    @click="setActiveKey(keyContent)"
>
    <div class="main">{{main}}</div>
    <div class="shifted">{{shifted}}</div>
</div>

Now we see, that key became active also by mouse click (or tap from phone).

Diffs in code 9.1

The key full info

On the previous gif animation you can notice, that activeKey is different for keydown and @click. E.g. for q:

activeKey on keydown: { code: KeyQ, shiftKey: false }

activeKey on @click: { code: KeyQ, main: "q", shifted:"Q" }

That's because on keydown we assign to the activeKey an object {code, shiftKey} that we get from keyboard event.

And on @click we set activeKey from our data keyboardData/en.js -- which we filled with useful data before.

It is easy to get this data by @click in Key component -- because it is a prop keyContent. But keydown event doesn't contain these data.

We should add some code to extract keyContent from keyboardData by keydown event code.

Keyboard.js mounted

...
window.addEventListener('keydown', event => {
    event.preventDefault()
    const { code, shiftKey } = event
    const keyContent = this.keyboardData
        .flat()
        .find(elem => elem.code === code)
    this.setActiveKey(keyContent)
})
...

keyboardData is 2D array (array with arrays). So we did it flat -- 1D, and find full key info by code. Then pass it to the method setActiveKey.

You can test it out: keydown and @click now returns almost the same value.

Move `shiftKey` to state

For now, we get shiftKey only with keydown, can't get shiftKey on @click. To make keydown and @click events equivalent, let's create a new keyboard state: shiftKey. So we'll have the ability to manipulate shiftKey not only from keyboard keydown, but also from mouse/tap screen events.

Add to the end of each keyboardData/lang.js a new row with 2 buttons:

en.js, ru.js, ar.js

    ...,
 [
    {
        code: 'ShiftLeft',
        label: 'Shift'
    },
    {
        code: 'ShiftRight',
        label: 'Shift'
    }
]

Result

Add a new state to

Keyboard.js data()

{
    ...
    shiftKey: false
}

Add 2 keyboard event listeners, that change the new app state

Keyboard.js mounted()

...
window.addEventListener('keydown', event => {
    if (event.key === 'Shift') {
        this.shiftKey = true
    }
})

window.addEventListener('keyup', event => {
    if (event.key === 'Shift') {
        this.shiftKey = false
    }
})

Add shiftKey state to template, to test how it works

Keyboard.js template

...
<div>shiftKey: {{shiftKey}}</div>
...

Result

When we hold shift on keyboard, state shiftKey is true even when activeKey faded. When we @click shift by mouse, shiftKey is false, even when shift is the activeKey.

We can't hold shift on the screen as on physical keyboard. So we need to set shiftKey by click on the screen button, and the app will think that we hold shift key. On the second click on shift the app will think, that we released the button.

For that, in Keyboard.js add a new method toggleShiftKey and pass it down to Key

Keyboard.js methods:

toggleShiftKey(){
    this.shiftKey = !this.shiftKey
}

Keyboard.js template

<vue-key ... :toggleShiftKey="toggleShiftKey" />

Key.js props

{
    ...
    toggleShiftKey: Function
}

Now @click should call multiple methods, not only one @click="setActiveKey(keyContent)" as before. So we need to create an additional method calling all these methods. And call it from the template @click.

Key.js methods

methods: {
    keyClick(keyContent) {
        this.setActiveKey(keyContent)
        if (keyContent.code.includes('Shift')) {
            this.toggleShiftKey()
        }
    }
}

In Key.js template replace @click="setActiveKey(keyContent)" with @click="keyClick(keyContent)"

Key.js template

<div
    :class="['key', {active: activeKey.code === keyContent.code}]"
    @click="keyClick(keyContent)"
>
    <div class="main">{{main}}</div>
    <div class="shifted">{{shifted}}</div>
</div>

Result

shiftKey state works fine with keydown and @click. But we don't see that shift is holding on the keyboard.

Holding `shift` style

Add to styles.css an especial style for pressed (not released) shift buttons.

styles.css

.key.shiftKeyPressed {
    color: red;
    font-weight: bold;
}

To do that we need in the Key component the prop shiftKey. Pass it from Keyboard to Key

Keyboard.js template

<vue-key ... :shiftKey="shiftKey" />

Key.js props

props: {
    ...
    shiftKey: Boolean,
},

Add to computed 2 methods:

Key.js computed

isActive() {
    return this.activeKey.code === this.keyContent.code
},
isShift() {
    return this.keyContent.code.includes('Shift')
}

Then use these new computed values in a template:

Key.js template

<div
    :class="[
                'key', 
                keyContent.code, 
                { active: isActive }, 
                { shiftKeyPressed: isShift && shiftKey && !isActive }
            ]"
    @click="keyClick(keyContent)"
></div>

Style shiftKeyPressed will be applied to key only if:

it is a shift key (with code: ShiftLeft or ShiftRight),
keyboard state shiftKey is true -- the key is holding,
key is not active (we can't see red text on red background)

Result

Diffs in code 9.2

Entire code after the chapter

8. Interactivity 2. `Keydown` event handling. Active key state

Rustam Apay — Thu, 18 Aug 2022 05:42:35 +0000

Keydown event handling
- activeKey state
- Operational System (OS) language
- Active key styling
- Fade active key after a while

`Keydown` event handling

In the file Keyboard.js add to mounted() an event listener on keydown:

    mounted() {
        this.getKeyboardData(this.currentLang)

        /* add: */
        window.addEventListener('keydown', event => {
            e.preventDefault()
            console.log(event)
        })
    },

Save the file.

Open Chrome dev tools tab console. Click with mouse on the app to make the window active to catch events from it. Press random keys on the (physical) keyboard. Events will appear in a console.

Experiment with different keys and see results. Expand KeyboardEvent and look at its properties. We need only 3 of them: code, key, and shiftKey.

Close console (Dev tools).

Diffs in code 8.1

`activeKey` state

In Keyboard.js data() add a new state activeKey. It will be filled with { code, key, shiftKey } from the event. Add activeKey to template to see how it will be changed.

Keyboard.js

import Key from './Key.js'

const Keyboard = {
    template: `
    <div>activeKey: {{activeKey}}</div>
    <div class="keyboard">
        <div
            v-for="(row, index) in keyboardData"
            :class="['row', 'row-'+(index+1)]"
        >
            <vue-key
                v-for="keyContent in row"
                :keyContent="keyContent"
            />
        </div>
    </div>`,
    components: {
        'vue-key': Key
    },
    data() {
        return {
            keyboardData: [],
            /* add: */
            activeKey: { code: '' }
        }
    },
    props: {
        currentLang: String
    },
    watch: {
        currentLang: function (currentLang) {
            this.getKeyboardData(currentLang)
        }
    },
    mounted() {
        this.getKeyboardData(this.currentLang)

        window.addEventListener('keydown', event => {
            event.preventDefault()
            /* add: (read particular props of event) */
            const { code, key, shiftKey } = event
            /* write event parts to the state: */
            this.activeKey = { code, key, shiftKey }
        })
    },

    methods: {
        async getKeyboardData(lang) {
            const { default: keyboardData } = await import(
                `../keyboardData/${lang}.js`
            )
            this.keyboardData = keyboardData
        }
    }
}

export default Keyboard

Press q, w in all lang layouts (en, ru, ar).

Result:

Operational System (OS) language

You see, that the same events happen with any currentLang. That's because our web app state is not connected with OS language (for keyboard). And there is no technical ability to do this.

If a user switches a language in OS (alt+shift, ctrl+shift), an event property key will be different, but our app wont know what language is set in OS.

Anyway code is always the same. That's why we made it the required identifier in the data model.

Active key styling

In Keyboard.js pass state activeKey as a prop to Key. And warn the Key about the new prop.

Keyboard.js template:

<vue-key ... :activeKey="activeKey" />

Key.js props:

props: {
    ...
    activeKey: Object,
}

Now we can use activeKey inside the Key component to apply conditional styling to one of the keys (the active one).

Key.js template:

replace

<div class="key">
    <div class="main">{{main}}</div>
    <div class="shifted">{{shifted}}</div>
</div>

with:

<div
    :class="[
            'key', 
            {active: activeKey.code === keyContent.code}
            ]"
>
    <div class="main">{{main}}</div>
    <div class="shifted">{{shifted}}</div>
</div>

Now :class is dynamic (calculated, variable).

Style key will be applied to a button (key) in any case.

Style active will be applied only if key code is the same as the code of the activeKey. If you remember, we added .key.active style to styles.css in chapter 2.

Result:

It works with any language, and doesn't depend on a system language for the keyboard.

Fade active key after a while

There is a problem. If we press a button, and then don't press anything, activeKey stays forever. But we want it to fade after a while.

In Keyboard.js in addEventListener:

after

this.activeKey = { code, key, shiftKey }

add

setTimeout(() => (this.activeKey = { code: '' }), 1000)

That means, that after 1000 milliseconds (1 sec), activeState will be cleared.

Result:

Looking good, the active key automatically disappears after 1 sec.

But there is another problem. When we type fast several keys in 1 sec, only one timer works, that started after pressing the first button. If we type 1, 2, 3, 4, 5 in 900 milliseconds, 5 will disappear after 100 milliseconds, which is incorrect.

We respect 5 (as any other key) and will give to it the whole 1 second. To do that we need to store a particular timeout when key pressed, and if another key is pressed before timeout ended, we'll clear old timeout and create a new one. That will guarantee 1 sec for any key.

App.js

replace

setTimeout(() => (this.activeKey = { code: '' }), 1000)

with

/* if there was old timeout, we clear it*/
clearTimeout(this.timeout)
/* store a new timeout for the last pressed key */
this.timeout = setTimeout(() => (this.activeKey = { code: '' }), 1000)

Now 5 also has 1 sec to show itself to the world:

Diffs in code 8.2

Entire code after the chapter

7. Interactivity 1. Switching keyboards

Rustam Apay — Thu, 18 Aug 2022 05:42:15 +0000

Reactive state, @click event, method call (refactor LangSwitcher)
Conditional styling
Change parent state from a child
Switching keyboards (languages)
- Another languages data
- Dynamic import for keyboardData

Interactivity is when a user interacts with an app, and see results (almost immediately).

Our app should handle user generated events: mouse clicks, phone screen taps, keyboard key presses.

Reactive state, @click event, method call (refactor `LangSwitcher`)

When we change a component variable value (state), and it causes change in a visible app (view), it is called reactive state. Reactivity means connection between component variables and a view.

In vue such reactive variables should be placed in the method data().
The most common approach to change them — by methods.
Methods are called from event listeners, described in methods, and placed in a template (e.g. @click="keyClick(keyContent)").

Let’s add to LangSwitcher:

a method data() with a returned property (state) currentLang: 'en' (‘en’ as default)
a property methods with a new method switchLang(lang)
in the template
- a new event handler @click to element <div class="lang">
- a new div to display reactive variable currentLang. It is temporary, after testing we’ll delete it.

The idea is to move the red circle to the lang code that we clicked. Also, we need to store selected lang in some variable.

LangSwitcher.js

const LangSwitcher = {
    template: `
    <div class="langSwitcher">
        <div 
            v-for="lang in langs" 
            class="lang"
            @click="switchLang(lang)"
        >
            {{lang}}
        </div>
    </div>
    <div style="text-align: center;">
        {{currentLang}}
    </div>`,
    props: {
        langs: Array
    },
    /* add: */
    data() {
        return {
            currentLang: 'en'
        }
    },
    /* add: */
    methods: {
        switchLang(lang) {
            this.currentLang = lang
        }
    }
}

export default LangSwitcher

In the template @click="switchLang(lang)" -- by clicking on the element where it placed (<div class=”lang”>) the method switchLang will be called with a parameter lang wich is particular to each <div> and can be ‘en’, ‘ru’, ‘ar’.

That’s how a user input (click) on dynamic generated elements changes a reactive state.

Result:

You see that after a click on a lang code, component state currentLang is changed in the div below.

Conditional styling

Instead of the currentLang text, we need a red round background under the active lang.

Conditional styling is when we apply some styling to an element, only if a condition is true.

:class='["lang", {active: currentLang === lang}]' this string in a template will do all work for us.

LangSwitcher.js template

<div
    v-for="lang in langs"
    :class='["lang", {active: currentLang === lang}]'
    @click="switchLang(lang)"
>
    {{lang}}
</div>

1-st element in the array is a string (because of quotes), that means that the class lang will be attached to <div> in any case (without condition).

2-nd element is an object like {styleName: booleanCondition}. Class active will be attached to <div class="lang"> only if the prop lang of the element is equal to the state currentLang.

In styles.css we defined before:

.lang {
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
    ...;
}

.langSwitcher .active {
    background-color: red;
    color: white;
}

That’s why the red round follows our clicks on lang codes — because of attaching and detaching the class active.

Result:

Diffs in code 7.1

Change parent state from a child

Changing parent state from a child is kinda opposite to passing props from parent to child (what we made a lot before). It is another important approach to share data between components

In a parent we create a reactive state and a method to change it
we pass this method to child as a prop
we call it (with params) from the child

When you call a method received from a prop, notice that actually it happens where it was defined, not where it was called from.

If the parent state was passed as a prop to multiple components, if we change this state (from any child, by method received as a prop) — then all components with this state (as prop) will be updated. That is how a little child component from hierarchy bottom can globally affect on the whole app — by calling a method, that changes parent state.

In small apps like our, it is common to have reactive state and main logic in the top level component as <App> and pass the state and methods to children (<Keyboard>, <LangSwitcher>) as props.

For now currentLang is placed in <LangSwitcher>. But we need this value also in <Keyboard> and <Key>.

<LangSwitcher> and <Keyboard> are siblings, they haven’t parent-child relations, but have common parent. So, to share the state currentLang between siblings, we should lift it up to the common ancestor <App>.

(image from chapter 4)

Let’s move state currentLang and method switchLang from <LangSwitcher> to <App> and then pass them as props to <LangSwitcher> and use them there.

Open LangSwitcher.js and remove data() and methods. Add to props: currentLang, switchLang.

LangSwitcher.js

const LangSwitcher = {
    template: `
    <div class="langSwitcher">
        <div 
            v-for="lang in langs" 
            :class='["lang", {active: currentLang === lang}]'
            @click="switchLang(lang)"
        >
            {{lang}}
        </div>
    </div>`,
    props: {
        langs: Array,
        /* add: */
        currentLang: String,
        switchLang: Function
    }
    /* delete: 
    data() {
        return {
            currentLang: 'en'
        }
    },
    methods: {
        switchLang(lang) {
            this.currentLang = lang
        }
    } 
    */
}

export default LangSwitcher

Open App.js. Add to data() a new state currentLang: 'en'. Paste whole methods from old LangSwitcher.js.

In the template

pass to <vue-lang-switcher> 2 new props: switchLang and currentLang
add {{currentLang}} to test our changes.

App.js

import Keyboard from './components/Keyboard.js'
import LangSwitcher from './components/LangSwitcher.js'

const App = {
    template: `App-{{currentLang}}
    <vue-lang-switcher 
        :langs="langs" 
        :switchLang="switchLang" 
        :currentLang="currentLang" 
    />
    <vue-keyboard />
    `,
    components: {
        'vue-lang-switcher': LangSwitcher,
        'vue-keyboard': Keyboard
    },
    mounted() {
        import(`./keyboardData/en.js`).then(result => {
            const { default: keyboardData } = result
            this.keyboardData = keyboardData
        })
    },
    data() {
        return {
            langs: ['en', 'ru', 'ar'],
            /* add: */
            currentLang: 'en'
        }
    },
    /* add: */
    methods: {
        switchLang(lang) {
            this.currentLang = lang
        }
    }
}

export default App

Result:

Notice, when we do something in LangSwitcher it changes App state. We change the parent state from the child with the method that we passed from the parent to the child as a prop. Before these changes currentLang was available only in <LangSwitcher>, and <App> hasn't access to it. Now <App> and <LangSwitcher> have access to currentLang. And we can pass it also to <Keyboard> and <Key>.

Diffs in code 7.2

Switching keyboards (languages)

Another languages data

Open a folder keyboardData. Copy and paste there a file en.js twice. Rename clones to ru.js and ar.js. Change a content (copy from here or type).

ru.js

const keyboard = [
    [
        { code: 'Escape', label: 'Esc' },
        { code: 'F1' },
        { code: 'F2' },
        { code: 'F3' },
        { code: 'F4' },
        { code: 'F5' },
        { code: 'F6' }
    ],
    [
        {
            code: 'Backquote',
            main: 'ё',
            shifted: 'Ё'
        },
        {
            code: 'Digit1',
            main: '1',
            shifted: '!'
        },
        {
            code: 'Digit2',
            main: '2',
            shifted: '"'
        },
        {
            code: 'Digit3',
            main: '3',
            shifted: '№'
        },
        {
            code: 'Digit4',
            main: '4',
            shifted: ';'
        },
        {
            code: 'Digit5',
            main: '5',
            shifted: '%'
        }
    ],
    [
        { code: 'Tab' },
        {
            code: 'KeyQ',
            main: 'й',
            shifted: 'Й'
        },
        {
            code: 'KeyW',
            main: 'ц',
            shifted: 'Ц'
        },
        {
            code: 'KeyE',
            main: 'у',
            shifted: 'У'
        },
        {
            code: 'KeyR',
            main: 'к',
            shifted: 'К'
        }
    ]
]

export default keyboard

ar.js

const keyboard = [
    [
        { code: 'Escape', label: 'Esc' },
        { code: 'F1' },
        { code: 'F2' },
        { code: 'F3' },
        { code: 'F4' },
        { code: 'F5' },
        { code: 'F6' }
    ],
    [
        {
            code: 'Backquote',
            main: '٫',
            shifted: '٬'
        },
        {
            code: 'Digit1',
            main: '١',
            shifted: '!'
        },
        {
            code: 'Digit2',
            main: '٢',
            shifted: '@'
        },
        {
            code: 'Digit3',
            main: '٣',
            shifted: '#'
        },
        {
            code: 'Digit4',
            main: '٤',
            shifted: '$'
        },
        {
            code: 'Digit5',
            main: '٥',
            shifted: '٪'
        }
    ],
    [
        { code: 'Tab' },
        {
            code: 'KeyQ',
            main: 'ض',
            shifted: 'َ'
        },
        {
            code: 'KeyW',
            main: 'ص',
            shifted: 'ً'
        },
        {
            code: 'KeyE',
            main: 'ث',
            shifted: 'ُ'
        },
        {
            code: 'KeyR',
            main: 'ق',
            shifted: 'ٌ'
        }
    ]
]

export default keyboard

Arabic diacritic symbols aren't looking good in the code. But don't worry about it. It will work well for our purposes.

Dynamic import for `keyboardData`

In App.js pass currentLang to Keyboard.

App.js template

<vue-keyboard :currentLang="currentLang" />

In Keyboard.js:

receive the new prop
watch its changes
add a new method getKeyboardData
call getKeyboardData on mounted() and on change prop currentLang

Keyboard.js

import Key from './Key.js'

const Keyboard = {
    template: `
    <div class="keyboard">
        <div
            v-for="(row, index) in keyboardData"
            :class="['row', 'row-'+(index+1)]"
        >
            <vue-key
                v-for="keyContent in row"
                :keyContent="keyContent"
            />
        </div>
    </div>
`,
    components: {
        'vue-key': Key
    },
    data() {
        return { keyboardData: [] }
    },
    /* receive a new prop  */
    props: {
        currentLang: String
    },
    watch: {
        /* add function, that will be called when prop changes */
        currentLang: function (currentLang) {
            this.getKeyboardData(currentLang)
        }
    },
    /* happens when app opened for the first time */
    mounted() {
        this.getKeyboardData(this.currentLang)
    },
    methods: {
        async getKeyboardData(lang) {
            const { default: keyboardData } = await import(
                `../keyboardData/${lang}.js`
            )
            this.keyboardData = keyboardData
        }
    }
}

export default Keyboard

If you noticed async/await in the method getKeyboardData -- that is an alternative syntax for promises. This code is asynchronous, because reading a file takes time, and we should wait for result to move further through our scenario.

Result:

We shared currentLang state between siblings LangSwitcher and Keyboard through their common ancestor App.

With a few lines of code we achieved a big improvement of functionality. That is because we organized code well: in a modular way, with intuitive props, methods, and structure.

Diffs in code 7.3

Entire code after the chapter

Forem: Rustam Apay

Guitar Playing Analysis App (vibe coded in 1 day)

React Component to npm Package: Minimal Setup with Rollup, Vite, and GitHub Pages

React Typescript Provider Boilerplate Snippet

Boilerplate

Usage example

Provider

Context

How I discovered an ideal stack for mastering HTML and CSS - Vue without build

TOC

Stack-choosing pain

Switching a social media

A JS guy

HTML/CSS/Vue propaganda on Twitter

MacBook and Screencast lessons

Bootstrapping

Keyboard Sounder App

Conclusion

14. Styling

Width of keys

Vertical alignment

Congratulations

13. Refactoring and data filling

Functions that work with assets

getAudioFileName and getKeyLabels

loadKeyboardData

playKeyAudio

Conclusion

Change file structure

getKeyContent

Remove unnecessary code

Data filling

Maintainable, extensible

12. Playing audio 2. Keyboard layout global and local parts

Keyboard layout: global and local parts

Fallback keyboardData.en state

Method getKeyContent

Method playKey

11. Playing audio

Prepare audio files

HTML5 audio element

Data model extension

getAudioFileName

Testing

Dynamic audio playing

10. CSS animation

Color

Conditional rendering v-if

Additional keyframe (0% 30% 100%)

Animated resize (transform)

The value of the pressed key

9. Interactivity 3. Set `activeKey` by click. `shiftKey` app state

Set activeKey by click

Method

Event

The key full info

Move shiftKey to state

Holding shift style

8. Interactivity 2. `Keydown` event handling. Active key state

Keydown event handling

activeKey state

Operational System (OS) language

Active key styling

Fade active key after a while

7. Interactivity 1. Switching keyboards

Reactive state, @click event, method call (refactor LangSwitcher)

Conditional styling

Change parent state from a child

Switching keyboards (languages)

Another languages data

Dynamic import for keyboardData

Functions that work with `assets`

`getAudioFileName` and `getKeyLabels`

`loadKeyboardData`

`playKeyAudio`

`getKeyContent`

Fallback `keyboardData.en` state

Method `getKeyContent`

Method `playKey`

Conditional rendering `v-if`

Move `shiftKey` to state

Holding `shift` style

`Keydown` event handling

`activeKey` state

Reactive state, @click event, method call (refactor `LangSwitcher`)

Dynamic import for `keyboardData`