DEV Community: shmuelhizmi

I let this AI take over my twitter

shmuelhizmi — Tue, 24 Aug 2021 15:12:42 +0000

have you ever heard about "this person does not exist"? it is a really cool website only design to achieve one complex task - generating photorealistic photos of humans that just do not exist.

you can check it out at thispersondoesnotexist.com , and I can assure you, you will be surprised with how much realistic-looking are the factional characters it manages to produce.

after "this person does not exist" showed up on the internet back in 2019 some new sites started to pop out all over the internet that used the same concept of "this person does not exist" - generating stunning fictional objects, such as humans, cats, art, websites and much more... there is actully a website called "this x does not exist" that contains a list of most of them.

this concept aspired me to use the Twitter API alongside a few more APIs and a couple of hours from my time to transform my personal Twitter account into "this twitter personality does not exist", it is simple, every ten minutes my twitter's name, profile image, banner, and bio information change to present a different character, I went from being myself just this morning to being "Mitsuko Bongo", "Marcellus Prima" or "Carlo Behunin" and the race is still going, if you are interested in checking out the project you can find me on Twitter at @ShmuelHizmi.

here are a few examples -

this twitter personality does not exist 🤥

shmuelhizmi — Mon, 23 Aug 2021 12:34:40 +0000

have you ever heard about "this person does not exist"? it is a really cool website only design to achieve one complex task - generating photorealistic photos of humans that just do not exist.

you can check it out at thispersondoesnotexist.com , and I can assure you, you will be surprised with how realistic this factional person will look.

this concept aspired me to use the Twitter API alongside a few more APIs and a couple of hours from my time to transform my personal Twitter account into "this twitter personality does not exist", it is simple, every one minute my twitter's name, profile image, banner, and bio information change to present a different character, I went from being myself to being "Mitsuko Bongo", "Marcellus Prima" or "Carlo Behunin" and the race is still going, if you are interested in checking out the project you can find me on Twitter at @ShmuelHizmi.

here are a few examples -

Building my own desktop environment for the web, my 10 months journey

shmuelhizmi — Sat, 03 Apr 2021 17:05:48 +0000

Around 9 and a half months ago I started working on a small idea I had, back then I thought to myself what if I could implement a full desktop environment with all the regular features of a desktop environment such as a full window manager and high-level abstractions of concepts like running apps and managing your desktop, but all with the exception of running in your web browser as a web app.

above a screenshot of "web-desktop-environment" in action using the Nord theme and vs-code app

But way ❓

In theory, this may sound unnecessary (at the very least for some people), you could think to yourself, isn't the web much slower than my daily used blazing fast native CPP-based desktop environment?
or, what about support for all of the existing apps that weren't built to run on a web environment? well before I start and explain my solution to both those issue I want to start over and list the Pros I personally see in a web-based desktop environment -

The PROs 🤘

accessible from anywhere - since it exists in the form of a website.
isn't bound to a physical box - you don't must to have a physical PC, you could host your PC from anywhere, sometimes working directly from a public server could be awesome for some developers.
great for low-end computers or servers - small PC boards like the raspberry PIs or low-end servers with virtual CPU/s and no GPU can struggle running a full desktop and dealing with rendering, but running a desktop environment web server? that's no problem.

The flows 👎

now, what about the flows with a web desktop environment?
let's start with the performance issues -
well, the way why address those is by breaking the regular way people have been writing web applications for the last few years, instead of providing to the user with a client app that contains all of the app logic and supporting that logic flow with a rest/socket API to supply the native functionalities like must full-stack web apps do, we instead move all of the logic to the server and only provide the client with instructions of what the server wants him to currently render, this moves out all of the heavy calculation and stuff that relies heavily on multithreading away from the client to into the server and by doing so keeps the web lightweight, fast and eliminate the performance issue with running a complete desktop on the browser.

and what about the backward compatibility issue?
this is the hard one, I am working hard to find a way to enable support for x11 applications to run on the desktop environment but in the meantime and as of today (03.04.21) support for gtk3-apps to run via the broadway backend of gtk3 is already in the main branch and soon to be released to NPM.

above a "screenshot of web-desktop-environment" in action running gnome-mines (a GTK3 app) via the broadway backend

