Announcing “Quark” — A Software sketchbook for your projects⚡

After almost an year of hard work, I’m excited to finally announce Quark! You can check it out now over at https://quarkjs.io 🎉

Quark is a general purpose software tool specifically designed to help you create projects written in HTML, CSS and JavaScript with native desktop app like capabilities.

The idea of Quark started when I was pursuing my degree in Engineering and felt a need for a software tool that would help me do things like — plot charts, app prototyping, create dashboards/GUI’s for my personal projects etc. I just needed “some place” to write my code, build small projects or test new ideas. To much of my own surprise, I could not find an easy way to do so. Hence, I decided to create this project.

Simply Said: Quark is an integrated development environment(IDE) and a JavaScript runtime. You write your code in the IDE and press a button to build your project. That’s all! 😮

The IDE automatically takes care of transpiling and bundling your project behind the scenes and emits a single output file which you can “double-click” on to open and run your project. We call these output files, “sketches”.

See the process in action —

As you might have already guessed, Quark is built upon the Electron framework. Your sketches provide you with all the capabilities of full fledged electron apps. The only difference here is that they just weigh a few kilobytes instead of hundreds of megabytes.

We achieve this functionality by using a shared JavaScript runtime for all your sketches. This runtime, in most cases, accounts for almost 99% of the weight of an electron app. This leaves us with the actual application logic, which usually only weighs a few kilobytes.

The only caveat here is that because of this shared runtime, your sketches have a direct dependency on the Quark software itself to provide for the runtime. Hence we call these projects built with Quark “sketches” and not applications.

What this means for you is that you can potentially have hundreds of sketches on your machine providing the functionality as that of full fledged electron apps, while consuming the resources equivalent to only one app!

Quark comes built in with a powerful code-editor. The same code editor that powers the VS Code (monaco-editor). This means you get out of the box support for Intellisense, code completion, “Go to Definition”, reference search and Quick navigation (Cmd+P).

Also the editor supports around 80 different settings that you can configure to customize your editing experience.

Quark comes pre-installed with webpack and babel support, along with their complimentary utilities like webpack-loaders(css-loader, html-loader, raw-loader etc.). This means that you get out of the box support for modern JavaScript, React and TypeScript without even writing a single config file. You can also optionally choose to write a config file and customize the build system to suit your own needs.

We have a built-in npm client so you can install dependencies and packages that you need to develop your application.

A Quark project exists as a single file on your machine. That means all the code that you write and files you create inside the IDE are virtual files with no foot print on your real file system. This is done to make sharing a project as easy as sharing a single file.

Module bundlers are good but they cannot always package your application assets (e.g. images, videos). Well, in that case we also support an archive format. This means that you still share only one single file, to share your entire project.

Behind the scenes, we use electron’s renderer process as the runtime for your sketches. This means, that you have access to all of the Node.js and Electron’s renderer process API’s in your sketch.

Following are some of the sketches built with Quark —

Monitor system resources like CPU/Memory Usage. Built using chart.js and systeminformationlibrary.

A control system for your Arduino projects. Built using node-serialport library.

A split-view and multi-tabbed web browser. To much of my own surprise, this sketch was built just under 200 lines of code !!

If you still don’t get the picture, here are some more ideas and use-cases that you can use Quark for.

There are a ton of awesome features coming soon. One of the main things we want to accomplish is to create an open repository of sketches built with Quark.

Imagine an open library of utility applications like image converter, video converter, To-Do app, sticky-notes app etc. that you can download on your machine at the press of a button, all providing functionality as that of full fledged electron apps while consuming resources as that of only one. This means you can potentially have hundreds of utility applications downloaded on your machine at any given time. This could lead to a massive boost in users productivity.

We’re also rapidly working on open sourcing the core tech behind Quark. Meanwhile, you can contribute to the documentation and website which is already open-sourced on our GitHub repo.

Can’t wait to see what you awesome people on the internet have to say about Quark — feel free to tweet me or DM me on Instagramwith your questions, feedback and ideas. 😄

I’ll leave you now with a few relevant links below. Hope it makes your life a little bit easier, just as it has made mine! 🤞

Source: Medium.com

Powered by NewsAPI.org

Keywords:

QuarkXPress • QuarkXPress • Check It Out! (Canadian TV series) • QuarkXPress • Computer • Programming tool • HTML • Cascading Style Sheets • JavaScript • Desktop computer • Application software • QuarkXPress • Engineering • Application software • Prototype • Graphical user interface • Project management • Quark (kernel) • Integrated development environment • Integrated development environment • JavaScript • Run time (program lifecycle phase) • Source code • Integrated development environment • Integrated development environment • Source-to-source compiler • Product bundling • Computer file • Double-click • Open (system call) • Computer file • Process (computing) • QuarkXPress • Electron • Software framework • Electron • Application software • Kilobyte • Megabyte • JavaScript • Runtime system • Runtime system • Acorn Electron • Kilobyte • Run time (program lifecycle phase) • QuarkXPress • Software • Quark • Application software • Electron • Quark • Monaco • Intelligent code completion • Autocomplete • Batch file • QuarkXPress • Webpack • Babel (film) • Webpack • Cascading Style Sheets • DR-DOS • HTML • DR-DOS • DR-DOS • JavaScript • TypeScript • Configuration file • Configuration file • Build automation • Npm (software) • Web browser • Coupling (computer programming) • Package manager • Application software • Quark (kernel) • Project management • Machine code • Source code • Write (system call) • Computer file • Integrated development environment • Virtual machine • Computer file • Printer (computing) • File system • Project management • Modular programming • Campaign finance in the United States • Software • Archive file • Electron • Rendering (computer graphics) • Process (computing) • Run time (program lifecycle phase) • Node.js • Electron • Rendering (computer graphics) • Process (computing) • Application programming interface • Sketch (drawing) • Quark (kernel) • Computer monitor • System resource • Central processing unit • Computer memory • JavaScript • Control system • Arduino • Library (computing) • Tab (GUI) • Web browser • Get the Picture (game show) • Quark • QuarkXPress • Open Library • Sticky Notes • Mobile app • Electron • Application software • Machine • User (computing) • Productivity improving technologies • Open-source software • Quark (kernel) • Website • Open-source software • GitHub • Internet • Quake Army Knife • Twitter •