Dev Depot: Scratchpad

Stephen Yagielowicz

A new interactive tool for testing HTML and CSS coding in real time using a live preview window is handy, but the big story may be the technology that it is built upon.

For those seeking to learn how to code a website, the process of writing a snippet and uploading a page to a development site, refreshing a browser and checking your work can be tedious and time consuming.

A scalable real-time backend for web applications, Firebase is designed to quickly build and deploy applications without the hassle of managing servers.

Of course, a range of solutions is available to help ease these tasks.

Scratchpad (www.scratchpad.io) is a simple online tool consisting of two basic panes: one that that depicts editable HTML and CSS code — and another window that renders the results instantly. A full-screen view can be toggled via a keyboard shortcut, while the custom short code URL allows design changes to be shared, including real-time updates.

According to its publisher, Nathan Bashaw, a San Francisco based web designer and code hacker, Scratchpad was developed to make it easier for beginners to learn HTML and CSS. It is also a supplement to a book he is writing called Enough To Be Dangerous — a step-by-step student’s guide to coding web applications.

Whatever Bashaw’s motivation for creating Scratchpad, it is an interesting and useful tool, especially for student coders needing instant feedback.

What is also interesting is the framework it was built upon.

A scalable real-time backend for web applications, Firebase is designed to quickly build and deploy applications without the hassle of managing servers.

“Real-time is hard. Firebase makes it the default,” states the publisher’s website. “Firebase apps respond automatically to data changes as they occur, bringing a whole new level of interactivity to your users.”

According to the company, data stored in Firebase is directly accessible from within JavaScript on the client, allowing users to build dynamic, data-driven websites without running their own databases or web servers. Firebase also plays nicely with other existing backend platforms too, saving development time.

“Firebase lets you create fully interactive apps with just HTML and JavaScript. No servers or server code required,” the site adds. “With Firebase you can simplify your code, focus on the problem you’re solving, and get things done fast.”

Related: