DEV Community: jtwebguy

Adding YT Video to JANA

jtwebguy — Tue, 18 Oct 2022 06:23:09 +0000

A while ago I created a tech/biz/gaming/entertainment news aggregator named JANA which stands for just another news aggregator created in Ionic and React. Video seems just right for an addition so here's how I made it.

npm i yt-player

First, we need to install yt-player npm package. This does not have typings as I'm creating this with TypeScript so I generated one using this instruction. After generating, copy your *.ts files to the root of the yt-player folder.

This code below will be the main YT Frame API Component.

export const YTAPi = ({props, vid}:any) =>{
    let o:any = null
    const [player, setPlayer] = useState(o)
    const [time, setTime] = useState(0)

    useEffect( () =>{

            let p:any = document.querySelector('#playerMain')
            if(p == null) return

            if(player == null){
                setPlayer(new YouTubePlayer('#playerMain',{autoplay:true}))

            }else{
                player.load(vid ? vid : 'GKSRyLdjsPA')

                    player.on('cued', ()=>{
                        player.play()
                    })
            }

    }, [player])


    useEffect( () =>{

            if(player == null) return
            player.load(vid)
                    //player.setVolume(100)


                    player.on('playing', () => {
                        setTime(player.getDuration()) // => 351.521
                    })

                    player.on('ended', ()=>{
                        //alert('ended')
                    })
                    player.on('cued', ()=>{
                      player.play()
                  })

    }, [vid])

    return (
        <>
        <div id="playerMain" className="mainPlayer"></div>
        </>
    )
}

The "{props,vid}" arguments take object and a video ID string so we can play other videos as well.

JANA in 3 days - PWA with Ionic +Capacitor + React

jtwebguy — Fri, 14 Oct 2022 04:35:40 +0000

I present to you: JANA - my "Just Another News Aggregator" app created only after 3 days of coding in Ionic and React using Capacitor Plugins. The process was without a sweat.

JANA is just a simple news aggregator with the articles coming from various RSS feeds. I decided not to display images to make it more readable and add to the simplicity and it's dark mode in default. I also decided not to collect user data but allow them to filter news sources in the settings menu and the data will be stored in the app itself using Capacitor's "Preferences" plugin.

Ionic's straightforward components are much easy to use with the helpful docs at your disposal. Along with Capacitor which deals with native android and iOS part you'll have a smooth sailing building your first progressive web app. The documentation is well written and super understandable.

Dance to the beat: ThreeJS Drum Set

jtwebguy — Mon, 03 Oct 2022 22:15:48 +0000

Just wanted to share with you my latest toy: ThreeJS Drum Set

Made with: ThreeJS Editor

Drum model from Vaclav Marena sketchfab

Drum Sounds from various Sound repos:
soundcamp.org
bigsoundbank.com
fesliyanstudios.com
freewavesamples.com
Thanks muchos!

Trippy 8D audio with ThreeJS Editor.

jtwebguy — Fri, 30 Sep 2022 11:06:54 +0000

We will try to make an 8D audio effect with ThreeJS editor. An 8D music is produced by adding panning, reverb and other sound effects to the audio file but here we'll create a dynamic 8D audio effect using threeJs "THREE.PositionalAudio" object.

First, fire up the threeJs editor found here. Add A box object and attach a script to it on the lower right corner.

Next, add a sphere or any 3d object you want it does not matter and set its position to the right of the box about 2 units. Now, we need to make it a child of the box by dragging the sphere handle under the box handle on the SCENE tree view on the upper right corner of the editor. Add a script to the sphere 3d object like what we did on the box 3d object.

The Box (parent) script:

player.listener = null

var tOld = 0
var rotX = 1
var rotY = 1
var rotZ = 1

function update( event ) {
    var ds = new Date().getSeconds()

    var dn = Date.now()

    if(tOld < dn) {

        tOld = dn+5000

        rotX = ds % 4 == 0 ? 1 : 0

        rotY = ds % 3 == 0 ? 1 : 0

        rotZ = ds % 2 == 0 ? 1 : 0

        console.log(rotX, rotY, rotZ)

        console.log(tOld, dn, ds)

    }

    this.rotateOnAxis(new THREE.Vector3(rotX,rotY,rotZ), deg2rad(.1))


}

function init(){

    player.listener = new THREE.AudioListener();
    console.log(player)
    this.add(player.listener)


}

First we set the player.listener to null then on the init hook we set the THREE.audioListener to the player.listener so it can be accessible on the sphere script child.

function init(){

    player.listener = new THREE.AudioListener();
    console.log(player)
    this.add(player.listener)


}

Next, we initialize tOld, rotX, rotY, rotZ. We will use this later for our random rotations. We get the current seconds from the Date() class and the current milliseconds from Date.now() function.

If the old time (tOld) is still greater than the new milliseconds, do not adjust the rotation settings. This will renew every 5 seconds.

Finally, we rotate the box 3d object.

this.rotateOnAxis(new THREE.Vector3(rotX,rotY,rotZ), deg2rad(.1))

The Sphere script:

function init(){
    console.log('ball', player)

    var i = setInterval( () => {

        if(player.listener === null) return

        player.sound = new THREE.PositionalAudio( player.listener );

        this.add(player.sound)


        const audioLoader = new THREE.AudioLoader();
        audioLoader.load( 'https://cdn.jsdelivr.net/gh/ellenprobst/web-audio-api-with-Threejs@57582104/lib/TheWarOnDrugs.m4a', function( buffer ) {
            player.sound.setBuffer( buffer );
            player.sound.setLoop( false );
            player.sound.setVolume( 1 );
            player.sound.play();
        });
        console.log('loaded sound!')

        if(player.listener !== null){
            clearInterval(i)
        }   

    }, 1000)

}


