Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Dec 21 2018 17:11
    @MadLittleMods banned @OmarAlmaqtri
  • Jun 05 2018 23:13
    @MadLittleMods banned @LWSS
  • May 25 2018 16:50
    @MadLittleMods banned @TheRedstoneTaco
TheColdPot
@TheColdPot
Hmm, I know export, but if I have to change these variable? I am using a JSON file for variables currently, but I am finding a new way due to I am afriad of its(Module fs) speed of open a file
x2ero
@dany:chat.pforzelona.club
[m]
in JS, everytime your script runs, the imports are being read. so, if you change your file, it does not matter, the change will be visibile instantly.
the file will be read anyways
TheColdPot
@TheColdPot
okay. thanks for resolving my problem ✨🎉
Sammy
@SamBreaksThings
Hello folks, I've got a general (silly?) question. Let's say I have functionA and functionB like below. I'd like to know if there is a better way to do the conditional operator in functionB? Thanks.
functionA( flag? ) {
  doSomething();
} 

functionB( requiredArgs, flag? ) {
  flag ? functionA(flag) : functionA();
}
x2ero
@dany:chat.pforzelona.club
[m]
forget functionA and functionB, test for your "flag" Argument in doSomething() ;
x2ero
@dany:chat.pforzelona.club
[m]
does on use gatsby these days?
Julian Gonggrijp
@jgonggrijp
@SamBreaksThings Is there a difference between functionA(undefined) and functionA()? Because if there is no difference, you can just do functionA(flag) inside functionB and get the same result.
(The only way there could be a difference is if functionA is checking arguments.length.)
Sammy
@SamBreaksThings
Thanks @dany:chat.pforzelona.club and @jgonggrijp - functionA uses the flag so it means different things if its undefined or not. So if not for the ternary operator in functionB I would have to go with checking the flag value in doSomething inside functionA as x2ero suggests.
Julian Gonggrijp
@jgonggrijp
@SamBreaksThings No, I mean that functionA will not be able to see the difference between passing zero arguments, i.e., functionA(), and explicitly passing undefined as the flag, i.e., functionA(undefined), unless functionA is doing something like if (arguments.length > 0) .... So you can probably do this and get the same result as what you were doing before:
functionA( flag? ) {
  doSomething();
} 

functionB( requiredArgs, flag? ) {
  functionA(flag);
}
rukkho
@rukkho
Hi everyone there! pls never mind me bothering you with the drum machine project following a youtube tutorial. I really do need your assistance pls!
rukkho
@rukkho

bellow is the error message I got on on my drum machine code:

