DEV Community: Ren Hiyama

How to dualboot Hyprland with Gnome Desktops on Linux

Ren Hiyama — Wed, 24 Jan 2024 07:30:43 +0000

Linux desktops are like a box of chocolates - you never know what you’re going to get. One day, you’re working on a sleek and stylish desktop, and the next day, you’re staring at a screen that looks like it was designed in the 90s. But that’s the beauty of Linux - it’s unpredictable, quirky, and always keeps you on your toes.

Personally, I find Gnome the most usable desktop. Things just works - it stays out of my way, and apps work together with harmony, without causing any issues. Want to login to Vscode with Github? Just click yes, and gnome will open your preffered default browser automatically, login to Github, close the tab, and switch back to vscode app and log you in successfully.

However, sometimes I prefer Hyprland over Gnome. Maybe its because it looks cool, maybe you can customize it a lot, maybe it just has quality of life animations and customizable keybinds. But for me, its because Hyprland doesn't hook any keybind by default. And that includes the Win/Super key. It's just perfect for VM Guis and passing my inputs like the win key to open the windows start menu pretty easily, whereas Gnome would open its own overview panel when clicking the win key.

So, without further ado - Start by having GNOME preconfigured/already installed and ready to use.
I suggest using Fedora Workstation, it comes with Gnome desktop by default, unless you choose some other flavour.

BTW, many suggest to use other login display managers like SDDM, but I didn't find any problems using the default GDM login manager that comes with GNOME desktop by default.

For illustration purposes, I will be running Fedora Default/Gnome flavour ISO inside a VM (but dont worry, I still use Fedora on the real setup too lol)

So anyways, after setting up Gnome desktop properly, you should start by installing Hyprland package.
On Fedora, its as easy as installing sudo dnf install hyprland .

If everything goes perfect, you can log out to the login screen of GDM. Select your account if not already, and you will see a small "cog" icon at the bottom right. Clicking it will show available Desktops that you can use.

We now need to setup gnome polkit integration. Hyprland docs suggested kde integration, but since we want Gnome one, start by pressing win+Q to open up kitty terminal. Type in sudo dnf install polkit-gnome to do so. For other linux distros out there, consider finding a similar package by search online.

If you are setting Hyprland for the first time, you will get a yellow warning popup at the top of the screen. To remove it, you need to install a code editor like vim, edit the config file at ~/.config/hypr/hyprland.conf and remove the autogenerated=1 line.

Now the hard part - We need to setup passwords to be synced with Gnome desktop too.

If you had previously googled it, ArchWiki would say the binary was installed at /usr/lib/polkit-gnome/polkit-gnome-authentication-agent-1, however that's not the case here in Fedora.

I found out that Fedora installs the binary at /usr/libexec/polkit-gnome-authentication-agent-1 (Thank me later). So you can run that command, and then open another terminal to try whether Gnome will ask password now back - win+Q to open another kitty terminal & type in pkexec whoami

If you provide the correct password, it will run the command as root user, and so it will return root to the terminal ;p

So, now that we know that this polkit for gnome works successfully, we should write it to the hyprland config file to run this command everytime on logging into hyprland. To do so, open ~/.config/hypr/hyprland.conf.

Now, save it and press win+M to crash/stop Hyprland, which will take you back to GDM login screen. Login back to Hyprland, and open up the terminal and run back pkexec whoami to find out that the Gnome UI like popup will ask the password back again - which confirms that Hyprland already ran that command which we asked it to.

But, its not over...
If you were already using your favorite browser on Gnome desktop before, I bet you logged into some of the sites. But if you try to open the same browser on Hyprland, you lose all your logged in passwords and such. Wonder why? It's because all those browsers and third party apps dont know what Hyprland environment is, and since they aren't inside gnome environment, they can use gnome password manager to login your online accounts. Wondering what's the solution? I did too. I searched all across the internet, and couldn't find any solution. However, I got a feeling that I should mess with the environment variables to check whether I can fake like as if I was in a Gnome environment - and to my suprise, I had succeeded!
After looking into Hyprland docs back again, I found a small spoiler alert that Hyprland sets up some envs which says to every app that they're in Hyprland environment.

"however it is not a bad idea to set them explicitly" - oh wow... who knew the answer was put up like this?
Since we are using Wayland on both the desktops, we don't need to change the 2nd option. However, we need to set the other two envs to fake the whole environment that we are in Gnome.

Type in this to the ~/.config/hypr/hyprland.conf file, just on top/before any exec-once statements, so any command ran will have these envs setup already:

env = XDG_CURRENT_DESKTOP,GNOME
env = XDG_SESSION_DESKTOP,gnome

Wondering where did I find these two variables? I just opened the terminal in Gnome desktop and echo'ed it back to me ;)

You can run any applications now, and they will be synced & logged in on both the desktops! Congrats, you have your (soon to be) dream setup! Happy ricing your Hyprland!

Make Dependency Management Better with URL Imports & Ree.js!

Ren Hiyama — Fri, 13 Oct 2023 09:40:35 +0000

How to use Ree.js and URL Imports in Node.js

Ree.js is a library that makes web development faster and easier by providing features such as URL Imports, JSX support, and server-side rendering. URL Imports are a way of importing modules from URLs instead of local files or npm packages. This can reduce the download size and improve the performance of your web applications. Let's get cooler, shouldn't we?

