Writing Code at JasmineDesign
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 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.
So what is:
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 development applies to the serverside 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 groups but the lines can be a little merge in some products, Some only offer a single page HTML page with supporting CSS and JS but other offer a more full project feel, which gives you many HTML pages with supporting files. Some of these tools are free to use and others have monthly or yearly fees.
Some of the tools available are:
- Codepen - Front end web development in the browser.
- StackBlitz - The online Integrated Development Environment (IDE) for web applications which is powered by Visual Studio Code. Aimed at JavaScipt, Angular & React.
- JsFiddle - Online Code Editor.
- Glitch - Is the friendly community where you'll build the app of your dreams.
- Dabblet - Is an interactive playground for quickly testing snippets of CSS and HTML code.
- SassMeister - The sassiest way to play with Sass, Compass, & LibSass!
- Codesandbox - Is a online Code Editor tailored for Web Application Development.
- repl.it - Is a powerful and simple online compiler, IDE, interpreter, and REPL. Code, compile, and run code in 30+ programming languages.
- Coder - Cloud based IDE built on top of the Google Cloud Platform.
- JS Bin - Is an open source collaborative web development debugging tool.
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.
Up in the Clouds
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.
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 Addin in Visual Studio Code or from the Microsoft Docs pages (Try out Azure CLI 2.0) just to name just a couple, I hope we 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.
- 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.