Our second stop in Taiwan was Kaohsiung. Highlights included the Formosa train station’s epic Dome of Light stained glass, Cijin Island, Lotus Pond, Fo Guang Shan Buddha Museum, Ruifeng Night Market, and Liuhe Night Market.

Possibly better than the Dome of Light at the Formosa station was this haunting song they played over the speaker system. We are thankful to have captured the audio snippet below. I could not find any information about the song view online searching nor do I fully understand the lyrics.

I hear:

Turn on the radio 
Turn up the volume
We're going to listen to some great music
Formosa!

I’m totally unsure of the last word that is spoken but I like to think its the name of the station stop in which it is played within. Just makes sense, right?

Cijin island

On our first day, we took a ferry to Cijin (chee-gin) island for exploration and night market goodness.

Kaohsiung

Lotus Pond and surroundings

Pier2 Art Center

Fo Guang Shan Buddha Museum

Liuhe Night Market

The post Kaohsiung, Taiwan, 2019 appeared first on Joe Tower.

This is the first in a new travel post series all about Taiwan. While in Taiwan, we stayed in Taipei, Kaohsiung, Hualien, Juafien, and back to Taipei again.

Our first stop in Taiwan was Taipei. Highlights included hiking Elephant mountain, the Taipei zoo, eating scallion pancakes from Tianjing Chong Zhua Pancake, eating soup dumplings at Din Tai Fung, eating traditional Taiwanese breakfast at Yong He Soy Milk King and one of the most breathtaking experiences of my life thus far: the Maokong gondola line.

Hiking Elephant Mountain

Elephant mountain is a broadly appealing must-experience attraction in Taipei. Not only does it offer exceptional views of Taipei but it does so from multiple vantage points in a choose-your-own-adventure type of hiking experience. There are levels of staircases to work your way up to the top of the mountain. Each level offers some type of opportunity to rest and appreciate the view. While many people choose to stop climbing the mountain at around the halfway point, it is worth the effort to ascend all the way to the top.

Taipei 101

Boa’an Temple

The Boa’an temple is the first temple we experienced in Taipei. The ornateness and overall presence feel significant — bordering on overwhelming.

Yong He Soy Milk King

Soy Milk King, eh? The Taiwanese are serious about their breakfasts. We enjoyed warm soy milk with all the fixings: egg, pork floss, and fried dough.

This was all a hearty and heavy meal to prepare us for a long day at the Taipei Zoo and hiking around the Maokong Tea Village.

Taipei Zoo

I’ve been fortunate enough to have visited zoos around the world — mostly around the United States, but of all of those I have visited, Taipei has one of the best. Not only is it expansive, but it’s also diverse in its animals — to my knowledge not many zoos have both Asian and African elephants. Orangutans are a species I have not been seen in person until Taipei — what beautiful, quirky, muppet-like creatures they are. Below are some of my favorite captures from the zoo.

Maokong tea village

The gondola ride from the Taipei Zoo to Maokong is incredible and one of the most breathtaking and amazing experiences I’ve had. The sun was just starting to set as we made our way back to Taipei from Maokong. The mixture of light and fog was absolutely perfect.

Taipei night walking tour

We found some well-reviewed free walking tours in Taipei by a company called TourMeAway. We joined the Longshan Temple Tour. Overall, it was well worth the ~3 hours. Below are some captures from our experience.

Exploring Taipei

Chiang Kai-shek Memorial Hall & Square

Chiang Kai-shek memorial hall honors Generalissimo Chiang Kai-shek, the former President of the Republic of China. The entire venue houses the Memorial Hall, Memorial Square, National Theater, and National Concert Hall.

Tianjing Chong Zhua Pancake (scallion pancakes)

These scallion pancakes are absolutely delicious. While in Taipei we enjoyed variations on their scallion pancakes several times — with egg and cheese, with egg only, and plain. Each was delicious, cost-effective, and they filled us up. The cooking and crafting process is fascinating in its rhythmic and well-honed workflow.

Exploring Taipei at night

May 8th – May 11th, 2019

We ended our trip by going back to Taipei for three nights before flying back to Minneapolis.

To be continued… (as soon as I finish editing photos)

The post Taipei, Taiwan, 2019 appeared first on Joe Tower.

There is no denying the Apple TV is a remarkable device. Its only significant flaws can be attributed to Apple’s negligence toward iTunes — first in macOS which has trickled into iOS and tvOS. The iTunes experience hasn’t improved in a meaningful way since the birth of the iPod. For a film lover like me who has chosen iTunes as my digital film provider, actually browsing my own library is remarkably frustrating. Not only is the Apple TV slow to load larger libraries, its options for browsing your library are seriously limited. You can scroll down an alphabetical list or browse by Apple’s awful genre categorization. Why is that all that’s available?

