DEV Community: Matthew Marquise

Hello! It's been a while...

Matthew Marquise — Mon, 22 Nov 2021 15:44:49 +0000

Lately I've been transitioning from a front-end developer to a UX designer, and I haven't posted much on Dev.to since my popular "Implement Dark Mode on Your Website" article went viral, which now has received roughly 13,500 views. I greatly appreciate all the support from the Dev.to community, and though I have no plans to leave this platform, I just won't be writing as frequently on here, however, I do have another super neat programming tutorial in the works for here. In the mean time, if you want to read more of my design/development content then I'd suggest checking me out on Medium.

Today I just published my second major case study about my journey in designing and developing an entirely new website for a real estate and vacation rental agency in Maine. Read it here.

My previous case study was about designing a concept app that enables users to effortlessly pre-order food from food trucks so they didn't have to wait in line and could be guaranteed food. Read it here.

Again, thank you all for your overwhelming support and stay tuned for the next programming tutorial!

Daily UI :: 001 - Sign Up Page

Matthew Marquise — Wed, 07 Apr 2021 12:34:48 +0000

I completed the first of Daily UI's 100 day design challenge. Here's what I did, how I did it, my thoughts from the first day, and I already strongly recommend doing it!

The challenge:

Design A Sign Up Page.

I began by doing a little research on the internet to gain inspiration. After a few minutes of doing so, I had a couple ideas. For this first day I decided to do two different 'takes' on a sign up page. The first being a modern, minimalistic sign up page for a mobile app. The second also being a modern and minimalistic sign up form but for a website.

Take 1:

Daily UI ::001 - Sign Up Page; Take 1 - Bēhance
Daily UI ::001 - Sign Up Page; Take 1 - Dribble

For this first take I wanted to give designing a sign up form for a mobile app a shot. I'm pretty satisfied with it currently, though there is room for improvement so I'll definitely return to this first take and update it a bit later on.

The first of the two pages, the "Intro Screen" is the welcome/introduction to the app. The page is very basic in the sense that besides the welcome text, it only features a "Create Account" button.

Moving to the "Sign Up Form" page, the page viewed after pushing the Create Account button, it features the actual form where users can choose to create an account with the app, or create one using their Apple or Google account. Once they've filled out their information using any of the sign up options, pushing the sign up button will transport the user straight into the app.

Take 2:

Daily UI ::001 - Sign Up Page; Take 1 - Bēhance
Daily UI ::001 - Sign Up Page; Take 1 - Dribble

For the second take I decided to go with a sign up page for a desktop website. I began with a simple split screen design I've seen countless times on various, popular websites. This sign up form doesn't feature a sign up with apple or google button because I thought it would be more fitting just to have the user create an account directly. It's followed by two check boxes for auto sign up to newsletter, and a select box for accepting terms and conditions.

As for the color and concept of developers who love salads, it's very random and wasn't my original intention but I thought why not add a bit of humor to liven up the project!

As always, thanks for reading, and consider following me on Dribbble and or Bēhance to stay up to date on each project I complete!

The Next Project: Credit Card Checkout Page.

Follow me on my journey as I complete 100 UI/UX design challenges in 100 days!

Matthew Marquise — Wed, 07 Apr 2021 00:01:45 +0000

Today I started the very first day of Daily UI's 100 day UI & UX design challenge! Every day, except on weekends, for the next 100 days I'll be completing each daily project. Depending on the complexity of each project I will likely try and do multiple different takes on each days challenge. Follow me on DEV, Medium, Bēhance, Dribbble, and check out my personal website for updates as I achieve each day's challenges!

Create a Modern Circular Cursor for Your Website.

Matthew Marquise — Tue, 02 Mar 2021 01:37:04 +0000

Have you ever seen those modern websites with custom cursors? Most are circular and really add a unique touch to the sites.

Here are a couple examples of sites that use a circular cursor:

Each of those sites have there own unique version of a circular cursor, and there are countless other websites out there with similar, circular cursors.

When I first began to see this trend, I certainly wanted to give it a shot but wasn't sure how hard or easy it would be. Believe it or not, it's very simple. So this tutorial I not only want to show you how to make a few types of circular cursors, I also want to explain how it works. Let's begin.

Basic Circular Cursor:

Step 1:

Start by creating a basic html webpage to test with.
Create an index.html file a fill it with the below code.

<!-- index.html -->

<head>
  <title>Circular Cursor Tutorial</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">

  <link rel="stylesheet" href="main.css">

  <script src="main.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
  <h1>
    Hello!
  </h1>
  <p>This is a simple, circular cursor that is easy to implement and will truly make your website stand out.</p>
