Redesigning This Blog Based on Components

Around the end of June, I decided it was time to redesign my blog. On a flight back from Disney in Orlando, Florida, I opened up Sketch and began crafting a new design.

This is what I came up with:

I’ve always built my WordPress theme from scratch. I like having as little code as possible, speed, and hand-crafting custom CSS. I’m not against frameworks, I just choose not to use one for my own site. More on that in a future post.

Then I let the design sit for a week. Great.

I was also stuck on what I wanted the mobile layout’s navigation to look like. I still have work to do on that. That’s fine. Ship it. Iterate. Repeat.

Evolving the Approach

In the past, I would have taken my own mockup, put it in Zeplin, and then start coding out the CSS from the top down. However, this time, I decided to try something different: I would look at the code as components. With this task, I was not only creating the HTML/CSS but also cleaning up the PHP & HTML that makes up the current theme.

The site would consist of: the main template structure, a blog template, the main navigation, a blog topic navigation, the search bar, a social media cluster, and the blog post content area.

To build momentum, I started out with the smaller components. Doing that ends up being a quick win, which gives you a boost of creative energy. Then repeat and knock out another; repeat it again.

Search Your Own Facebook Posts

For the Desktop version of Facebook go to:
https://www.facebook.com/[yourprofilename]/allactivity

Or click in the top right menu and choose Activity Log:

Activity Log

On the next page, you’ll see the following:

Facebook Profile Search

At the top right from where it says “Activity Feed” is a smaller search field. This will allow you to search any previous post that you’ve made on Facebook in the past.

This is a great way to find old posts quickly.

How to Backup and Rollback iPhone Apps

I recently had an issue with an iPhone app in which the latest version caused a bug that prohibited the basic function of it.

After contacting customer service, I was told the best thing I could do was wait and they were working on an app update to fix it. The app store approval can take days, sometimes weeks.

I knew the previous version worked. So I would just rollback an old version. Did I have one? Well luckily, in iTunes I did have one. In this post I’ll show you how to find an old version, restore it, and use a tool to create backups for the future.

Finding an App in iTunes

I use iCloud for my primary phone sync. However, if you can, you should sync with your computer in iTunes from time to time. In iTunes you’ll see the following: ( press the image to zoom )

iTunes Backup Preferences

Press, the “Backup Now” button to make an initial backup. Also in Options, it’s good to have “Automatically sync when this iPhone is Connected” checked.

Once you’ve done this, in the top left hand corner of the screen you’ll see a menu. Press “Apps”.

Apps

In iTunes your apps should show up. I don’t constantly update my apps in iTunes, so as you can see “Update” banner appears on app icons. This means its an older version. In this case, perfect, we want an older version.

Force Facebook Open Graph to Scrape on Publish in WordPress

On a recent project, the problem that we ran into is that on the first share Facebook has not scraped the content then it won’t pull the proper description or image for sharing.

Facebook debug tool allows you to test to see if Open Graph is being utilized properly for your content. The problem is many times once it has been “debugged” the API is just scraping the content so it has what it needs. You either have to wait until someone shares your content first, if that works well, or manually scrape it yourself.

Viewport Bug in Mobile Safari on iPhone and iPad

This bug had me scratching my head for awhile to find a solution. Viewport settings should be used for iPad and iPhone. If done right, this will result in a properly sized page and a more crisp rendering. Will also play nice with your CSS Media Queries.

The Problem

When I rotate my iPhone or iPad from portrait to landscape view, the viewport does not resize itself automatically.

Instead, it keeps the device-width to be the same width as portrait view, in landscape view and throws the CSS rendering totally off.

From there, a user has to pinch to resize to see the desired CSS. Now that’s not user-friendly.