DEV Community: FORCHA

Voices into Instruments

FORCHA — Thu, 13 Feb 2025 06:27:22 +0000

Enhancing Speech with Musical Expression: Transforming Voices into Instruments

Introduction

Language is a powerful tool, but it often falls short in conveying deep emotions and artistic expression. While tone, inflection, and emphasis help, they do not always capture the full depth of a speaker's intent. Traditional voice modulation tools often feel robotic and unnatural, failing to offer a truly expressive medium.

To address this, we propose an innovative approach: transforming speech into the tones of a musical instrument. By mapping spoken language onto a structured musical composition, we can create a richer and more nuanced form of communication.

The Concept

This method integrates speech with musical properties, leveraging key features such as:

Emotional depth: Expressing emotions beyond verbal content.
Artistic interpretation: Converting words into melodies and harmonies.
Enhanced storytelling: Making spoken words more engaging and expressive.

Our implementation involves encoding speech into a structured musical sequence, allowing it to be played as if it were an instrument.

Implementation with JavaScript and YAML

To demonstrate this concept, we use JavaScript alongside YAML to define a musical sequence. This is then processed using the PN Library, a tool that converts structured data into playable musical pieces.

Code Breakdown

The following HTML and JavaScript snippet loads a YAML-based musical composition and plays it using the PN Library.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Play Song</title>
    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4/dist/js-yaml.min.js"></script>
    <script src="https://playnoise.org/pn-library.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      // YAML-based song definition
      const yamlContent = `
name: Tears In Heaven
key: D
length: 0.35
envelope: tempered
harmonic: stringed
volume: 500
sections: [
  { 
    C1: [0.5:a2, 0.5:c3],
    C2: [0.5:a2, 0.5:c3],
  },
  { 
    C1: [z, a3, 0.33:f4, 0.33:g4, 0.33:f4, d4],
    C2: [4:d3],
  },
  { 
    C1: [2:e4-a4, e4-a4, 3:a3-d4-f4, a3-d4-f4, z],
    C2: [c3, c3, z, b2, z, 2:b2, b2],
  }
]
      `;

      // Parse YAML into JSON
      const songData = jsyaml.load(yamlContent);
      console.log(songData);

      // Check if PN library is loaded
      if (typeof PN === "undefined") {
        throw new Error("PN library is not loaded");
      }

      // Play the song
      PN.instrument("banjo");
      PN.setVolume(0.5); 
      const song = PN.createSong(songData); 
      PN.save(song);
    </script>
  </body>
</html>

Explanation of the Code

YAML for Composition: The song structure is defined in YAML format. It includes:
- Key and length: Defines the song's tonality and duration.
- Envelope and harmonic properties: Determines the instrument-like characteristics.
- Sections: Specifies different notes and their timing.
JavaScript Processing:
- YAML Parsing: Uses js-yaml to convert the YAML structure into JSON.
- PN Library Integration: Ensures that the PlayNoise (PN) library is available and sets up the instrument.
- Song Playback: Loads the structured composition into a musical instrument (banjo in this case) and plays it.

Potential Applications

This approach opens up several creative possibilities:

Emotionally Expressive AI Assistants: AI-generated voices can have dynamic, instrument-like intonations.
Music-Enhanced Storytelling: Writers, poets, and speakers can add musical expression to their narratives.
Speech Therapy & Language Learning: Helps in improving speech intonation and articulation through auditory feedback.
Interactive Art & Performance: Allows real-time voice modulation into musical compositions.

Conclusion

By merging speech with music, we open up new dimensions for emotional and artistic communication. Whether used in AI, creative storytelling, or assistive technology, this approach has the potential to make spoken language far more expressive and engaging.

If you’re interested in experimenting with this, try out the PN Library and see how your voice can be transformed into an instrument! 🚀

From Text to Sound (Creating Music With The Browser)

FORCHA — Sun, 19 Jan 2025 14:52:39 +0000

Case Study: Beauty And The Beast.

PlayNoise.js is a lightweight JavaScript library that enables music creation directly in the browser using Recorded Speech and YAML-based scores. It allows users to generate stereo audio and export it as WAV files, making it an excellent tool for web-based music and audio projects. Try it at PlayNoise.org.

Generate Beauty and The Beast from YAML Scores

Importing the necessary Javascript libries

    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4/dist/js-yaml.min.js"></script>

    <script src="pn-library.js"></script>

The first library helps serialize the YAML data and the second library is our playnoise.

