4

I asked a question, and it was closed with the following reason.

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example.

I don't understand how to do this. Can you please give me some examples?

Return to FAQ index

1
  • Related and helpful: sscce.org
    – DavidG
    Commented Jul 14, 2017 at 16:22

1 Answer 1

15

The FAQ should make it fairly clear what a minimal, complete, verifiable example is

  • Minimal

    means remove any code/html/css that is not relevant to the issue.

  • Complete

    post all the relevant code and any other information needed to reproduce the issue. Is it only a specific browser? Specific Machines? OS Versions?

  • Verifiable

    verify your example with the info you supplied actually reproduces the problem.

Example [Bad] Questions:

  • Linking to a fiddle only: ** [BAD] **!

    My program doesn't work. Why?

    Here's a fiddle

    You're required to put the code in the question itself. Use a snippet.

  • Linking to some offsite place: ** [BAD] **!

    My program doesn't work, why?

    See my program here: https://greggman.github.io/foobar/index.html

    You're required to put the code in the question itself. You should also mention what you tried.

  • Not making a Minimal example: ** [BAD] **!

    My program doesn't work, here's the code

    const foo = 123;
    const bar = 456;
    
    ...300 more lines of code...
    

    300 lines of code is probably not a minimal example.

  • Using a giant dataURL: ** [BAD] **!

    My program doesn't work,

    ...
    img.src = "data:image/png;base64,iVBORw0K... 20k of data ...
    

    If you need an image consider using a canvas to create a small image. If you have to use an image to show the issue make a small image like 8x8 pixels, run it through pngcrush to remove all unneeded data. If you need a big image upload your image to imgur and reference it from there. Be sure to use an https URL and set img.crossOrigin = "anonymous"

  • Using giant data of any kind: ** [BAD] **!

    My program trying to draw 1000 billboards doesn't work,

    var vertices = [
      0.12324323493434, 0.123245299999, 120.32342535, 
      0.4323493434, 0.23245233223, -930.32342788, 
      ...4000... more vertices ..
    

    Make a minimal example. Do you need 1000 billboards to show the issue or can you show the issue with just 1, 2, or 3 billboards? Use as little data as needed to show the issue. Truncate the data, 0.12 vs 0.12394393958348 etc..

  • Including lots of unneeded HTML or CSS: ** [BAD] **!

    My program doesn't work, Why?

    <html>
      <head>
        <title>My program</title>
        <style>
        ...10-100 lines of CSS...
        </style>
    
    ...etc...
    

    <html>, <head>, <title> are generally not needed. They certainly are not needed in a snippet. Also unless your question is about CSS specifically don't waste space with a huge amount of CSS irrelevant to reproducing your issue. Again, make a minimal example.

  • Linking to resources likely to disappear: ** [BAD] **!

    My program doesn't work, Why?

    <script src="https://dl.dropbox.com/s/hhkulq8sgj8lm12/shared.js?dl=0"></script>
    <script src="https://myschool.edu/myuserdir/jquery.min.js"></script>
    <script>
    
      ...
    

    Stack Overflow is not meant for fixing your personal bugs. It's meant for sharing solutions. The moment you take down your dropbox or you update your script on your server the code in your question will no longer work and the question will become irrelevant.

    Instead if it's a common library link to a CDN. Ideally a versioned CDN. Example here are links to specific versions of Jquery as well as many other libraries.

    As for the link to your personal server or company server, copy that code into the question. Just make sure you pare it down to the minimal number of functions needed to reproduce the error. In other words if you're using a library with 100 functions but you only need 3 of those functions to get your example to run then only put those 3 functions in your question

[Bad] Example

Why does my cube spin a bunch when I move the speed slider?

let speed = 1;

// Setup
const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#canvas")});

// Make and setup a camera.
const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000);
camera.position.z = 400;

// Make a scene
const scene = new THREE.Scene();

// Make a cube.
const geometry = new THREE.BoxGeometry(200, 200, 200);

// Make a material
const material = new THREE.MeshPhongMaterial({
  ambient: 0x555555,
  color: 0x555555,
  specular: 0xffffff,
  shininess: 50,
  shading: THREE.SmoothShading
});

// Create a mesh based on the geometry and material
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Add 2 lights.
const light1 = new THREE.PointLight(0xff0040, 2, 0);
light1.position.set(200, 100, 300);
scene.add(light1);

const light2 = new THREE.PointLight(0x0040ff, 2, 0);
light2.position.set(-200, 100, 300);
scene.add(light2);

function resize() {
  var width = renderer.domElement.clientWidth;
  var height = renderer.domElement.clientHeight;
  if (renderer.domElement.width !== width || renderer.domElement.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

function animate(time) {
  time *= .001;
  
  resize();
  mesh.rotation.x = time * speed;
  mesh.rotation.y = time * speed * .5;

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

document.querySelector("#speed").addEventListener('input', e => {
  speed = e.target.value / 100;
});
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: 15px;
  color: red;
  background-color: white;
}
.content {
  position: relative;
  width: 100%;
  height: 100%;
}
canvas {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}
h1 {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  text-align: center;
  color: black;
  z-index: 2;
  text-shadow: 
     1px 1px 0px white, 
     -1px 1px 0px white, 
     1px -1px 0px white, 
     -1px -1px 0px white;
}
#ui {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: sans-serif;
  font-size: 20px;
  display: block;
  line-height: 1.5em;
}
<html>
  <head>
    <title>My example</title>
    <script src="https://greggman.github.io/doodles/js/three.min.js"></script>
  </head>
  <body>
    <h1>My example program</h1>
    <div class="content">
      <canvas id="canvas"></canvas>
      <div id="ui">
        <div>speed: <input id="speed" type="range" min="0" max="200" value="20" /></div>
      </div>
    </div>
  </body>
</html>

Problems with the above example:

  • It's including a script from some random location instead of a CDN so it's likely not to work once the script disappears or is updated.
  • It's got tons of un-needed HTML
  • It's got tons of un-needed CSS
  • It's got plenty of code unrelated to the issue

Better example

Why does my cube spin a bunch when I move the speed slider?

let speed = 1;

// Setup
const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#canvas")});

// Make and setup a camera.
const camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
camera.position.z = 400;

// Make a scene
const scene = new THREE.Scene();

// Make a cube.
const geometry = new THREE.BoxGeometry(200, 200, 200);

// Make a material
const material = new THREE.MeshBasicMaterial({
  wireframe: true,
  color: 0xFF0000,
});

// Create a mesh based on the geometry and material
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

function animate(time) {
  time *= .001;
  
  mesh.rotation.x = time * speed;
  mesh.rotation.y = time * speed * .5;

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

document.querySelector("#speed").addEventListener('input', e => {
  speed = e.target.value / 100;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
<canvas id="canvas"></canvas>
<div>speed: <input id="speed" type="range" min="0" max="200" value="20" />

Why is this version better?

  • It's using a CDN for the library which is unlikely to disappear
  • The irrelevant HTML has been removed
  • The irrelevant CSS has been removed
  • Being able to resize the canvas was not important so that code has been removed.
  • Using a simpler material means less parameters are needed and no lights had to be setup so more code irrelevant to the issue has been removed.

You must log in to answer this question.