function stop(){
    player.sound.stop()
}

What the script does:

On init hook, we set player.listener global variable to THREE.PositionalAudio onto player.sound which is gonna be another global variable. We need this so we can stop the audio on stop hook. then load the audio file and set its buffer, loop, volume and finally play it.

Now you can enjoy 8D positional audio with your own mp4 or ogg music files.

Check out the demo!

Test your PHP

jtwebguy — Mon, 26 Sep 2022 04:29:06 +0000

Got these tests from recent interviews and thought it to share with everyone to once in a while measure your PHP skill level.

1. Check if Parentheses, Brackets and Braces Are Balanced. It's better to use Stacks method but use your own if you must.

'{{}}' = Pass '[]}{{}}' = Fail '[[{]{{}}' = Fail '[]()(' = 1x open parenthesis/bracket/curly brace '[]({{{{{{{{{{{{{{{{{}}}}}}}}}})' = Too many open

2. Unique names

$names = unique_names(['Ava', 'Emma', 'Olivia'], ['Olivia', 'Sophia', 'Emma']);

// should print Emma, Olivia, Ava, Sophia function unique_names(array $array1, array $array2) : array { //todo: your code here }

3. Find the roots in any order

For example: findRoots(4, 12, 8); //[-1,-2] or [-2,-1]

root formula

@return array An array of two elements containing roots in any order

function findRoots($a, $b, $c) { //todo: your code here }

4. Fibonacci Sequence

Write a code that will get the Fibonacci sequence number starting from #1 up to n numbers.

should print: 1 1 2 3 5 8 13....n

Post your code in the comments.

JavaScript: Closure, variables & hoisting

jtwebguy — Thu, 22 Sep 2022 12:40:17 +0000

Closure

I will try to get a shot at explaining these three things because these are mostly asked during interviews so hang around a bit.

Closure is, to simply say is the boundary of each function on JavaScript between the two curly braces or "mustaches" for its own variables.

Consider this example.

let name = 'Sally';

function greeting() { let message = 'Hi'; console.log("Greeting:", message + ' '+ name); }

That function will log "Hi Sally" because "name" is a global variable and it is accessible inside the function.

But if you try:

let name = 'Sally';

function greeting() { let message = 'Hi'; } console.log("Greeting:", message + ' '+ name);

It will put out "ReferenceError: message is not defined" error because the message variable is not referenced outside of its enclosing function. No leaking out it is.

You can find more advanced closure explanations [here].(https://www.javascripttutorial.net/javascript-closure/)

Variables

Variables in JavaScript are just like any variables in other language but much more simple. It is declared by using "var", "const" or "let" keywords.

var is the oldest kid in the JS world. It can hold any variable type and can be changed inside a function when declared globally but it cannot be referenced outside its parent function. (See closure above)

const is a variable that cannot be changed throughout your code.

let is block scoped to the function, expression or statement that is used.

for(let i=0; i<10; i++){ console.log(i) } console.log(i)

The variable "i" in the above for loop will console.log fine but outside it will be undefined.

for(var i=0; i<10; i++){ console.log(i) } console.log(i)

Using "var" instead of "let" lets you use "i" outside the loop so it has some uses.

Hoisting

MDN says:
JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. Hoisting allows functions to be safely used in code before they are declared.

console.log(i); //undefined var i=0

Considering the code above, log will output undefined because the variable was hoisted up prior to execution.

console.log(i); //ReferenceError: can't access lexical declaration 'i' before initialization let i=0

console.log(i); //ReferenceError: can't access lexical declaration 'i' before initialization const i=0

Hoisting does not work for const or let keywords so keep that in mind.

That's it for now folks! Happy coding.

Can old dogs learn new tricks?

jtwebguy — Wed, 21 Sep 2022 13:02:47 +0000

Back then, the web universe was very simple. Just a bunch of tools here and there and jQuery was the new black and it was a mess. I was coding in Notepad++ the entire 9 years! WordPress was dominating the blogger sphere and it turned into a swiss-army knife of some sort and now turning into a big pile of cow dung.

Today there's a dizzying array of IDEs, Frameworks and everything coder boys want to get their hands into. SPAs are white hot and JS frameworks are popping up like mushrooms.

To be honest I let myself cruise along. Happy go lucky. I was earning a decent amount for me and my kids so I was flipping WP sites without ever touching Angular or React and I am paying the price. Competitiveness was thrown out the window.

I'm turning 39 next month and boy I feel old. I've been in the Web Dev business for almost 14 years to date. Started as a junior PHP and now tinkering with these fancy JavaScript toys. I've successfully rebuilt a site from AngularJS to Angular 11 (that's not a very pleasant experience) and I'm now playing around with react and hopefully finish up my craiglist-esque website.

I need to re-learn JavaScript fast. Yes, I can cough up a decent JS code but it's not enough. Questions like "What is the event loop" or "What is shadow DOM" are most likely to be asked during interviews. Like seriously there are those now?

With luck I found frontendinterviewhandbook.com and trying to get eloquent enough with JS and teach this old dog some new tricks.