Sunday, December 18, 2016

FlexSlider - Setting maximum height and prevent content from reflowing / shifting

I'm making a website right now (actually more like remaking an old one) and a free wordpress theme I am using has the jQuery "FlexSlider" plugin built in for displaying wordpress galleries. However, I hated how the sliders were acting by default when loaded with images of varying height; the height of the slider dynamically changes to match the active img element, which means that content below it gets pushed down or up when the slider animates. This is actually terrible for UI, because an element can move unexpectedly right as a user is about to click on it.

How I wanted the Flexslider to act was to have a fixed size container, and then resize the images, not the container, to match my height constraint. If you are having trouble understanding what I mean, perhaps an example of default vs desired behavior is the best way to illustrate my issue:

Flexslider images

  • Image 1: 300 x 200 px
  • Image 2: 300 x 400 px
  • Image 3: 300 x 200 px
  • Image 4: 300 x 200 px
Default behavior:
  • The slider starts with a height of 200px, based on the first slide. When it gets to slide 2, it dynamically changes the container (<div class="flex-container">) to have a height of 400px, which shoves/bumps all the content below the slider down by 200px from where it just was.
  • Here is a demo of this default behavior:
Desired behavior:
  • The slider container is constrained to a height of my choosing, in this example, I might pick a max-height of 200px, since that lets 3 out of the 4 images display at full size, and only negatively affects 1 image. On slide 2, the container should stay the same height, but instead of cropping (e.g. overflow:none) or squishing (e.g. setting img height to match container and disregarding aspect ratio), it should keep the aspect ratio and downscale the image to fit.
Unfortunately, I spent a while searching across forums, as well as the official github repo for the FlexSlider plugin, and I couldn't really find any easy solutions. Most of the solutions I saw either cropped images, or did something like set the height of the slider to the largest image, instead of allowing for a custom max-height to be used across all images (it looks like this is actually what the newer versions of the plugin do). Another common suggestion was just to ensure that all slider images have the same height by manually cropping them, but that is a pain and not really a solution. In the end, I gave up on finding someone else's solution and decided to take a stab at it myself.

CSS is definitely not one of my strengths, but I managed to find an excellent solution, mostly by trial and error. This solution allows for a custom height, to which the slider and all internal images will be constrained. Images that are larger than the maximum height will be automatically downscaled, while preserving aspect ratio, and they are both horizontally and vertically centered. I would highly suggest having separate maximum heights for mobile vs desktop screen sizes, which is in my example CSS by way of media-queries. In my example, the mobile size is 200px high, while larger screens get a slider with a height of 300px. Super simple fix, but I couldn't find anything that accomplished it when I was search, so I figured I would post it to share with others. Here is my CSS solution - both the CSS combined with a live demo (hit the "result" tab to see the fix in action):


Tuesday, August 9, 2016

Best fonts for eBooks

The Best Fonts for Ebook Readers, According to Book and Typeface Designers

Friday, August 5, 2016

LastPass JS Exploit

Yet another event that vindicates my paranoia and persistence in sticking with offline KeePass
LastPass Happily Forfeits Passwords to Simple Javascript

Thursday, July 14, 2016

Advice for night owls in dealing with the normal work grind

There is actually really good advice in this!

Six Ways Night Owls Can Thrive in a Nine-to-Five Work World http://lifehacker.com/six-ways-night-owls-can-thrive-in-a-nine-to-five-work-w-1783537377

Sunday, June 26, 2016

Explore investment opportunities

SeedInvest: Explore investment opportunities

 (public equity crowdfounding)



Found via Wikipedia - looks interesting

Tuesday, June 21, 2016

OnePlus 2 - Rooting and Multi-Window Mode

OnePlus 2 Rooting:
-----------------------------------
OnePlus 2 - Enabling Multi-Window Mode / True Multi-tasking:
  • After using the OnePlus 2 for more than 5 minutes, I quickly realized just how big my new phone was. Coming from the Moto G, this phone feels enormous, and to be realistic, it is pretty big, even when compared to competitors. Thus, it felt really wasteful to have this huge screen and be only using it for one simple app at a time. I wanted to see if I could multitask, and specifically with multi-window mode.
  • If you are rooted, this is actually incredibly easy.
  • Guide: http://forum.xda-developers.com/android/general/guide-enable-multi-window-mode-android-t3121483
    • My steps were even simpler; I simply installed the ROM Toolbox app (free), which let me edit my build.prop file in seconds to change the user type from "user" to "userdebug", then I rebooted, went into develop options, and turned on "multi-window".

  • So far, most apps work fine with it, and it is great for using Gmail on one side and some other thing on another.

Monday, June 20, 2016

June 2016 - Smartphone Research and Comparison

These are my quick notes / comparison table for shopping for a new Android smartphone. I was only looking at phones with 3GB of RAM or more, since my irritation with my current phone was how the small amount of RAM (1GB, it is a Moto G 1st gen) caused pretty much every app to crash or behave erroneously when being pulled from the background.


