1/31/2024 0 Comments Runjs license key![]() code-highlight.js CSS Syntax highlighting additions.prism.js Syntax highlighting, described in section 4.2.editor.js Code editor, described in section 4.selection.js Adds selectionStart, selectionEnd and setSelectionRange on HTMLPreElement instances.global.js Handles interaction with the Github API, authentication and some more globally required functionality.utopia.js Library with various helper functions.Much more to store their data than a newcomer like Dabblet. Inspires more confidence, as users generally trust an established web service like Github Another positive side effect of this architecture is that it This results in improved scalability and minimal costs, since serving static files is not as resource intensive asĭatabase transactions or executing server-side code. Github account and their documents are saved as Github Gists with a specific structure. ![]() Most of the time, the server just serves static files, since almost all the application logic is client-side.įor storage and authentication, it uses the Github API, with all requests to it being Github ( ) is a popular code sharing website that offers free git repositoryĭabblet’s architecture is unique in the sense that it has no database of its own and a very minimal backend. The tabs at the top right part of the screen can be used to alternate between authoring CSS, HTML and JavaScript, all at once, or a full view of the result. This layout can change through the settings menu. JavaScript is executed when a dabblet loads, when the user presses the “Run JS” button (only visible in the JavaScript tab) or uses the keyboard combination (Ctrl + Enter or Cmd + Enter). The only exception is JavaScript, since in many cases, it would be annoying to execute it on every keystroke and might even lock up the browser. The code is written in the bottom half and the visual result can immediately be seen in the top half part of the screen. It offers a smoother user experience than its competitors and attempts to bridge the gap between the code and its visual result with its previewers.īelow is a screenshot of Dabblet’s initial screen:.This was originally done for cost-effectiveness and stability but it proved to have several advantages (and also imposed a few limitations) Its backend architecture was an experiment in using a third-party API (Github Gist) as a main data storage.While similar applications existed before Dabblet, Dabblet offered a few significant competitive advantages that enabled it to take a cut of the pie and gain a loyal following of a couple thousand visitors per day. of Informatics & Computer Science, Athens University of Economics & Business Introductionĭabblet is a web application that lets users quickly prototype HTML, CSS and JavaScript, save the result online and share it with others. Degree in Computer Science Supervised by Vasilis VassalosĪssociate professor, Athens University of Economics & Business Of client-side web development by Michailia Verouįor the partial fulfillment of B.Sc. Dabblet: A visual IDE for rapid prototyping of client-side web development Dabblet A visual IDE for rapid prototyping
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |