I have never been fond of the footer on JWS.app but I’ve been unsure what to use, there. After addressing the elements at the top of the page, it makes sense to turn our attention to the very bottom of the page. Considering how much we have leveraged Bulma so far, it also makes sense …
Continue reading "Fixing JWS.app: Turning our attention to the footer"
Previously, we have looked at the navigation bar, the hero image, and the combination of the two. I figured that next natural step is to look at how to style the content on the page. I want to add some sort of visually pleasing container and Bulma‘s box class seems to be a good option. …
Continue reading "Fixing JWS.app: Styling the content on the page"
Previously, we looked at using Bulma to improve the nav bar and we looked at ways we could improve the hero image. I figured that this week, we would combine the two. See the Pen JWS.app – Hero with Nav by Joe Steinbring (@steinbring) on CodePen. I kind of like this look but the nav …
Continue reading "Fixing JWS.app: What if we merged the nav bar with 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"
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)"
Back in April, I posted about creating JWS.app and I knew at the time that there were issues with it. This new “Fixing JWS.app” series is all about addressing those issues. The first thing that we are fixing is the nav bar. Let’s look at what we are dealing with.
Continue reading "Fixing JWS.app: The Nav Bar"
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"
A few weeks ago, we looked at how to how to use CSS Grid and two weeks ago we looked at how to do a grid layout with Bulma. This week, we revisit Bootstrap for the first time in over five years and look at how to do a grid-based layout with it. See the …
Continue reading "Bootstrap 101: Grid Layout"
Three years ago, I posted something on Bulma while trying to figure out how navigation works with it. After my post on CSS Grid, I figured that I would show how to do a grid-based layout with Bulma. See the Pen Bulma 101: Layout by Joe Steinbring (@steinbring) on CodePen. By default, the column spacing …
Continue reading "Bulma 101: Grid Layout"
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
See the Pen
Auto-updating Background Image (using Vue.js and Axios) by Joe Steinbring (@steinbring)
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 ]