DEV Community: Luca Spezzano

JavaScript Array Methods: A Comprehensive Guide

Luca Spezzano — Tue, 03 Jan 2023 16:35:22 +0000

Top JavaScript Array Methods with Real-World Examples

JavaScript arrays methods are a very powerful for organizing and manipulating data natively.

While there are many articles and examples available online for working with arrays in JavaScript, these examples often only cover arrays of strings or numbers. In reality, a more common scenario is working with arrays of objects, especially when making API calls.
Therefore, it can be useful to have a list of the most useful array methods and examples specifically for working with arrays of objects.

Today, I would like to share some of the most useful array methods that I have found helpful when working with arrays of objects.

Get an array of objects with a key “status” equal to “active” from an array of objects in JavaScript


let listUser = [
  { id: 1, name: 'Alice', status: 'active' },
  { id: 2, name: 'Bob', status: 'inactive' },
  { id: 3, name: 'Charlie', status: 'active' },
  { id: 4, name: 'Dave', status: 'active' }
];

let activeUsers = listUser.filter(object => object.status === 'active');

console.log(activeUsers); 

// [{ id: 1, name: 'Alice', status: 'active' }, { id: 3, name: 'Charlie', status: 'active' }, { id: 4, name: 'Dave', status: 'active' }]

The filter() method creates a new array with all elements that pass the test function provided. In this case, the test function checks if the status property of the object is equal to 'active'. If it is, the object is included in the new array. If it is not, it is not included.

Find an object with a specific ‘id’ in an array using JavaScript

let listUser = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
  { id: 4, name: 'Dave' }
];

let result = listUser.find(object => object.id === 3);

console.log(result); 
// { id: 3, name: 'Charlie' }

The find() method returns the value of the first element in the array that satisfies the provided testing function. In this case, the testing function checks if the id property of the object is equal to 3. If it is, the object is returned. If it is not, undefined is returned.

If you like, you can check out the full article with more examples on Medium 👇

JavaScript Array Methods: A Comprehensive Guide | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Jan 3, 2023 ・
Medium

If you are not able to read the article, in the comments is present the friend link ;)

TailwindCSS Masonry Layout

Luca Spezzano — Wed, 29 Jun 2022 07:25:32 +0000

The Masonry layouts once were used exclusively for image galleries.

But this kind layout is very catchy for the users, so the use cases have increased nowadays, it is used for post list, showcase list etc etc.

Let’s do it using some random images found on Unsplash

Just 4 classes to create this layout, amazing right?

ou can find on Codepen here the basic layout and here the blog post layout.

If you like, you can check out the full article on Medium 👇

TailwindCSS Masonry Layout. How to Develop a Masonry Layout Only… | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Jun 27, 2022 ・
Medium

Some of the largest companies using Vue.js

Luca Spezzano — Fri, 18 Mar 2022 06:07:37 +0000

I updated today my article and compared to 2020 it seems that Dribbble and Nespresso no longer use Vue.js while companies like Sony, 9GAG, Foxconn and Aramco have started using it 🚀😍

Google
Apple
Nintendo
Behance
Trivago
Gitlab
Trustpilot
Pornhub
JustEat
Glovo
Zoom
The Motley Fool
BitPay
Square
Livestorm
BMW
Louis Vuitton
Upwork
Namecheap
Bilibili
Sony
9GAG
Aramco
Foxconn

Check out the full article on Medium to discover more companies 👇

Google, Apple and Other Users of Vue.js | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Mar 21, 2022 ・
Medium

ps. If you know other companies using Vue.js/Nuxt.js please let me know so I can update the article 😉

How to Build an Accordion Component in Vue.JS

Luca Spezzano — Tue, 02 Nov 2021 10:42:04 +0000

How to create a reusable accordion component from scratch

This is my fourth “How to” article on Vue.js components, I have seen that they are the most read, probably because they are step-by-step tutorials that allow you to create something concrete and usable very fast.

So I decided to share with you one of the components that I use most often during the development of my projects: the AppAccordion.

The Accordion component is very useful and can be found in many libraries such as Bootstrap, for this reason, we can consider it one of the most used.

I have prepared a demo and you can have a look here 👇

Check out the full article on Medium 👇

How to Build an Accordion Component in Vue.JS | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 4, 2021 ・
Medium

Ps. In the comments you will find the friends link if you have finished your monthly view on Medium ✌️❤️

How to Build a Reusable Tab Component In Vue.js

Luca Spezzano — Mon, 04 Oct 2021 09:33:41 +0000

A great way to create a reusable tabs component in Vue from scratch