Ree.js works on Bun too. If you find any problem, please make an issue on github. Feel free to use it over Nodejs.

In this blog post, I will show you how to use Ree.js and URL Imports in Node.js/Bun, and compare them with the traditional way of using npm packages.

What are URL Imports?

URL Imports are a feature that allows you to import modules from URLs instead of local files or npm packages. For example, instead of installing and importing the chalk module from npm, you can import it from a URL like this:

import chalk from "https://esm.sh/chalk@5.3.0";

This way, you don't need to declare any dependencies in package.json and wait for NPM to install every dependency.

URL Imports are supported by some modern JavaScript platforms, such as Deno and Skypack. However, Node.js does not support URL Imports natively yet (they recently added support for it, but it doesn't allow using native node APIs. That's where Ree.js' URL Imports comes into play)

How to use Ree.js and URL Imports in Node.js?

Ree.js is a library that makes web development faster and easier by providing features such as URL Imports, JSX/TSX/MDX support, and server-side rendering. Ree.js also supports importing modules from URLs without any experimental flags or hacks.

To use Ree.js and URL Imports in Node.js, you need to do the following steps:

Install @reejs/imports from npm:

npm i @reejs/imports

Import the Import function from reejs/import.js:

import Import from "@reejs/imports";

Use the Import function to import modules from URLs:

let chalk = await Import("https://esm.sh/chalk@5.3.0");
console.log(chalk.green("We Did It!"));

The Import function returns a promise that resolves to the imported module. You need to use the await keyword to get the module. Consider using Import instead of native dynamic import function. Not only it adds additional support, but it also fixes the problems with importing default property seperately (with Import, default property works the same as static import statement).

Alternatively, try out Ree.js x mode!
It adds support for transpiling files and running them directly, as well as Deno's static import syntax for resolving and using URL Imports. Make sure to run npm i -g reejs to install globally first!

Make a file like index.ts:

import chalk from "https://esm.sh/chalk@5.3.0";
//Import function is globally available under our scope too!
//try using `let chalk = await Import("https://esm.sh/chalk@5.3.0");` and watch it work too!
console.log(chalk.green("We Did It!"));

Now run the file with reejs x index.ts. It should work fine!

Why use Reejs and URL Imports over legacy NPM packages?

There are some benefits of using Reejs and URL Imports over legacy NPM packages, such as:

Reduced download size: You don't need to download and install any dependencies or manage any package.json files. You only download the modules you need from URLs. Stop downloading those extra useless resources: README.mds, .gitignores & other files. Download what you actually need!

Improved performance: You don't need to resolve any local files or npm packages. You just fetch the modules from URLs and cache them for faster loading.
Easier updates: You don't need to update any dependencies or package.json files. You just change the URL of the module you want to use, and Node.js will fetch the latest version for you.
More compatibility: You can use modules that are compatible with other JavaScript platforms, such as Deno and Skypack. You don't need to worry about any compatibility issues or polyfills.
Easily serve libraries from local server/private VPS: You can try to serve and cache libraries by running esm.sh to improve loading times on your server side. Or to keep things simple, just upload a code to pastebin or similar services and directly use it here!
Optional dependency loading: If you have ever built a library for developers, chances are there is a dependency which is rarely meant to be used. Installing it straight away when someone installs your library means they're gonna waste extra time and storage. With Reejs, you can use conditional statements and dynamic imports to wait downloading them until required at the last moment. Reejs uses the same trick to keep the initial Reejs download size way small - it doesn't downloads typescript/jsx transpiler unless the one of the files are in .ts or .jsx. Get creative and bring down the download sizes of your clis!

Conclusion

Reejs is a library that makes web development faster and easier by providing features such as URL Imports, JSX support, and server-side rendering. URL Imports are a way of importing modules from URLs instead of local files or npm packages. This can reduce the download size and improve the performance of your web applications.

In this blog post, I showed you how to use reejs and URL Imports in Node.js & Bun, and compared them with the traditional way of using npm packages. I hope you found this blog post helpful and learned something new.

If you want to learn more about reejs and URL Imports, you can check out our resources:

Thank you for reading! Bye bye!

Welcome to the dark side. Ree.js awaits you!

Ren Hiyama — Thu, 05 Oct 2023 08:32:16 +0000

Do you have your old computer/laptop lying around? Or atleast your (not so new) phone nearby? Cause get ready, we are jumping in for the lightweight yet performant framework of all time!

Meet Ree.js, a web framework for both the next generation and the older generation of desktops and servers, where developing products and services for your clients could never have been faster!

rovelstars / reejs

Make Sites Faster, without the need of building anything!

Finally the best of both worlds: Fast build times and a great developer experience 😎

Ree.js is a library that makes web development faster and easier by providing features such as URL Imports, JSX support, and server-side rendering. URL Imports are a way of importing modules from URLs instead of local files or npm packages. This can reduce the download size and improve the performance of your web applications. It doesn't hurt to use the latest features for better performance, right?

📖 Read Documentation

Documentation is available at here . If you find any mistakes, please make an issue. Incase you have any questions, please ask them on our Discord Server

✒️ Contributing

We welcome all contributions. Please read our CONTRIBUTING.md

🛣️ Roadmap

Reewrite Packit to be modular
Packit in dev mode should run hono server in dev mode, and dynamically transpile & load files on a request.
Fix development…

View on GitHub

But wait!!
There's more! Surely you're bored of new "faster" frameworks right?

If you are a veteran webdev/nodejs dev, you might know node_modules meme

cough cough Nextjs hello world app

What if I could tell you that Ree.js even is too lightweight? Below 100mb? Nope. Below 10mb? Naw man... 2mb? No!
create-reejs-app with preact feature enabled just takes 1mb! (How cool is that!)

So how did we achieve just small size?

URL Imports

If you have been reading some of my articles last year, you might have seen Reejs supporting URL Imports (yes, using dependencies directly from the internet, like Deno & Browsers!). Think of it as a new way to manage your dependencies. The dependencies you download and use are minified, build target set to your desired runtime and you only download and use files which is only needed! (No more bloatwares like you see on npm packages!)

But wait... Isn't writing URLs directly in code bad for health right? Yes, that's why Ree.js supports import_map.json to declare your dependencies!

Packit

Think of Packit as a code generator, whose main job is to read files, run plugins ("readers", "writers", "transpilers" are literally secondary!) and write codes to a specified file. We have even managed to import and make use of some vite/rollup/unplugin plugins too! Here are just a few of them that just works:

If you are feeling high, you can even turn on vite mode ⚡️⚡️

//packit.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
});

