Where to publish code when asking a question?



  • It would be nice, when asking a question, to provide a link to an online resource showing the working code - so that the who is helping us to build the app can experiment on a live system.

    Is there a preferred place where uploading an app is relatively easy (or documented)?

    As an analogy, I would post JS code to JSFiddle (but Vue components require building so it does not work there), Python to repl.it or regex to regex101.com.



  • @wpq github has private repositories and private organisations. The colaborator could clone your repo, build it yourself, debug, work and then just make a commit or pull request depending on your workflow.



  • @qyloxe : Sorry, I was not clear with my question.

    I use GitHub and GitLab extensively so pushing my code there is of course a possibility. It requires however for someone to clone it in order to have a look at what works and what not.

    I was rather thinking about online systems where one can just click into and make the tests there, for their comfort.

    If providing links to Git[Hub|Lab] repos is fine then great, this is certainly an easy path. To give an analogy, when posting a question to StackOverflow, one has the opportunity to either provide a block of code or, for HTML/CSS/JS questions, use the built in “code runner” which shows actual code running, and which can be cloned to an answer.



  • @wpq yeah, I admit I still do not understand your use case 🙂 anyway, in case of “running shared code” you can also check those nice web IDEs like:

    https://jsfiddle.net/

    there is excellent codepen:

    https://codepen.io/

    If you mean something more like online collaboration, then there is such an early option in vsc:

    https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack

    Well, it could be more helpful, if you would just describe in bullet points what is your preferred/imagined/dreamed workflow, who does what, who has access to where etc. There are tons of possibile solutions.



  • @qyloxe

    I use both JSFiddle and CodePen but these are good for plain JS only (and HTML, and CSS).

    Say I want to ask a question about Vue, if I do not use components I can point to one of these online “code runners”: for instance https://jsfiddle.net/WoJWoJ/bgjq0d8o/1/
    This allows everyone to directly test what works and what does not.

    But what about Vue code which uses components? This won’t work there because components need to be compiled first (via webpack).

    My question was whether there are platforms such as these ones where I could push my Quasar (and generally speaking - Vue components) code to make it easier for someone to see the working code.



  • @wpq there’s codesandbox, gitpod.io etc… You should explore quasar docs more, the examples there can be opened in a codepen if you click the links in the cards.



  • @metalsadman If I am not mistaken, the Codepen examples are only for plain Vue elements (buttons, …) and not for Vue components.

    All the ones I saw are ran via

    new Vue({
      el: '#q-app'
    })
    

    Can you please point me to an example in the docs where Vue components are used?



  • @wpq hmmm, Quasar docs always worked with online sandbox. For example buttons:

    https://quasar.dev/vue-components/button

    Just click here:

    cbe64e92-258d-47d7-98de-151454f681db-image.png

    And you will go here:

    https://codepen.io/pen/?&editable=true&editors=101=https%3A%2F%2Fquasar.dev%2Fvue-components%2Fbutton

    And see that:

    93212c84-3141-4299-90ed-c58f5f72ceea-image.png

    Works great…



  • @qyloxe I understand that - I am referring to Vue components (which are usually part of a larger app).

    Can you please show me how to run the following component in these online editors?

    <template>
    <div>
      <q-btn>hello</q-btn>
      <div class="hello">world</div>
    </div>
    </template>
    
    <script>
    export default {
        name: "HelloWorld"
    }
    </script>
    
    <style scoped>
    .hello {
      background-color: red;
    }
    </style>
    


  • @wpq check Vue docs too. Seem like you only know how to write sfc, and like I said explore. in the docs click on the tools and fork the quasar codesandbox, there you can write sfc Vue files.
    https://codesandbox.io/s/github/quasarframework/quasar-codesandbox



  • @wpq you didn’t wrote about your expected workflow, yet.

    Such components are possible to run in exact or similar way in many web IDEs. Start here:

    https://quasar.dev/start/playground#Codesandbox-Template

    BUT if this is a best or preferred way of BUILDING apps or TESTING apps or CHECKING app I don’t know, because you still didn’t wrote WHY and WHAT do you want to achieve (and not, editing single component in browser is not a fiinal goal - it is just one of many ways to achieve a bigger goal) ?



  • @metalsadman @qyloxe Thanks! the links to the sandboxes are very useful. I will give that a try. Thanks for bearing with a beginner like me 🙂


Log in to reply