Camille Blogs a Bit

Writing about design, technology, maybe philosophy, and daily living (in Singapore)

Menu Close

Category: Code (page 1 of 3)

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.