r/webdev - Introducing Gooie.io / an app to build apps

Gooie Hero Image

GooieJS lets you craft Progressive Web Applications live from your browser. Your editor lives on the page you are working on, and it’s up to you whether or not to include it in your export. Your editor is the Soul of your Application. Changes made to your Soul are instantly reflected in your application. Since The Documentation is written in Gooie, you can explore its Soul to get an idea of how each page was made.

Every day, we near Death, and another Javascript framework.

— Anonymous

Gooie is not another Javascript Framework(there are only two new functions). Instead, Gooie was made to solve a number of hurdles I encountered in my web-development experience. Since you can learn about Gooie by reading the Docs, I’d like to instead use this space to share my journey and how it relates to my first app.

  1. Problem: Theres so many languages. Finding a stack that works is difficult enough, and too many frameworks complicate things rather than simplifying them. Solution: Write in a single language, to a single page, from a single file.

  2. Problem: Web-Development IDEs are bulky and impersonal. Solution: Gooie is prebuilt with live-reload and your browser’s dev-tools, what more could you need? You can style your editor however you’d like. The code itself is less than 250kb

  3. Problem: Anyone should be able to easily make and host a website. Solution: When you’re finished coding, use your browser’s save-as function and select webpage-complete to save to a single index.html file. The GitHub Repository includes everything you need for a PWA, meaning an application that users can install to their mobile/desktop homescreen. Simply clone the repository, swap in your index.html file, and host on GitHub Pages for free.

  4. Problem: The web needs to be accessable to all. Solution: Gooie compiles into regular HTML / CSS / JS. You should use semantic code practices. If you include your editor in your application, you can set human-readable values that the user can modify to greatly improve accessability, like text-color and font-size.

Gooie is free, open-source, and never stores your data in cookies, servers, or storage.

r/webdev - Introducing Gooie.io / an app to build apps

Light-mode

There are only two new functions:

  1. The tree( 🌲) function lets you create all the elements of your Document Object Model using nested arrays:

"tag#id.class1.class2~onclick::alert()~{text}" 
// <tag id="id" class="class1 class2" onclick="alert()">text</tag>

2. The bark( 🐶) function lets you modify a <style> element in your <head>

bark(["#soul", ["background: black", "color: white"]]);
// <style>#soul{background: black; color: white;}</style>

Tabula Rasa

You can use The Blank Template to quickly paste your application code and test on any machine. You should test on multiple machines to ensure accessability. For fun, try copying the soul code from the Documentation into the blank template.

This is also a great tool for sharing working-code with clients. Simply send your gooie.txt file to your client and have them paste it into the blank-template. They can test it on their machine without any hosting.

Halfmoon

Gooie comes prebuilt with Halfmoon and Font-Awesome icons, but you can use any CSS framework you’d like. Gooie has no CSS styling of its own. Halfmoon is incredible and works beautifully with tree() and bark(). Every component is made with :root CSS variables (theres over 1500), meaning you have complete control of your application’s style using bark(), and there’s tons of utility classes you can use in your tree(). I highly reccomend reading the Halfmoon Documentation and using it in your application, but its up to you.

Thanks for letting me share. This is a learning experience for myself aswell. If anyone has any input or feedback I’d love to hear it. Happy 4/20 everybody 🔥



Source link

Write A Comment