Main features 🌠

Apps

terminal emulator 👩‍💻
visual studio code ✌
file explorer 📁
text editor 📝
media player 🎧
settings/ system info app ⚙
any GTK3 app (30% of apps do crash) 🐾

Desktop

slick-looking desktop 💻
lot's of themes 🎨
complete sync between all instances 👦<->👦

Screenshots 🖼

above a screenshot of "web-desktop-environment" in action using the main (dark) theme

above a screenshot of "web-desktop-environment" in action running in PWA mode

Live demo 🖥

You can visit the live client side demo here https://web-desktop.app/demo , I can promise you that playing a bit with the themes can be quite fun!!

above a screenshot of "web-desktop-environment" in demo mode using the dark transparent theme

Learn more

If you are looking to learn more, install the app or even just wanting to give me a star on GitHub 🙏 here is the link

shmuelhizmi / web-desktop-environment

a web-based cross-platform desktop environment

A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.

What is a Web Desktop Environment

just like any other desktop environment WDE was design to abstract the use of your computer is a visual way but the twist with WDE is that unlike other desktop environments, WDE was designed from the ground up to run on the web, and so the backend for WDE is made as an extensible web-server.

Why?

WDE usecases range from providing a slim interface for your raspberry pi to or any other micro-computer to proving an interface for developing on a remote super computer or inside a Docker container.
wehenever you need to work on a remote/cloud environment WDE can be a great choice. it can simplify and abstruct the way you interact with your server and allow to feel comfortable…

View on GitHub

React For Server Development

shmuelhizmi — Mon, 28 Sep 2020 09:26:10 +0000

As far as I know, I'm the first and only one so far to build a server app that was built completely around the "React JS" library, and in this post, I want to try and convince why you should create your next "Node JS" server using "React JS".

Why 😳

So why would a reasonable man use "React JS" a library that was built specifically for building client-side user interfaces for his server? well even though everybody is using "React JS" for UI, the truth of the matter is that "React JS" can Actually be used for any place where your goal is to build a reactive, component-based tree of data, whether it is an HTML tree or a tree of native UI elements like in "React native", you can even make games using "react-three-fiber", "React JS" really is a great fit for all of those tasks.
In the rest of this post, I want to talk about the places where I found that "React JS" can help you in the process of creating a reactive, component-based tree of data as part of building your "Node JS" server.

HTTP "REACT JS" Servers 🙃

And so when I asked myself the following question:

where can "React JS" be used for creating servers?

My first idea was HTTP servers.
since HTTP servers are usually made from a tree of HTTP routes, and since I was sure that mixing that with reactivity and reusable components can create something awesome (or at least hoped so), I decided to start working on a library for creating HTTP servers using the power of "React JS".

And in a few hours, I was done creating the first version of "@react-fullstack/server-express" a library for creating "React JS" HTTP servers that is based on "Express JS".

But..., it is about 2 months later and I'm still not really sure if "React JS" really was a great fit for HTTP servers. since HTTP servers are still usually extremely static and do not need to get updated frequently, "React JS" a library the is built around the idea of reactivity may still not be a better choice than just using something like "Express JS" on its own.

Back To The Roots - creating LAYOUT in the server using "React JS" 😎

Quick Disclaimer 😅

Before you are leaving guessing I meant server-side rendering in "React JS", I really didn't, I talking about something new, let me explain.

Server-Side Rendering - VS - Client-Side Rendering 🤺

For the last few years, people were needing to choose between two choices when building a website

Server-side rendering - a method that does not expose your business logic to the client but limits your user interaction capabilities and speed.
Client-side rendering - a method that extends your user interaction capabilities, reactivity, and speed but exposes your business logic to the client and also requires you to build a server API for the client to interact with.

But for some people and app, those two options aren't enough, for example, for me while trying to create a project of mine called "web-desktop-environment" both of those options weren't enough, I wanted all my business logic to run on the server but still needed the power, speed, and reactivity of a client-side "React JS" web app.

The solution 😎

"@react-fullstack/fullstack" is the third option, it is a "React JS" framework for building Full-Stack "React JS" applications with the speed and reactivity of a client-side application but without exposing your business logic and requiring you to build a server API like in client-side rendering.

