So I was starting a new project and decided to update my Vue CLI version. The update was successful and I went on to create a new project.

As soon as I ran vue serve , I had ran into this error message: Vue packages version mismatch error solved.

After a little googling I found a few posts on different sites and tried a few things but, nothing seemed to work. After clicking on the 5th (I think) post redirecting me to Github I finally found an article that solved this issue.

Note the commands used are for Mac.


In this article, I will show you a simple way to show and hide your password on a password type input field. Here is the codepen to the finished product.

Let’s start with the markup, this will be fairly simple and straight forward.

<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="password-container mt-5">
<input class="password_input"
type="password"
name="password"
placeholder="Your secret password">
<a href="#0" class="preview_icon">
<i class="fas"></i>
</a>
</div>
</div>
</div>

To make things easy I used bootstrap utils classes, Font Awesome for the icons and some custom styles as you’ll notice in the codepen.

Let’s get into the JavaScript now 🙂


Today I will show you a simple and easy way to upload images using Node.js and Multer.

In part 1 of this series we will focus on getting the basic functionality working and from there, we’ll hook it up to MongoDB and also check for MIME type before uploading, making sure users only upload valid image formats and also amend filename upon upload.

What is multer? Multer is a Node.js middleware for handling multipart/form-data, which is primarily used for uploading files. You can find the Github repo here. Without further a do, lets get started.

We’ll start with some basic…


Today I’ll show you a simple way to setup multiple popup modals with no framework, just plain vanilla JavaScript. I assume you are familiar with JavaScript, HTML for markup and CSS for some styling. The aim here isn’t to make it beautiful but to make it functional.

Image credits: pexels.com (https://www.pexels.com/photo/book-computer-design-development-326424/)

We’ll start with the markup first. We’ll create two modal triggers for now for simplicity, but the same code will apply for more than two triggers.

<button
type="button"
class="btn btn-sm btn-primary shadow p-2 px-3 popup-trigger"
data-popup-trigger="one">
Popup Trigger One
</button>
<button
type="button"
class="btn btn-sm btn-primary shadow p-2 px-3 popup-trigger"
data-popup-trigger="two">
Popup Trigger Two…


Image credits: Pexels

First things first, I would like to point out I am not the best writer 😅 but I always wanted to contribute over medium whether it was doing a tutorial, sharing my experiences in the design/development or even sharing awesome resources or tools I found. So with that out the way :) let’s continue.

Over the past few months, I’ve been putting a collection together of different gradient and colour pallet inspirations. Whether it is a collection of pre-made palettes or even generators.

I will be sharing what I’ve found so far, together with direct links to the site or…

GistCoding

My name is Kim Petersen From the beautiful Cape Town South Africa. I have a great passion for Web Design and frontend development.

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