Modern Card Hover Animations, Css and Javascript
A great hover effect can make user interfaces feel alive it's a small detail that adds visual polish and depth. This article will cover hover effects on cards, walking through three custom-made variations for a card's background. The main idea? Adding unique twists to the classic subtle glow where your mouse hovers. As usual with my articles, expect imagery, code examples, and a live demo at the end!
What a backend looks like Javascript, Express and Node
This article is going to go over the backend! More specifically, what a simple backend looks like, how everything fits together with a database, and most importantly, folder structures. We are going to go over each folder of a common backend and discuss why they exist, what they do, what they contain, and how they tie in with the frontend.
Flow Fields, painting with math
This article is going to go over flow fields! A really fun and interesting concept used in computer graphics, generative art and fluid mechanics. Flow fields can be used in so many creative ways a website background, for a card or maybe for illustrating a simple image? By the end you will (hopefully) have your own flow field to work with while also understanding how it works and how to dive deeper if you want. And of course all with diagrams, cool imagery and a live example at the end.
Building a Mouse-Responsive SVG Polygon Background with JavaScript and CSS
This article will go over how to transform a static SVG image into a cool mouse responsive background! It can be used as a cool add on for a hero for portfolios, interactive websites, or even in more professional settings if you're feeling like creating something interesting. More specifically, this article is about manipulating a polygon background generated from Haikei, a free SVG pattern and effect generation resource.
Particle systems
The goal of this article is to introduce creative coding. The focus will be on a particle system and how to use logic, math, and programming to create something from nature. It's a great way to practice fundamentals and improve problem-solving skills because you see the results of your work in real time. Although this is just an example/baseline, hopefully, after this, you will have the tools to create anything you want things such as lightning, fire, wind the possibilities are endless.
Mapping A full stack application
This article is going to map a fullstack system: the what, where, and why. This isn't really system design but going over a pre designed system and aimed at beginner to lower-intermediate web developers. There are going to be three sections. First is serving code; this will go over what happens when you visit a fullstack application. The second is logging in, this is a smaller section, but in most fullstack applications, being logged in is fundamental. The third section is common operations, this section is going to go over what happens when someone logs in and is using the application. Where does JWT fit? Cookies? CORS? HTTPS? API calls? And other things that are important to understand when building a fullstack application.