</body>

In the head section you'll notice I've included basic meta tags, as well as an included script for jQuery UI that's being sourced from Google Hosted Libraries. I also linked a CSS and JS file we'll create next.

Step 2:

Now that we have a general base to build on, let's begin adding the code to make it function properly.

Create a CSS file titled main.css and for the entire html file set the property of the cursor to none.

/* main.css */

html {
  cursor: none;
}

You should now see that your cursor vanishes. Now that we've hidden the default cursor, we need to begin adding our custom cursor.

#circularcursor {
  background-color: transparent;
  border:1px solid black;    
  height:20px;
  width:20px;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  position: absolute;
  z-index: 1;
}

This CSS creates the circle we want. You should notice that your new circular cursor is stuck in the top left corner of the webpage. In order to attach it to the now invisible default cursor we need a little javascript.

Once you've added the CSS, create a javascript file titled main.js. Add the following code:

// main.js

document.body.onmousemove = function(e) {
  document.documentElement.style.setProperty (
    '--x', (
      e.clientX+window.scrollX
    )
    + 'px'
  );
  document.documentElement.style.setProperty (
    '--y', (
      e.clientY+window.scrollY
    ) 
    + 'px'
  );
}

In simple terms, this javascript function is just mapping the mouse. If you leave this javascript out, the webpage will have no way of mapping the cursor therefore your cursor will stay in the corner.

You should now have this:

Now that you understand the basics of how to create a custom cursor, let's create a more complex one.

Circular, Inverted Cursor:

Creating a circular, inverted cursor is also very easy.

Step 1:

Start with a basic html file:

<head>
  <title>Inverted Circular Cursor</title>

</head>
<body align="center">
  <div id="invertedcursor"></div>

  <h1>This Cursor is Inverted!</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat elementum risus vitae volutpat. Donec luctus tellus ut ligula tempus semper. Pellentesque ac semper mauris, quis varius purus. Quisque sit amet imperdiet lorem, eget vulputate ante. Suspendisse potenti. Fusce a magna ultrices, aliquet ligula a, pellentesque est. Phasellus non luctus magna.
  </p> 
</body>

Step 2:

Create a CSS file titled main.css. Add a body selector and make sure to set the cursor to none. Follow it with an id titled invertedcursor.

/* main.css */

body {
  height: 100%;
  min-height: 100%;
  cursor: none;
  color: #000;
  background-color: #fff;
}

#invertedcursor {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  top: var(--y, 0);
  left: var(--x, 0);
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: difference;
  transition: transform .2s;
}

The CSS code within, simply determines what the background and text colors also mixing the coloration with the mix-blend-mode. For more info about mix-blend-mode visit: W3Schools.com - CSS mix-blend-mode Property.

Step 3:

Lastly, let's add the necessary JS in a file titled main.js.

// main.js
document.body.onmousemove = function(e) {
  document.documentElement.style.setProperty (
    '--x', (
      e.clientX+window.scrollX
    )
    + 'px'
  );
  document.documentElement.style.setProperty (
    '--y', (
      e.clientY+window.scrollY
    ) 
    + 'px'
  );
}

This JS code simply maps where the cursor is based on a X and Y axis.

You should now have this:

So those are two great examples of custom circular cursors you can easily implement in your website! Feel free to ask any questions or suggest better ways to achieve this in the comments!

Thanks for reading!

Implement Dark Mode On Your Website.

Matthew Marquise — Thu, 25 Feb 2021 19:59:36 +0000

Dark Mode is an extremely popular feature to implement into your website using basic HTML, CSS and JS. So why don't you have it on yours yet? In three easy steps you can enhance your site to incorporate dark mode! Let's get started.

Step 1
Step 1
Step 3
Demo On CodePen

Step 1:

If you don't already have a website, simply create an HTML file.

<!-- index.html -->

<!DOCTYPE html>
  <head>
    <title>Dark Mode Feature</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    ...
  <body>
</html>

Once you have that lets implement the HTML and CSS

Step 2:

In the basic HTML form lets now input everything we will need. Start by connecting your JS and CSS file. add

<!-- index.html -->

<!DOCTYPE html>
  <head>
    <title>Dark Mode Feature</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ADD CSS FILE -->
    <link rel="stylesheet" href="main.css">

    <!-- ADD JS FILE -->
    <script src="main.js"></script>
  </head>

  <body>
    ...
  <body>
</html>

Now we need to create those two files. Feel free to change the name of your css and

In the CSS file we'll add these lines of code.