But How 👩‍🏫

The way "@react-fullstack/fullstack" achieve its goal is a technique called "server-side execution", in server-side execution every time the user goes to your site the server creates for him a "user session", the "user session" goal is to tell the client web-app what view layout the user should see, the data the view should contain, and what client events the server what to listen to, and according to a combination of the events fired from the client to the server and the server business logic the "user session" get updated with new views and data from the backend.

What about the client 🤔

In "@react-fullstack/fullstack" all the client really is is a collection of layout views (which are basically "React JS" components) that the client support, for example, the view can support a "login screen" and a "home screen", and so the server will need to tell the client when he needs to render the "login screen" and when to render the "home screen" and lastly what data to pass (props) to them, the way the server can do that is - for example: to listen to a log-in event on the "login screen" and when such an event is fired he will tell the client to show the "home screen" with new data (component props) specific for the user that logged in.

Code Example 👨‍💻

Let's start from the server

Note: this code is an abstract version of the way you really build an application using "@react-fullstack/fullstack" if you're looking for a more true code example you can find it here

// internal query for getting posts data
import { getPosts } from "./internalServerQueries";

// "user session" App
const Session = () => {
    // state hook for user log-in state
    const [isLoggedIn, logIn] = useState(false);
    return isLoggedIn ?
                /*
                    "LoginScreen" is the view the client should render,
                    "header" is some data that got fetched from the server
                    and "onLogIn" in an event the server should listen to
                */
               <LoginScreen header={"hello! please log-in"} onLogIn={() => logIn(true)} /> :
                /*
                    "HomeScreen" is the view the client should render,
                    "posts" is some data that got fetched from the server
                    and "onLogOut" in an event the server should listen to
                */
               <HomeScreen posts={getPosts} onLogOut={() => logIn(false)} />
}
// the main server "App"
const App = () => {
    return <Server>
            {
            // on each "user session" run the Session component
                () => <Session />
            }
            </Server>
}

Final Words

Both "@react-fullstack/fullstack" and "@react-fullstack/server-express" are still in an early stage but if you are interested in trying and creating HTTP servers or Full-Stack application using the "React JS" library you can check them out here

shmuelhizmi / react-fullstack

a set of packages for creating full-stack React applications

React Fullstack

"React Fullstack" is collection of libraries for creating fullstack applications that are based on React!

"React Fullstack" main packages are

Fullstack or npm i @react-fullstack/fullstack
express server npm i @react-fullstack/server-express

View on GitHub

Thanks for reading, if you have any questions or suggestions you can found me on Twitter or LinkedIn.

A web-based desktop environment - two months later

shmuelhizmi — Thu, 24 Sep 2020 17:56:50 +0000

About two months ago I have posted here an article on a project of mine called "web-desktop-environment", if you're interested in the idea of a web-based desktop environment you can read about it here

A web-based desktop environment

shmuelhizmi ・ Jul 17 '20

#node #typescript #react #linux

in this post I'm going to share the progress I have made since I first posted the article

A brief introduction to the project 👩‍🏫

"web-desktop-environment" is a desktop-environment (a visual interface for a computer) that can run in a web browser over a NodeJS server, the advantages of "web-desktop-environment" over a regular desktop-environment is that it is much slimmer and portable compare to a regular desktop.

Use cases

interface for a cloud server (can possibly be used as a replacement for control panel)
interface for small/low power computers like the Raspberry Pi zero
interface for controlling your computer over a long distance

A demo video 📹

A live demo 🖥

There is a live demo (serverless) running here

PWA Screenshot 🎞

This is a screenshot of the app running as a PWA in a detachable windows mode

Upcoming features 🎆

Media Players apps are on their way

Looking to build a full-stack app that pushes the web to its limits yourself?

if so you may be interested in the framework I build and used to build this project, the framework is "@react-fullstack/fullstack" and you can read more about it here

React-Fullstack - A new React framework for building React Full-Stack applications

shmuelhizmi ・ Sep 4 '20

#react #typescript #webdev

shmuelhizmi / react-fullstack

a set of packages for creating full-stack React applications

React Fullstack

