Forem: ChiaraLyn

Tag noscript

ChiaraLyn — Tue, 19 Nov 2024 20:24:10 +0000

Particle.Js (and now tsParticle.js), a funny way to use canvas!

ChiaraLyn — Mon, 01 Nov 2021 16:44:33 +0000

Particles.js

It’s been a long time since I promised to get my hands dirty with the wonderful things we can do with canvas.

Today I had a little taste of the power of the canvas concept. I chose to use a really beautiful library: Particle.Js

It was a very exciting experiment. My demo is really essential but I realized that it has an immense potential for projects in which you want to make the most of design as an art form to communicate and to create different... atmosphere.

After all, the concept of canvas is nothing more than an explicit reference to a white canvas that can be filled with what we want...

So, with Particle.Js it is really simple to have in your hands working, stable, clean, customizable code.

Simply edit your canvas from the tool that Vincent Garreau (Particle.Js author) made available and publish it on Codepen. From here you can use the Javascript, Css and HTML parts in your project.

The rest is built within the div that hosts the canvas.

You can set all the settings related to the number of items you want, the interactions on hover, on click and the ways in which our items must react to these events.

The particles are perfectly customizable and even the base of our canvas can be used with simple CSS or a background image.
Particle types can be chosen from a dropdown that offers default particles, NASA, Bubble, Snow, Nyan Cat.

Particle.Js has 24,899 stars at the moment (including mine!), 282 issues and 4,400 forks and is licensed under MIT.

1) Include CDN library in you HTML file and use the

<div id="particles-js"></div>

to grab you HTML content

2) Create you own custom particles canvas using the page tool at https://vincentgarreau.com/particles.js/

3) Publish it on Codepen using the Codepen button on the top right

4) In you custom JavaScript file copy that Codepen result (same for CSS)

You can find my Demo on Codepen and GitHub

The only flaw that this library has is that it is no longer maintained 😢, but wait! We have a wonderful solution 😎 ❤️ !!

tsParticle.js

tsParticle.js is a library with an implementation really similar to Particle.js (so there is not much different or complex than the previous one, really!!), with new features and very well maintained, created by @matteobruni and released under MIT license and... it's also wonderful ✅!

In order to understand how to implement it, we have a beautiful documentation on Github.

Matteo writes in his article:

[...]I’ll show you some reasons to replace particles.js with the new tsParticles.

tsParticles are fully compatible with the particles.js configuration. Seriously, you just need to change the script source et-voilà you're ready.

tsParticles have a frame per second (fps) limiter, so they don’t let the CPU client suffer more than necessary.

tsParticles have a lot of new features.

tsParticles development is active. [...]

We can find some great examples with tsParticles also on Codepen, just to give you an idea of the potential and you can implement it with Vue, React and even Angular. For Wordpress there is no plugin but you can use tsParticle through Premium Addons for Elementor (in the Premium Particles Add.on section).

I hope that you too can try to have fun with tsParticle.Js, and that you create beautiful patterns for your projects!😊 😊

Halfmoon, let's try to give it a chance

ChiaraLyn — Tue, 26 Oct 2021 18:24:54 +0000

When the evening comes, after work, I love to try and test new things, to try to overcome my limits and learn to handle different technologies, to experience things that normally, during the day, it is not possible to see.
Lately I've been focusing on testing Halfmoon , a css framework with 2526 stars on GitHub at the moment.

The pride of Halfmoon is to guarantee a Bootstrap based structure (Grid System practically identical) therefore familiar (there are very few differences in the classes) and above all, and this is its peculiarity, to provide a very fast support for the creation of the dark mode for our site.

Its beauty comes out above all in the creation of dashboards and tools that include modals, tables, alerts, cards.
The Framework is cross-browser (so you can rest assured ...), the design system is really similar to Bootstrap, therefore it is easy to use for the first time.

I built a very small Dashboard in less than 15 minutes, just to test its robustness and I must say that I have not found any particular problems in adapting to the classes.

Here it is:

The basic structure for a dashboard, for example, provides a div with a page-wrapper class that contains our markup code for the sidebar and navbar and a div with a content-wrapper class for the rest of the content.

Halfmoon's css is based on 1500 css variables (which I personally love), and it is therefore very easy to customize the palette of your site and also it can go without JavaScript despite there is a really well done optional library. The utilities available are sufficient, for projects that do not require particular efforts, Halfmoon is truly complete.

On GitHub there are 59 issues that mostly concern mobile adjustments, progress bars to implement, sliders and checkboxes (which are a sandy part for every frontend dev)...

Mounting it is really simple, you can simply use CDN for Css and JavaScript or you can use npm (you can also use it with React).

There is also a Starter Template Generator for the lazy (I preferred to build my dashboard from scratch) .

When, once the structure is finished, you really want to see our Halfmoon in action, just create a button that will have the function of alternating the light / dark mode and start the framework:

<!-- HTML -->
<button class="btn btn-primary" type="button" onclick="toggleDemo()">Click me!</button>