Load the YAML Musical Sores to playnoise.

      const yamlContent = `
---
name: Beauty and the Beast
key: F
length: 0.4
instrument: banjo
harmonic: first
volume: 5000
sections:
  [
    {
      C1: [a4, c5, e5, 2:f5, 3:b4, a5, b5, g5, a5],
      C2: [4:a3, b3, d4, f4, b4, 2:c5, 2:e4],
    },
    { C1: [4:a4-f5, 2:a4, 0.66:c5, 0.66:e5, 0.66:f5], C2: [f3, c3, g3, 5:a3] },
    { C1: [4:b4-g5, a5, b5, g5, a5], C2: [f2, d3, f3, 3:b3, 2:e3] },
    { C1: [4:a4-f5, f4, g4, a4, b4], C2: [f3, c3, g3, 5:a3] },
    { C1: [4:e4-c5, 1.5:c5, 0.5:b4, 1.5:a4, 0.5:g4], C2: [a3, g3, f3, 5:g3] },
    {
      C1: [4:f4, 2:b4, 0.66:a4, 0.66:g4, 1.66:f4-d4, 5:c4, 2:c4-e4],
      C2: [b2b, d3, f3, b3, 4:d3-b3, 2:c3, b2b, c3, 2:f3, 2:e3],
    },
  ]

      `;

const songData = jsyaml.load(yamlContent);

We now convert the YAML to JSON object and save it in songdata variable.

if (typeof PN === "undefined") {
  throw new Error("PN library is not loaded");
}

We must ensure that the PN library (a JavaScript library for creating and playing music) is available and loaded in the environment.

PN.instrument("banjo");

The PN.instrument() function accepts a string (e.g., "banjo") to specify the instrument sound. In this case, it selects a "banjo" sound

PN.setVolume(0.5); // Set volume level

The PN.setVolume() function takes a number between 0 (muted) and 1 (maximum volume). Here, the volume is set to 0.5, which is half the maximum.

const song = PN.createSong(songData); // Create a song from the input data

Play with the code on codepen . you can switch to instruments like guitar, trumpet and cello.

Complete source code on github PlayNoise Beauty and the beast YAML example.
Github repository to build from source

Exploring Template Engines: Syntax and Control Flow in Popular Frameworks

FORCHA — Fri, 26 Jul 2024 13:05:42 +0000

In web development, template engines play a crucial role in rendering dynamic content. They allow developers to embed server-side code within HTML, making it possible to generate HTML dynamically based on data and control flow logic. Different frameworks and languages use different template engines, each with its own syntax and capabilities. In this post, we'll explore the syntax and control flow mechanisms of several popular template engines.

1. EJS (Embedded JavaScript)

Variable Interpolation: <%= %> for escaped output, <%- %> for unescaped output.
Control Flow: <% %>

<!-- Output -->
<p><%= variable %></p>

<!-- Control Flow -->
<% if (condition) { %>
    <p>Condition met!</p>
<% } %>

2. Pug (formerly Jade)

Variable Interpolation: #{} for inline, !{} for unescaped HTML.
Control Flow: Indentation-based syntax with conditionals and loops.

// Output
p #{variable}

// Control Flow
if condition
    p Condition met!
each item in items
    li= item

3. Handlebars

