John Meade Web Development

01/12/2021

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!

Some people scoff at the console.log, some people - present company included - cherish the simple met...

08/18/2020

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

02/26/2020

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!!

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

01/15/2020

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!

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...

01/14/2020

One of the youtube channels that I like keep track of is known for their animation. One image stood out at me and I thought I'd set a time limit and see if I could at least get the base of the image in CSS. Here's the result.

01/04/2020

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.

...

01/03/2020

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!

01/01/2020

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

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

12/18/2019

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

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...

09/12/2019

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

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 ...

09/10/2019

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

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...

09/05/2019

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

Parallax is extremely popular right now. Here's a simple way to implement a horizontal parallax with only a couple lines of code.