Monthly Archives: June 2012

Expand and collapse jQuery Mobile collapsibles from code (Encosia)

Posted by Dave Ward at Encosia

I recently needed to open and close a jQuery Mobile collapsible widget from my own JavaScript code, in response to other events on the page. Unfortunately, looking at the documentation for the collapsible widget’s public methods, where you’d expect to find expand and collapse methods, you won’t find much help:

Manually firing a click on the collapsible div element is one option, as if the user had tapped it. I’ve never been a fan of that approach though, and especially not in frontend JavaScript. Co-mingling your internal flow control with events that are intended to be triggered by user input is a good way to find yourself with inconsistent issues that are difficult to reproduce and track down.

More importantly, I needed to control whether the widget was expanded or collapsed in this case. So, I really wanted to find a clean way to deterministically open and close the collapsible instead of toggling it. Luckily, there turned out to be an easy, straightforward way to do that.

Looking under the hood

A nice thing about interpreted languages like JavaScript is that it’s easy to take a look at the source for a library you’re using and find undocumented behaviors when these situations arise. For example, here’s the relevant source for jQuery Mobile’s collapsible widget (as of version 1.1):

.bind( "expand collapse", function( event ) {   if ( !event.isDefaultPrevented() ) {       event.preventDefault();       var $this = $( this ),       isCollapse = ( event.type === "collapse" ),         contentTheme = o.contentTheme;       // Lots of CSS style toggling omitted here.   } })

The CSS toggling in that event handler is less important than how that handler is triggered. Seeing that the widget bound a couple custom events named “expand” and “collapse”, it seemed logical that using jQuery’s trigger method on the collapsible div might have the same effect.

To test that the solution is really that simple, you can open a page with a collapsible and experiment from that browser’s JavaScript console. That approach is great for testing JavaScript ideas in any browser, but I used Chrome since it’s based on the same rendering engine that my jQuery Mobile site was targeting.

Sure enough, selecting a collapsible div and chaining .trigger('expand') or .trigger('collapse') opened and closed the widget just as if a user had clicked on the collapsible’s heading.

Pulling the “trigger”

To give you a more concrete example of how that works, here’s an excerpt of a simple jQuery Mobile page with two collapsibles on it:

<div id="collapsible1" data-role="collapsable">   <p>Collapsible 1</p> </div>   <div id="collapsible2" data-role="collapsible">   <p>Collapsible 2</p> </div>

Given those two widgets, you could use this JavaScript to select the first one and ensure that it’s expanded:

$('#collapsible1').trigger('expand');

Similarly, you could use this code to force the second one to be collapsed:

$('#collapsible2').trigger('collapse');

Nice and easy. Now we have complete control over the collapsible instead of being limited to a toggle operation.

Of course, since this is an undocumented behavior, there’s no guarantee this will continue working in future versions of jQuery Mobile. However, it seems straightforward enough that it’s unlikely to change in the near future.

Related posts:

  1. Why PhoneGap 1.1.0 broke jQuery Mobile’s back button
  2. Learn from my Express.js HTTP status code blunder
  3. Read my interview with The Code Project

You’ve been reading Expand and collapse jQuery Mobile collapsibles from code, originally posted at Encosia. I hope you enjoyed it, and thanks for reading.

If you’ve got any feedback, please click through and leave a comment; I’d love to hear from you. You can click here to jump directly to the comment section of this post.

SVPullToRefresh (Cocoa Controls)

Posted by Cocoa Controls at Cocoa Controls
Give pull-to-refresh & infinite scrolling to any UITableView with 1 line of code.

image of this control

The Productive Apple Developer (Part II) [Boon Chew] (iDevBlogADay)

Posted by Boon Chew at iDevBlogADay

Code Conventions, Uncrustify and others

In the second part of this blog, I will continue to introduce some of my favorite tools for my daily development. The first thing I would like to talk about is coding convention. Check out the first part of the blog if you have missed it.

Good coding convention not only makes code much easier to read, it will improve the overall stability (See Broken Window Theory). It will be difficult for me to cover all code styles in one post, so I will use Objective-C as an example.

There are two coding conventions in Objective-C that I like, one is Introduction to Coding Guidelines for Cocoa written by Apple. Another one comes from Google: Google Objective-C Style Guide. Google’s coding convention combined some conventions from Google’s Open Source C++ Style Guide. It covers more topics such like line length or comments style. Both of them are very good to read up on.

A wise man once says (OK I said it) “the biggest challenge for programming is to come up a good name for a variable or method”. Often times I see developers fall into the temptation of naming things with numbers when they fail to come up with something sensible. Don’t do that – you will go to hell in your afterlife.

Following good coding convention is important, but it comes at a cost – it slows us down having to indent things or lining things up and developers don’t like to be slowed down. We are already trying to make our typing catch up with our thought stream. Luckily, the beauty of being in the software industry is that for every problem out there, someone is likely to have come up with a solution for it. Uncrustify is one such solution. It is a tool to reformat all your code. It supports C, C++, C#, ObjectiveC, D, Java, Pawn and VALA. Here is how I use it:

  1. Select all code in Xcode
  2. Press my assigned hot key: Control + Command + Shift + I
  3. DONE. All code are nicely formated. Amazing, no?

How to set up uncrustify?

First, run following command to install uncrustify:

sudo brew install uncrustify 

If you don’t have brew command install, please refer to previous post.

  • Next is to open Automator and create a new Service, the service it created is located at
~/Library/Services

Create Service in Automator

  • Add a Run Shell Script item, and using following command. Because the configure file (uncrustify_obj_c.cfg) is stored at ~/.uncrustify/, you probably need to create a folder for it and download the cfg file. If you don’t have that folder, please create one. You can use your own configuration file and your own path, you just have to let uncrustify knows it. There are lots of work in configuring due to too many options there. I have spent hours on it and I would hate for you to go through the same fate. Download the file and use it as you wish.
    Download Uncrustify Configuration File
#!/bin/bash uncrustify -l OC -q -c ~/.uncrustify/uncrustify_obj_c.cfg

Reformat

Jonah Williams provide a method to reformat all opened files. I don’t like it – I have this innate fear that I am putting all my code in jeopardy. Go for it if you suffer no such psychological barrier.

  • Save and use it. Select all your code, and go to Xcode -> Services -> Uncrustify(Your script name)
    Create Services
  • You can also assign a shortcut for it in the Xcode > Services > Text menu.
    Add shortcuts

Here comes the stunt, select a chunk of code and press Control + Command + Shift + i. Good job Houdini!

Automating TestFlight Upload

Testflight makes distributing our test builds easy. You can get more details on TestFlight here. But uploading to Testflight gets tiresome really quick (sorry TestFlight, yes we are that lazy). It’s a repetition of clicking, waiting, click waiting, wait clicking, you get the idea. Luckily, this too can be fixed. Thanks to NWTestFlightUploader, you can use it to upload to TestFlight in Xcode with just a few clicks. If you find even doing this is too much, it’s time to look for another job.

For those of you who are still sticking around, here is what you do (I will show you how to install the tool after this):

1. After you install NWTestFlightUploader, you will see an upload dialog after you do an archive on your app.

2. Select signing identify

3. Select provisioning profile, if you want to overwrite.

4. Add notes.

5. Choose Distribution lists.

6. Send Email Notification?

7. Confirmation.

8. The uploading process will show up in the Console application. A dialog will also pop up after upload is finished.

How to setup

Setup Upload to Testflight in Xcode
* Edit the Scheme of your product in Xcode4
* Expand the “Archive” scheme
* Click “Post-actions”
* Add a “New Run Script Action”
* Select the target that corresponds to the Scheme in the “Provide build settings from…” dropdown
* Copy & paste the contents of NWTestFlightUploader.sh into the text field
* At minimum, supply API_TOKEN and TEAM_TOKEN.
* Done! To try it out, build the Archive scheme. At the end of the process the TestFlight upload ‘wizard’ will start.

Color, Themes, and Fonts

After two very nerdy topics, let me introduce some pretty stuff to please you right brainer out there. In our daily development, a large part of the time is dealing with editors such as Xcode, Sublime text 2, Textmates, etc. If we stare at a window with white background and black text, it’s very easy for your eyes to get tired. So let me be your eye doc for a few minutes and show you my choice of colors and fonts and you can pick yours.

Fonts

For fonts, I will present you a list of my favorites. I’ve tried each of them at least one month so I know they work. I’ve tried many many other fonts, but most of them only last few days. The screenshot is using font size 16, because I want you to see the fonts clearer. If you use it, I would recommend to set your font size 13 to 16. For Anonymous (my most favorite font), I think setting the font size to 13 and 14 are probably the best.

Anonymous Pro It is my new favorite, very clean and elegant font.
Anonymous
DejaVu Sans Mono The first font I used and I’ve used it for almost a year before giving up. I’m tired to look at the font over and over again lol.
DejaVu
Consolas It will appear after you installed Microsoft Office. This font looks very similar to Dejavu font.
Consolas
Inconsolata Many people recommend this font. It is a great open source font with a cool name.
Inconsolata

Color and Thems

EGO

In the past, EGO is my favorite. But after using for about one year, I finally realized I don’t like the dark background and the stark contrast.
EGO

To install the themes, run the following shell command in Terminal:

mkdir -p ~/Library/Developer/Xcode/UserData/FontAndColorThemes; cd ~/Library/Developer/Xcode/UserData/FontAndColorThemes; curl -O developers.enormego.com/assets/egotheme/EGOv2.dvtcolortheme

Solarized

Solarized
The color picked and the theme in Solarized is elegant and pleasant. I found my eyes in a blissful state while looking at code in Solarized. Solarized uses a sixteen-color palette. It is a very interesting project and has support for Vim, Emacs, IntelliJ IDEA, NetBeans, TextMate, BBEdit, Visual Studio, and Xcode. But the support for Xcode is not that good. The color from it just don’t feel right and bothers me for a long time. You can download the official at solarized official github. Or my version of Solarized Theme or use following shell command to install it.

mkdir -p ~/Library/Developer/Xcode/UserData/FontAndColorThemes; cd ~/Library/Developer/Xcode/UserData/FontAndColorThemes; curl -O bit.ly/LsSDet

Solarized

Summary

Consider a normal Objective-C file with 500 words. Uncrustify can save 10 mins of manual code formatting. Automating your Testflight submission saves you another 10 mins from having to upload and distribute manually (If you use web version, you have to wait until file has been uploaded so you can distribute). With good code syntax color and a beautiful font, I don’t know how much time it can save for daily coding and debugging process and potential visit to your doctor for migraine. So there you have it! I hope the above tips not only more a productive but also healthier and happier coder. In the next post, I will introduce even more tips to optimize your workflow to the next level. Please subscribe our blog to get more valuable tips!

Apple wins preliminary injunction on U.S. sales of Samsung Galaxy Tab 10.1 (Apple)

Posted by Tom Krazit at Apple

Apple has won perhaps the most prominent victory in its multiyear battle over mobile patents: it has convinced a U.S. District Court judge to slap an injunction on sales of Samsung’s Galaxy Tab 10.1 tablets in the U.S. pending further review of the patent claims between the two companies.

Judge Lucy Koh issued the order late Tuesday. “In this case, although Samsung will necessarily be harmed by being forced to withdraw its product from the market before the merits can be determined after a full trial, the harm faced by Apple absent an injunction on the Galaxy Tab 10.1 is greater,” Koh wrote in her ruling.

For years now, Apple and Samsung have been locked in a dispute over whether or not Samsung’s Android smartphones and tablets infringe on patents held by Apple for the iPhone and the iPad, the product being discussed in Koh’s ruling. It had seemed of late that the parties might find some accommodation in the wake of the death of Apple co-founder Steve Jobs, who swore to “destroy” Android, and more conciliatory comments about patent litigation in general by current Apple CEO Tim Cook.

But the injunction is a huge victory for Apple, even though Samsung hasn’t sold very many Galaxy Tab 10.1 units in the U.S. The ruling comes a week after Apple faced a setback in Chicago in its dispute with Motorola, now owned by Android creator Google.

Judge Koh’s order is embedded below.

Apple wins injunction on Samsung Galaxy Tab 10.1 Judge Koh

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

JFImageSavePanel (Cocoa Controls)

Posted by Cocoa Controls at Cocoa Controls
NSSavePanel wrapper for image save dialogs, similar to those in Preview.app.

image of this control

How to Silence Your Noisy Computer (and Keep It Cool as a Cucumber) [Video] (Lifehacker)

Posted by Whitson Gordon at Lifehacker

So you’ve got a kickass computer, but the summer heat means a warmer office, which means a hotter computer, which explains why your computer’s been impersonating a jet engine lately. If your computer’s generating a bit too much heat and noise, here’s how to give its cooling system an overhaul for cool, silent operation. More »


NGVaryingGridView (Cocoa Controls)

Posted by Cocoa Controls at Cocoa Controls
A GridView which allows to set individual Rects for the Cells. So you can define Cells with different Sizes, used for e.g. in Timetables, EPGs, etc. Similar to the UI used in Hipmunk.

image of this control

DMTabBar (Cocoa Controls)

Posted by Cocoa Controls at Cocoa Controls
DMTabBar is a simple segmented control / bar that mimics the XCode 4 Inspector segmented control.

image of this control

HMLabel (Cocoa Controls)

Posted by Cocoa Controls at Cocoa Controls
Finder like color label control. include label control, label select field, label select menu item and label cell.

image of this control

The Productive Apple Developer [Boon Chew] (iDevBlogADay)

Posted by Boon Chew at iDevBlogADay

Introduction

In this guide, I would like to take the opportunity to introduce some tools and techniques to dramatically improve your productivity as an Mac development. Many of these techniques are something I use on a daily basis and they have helped reduce a lot of repetitive and mundane tasks and make me an ever happier Apple developer. This is called applying the DRY principle from code to OS tasks. For example, if you find yourself renaming multiple files into “duck1.png” and “duck2.png” and so on, something is wrong. We Apple developers should never ever repeat ourselves, since we are too busy playing the next gadget from Cupertino, right? Without further delay, let’s get started shall we?

Terminal

Terminal is a program included with all versions of Mac OS X. It is located in the Utilities folder within the Applications folder. When launched, it provides a line interface to control the underpinnings of the UNIX based operating system. The default UNIX shell in Mac OS X Panther (10.3) or later is Bash.

For a developer, terminal is arguably one of the most important tools in Mac.

iTerm 2 – Terminal on Steroid

iTerm 2 is my favorite replacement for the default Terminal application. It is highly customizable and has many supports like tabs, colors, profiles and custom key bindings. If you are used to moving from word to word in Xcode, or other editors by using “Option + Left Arrow/Right Arrow”, rejoice! Because you can set up these same behaviors in iTerm 2 with little effort:

  1. Go to Bookmarks > Manage Profiles.
  2. Expand Keyboard Profiles and click Global.
  3. Click the + (Add Mapping) button.
  4. Choose cursor left from the Key drop down menu.
  5. Select the Option Modifier checkbox.
  6. Choose send escape sequence from the Action drop down menu.
  7. Enter b and click OK. You can now use Option-Left Arrow to move left/backward from word to word.
  8. Click the + (Add Mapping) button again.
  9. Choose cursor right from the Key drop down menu.
  10. Select the Option Modifier checkbox.
  11. Choose send escape sequence from the Action drop down menu.
  12. Enter f and click OK. You can now use Option-Right Arrow to move right/forward from word to word.

Brew, Homebrew

Homebrew provides a straightforward and flexible way to install UNIX tools that are not included with OSX.

In short, Homebrew is a Mac version of apt-get, gem, or aptitude. It manages UNIX tools. If you are terminal user, after using Homebrew your life will be forever changed. In fact, I bet you can’t stop using it after you tried. Other similar package management systems in Mac are MacPorts or FINK. I don’t like these as much because they are outdated and unstable.

Installing Homebrew is simple:

/usr/bin/ruby -e "$(/usr/bin/curl -fsSL raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)"

Examples of using brew to install softwares:

$ sudo brew install wget $ sudo brew install git $ sudo brew install curl $ sudo brew install git bash-completion

Things move pretty fast in brewland. If you don’t update your brew after 24 hours, you will get a warning message. Update method is just what you can imagine:

sudo brew update

iTerm 2 with Finder: Go2Shell

What’s your most used Terminal command? I bet it is “cd bala bala”. Your situation goes like this: you open your good friend Finder, go to your project folder, coding, open iTerm 2(I hope you are using it now, :) ), cd ~/balabala/myproject/, and do git. Using “cd” all day long is absolutely the most annoying thing. Go2Shell is much simpler.

Go2Shell opens a terminal window to the current directory in Finder

Go2Shell

Customize your .bashrc

I’m in favor of Bash, but if you are using sh or zsh, the concept are same, just customize your own profile. It is located in ~/.bashrc. It is the first to load when you open your iTerm 2 window. Use alias command properly to reduce the heavy loads. Alias just replaces a word by another string. Some examples:

alias ll='ls -alF' alias la='ls -A' alias l='ls -CF' alias sshc='ssh root@www.nanaimostudio.com' alias cdo='cd ~/Documents/Projects/OpenSourceProjects/' alias cdp='cd ~/Documents/Projects/' alias s='subl'

There are lots of tutorials talking about how to customize your bash. I will show a few of my own here because it would take a very long chapter to just introduce each one.

Don’t put duplicate lines in the history.

HISTCONTROL=ignoredups:ignorespace

Append to the history file, don’t overwrite it

shopt -s histappend

For setting history length see HISTSIZE and HISTFILESIZE in bash(1)

HISTSIZE=1000 HISTFILESIZE=2000

Check the window size after each command and, if necessary, update the values of LINES and COLUMNS.

shopt -s checkwinsize

Set variable identifying the chroot you work in (used in the prompt below)

if [ -z "$debian_chroot" ] && [ -r /etc/debian_chroot ]; then     debian_chroot=$(cat /etc/debian_chroot) fi

Some tricks you might like

I can’t help to talk about this topic. It might be a little off topic, so I will be as simple as possible. These are very good tricks.

  • cd - takes you to the previous directory you were in.
  • !! repeats your last command. Most used in the form of “sudo !!”
  • ESC . insert the last arguments from your last bash command.
  • ls -thor list the most recently modified files in a conveniently readable format.
  • history | awk ‘{print $2}’ | awk ‘BEGIN {FS=”|”}{print $1}’ | sort | uniq -c | sort -nr | head top 10 commands used.
  • pushd and popd almost always come in handy
  • for file in *.wav; do lame “$file” “$(basename “$file” .wav).mp3? ; done; Loop

Finder or Path Finder

The original Finder is not very good. It is elegant indeed, but not that convenient. If you have ever used TotalCommand, you will know how powerful a file manage software can be. Path Finder offers additionally capability and control. It is a commercial software and costs $40. I have tried it few times – Path Finder is a great software and worth the price, but I like the simple Finder window more. It is just a personal preference. If you haven’t used Finder yet, you should give it a try.

If you are sticking with Finder, there are some tricks that can make it better. Please leave a comment if you have any suggestions.

  • Rename: type “enter” in any selected file name
  • Create New Folder: Command + Shift + N (New)
  • Connect to Server: AFP:// for mac, SMB:// for windows, or even FTP:// . Shortcut: Command + K
  • Go to the Folder: Command + Shift + G (GO)
  • Command + 1~4 to switch view
  • Command + N to open a new Finder window
  • Command + I to get the information on a Folder or File.

FTP

You need a FTP GUI client. Why? With no reason to not get it, and with obvious reason, you have to have one.
Filezilla I don’t recommend it. It is a cross platform FTP software, clearly not very good on Mac style.
Cyberduck My choice of Free software. Clean and fast, with support for FTP, SFTP, WebDAV, and cloud storage like Google, Amazon Cloud.
Transmit Commercial software for $34. Since I don’t have that much requirement for FTP transmissions. I haven’t get a copy for it.

Automator

Automator can automate lots of things in Mac and you don’t need to remember a bunch of command and type them in the folder. There is one time, client send us the assets with ipad2 and ipad3 suffix. We need to rename them all to normal name and HD version with @2x suffix. With Automator, it is just few clicks.

  • First, create a service in Automator. Name whatever you want.
  • Second, drag two items: “Get Folder Contents” and “Replace Text” into the work flow. Set other parameters as the image shown below:
  • Save and use it. Select any file or folder in Finder. Choose Finder -> Service -> Rename__(Script name you typed). A window will popup for renaming.

Optimization

After a using Mac for a while, it becomes slower and slower. There are something we can do to make it faster. I will explain each one of them so you can know how to speed it up or bring it back if any error shows.

  1. First, run Disk Utility to perform a Repair Disk Permissions. It is harmless and can reduce some rare error. It is recommend to run it once for a while.
  2. Clean, use CCleaner or iBoostUp to clean history, system cache and application caches. You can also use CleanApp to uninstall an app and remove it’s related files. It is a important step to bring your old Mac to new life.
  3. Double check if you are using NTFS driver like Paragon NTFS, turn it off if you are not using it. The reason for it is that if you enable spotlight(you should), it will try to create the index in your NTFS partition, which will make the whole system extremely slow. If you have to use it for writing files to NTFS disk, disable spotlight indexing on NTFS disk.
  4. Disable unused items in Login Items window. There are lots of things you don’t need to start it every time you boot your sweet Mac. They are just slowing it more and more. Disable them, leave your favorites only!.
  5. Validate Fonts, some broken or duplicated fonts can also cause problem of slowing the dear Mac machine. Open Font Book App, select all fonts, and then File -> Validate Fonts. Fix error if any shows on Font Book.
  6. Turn off Speech Recognition, and Internet Sharing if you don’t use them. You can also turn off Universal Access and Bluetooth, but “Universal Access” is used by Accessior which is a great software I will introduce later, and my keyboard and mouse are using Bluetooth. I left these two on.
  7. Clean out your unused widget.
  8. Use Onyx to do maintenance. The official site is www.onyxmac.com. Be careful to click the right download link which is www.titanium.free.fr/download.php Be careful of doing anything on it.
  9. Additionally, you can clean up Launch Service. The files can be found at
~/Library/LaunchAgents /Library/LaunchAgents /Library/LaunchDaemons

After I installed Adobe Master Suite, Autodesk Maya, or TeamViewer, it runs some background services after logged in. Just clean the files in the three folders above to disable them. Be sure to backup these files first. More explanation:

Launch daemons can run without a user logged in. Launch daemons cannot display information using the GUI. launch daemon configuration plist files are stored in the /System/Library/LaunchDaemons folder (for those provided by Apple et al) and /Library/LaunchDaemons (for the rest)

Launch agents run on behalf of a user and therefore need the user to be logged in to run. launch agents can display information through the window server. As with launch daemons, launch agent configuration plist files are stored in the /System/Library/LaunchAgents and /Library/LaunchAgents. User launch agents are installed in the ~/Library/LaunchAgents folder.

Conclusion

So that wraps up a few of the best and most useful tools we use as Apple developers. Hope this will make you a more productive Apple developer! What other tools do you use? Comment below so we can compare. Love the list of tools we have introduced? Well then share the developer love on Twitter or Facebook!

WP Like Button Plugin by Free WordPress Templates