No streaming service or paid-for digital video service allows users to curate their own collections of films.

I propose that Apple, with all their clout in the industry, be the ones to change this glaring oversight. Give Apple TV users the ability to create their own “collections “ of films in their library. Say you love Christmas films and wish there was a way to easily browse all the films you personally qualify as “Christmas films”. You could create such a list and label it to your choosing. Then you could add films to it and browse this library collection by that unique grouping. This functionality is nothing new—it’s analogous to playlists in iTunes. Why don’t we have this ability yet? Who wants to go through the arduous task of remembering what films you own, browsing them alphabetically and ultimately succumbing to paralysis by analysis. If only we could create meaningful groups of films. For a film lover like me who watches films annually and by season/holiday, this is just a sad experience.

Imagining what Collections might look like on the Apple TV

Along with showcasing how such a UX change might be executed I’ve introduced some minor but important UI improvements along the way.

This redesign strives to:

1. Provide better library management through the creation and management of user-curated collections of films.
2. Give users better defined active states. In my experience using the Apple TV it’s not always clear which item is actively selected.
3. Provide clearer actions throughout. Give users defined actions to manage their list. This is shown below in the “By collection” sidebar for “Manage collections”. One could also edit the active collection they’re browsing by clicking the “Collection actions” button above the grid of items.
4. Surface some extra details that may otherwise be buried in settings

I only wish Apple allowed developers to execute custom iTunes library applications on the Apple TV. If they did, I would seriously consider creating this experience or working with a group of people who could make it happen.

iTunes dead? All hail TV/Movies app?

I’m hoping that Apple addresses some of its legacy ancient code over the next few years. It’s only a matter of time before someone else comes along and makes something better. Well, one can hope, right? The reality is that no other ecosystem offers such a robust library. Google Movies is getting better all the time but still falling short in comparison. The same could be said for Amazon. As I am editing this post now (June 2019) Apple has announced its plans for the end of iTunes (except on Windows). Maybe the new Movies app will finally give us a more modern experience and management of our purchased media?

Owning media versus streaming?

We are living in a time in which owning digital collections might not even make sense. I choose to invest, digitally, because one can never count on favorite films being available on streaming services and one only has so much physical space for DVDs. In the media management and the streaming world, Plex is the one service in which you can make playlists out of your own purchased media (TV/Film/Music/Podcasts in one playlist). It’s great, but not all my media is in Plex nor is it practical. What I really want is for Plex to merge with iTunes and/or Netflix. That would be kind of amazing. Plex has already collaborated to bring Tidal to Plex on the music side, so perhaps they are working on an equivalent on the film/tv side? One can only hope.

The post Apple TV: Imaging a better UX appeared first on Joe Tower.

The post Recent Records: October 2017 appeared first on Joe Tower.

The post Recent Records: September 2017 appeared first on Joe Tower.

The post Recent Records: August 2017 appeared first on Joe Tower.

The post Recent Records: July 2017 appeared first on Joe Tower.

Whatever the reason, I’m happy I understand it now and feel like I have a better handle on functional programming because of it.

My setup: theme and plugins

• Custom child theme of Twentysixteen
• Advanced Custom Fields plugin
• Regenerate Thumbnails plugin
• All of my ACF images render using their ID as a return value

Helpful resources and WordPress’ own documentation

Some articles about srcset really helped steer me in the right direction in terms of conceptually wrapping my head around how it’s used.

• Responsive Images in WordPress 4.4 – Make WordPress Core
• Optimizing your theme for WordPress 4.4’s responsive images
• Responsive Images Now Landed In WordPress Core

Methodology: image ratios versus image width

For a while, I wrestled with trying to override WordPress’ own srcset sizes with my own. Rather, I distracted myself trying to understand what sizes/ratios they were using them and why my custom sizes weren’t overriding them.

I figured using a 16:9 ratio for all source images, then adding an array of specific sizes within the 16:9 ratio would work. It does work, but it’s too specific and I found that rather problematic. I went researching for image ratio methodology and advice.

There are so many articles about WordPress’ use of srcset but none effectively tackle or give advice on practical image ratios. My advice on this is to start with what you can realistically handle. Meaning, asking yourself how you prepare your images. If you use Photoshop to manually craft lead/featured images and custom image fields, then it might not make sense to make WordPress adhere to those specific dimensions. The crux of srcset is ratios. The browser will only receive the same srcset ratio of sized images that match the ratio of the originally uploaded image. What’s really neat is that you can also simply define an image width and those widths will all get added to the srcset array, which the browser then uses to choose the appropriately sized image to render, given the user’s device resolution. Granted, this is achieved with a bit of help. More on that below in a helper function.

A powerful obstacle: ACF plugin

