Making your forms look less “straight out of the box” is sometimes just as simple as adding a border-radius to things. In this quick post, I figured that I would show the power of it. Continue reading How to use border-radius to round the corners of inputs, buttons, and divs
I am slightly surprised that I haven’t done a post on this, yet. My intention with this blog post is to simply show how to layer text on-top of an image. Continue reading How to add text on-top of an image
Lazy loading is a method for optimizing a website by loading images (or iframes) on demand. If properly implemented, the browser should load the images that are at the top of the page first and wait to load the rest until the user starts to scroll down the page. This is something that is relatively easy to implement but more difficult to test. While writing the examples for this post, I opened the browser console, switched to the network tab, and watched the images load. If you want the effect to be more pronounced, you can throttle the speed of your network connection but it didn’t help to much in my case. Continue reading Three ways to load lazily
Last week, we talked about CSS sprites and a large benefit of it was that the user didn’t need to retrieve as many image files from the server. This week, we are going to look at how to not need to retrieve ANY image files from the server. The method is something called data URLs. I used this concept five years ago with my TNO encryption demo. Let’s take a look at a quick demo.
In the simple demo above, I base64 encoded a JPEG file and just included the full content of the file (using the
data:[<mime type>][;charset=<charset>][;base64],<encoded data> syntax). Let’s looks at one more example.
This one works the same basic way but instead of using a JPEG file, I’m using a PNG file.
So, why use this method? The big reason is to have one fewer asset to load into the page. You are still requiring the client to download the same amount of stuff but it is via one HTTP request instead of two. I have also seen people use this method to more easily include graphics in HTML email messages.
Easy enough, right? 🙂 Have a question, comment, etc? Feel free to leave a comment.
One of the goals for JWS.app was for it to pull in activity from a bunch of sources and update itself. That is the reason why I created the “superfeed”. Let’s start by looking at its current state.
Getting the content from the photo blog, the blog, dev, github, and the two tumblr blogs and interleaving the content was tricky enough. When it came to displaying the updates, I just used an unordered list in version 1. I couldn’t immediately think of an alternative. In previous weeks, we have leveraged Bulma. I figured that we could use it again.
This might be my favorite option, so far. This example uses Bulma‘s Cards. My goals were for long-form posts (like this) to be more prominent and to do something mildly similar to Microsoft’s Metro design language.
I am not completely sure if the Bulma Card solution is best option or not but I do think that there is a next step to this. Previously, we looked at the Notifications API and that got me thinking about incorporating push notifications. I might need to add some sort of Modal (to have something to link to), though.
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 to do it the Bulma way. Let’s see how that would look.
It works but let’s try it another way.
I’m not sure if I prefer option 1, option 2, or future option 3 but I am guessing that there might be a part 2 to this post.
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.
You will notice that I also added an “upwardbump” class to create a slight overlap of the content over the hero image. It is a visual element that is present on the current style of this blog that I kind of liked.
I kind of like this look but the nav bar might not have enough contrast. Let’s try one more variant.
What do you think? Have any questions, comment, etc? Feel free to drop a comment, below.
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.
I think that we can improve it with a gradient and making the image a background.
The next big question is if the navbar should be visually overlapping the hero image and if the website name should be a little more prominent. That might need to wait for a future post, though.
Have a comment or suggestion? Feel free to drop a comment, below.
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 above example has no custom CSS in it. It simply uses Bulma and it’s CSS classes for styling. This example is pretty close to the original look and feel but it implements a hamburger menu when the screen width calls for it. It is worth noticing that I did add an “onclick” in order to get the hamburger menu to work.
For second option, let’s look at how to implement the navigation using Bootstrap.
Have a question, comment, suggestion, etc? Feel free to drop a comment, below.