Tabs 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 can have different styles but their main job is to change the content at the click of a button while staying on the same page.

Once I used to work with the tabs of Bootstrap on my projects but starting to work with Vue.js and TailwindCSS I had to think about how to develop this component from scratch.

Creating a reusable component in a project that is flexible enough to allow the parent to choose the content is certainly complex.

You can find the demo con CodeSandbox here

If you are interested in reading the whole article with the step by step tutorial go here 👇

How to Build a Tab Component In Vue.js | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Oct 4, 2021 ・
Medium

How To Trigger a Scroll Event in Vue.js

Luca Spezzano — Tue, 16 Feb 2021 11:45:26 +0000

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

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 a website are very important, so I asked myself, do I really need external libraries to create simple effects on the scroll? They add weight to the bundle size.

What I use today when I have to run animations or trigger events on the scroll of the pages is the Intersection Observer API.

Today we are going to develop a component in Vue.js, which will take care to trigger an event when it is visible in the viewport.

I have prepared a demo and you can have a look here 👇

Check out the full article on Medium 👇

How To Trigger a Scroll Event in Vue.js With the IntersectionObserver | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Oct 7, 2021 ・
Medium

Ps. In the comments you will find the friends link if you have finished your monthly view on Medium ✌️❤️

The most famous companies that currently use Vue.js

Luca Spezzano — Tue, 24 Nov 2020 16:06:09 +0000

A few days ago I landed on the Google career website, my attention was caught by an icon of my chrome extensions, the one of Vue.js, it was active.
This means that Google uses Vue.js. That surprised me a lot. Indeed in the last years, the interest in Vue.js increased significantly, but I didn't expect that a company like Google has already started to use it.

I started doing research about companies that are using Vue.js/Nuxt.js in production. I found out that some of the most interesting and famous companies in the world already use it.

This is the list:
• Google
• Apple
• Nintendo
• Behance
• Trivago
• Gitlab
• Trustpilot
• Dribbble
• Pornhub
• JustEat
• Glovo
• Zoom
• Nespresso
• The Motley Fool
• BitPay
• Square
• Livestorm
• BMW
• Louis Vuitton
• Upwork
• Namecheap
• Bilibili

To learn more about where and how these companies are using Vue.js, read the article on Medium 👇

Google, Apple and Other Users of Vue.js | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 24, 2020 ・ 5 min read
Medium

The Difference Between Props, Slots and Scoped Slots in Vue.js

Luca Spezzano — Wed, 28 Oct 2020 10:55:47 +0000

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

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.

We have seen many ways of passing data between components, it depends on your needs whether to use props or slots.

With props, you can only pass values to the child component, so the parent wouldn’t be able to customize the child.

If you have a defined design and you just need to change some values, use props!

Slots give you more flexibility and allow you to customize the child component from the parent.

If you want to give the parent the freedom to customize components, use slots!

Check out all the full article with the examples on Medium 👇

The Difference Between Props, Slots and Scoped Slots in Vue.js | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 13, 2020 ・ 4 min read
Medium

Ps. In the comments you will find the friends link if you have finished your monthly view on Medium. If you are not happy that the article is on Medium, nobody forces you to read it.
Peace and love ✌️❤️

How to Build a Modal in Vue.Js

Luca Spezzano — Tue, 05 May 2020 09:08:36 +0000

A great way to create a simple modal from scratch

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 were:

when the modal was very high it was cut
when the modal was open, the body of the page was still scrollable
they did not give to the parent the possibility to customize the content of the modal
they didn’t give explicit methods to trigger some events on the opening and closing actions

Today we are going to build a modal component that should be fine for every need, it will fix the problems above:

it will fit the page according to its content and it will become scrollable automatically
when the modal is open, the body of the page will not be scrollable
the parent will be free to customize the component adding also HTML
there are closeModal() and openModal() events that will give you the opportunity to trigger other events.

Check out how to build your modal component on Medium 👇

How to Build a Modal in Vue.Js. A great way to create a simple modal… | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 19, 2020 ・ 4 min read
Medium

Ps. In the comments you will find the friends link if you have finished your monthly view on Medium. If you are not happy that the tutorial is on Medium, nobody forces you to read it.
Peace and love ✌️❤️

What to Choose Between Gridsome and NUXTJS

Luca Spezzano — Thu, 13 Feb 2020 10:18:23 +0000

A quick comparison of the most popular Vue.js frameworks

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.
This is only one of the simplifications provided by these frameworks.

If you want to discover the main differences, continue reading the article on Medium 👇

What to Choose Between Gridsome and NUXTJS | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 19, 2020 ・ 4 min read
Medium

