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

In this way, we are saying that the component accepts a value called msg. …


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

Image for post
Image for post
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.

So I would like to help you to understand when it’s the right time to use Vuex. …


A great way to create a simple modal from scratch

Image for post
Image for post
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 packages which were doing that, but these did not cover all the cases, some of the most common problems…


A quick comparison of the most popular Vue.js frameworks

Image for post
Image for post
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

Image for post
Image for post

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 to them.
The generated static site files(HTML, CSS, JS) are delivered to the end-user exactly as they are on the server. …


The future of frontend development

Image for post
Image for post
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

Image for post
Image for post

Let’s take an example of Micro Frontend using the browse page of Netflix.
We assume that there are four teams (team A, team B, team C, team D). …


and you should start using

Image for post
Image for post
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 right, and it may sound silly! But having a well-structured HTML code undeniable helps to have a cleaner and more comfortable to maintain code for all developers. …


Understanding when to use watchers instead of computed and vice versa

Image for post
Image for post
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 called many times in the same template). …


I changed the way I use CSS thanks to Tailwind

Image for post
Image for post
Tailwind CSS classes

As a frontend developer focused on the CSS architecture, I like to use the best methodologies to write my code. I always do research to understand the frameworks that suit my needs and can be scalable.

A few months ago talking with my colleague the name of a CSS framework came out: Tailwind CSS.

Usually, I used Bootstrap for most of my projects, but a few weeks ago, I started to use Tailwind and it completely changed my way of using CSS.

What is Tailwind CSS

As we can read on the official website

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. …


From the Idea to the Prototype in Four Days

Image for post
Image for post

What is the Design Sprint

The Design Sprint is a proven process, that can be from four to five days in its full version.
It is a process for validating ideas and solving significant challenges through prototyping and testing ideas with customers.
It is developed by Google Ventures and increasingly used by large companies. It is one of the most effective ways to quickly find solutions to complex problems in teams as an alternative to classic exhausting meetings and long work sessions that often prove to be less productive.

It is essential that all the work team is present during at least the first three days of the Design Sprint. The process works to the best of its potential if the ideas and discussions arise from the active participation of each interested member in the project, in our case 6 team members participated in the sprint. …

About

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