"React Fullstack" is collection of libraries for creating fullstack applications that are based on React!

"React Fullstack" main packages are

Fullstack or npm i @react-fullstack/fullstack
express server npm i @react-fullstack/server-express

View on GitHub

All my progress since the first post 🥳

Since the last update, I have made a few new features and improvement

Resizeable windows - you can now resize windows.
Notepad - a notepad app.
PWA - the app can now also run as Progressive Web App.
Detachable windows mode - you can now run the desktop in a detachable windows mode which means that every window will open as a separate native window.
style changes - the app is currently moving thought a big style redo, to give it a more "native os" like style.
big speed improvement from moving the backend from reflow to my own framework "@react-fullstack/fullstack"
custom themes - create your own theme using the settings app

Contribute yourself 🎁

if you like the project and interested in contributing to it yourself - feel free to open a PR thought Github.
Note that contribution does not have to be in the code side of things, contributing to the project README would be awesome!

Checkout the project 🎮

shmuelhizmi / web-desktop-environment

a web-based cross-platform desktop environment

A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.

What is a Web Desktop Environment

Why?

View on GitHub

React-Fullstack - A new React framework for building React Full-Stack applications

shmuelhizmi — Fri, 04 Sep 2020 09:22:47 +0000

react-fullstck is a set of typescript packages for creating truly full-stack applications using only react, in this particular post I'm going to focus on the @react-fullstack/fullstack package which is a framework for creating react-application with their business-logic running on the server (in React).

Server-side executing and not rendering

"react-fullstack" is the exact opposite of server-side-rendering in "react-fullstack" instead of rendering your app in the server and running it in the client you actually render the app in the client ( plus manage user UI logic ) and run it ( manage the app business-logic ) in the server.

for example, user UI interactions will run on the client while logic related stuff like layout changes and data fetching will run on the server

All the benefits of React now in your server :)

using React in your server will make it much less static and much more reactive a lot like the move in the client from JQuery like libraries to web frameworks like React or Vue.

React components will make your code much more reusable plus stuff like the React context API will make your code data flow much more organized. and the most important part of using React in your server - you could use the entire collection of React libraries ( at least the non-dom related part of them :} ) in your server!!!

Speed advantages and limits over regular React apps

"react-fullstack" can even have some speed advantages compare to regular React applications because pages do not need to fetch data using HTTP every load.

the regular data flow goes something like that

user action -> layout-change -> new component data HTTP fetching -> layout-update

now with "react-fullstack" the data flow should look more like that

user client action -> server socket action request -> server tells the client via socket to update itself with new data

in cases where a new data is needed to update the view layout the "react-fullstack" way of updating the layout should be much faster but in places where a layout change occurs with no new data "react-fullstack" can actually be slower

Use cases

I recently moved a project of mine called "web-desktop-environment" to "react-fullstack".

"web-desktop-environment" was a great example of a project that really benefited a lot from using "react-fullstack" since he needs a tight connection between the server and the client and apart from that moving his entire server logic to react components made the server codebase much more user-readable and organized.

shmuelhizmi / react-fullstack

a set of packages for creating full-stack React applications

React Fullstack

"React Fullstack" is collection of libraries for creating fullstack applications that are based on React!

"React Fullstack" main packages are

Fullstack or npm i @react-fullstack/fullstack
express server npm i @react-fullstack/server-express

View on GitHub

Getting started

Getting Started - TypeScript

a "React-Fullstack" app is usually made up of three different packages

a server package - for the server
a client package - for the client react app
a shared package - for sharing the views component types use in both the server and client

we are going to start by creating a shared package for declaring all of our layout client components that the server is going to tell the client to render

Example:

// shared/src/index.ts

import { View } from "@react-fullstack/fullstack";

export const Views = {
  Home: {} as View<{ username: string; logout: () => void }>, // Home layout component and its props
  Login: {} as View<{ login: (username: string, password: string) => void }>, // Login layout component and its props
  Prompt: {} as View<{ message: string; onOk: () => void }>, // Prompt layout component and its props
  Gif: {} as View<{ url: string }>, // a Gif component and its props
};

next, after we finished declaring all of our client components in our shared package we are going to move on to the server

