Full screen web pages (or modals) on iOS Safari

Because the top and bottom bars on iOS Safari slides up and down when scrolling, I was having some difficulty coding a full-screen page for it. $(window).height() on only gets the initial height upon page load, which includes the full header and footer bars. $(window).resize() wasn’t triggering when I scroll, either.

I ended up finding two possible approaches to the problem:

1. Use the minimal-UI viewport declaration for iOS

This is convenient because it doesn’t involve any JS work-arounds or extra code, except for one line of HTML in the header. It loads the screen without the expanded URL header bar and with the hidden bookmarks bar on the browser window. However, there are some cons for this approach:

Hiding the bottom bar makes it harder for people to save or bookmark the site. It’s not the default view, so some people may not realize that clicking on the site title or URL on the top of the screen will restore the hidden nav bars.

2. Use Javascript to detect the bar state and redraw the page 

The second method may be a bit of work since we’re adding JS to the page, but it will keep the default UI and I think this is better when it comes to bringing a web experience that your visitors are familiar with.

Of course, you may use what you think is best for your site or web app. Perhaps there are also other work arounds that I wasn’t able to find.

WordPress Development with Roots (Bootstrap, SASS/LESS) and Grunt

Requirements

 

Grunt Plugins

Example:

npm install grunt --save-dev
npm install grunt-contrib-uglify --save-dev

 

Use with SublimeText

For a faster workflow, I use SublimeText.

 

Additional Requirements

 

Build System

Build systems make it easier to compile everything (like your Grunt) upon saving, without having to enter code in vim.

Here’s a sample Build System (to create a new one: Tools > Build System > New Build System) to use with Grunt:

{
"cmd": ["grunt", "default"],
"selector": ["Gruntfile.js"],
"path": "/usr/local/bin:/usr/local/sbin:/Users/YOURNAME/.rvm/gems/ruby-2.0.0-p0/bin",
"working_dir": "${project_path:${folder}}",
"osx": {
"cmd": ["grunt", "default"]
}
}

** Make necessary adjustments on your path if you’re using something different.

 

Auto-upload on server with SFTP

Use SFTP with SublimeText to automatically reflect all changes you make locally to the test server.

the little things I learned today about Android/Cordova/PhoneGap

For work, I had to help test a cordova iOS app and port it for Android. For some reason, the usual deviceready code wasn’t working:

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { 
     // is on PhoneGap
     $(function() {
        document.addEventListener("deviceready", deviceIsReady, false);
     });
} else {
     // not on PhoneGap
}

Instead, this worked:

if ( window.device ) {
      document.addEventListener("deviceready", deviceIsReady, false);
}
// not on PhoneGap
else {
     // what else
}

The other thing: I have no idea how to take screenshots on Android devices. To be honest, I still have no idea how to do it on my Nexus 7. Even less idea on how to do it on Android 3.0. Google search lead me to this and I still don’t understand why it has to be so hard (or confusing).

Beginner front-end resources for HTML5 mobile/web apps

I’ve been doing front-end code for a Cordova/PhoneGap app. Despite the whole debate on Native vs. HTML5/hybrid, there are just some projects wherein I have no say when it comes to the client’s preferred language to use (I agree that 100% Native code is better, but like I said, the decision isn’t mine to make).

On the bright side, I’m learning a lot of things when it comes to coding mobile HTML and making apps with Cordova/PhoneGap, so I might as well do my best on my first project (and do better on the next).

Some resources that I found useful

  1.  A Beginner’s Guide to Perceived Performance
  2.  The Pains and Remedies of Android HTML5
  3.  Crossing Platforms between iOS and Android. Extending PhoneGap project
  4.  Essential PhoneGap CSS: WebKit Tap Highlight Color
  5.  Remove Gray Highlight When Tapping Links in Mobile Safari
  6.  FancyScroll.js: Add an iOS/Android Overflow Scroll Effect

Other interesting things to check out

  1. PhoneJS
  2. Topcoat

un-fixing the position of the navbar in mobile view on Bootstrap with CSS and jQuery

The floating navbar on responsive/mobile Bootstrap templates has a fixed position. But when the menu becomes longer, I needed to make it ‘relative’ in position so that the person can scroll down the items to see the other links.

jQuery

function mobile_header() {
     /* on mobile, opening the menu scrolls to top and removed the 
    'fixed' positioning so that if the menu is longer, 
    the user can scroll to see the menu items */

                $('.btn-navbar').click(function(){
                    $('html, body').animate({ scrollTop: 0 }, "slow");
                    if($('.btn-navbar').hasClass('open')){ 
                        $('.navbar').removeClass('mobile');
                        $(this).removeClass('open');
                    }
                    else {
                        $('.navbar').addClass('mobile');
                        $(this).addClass('open');
                    }
                });
}