Variable Interpolation: {{}}
Control Flow: {{#if}}, {{#each}}, {{#unless}}, etc.

<!-- Output -->
<p>{{variable}}</p>

<!-- Control Flow -->
{{#if condition}}
    <p>Condition met!</p>
{{/if}}
{{#each items}}
    <li>{{this}}</li>
{{/each}}

4. Jinja2 (Used in Flask)

Variable Interpolation: {{ }}
Control Flow: {% %}

<!-- Output -->
<p>{{ variable }}</p>

<!-- Control Flow -->
{% if condition %}
    <p>Condition met!</p>
{% endif %}
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}

5. Mustache

Variable Interpolation: {{}}
Control Flow: {{#section}}, {{/section}}, {{^inverted}}

<!-- Output -->
<p>{{variable}}</p>

<!-- Control Flow -->
{{#condition}}
    <p>Condition met!</p>
{{/condition}}
{{#items}}
    <li>{{.}}</li>
{{/items}}

6. Twig (Used in Symfony, Craft CMS)

Variable Interpolation: {{ }}
Control Flow: {% %}

<!-- Output -->
<p>{{ variable }}</p>

<!-- Control Flow -->
{% if condition %}
    <p>Condition met!</p>
{% endif %}
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}

7. Smarty (Used in PHP)

Variable Interpolation: {$}
Control Flow: {if}, {foreach}, {while}

<!-- Output -->
<p>{$variable}</p>

<!-- Control Flow -->
{if $condition}
    <p>Condition met!</p>
{/if}
{foreach from=$items item=item}
    <li>{$item}</li>
{/foreach}

8. Thymeleaf (Used in Java)

Variable Interpolation: ${}
Control Flow: th:if, th:each

<!-- Output -->
<p th:text="${variable}"></p>

<!-- Control Flow -->
<div th:if="${condition}">
    <p>Condition met!</p>
</div>
<ul>
    <li th:each="item : ${items}" th:text="${item}"></li>
</ul>

Summary

EJS: <%= %> for output, <% %> for logic.
Pug: #{} for inline, indentation for logic.
Handlebars: {{}} for output, {{#if}}, {{#each}} for logic.
Jinja2: {{ }} for output, {% %} for logic.
Mustache: {{}} for output, {{#}}, {{/}} for logic.
Twig: {{ }} for output, {% %} for logic.
Smarty: {$} for output, {if}, {foreach} for logic.
Thymeleaf: ${} for output, th:if, th:each for logic.

Each template engine has its own strengths and is used based on the requirements of the web framework and project preferences.

Conclusion

Each template engine has its unique syntax and features, making it suitable for different use cases and preferences. Understanding the differences and strengths of these engines can help developers choose the right tool for their projects, ensuring efficient and maintainable code.

mbs

FORCHA — Thu, 04 Jul 2024 08:59:39 +0000

To find the maximum number of balanced shipments, we need to identify the longest contiguous segment of parcels with an equal number of two types of parcels.
Solution By Steps
Step 1: Identify Parcel Types
Count the number of each type of parcel in the given list.
Step 2: Find Longest Contiguous Segment
Locate the longest contiguous segment where the counts of both types of parcels are equal.
Step 3: Calculate Maximum Balanced Shipments
Divide the length of the longest contiguous segment by 2 to determine the maximum number of balanced shipments.
Final Answer
The maximum number of balanced shipments is the length of the longest contiguous segment with an equal number of both types of parcels, divided by 2.

Patterns that indicate DOM dynamic behavior and corresponding React code.

FORCHA — Sat, 08 Jun 2024 19:27:32 +0000

When converting JavaScript code to React code and deciding when to use useState, you need to look for patterns that indicate dynamic behavior. Dynamic behavior in a web application typically involves changes in the DOM based on user interactions or other events. Here are some common changes that suggest the need for state management:

1. Changes in Element Visibility

Example: Showing or hiding elements based on user actions.
Pattern: Manipulating display style, toggling CSS classes that control visibility (like adding/removing a hidden class).

JavaScript Example

var element = document.getElementById('element');
element.style.display = 'none'; // Hides the element

React Conversion

const [isVisible, setIsVisible] = useState(true);

// Toggling visibility
<div style={{ display: isVisible ? 'block' : 'none' }}>Content</div>

2. Changes in Text Content

Example: Updating button text or other text content based on actions.
Pattern: Directly setting textContent or innerHTML.

JavaScript Example

button.textContent = 'New Text';

React Conversion

const [buttonText, setButtonText] = useState('Initial Text');

<button onClick={() => setButtonText('New Text')}>{buttonText}</button>

3. Toggling CSS Classes

Example: Adding or removing CSS classes based on conditions.
Pattern: Using classList.add, classList.remove, or classList.toggle.

JavaScript Example

element.classList.add('active');

React Conversion

const [isActive, setIsActive] = useState(false);

<div className={isActive ? 'active' : ''}>Content</div>

4. Form Input Values

Example: Handling input changes.
Pattern: Reading or setting value on input elements.

JavaScript Example

input.value = 'new value';

React Conversion

const [inputValue, setInputValue] = useState('');

<input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />

5. Attributes

Example: Modifying attributes like disabled, checked, or src.
Pattern: Directly setting attributes on elements.

JavaScript Example

element.disabled = true;

React Conversion

const [isDisabled, setIsDisabled] = useState(false);

<button disabled={isDisabled}>Click me</button>

6. Conditional Rendering

Example: Rendering different components or elements based on conditions.
Pattern: Using if statements or ternary operators to append/remove elements.

JavaScript Example

if (condition) {
  document.body.appendChild(element);
} else {
  document.body.removeChild(element);
}

React Conversion

const [condition, setCondition] = useState(false);

{condition ? <Component /> : null}

7. Dynamic Styles

Example: Changing inline styles dynamically.
Pattern: Setting the style attribute with dynamic values.

JavaScript Example

element.style.color = 'red';

React Conversion

const [color, setColor] = useState('black');

<div style={{ color }}>Text</div>

8. Lists and Arrays

Example: Rendering lists based on array data.
Pattern: Adding/removing items in arrays and updating the DOM accordingly.

JavaScript Example

const items = ['Item 1', 'Item 2'];
const ul = document.createElement('ul');
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li);
});
document.body.appendChild(ul);

React Conversion

const [items, setItems] = useState(['Item 1', 'Item 2']);

<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

9. Dynamic List Manipulation

Example: Adding, removing, or updating items in a list based on user actions.
Pattern: Manipulating array content and rendering it to the DOM.

JavaScript Example

let list = document.getElementById('list');
let items = ['Item 1', 'Item 2'];
items.forEach(item => {
  let li = document.createElement('li');
  li.textContent = item;
  list.appendChild(li);
});

// Adding an item
let newItem = 'Item 3';
items.push(newItem);
let newLi = document.createElement('li');
newLi.textContent = newItem;
list.appendChild(newLi);

React Conversion

const [items, setItems] = useState(['Item 1', 'Item 2']);

// Adding an item
const addItem = () => {
  setItems([...items, 'Item 3']);
};

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

10. Form Input Handling

Example: Handling form input changes and validations.
Pattern: Listening for input events and updating values.

JavaScript Example

let input = document.getElementById('input');
input.addEventListener('input', function(event) {
  console.log(event.target.value);
});

React Conversion

const [inputValue, setInputValue] = useState('');

return (
  <input
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
  />
);

11. Animation Triggers

Example: Triggering CSS animations based on user interactions.
Pattern: Adding/removing CSS classes to start animations.

JavaScript Example

let box = document.getElementById('box');
box.addEventListener('click', function() {
  box.classList.add('animate');
});

React Conversion

const [animate, setAnimate] = useState(false);

return (
  <div
    id="box"
    className={animate ? 'animate' : ''}
    onClick={() => setAnimate(true)}
  />
);

12. Data Fetching

Example: Fetching data from an API and updating the DOM.
Pattern: Making asynchronous requests and rendering results.

JavaScript Example

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    document.getElementById('data').textContent = JSON.stringify(data);
  });

React Conversion

const [data, setData] = useState(null);

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

return <div id="data">{data ? JSON.stringify(data) : 'Loading...'}</div>;

13. Timer or Interval Updates

Example: Updating the DOM based on time intervals.
Pattern: Using setInterval or setTimeout to trigger updates.

JavaScript Example

let counter = 0;
setInterval(() => {
  document.getElementById('counter').textContent = counter++;
}, 1000);

React Conversion

const [counter, setCounter] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setCounter(prevCounter => prevCounter + 1);
  }, 1000);

  return () => clearInterval(interval);
}, []);

return <div id="counter">{counter}</div>;

14. Conditional Component Rendering

Example: Showing different components based on a condition.
Pattern: Using if statements or ternary operators to toggle elements.

JavaScript Example

if (isLoggedIn) {
  document.getElementById('welcome').textContent = 'Welcome, User!';
} else {
  document.getElementById('welcome').textContent = 'Please log in.';
}

React Conversion

const [isLoggedIn, setIsLoggedIn] = useState(false);

return (
  <div id="welcome">
    {isLoggedIn ? 'Welcome, User!' : 'Please log in.'}
  </div>
);

15. Modal Windows

Example: Displaying a modal window based on user actions.
Pattern: Toggling visibility of modal elements.

JavaScript Example

let modal = document.getElementById('modal');
let openButton = document.getElementById('openModal');
let closeButton = document.getElementById('closeModal');

openButton.addEventListener('click', function() {
  modal.style.display = 'block';
});

closeButton.addEventListener('click', function() {
  modal.style.display = 'none';
});

React Conversion

const [isModalOpen, setIsModalOpen] = useState(false);

return (
  <>
    <button id="openModal" onClick={() => setIsModalOpen(true)}>Open Modal</button>
    {isModalOpen && (
      <div id="modal">
        <button id="closeModal" onClick={() => setIsModalOpen(false)}>Close</button>
        <div>Modal Content</div>
      </div>
    )}
  </>
);

16. Accordion Panels

Example: Expanding or collapsing accordion panels.
Pattern: Toggling classes or styles for panel visibility.

JavaScript Example

let accordion = document.getElementById('accordion');
accordion.addEventListener('click', function() {
  let panel = this.nextElementSibling;
  panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
});

React Conversion

const [isPanelOpen, setIsPanelOpen] = useState(false);

return (
  <div id="accordion" onClick={() => setIsPanelOpen(!isPanelOpen)}>
    Accordion Header
    <div style={{ display: isPanelOpen ? 'block' : 'none' }}>
      Accordion Content
    </div>
  </div>
);

17. Tabs Navigation

Example: Switching content based on selected tab.
Pattern: Changing the visible content based on active tab index.

JavaScript Example

let tabs = document.querySelectorAll('.tab');
let contents = document.querySelectorAll('.content');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', function() {
    contents.forEach(content => content.style.display = 'none');
    contents[index].style.display = 'block';
  });
});

React Conversion

const [activeTab, setActiveTab] = useState(0);

return (
  <>
    <div className="tabs">
      {['Tab 1', 'Tab 2', 'Tab 3'].map((tab, index) => (
        <button key={index} onClick={() => setActiveTab(index)}>{tab}</button>
      ))}
    </div>
    <div className="contents">
      {activeTab === 0 && <div>Content 1</div>}
      {activeTab === 1 && <div>Content 2</div>}
      {activeTab === 2 && <div>Content 3</div>}
    </div>
  </>
);

18. Dynamic Styling Based on State

Example: Changing styles based on state values.
Pattern: Directly modifying the style attribute or using class toggles.

JavaScript Example

let box = document.getElementById('box');
box.style.backgroundColor = 'red';

React Conversion

const [color, setColor] = useState('red');

return (
  <div id="box" style={{ backgroundColor: color }}>Box Content</div>
);

Web Scraping in Golang

FORCHA — Mon, 17 Jan 2022 12:17:48 +0000

Web scraping is a handy tool to have in a data scientist's skill set. It can be useful in a
variety of situations to gather data, such as when a website does not provide an API. We will be using this golang package github.com/anaskhan96/soup. It performs the same as beautifulsoup of python.
This is the webpage we are going to be scraping.

Below is a highlighted image of our desired values on the Browsers Dev tools.

Here is our code

package main

import (
    "fmt"
    "github.com/anaskhan96/soup"
)
func main(){
fmt.Println("Enter the xkcd comic number :") //collect user input
var num int //declare an integer called"num" to store the input
fmt.Scanf("%d", &num) //Collect the user input and assign it to num
url := fmt.Sprintf("https://xkcd.com/%d", num)//Append num to website url '' 
resp, _ := soup.Get(url)  //Call the soup fuction to extract url
doc := soup.HTMLParse(resp) //Parse extracted url to HTML encoding
title := doc.Find("div", "id", "ctitle").Text()  // parse HTML Text
fmt.Println("Title of the comic :", title) // print HTML Text
comicImg := doc.Find("div", "id", "comic").Find("img") //Parse HTML IMAGE
fmt.Println("Source of the image :", comicImg.Attrs()["src"])
fmt.Println("Underlying text of the image :", comicImg.Attrs()["title"])
}

And Here is our output.

Here is the Github Repo
Credits to Daniel Whitenack on his book Machine Learning With Go

Building a Snake Game With Fyne and Go.

FORCHA — Sun, 16 Jan 2022 17:09:43 +0000

How to install GO.
How to install fyne.
Drawing Snake and Fruit on Fyne Canvas.
Adding a timer to move the snake.
Using Keys to Control direction.

** 1 How to install Go**
The GO can be downloaded and installed from the official Golang website https://go.dev/doc/install
In this tutorial i will be using a windows environment. I f you are on Mac or Linux please follow the tutorial given on the official golang docs

2 How to install Fyne
2.1. For those on Windows environments download and install the GCC compiler. If you are running on a different OS you need to follow this guide Fyne Getting Started.

2.2 Using command Line create directory myapp

mkdir myapp && cd myapp

2.3. In myapp directory Run the following command and replace MODULE_NAME with your preferred module name (this should be called in a new folder specific for your application).

go mod init MODULE_NAME

2.4. You now need to download the Fyne module. This will be done using the following command:

go get fyne.io/fyne/v2

2.5. To finish your module’s set up, you now need to tidy the module file to correctly reference Fyne as a dependency.

 go mod tidy

3 Drawing Snake and Fruit on Fyne Canvas
3.1. Firstly, we will create a setup function that will build the game screen. We will call
this function setupGame and create list that we we populate.

3.2 By iterating through a loop of 10 elements (i from 0 to 9) and make a new Rectangle for each position. The elements are all created 10 x 20 in size and placed one above the other using the Move function. We
will add them all to the segment slice.

3.3 The return from this method is a container with no layout so that we can later use a manual layout for the visual elements:

func setupGame() *fyne.Container {
    for i := 0; i < lenght; i++ {
        seg := snakePart{9, float32(5 + i)}
        snakeParts = append(snakeParts, seg)

        r := canvas.NewRectangle(&color.RGBA{G: 0x66, A: 0xff})
        r.Resize(fyne.NewSize(10, 20))
        r.Move(fyne.NewPos(150, float32(500+i*20)))
        segments = append(segments, r)
    }

    head = canvas.NewRectangle(&color.RGBA{G: 0x66, A: 0xff})
    head.Resize(fyne.NewSize(10, 20))
    head.Move(fyne.NewPos(snakeParts[0].x*50, snakeParts[0].y*50))

    fruit = canvas.NewCircle(&color.RGBA{R: 0x66, A: 0xff})
    fruit.Resize(fyne.NewSize(10, 10))
    fruitPos= fyne.NewPos(snakeParts[0].x*20, snakeParts[0].y*20)

    fruit.Move(fruitPos)

    segments = append(segments, head)
    segments = append(segments, fruit)

    c:= fyne.NewContainerWithoutLayout(segments...)
    return c
}

3.4. With the graphical setup code, we can wrap this in the usual application load code, this time passing the result of setupGame() to the SetContent function. As this game will not have dynamic sizing, we will call SetFixedSize(true) so that the window cannot be resized

func main() {
    a := app.New()

    w := a.NewWindow("Snake")
    w.Resize(fyne.NewSize(800, 800))
    w.SetFixedSize(false)
    game = setupGame()
    w.SetContent(game)

    w.Canvas().SetOnTypedKey(keyTyped)

    go runGame()
    w.ShowAndRun()
}

4. Adding a timer to move the snake
The next step is to add some motion to the game. We will start with a simple timer that
repositions the snake on screen:

4.1. To help manage the game state, we will define a new type to store the x, y value of
each snake segment, named snakePart. We then make a slice that contains all of
the elements, and this is what we will update as the snake moves around the screen.

type snakePart struct {
    x, y float32
}
var (
    snakeParts []snakePart
    game       *fyne.Container
    head       *canvas.Rectangle
    fruit      *canvas.Circle
    move       = moveDown
    segments []fyne.CanvasObject
    lenght        int = 20
    fruitPos     fyne.Position 
   )

4.2. We create a new function that will update the rectangles that we created earlier based on updated snake section information. To make sure that the game refreshes each time we move the snake, we need to move the rectangles and call ** Refresh()**.

func refreshGame() {

    for i, seg := range snakeParts {
        rect := game.Objects[i]
        rect.Move(fyne.NewPos(seg.x*10, seg.y*20))
    }

    game.Refresh()
}

4.3. To run the main game loop, we need one more function that will use a timer of 250 milliseconds to move the snake. We call this function runGame.

4.4. To move the snake forward , we copy the position of each element from that of the element that is one segment further forward, working from the tail to the head.

5. Using keys to control direction
5.1. To start with, we define a new type (moveType) that will be used to describe the
next direction in which to move. The move variable is then defined to hold the next move direction:

type moveType int
const (
 moveUp moveType = iota
 moveDown
 moveLeft
 moveRight
)
var move = moveUp

5.2. Create a new keyTyped function as follows that will perform the keyboard
mapping:

func keyTyped(e *fyne.KeyEvent) {
 switch e.Name {
 case fyne.KeyUp:
 move = moveUp
 case fyne.KeyDown:
 move = moveDown
 case fyne.KeyLeft:
 move = moveLeft
 case fyne.KeyRight:
 move = moveRight
 }
}

5.3. For the key events to be triggered we use the SetOnKeyTyped() function on the window's canvas.

w.Canvas().SetOnTypedKey(keyTyped)

5.4. Lastly, the code moves the head to a new position, in this case further up the screen (by using snakeParts[0].y-1). Refer to the following function:

5.5. We set up our animations inside the for loop in the runGame function, before the
timer pause

func runGame() {
    nextPart := snakePart{snakeParts[0].x, snakeParts[0].y - 1}
    for {
        oldPos := fyne.NewPos(snakeParts[0].x*10, snakeParts[0].y*10)
        newPos := fyne.NewPos(nextPart.x*10, nextPart.y*10)
        canvas.NewPositionAnimation(oldPos, newPos, time.Millisecond*250, func(p fyne.Position) {
            head.Move(p)
            canvas.Refresh(head)
        }).Start()

        end := len(snakeParts) - 1
        canvas.NewPositionAnimation(fyne.NewPos(snakeParts[end].x*10, snakeParts[end].y*10),
            fyne.NewPos(snakeParts[end-1].x*10, snakeParts[end-1].y*10), time.Millisecond*250,
            func(p fyne.Position) {
                tail := game.Objects[end]
                tail.Move(p)
                canvas.Refresh(tail)
            }).Start()

        time.Sleep(time.Millisecond * 250)
        for i := len(snakeParts) - 1; i >= 1; i-- {
            snakeParts[i] = snakeParts[i-1]
        }
        snakeParts[0] = nextPart //SetUp the new head position
        refreshGame()

    }
}

5.6. After the refresh line, we need to update the movement calculations to set up nextPart ready for the next movement:

 switch move {
 case moveUp:
 nextPart = snakePart{nextPart.x,
 nextPart.y - 1}
 case moveDown:
 nextPart = snakePart{nextPart.x,
 nextPart.y + 1}
 case moveLeft:
 nextPart = snakePart{nextPart.x - 1,
 nextPart.y}
 case moveRight:
 nextPart = snakePart{nextPart.x + 1,
 nextPart.y}
 }

Build a Dating Application with MERN Stack

FORCHA — Sat, 01 Jan 2022 19:30:02 +0000

*Full Stack Mongodb, ExpressJs, ReactJs and NodeJs online dating application *

Here is the github repository and here is a working demo on netlify

Open your terminal and create a dating-app-mern folder. Inside it, use create-react-app to create a new app called dating-app-frontend. The following are the commands to do this.
mkdir dating-app-mern
cd dating-app-mern
npm create-react-app dating-app-frontend

Return to the React project and cd to the dating-app-frontend directory. Start the React
app with npm start.
cd dating-app-frontend
npm start
Next, let’s delete some of the files that we don’t need. Navigate to dating-app-frontend > Src and delete the following files

App.test.js , reportWebVitas.js , setupTests.js

Let’s remove all the unnecessary boilerplate code. The index.js file should look like
the following.

#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>,
 document.getElementById('root')
);

