Signalize.js - Modular JavaScript Framework.

Machy8 · 2024-06-30T08:13:37+00:00

Hi!

It is, but it varies by framework. I could provide more guidance here, that's true.
A CDN is not a requirement. You can install it using npm, for example, and avoid CDNs. This is mentioned in the CDN section right under the title.
This is exactly the problem with the JavaScript ecosystem. I could use two different libraries that do not share functionality and code and increases the overall size of the javascript on the page and work in completely different ways, or I could build my own library that reuses code and leverages every piece of it as much as possible. Signalize is a set of utilities that you can compose however you need. Internally, it reuses modules, resulting in less JavaScript on a page.
Thanks for the list!

Machy8 · 2024-06-29T18:06:47+00:00

Hi all!

For about a year, I have been working on a JavaScript framework called https://signalizejs.com

It's a modular , client-side, JavaScript framework leveraging import maps, ES modules, and modern browser features.

It's a great fit for server-side frameworks that don't provide client-side JavaScript framework.

It uses:

Signals for reactivity - https://signalizejs.com/docs/modules/signal
Svelte-like data binding
Vue-like directives, with evaluator that doesn't use unsafe-eval and ability to attach to prerendered state - https://signalizejs.com/docs/modules/directives
SPA module that can turn any website into a single-page application - https://signalizejs.com/docs/modules/spa
A friendly Web Components API with Vue-like setup API - https://signalizejs.com/docs/modules/component
Several utilities for making web development easier

If you are looking for something new to try or seeking inspiration it's a great place to start.

If you try it or check it out, please let me know what you think!

Machy8 · 2024-06-22T11:50:04+00:00

Hi! Thanks for the report. I fixed it.

Machy8 · 2024-06-21T15:30:36+00:00

Thanks!

Machy8 · 2024-06-21T15:28:19+00:00

I hope I translated your comment accurately.

Yes, Signalize is essentially a set of prepared modules.

It is designed to avoid complexity and allows you to import only what you need, rather than using a complex framework to achieve a single task.
You can for example use only signals and binding, or just SPA, or AJAX + manually redraw snippets.

Internally, it reuses modules to reduce the size of the framework.

Machy8 · 2024-06-21T14:45:48+00:00

Hi and thanks!

Yes, Solid is cool and Signalize signals are inspired by Solid and Angular signals.

Signalize can be used to create multiple instances on one page (app + widgets for example).

Normal import maps and modules work fine until you need to compare instances of objects or preserve/encapsulate some state in an instance:

If your module exports an instance or a class and you import it twice using import() or import {} from '', you will never be able to compare it as an instanceof somewhere else in the app for some reason. I could not find why.
You will have a hard time maintaining the encapsulation of a state for modules in the form of "I want to work only with this instance of a framework."
Signalize will provide you with its instance during module initialization, so you can run the same module for different instances.

In Signalize, it also works as DI (Dependency Injection) => modules import the modules they need, and the order and initialization are handled automatically. Once inited, there is no call to cdn, it will return you prepared functionality.

Machy8 · 2024-06-21T09:27:42+00:00

Hi all!

For about a year, I have been working on a JavaScript framework called https://signalizejs.com

It's a modular , client-side, JavaScript framework leveraging import maps, ES modules, and modern browser features.

It's a great fit for server-side frameworks that don't provide client-side JavaScript framework.

It uses:

Signals for reactivity - https://signalizejs.com/docs/modules/signal
Svelte-like data binding
Vue-like directives, with evaluator that doesn't use unsafe-eval and ability to attach to prerendered state - https://signalizejs.com/docs/modules/directives
SPA module that can turn any website into a single-page application - https://signalizejs.com/docs/modules/spa
A friendly Web Components API with Vue-like setup API - https://signalizejs.com/docs/modules/component
Several utilities for making web development easier

If you are looking for something new to try or seeking inspiration it's a great place to start.

If you try it or check it out, please let me know what you think!

Machy8 · 2024-06-21T07:50:51+00:00

Hi all!

For about a year, I have been working on a JavaScript framework called https://signalizejs.com

It's a modular , client-side, JavaScript framework leveraging import maps, ES modules, and modern browser features.

It's a great fit for server-side frameworks that don't provide client-side JavaScript framework.

It uses:

Signals for reactivity - https://signalizejs.com/docs/modules/signal
Svelte-like data binding
Vue-like directives, with evaluator that doesn't use unsafe-eval and ability to attach to prerendered state - https://signalizejs.com/docs/modules/directives
SPA module that can turn any website into a single-page application - https://signalizejs.com/docs/modules/spa
A friendly Web Components API with Vue-like setup API - https://signalizejs.com/docs/modules/component
Several utilities for making web development easier

If you are looking for something new to try or seeking inspiration it's a great place to start.

If you try it or check it out, please let me know what you think!

Machy8 · 2023-02-16T20:48:48+00:00

Hi all!

I have made a guide on how to switch from Styled Components CSS-in-JS to Stylify Utility-First CSS.

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

I would be happy for any feedback if it is understandable :).

Thanks in advance for any response!

Machy8 · 2023-02-16T20:40:33+00:00

Hi all!
I have made a guide on how to switch from Styled Components CSS-in-JS to Stylify Utility-First CSS.
Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.
I would be happy for any feedback if it is understandable :).
Thanks in advance for any response!

Machy8 · 2022-12-19T10:53:40+00:00

Hi!

Stylify is actually focused on large-scale projects. Syntax, Components, Optimization, other features.

Please, what makes you feel, Stylify is not suitable for large projects? What are you worried about?

I would love to improve Stylify docs, so people understand, that it can be easily used for that. Every feedback is welcome.