// server/src/index
import React from "react";
import { Render } from "@react-fullstack/render";
import { ViewsProvider } from "@react-fullstack/fullstack";
import { Views } from "shared-package"; // import our shared package
import { Server } from "@react-fullstack/fullstack-socket-server";


const App = () => {
  const [location, setLocation] = useState<"home" | "error" | "login">("login"); // example state for the current layout
  const [name, setName] = useState(""); // exampke state for the user name
  return (
    <ViewsProvider<typeof Views>>
      {" "}
      {/* View Provider that provide as with all of our shared views  */}
      {({ Home, Login, Prompt, Gif }) => {
        return (
          <>
            {location === "login" && ( // log in view
              <Login
                login={(username, password) => {
                  if (password === "0000") {
                    // the secret password is 0000 if the user give it to us log him in
                    setName(username);
                    setLocation("home");
                  } else {
                    setLocation("error");
                  }
                }}
              />
            )}
            {location === "home" && ( // home view
              <Home
                logout={() => setLocation("login") /* log out of the account */}
                username={name}
              >
                <Gif url="url_to_gif.gif" />
              </Home>
            )}
            {location === "error" && ( // error prompt view in case of a worong password
              <Prompt
                message={"worng password"}
                onOk={() => setLocation("login")}
              />
            )}
          </>
        );
      }}
    </ViewsProvider>
  );
};

Render(
  // run the server on port 8485
  <Server port={8485} views={Views}>
    {() => <App /> /* on each connection to the server create an app */}
  </Server>
);

after we finished adding all of our business logic to the server its now time to create some views

// client/src/index

import React from "react";
import ReactDOM from "react-dom";
import { Component } from "@react-fullstack/fullstack";
import { Client } from "@react-fullstack/fullstack-socket-client"
import { Views } from "shared-package";

// home layout component
class Home extends Component<typeof Views["Home"]> {
  render() {
    return (
      <div>
        <h1>Hello - {this.props.username}</h1>
        {this.props.children}
        <button onClick={() => this.props.logout()}>logout</button>
      </div>
    );
  }
}

// prompt layout component
class Prompt extends Component<typeof Views["Prompt"]> {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
        {this.props.children}
        <button onClick={() => this.props.onOk()}>ok</button>
      </div>
    );
  }
}

// login layout component
class Login extends Component<
  typeof Views["Login"],
  { username: string; password: string }
> {
  render() {
    return (
      <div>
        <input
          type="text"
          onChange={(e) => this.setState({ username: e.target.value })}
          placeholder="username"
        />
        <input
          type="text"
          onChange={(e) => this.setState({ password: e.target.value })}
          placeholder="password"
        />
        <button
          onClick={() =>
            this.props.login(this.state.username, this.state.password)
          }
        >
          LogIn
        </button>
      </div>
    );
  }
}

// gif component
class Gif extends Component<typeof Views["Gif"]> {
  render() {
    return (
      <div>
        <img src={this.props.url} />
      </div>
    );
  }
}

ReactDOM.render(
  // connect to our server running on localhost:8485
  <Client<typeof Views>
    host="localhost"
    port={8485}
    views={{ Home, Login, Prompt, Gif }}
  />,
  document.getElementById("root")
);

and we are now finished you should now have a react application the can run on a server : )

location-based background - cool css trick

shmuelhizmi — Sat, 22 Aug 2020 13:54:09 +0000

this weekend I have transformed my project "web desktop environment" (which you can read more about here) into a to a PWA (progressive web app) and in the process of doing so, I learn a really cool trick that made my PWA fill much more alive, the trick was making the background of the PWA app window relative to his position.

live in action 🎞🎞

create one yourself

import React, { useState, useEffect } from "react";
// import our css styles
import "./styles.css";