<!-- JavaScript -->
<script src="path/to/halfmoon.js"></script>
<script>
  // Dark mode toggle demo
  function toggleDemo() {
    halfmoon.toggleDarkMode();
  }
</script>

Halfmoon is released under the MIT license. On Codepen you can find Tahmid who has provided several examples of his Framework.

Although it is little-known and at first glance it seems like an unripe framework, my tests showed that it has a lot of potential, especially for small projects and for quick realizations. It is comfortable, quick to implement, essential and solid. It was really useful and fun to use it ...!

How I turned my (professional) life upside down

ChiaraLyn — Fri, 30 Jul 2021 20:44:41 +0000

Disclaimer!
[This is not a technical article, it is a simple life story 💌].

About 2 and a half years ago, at the ripe old age of 38, with a good dose of courage and perhaps even recklessness, I screwed up my old job, yet another in the field of accounting, and I decided to rush myself headlong into a one-year web development course.

Accounting has unfortunately been part of my life since I was 13, when for my sake, my father forced me without the possibility of dialogue and comparison, to attend a commercial technical institute, and so, already in 1999 I found myself with a title of study that willy-nilly would have jeopardized my entire life path.
The jobs I found were all secretarial and administrative jobs, office jobs that in southern Italy are almost all of the time underpaid and unpaid. Not having the opportunity to go elsewhere, I accepted for years to work in this field, snorting, accumulating stress, feeling defeated at the start, because everything I did had to do with a mechanics of numbers without creativity, schematic, basic if you want, but absolutely always identical to itself. I admired colleagues who were able to be passionate about that double entry system so sterile for me, yet at school I remember having loved the lessons of mathematics, statistics, but despite being excellent in all the subjects of my course of study, precisely in the main subject , accounting, I was lacking, listless, disinterested and I got very low grades, bordering on ridicule, and sometimes I did it on purpose as an opposition and resistance to that fate that I did not want at all (it had never happened to me to burst into tears in the school bathroom for the imminent hour of some subject, but with that subject yes, it happened and also often, and I cursed my dad's choices, because I knew he was condemning me to a life I didn't want).

I felt trapped in an endless nightmare. 💀 The logic behind the mechanisms of accounting slipped through my fingers, I could not grasp the dynamics of the main concepts, and I was amazed when a colleague solved an accrual or a deferral in two seconds! I, on the other hand, had to go and search on books or on the internet to figure out how to do it ... and after so many years of work, nothing, I had to go and review everything every very stale time, feeling an incapable idiot!
And then life in the office, in a place that I hated with all of myself, with colleagues who often left me behind instead of helping, in a world where a mistake meant penalties for the company that inevitably fell on me, without possibility to explain, to make people understand… All absolutely unacceptable to me.

So, after an honored career as an accountant and salesman lasting about 15 years, I decided to do away with accounting, also because in the last company I worked there was a climate of terror that I had never experienced at that level, which led me to mental and physical exhaustion.
And then, with an almost eighteen-year-old son, what better opportunity to give him the best example in the world: "you can always start over and you can always make up for your mistakes and those of others!"

Saturated with a destiny that I hated, I took courage in both hands and launched myself into this world...

But immediately I felt like I was a fish out of water! Logic... this enemy. I, who have always harbored a colossal yearning for creativity, how could I once again immerse myself in an area where logic is necessary and numbers are fundamental?!

But slowly, during this one-year course we got to build the first page in HTML ... Here, I had CREATED something, things were taking shape under my eyes, a magic! Then the CSS, how wonderful! I was speechless in front of the teachers' examples and once back home I started to create my styles on simple inputs or labels, on basic layouts, and slowly things became more complex, more stimulating, then the Bootstrap discover. I loved it immediately: components ready there for me, which I could modify as I pleased without worrying about responsive! 🎨 The turn of PHP, SQL, mysterious languages, studied on books and examples on the blackboard, I enjoyed pulling out the data from the DB with this SELECT *, what a feeling... it was like being in DisneyLand, an enchanted world made of mysteries to solve, of things that do what you say, that respond to your commands, knowledge was becoming the brush with which I painted the things I had in mind in the browser...

Sometimes discouraged by the infinity of things to study and understand, I sought relief on Instagram or Twitter, or in Youtube videos of Indian, American, Australian developers, some like Brad Traversy, DevEd, Kyle, Adrian Twarog, Gary Simon, Maximilian Schwarzmüller (and many others) they kept me company and still do today, to help me understand... to feel less clumsy...
Everyone says don't compare you to other developers because everyone is at a different point of the way and I still feel at the starting lines... although at times I am amazed at what I can do.

When I look at my code, made during that beloved course, I smile and think: "Look at that stuff, look how unaware I was...". My life, after that course, has become diametrically opposite to the previous one. I work by writing code, I love what I do, I am passionate about it, it excites me, I like to understand new things, I feel alive and dynamic, I love Javascript and its absurd contradictions, I love CSS, I play with HTML and feel in control of it. Sometimes I believe that code, in all its forms, is art, especially the frontend side (which is what fascinated me immediately and which I chose as a path). What had always been my most brutal enemy, logical thinking, now I like it, loops make sense, conversions make sense, everything makes sense here! The code I write takes me far from where I am, I could also work at the bottom of a cave lost in the void, I would still be satisfied.