/* main.css */
body {
  background-color: white;
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

Within the body we have specified that we want our default background to be white with black text. Then in the dark-mode class we've specified that we want want to change the background to black with white text.

Now we need to create the main.js file, the brain of our dark mode feature.

//main.js

function darkmode() {
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);
}

function onload() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}

Once you've successfully created both the main.css and main.js files there's one last thing.

Step 3:

Though you may think you're done, you aren't. Ask yourself this very question. What if my website has multiple pages? how will each page stay in dark mode without returning to the default white background? The answer is far simpler than you think. In the initial body tag on each page add:

onload="onload()"

That's it. Hope this was helpful! Thanks for reading!

Demo On CodePen

https://codepen.io/mattmarquise/details/MWbrNWe

Steps To Creating Modern & Minimalist UI/UXs

Matthew Marquise — Thu, 14 Jan 2021 13:34:36 +0000

I'm no minimalist in real life myself, not sure if I ever could be, but I'm in love with modern and minimalist UI/UXs. No one wants the headache of having to figure out how to navigate the site, or when pop-ups continue to pop up and I can't even get to the part of figuring out how to navigate the complex site.

When building a site, it's important that rather than focusing first on what components you'll incorporate, try putting all your focus towards creating a wireframe. Nothing complex. If you're not all that familiar with wireframes, grab a sheet of paper and scribble down boxes to represent each page and lines going from buttons/links to pages. It can literally be that simple.

If you already have a website that's currently not the best, who says you can't revamp and make visitors happy. It might be worth a shot.

This is yet another shorter post, and most of my posts will likely be shorter, but I personally don't like long posts because I typically don't read them all the way through. Though everyone's different.

Thanks for reading!
~ Matthew Marquise

My Experiences With Various Languages and Frameworks

Matthew Marquise — Sat, 09 Jan 2021 13:37:49 +0000

I've tried learning many coding languages and even though I understood the concepts and always tinkered with each one, many were just not for me. Ruby, C, C++, and Python were just some of the languages I've taken classes on that I had fun learning and making small projects with, but I didn't feel the same sense of passion when it came to those, more back-end languages. I also explored with Php, a popular back-end language and while I didn't like Php, I fell in love with it's framework Laravel. I'm currently learning react, a more front-end focused framework in my opinion, and I'm really enjoying it.

I'm curious to know whether other front-end devs have decided they want to pursue front-end, because they don't enjoy back-end languages as much. Or maybe because you just simply enjoy designing visual components and would rather that than code algorithms.

Thanks for reading!
~ Matthew Marquise

My Journey To Becoming A Developer.

Matthew Marquise — Sat, 09 Jan 2021 12:32:12 +0000

Once upon a time I was introduced to HTML, CSS, and JS. Fast forward years later... I've taken numerous classes and have expanded my knowledge to the point where I not only feel confident in my ability to create modern, stunning, and even minimalistic, yet fully functional UIs that users fall in love with. Two of my relatives originally encouraged me to give HTML and CSS a shot. If I'm being completely honest, I wasn't super thrilled of the thought of code. I had always thought coding was very complex and there weren't many people who did it, therefore there were little or no communities of coders to get help from or to help out or just to simply connect with. I was very wrong. Not only are there a ton of coders/programmers, there's so many communities and platforms for us to connect on!

I've always been a creator, and coding has allowed me to express that in ways I've never been able to before. Some paint portraits, compose music, cook dishes, and I code. I love the process of going from a blank webpage to a full functioning one. It's my canvas.

Would love to connect with more developers on DEV as well as on GitHub and Linkedin!

Thanks for reading!
~ Matthew Marquise

DEV Community: Matthew Marquise

Hello! It's been a while...

Daily UI :: 001 - Sign Up Page

The challenge:

Take 1:

Take 2:

The Next Project: Credit Card Checkout Page.

Follow me on my journey as I complete 100 UI/UX design challenges in 100 days!

Create a Modern Circular Cursor for Your Website.

Here are a couple examples of sites that use a circular cursor:

Table of Contents:

Basic Circular Cursor:

Step 1:

Step 2:

Circular, Inverted Cursor:

Step 1:

Step 2:

Step 3:

So those are two great examples of custom circular cursors you can easily implement in your website! Feel free to ask any questions or suggest better ways to achieve this in the comments!

Implement Dark Mode On Your Website.

Table Of Contents

Step 1:

Step 2:

Step 3:

Demo On CodePen

Steps To Creating Modern & Minimalist UI/UXs

My Experiences With Various Languages and Frameworks

My Journey To Becoming A Developer.