Phone
Price
Fingerprint?
Camera
PPI
Major Pros
Major Cons
Overall
$154
Yes
14MP
401
Astounding price to spec ratio, plus 4165mAh battery
Company has horrible rep, dev support, BAD signal support
Price is sort of a red flag and is in line with consensus to avoid - IGNORE
$199
No
13MP
267
AMOLED (pretty), nice design
Not much, just stiff competition, no LTE band 12, NOT AVAILABLE ANYWHERE
Good budget phone, but not much else.
$350
Yes
24MP
490
AMOLED (pretty),  good specs
Mixed reviews, no LTE band 12
Considering, but steep jump from $200 range to $300+ -- tied with Nexus 6
$300-400
Yes
16MP
401
Trustworthy, pure android, Moto
Rumors of heating issues, not out for a bit, pricey, NO COMPASS?!
Probably worth jumping off the Moto ship, considering the high price and mixed initial reviews - seems like Nexus 6 would actually be better
$300
No
13MP
490
AMOLED (pretty), STOCK, great reviews
Dated (2014), no fingerprint
Seems like Moto X Pure is much better bang for buck
$300
Yes
13MP
401
Big battery (4100 mAh)
No LTE band 12, Dated
No compelling reason to get instead of competitors - IGNORE
$200
No
13MP
403

No LTE band 12
Nothing impressive - IGNORE
$300
No
16MP
583
Full LTE support (including band 12), Removable battery,
No fingerprint