LESS

 .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      height: 60px;
      z-index: 99;

      &.mobile {
        position: absolute;
      }
    }

no longer the first day of september

sort-of start of september

It’s sort-of the start of September, and I may have not done everything I said I wanted to do back in July, but this week has been a week of learning new things, so time hasn’t been completely wasted.

I managed to try out and install Jekyll, and I’m still evaluating how convenient it is (if it is actually convenient) for front-end prototyping. Since Jekyll seems to be primarily used for static blogs, the projects I’m prototyping are more of customized content management systems, so it’s not always easy. I managed to edit a sample plugin someone had put up on the internet and made it work to my needs despite never writing Ruby before (though the changes are minor), which gave me a bit of a push to read up more on Ruby programming.

Perhaps my biggest distractions when it comes to work and programming are: (1) books and (2) GW2. I find Fiction insanely more interesting than design and/or programming books so when I occasionally find a good story to read, I end up doing a book marathon for around six hours before I could do anything else. I have a huge list of design and a couple of Javascript e-books I’ve been meaning to read, but I just had to find a lovely fictional novel to make myself giddy and happy.

And such was my circumstance last night when I started (and finished) reading The House at Tyneford. I’m easily a sucker for romantic novels, much more when they’re set in various time periods, and this being set pre- and during WWII was no different. My inner romantic properly satisfied, today I can focus on work again.

It’s the weekend again, and although I’m cramming some work for Saturday and Sunday, it’s not so bad.

 

Supporting IE8 with Foundation by ZURB

Since I’m using Foundation 4 for Save22, and they’ve pulled the plug on IE8 (and lower) support, here are some incredibly useful codes on Git that you’ll probably need if you want it to work properly in IE.

Just note that without these fixes, IE8 will render the website’s mobile layout instead of the desktop layout.

Grid fix – https://gist.github.com/zurbchris/5068210

Use the desktop header instead of the mobile version – https://gist.github.com/tmayr/5190565

Trying to make Sections / Tabs work in a specific way on IE8, desktop – https://github.com/zurb/foundation/issues/2031

the zero (or negative) height problem of elements inside an initially hidden container

phew, that was a long title. But it took me a while to figure out too. basically, I was working on creating a grid with list elements having the same height. I had done this before on Save22’s older version, and had made a function for it:

  function same_height(container) {
            var items_height = [];

            $(container).each(function() { 
                items_height.push($(this).outerHeight());
            });

            var tallest_content = Math.max.apply( null, items_height );

            $(container).each(function(){
                var item_height = $(this).parent().height();
                $(this).css('height', tallest_content);
            });

        }

same_height('ul#cat-list li');

I’m using Foundation 4 for this project, and I initially put the grid behind a hidden Section tab.

The jQuery code wasn’t working. For hours I couldn’t figure out why, until Mark asked the right question: “is it initially hidden?” and pointed me to a fix someone had made:

https://coderwall.com/p/r855xw

Although I think it means I have to integrate the jQuery with the Section JS of Foundation if I want to keep it hidden, or code my own tabbed fix for this. It just meant: it wasn’t fast enough for me to implement via just the framework + my own code, as I had originally thought. But because I learned of the actual problem later in the day, I already created a different design compromise wherein I made the grid visible already, instead of being hidden.

I’ll see if I have time to make a real fix for this, since there are other pages/components I think I need to finish first.

bootstrap: two toggle buttons on the nav bar

Problem: Both menus on the mobile version collapses when the buttons are pressed. You only want one menu to unfold at a time. 

Found a fix here: http://jsfiddle.net/gNUEx/

Modified the code a bit:

  var navbar = $('.navbar');

  navbar.on('click', '[data-toggle="collapse"]', function(event){
   var $target = $($(this).data('target')); 
    if(!$target.hasClass('in'))
      $('.container .in').removeClass('in').height(0);    
    })

front-end to server-side workflow

There’s a different workflow for everybody so I’m wondering what other people’s workflow are when it comes to doing front-end and then server-side.

I would usually:

  1. code the base template in PHP (so I have separate header / footer / and content pages. If I need specific body classes, I just write up functions quickly).
  2. upload the PHP files to my personal server to show the client for approval
  3. apply the code to the CMS (WordPress, python, etc.), whichever it is the devs are using. I’m not always part of this though.

How about you?