Code Monkey home page Code Monkey logo

grecha.js's Introduction

Grecha.js

KashaHard

Simple Front-End JavaScript Framework. Originally designed for emoteJAM. The name basically means buckwheat in russian.

Quick Start

https://tsoding.github.io/grecha.js/example.html

<!DOCTYPE html>
<html>
  <head><title>Grecha.js</title></head>
  <body>
    <div id="entry"></div>
    <script src="./grecha.js"></script>
    <script>
      const kasha = img("Kasha.png");
      const kashaHard = img("KashaHard.gif");

      let count = 0;
      let hard = false;
      const r = router({
        "/": () => div(
          h1("Grecha.js"),
          div(a("Foo").att$("href", "#/foo")),
          div(a("Bar").att$("href", "#/bar")),
          div("Counter: "+count),
          div(hard ? kashaHard : kasha).onclick$(function () {
            count += 1;
            hard = !hard
            r.refresh();
          }),
        ),
        "/foo": () => div(
          h1("Foo"),
          p(LOREM),
          div(a("Home").att$("href", "#")),
        ),
        "/bar": () => div(
          h1("Bar"),
          p(LOREM),
          div(a("Home").att$("href", "#"))
        )
      });
      entry.appendChild(r);
    </script>
  </body>
</html>

grecha.js's People

Contributors

rexim avatar djsouls avatar flowstate247 avatar

Stargazers

Carmartdev avatar Lucas Schwalm Silva avatar Gustavo Joaquin avatar  avatar Baiju Dodhia avatar Matteu avatar Cat125 avatar Baptiste-Pasquier avatar Khalil Mouawad avatar  avatar Richard Hosler avatar Arthur Cloche avatar mark avatar  avatar Sebastian Korotkiewicz avatar raaed avatar Pozeidoon avatar Johan Xie avatar Matthew Phelps avatar Tiziozero avatar Duncan Britt avatar Dmitriy Katkov avatar  avatar Gal Zafar avatar Davide Galilei avatar Devin Isaac avatar  avatar Paco Pascal avatar hellboy avatar  avatar Mohamed Atef avatar  avatar Elchin Orujov avatar Sami avatar  avatar Kayode Adechinan avatar Mateo Maccarone avatar Mikhail Shmakov avatar clodo avatar Imaginary Stargazer avatar Kieran Wood avatar gringo.dev avatar ryan martin avatar Leonid Kapitonov avatar  avatar Arnab Animesh Das avatar Hadjammar Hamza Zakaria avatar Artem1I9a avatar Ted Vu avatar FooVoo avatar Terry Funggg avatar Surendar Yama avatar Price Smith avatar Alexander Grube avatar andy avatar Guilhermo Pazuch avatar Fahrezi Adha avatar Paul Prünster avatar naaih avatar IchHabeKeineNamen avatar Matthew Purdon avatar Mikhail Serebryakov avatar berat avatar Paolo Roth avatar ALY avatar Alexander Leschanz avatar Krzysztof Łojewski avatar Farsab B avatar Aditya Chaurasia avatar Lev avatar nikeedev avatar  avatar Charles Banas avatar Oktfolio avatar  avatar SpectCOW avatar Pavel Ermakov avatar Kisura W.S.P avatar nrfjr avatar Sanjai Kumar avatar mustardfrog avatar Huang, Po-Hsuan avatar wij avatar Andrew Maguire avatar  avatar Eduardo Hinojosa (Frost) avatar Jonas Sjöberg avatar  avatar  avatar  avatar Martin avatar  avatar Thiago Lopes avatar Paulo Granthon avatar Ravi Lamichhane avatar Timur Buslov avatar  avatar  avatar Ananias Chorozoglou avatar Anton Reunov avatar

Watchers

Avindra Goolcharan avatar  avatar James Cloos avatar Andrew R avatar  avatar Mikhail Serebryakov avatar

grecha.js's Issues

Improve the syncHash() function in grecha.js

The code can be improved by using the replaceChildren method, which is designed for exactly this kind of scenario—replacing all child nodes of an element with a new set of nodes. Here's how the code can be modified:

Replace the while loop with:

result.replaceChildren(routes[hashLocation]());

This single line replaces all child nodes of the result element with the content generated by routes[hashLocation](). This is more concise and achieves the same result as the previous while loop and appendChild combination. It's generally a cleaner and more modern way of updating the content of an element.

Fragment Nodes

Fragment Nodes are the best way to get out of div hell, I'm willing to element.

I'm thinking just function frag(...children)?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.