Animate your pages when an element is visible in the viewport with pure JavaScript

Photo by Priscilla Du Preez on Unsplash

In my experience as a frontend developer, one of the things that I often develop are animations on the scrolling of the pages.

My approach to this type of development has changed over the years.

At first, I used the scroll event in JavaScript, but on the performance side, I realized that it was not a great way to trigger an event every time the user scrolled the page.

Later I decided to use external libraries like ScrollMagic, wow.js, AOS etc. I was always happy with the result (even if they were limited to animate), but nowadays the performances of…


Save time and use everything Tailwind CSS makes available to you

Photo by Lukas Blazek on Unsplash

It has been nearly a year since I started to use Tailwind CSS instead of Bootstrap.
Sometimes I wonder if in a few months I’ll be able to add only utilities or if I’ll remember how to write CSS code.

Anyway, today I’d like to show you six utilities that I met after a few months of using Tailwind CSS but I would have been grateful if someone had introduced them to me before.

Inset

Utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent. …


Let’s see what is the best way to pass data between components

Puzzle
Puzzle
Photo by Bianca Ackermann on Unsplash

When I started using Vue, I just passed data between components through the props, deepening this framework I found that I could achieve the same result with slots.

Let’s understand the differences and the reasons for using props instead of slots and vice versa.

PROPS

They are attributes that are exposed to accept data from the parent component.

Let’s create a component MyMessage with props

<template>
<div class="message">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "MyMessage",
props: {
msg: String,
},
};
</script>
<style scoped>
.message {
color: red;
text-decoration: underline;
}
</style>

In this way, we…


Let’s see in which cases we need to use a state management pattern like Vuex

Photo by Artem Gavrysh on Unsplash

Nowadays we overuse frameworks and libraries, just because they are popular but not because we need them.

I realized this by looking at the mistakes I made when I started using Vue.js.

At that time I did a lot of research and I noticed that everyone was using Vuex in Vue.js projects, so I started developing my first projects using Vuex too, and I was happy, it worked, it seemed useful and everyone used it, in short, it was cool.

I started using it for everything, even making simple API calls whose data was only used in a single component.


A great way to create a simple modal from scratch

Vue.js simple modal

Modals are one of the most used components in the UI, we can find them in the most popular CSS frameworks like Bootstrap or libraries of UI components like TailwindUI.

They are useful because in our projects we often want to show messages or we need to allow users to make an action without to change page.

Usually, I used Bootstrap modals on my projects but when I changed job I started to work with Vue.js and TailwindCSS and one of my first tasks was to create a modal component.

So I started some research, I found many examples and…


A quick comparison of the most popular Vue.js frameworks

https://undraw.co/

Gridsome and Nuxtjs are the most popular Vue.js frameworks at this time and will certainly be throughout 2020.

Today many people and companies prefer to start using Vue.js from one of these frameworks.

Why start from a framework?

The main reason is that these frameworks already have a lot of preset configurations and are easy to use.

Let’s see an example

If you have already used Vue.js, you know that to create a Single-page Application you also need to include Vue Router and make the necessary configurations, Gridsome and Nuxtjs automatically generate the vue-router configuration simply based on your file tree. …


Step by step tutorial

For the last past months, I have been searching for a Headless CMS to connect with a modern Javascript framework like Vue.js to use for my clients.

After a long search, I found the perfect combination for my needs thanks to a static site generator like Gridsome and a headless CMS like NetlifyCMS.

Static site generators have become very popular because they are straightforward to use, and they are based on JavaScript frameworks like Vue.js or React.

A static site generator uses plain text files rather than a database as the content repository and builds HTML files by applying layouts…


The future of frontend development

Photo by Hans-Peter Gauster on Unsplash

In the last years, microservices have exploded in popularity, and many companies are using them to avoid the limitations of large, monolithic backends.

But today many companies continue to struggle with monolithic frontend codebases.

Micro Frontends come to help!

What are Micro Frontends?

The term Micro Frontends extends the concepts of microservices to the frontend world.

With Micro Frontends we can think about a website or web app as a composition of features which are owned and developed by independent teams.
Each team develop its features independently.
When I say Independently, I mean also using different technology stacks if the teams prefer.

An example of Micro Frontends


and you should start using

Photo by Pankaj Patel on Unsplash

Many times we write HTML code in a superficial way, probably many of us think that HTML is not essential and we don’t need to know it in depth.

All this makes me angry, and you know why?

Because everyone says that HTML is too simple and it’s not even considered as a programming language.
My question is WHY?
If it is so simple, why don’t we start to do some research and we are committed to writing the HTML tags correctly?

START TO USE HTML TAGS IN THE CORRECT WAY!

Why are HTML tags important?

Some of the reasons are the following.

• They help to have a cleaner and easier to maintain code.

That’s…


Understanding when to use watchers instead of computed and vice versa

Photo by Tim Gouw on Unsplash

After writing my first article about The Difference Between Computed and Methods in Vue.js, I noticed that many people were confused about another difference, the one between computed properties and watchers.

I think the reason why this happens is that they can both run when a value changes.

I had the same doubt, so let’s see when to use watchers instead of computed and vice versa.

Computed properties

Computed properties are very handy for manipulating data that already exists. They are cached based; this means that the function will run only once until the values don’t change again (also if it’s…

Luca Spezzano

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store