Ps. If you are not happy that the article is on Medium, nobody forces you to read it. Peace and love ✌️❤️

Connecting Gridsome to NetlifyCMS - Step by step tutorial

Luca Spezzano — Fri, 24 Jan 2020 10:23:12 +0000

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.

Headless CMS make easy to access content via RESTful API.

These create a new architectural concept also called JAMstack, which I talk about more in this article, I recommend you read it to be able to better understand the topic we’re going to deal with today.

Today we will use the JAMstack architecture by connecting Gridsome to NetlifyCMS.

What are we going to develop?

We will develop a simple blog with a list of articles and the specific page of the article, to show the basic functions and how to connect the two technologies step by step.

Then it’s up to you to discover all the features.

By following this tutorial you will be able to create your CMS with these technologies in 9 steps.

Check out the tutorial on Medium 👇

Connecting Gridsome to NetlifyCMS | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 19, 2020 ・ 9 min read
Medium

Ps. If you are not happy that the tutorial is on Medium, nobody forces you to read it.
Peace and love ✌️❤️

Micro Frontends Architecture - The future of frontend development

Luca Spezzano — Tue, 10 Dec 2019 14:26:15 +0000

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.

To see a practical example and find out which big companies are already using this architecture, read the full article on Medium 👇

DEV Community: Luca Spezzano

JavaScript Array Methods: A Comprehensive Guide

Top JavaScript Array Methods with Real-World Examples

Get an array of objects with a key “status” equal to “active” from an array of objects in JavaScript

Find an object with a specific ‘id’ in an array using JavaScript

JavaScript Array Methods: A Comprehensive Guide | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Jan 3, 2023 ・ Medium

TailwindCSS Masonry Layout

TailwindCSS Masonry Layout. How to Develop a Masonry Layout Only… | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Jun 27, 2022 ・ Medium

Some of the largest companies using Vue.js

Google, Apple and Other Users of Vue.js | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Mar 21, 2022 ・ Medium

How to Build an Accordion Component in Vue.JS

How to create a reusable accordion component from scratch

How to Build an Accordion Component in Vue.JS | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 4, 2021 ・ Medium

How to Build a Reusable Tab Component In Vue.js

A great way to create a reusable tabs component in Vue from scratch

How to Build a Tab Component In Vue.js | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Oct 4, 2021 ・ Medium

How To Trigger a Scroll Event in Vue.js

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

How To Trigger a Scroll Event in Vue.js With the IntersectionObserver | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Oct 7, 2021 ・ Medium

The most famous companies that currently use Vue.js

Google, Apple and Other Users of Vue.js | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 24, 2020 ・ 5 min read Medium

The Difference Between Props, Slots and Scoped Slots in Vue.js

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

The Difference Between Props, Slots and Scoped Slots in Vue.js | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 13, 2020 ・ 4 min read Medium

How to Build a Modal in Vue.Js

A great way to create a simple modal from scratch

How to Build a Modal in Vue.Js. A great way to create a simple modal… | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 19, 2020 ・ 4 min read Medium

What to Choose Between Gridsome and NUXTJS

A quick comparison of the most popular Vue.js frameworks

Why start from a framework?

Let’s see an example

What to Choose Between Gridsome and NUXTJS | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 19, 2020 ・ 4 min read Medium

Connecting Gridsome to NetlifyCMS - Step by step tutorial

What are we going to develop?

Connecting Gridsome to NetlifyCMS | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 19, 2020 ・ 9 min read Medium

Micro Frontends Architecture - The future of frontend development

What are Micro Frontends?

Micro Frontends Architecture. The future of frontend development | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Nov 19, 2020 ・ 2 min read Medium

Luca Spezzano ・ Jan 3, 2023 ・
Medium

Luca Spezzano ・ Jun 27, 2022 ・
Medium

Luca Spezzano ・ Mar 21, 2022 ・
Medium

Luca Spezzano ・ Nov 4, 2021 ・
Medium

Luca Spezzano ・ Oct 4, 2021 ・
Medium

Luca Spezzano ・ Oct 7, 2021 ・
Medium

Luca Spezzano ・ Nov 24, 2020 ・ 5 min read
Medium

Luca Spezzano ・ Nov 13, 2020 ・ 4 min read
Medium

Luca Spezzano ・ Nov 19, 2020 ・ 4 min read
Medium

Luca Spezzano ・ Nov 19, 2020 ・ 4 min read
Medium

Luca Spezzano ・ Nov 19, 2020 ・ 9 min read
Medium

Luca Spezzano ・ Nov 19, 2020 ・ 2 min read
Medium