Code Hosting

The first question is ovious, where to host the code and there are multiple options, the three options that come to mind are

• GitHub
• GitLab
• BitBucket

All three options have free tiers and similar setups, so with that in mind I have to go with the option that allows easy access to my target audience and currently my assumption is that my target audience lives and breaths in GitHub so that will be the option I am going to go with. It also has proven to work nicely with Vercel

Bugs and Progress

The next question is where to keep track of bugs and progress and for that we also have three great alternatives.

• GitHub
• Jira
• OpenProject

I didn’t have to look to far to figure out which platform to use. I have used Jira for many years from small teams to enterprise level and I know it is an amazing piece of software. Scrum masters are able to easily create custom reports and keep track of issues during stand ups (daily or whatever candence the team decides). We must not forget Product Owners who can quickly create new tasks and set their importance so that the team can decide when it is best to work on them. Most of all, one thing that I have always loved about Jira is the ease in which I can find tasks, I can rudementary remember a task and find it, specially if the team is good at adding good notes into the tickets. Gone are the days in which email threads would hold all the valuable information. There were times when we could find information from years past or even see a thrend when an existing bug re-appeard and figure out how to mitigate it for good.

With all that I have to go with GitHub, currently I am a team of one and I like how easy is to integreate GitHub tasks and convert them into issues to keep track of them. I am also interested into learning the software to better understad it.

Deployments

Two great choices when it comes to deployments but for this, we will continue to use Vercel although Netlify is the first platform that gave me that ability to connect my GitHub repo and do auto deployments. So much to learn when it comes to deployments with these amazing platforms.˝

This is a rough draft of the goals

• Easy to use
• Be able to see the call out notes (ABCDEFG)
• Be able to hide the call out notes (ABCDEFG)
• Be able to create your own note routine
• Playable on the browser
• Playable on a mobile device
• Looks decent

With that in mind the first thing I had to figure out how to play sounds on the browser, luckily someone had written a component just for that named MIDI Sounds React, this was perfect as I wanted to write React, so just with that component I started to add sounds to a browser.

Playing a sound:

The code to use the component was relative easy.

this.midiSounds.playChordAt(1, 3, [60], 2.5);

The parameters for the item above are as follows

1 = Time when the note is to be played

3 = what instrument

[60] = pitch

2.5 = duration of play

Adding component to the browser

The way you would add the component to your view was realtive easy as well

//Import library
import MIDISounds from 'midi-sounds-react';

// use library
<MIDISounds ref={(ref) => (this.midiSounds = ref)} appElementName="root" instruments={[3]} />

This gave me the perfect structure I needed in order to play different notes on the browser. One of the benefits that came with this component is the ability to use a wide range of instruments and I just had to find the flute which is 765.

Displaying the notes

I could draw each note but instead I did a quick search and found multiple OS fonts that I could use to draw the notes on the browser. After trying a few I ended up using MusiQwik as it met my needs and with their font map I was able to quickly figure out what letter to use for which note.

Making it look decent

I now had all the components I needed to play sound and display notes on the browser, I could just throw all on the browser and do is thing but I wanted to make sure it look decent at the start and scale as I would add features to it. With that in mind I went ahead and decided to use Carbon Design System to get some of the out of the box components and get some of the basics out of the way such as buttons and modals.

Can we see it?

Here is a screengrab of the site, you can also visit the site with the domain below.

https://nextmusicdirector.com/

Note: If you already have a google Analytics account and also a custom Document file please skip the two links below.

Google Analytics account:

You just have a tracking ID to implement google analytics and for that you can follow this tutorial: https://support.google.com/analytics/answer/1008015?hl=en

Custom Document File for NextJS:

To create a custom Document file follow this steps: https://nextjs.org/docs/advanced-features/custom-document

Once you have created a custom Google Analytics account you look for your tracking Id within the documentation, you may also be given a snippet like the one below. Go ahead and replace “YOUR_TRACKING_ID” with the one provided by Google.

<script async src="https://www.googletagmanager.com/gtag/js?id=${YOUR_TRACKING_ID}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ${YOUR_TRACKING_ID});
</script>

Your custom Document file should look like the one below, if you have been working on it for a while it may be slightly different but the structure should be the same.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>)
  }
}

export default MyDocument

Finally your custom document with Analytics should look like something below:

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
          <script async src="https://www.googletagmanager.com/gtag/js?id=${YOUR_TRACKING_ID}"></script>
          <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', ${YOUR_TRACKING_ID});
          </script>
        </body>
      </Html>)
  }
}

export default MyDocument

That is all there is to it, once you have both pieces of code in place you should be able to start seeing traffic on your site.

Part 1

Part 2 

I had to break it into two parts because after about 40 minutes I lost my internet connection.

You can also find my version after taking the course here:

Space Jelly Shop

With the exposure to NextJS, I took it upon myself to change my site’s layout, using NextJS, and it was a great ride! It took about 16 hours to transform. Two of the most fun things to learn was when to use useEffect and useLayoutEffect in hooks.

Creating an account and using Vercel was a breeze; it took minutes to get it up and running with Vercel, and after connecting it with GitHub, my builds were automatic and perfect for quick modification and UI tests.

You can see the WIP here: https://helmutgranda.netlify.app/

Copy array

let arr = [1,2,3,4]
let copy = [...arr]
// copy is [ 1, 2, 3, 4 ]

Concatenate arrays

let arr1 = [1,2,3,4]
let arr2 = [5,6,7,8]
let concat = [...arr1, ...arr2]
// concat is [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Pass arguments as arrays

function dev(x, y, z) { }
var args = [0, 1, 2]
dev(...args) // call function

Copy Object

let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// obj is {a: 1, b: 2, c: 3}

Merge Object

let obj1 = {a: 1, b: 2, c: 3}
let obj1 = {d: 4, e: 5, f: 6}
let merge = {...obj1, ...obj2}
// merge is {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

Find more details on the source link above, thanks to @laurie for putting this list together https://dev.to/laurieontech

My question is: given a target RGB color, what is the formula to recolor black (#000) into that color using only CSS filters?

For an answer to be accepted, it would need to provide a function (in any language) that would accept the target color as an argument and return the corresponding CSS filter string.

There are only a few number of SO questions which are worth reading and this one is for sure one of them, I really enjoyed reading the thought process from the author’s point of view and how complex this feature it is even though it seems so simple and something that should be readily available.

Ever wanted to recreate Instagram filters on the fly using CSS3 (without needing to open a graphics program)? Now you can!

Using the new filters feature in CSS3, you can recreate all of the Instagram filters. I have, with varying levels of success, recreated every Instagram filter. They’re definitely not perfect, but they show how CSS3 can be used to do things that weren’t possible before. The CSS code is included with each filter, so you can use them as is or play around for more accuracy.

It is amazing that just a few years ago you had to fire up Photoshop or a similar product in order to produce effects like those in Instagram, but thanks to how far the web has come and the tools available to browsers you only need your imagination to create something similar.

This can be easily solved by appending rel=“noopener noreferrer” to the anchor tags. With that said the URLs should look like this:

<a href="newpage.html" target="_blank" rel="noopener noreferrer">New Page</a>

https://en.wikipedia.org/wiki/Progressive_web_app

Google:

https://developers.google.com/web/progressive-web-apps/

Mozilla:

https://developer.mozilla.org/en-US/Apps/Progressive