$300
No
21MP
520
Full LTE support (including band 12), water protection
No fingerprint, IPS instead of AMOLED
Considering
$300 (don't be misled, DON’T BUY ON AMAZON)
Yes
13MP
401
Full LTE support, 64GB OF MEMORY, 4GB OF RAM!!!!!!
It's not moto. That's it. The only con. Type-C USB is a little annoying, but it is the future anyways.
WOAH, WE HAVE A WINNER, WHY DIDN'T I KNOW ABOUT THIS PHONE EARLIER????
$400
Yes
16MP
401
Full LTE, AMOLED, Fast charge, NFC, 6GB OF RAM!
Pricetag
If you want the newest and greatest, this is the BEST bang for your buck. If you like to upgrade frequently, OnePlus 2 might be a better buy until this drops in price.

I ended up going with the OnePlus 2, despite the OnePlus 3 just being released, since I didn't want to pay over $300 for a smartphone that I am probably going to upgrade out of anyways in a year or two. So far, I have been extremely satisfied with my OnePlus 2! I'll have another post in a bit about what I did to make the phone even better right out of the box.

Honestly, I don't get the hate towards the OnePlus brand of phones. I had never heard of them before, because they are rarely mentioned online (if you bring up the brand on most common forums, you get hushed really quickly). From my perspective, it seems like everyone should love them: they are really close to stock android, easy to root, the spec/feature to price ratio is INCREDIBLE, they are good looking, and they (so far) have been OK with rolling out updates (my OnePlus 2 immediately upgraded to Marshmallow after I turned it on).

Monday, May 30, 2016

Kolor Panotour - VR Mistakes - 5.30.2016

After enabling VR for a tour that I recently made in Kolor Panotour I noticed that several hotspots were missing in the tour when using the VR mode, but were there when using the normal viewing mode. I quickly stumbled upon this thread on the official Krpano forum that made me think maybe my hotspots were not being set as "distorted". I was quickly to able to verify that this wasn't the case, by examining the special VR XML file that PanoTour creates in the output folder - the distorted="true" flag was indeed correctly set on hotspots.

However, in inspecting the VR XML file, I found that not only were the missing hotspots not present in the VR XML, neither were the entire panoramas that they were linking to! I was thoroughly perplexed and spent quite a while screwing around with various settings to no avail. Finally, I found my answer and facepalmed myself I may now have a blister; I missed the fact that PanoTour only supports FULL 360x180 scenes for VR - as per this extremely relevant note from a page on their site about VR mode:

  • Only full 360°x180° scenes are kept.
    • If there are no 360x180° scenes, then the tour will be empty (blank screen).
    • Any spots pointing to non 360x180° scenes will be removed.

From < http://www.kolor.com/wiki-en/action/view/Panotour_-_Notions_-_VR_Mode >

Whew! Easy fix! On scenes were the source file is not a full 360x180, just tell the program that it is (simply change the "Horizontal" to "360" and "Vertical" to "180" when you have a scene selected > Settings (sidebar) > Projection > Input Field of View"). After I did this to all my scenes, all the missing hotspots reappeared in VR mode as well as the full scenes they are linked to.

The only way this really affects output is now you can't have cropped panoramas where, if for whatever reason you wanted to exclude the very bottom and top of your source file from showing (perhaps because it isn't there to start with), you can't. If it simply isn't there, the program simply fills in the space with black (I'm sure you have seen this before in virtual tours before, where instead of gracefully masking out a tripod, the editor has simply left a big gaping black hole.

Sunday, May 29, 2016

Kolor Panotour - Quick Notes 5.29.2016

Multiple floorplans

  • The answer to using multiple floorplans with a single tour is a bit hidden in the docs, but the easiest way is to group your panoramas and then assign one floorplan per group (e.g., one group is "floor 1", another group is "floor 2", etc.)

Programatically interating with Krpano via API

  • Easy to do with pure Krpano - just edit XML
  • Harder to do with Kolor AutoPano - using "build" overwrites custom XML. Can use the "Call Actions on Tour Events" plugin - but that won't let you set heading individually per panorama.
  • My solution - call custom JS with panorama / heading value pair that dynamically changes
    • Core reference doc = http://krpano.com/docu/actions/
    • Set a callback to your custom function using the "Call Actions on Tour Events" plugin
      • You could technically set up a callback by using the XML of your tour, but the if you rebuild your tour, Panotour will overwrite your custom XML
    • Setup your custom JS file to react
    • Test / Success!

Adjusting the radar heading in Kolor Autopano

Monday, March 7, 2016

8 Underrated Javascript Tools You May Not Know About

I thought I would share a few tools that I have found helpful for working with JS, that I wish someone would have shared with me earlier.

  1. Google's Closure Compiler - http://closure-compiler.appspot.com/home
    • This is a tool to compress and optimize your Javascript code. Accessible via an easy to use user interface, as well as through an API.
  2. Visual Event - http://www.sprymedia.co.uk/article/Visual+Event+2
    • A bookmarklet tool for visually exploring where events have been attached to DOM elements and how they are handled. Very useful, especially since event handling can be such a confusing part of Javascript.

Sunday, January 31, 2016

Testing AdWords Website Call Conversions WITHOUT Clicking on Ads

Testing AdWords Website Call Conversions WITHOUT Clicking on Ads

Already familiar with AdWords Website Call Conversions and want to jump right to the easy way to test them without click on ads? Click here!

Background:

AdWords Website Call Conversions (aka WCC) are a powerful, yet rarely utilized feature offered by AdWords. They work like this; if someone clicks on one of your AdWords ads and visits your website as a result, any phone number listed on your site is automatically replaced with a dynamic call tracking number that Google will use to track the call and make sure the keywords/campaign used to drive the call are properly credited.

The biggest drawback to AdWords Website Call Conversions is that Google does not offer any easy way to test it and make sure you have set it up correctly. In fact, their official guide just says to try and do a search that will bring up your ad, then click on it and check to see if the number is dynamically replaced on your site. This a terrible testing system though, as this doesn’t work if you are an ad agency that build campaigns for clients that are geo-targeting outside of your location, plus, it requires that you not only stumble upon your own ad, but you also have to get an impression for one that has an active call extension. Add in the fact that call extensions require a certain search volume to be shown, and it can make it very hard to test WCCs.

Recently, I got fed up with the lack of testing tools for AdWords calls to website conversions and decided to take a look at the Javascript source for the script that is called when you implement the conversion on a site. I’m glad I did, because I found two very useful testing tools!

Sunday, January 10, 2016

Javascript to Force Phone Number Input Formatting (Quick and Dirty)

Javascrip Phone Number Format Forcer

One of the common issues with HTML forms is how to handle a variety of input from the user, while maintaining compatibility with the system that is the destination for the values from the form (e.g. a CRM system, a database, etc.)

I ran into this issue head-first at work, when we discovered that a specific CRM that our leads were being sent to required that phone numbers be in a specific format (###-###-####), but our form allowed users to input characters into the phone number field in whatever format they wanted. There are two main options here.

  • One, you can force users to enter their phone number in your format (break up the phone field into three separate fields, then use JS to concatenate the fields with dashes). I don't like this method, because it has the potential to confuse users and doesn't always work with browsers that store past field values.
  • A better method is to simply change the users input to the preferred format, after they have already entered it.

I'm still a novice when it comes to Javascript, but in about 15 minutes I had a solution that I was happy with and works perfectly. It uses plain vanilla Javascript (I'm a sucker for JQuery, but this is better for compatibility) and is reusable (just change the ID to match whatever the ID of your phone input field is). For my specific application, I used this for an embedded Caspio web form.

Javascript Code:

document.getElementById("InsertRecordPhone").addEventListener("blur",Fix_Phone);

function Fix_Phone(){
 var phone_field_content = document.getElementById("InsertRecordPhone").value;
 var phone_numbers_only = phone_field_content.replace(/[^\d]/g,"");
 if (phone_numbers_only.length > 10){ // If user includes country code
  var country_code = phone_numbers_only.slice(0,1);
  var area_code = phone_numbers_only.slice(1,4);
  var main_num1 = phone_numbers_only.slice(4,7);
  var main_num2 = phone_numbers_only.slice(7,11);
  document.getElementById("InsertRecordPhone").value = (area_code+"-"+main_num1+"-"+main_num2);
 }
 else {
  var area_code = phone_numbers_only.slice(0,3);
  var main_num1 = phone_numbers_only.slice(3,6);
  var main_num2 = phone_numbers_only.slice(6,10);
  document.getElementById("InsertRecordPhone").value = (area_code+"-"+main_num1+"-"+main_num2);
 }
}

Demo:


Further Notes:

Depending on your personal preference, you might want to add more to my code (e.g. validation of the number, warn user if number is not valid, etc).