App.js contains only the text Dating App MERN. All the content from the App.css
file has been removed.

#App.js
import './App.css';
function App() {
 return (
  <div className="app">
   <h1>Dating App MERN </h1>
  </div>
 );
}
export default App;

In index.css, update the CSS to have margin: 0 at the top.

*{
  margin: 0;
}

Creating a Header Component
Let’s create a header component. First, you must install Material-UI (https://materialui.
com), which provides the icons. You need to do two npm installs, as per the Material-
UI documentation. Install the core through the integrated terminal in the dating-appfrontend
folder.

npm i @material-ui/core @material-ui/icons

Next, create a components folder inside the src folder. Create two files— Header.js
and Header.css—inside the components folder
The following is the Header.js file’s content.

#Header.js
import React from 'react'
import './Header.css'
import PersonIcon from '@material-ui/icons/Person'
import IconButton from '@material-ui/core/IconButton'
import ForumIcon from '@material-ui/icons/Forum'
const Header = () => {
 return (
  <div className="header">
   <IconButton>
    <PersonIcon fontSize="large" 
    className="header__icon" />
   </IconButton>
   <img className="header__logo" 
   src="logo192.png" 
   alt="header" />
   <IconButton>
     <ForumIcon fontSize="large" 
     className="header__icon" />
   </IconButton>
  </div>
 )
}
export default Header

