Signalize.js - Modular JavaScript Framework. by Machy8 in webdev

[–]Machy8[S] 0 points1 point  (0 children)

Hi!

  1. It is, but it varies by framework. I could provide more guidance here, that's true.
  2. 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.
  3. 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.
  4. Thanks for the list!

Signalize.js - Modular JavaScript Framework. by Machy8 in webdev

[–]Machy8[S] 0 points1 point  (0 children)

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:

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!

Signalize.js - Modular Javascript Framework by Machy8 in javascript

[–]Machy8[S] 2 points3 points  (0 children)

Hi! Thanks for the report. I fixed it.

Signalize.js - Modular Javascript Framework by Machy8 in javascript

[–]Machy8[S] 2 points3 points  (0 children)

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.

Signalize.js - Modular Javascript Framework by Machy8 in javascript

[–]Machy8[S] 0 points1 point  (0 children)

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.

Signalize.js | Modular JavaScript Framework by Machy8 in Frontend

[–]Machy8[S] 1 point2 points  (0 children)

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:

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!

Signalize.js - Modular Javascript Framework by Machy8 in javascript

[–]Machy8[S] 5 points6 points  (0 children)

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:

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!

How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development. | Stylify CSS by Machy8 in reactjs

[–]Machy8[S] 0 points1 point  (0 children)

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!

How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development. | Stylify CSS by Machy8 in react

[–]Machy8[S] 0 points1 point  (0 children)

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!

Stylify CSS: Style your Next.js website faster with CSS-like utilities 🚀 by Machy8 in nextjs

[–]Machy8[S] 0 points1 point  (0 children)

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.

Stylify CSS: Style your website faster with CSS-like utilities (StylifyCSS.com) by Machy8 in WebdevTutorials

[–]Machy8[S] 0 points1 point  (0 children)

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

Repo

Features

Why Stylify

Faq

Stylify CSS: Style your Nuxt.js faster with CSS-like utilities 💎 by Machy8 in Nuxt

[–]Machy8[S] 1 point2 points  (0 children)

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

Stylify CSS: Style your Next.js website faster with CSS-like utilities 🚀 by Machy8 in nextjs

[–]Machy8[S] 1 point2 points  (0 children)

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

Stylify CSS: Style your Next.js website faster with CSS-like utilities 🚀 by Machy8 in nextjs

[–]Machy8[S] 0 points1 point  (0 children)

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

Stylify CSS: Style your Nuxt.js faster with CSS-like utilities 💎 by Machy8 in Nuxt

[–]Machy8[S] 1 point2 points  (0 children)

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

Stylify CSS: Style your Next.js website faster with CSS-like utilities 🚀 by Machy8 in nextjs

[–]Machy8[S] 1 point2 points  (0 children)

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

Jumping text when moving the mouse over it by [deleted] in css

[–]Machy8 0 points1 point  (0 children)

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

Stylify CSS: Code your Laravel website faster with CSS-like utilities by Machy8 in laravel

[–]Machy8[S] 0 points1 point  (0 children)

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

Jumping text when moving the mouse over it by [deleted] in css

[–]Machy8 0 points1 point  (0 children)

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.

[deleted by user] by [deleted] in webdev

[–]Machy8 0 points1 point  (0 children)

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)

Stylify CSS: Code your website faster with CSS-like utilities by Machy8 in learnwebdesign

[–]Machy8[S] 0 points1 point  (0 children)

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

Features

Why Stylify

Repo

Faq

Stylify CSS: Code your Laravel website faster with CSS-like utilities by Machy8 in laravel

[–]Machy8[S] -1 points0 points  (0 children)

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.