Good morning everyone and happy MonDev!
How was last week? Did any of you try their hand at some VSCode extensions? :)
I continued to work on mine, but we'll talk more about that below!
This week, however, we're going to talk about something softer, but often sparks fly between supporters and haters: Tailwind ;)
Personally, when it comes to small projects, as those who have been following the newsletter for a while know, I'm definitely happy to use it. I'm still thinking about its use for larger projects. Certainly, when it comes to creating components with tailwind, especially at the beginning, it can become a bit tricky to remember all the necessary classes to achieve the desired result. In this case, tools like today's come to the rescue.
Let's start with a very interesting UI kit: Flowbite is a very complete library, with a substantial free part (also integrable with a paid version), rich in ready-to-use components. Even without installing Flowbite JS (the installable version of the library), it already offers a large number of ready-to-use components that you can use by taking the code provided in the documentation.
From there, it's easy to work on the existing classes to customize the component but starting from a base. Also, I came across this tool some time ago when I started to take a look at Tailwind, and it was also useful for me to be able to take a look at some more advanced uses and get inspiration on how to improve my basics.
Then, by installing Flowbite.js in your project, you'll have complete and interactive components available, integrable with simplicity regardless of the framework (or non-framework if you're not using one) and a rich library of icons without having to perform additional installations.
Continuing on the UI and Tailwind line of this Monday, I also add UI Colors today, a palette generator based on the tailwind schema (thus a starting color and the various saturations distributed with a value from 50 to 900). The interface is extremely simple and immediate: it allows you to choose a starting color from which our entire scale takes shape. Very interesting is, in my opinion, the section just below that shows some examples of how the colors appear on a possible UI, showing on hover for each part the color used among those available.
I realize that for those who are more inclined to the front-end side, this tool could be trivial, perhaps having more ease in building interfaces. But as far as I'm concerned, I find this kind of tool very helpful, being "slower" on this aspect.
Anyway, for those who are not fans of Tailwind, UI Colors also provides export via variables for Scss and CSS so as not to exclude anyone.
I know that many do not appreciate good Tailwind; I, as always, am of the idea that it is a tool and as such will have its strengths and weaknesses.
However, I reiterate my position that for rapid prototyping, I find it an excellent ally, and having some tools in your arsenal that facilitate its use can only be good!
As promised...
Last week I promised that you would be the first to know about a possible release of the VS Code extension of Make-Js-Component. Well, I can tell you that a very simple first release is present on the store, with some default templates for components inserted and ready to be created directly from your command palette!
You can find here the extension page from which you can download it directly to your VS Code.
If you find any bugs or want to contribute to development, the repository is always this one, and in general, any feedback is always welcome.
This week we had lighter tools, just to cushion between a couple of busy weeks!
Next week, in fact, I'll tell you about the Open Source Day that will be held on Thursday and Friday! If any of you will be there, let me know, we can meet there!
In the meantime, I wish you a good start to the week and as always
Happy Coding 0_1
Top comments (0)