In the meantime, the first job has arrived, which due to the pandemic has become full-remote, a job that I love, in which I do frontend and create, create all day. I improve line by line, mistake, delete and learn. I study in the evening and with my headphones on my head I listen to the music that I love, that relaxes me and that gives me the energy to write...

So, my small desk at home, which used to be just an insignificant place in the living room, has now become my headquarters, I have slowly improved it, made it comfortable, pleasant, I am finally at ease and this freedom has skyrocketed my productivity. In the morning I can't wait to sit down to start creating, again, day after day. And when the work is finished, I start studying (Javascript is truly infinite, I don't think I'll ever finish exploring it all!), Then dinner and relaxation. But satisfied and happy (although sometimes the console.log doesn't show me what I expected!)

I have finally found my way. I finally found a home that welcomed me, because not only is the creative idea of the code that fascinated me, but I found that there is a community of wonderful people who share their work, their efforts, and here, at least in my experience, in Italy, culturally we are not used to doing it, we tend to keep for ourselves what could be a source of income in some way, being careful not to give others undeserved advantages. Well, in this field it is not like that, everyone invites others to improve, everyone shares not only the code they write, but their fears, their experiences, and even the Italian developers have a sense of sharing that in other work fields... it just doesn't exist.

About Italian developers, the community on Instagram and Twitter that I started following is beautiful, they are all guys who have a sense of self-irony that makes you laugh, because every time they write something you think: "It also happened to myself!". You never feel alone, ever.

But I am too shy and I still feel too "immature" (about coding) to expose myself in these communities but I do not hide that I would really like to interact. For now I'm just a curious and silent observer.

Then more and more often I read the invitation to developers to write on blogs or expose themselves with their articles to improve themselves, to break away from their closed world and actively participate in the community, to make themselves known, the problem as I mentioned before is my immeasurable shyness and the dread of reproaches… I would never want someone to treat me badly online and make me lose hope of becoming a great frontend developer. I still feel like a child learning to walk, I'm still very afraid of losing, of failing, of looking inexperienced. All this is too precious for me to put it at the mercy of anyone, my path, for now is only at the beginning and I love my job, one day, when I will feel more confident, probably in my portfolio (to which I do not have the time to work, damn!😇) I will add the blog section and write what I learned and how I did it.

For now, I just wanted to explain that you must probably bet, always bet, without particular fears, without losing self-confidence, knowing that everything is always a 50 and 50. If that web development course I did had made me lose a year of time and my future was now in pieces, probably no one here would be reading this post of mine and I would be back in a gray office posting invoices. Instead, I won this bet and I'm here, to tell you that I love this world, an inclusive world, made of sharing and respect, of art and logic, of seriousness but also of irony, a world of colorful themes in our IDEs, a world that makes us all feel, perhaps, a little less alone and a little less resigned to the ugliness that happens to us.
(Oh!, in the end my sweet dad admitted his mistake, he realized he had clipped my wings and lost his bet... But he is happy for me and that is enough for me...😊).

I hope I have not bored you 😅 and I hope that someone can draw strength from my story. 🙋❤️❤️

Discovering Tailwind CSS

ChiaraLyn — Wed, 12 May 2021 19:05:51 +0000

After work there is always something to study and deepen, and if it happens that your work is also your passion, studying is really the best thing!

Today I am about to finish the first "dusting" on Tailwind (tailwindcss.com), to then move on to some practical exercises on components.

Tailwind represents my short break from the JavaScript in-depth course that I hope to finish soon. Studying a new CSS Framework makes me feel almost guilty because I was "born" with Bootstrap and now I feel "at home" when I use it, but Tailwind is a low-level framework and allows you to build responsive components and configure the project at the start, creating customized layouts and with a lot of margin of choice on the color palette and typography.

The only thing to keep in mind when using Tailwind, born to write semantic CSS, is that the markup will get very polluted, and I must to evaluate the maintainability of code written with this type of approach.

With the @apply directive you can create custom classes to which the Tailwind classes "attach", in order to have a custom nomenclature.

In general, I like the idea of keeping markup separate from style, but so it is! Obviously having HTML overflowing with classes it doesn't really matter to some.

Tailwind also, in production, removes the unused CSS, so that we can lighten and optimize the project!

Visual Studio Code has the integration of the Tailwind Intellisense extention, that allows you to view the list of classes while you are writing, a very valuable aid to not do the continuous "ping pong" from the documentation.

I still have to "mess around" a bit to get carried away, but Tailwind has given me good vibrations, also for the good documentation that it hangs around with, (the community looks really nice, you can find it on Discord and GitHub) I will probably work on some small components to share on Codepen.

I hope it will make me passionate as did Bootstrap, which I consider "my giant". On the next break from JavaScript, let's see... what could I do? Of course! I'll go dig into Bulma's documentation...!