Fixing JWS.app: The Hero Image

Last week, we looked at more ways to tweak the nav bar on JWS.app.  This week, I figured that we would move down to the hero image.  The current hero image is dynamically generated based upon a subset of images on photos.jws.app.  It doesn’t look great, though. See the Pen JWS.app – Hero (Before) by Joe Steinbring …

Continue reading "Fixing JWS.app: The Hero Image"

Fixing JWS.app: The Nav Bar (Part 2)

Last week, we looked at two ways to fix the nav on JWS.app.  For the first option, we simply added an additional header that displays when the screen width gets narrow enough.  For the second option, we introduced a hamburger menu.  This week, let’s look at two new options. The first of this week’s options …

Continue reading "Fixing JWS.app: The Nav Bar (Part 2)"

I created a new website

I haven’t had a lot at jws.app since registering the domain so, I spent a bit of time over the past few weekends and finally built a website there.  The idea was that it pulls recent activity from travels.jws.app, photos.jws.app, blog.jws.app, github, and DEV and auto-updates the website based upon those feeds.  I wanted to …

Continue reading "I created a new website"

Vue.js watch properties, Google Blogger APIs, and Dynamic Backgrounds

For today’s post, I wrote a pen where the goal was to take the latest photo posted to https://photos.jws.app/ and set it as the background image. In it, I used the blogger API to get a JSON object and I parsed content for the first href. I then pushed that into a second array and used the first array item as the background, using document.body.style.backgroundImage.

See the Pen
Auto-updating Background Image (using Vue.js and Axios)
by Joe Steinbring (@steinbring)
on CodePen.

I wanted to give the user the ability to change the background, so I output “thumbnails” (they are just the same images with a limited width) of all the images and added v-on:click to each one so that you can switch.  You’ll notice that when the user clicks an image, it changes the value of current Image to equal index. Vue watches the value of currentImage and changes the value of document.body.style.backgroundImage when it happens.

Vue watchers give you a lot of flexibility because you just need to change that index and vue does the rest.  There is no need to add a bunch of functions to an onclick event.

Have a comment or question?  Feel free to drop it in the comments, below.

[ Cover photo by Luke Chesser on Unsplash ]

Editing SVG Images in CSS

You might have noticed in my previous post about dark mode that there was a css rule to flip an SVG image from dark to light.

Inverting SVG Images With CSS Filter

See the Pen
Inverting images in CSS
by Joe Steinbring (@steinbring)
on CodePen.

There are a few other things that you can do, though. The same filter function can do blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate. Let’s take a look at one other example.

Blurring SVG Images With CSS Filter

See the Pen
Blurring images in CSS
by Joe Steinbring (@steinbring)
on CodePen.

So, there are a few options available for you, out there. Have a questions? Feel free to drop a comment, below.

So, you want to enable dark mode on your website?

Starting with macOS Mojave, Windows 10 version 1903, and Android Pie, users can set a system-wide preference for dark mode or light more within apps.  The idea is supposed to be that you set a preference once and every application on the device then respects that preference.  So, how do you get your website to respect those system preferences?

Well, starting in recent versions of (chromium versions of) Edge, Firefox, Chrome, and Safari, you can use the prefers-color-scheme media query.

Since it is a media query (and uses a binary setting), you can default it in one direction or the other.

Light Mode by Default

See the Pen
How to implement light mode (by default) in CSS
by Joe Steinbring (@steinbring)
on CodePen.

Dark Mode by Default

See the Pen
How to implement dark mode (by default) in CSS
by Joe Steinbring (@steinbring)
on CodePen.

As you can see above, all you need to do is wrap a chunk of CSS in “@media screen and (prefers-color-scheme: light)” or “@media screen and (prefers-color-scheme: dark)”.

Have any questions?  Feel free to drop a comment, below.