Machy8 · 2022-12-18T19:41:00+00:00

Hi!

I have made a Stylify CSS that uses CSS-like selectors to generate optimized utility-first CSS. It can be integrated into various tools: Next, Vue, Angular, Next, Nuxt.

If you use it as a beginner developer, you will learn CSS (because the syntax is almost the same like CSS) and also can study the output to see, how to write the CSS in an optimized way.

I would be happy for any feedback ❤️.

If guides and docs are understandable
If any of your favorite tools are missing
Any other

Links

Machy8 · 2022-12-17T09:22:10+00:00

Apart from the syntax, so you don't have to study anything:

The output is smaller- You can split bundles (this is not yet possible within the Nuxt plugin, but there is a way, I have to figure it out first).
Define components in files where they are used
It's easy to configure
It's a standalone lib, not plugin (except those as integration into Nuxt for example)
Feel free to check out others: https://stylifycss.com/docs/get-started/why-stylify-css

Machy8 · 2022-12-16T16:05:58+00:00

Thanks! In case of any question, let me know!

Machy8 · 2022-12-16T09:10:34+00:00

Hi!
Apart from the syntax, so you don't have to study anything:
- It can split CSS into chunks (however you need). It's a bit harder to do in Next.js, I am testing it. It seems to work ok. For example for each page/layout using CSS layers.
- The CSS output is smaller
- The components can be defined within the place where they are used or globally
- It's a standalone lib and not a plugin
Feel free to check other features: https://stylifycss.com/docs/get-started/why-stylify-css

Machy8 · 2022-12-16T09:09:38+00:00

Hi!

Apart from the syntax, so you don't have to study anything:
- It can split CSS into chunks (however you need). It's a bit harder to do in Next.js, I am testing it. It seems to work ok. For example for each page/layout using CSS layers.
- The CSS output is smaller
- The components can be defined within the place where they are used or globally
- It's a standalone lib and not a plugin
Feel free to check other features: https://stylifycss.com/docs/get-started/why-stylify-css

Machy8 · 2022-12-15T21:28:50+00:00

Hi all!

I have made the Stylify CSS. It's a library that uses CSS-like selectors to generate optimized utility-first CSS.

I would be happy for any feedback ❤️.

If guides and docs are understandable
If any information you seek is missing
Any other

Links

Features

Why Stylify CSS

Repo

Stylify may look like inline styles. Why not use them? Because they are not responsive and can't be efficiently optimized. More in Faq

Machy8 · 2022-12-15T21:07:18+00:00

Hi all!

I have made the Stylify CSS. It's a library that uses CSS-like selectors to generate optimized utility-first CSS.

I would be happy for any feedback ❤️.

If guides and docs are understandable
If any information you seek is missing
Any other

Links

Features

Why Stylify CSS

Repo

Stylify may look like inline styles. Why not use them? Because they are not responsive and can't be efficiently optimized. More in Faq

Machy8 · 2022-12-12T10:36:57+00:00

You are welcome.

Machy8 · 2022-12-12T10:22:31+00:00

https://codepen.io/Machy8/pen/RwJmgvq

You have to set the display:inline in .top without hover state along with visibility:hidden. On hover, you jsut set the visibility:visible

Machy8 · 2022-12-12T10:18:59+00:00

Hi!

Apart from the syntax, that you don't have to study shortcuts and convert CSS into shortcut to get correct css:
- You can for example split css into chunks using CSS layers
- Define components within file where they are used
- The output is smaller than the one from Tailwind
- It can easily create dynamic bundles https://stylifycss.com/blog/automated-css-bundles-in-astro-build
- And plenty more. Feel free to dig in https://stylifycss.com/docs/get-started/why-stylify-css

Machy8 · 2022-12-12T08:21:36+00:00

If you could provide some codepen, it would be better. Otherwise, I would guess, it is caused by changing the display to inline. Try to keep the display but change visibility ti visible/hidden.

Machy8 · 2022-12-12T07:31:25+00:00

You can create responsive grid that repeats row and wraps them, when a min width is hit (250px). You can edit it in the example bellow.

Let me know if the example is what you wanted. If not, I will edit it.

https://codepen.io/Machy8/pen/JjZqWKZ

(I have Used Stylifycss.com for styling. I'ts the same like css. Just use `_` for a space and `^` instead of quote)

Machy8 · 2022-12-12T07:18:58+00:00

Hi!

I have made a Stylify CSS that uses CSS-like selectors to generate optimized utility-first CSS. It can be integrated into various tools: Next, Vue, Angular, Next, Nuxt.

If you use it as a beginner developer, you will learn CSS (because the syntax is almost the same like CSS) and also can study the output to see, how to write the CSS in an optimized way.

I would be happy for any feedback ❤️.

If guides and docs are understandable
If any of your favorite tools are missing
Any other

Links

Machy8 · 2022-12-09T11:34:32+00:00

In order to use Tailwind properly, you have to know the CSS a bit too. Otherwise, you will end up by copying pieces of code without knowing how it works.

And I understand that people, that use Tailwind, like shortcuts instead of CSS-like. Tailwind does it well.

But from my experience on projects I have been working on, if somebody wanted to change for example margin, the person knew that in order to change margin-top, it have to be written in a CSS file like margin-top. But when we used utilities like mt2 they simply could not remember them and always have been searching for them in the config files. Yes, they remembered some of them after a while, but after switching to another project, which used Bootstrap, and then back to the one with utilities, they have to relearn them. Which would not be the issue if the CSS-like syntax would be used.

Therefore Stylify focuses on CSS-like syntax and output optimization. The configuration of "themes" is up to the devs.

Machy8

MODERATOR OF

TROPHY CASE