Include the Header component in the App.js file and on localhost. The updated
code is marked in bold.

#App.js
import './App.css';
import Header from './components/Header';
function App() {
 return (
  <div className="app">
   <Header />
  </div>
 );
}
export default App;

The Header.css file contains the following content, including simple styles, which
completes the header.

#Header.css
.header{
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
border-bottom: 1px solid #f9f9f9;
}
.header__logo{
object-fit: contain;
height: 40px;
}
.header__icon{
padding: 20px;
}

Let’s now work on the second component. Create two files— DatingCards.js and
DatingCards.css—inside the components folder.

The updated code of App.js is below

#App.js
import './App.css';
import Header from './components/Header';
import DatingCards from './components/DatingCards';
function App() {
 return (
  <div className="app">
   <Header />
   < DatingCards />
  </div>
 );
}
export default App;

Before moving forward let's install this
package has a feature that provides the swipe effect.

npm i react-tinder-card

Next, put the content in DatingCards.js

#DatingCards.js
import React, { useState } from 'react'
import DatingCard from 'react-tinder-card'
import './DatingCards.css'
const DatingCards = () => {
    const [people, setPeople] = useState([
        { name: "Random Girl", imgUrl: "https://images.unsplash.com/photo-1599842057874-37393e9342df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGdpcmx8ZW58MHx8MHx8&auto=format&fit=crop&w=634&q=80" },
        { name: "Another Girl", imgUrl: "https://images.unsplash.com/photo-1602693130555-a1a37fda607b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJsYWNrJTIwZ2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=634&q=80" },
        { name: "Random Guy", imgUrl: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" },
        { name: "Another Guy", imgUrl: "https://images.unsplash.com/photo-1601576084861-5de423553c0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MzF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=634&q=80" }
        ])
    const swiped = (direction, nameToDelete) => {
        console.log("receiving " + nameToDelete)
    }
    const outOfFrame = (name) => {
        console.log(name + " left the screen!!")
    }
    return (
        <div className="datingCards">
        <div className="datingCards__container">
        {people.map((person) => (
            <DatingCard
            className="swipe"
            key={person.name}
            preventSwipe={['up', 'down']}
            onSwipe={(dir) => swiped(dir, person.name)}
            onCardLeftScreen={() => outOfFrame(person.name)} >
            <div style={{ backgroundImage: `url(${person.
                imgUrl})`}} className="card">
                <h3>{person.name}</h3>  
                </div>
                </DatingCard>
                ))}
        </div>
        </div>
        )
}
export default DatingCards

Add the first styles in the DatingCards.css file.

#DatingCards.css
.datingCards__container{
display: flex;
justify-content: center;
margin-top: 10vh;
}
.card{
position: relative;
background-color: white;
width: 600px;
padding: 20px;
max-width: 85vw;
height: 70vh;
box-shadow: 0px 18px 53px 0px rgba(0, 0, 0, 0.3);
border-radius: 20px;
background-size: cover;
background-position: center;
}
.swipe{
position: absolute;
}
.cardContent{
width: 100%;
height: 100%;
}
.card h3{
position: absolute;
bottom: 0;
margin: 10px;
color: white;
}

Creating the Swipe Buttons Component
Create two files— SwipeButtons.js and SwipeButtons.css—inside the components
folder.

#App.js
import './App.css';
import Header from './components/Header';
import DatingCards from './components/DatingCards';
import SwipeButtons from './components/SwipeButtons';
function App() {
 return (
  <div className="app">
   <Header />
   < DatingCards />
   < SwipeButtons />
  </div>
 );
}
export default App;

The content of the SwipeButtons.js

#SwipeButtons.js
import React from 'react'
import './SwipeButtons.css'
import ReplayIcon from '@material-ui/icons/Replay'
import CloseIcon from '@material-ui/icons/Close'
import StarRateIcon from '@material-ui/icons/StarRate'
import FavoriteIcon from '@material-ui/icons/Favorite'
import FlashOnIcon from '@material-ui/icons/FlashOn'
import IconButton from '@material-ui/core/IconButton'
const SwipeButtons = () => {
    return (
        <div className="swipeButtons">
        <IconButton className="swipeButtons__repeat">
                <ReplayIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__left">
                <CloseIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__star">
                <StarRateIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__right">
                <FavoriteIcon fontSize="large" />
        </IconButton>
        <IconButton className="swipeButtons__lightning">
                <FlashOnIcon fontSize="large" />
        </IconButton>
        </div>
        )
}
export default SwipeButtons

Next, style the buttons in the SwipeButtons.css file.

#SwipeButtons.css
.swipeButtons{
position: fixed;
bottom: 10vh;
display: flex;
width: 100%;
justify-content: space-evenly;
}
.swipeButtons .MuiIconButton-root{
background-color: white;
box-shadow: 0px 10px 53px 0px rgba(0, 0, 0, 0.3) !important;
}
.swipeButtons__repeat{
padding: 3vw !important;
color: #f5b748 !important;
}
.swipeButtons__left{
padding: 3vw !important;
color: #ec5e6f !important;
}
.swipeButtons__star{
padding: 3vw !important;
color: #62b4f9 !important;
}
.swipeButtons__right{
padding: 3vw !important;
color: #76e2b3 !important;
}
.swipeButtons__lightning{
padding: 3vw !important;
color: #915dd1 !important;
}