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
Stephen James
@sjames1958gm
You have to use the setTimeout so the remove takes place and is "rendered"
Rohit Yadav
@rohyadav
thanks @sjames1958gm yes this is what i want. thank you :-)
dimtabu
@taburetkin

who can say what the difference between while and if in this example?
the very well known library uses while approach

if (!silent) {
  while (this._pending) {
    options = this._pending;
    this._pending = false;
    this.trigger('change', this, options);
  }
}

vs

if (!silent) {
  if (this._pending) {
    options = this._pending;
    this._pending = false;
    this.trigger('change', this, options);
  }
}

:)

Stephen James
@sjames1958gm
The if case will on run once. What while case can loop over and over assuming something happens in this.trigger that cause this._pending to be set true again. The while case is using a technique called polling.
Julian Gonggrijp
@jgonggrijp
@taburetkin @sjames1958gm The while is there because this.trigger emits an event that is handled sync and that may cause this.set to run again before the end of the loop body. It is not exactly polling, but waiting until a cascade of changes has settled down.
TheColdPot
@TheColdPot

I want ask a question
When I type these code in the babel repl

export default 1

The output is

exports.__esModule = true;
exports.default = void 0;
var _default = name;
exports.default = _default

Why babel will add exports.default = void 0, let the value undefined? The value will declared right down. Also, in JS object, if key were not defined, it will return undefined instead an Error.

Julian Gonggrijp
@jgonggrijp
@TheColdPot Surprising indeed. It doesn't even define name, does it? Out of curiosity, does it make any difference if you add a semicolon to the end of your export statement?
MyriamHetchr
@MyriamHetchr
Hey guys! My startup is doing a quick survey on the most popular tools that software engineers use. I'd love it if you could take 30 seconds to fill it out and it would help me out so much with my research. Thanks! https://airtable.com/shraWROPeduwuCFJy
TheColdPot
@TheColdPot
May I ask how to create a cross-module variable?
(Env: Node.js, webpack, typescript, React, electron)
x2ero
@dany:chat.pforzelona.club
[m]
if you split your modules in various files, you habe to export your vars, and import them again in your main js file
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: