JasmineDesign

At JasmineDesign we support a wide range of Languages in our daily activities on both Front End and Back End coding.

JasmineDesign always uses version control in our work. This ranges from the three main sources GitHub, Visual Studio Team Services & BitBucket, along with more private repositories in a major Cloud vendor. This gives us experience of the current solutions available today.

JasmineDesign relies on Visual Studio Code (VS Code) & Visual Studio for most of our code editing needs but we are also a big fan of online editors and environments like github.dev, vscode.dev and GitHub Codespaces as well.

JasmineDesign is in the process of recording how we work to allow us to share more information with our White Label customers. We plan to share our progress with documentation in the coming months.

We are also going to share the insights into how we have built up some of our Services & Brands that we offer today and how we solved the problems along the way in building them.

So what is:

Front End

• HTML
• CSS
  • Sass
• JavaScript
  • TypeScript

Front End development is responsible for the coding that makes up the visual frontage of a website or web app, the part your customer sees and interacts with.

Back End

• Asp.Net
• Node.js
• Go
• PHP
• Python

Back End development applies to the server side workings behind the visual customer interface (Front End). The working parts are for example: customer logins, forms, orders and payments.

In-Browser / Online Editors

One of the things I really like about Web Development is, that with nothing more than an idea and a little understanding of the core web technologies you can very quickly see your idea come to life within the browser.

There has been some great innovations of in-browser coding editors and environments that are coming onto the market or had major feature updates over the last year.

Which means you can take that quick idea in the browser to a whole new level with some of the tools available today, with nothing to install or learn how to configure, you can just start coding and publish or store for the future.

These tools fall into different groups, but the lines can be a little merged with some products. Some only offer a single HTML page with supporting CSS and JS but others offer a more full project feel, which gives you many HTML pages with supporting files. Some of these tools are free to use while others have monthly or yearly fees.

Some of the tools available are:

• GitHub Codespace - Start coding instantly with Codespaces.
• Codesandbox - Instant cloud development.
• StackBlitz - The online Integrated Development Environment (IDE) for web applications which is powered by Visual Studio Code. Aimed at JavaScript, Angular & React.
• CodePen - Front end web development in the browser.
• Replit - Is a powerful and simple online compiler, IDE, interpreter, and REPL. Code, compile, and run code in 30+ programming languages.
• Gitpod - Isolated cloud development environments with your favourite editor.
• Glitch - Is the friendly community where you'll build the app of your dreams.
• Code-server - VS Code in the browser by Coder (Self hosted).
• JSFiddle - Online Code Editor.
• JS Bin - Is an open source collaborative web development debugging tool.

Some of the above environments also offer the ability to connect from a locally installed editor. This is often known as remote development.

Cloud Development platforms - Self Hosted

• Sandpack - Sandpack 2.0 which includes a Nodebox—a fast Node.js runtime that allows you to run server-side code in any browser that can be embedded within your web page.
• Coder - Self-hosted enterprise dev environments.
• Amazon CodeCatalyst - Quickly build and deliver apps at scale on AWS.
• Devpod - DevPod is infrastructure-independent and client-only, which makes it incredibly easy to get started with.
• Daytona - Daytona is the enterprise-grade Codespaces alternative for managing self-hosted, secure and standardized development environments.

Standardizing Container Dev environments

• Development Container - Used within VSCode and GitHub Codespaces to define code containerized development environments.
• Devfile - An open standard defining containerized development environments.
• WebContainers - Dev environments in your web app by StackBlitz.

CSS Playgrounds

• Dabblet - Is an interactive playground for quickly testing snippets of CSS and HTML code.
• SassMeister - The sassiest way to play with Sass, Compass, & LibSass!

Code Language Playgrounds

Many of the Code Language sites offer a live editor / playground in which you can try out a language features and see the results live.

• TypeScript Playground
• Babel REPL
• C# Learn languages

Up in the Clouds

AWS

AWS offers Cloud9 in which you pay for the Virtual Machine (VM) to run the editor on. The VM costs are only for the time which you keep the VM running along with storage costs for the VM image and files.

Azure

Microsoft Azure offer a number of features in this area. Firstly the App Service Editor which was formerly known as Visual Studio Online (Monaco). The tool provides a web-based editor for Azure Web Apps (previously Azure Web Sites). This allows you to make quick edits to your sites or try out a new idea without having to open your desktop IDE.

Azure Web Apps uses an open source project called Kudu to deploy from locations with sources like GitHub but it also includes a number of tools you can use from your browser for troubleshooting, analysis and management of your website.

Kudu also has a console for Azure. It's not so much a secret now, as it's a feature but before you had get to it using a URL like https://YOURSITENAME.scm.azurewebsites.net/debugconsole or from the Kudu site but now the Console is now just in the portal as an icon.

Azure Cloud Shell shell.azure.com lets you connect to Azure using an authenticated, browser-based shell experience that's hosted in the cloud and accessible from virtually anywhere with internet access.

This provides a modern command-line experience in which you can chose your preferred shell Bash or you can opt for PowerShell.

One of the very interesting things for me, is the Azure Cloud Shell offers integration to other experiences like from inside an Azure Account Add-in in Visual Studio Code or from the Microsoft Docs pages (Try out Azure CLI 2.0) to name just a couple, I hope we will see more of the connected approach going forward.

The Cloud Shell now offers an graphical editor embedded directly in Azure Cloud Shell based on Monaco which is great as its one less thing to learn about and provides a great working experience.

Core JavaScript Editors

These core JavaScript editors power lots of the above products and a great deal of the in-browser editing solutions available across the web today. Thank you to every one who has made these products available.

• Code Mirror - is a versatile text editor implemented in JavaScript for the browser. It is an open-source project shared under an MIT license by Marijn Haverbeke - marijnhaverbeke.nl.
• Monaco Editor - The Monaco Editor is the code editor that powers VS Code and many more Microsoft online editing experiences it is an open-source project shared under an MIT license by Microsoft.
• Ace - Ace is an embeddable code editor written in JavaScript. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project. It is an open-source project shared under an a BSD License.

This page was last updated on 7 October 2024.