export default function App() {
  const [top, setTop] = useState(0); // track to position of the window relative to the top
  const [left, setLeft] = useState(0); // track to position of the window relative to the left
  useEffect(() => {
    const loop = setInterval(() => {
      if (window.screen.availWidth - window.innerWidth === 0) { // check if we are in window maximize mode
// if we are in window maximize mode reset the background position        
        setTop(0);
        setLeft(0);
      } else { // else set the top and left states to the window location
        setTop(window.screenY)
        setLeft(window.screenX)
      }
    }, 500); // check only 2 times a second to avoid performance lost
return () => clearInterval(loop); // stop loop when component unmount
  }, [])
  return (
    <div className="App">
      <div
        className="Background"
        style={{
                    width: window.screen.width, //set the image full resolution base on screen resolution
                    height: window.screen.height,
                    transform: `translate(
            -${left && left % window.screen.availWidth /* in case we are running on a secondry ( left will be equal to primary screen + it's position on the relatve screen) screen we want to only get the position relative to the screen we are running on */}px,
            -${top && top - 40 /* remove 40px to account for top tabs and navigation bar */}px
             )`,}}
        />
    </div>
  );
}

/* fullscreen */
.App {
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.Background {
  background: url("https://picsum.photos/1920/1080"); /* random image api */
  position: absolute;
  transition: transform 400ms; /* animation for background position change */
}

demo

check out web desktop environment

shmuelhizmi / web-desktop-environment

a web-based cross-platform desktop environment

A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.

What is a Web Desktop Environment

Why?

View on GitHub

A web-based desktop environment

shmuelhizmi ・ Jul 17 '20

#node #typescript #react #linux

create HTTP servers using react !!!

shmuelhizmi — Tue, 28 Jul 2020 17:43:38 +0000

So... I woke up this morning with an Idea - "creating reactable node HTTP/s servers with react can be quite interesting" and so I set down and start working and now 4-5 hours of work later I have an announcement to make - you can now create a reactable HTTP/s servers using a React warp of express.js.

Note: if your not interesting in reading this post and just want to create HTTP/s servers using a React that is completely ok, you can install it now using npm install @react-express/server or npm install @react-express/server-core for the slim version and you can find an example use at react-express github.

❓ why is it useful

The magic of React is that everything is stateful reactable and let's not even start talking about the extremely pretty syntax,
if you are not familiar with react please check it out it's the biggest web library/framework (in terms of user-base) and in my opinion the best one :)
and so... - as I see it all the benefits of React (stateful, reactable, cool syntax, component-based, and more...) can also be applied into the servers world,
express servers are great but they are too much static in my opinion and I think React can change that!!

❗ getting started

let's start by installing "@react-express/server" into our server we can do that by running npm install @react-express/server inside our project.

since we are using JSX let's make sure to enable JSX inside our project you can learn how to do it using bable and using typescript

and now let's start coding! if we want to mount an http server inside our project we need add the following lines to our code

import React from "react";
import { Render, Server, Route } from "@react-express/server"; // import the Render method and all the simple routing components 

Render(
  <Server listen port={2345 /* the port we want to listen on */}>
    <Route path={"/" /* the path we cant to handle requests from */} get={(req, res) => res.send("hello world") /* send "hellow world" response to every request at "http://localhost:2345/" */} />
  </Server>

and that's it, we just created an hello-world HTTP/s server.

more advance routing:

...
import {..., Router } from "@react-express/server"; // import the Router component

const posts = ["hello", "world 🗺"];

// applay middlewares
const use = (app) => {
  app.use(express.json(), express.urlencoded({ extended: true }));
};

Render(
  <Server listen port={2345}>
    <Router reference={use} path="/posts">
      <Route path="/" get={(req, res) => res.send(posts) /* get all posts*/} />
      <Route
        path="/:id"
        get={(req, res) => res.send(posts[req.params.id])}
        delete={(req, res) => posts[req.params.id] = "empty"}
        />
    </Router>
  </Server>

and just because it's now possible - rendering react components to the client:

...
import {..., ReactRoute } from "@react-express/server"; // import the Render method and all the simple routing components 

const posts = ["hey", "bey", "hello", "world 🗺"];

// applay middlewares
...

Render(
  <Server listen port={2345 /* the port we want to listen on */}>
    <Router reference={use} path="/posts">
      <ReactRoute >{
         () => (
           {posts.map((post, index) => (
             <li
              style={{
                color: `#${Math.floor(Math.random() *16777215).toString(16)}`,
                     }}
                key={index}
            >
               <h1>{post}</h1>
            </li>
          ))}
         )}
      </ReactRoute>
      <Route
        path="/:id"
        get={(req, res) => res.send(posts[req.params.id])}
        delete={(req, res) => posts[req.params.id] = "empty"}
        />
    </Router>
  </Server>

result:

☯ contribute or just check out the repo

if you also find the idea of writing servers in React fascinating, feel free to check out the repo at

shmuelhizmi / react-fullstack

a set of packages for creating full-stack React applications

React Fullstack

"React Fullstack" is collection of libraries for creating fullstack applications that are based on React!

"React Fullstack" main packages are

Fullstack or npm i @react-fullstack/fullstack
express server npm i @react-fullstack/server-express

View on GitHub

the code base is pretty small and simple so if you want to contribute you can also feel free to open up a pull request :)

NotNotePad - a web-based multi-editor and serverless code-editor/IDE

shmuelhizmi — Sat, 18 Jul 2020 14:17:06 +0000

NotNotePad is a code editor I have been partly working on for the last year, it was my first complete project (and by complete I definitely don't mean done 😎) and my biggest so far.

shmuelhizmi / notnotepad

a browser base code editor - dead project that was made by the 15 years old me

NotNotePad - Live Demo

What is NotNotePad

lets take the idea of programming

code (text)=> code interpreter/compiler=> machine code (binary data)

now when trying to improve this process we can encounter a few problems like

any changes in the code syntax will require every user to update is interpreter and every program or library to update its code base, which can result in mostly small or non-breaking changes in every language generation leap.
sometimes code syntax which is easy to write can be harder to interpret for an interpretor.
for some people coding in general is not the best way to program especially for people in the creative area like designers.

that's why we have tools like:

bable (code translator)

es6 + jsx=> raw js=> code interpreter

wix (website builder)

visual editor=> html=> html renderer

unreal engine blueprints

visual editor=> compiled data=> cpp interpreter

google blockly

visual editor=> compiled code=>…

View on GitHub

so what exactly is "NotNotePad"❓

NotNotePad is a code editor design to give both programmers and non-programmers a place when they can work on the same code base using both code and visual scripting (visual scripting still has a long way to go😉), the editor runs on the browser and is completely serverless.

and what exactly do you mean by multi-editor ❓

the idea behind NotNotePad multi editor system is to give the user one IDE but multiple code editors to work with so a savvy programmer can use the Monaco editor (the same editor from VScode !!) while the less savvy product man can work on the same file using a visual editor.

🏞 screenshots

More....

If all or just some of that sounds interesting for you fill free to check the project out in github/shmuelhizmi/notnotepad.

A web-based desktop environment

shmuelhizmi — Fri, 17 Jul 2020 22:00:44 +0000

For the last 2 weeks I have been working on a new project of mine called "web desktop environment" (temporary name) and now I finally feel like the project is in a stage where it is ready to be shared with the world so...

shmuelhizmi / web-desktop-environment

a web-based cross-platform desktop environment

A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.

What is a Web Desktop Environment

Why?

View on GitHub

❓ so what exactly is "web desktop environment"

So one big thing that sperate a typical Linux server from a regular PC is that your PC probably run something called a "desktop environment" while a server main interface would probably be a text-based command line or some sort of a Control Panel,
the reason for that is that the typical visual desktop environments will be too "heavy" and is most likely not design to run on something so performance optimizes like a server.

now the target of the "web desktop environment" software is to provides an easy to use, slim visual desktop environment that is designed to run on something like a server or any sort of small Linux machine. That way server management can become something that even less savvy people can do too, since they no longer need to deal with a command line.

🏞 a dark theme screenshot

🎥 demo video

👨🏾‍💻 👩🏾‍💻 So let's get into the details

"web desktop environment" is made out of two main packages a NodeJS server app - for the server and a React web app - for the client both are written in Typescript and are using Mce/Reflow to communicate between them.

🙃 I'm currently looking for a better name

the project name is currently "web desktop environment" which is a bit dry if you have any better idea for a name it will be great if you can comment it in the discussion below, thanks!!

More....

If all or just some of that sounds interesting for you fill free to check the project out in github/shmuelhizmi/web-desktop-environment.

shmuelhizmi / web-desktop-environment

a web-based cross-platform desktop environment

A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.