TypeError: Cannot set property 'currentTime' of null
(anonymous function)
C:/Users/hp/Desktop/DRUM-MACHINE/drum-machine/src/App.js:69
66 | let recordingArray = recording.split(" ")
67 | const interval = setInterval(()=>{
68 | const audioTag = document.getElementById(recordingArray[index])

69 | audioTag.currentTime = 0;
| ^ 70 | audioTag.play();
71 | audioTag.volume= volume;
72 | index++

Below is the code for your consideration:

import './App.css';
import React from 'react'

const audioClips =  [
  {
    keyCode: 87,
    keyTrigger: 'W',
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  },
  {
    keyCode: 69,
    keyTrigger: 'E',
    id: 'Heater-3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  },
  {
    keyCode: 65,
    keyTrigger: 'A',
    id: 'Heater-4',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
  },
  {
    keyCode: 83,
    keyTrigger: 'S',
    id: 'Clap',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
  },
  {
    keyCode: 68,
    keyTrigger: 'D',
    id: 'Open-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
  },
  {
    keyCode: 90,
    keyTrigger: 'Z',
    id: "Kick-n'-Hat",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
  },
  {
    keyCode: 88,
    keyTrigger: 'X',
    id: 'Kick',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
  },
  {
    keyCode: 67,
    keyTrigger: 'C',
    id: 'Closed-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
  },
];

function App() {
  const [volume, setVolume]= React.useState(1);
  const [recording, setRecording] = React.useState("")
  const playRecording=()=>{
    let index= 0;
    let recordingArray = recording.split(" ")
    const interval = setInterval(()=>{
      const audioTag = document.getElementById(recordingArray[index])
      audioTag.currentTime = 0;
      audioTag.play();
      audioTag.volume= volume;
      index++
    },300) 
    setTimeout(()=> clearInterval(interval), 300 * recordingArray.length-1) 
  }
  return (
    <div className="App bg-info min-vh-100 text-white text-center">
      <div id="drum-machine">
        <h1>Drum Machine</h1>
        {audioClips.map(clip => {
          return <Pad key={clip.id} clip={clip} volume={volume}  setRecording={setRecording} />
        })}
      </div>
      <br />
      <h4>Volume</h4>
      <input 
       type="range"
       onChange={e=>setVolume(e.target.value)}
       step="0.01" 
       value={volume}  
       max= "1" 
       min="0" 
       className="w-50%" 
      />
      <h4>{recording}</h4>
      {recording && (
        <div>
          <button onClick={playRecording} className="btn btn-success">Play</button>
          <button onClick={()=>setRecording("")} className="btn btn-danger">Clear</button>
        </div>
      )}
    </div>
  );
}

function Pad({clip, volume, setRecording}){
  const [active, setActive]= React.useState(false);

 React.useEffect(()=>{
     document.addEventListener( 'keydown', handleKeyPress);
    return ()=>{
      document.removeEventListener( 'keydown', handleKeyPress)
    }
  // eslint-disable-next-line
  },[]) 

  const handleKeyPress= (e)=>{
    console.log(e.keyCode, clip.keyCode)
    if(e.keyCode === clip.keyCode)
    playsound();
  }
  const playsound=()=>{
    const audioTag = document.getElementById(clip.keyTrigger)
    setActive(true);
    setTimeout(()=> {setActive(false)},200)
    audioTag.currentTime = 0;
    audioTag.play();
    audioTag.volume= volume;
    setRecording( pre => pre + clip.keyTrigger + "")
  }
  return(
    <div 
      onClick= {playsound}
      className={`drum-pad btn btn-secondary p-4 m-3 ${active && "btn-warning"}`}>
      <audio className="clip" id={clip.keyTrigger} src={clip.url} />
      {clip.keyTrigger}
    </div>
)
}
export default App;

Hw can I resolve the currentTime property?
The play button is not playing the recorded sounds of the keys

Stephen James
@sjames1958gm
Where are you setting the "id" on the element? For getElementById
nvm I see it now
Stephen James
@sjames1958gm
@rukkho Have you gone into devtools and made sure the id is correct on each <audio> element?
rukkho
@rukkho
@sjames1958gm here is the app intended to play the recording of the sounds:
image.png
when the play button is clicked it is expected to replay the sounds recorded. instead the console throws me this:
rukkho
@rukkho
TypeError: Cannot set property 'currentTime' of null
(anonymous function)
C:/Users/hp/Desktop/DRUM-MACHINE/drum-machine/src/App.js:69
  66 | let recordingArray = recording.split(" ")
  67 | const interval = setInterval(()=>{
  68 |   const audioTag = document.getElementById(recordingArray[index])
> 69 |   audioTag.currentTime =0;
     | ^  70 |   audioTag.play();
  71 |   audioTag.volume= volume;
  72 |   index++
pls any suggestion on what I can do to get out of this!
Stephen James
@sjames1958gm
@rukkho I would console.log recordingArray[index] to verify that is the correct ID.
Also, you can use document.querySelectorAll('audio') and console.log the list to see if the audio elements exist.
The error tells me that the audio element that you are trying to get doesn't exist or there is a mismatch
rukkho
@rukkho
@sjames1958gm, you are definitely correct! There was indeed a mismatch.
rukkho
@rukkho
In the setRecording() in the playsound() did not have the recorded keyTrigger split to match the recordingArray . Trapped in here for days on end. Your insightful comment was my eye opener to this reality - all to your credit. Thanks a million for being there for me @sjames1958gm.
Stephen James
@sjames1958gm
Glad to help. Don’t be shy to put as many console.log statements as you need to infirm our assumptions.
Mahi
@arbitrarymahi
Hello world! can anyone please share some good resources to learn MongoDB with flutter? I used firebase but it's lack of supporting fully search queries is a bummer and I am not sure if they'll ever implement this feature and for that reason alone I want to take my database to mongo. I'll probably still use firebase for authentication. Also please suggest which server should I use with mongo to fetch data. anything better than a node.js server????
Thanks in advance😀
jaygeet
@jaygeet
i have 3 statments in code, how to randomly pick/execute any of them at a time when program is run
Stephen James
@sjames1958gm
Switch on a random variable. Or put them in separate functions and put the functions in an array and randomly access the array
Julian Gonggrijp
@jgonggrijp
I gave some love to the wikipedia page about underscore. https://en.wikipedia.org/wiki/Underscore.js
dimtabu
@taburetkin
nice
Julian Gonggrijp
@jgonggrijp
Thanks
Julian Gonggrijp
@jgonggrijp
Just added Node.js native ESM support to
Underscore! 😱🤩 Please install underscore@preview from NPM and let us know whether your existing setup still works (and whether you can do the import thing)!
jashkenas/underscore#2914
dimtabu
@taburetkin
now there is a reason to think about html-underscore-loader for webpack which will wrap html loader with _.template(html) ))
Julian Gonggrijp
@jgonggrijp
ESM with webpack already worked! But good to think about it anyway!
Bruno Vieira
@BMSVieira
Hey guys
Im working on a new project, take a look: https://github.com/BMSVieira/moovie.js
It's a movie focused HTML5 player, feel free to explorer and try!
rukkho
@rukkho
Hi developers! Please I need help on how I will display the id of any key I click or press. When I click or press Q , 'Heater-1' should be displayed on the screen to describe the key pressed or clicked. pls kindly take your time to check my github repo to see/ suggest what I need to do to achieve this. I have I have been trying this for the past 1 month. I tried to use react useState hooks. I found it hard to manipulate. My github link:https://github.com/rukkho/drum-machine/blob/main/src/App.js
rukkho
@rukkho
Thanks my dear developers for giving me time to think this out! i actually invested more time researching on how react useState hooks actually works and lol, I finally. came up with a solution. please checkout to suggest other ways to get it done. The link::https://github.com/rukkho/drum-machine/blob/main/src/App.js. Thanks guys.
Eric Eastwood
@MadLittleMods
@rukkho Thanks for the follow-up @rukkho :+1:
saurav kumar bhagat
@saurav-bhagat

Hi, I'm trying to write a unit test for a class having some real-time functionality, but unable to do it. Can somebody help regarding what should be done to test the class and what behaviour can be easily tested?

class AccountService{
  client;
  constructor() {
    this.client = new Stomp.Cleint({
      brokerURL: url
    })
  }

  async getData() {
    this.client.onConnect = () => {
      this.client.subscribe('/message', this.callback);
    }
    this.client.onStompError = () => { }

    this.client.activate();
  }
  callback(message) {
    const payload = JSON.parse(message);
    pubsub.publish('accountData', payload.body);
  }
}

I dont want to make a connection with the stomp server, since it is external service.

Eric Eastwood
@MadLittleMods
saurav kumar bhagat
@saurav-bhagat

@MadLittleMods Hi, I tried using sinon to mock the client, but I'm unable to reach the callback method inside client.subscribe( ). There is npm package for mocking stomp client ( https://www.npmjs.com/package/mock-stomp-broker ), but getting issue using that ( rufusraghunath/js-stomp-utils#20 ).

This package will enable me to publish me a message to a particular topic, and mock the client object too.

Eric Eastwood
@MadLittleMods
@saurav-bhagat How are you requiring MockStompBroker? Sounds like an issue with CommonJS vs ES module imports
saurav kumar bhagat
@saurav-bhagat
In a node typescript project, which has es6 enabled.
I'm doing, import MockStompBroker from "mock-stomp-broker" .
I checked the export too.

In a node typescript project, which has es6 enabled.
I'm doing, import MockStompBroker from "mock-stomp-broker" .
I checked the export too.

@MadLittleMods

Eric Eastwood
@MadLittleMods
saurav kumar bhagat
@saurav-bhagat

@saurav-bhagat Maybe this will help you: https://github.com/microsoft/TypeScript/issues/5565#issuecomment-154886345

Okay I'll try this and check, Thanks

C5H8NNaO4
@C5H8NNaO4
Does anybody know how to get Intellisense to show descriptions for parameters with a custom type?
e.g.
/**
 * Description for custom type.
 */
type MyType = string ;
....
class Foo {
     bar (arg: MyType) {}
}
TheColdPot
@TheColdPot

the diffirence beetween TypeScript & JavaScript
(MEME)
JS

const a  = 1
function b(c) {
  return a+c;
}

TS

const a: any  = 1
function b(c: any): any {
  return a+c;
}
// ESLINT ERROR? //

const a: unknown = 1
function b(c: unknown): unknown {
  return a+c;
}
// TS ERROR? //

const a = 1
function b(c) {
  return a+c;
}
// ERROR! //

// @ts-ignore
const a = 1
function b(c) {
  return a+c;
}