You don't need vite installed. That's the best part.

Packit will turn on vite mode, and the CLI UI will change to Vite's one. Rest assured, Packit's API is still the same!
(P.S. We currently don't have Hot Module Reload available. Feel free to contribute!)

Support for multiple runtimes!

We aim to run Reejs on:

Nodejs
Deno
Bun And to run reejs based websites on:
all the above mentioned
cloudflare edge/pages
fly.io
Deno Deploy
and any other serverless runtime!

Alright. Let me show some cool tricks Reejs comes with:

x command - Run any scripts off the internet.

reejs x https://examples.deno.land/color-logging.ts

repl command - Start a Repl (Works only on Nodejs currently)

Currently Reejs is nearly production ready. Infact that its already faster than Nextjs/Expressjs apps (Thanks to Hono) says a lot! We are currently looking for final bug fixes and more performance improvements.

On my 12yr old PC, Packit can prepare your website within 109ms whereas Vite takes 513ms to just boot up, and another 1.2s to serve the website, and Nextjs (SWC) takes 10s for the initial boot, and another 17s to serve the site. Now compare that with today's modern fast PCs and macbooks, you are sure gonna get a lot of hella performance 🔥🔥🔥

Oh wait, I forgot to even mention you, Packit is pretty much configurable. You can even modify its internals, thanks to monkeypatch, (just name your plugin after one of the internals' name, and you can replace it.) if you want, you can use any other library yourself. ElysiaJS exists, that's a cool Hono alternative, if you're feeling high as a hecker, maybe go and make your own packit plugin that uses it!

So you want to run Reejs on your mobile right? Check out termux, install Nodejs v18+, and follow the reejs install instructions on our website linked below. Thanks to Reejs' low memory overhead, it works flawlessly smooth on any old midrange phone!

Reejs will soon go production ready once we tackle all the issues. Feel free to fix/create any new issues!

If Reejs doesn't work out for you, try doing this ree-tual:

Alright. That's probably a lot of stuff you went through. If you feel interested enough, consider checking us out: website or star our repo!. Hacktoberfest 2023 is going on, feel free to work on any issues mentioned there, or maybe try using Reejs on your next website, and submit any bugs that you find! And also feel free to ask questions in the comment section below!
Bye then!

Start Reinventing the Wheel, Maybe Your Wheel will be better than a Rocket!

Ren Hiyama — Wed, 05 Oct 2022 15:36:55 +0000

When I started writing my own framework, a lot of people started questioning me, why should anyone use mine over a popular framework like Nextjs, which is backed by a lot of tech giants and even backed by Vercel, compared to my framework only being worked on by me?
Since I couldn't answer them that time since my project was relatively new, It's time to show how reinventing the wheel makes my version of wheel much better than the good-ol' wheel we used to know and use...

Ditched NPM, Started Using URL Imports

This might still be a controversial topic on why "you shouldn't use URL Imports!" as seen on my previous blogs™️ (pun intended), let me first answer those people who question that why should you trust a CDN like esm.sh over npm? In the end, we don't bundle node modules folder with the project, and so our server DOES have to download them over their side from npm registry. So if you can't trust a project like esm.sh or esm.run or any other alternatives, you shouldn't really trust npm registry? I have heard people saying that if you depend on third party CDNs, they might send harmful js to your server and execute them... But won't NPM registry server do the same too? (unless someone reports its hacked, npm would be serving a dangerous package without anyone noticing...)

If we don't spend much time thinking over this security, (and if you really think that much, consider selfhosting esm.sh or your own server for your needs...) let me show you how much storage I saved by converting a Nextjs project to My Framework Ree.js, and it used URL Imports to achieve such less storage!

Nextjs Project Size

Reejs Project Size

Please note: Reejs doesn't "builds" anything like Nextjs and others does. Consider Reejs to be a framework like Deno's Fresh, that runs on Nodejs and on Deno (and Bun once their bugs are fixed). Not to mention, Reejs' REEST Server has a lot better performance than Fresh's server.

Consider Reading my blog on my REEST Server:

Ree-Imagine the REEST Server for Ree.js!

Ren Hiyama ・ Sep 1 '22

And to top it off, Reejs maintains a lot better performance than Nextjs.
Let me show you some Lighthouse Stats!

Not to mention the Network Tab goes brrr:

And the Network Tab is simply just too good to be true!

Oh and wait, Nextjs' production builds take a lot of time to build, and that's not the case with Reejs. Not to mention the download time for a Nextjs project (including others too) suffers a HUGE bottleneck thanks to NPM.

So I think I did reinvent the wheel, and its better, right? It probably won't be the best code, but its definitely better and faster than other frameworks!

Anyways, I would be soon adding "Resumability" feature from QwikJS framework to Reejs, let's hope it ree-ally becomes a ree-ality!
You might wanna consider adding a star to our Reejs repo:

rovelstars / reejs

Make Sites Faster, without the need of building anything!

Finally the best of both worlds: Fast build times and a great developer experience 😎

Ree.js is a library that makes web development faster and easier by providing features such as URL Imports, JSX support, and server-side rendering. URL Imports are a way of importing modules from URLs instead of local files or npm packages. This can reduce the download size and improve the performance of your web applications. It doesn't hurt to use the latest features for better performance, right?

📖 Read Documentation

Documentation is available at here . If you find any mistakes, please make an issue. Incase you have any questions, please ask them on our Discord Server

✒️ Contributing

We welcome all contributions. Please read our CONTRIBUTING.md

🛣️ Roadmap

Reewrite Packit to be modular
Packit in dev mode should run hono server in dev mode, and dynamically transpile & load files on a request.
Fix development…

View on GitHub

Don't forget to hit a like, and bookmark this! Comment down below if you got any questions!

Btw I got motivated to write this blog, thanks to @whitep4nth3r 's post:

I changed my mind about writing new JavaScript frameworks

Salma Alam-Naylor ・ Oct 4 '22

#javascript

Ree-inventing the wheel sometimes really makes a better wheel!

Have an epik Day! 😎

Introduction to AI & ML

Ren Hiyama — Sun, 25 Sep 2022 02:07:17 +0000

So you want to learn about AI and Machine Learning? You've come to the right place! This is a beginner's guide to AI and Machine Learning. Let's get started right away!

What is AI?

AI stands for Artificial Intelligence. It is the intelligence of machines and computer programs. AI is a very broad field, and there are many different sub-fields. In this article, we will focus on Machine Learning, which is a sub-field of AI.

What is Machine Learning?

Machine Learning is a sub-field of AI that focuses on building programs that can learn from data. These programs are called Machine Learning models. A Machine Learning model is trained on a dataset, and then it can make predictions on new data.

What is a dataset?

A dataset is a collection of data. It is used to train Machine Learning models. There are many different kinds of datasets. In this article, we will focus on tabular datasets, which are datasets that are organized into rows and columns. Here is an example of a dataset

What is a Machine Learning model?

A machine learning model is an expression of an algorithm that combs through mountains of data to find patterns or make predictions. Fueled by data, machine learning (ML) models are the mathematical engines of artificial intelligence.

For example, an ML model for computer vision might be able to identify cars and pedestrians in a real-time video. One for natural language processing might translate words and sentences.

Under the hood, a machine learning model is a mathematical representation of objects and their relationships to each other. The objects can be anything from “likes” on a social networking post to molecules in a lab experiment.

What are some of the most popular Machine Learning models?

There are many different kinds of Machine Learning models. Here are some of the most popular ones:

Decision Trees
Random Forests
Gradient Boosting Machines
Support Vector Machines
Neural Networks

How do Machine Learning models work?

Machine Learning models are trained on data. This data is usually organized into rows and columns. Each row is an example, and each column is a feature. Here is an example of a dataset:

PassengerId	Survived	Pclass
1	0	3
2	1	1
3	1	3
4	1	1
5	0	3

The first column is the PassengerId. This is a unique identifier for each passenger. The second column is the Survived column. This is the target variable. It tells us whether or not the passenger survived. The third column is the Pclass column. This is a feature. It tells us the class of the passenger's ticket.

The goal of a Machine Learning model is to learn the relationship between the features and the target variable. This is called training the model. Once the model has learned the relationship between the features and the target variable, it can make predictions on new data. This is called inference.

Types of Machine Learning

There are many different types of Machine Learning. Here are some of the most popular ones:

Supervised Learning: Supervised learning is the most common type of Machine Learning. In supervised learning, the data you train your model on includes the target variable. This means that you tell the model what the correct answer is. The model then learns the relationship between the features and the target variable. Once the model has learned this relationship, it can make predictions on new data.
Unsupervised Learning: Unsupervised learning is used when the data you train your model on does not include the target variable. This means that you do not tell the model what the correct answer is. Instead, the model must figure out the relationship between the features on its own. This is a very difficult task, and it is not very common. Most Machine Learning problems are supervised learning problems.
Reinforcement Learning: Reinforcement learning is a type of Machine Learning where the model is trained using trial and error. The model makes a guess, and then it receives a reward or a penalty based on how good its guess was. This process is repeated many times. Eventually, the model learns the relationship between the features and the target variable.

Amazing Projects that uses AI & ML

Below is a list that I think are quite good in what they have achieved:

Github Copilot - GitHub Copilot uses the OpenAI Codex to suggest code and entire functions in real-time, right from your editor.
Dall.E 2 - DALL·E 2 is a new AI system that can create realistic images and art from a description in natural language.
Nvidia Simulating Human Movements over 10 years!
Every new midrange to flagship Phone now-a-days in the field of ~~adding 5 layers of virtual makeup~~ Photography, Face Unlock, and AR and heck even, game enemies!
TensorFlow - A framework every developer has heard of/used if they are studying and progressing in the field of AI & ML.
AI Expert Roadmap - Roadmap to becoming an Artificial Intelligence Expert in 2022 And a lot more others! Feel free to send more in comment section and they will be added here!

This Blog was a basic introduction to AI & ML, and the most fun fact is that I recently took interest in this field, and I have been studying on this for more than a month now. Feel free to post any doubts, suggestions, fixes or anything else in the comment section.
Found any mistake? Comment it down too! Want more articles from me? Let me know!
Join my Discord Server at: https://dscrdly.com/server
Star the current project I am working on: https://github.com/rovelstars/reejs

Have a nice day Developer!

Features In Nodejs that you might have missed! 🪁

Ren Hiyama — Sun, 18 Sep 2022 01:54:12 +0000

Hey there, it's your dev Ren again! Thanks to everyone who read my last week's post on Make it Short - Make it Better and if you haven't, make sure to check it out!
Anyways let's get started!

1. Top Level Await

It's finally here! We can now directly use this:

import fetch from "node-fetch";
let res = await fetch("https://example.com");

Cheers 🍻! We previously had to wrap them inside a async function like this:

import fetch from "node-fetch";
(async()=>{
let res = await fetch("https://example.com");
})();

2. Did you know Dynamic Imports existed?

They are a live saver in some cases, because you can't execute import x from "y" inside a function or a scope. You just need to use the dynamic imports version instead like this:

let x = await import("y");

Important Note: Dynamic Imports have a downside as well, and I would suggest writing or using a custom Import function (like I do) that fixes some of the problems it has... For example,

import x from "y"
console.log(x());

y.js file:

export default ()=>{return "hi"};

While the first one works, this code won't:

let x = await import("y");
console.log(x());

Instead you need to use console.log(x.default());
Or a better version:

let x = (await import("y")).default;

But I would suggest to my own version of Imports, which you can easily use by this:

npm i @reejs/imports

Now Initialize it:

import { DynamicImport } from "@reejs/imports";
let x = DynamicImport(await import("y"));
console.log(x()); //works!

Basically it imports the same dependency/file, and the DynamicImport function runs a loop on it to get all the properties and save it in a new object, and make default work just like static imports do. (Not to mention my URLImport function from @reejs/imports even supports URL Imports on Node v18 incase you wanna try it out! 😉)

3. Use Underscores with Integers for extra readability!

Instead of using this:

let num = 1000000000;

You can now use:

let num = 1_000_000_000;

God who doesn't love an extra readability? I do atleast.

4. Weak References (So you can scream on Garbage Collector)

WeakRef stands for Weak References. It allows you to create a weak reference to an object. A weak reference to an object is a reference that does not prevent the object from being reclaimed by the garbage collector.

The primary use of Weak Reference is to implement caches or mappings of large objects. Where it’s desired that a large object is not kept alive solely because it appears in a cache or mapping.

For example:

const obj = {name: "Ren", lastname: "Hiyama"};
const refObj = new WeakRef(obj);

When you need to read the value of WeakRefs, need to use the deref() method to return the instance.

Continuing from the above example,

const copyObj = refObj.deref();
copyObj.name; // Ren

Garbage collectors are complicated. If an application or library depends on GC cleaning up a WeakRef or calling a finalizer in a timely, predictable manner, it's likely to be disappointed: the cleanup may happen much later than expected, or not at all. Sources of variability include:

One object might be garbage-collected much sooner than another object, even if they become unreachable at the same time, e.g., due to generational collection.
Garbage collection work can be split up over time using incremental and concurrent techniques.
Various runtime heuristics can be used to balance memory usage, responsiveness.
The JavaScript engine may hold references to things which look like they are unreachable (e.g., in closures, or inline caches).
Different JavaScript engines may do these things differently, or the same engine may change its algorithms across versions.
Complex factors may lead to objects being held alive for unexpected amounts of time, such as use with certain APIs.

For that reason, using WeakRef is not recommended and it’s best to avoid implementing one if possible unless you really wanna have a bad time (joke).

4. Tuples? Are we Pee-thon ready yet? Nah it's just Typescript lol...

A tuple is a typed array with a pre-defined length and types for each index.

Tuples are great because they allow each element in the array to be a known type of value.

If we want to define a tuple, we specify the type of each element in the array:

//define a tuple
let tup = [number, boolean, string];
// now initialize it!
tup = [5, false, 'Ree Was Here (not Ren btw!)'];

If we happen to have those elements in a wrong order, we get an error.

Check out Read Only Tuple BTW:

// define our readonly tuple
const tup: readonly [number, boolean, string] = [5, true, 'Ree!'];
// throws error as it is readonly.
tup.push('Welp Failure Management');

Guess what? If you were a React Developer, you were using Tuples under the hood 😳

I hope I made you learn something new today! If I did, consider hitting a like, a unicorn and a bookmark on this Post! Also you can hit a star on my current project - Reejs at https://github.com/rovelstars/reejs , a star means a lot to me!

Have a nice day 🙃!

Found any Problems with this blog? Comment it down Below!

Make it Short - Make it Better

Ren Hiyama — Sat, 10 Sep 2022 18:40:22 +0000

Hey there Fellow Javascript Coder!
Whether you're a experienced programmer or just someone who just started with javascript basics, this list of hacks is definitely for you! Please note that you might have already known one or more features of javascript from the below list, and that's awesome! But not everyone knows them 😉

So let's straight hop in!

Convert Any Datatype to Boolean

By using !! in front of any variable, we can get the Boolean version of it! Let's see how:

let variable = 100;
variable = !!variable // returns true
variable = 0;
variable = !!variable //returns false

Isn't this easier to write and use in real life?
Well, this is more easier:

let variable = 100;
if(variable) console.log("True"); // Logs True!
variable = 0;
if(variable) console.log("True"); // doesn't log anything

Find whether a property exists in an Object

If you were using if(obj.property) or if(obj["property"]) till now, it's time to make your code more readable by using if("property" in obj).

Become Lazy and truncate Array just as you wanted

This just works!

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr); // Logs all the 10 elements
arr.length = 5;
console.log(arr); // Logs only [1, 2, 3, 4, 5] Holy Moly!?

Remove Duplicates from your Array

let arr = [1, 2, 1];
console.log(arr); // [1, 2, 1], as expected.
arr = Array.from(new Set(arr));
console.log(arr); // [1, 2], and cheers!

Avoid Server Lag during 2 or more Array Concats

Instead of using this:

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

let list = list1.concat(list2);

Try using this alternative:

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

let list = list1.push.apply(list1, list2)

The latter code saves your server from high memory consumption because the first code creates a new array in memory, whereas this one works with the list1 array instead of creating a new array.

Have a nice day 🙃!

P.S. Comment down below if you have any ideas on what the next blog should be, I will try my best if I can write on it!

No Build Required Tailwind alternative - Twind 🎏

Ren Hiyama — Wed, 07 Sep 2022 01:22:31 +0000

What is Twind?

Twind is the smallest, fastest, most feature complete tailwind-in-js solution in existence. Unlike Tailwind (v3) it doesn't build anything, and if you want to, you can bundle twind js file to your client! I mean it just works out of the box 😮

Forget your build step that you have on Tailwind v3!

Get all the benefits of Tailwind without the need for PostCSS, configuration, purging, or autoprefixing. It's just that fast that it can generate css for your whole website in nearly 0.2ms!

No Vendor lock-in from any framework!

Most of the time you use Tailwind with a preconfigured Nextjs app or a similar Framework where everything's setup for you. But since Twind requires little to no configuration as you have on Tailwind, it's the choice a lot of people prefer when they just want to make a site that they don't want to build anything.

😎 One small but low fixed cost

The compiler for Twind v1 costs only 4.5kb which is more than 2x smaller than the previous version of Twind (v0) which costed 13kb! Thanks to Sastan for really making this awesome project 🥰

MIT Licensed

Just thought to let you know it uses one of the most non-restrictive License - MIT License!

For Your Information:

Twind v1 Website is present at https://twind.style
Twind v0 Website is present at https://twind.dev

How to use Twind v1?

Currently there are no docs, because Sastan is pretty busy with his everyday's work and family, but that doesn't stops us from writing this blog that explains how you can use it!

Method 1: Use a supported Twind v1 Framework

Consider Using any of these two frameworks:

Ree.js: https://github.com/rovelstars/reejs (For Both Node.js & Deno Users)
Fresh: https://fresh.deno.dev (For Deno Users) Both of these frameworks comes bundled with Twind, and you can opt-out on each of them!

Method 2: Start from Scratch:

For your information, We need to use different packages for different methods of Rendering. For Client Side Rendering, we use @twind/cdn. For Server Side Rendering, we use twind.
and @twind/preset-tailwind because its a small polyfill that tells all the rules of how to generate tailwind classes to Twind. And spoiler alert! It's freaking fast!

We at Ree.js uses both of the modes, and we are gonna share our experience with how to add Twind v1 to your website in the most easy way!

Server Side Rendering

Install the mentioned package:

$ npm i twind@next @twind/preset-tailwind@next

Import them to your server application:

import twind from "twind";
import presetTW from "@twind/preset-tailwind";
twind.setup({
 /* config */
 presets: [presetTW]
});

//Here app is a server, we are following h3 server specification and not express, but most of the time its just same!

app.get("/", (req, res)=>{
let body = `<div class="min-h-screen bg-indigo-600"><p class="font-bold text-white text-7l">Hello From Twind!</p></div>`;
let css = twind.extract(body).css;
let html = `<html>
<head>
<style>
${css}
</style>
<body>
${body}
</body>
</html>`
return html;
// I remember you probably need to use res.send(html) on expressjs server ;)
});

Please note this is a small example, and you probably need to add some meta tags and other stuff to your html string.

But, looks like we have completed!

Client Side Rendering

<html hidden>
<head>
<script type="module">
let twind = await import("https://esm.run/@twind/cdn@next");
twind.setup();
document.querySelector("html").removeAttribute("hidden");
</script>
<body>
<div class="min-h-screen bg-indigo-600"><p class="font-bold text-white text-7l">Hello From Twind!</p></div>
</body>
</html>

The hidden attribute won't show the page before Twind loads, therefore fixing that "FlashBang!" White Screen 😅

Happy Coding & Have a nice Day!
Thanks for Sastan to help me out with setting Twind v1 myself!
If you like this post, consider a like, unicorn and share it with your friends!

Use URL Imports in Nodejs v16 without experimental hacks!

Ren Hiyama — Sun, 04 Sep 2022 12:31:56 +0000

When We first made our own implementation of URL Imports for Ree.js we learnt a simple hack from here that was based using experimental tags.

Since now Nodejs was going to bring that feature natively in future versions, we thought of why shouldn't we pull that feature down, so we could have a cross platform of features being run across different platforms? (ie. Nodejs, Bun & maybe Deno)

But Deno already has them!

Yea sure they got them, but if we were meant to provide cross platform solution for our codes (ie, it could run on different platforms with same UI and same mechanics so its imported the same way across them), we got to create our own!

How do we solve this problem?

Thanks to es-module-lexer we can easily find all the imports in a js code, if we just replace those url imports present in those codes themselves with an absolute file path, we can easily dynamically import them.

So when we are asked to import a package, for example, https://esm.run/preact, we first fetch it with node-fetch package, and then run a loop on the code, to find out the imports urls, crawl them and run the same recursive function on them; and we continue replacing the urls with absolute file paths:

let code = await _fetch(originalUrl).then(res => res.text());
        let [_imports] = await lexer.parse(code)

        _imports = Array.from(new Set(_imports.map(i => i.n)));
        if (_imports.length > 0) {
            await Promise.all(_imports.map(async i => {
                let to = await dl(i, name, local, domain)
                code = code.replaceAll(i, to);
            }));
        }

What's dl ? It's the recursive function I said above!
After those codes, we use fs to save those js files in their respective folder structure.

Shall we test it out?

Download Ree.js (currently we have bundled this url imports feature with Ree.js itself 😅)

npm i reejs

Now add this script in your code:

import Import from "reejs/import.js";
let chalk = await Import("https://esm.sh/chalk?target=node");
console.log(chalk.green("We Did It!"));

We can now see:

If you made this far, great! You can read the full source code of this file at: here
Consider even reading the file that we actually import (server/import.js), it's built on top of our url import "technology" that fixes some stupid stuff like:

Instead of chalk having all the properties, you needed to use chalk.default to get them... This issue happens with the way dynamic imports works...
Can read imports maps from your project directory's import-maps.json and server.import-maps.json
Can import relative files, as well as absolute files, and even the native nodejs modules/npm modules!

Do you love this idea?

Consider commenting if you want this feature to be as a package of its own on npm!

Also don't forget to star Ree.js Repo at https://github.com/rovelstars/reejs

Come and talk to us on Discord: https://dscrdly.com/server
Hit a Like and A Unicorn to show some support, share this post with your fellow friends/devs and maybe you even want to read my other articles? Check them out on my page!

Have an Epik Day!

Ree-Imagine the REEST Server for Ree.js!

Ren Hiyama — Thu, 01 Sep 2022 07:13:51 +0000

Ever Used Next.js? I am sure you did if you call yourself a ReactJS Developer! Well, the thing is... it still uses... ExpressJS in what..? 2022? Are we still meant to use such a slow framework in today's "fast" world?

Well, Let's dive straight into the benchmarks for Next.js (such a "battle-tested" framework for "Production" servers) and compare it with Reejs' server:

Next.js In Dev (because why not?)

Next.js in Production (this should interest you!)

Fresh from Deno

(Its like Ree.js but on Deno, btw Ree.js runs on Deno incase you don't know!)

Ree.js in Dev

console.log is a good bottleneck for the loggings :(

Ree.js in Production (Game-breaking mode activated I mean!)

Gas Gas Gas, ReeJS is so freaking FAST!

So you might wonder why am I running Next.js in dev and even comparing it with Ree.js in dev?

My answer would be, why are we devs not thinking about DevX (Developer eXperience) and only focusing on UX (User Experience)?
Are all the devs in our world having a beefy PC to code on? I don't think so 🥲... And to backup my point, Let's go a month back...

Ever heard of Bun? Bun - The new Nodejs/Deno alternative that aims to be more fast. I give a huge round of applause for them to make something that will be faster, but my point brings to the github issue which still ranks #1 to this day on Google Search 😅

While Bun now provides builds that don't need AVX2 Requirement, we can see that issue that a lot of devs actually use a old pc to code on, and my PC is 11yrs old (Yet, I managed to run Windows 11 on my old pc with some optimizations to use 1.2gb ram on startup 😅) But you get the idea... Not everyone has access to latest resources!

So why we are devs acting as if we all have Beefy PCs? Just because "you" have doesn't mean everyone has it! (No hate to anyone btw)

My thoughts

We should really focus on DevX along with UX. I mean it's pretty much not bad... Both Reejs & Fresh doesn't build anything, so why are we still "building" in dev mode?

Oh sheesh...

Did you just realise I just moved the topic from one part to another? Ah my bad, shall we go back to the server topic?

Thanks to h3 for their awesome server framework that helps us reach newer limits! They (UnJS) currently have Nitro server (That's used In NuxtJS incase you wondered why do they have that lol) but the problem is Nitro server still requires you to build...

Meet REEST

Ree Server Takeover - Don't let the words deceive you!
This new upcoming server will be itself based on h3 server, provide all the features of Nitro server, without "building" because it's ree-ally not necessary to build!
But why the name "Takeover"? This takes over "your" problems and tries its best to fix it! You can now go and "take reest!"

Some Noticeable Features 🎏

Host more servers on different ports that run their own service, and they run on different threads rather than on the main JS thread so it's more efficient 🎯
Be as Fast as Serverless ~~so you don't need serverless lol~~
Host on Serverless (Reejs currently can't run as SSR mode on serverless, you have to choose the static mode deployment and REEST shall work to fix that!)
Aim to be Beginner-Friendly 😌
Aim to be "Ree"-quality friendly (I mean how you scream "reeeeeee!!!" when your code doesn't work; Reejs can help you fix that, or scream "reeeeee!!!" on your behalf 😉👏)
Comment down below what else would you like to see!
REX-MODE Coming Soon™️! Spoiler Alert: you will love the way it handles the server efficiently! 😏

Thanks for sticking around! 🤝

Come Talk with us, and help us shape the futuree of Reejs on our Discord Server at https://dscrdly.com/server !
Hit a star on our Github repo to show support 🤗 https://github.com/rovelstars/reejs

Making a new open-source "general" template project with Reejs? You may want to check out building on https://github.com/ree-js , Join our Discord server to notify us about it!

Have a "REE"-free Day! 😅

I don't want to see you do this, that's why I made Reejs in the first place! 😉

"No-Build Required" Reeact Framework

Ren Hiyama — Wed, 31 Aug 2022 01:11:44 +0000

Ever Considered why do need to download such a large node_modules file for Next.js , RemixJS, and other frameworks? Just why do they need to download over 100mb to 200mb of data just to build a website and deploy it?

Well, You probably didn't. You have access to the latest PCs and servers, and you don't even need to wait to run your npm i ... Well again, its not your fault; you just don't simply care about it. But a lot of developers don't have access to these resources, and so they end up writing static HTML, or a barebones create-react-app without any good functionality. If you do think you are one of the developers who don't have a decent PC to start your web dev journey, you're at the right place my friend!

Meet Ree.js

What is it? Just a lightweight framework? Hell nah, it's packed with lot more goodies that you didn't imagine you could use so much less storage!
Reejs weighs less than 300kb, at the time of writing (and nearly 2mb if you use the default template, download their dependencies, and turn on Terser Minification!)

What's more?

Ever Heard of URL Imports? If you didn't, here's the long story short: No more NPM. Just straight away importing from a url.
A good example would be like this:

Instead of doing this the classic boring and bloated/slow way:

npm i react

And this in index.js

import react from "react"

You write:

import react from "https://esm.sh/react"

And to add more cherry on top, your same codebase which uses URL Imports, can be ran on browser, without BUILDING! Yes you heard it right!

Any more features?

While Reejs is still in its infancy, it's trying to accomplish every pros of Nextjs, RemixJS and other Frameworks, except removing their cons (ie. building and huge installation size)

As of now, Reejs ships with:

Twind v1 as its primary CSS engine, with support for SSR CSS generation (beta support thanks to Sastan the maintainer of twind)
Minifier for HTML, CSS, and JS (Thanks to Terser for being... uh... lightweight? 400kb and its quite good and fast so... you know 😉)
URL Imports (we welcome PRs and Issues over https://github.com/rovelstars/reejs)
REX Mode; An automated server engine that knows when to render CSR and SSR based on real life usage (still wip)
No Builds I guess?
ReeBlaze 🥏 A fast yet powerful router to take the whole website CSR!
A good CLI because you deserve it!

Please do note Reejs is in v0 (and v0.3.x to be more specific at the time of writing this) and so we are looking for issues for bug reports, and feature requests over our github repo.

Roadmap:

Please note this are not in order, and its mostly like to be added, but please bear in mind that there's no ETA and if they require building, we would discontinue that feature.

Image Optimization
Auto Head Updation
Some Updates to ReeBlaze to allow more configs
Reewrite Server to allow serverless deployment
Not "vendor lock in" for nodejs environments, allow Deno and Bun to run Reejs
Use a custom Reeact.js implementation that is more lightweight (1kb approx.)
And a lot more!
A good docs that's built on top of Reejs itself!

So what are you waiting for?

Consider Using Reejs in your future projects! Its stable enough by the way 😏
Also you can:

Star Our Repo at https://github.com/rovelstars/reejs
Join Our Discord Server at https://dscrdly.com/server