DEV Community

loading...
Cover image for LocalPen - DO hackathon submission

LocalPen - DO hackathon submission

Hatem Hosny
・4 min read

This is a part of the series: LocalPen - code pens that run locally!

LocalPen is a powerful frontend coding playground that runs totally on the client and can be hosted on any static file server. Try it now on localpen.io

Now after a long series of posts describing LocalPen, let's actually do the submission, just before the deadline :)

What I built

LocalPen, a powerful frontend coding playground that runs totally on the client and can be hosted on any static file server.

Category Submission:

Random Roulette

App Link

localpen.io

Deploy to DO

Screenshots

The app, showing the editor and result page
Alt Text

Code export
Alt Text

Import screen
Alt Text

Open saved projects
Alt Text

Embedded editor
Alt Text

Embedded code block
Alt Text

Intellisense for imported custom module
Alt Text

Description

Detailed description of the app, with the various features and how to use them are provided in the previous posts of this series.

Link to Source Code

GitHub logo hatemhosny / localpen

Code pens that run locally!

LocalPen

Code pens that run locally!

A powerful frontend coding playground that runs totally on the client and can be hosted on any static file server.

Try it now on localpen.io

TL;DR: Getting started

Deploy to DO

Feature Summary:

  • Monaco editor (the beautiful code editor that powers VS Code)
  • Prettier code formatting
  • Supports many languages (HTML, Markdown, Pug, AsciiDoc, CSS, SCSS, SASS, Less, Stylus, JavaScript, TypeScript, JSX, CoffeeScript and more to come)
  • Emmet tab completion
  • Autoprefixer
  • All code compiling/transpiling occurs on the fly on the client, so works on any static server.
  • Immediate results with no server rounds
  • Conditional loading of modules (only the features used are downloaded)
  • Allows adding external stylesheets and/or scripts
  • Allows importing npm modules that can be referenced directly without a build step (using the great skypack.dev)
  • Allows importing strongly-typed local typescript modules with full code completion and intellisense.
  • Can be embedded in regular web pages
  • Code…

Permissive License

MIT

Background

I was building a visualization library based on D3 using typescript. I wanted to have a code playground for my library on the documentation website. The available options did not totally satisfy my needs/budget.

Later on, I came across Monacode, which is a great project by the way. It inspired me to make the project I needed, and I used it as a starting point (thank you, @lukejacksonn).

That coincided with the announcement of the Digital Ocean Hackathon. It was a strong motive to build something usable and as feature-rich as possible during the available time period.

Overall, it was such a great experience.

How I built it

(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)

I started it using javascript. When the project grew, I moved to typescript. It was a lot safer for significant refactors, which I did more than once during building the app. Such a lovely language. If you have not used typescript, you should! The coding experience is great on VS Code, and hopefully on LocalPen ;)

Being a totally client-side app, adding more features would mean significantly increasing the app size with a significant delay in the initial render. We are talking here about adding transpilers for languages like typescript, pug, scss, etc. Also prettier parser for each language. So I heavily used dynamic imports which allowed to only download the features the user is currently actually using. Whenever the editor language changes, only then its requirements are downloaded. This made it a lot less expensive to add more languages.

When the project started, it seemed too small to need a state management strategy. Then as it grew larger, with more features, specially on loading a saved project instead of the currently loaded one, state started to become inconsistent. I believe it is still an overkill to add redux for such a relatively limited app, but applying principles from redux (like immutability with get and set functions fixed such problems).

I usually use Digital Ocean as the cloud provider, mainly because of the simplicity (not having a thousand option to choose from and a thousand new technology to learn just to deploy your code), in addition to the predictable pricing model (also not having to multiply the number of dollars by the number of minutes in the month to know how much I will pay every time I use a service). I had previous experience using their VMs (droplets). For this project I used the App platform and selected static site hosting, since my app is client-side only. It was actually quite easy to deploy. Code push triggers automatic deployment without having to setup a specific CI/CD workflow. I still use github actions for validating build and tests, but still, deployment was quite easy. Also the one-click deploy option makes it very easy to get started.

However, I have some inquiries. Please let me know in the comments if you have answers. I expect to be notified if the deployment fails because of build failure. That happened once and I was not notified. Is there a setting I need to make. Also, I do not want to add a client-side analytics solution. Is there a way to know from the server the number of requests, geographic distribution, bad requests, etc?

One final thought. Although, the app seems to be feature-rich, most of the features are provided by integrating great open-source projects. It feels like sitting on the shoulder of giants. I feel very grateful for the open-source community.

Additional Resources/Info

At last, it feels great to build apps that you and others actually use. I plan to continue building and adding features/fixes to LocalPen. It would be great to know your opinion, comments, advice, ideas and, even better, contribution.

Thank you

Discussion (0)