What’s more than understanding WordPress’ implementation and image ratios, was understanding how to extend its power to the custom fields I’ve created using the Advanced Custom Fields Plugin for WordPress.

By default, ACF doesn’t support srcset properties for custom images. So there are several options ahead to overcome this obstacle. For a while I used WordPress’ get_thumbnail('size'); function for all featured images. Then I simply referenced the largest size I needed for ACF image fields, using the array return value. Then in some templates, I used a slight variation on returning the image values I wanted. The point here is that it all felt too inconsistent. There had to be a better and saner way! And there is!

• Responsive images with WordPress Advanced Custom Fields
• Getting a Image Size URL from the Advanced Custom Fields Image Field
• Responsive Images in WordPress with ACF

After lots of trial-and-error, I have drawn the following conclusions and present each as advice for anyone struggling with srcset in WordPress.

Definition: making your own srcset image sizes

I finally landed on defining image sizes by width, only. I know that I can control the ratio in whatever computer application I’m using to generate the images. It’s redundant to impose the same ratio limitations within my CMS. This was the biggest revelation to me. I spent hours wrestling with different aspect ratios, defining them and regenerating all my website’s images.

By defining the widths only you have all the power and leverage all the reusable greatness.

My custom image sizes

// custom image sizes
if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
  set_post_thumbnail_size( 1800, 9999 );

  // additional image sizes

  add_image_size( 'teaser-square', 300, 300, true);
  //300 square pixels cropped
  
  add_image_size( 'teaser-square-medium', 600, 600, true); 
  //600 square pixels cropped
  
  add_image_size( 'teaser-square-x-large', 800, 800, true);
  //800 square pixels cropped

  // width-only images

  add_image_size( 'three-fourty', 340);
  add_image_size( 'four-twenty', 420);
  add_image_size( 'six-hundred', 600);
  add_image_size( 'seven-sixty', 760);
  add_image_size( 'seven-eighty', 780);
  add_image_size( 'eight-eighty', 880);
  add_image_size( 'ten-eighty', 1080);
  add_image_size( 'twelve-sixty', 1260);
  add_image_size( 'fourteen-hundred', 1400);
  add_image_size( 'eighteen-eighty', 1880);
}

With this setup, I have the freedom to easily reuse all these sizes instead of making them too specific to pieces of content. Having specific ratios may also impose more structure than necessary, too. Again, this is coming from someone who prepares their images prior to uploading them.

Methodology: custom responsive image helper function

//
// Responsive Image Helper Function for ACF
// 
// @param string $image_id the id of the image (from ACF)
// @param string $image_size the size of the thumbnail image or custom image size
// @param string $max_width the max width this image will be shown to build the sizes attribute
//
function grangler_responsive_image($image_id,$image_size,$max_width){
	// check the image ID is not blank
	if($image_id != '') {
	
        // set the default src image size
	$image_src = wp_get_attachment_image_url( $image_id, $image_size );
	// set the srcset with various image sizes
	$image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );
	// generate the markup for the responsive image
	echo 'src="'.$image_src.'" srcset="'.$image_srcset.'" sizes="(max-width: '.$max_width.') 100vw, '.$max_width.'"';
   }
}

Which I use in my templates in the following way.

Declare variables

<?php
/**
 * The template part for displaying content teaser
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
 // get the featured image by defining some variables to print below.
   $featured_image = get_post_thumbnail_id();
   $featured_image_size = 'twelve-sixty'; // Set to custom size set in functions.php
   $featured_image_alt = get_post_meta($featured_image, '_wp_attachment_image_alt', true);
?>

I place my variables, when possible, at the top of each template file, that they’re used in. This brings me comfort in easily scanning the file and getting a quick overview of what I’m doing.

Call the function in your template, passing in the image variables

// print the featured_image variable if it isn't empty.
<?php if( !empty($featured_image) ): ?>
  <span class="post-thumbnail">
    <figure <?php post_class('featured-image');?>>
       <img <?php grangler_responsive_image($featured_image, $featured_image_size,'1260px'); ?><?php echo 'alt="' . $featured_image_alt . '"';?> />
    </figure>
  </span>
<?php endif; ?>

This helper function has served me well. Massive thank you to Aaron Rutley for sharing his helper function. Without it this would’ve taken me longer to figure out.

Conclusions

In conjunction with caching and decent lossless image optimization, srcset can help make your site more performant. I’m excited to push this further, as there may be room for less repetition. The line of how much is too much abstraction is another topic entirely.

I’d love to know if anyone has a better approach than where I’ve landed. Let me know if you’ve had your own srcset or image-related performant revelations, in the comments below.

The post Understanding and extending WordPress’ srcset functions appeared first on Joe Tower.

The post Recent Records: June 2017 appeared first on Joe Tower.

The post DIY Portrait Lighting Setup In a Small Space appeared first on Joe Tower.