John Meade Web Development

Whoa, it's been a minute! Not to fear, here's my first post of 2021 on how to use a simple technique to help organize and switch on/off important logs as you debug!

A Simple Approach To Using Console.log For Debugging Some people scoff at the console.log, some people - present company included - cherish the simple met...

When watching a starlink launch... start implementing the starlink display... right? I'm excited to implement the timeline portion!

My new navigation tutorial just went live! Check it out!

Navigation components are funny things! They need to be instinctive, simple, and fit within the expectation that users already have about how navigation works. That being said, there's still room for innovation and creativity!!

Spinning Disc Navigation Navigation components are funny things! They need to be instinctive, simple, and fit within the expectation that users already have about how navigation work...

There's a studio in Salt Lake called Dinng. Their website has a great 3d text effect. I wanted to take the idea and make the effect more controlled, hinging on cursor placement fully. Try it out and let me know what you think!

3D Welcome This is inspired by the welcome on the front page of a web shop in Salt Lake called Dinng ( dinng.com ). I wanted to create the same type of effect but...

There are many different ways to display product on a website. One key to stick to though is 'Less is More'. Here's an example of a minimalistic design that still offers information, breathing space, favorite, and social media features.

Store Front Product Cards ...

This is a buzz-topic on the front end over the last several weeks. It's an interesting carry-over from real life to web. As a musician, I've wanted a ROLI Seaboard for quite a while, so I'm excited to see it pop up in web development!

Welcome to 2020! What better way to celebrate than with a redesign! Here's mine.

JM Web Design and Devlopment JM Web Development offers web desgign and development services. Current work is focused on projects which support the chingu.io platform.

Check out my latest pen! Click in to see the scrolling letter animation.

Lucky 7 Nav This is inspired by a nav animation that I saw on Julia Michael's artists website. I approached it in a slightly different way than they did, but I'm h...

The Intersection Observer is a perfect tool for keeping tabs on elements on your page. You can use it for lazy-loading, starting animations - the sky is the limit! Check out my quick tutorial on using it to hide or show a scroll-to-top icon :)

Using Intersection Observer to Hide and Show Elements The Intersection Observer is a perfect tool for keeping tabs on elements on your page. You can use it for lazy-loading, starting animations - the sky is the ...

Check out this new tutorial on the John Meade Webdev youtube channel!

Query The DOM: Click Finder Game Project There are many different ways you can get information about your application through queries in your JavaScript. In this project we implement the window.clie...

My youtube channel launched today! Check out my first video about implementing horizontal parallax scrolling!

Horizontal Parallax Implementation - HTML/CSS/JS Parallax is extremely popular right now. Here's a simple way to implement a horizontal parallax with only a couple lines of code.