Inspecting Angular Forms

Thursday, Oct 24, 2013 11:38 am
William Barnes

I have a long, multi-part Angular form on my <a href=”http://www.divorces.ca/” title=”Toronto Uncontested Divorces – Lawyer Prepared”>new website</a>. At a certain point, I began to find it difficult to review the source to ensure that the model being produced lined up with the output I wanted, so I wrote a bookmarklet that displays the ngModel attribute above each form control.

The current version unfortunately requires jQuery to be used on the page.

  1. javascript:$('.debugAngular').remove();$("[ng-model]").each(function(i, el){ var pos = $(el).offset(); varNewEl = $("body").append('<div style="position:absolute;z-index:9999;top:'+(pos.top-15)+'px;left:'+pos.left+'px;background:#000;color:#fff" class="debugAngular">'+$(el).attr("ng-model")+'</div>') });

Dojox/Socket, Node.js, and Socket.io

Monday, Sep 16, 2013 10:57 pm
William Barnes

I’ve been playing around with node.js and I decided to try setting up a web socket connection. I’m using socket.io on the server side and Dojo Toolkit on the client side. Things on the server-side were straightforward. However, I decided to give dojox/socket a shot and got the following error:

-debug- destroying non-socket.io upgrade

As it turns out, dojox/socket is a fairly plain wrapper over the browser’s built-in Websocket object (with long-polling support added). Socket.io does rather a bit more and (rightly or wrongly) seems to prefer talking to itself. Luckily, if you’re not too picky, you can easily include the official (AMD-compatible) socket.io client:

  1. require([
  2. '../socket.io/socket.io.js'
  3. ], function(io) {
  4. var socket = io.connect('ws://localhost:8000');
  5. socket.send("Hiya server!");
  6. });

Note that the proper relative path to the socket.io.js file has to be specified (the proper version of this file is automatically served by socket.io through node.js).

Capifony fails on “bin/vendors install –reinstall”

Tuesday, Apr 3, 2012 10:28 pm
William Barnes

I was attempting to deploy my Symfony app using Capifony, but it just wouldn’t work. The first error in the train wreck was: “Warning: Wrong parameter count for parse_ini_file() in …/bin/vendors on line 69”. Like all problems that take forever to fix, this one was incredibly simple. My shared host had both php 5.2 and 5.3 installed. I added the following line to deploy.rb: set :php_bin, "/usr/local/bin/php-5.3"

Your path may differ.

Update: If you are having this problem, you also need to fix $interpreter in ‘bin/vendors’.

HTML5 History API and Scrolling

Tuesday, Apr 3, 2012 7:22 pm
William Barnes

[Edit: The solution below has a bug. If the page is refreshed, then the states array is lost. I have an updated approach and will post it soon.]

My new web app uses the HTML5 History API (as abstracted by History.js) to smooth out navigation. This proved to be a bit of a challenge because, despite all the Javascript, my app is supposed to act just like a normal web page. The main content of my app is dynamically loaded in an ordinary static-positioned DIV. Thus, the user scrolls the window like normal. Other elements are fixed to the viewport.

One major problem I encountered was that browsers have serious issues with remembering the window scroll position across pages Normally, when a user clicks the back button, they are taken to the previous page at the same place that they left it. Most browsers don’t actually reload the page, but store it in memory, so this happens almost instantaneously. When using the History API, this does not always work. In this post, I detail the problems and my solution.

In Webkit, when the user navigates (using links or the back/forward buttons) the scroll does not change from page to page unless the page is too short to support the scroll value. If the user scrolls on page 1 and clicks to page 2, window.scrollY on page2 is the same as it was on page 1. If they scroll on page 2 and navigate back to page 1, scrollY is now the new value. If page 3 is not long enough to scroll, then scrollY is zeroed. Going back to page 1, it remains 0. I like this behaviour because it is predictable. If I am overriding the browser’s navigation, I’d like to have complete control.

Firefox, however, is somewhat erratic in this area. Generally speaking, it behaves like a browser on a normal website. If scrollY on page 1 is 50 and the user clicks to page 2, scrollY is 0. If they scroll a bit so scrollY on page 2 is now 200, then navigate back to page 1, scrollY will be 50. However, if they navigate to page 3 (which doesn’t scroll) and then back to page 1, scrollY will be 0.

I worked around this by storing the scroll value myself, and scrolling to that on each History statechange. Originally, I only stored the current scroll value while handling the statechange event, but Firefox applies its remembered value before firing the event. This placed me in the awkward position of needing to know the value before the user did anything. I use the window.onscroll event to detect when the window has been scrolled by the user so that it does not store a value in the awkward time where new content is loading. Following John Resig’s example, I store the value every half second using setInterval.

  1. var loc = {
  2. currentState: 0,
  3. states: [
  4. {scroll: 0}
  5. ],
  6. hasScrolled: true,
  7.  
  8. initHistory: function() {
  9. var History = baseWin.global.History;
  10. if (History.enabled) {
  11. // Before binding events, replace the state with the proper ID.
  12. // Otherwise, strange things happen.
  13. History.replaceState({state:0});
  14. // Bind the state change event (Dojo won't do this for some reason)
  15. History.Adapter.bind(baseWin.global, "statechange", loc.handleStateChange);
  16. // Bind the anchor click
  17. on(baseWin.body(), "a[href]:click", loc.anchorClick);
  18. // Bind the scroll event
  19. on(baseWin.global, 'scroll', function() { loc.hasScrolled = true; })
  20. // Store the scroll position every 500ms
  21. setInterval(function() {
  22. if (loc.hasScrolled) {
  23. loc.states[loc.currentState].scroll = baseWin.global.scrollY;
  24. loc.hasScrolled = false;
  25. }
  26. }, 500)
  27. }
  28. },
  29.  
  30. anchorClick: function(e) {
  31. var History = baseWin.global.History,
  32. rootUrl = History.getRootUrl(),
  33. node = e.target;
  34.  
  35. // Remove orphaned states
  36. loc.states = loc.states.slice(0, loc.currentState + 1);
  37. // Initialize the new state
  38. loc.states[loc.currentState + 1] = {scroll: 0};
  39.  
  40. // If there is a span, b, i, etc inside the link, that will be the target node.
  41. // This loop finds the actual anchor.
  42. while (node.nodeName.toLowerCase() != 'a') {
  43. node = node.parentNode;
  44. }
  45.  
  46. var url = domAttr.get(node,"href"),
  47. isInternalLink = url.substring(0,rootUrl.length) === rootUrl || url.indexOf(":") === -1;
  48. if (isInternalLink) {
  49. event.stop(e);
  50. url = url.replace(rootUrl,"")
  51. History.pushState({state:loc.currentState + 1},"",url);
  52. }
  53. },
  54.  
  55. handleStateChange: function(e) {
  56. var History = baseWin.global.History
  57. state = History.getState();
  58.  
  59. // Load the state id
  60. loc.currentState = state.data.state;
  61.  
  62. // IMPLEMENTATION SPECIFIC XHR STUFF
  63. // onSuccess: function() {
  64. baseWin.global.scrollTo(0, loc.states[loc.currentState].scroll);
  65. // }
  66. }
  67. }

Naturally, the above code would have to be modified for another application, but I hope that the method is clear and is of use to someone.

Mobile Safari bugs so far

Sunday, Apr 1, 2012 2:23 pm
William Barnes

I just bought my first iOS device (the new iPad) and I’ve been busy squashing bugs in my latest project. And by bugs in my project I mean, of course, bugs in Safari. Here are some of the more annoying ones and how I fixed them.

Changing CSS visibility breaks things

Several of the problems I had seem to have been caused by various problems with Safari’s handling of visibility. For example, a number of elements in the app use the following CSS transition to fade in and out:

  1. .hideable {
  2. opacity: 0;
  3. visibility: hidden;
  4. transition: visibility 0.5s linear 0.5s, opacity 0.5s ease;
  5. -moz-transition: visibility 0.5s linear 0.5s, opacity 0.5s ease;
  6. -webkit-transition: visibility 0.5s linear 0.5s, opacity 0.5s ease;
  7. -o-transition: visibility 0.5s linear 0.5s, opacity 0.5s ease;
  8. }
  9.  
  10. .visible {
  11. opacity: 1;
  12. visibility: visible;
  13. transition-delay:0s;
  14. -moz-transition-delay:0s;
  15. -webkit-transition-delay:0s;
  16. -o-transition-delay:0s;
  17. }

I use visibility for two reasons: (1) elements can be sized according to their contents before being shown, (2) visibility can be transitioned. The second reason is important, because otherwise it would require additional Javascript to delay the hiding of the element until after the opacity transition runs. This works in Desktop Safari, Chrome, Firefox, the Android Browser, and Mobile Chrome. In Mobile Safari, however, the element does not get shown until you click on another link.

[Edit: Apparently I was wrong about the Android Browser. I suspect this may be a problem in an older Webkit, since it definitely works in Mobile Chrome.]

I originally solved this by disabling the visibility transition in iOS, but I ran into another problem. Merely toggling visibility breaks Mobile Safari’s new native “overflow: auto/scroll” functionality. I’ll talk about this problem in more detail later. For now, the solution is to disable the transition and use display instead of visibility in Mobile Safari:

  1. body.iOS .hideable {
  2. display: none;
  3. opacity: 1;
  4. -webkit-transition: none;
  5. visibility: visible;
  6. }
  7.  
  8. body.iOS .visible {
  9. display: block;
  10. }

Overflow scroll breaks on visibility toggle

iOS5 finally introduced scrolling within an element. Previously, this had to be achieved with Javascript (e.g. iScroll). Frankly, I was pretty happy with my Javascript solution, but some variation of the position fixed bug mentioned below was breaking it. The touchable portion of the inner DIV scrolled with the document, rather than remaining fixed.; if the document was scrolled partway down, the fixed element no longer scrolled.

iOS’s solution is fairly simple, just add the following to your CSS: “-webkit-overflow-scrolling: touch;” I imagine it’s done this way because they’re afraid of breaking apps that relied on overflow-scroll just not working. It works pretty well, though it does not use the custom scrollbars. It also does not work if the scrolling DIV is contained in an element that was previously visibility-hidden. This time, it has nothing to do with transitions. The only fix I can find is to use display instead of visibility.

 Javascript scrolling breaks touch events on position-fixed objects

This was a weird one. I put buttons on the right edge of the screen to allow a user to page up and down the document. They were position-fixed (supported in iOS 5!) and they worked. Once. You couldn’t click them a second time. If you clicked one, all the other position-fixed buttons stopped working. If you then scrolled normally, everything started working again. Interestingly, if I just scrolled down 100px, the button would stop working, but if I then touched a spot 100px above the button, it would register. It’s as if Safari has a map of elements for the purpose of registering touch events that stays fixed to the page (ie: position absolute), while the visible representation of the elements stays fixed to the screen. Thus, when the page scrolls, the map goes with it. For whatever reason, Javascript doesn’t trigger a recalculation of where the elements are.

I disabled the buttons in iOS. Apple is aware of this, so a fix may be coming.

SEO experts capitalize on Mies van der Rohe architecture

Tuesday, Mar 27, 2012 5:16 pm
William Barnes

It shouldn’t surprise me since it’s a sneaky SEO strategy (all SEO strategies are sneaky) that makes perfect sense. The Doodle ensures that millions of people will run a particular search that day (Mies van der Rohe architecture). If you create an article that uses those terms, then you can drive some extra traffic to your publication. People who come to find out who Ludwig Mies van der Rohe is will stay to read a couple other articles. Still, it saddens me to see news reporting subordinated to Google Doodles. It’s not the architect or the Doodle that’s the news, the news is SEO.

Enable PHP autocompletion in Eclipse (Ubuntu 11.04)

Monday, Oct 3, 2011 1:29 pm
William Barnes

For some reason, Eclipse (using PHP Development Tools) doesn’t include built-in PHP functions with a new project. Assuming you downloaded Eclipse from the Ubuntu repository and added PDT through Eclipse’s “Install new software” dialog: in Eclipse, right click on your project in the Explorer pane; choose Include Path, Configure Include Path; select the Libraries tab; click Add External Source Folder. The folder you need may vary depending on the version of Eclipse, it should look something like “~/.eclipse/org.eclipse.platform*/plugins/org.eclipse.php_core*/Resources/language/phpVERSION”.

Python script to fix broken symlinks

Monday, Sep 26, 2011 4:47 pm
William Barnes

I recently added a new hard drive and reorganized my increasingly chaotic and whimsically named storage and backup partitions. In the process, I moved a folder containing hundreds of symlinks to a different drive resulting in hundreds of broken symlinks (I should have used rsync).

This script will repair symlinks after you’ve moved a folder. Change BASEDIR to the current location of your files and OLDBASE to where they used to be. For example, if you moved all your files from /mnt/Backup2 to /mnt/Backup2, then BASEDIR = ‘/mnt/Backup2’ and OLDBASE = ‘/mnt/Backup1’. If you want to test (to make sure it will do what you expect) then change DEBUG to True.

This script will only fix symlinks that point to files/directories within the BASEDIR.

  1. #!/usr/bin/env python
  2.  
  3. import os
  4.  
  5. # Configuration
  6.  
  7. BASEDIR = '/mnt/NewStorage'
  8. OLDBASE = '/mnt/OldStorage'
  9. DEBUG = False # I recommend a test run first
  10.  
  11. def relink(path):
  12. old_target = os.path.realpath(path)
  13. new_target = old_target.replace(OLDBASE,BASEDIR,1)
  14. if DEBUG:
  15. print "Relink: " + path + "\n\tfrom " + old_target + "\n\tto " + new_target
  16. else:
  17. os.remove(path)
  18. os.symlink(new_target,path)
  19.  
  20. for root, dirs, files in os.walk(BASEDIR):
  21. for filename in files:
  22. fullpath = os.path.join(root,filename)
  23. if os.path.islink(fullpath):
  24. relink(fullpath)
  25. for dirname in dirs:
  26. fullpath = os.path.join(root,dirname)
  27. if os.path.islink(fullpath):
  28. relink(fullpath)

If you save the script as ~/link-fix.py then run it with python ~/link-fix.py.

Toggle Gnome screensaver lock on USB key insertion

Sunday, Sep 25, 2011 9:39 am
William Barnes

While I like my computer to lock itself automatically when I leave, it gets annoying when it does it every time I get up for a few minutes. I decided that it would be nice if I could toggle the screen lock only when I’m out of the apartment. I decided that the trigger should be the USB key I have on my keychain. It’s always with me. If it’s plugged in to the computer, then I’m likely home. I apologize for the (lack of) formatting of the code, I will be fixing that when I get my computer back up and running.

Ubuntu uses an event-based system called udev that, among other things, can run a script when a USB device is plugged in or unplugged. Local (ie: user-created) udev rules are stored in /etc/udev/rules.d/. Before you can create a rule, you need to know a little about the device that is going to trigger it. Open a terminal and type:

udevadm monitor --udev --environment

Connect your USB device. It doesn’t have to be a USB key, it could be a phone, for example. A bunch of text will come up. Look for “ID_SERIAL” and “ID_VENDOR_ID”. Write down the values of those. You can use other variables if they suit your device better, just change the rules file accordingly.

Create a file called “/etc/udev/rules.d/85-screen-lock-toggle.rules”. Put the following in it, replacing VALUE with the proper value:

  1. ACTION=="remove", ENV{ID_SERIAL}=="VALUE", ENV{ID_VENDOR_ID}=="VALUE", RUN+="/usr/local/bin/gnome-lock-enable"
  2. ACTION=="add", ENV{ID_SERIAL}=="VALUE", ENV{ID_VENDOR_ID}=="VALUE", RUN+="/usr/local/bin/gnome-lock-disable"

Next create the scripts to actually disable and enable locking:

  1. #!/bin/bash
  2.  
  3. user=`ps aux | grep gnome-screensaver | head -n 1 | awk '{print $1}'`
  4.  
  5. if [ -n $user ]; then
  6. GNOME_SCREENSAVER_PROC=`ps xa | grep gnome-screensaver | head -n 1 | awk '{print $1}'`
  7. export `grep -z DBUS_SESSION_BUS_ADDRESS /proc/$GNOME_SCREENSAVER_PROC/environ`
  8. su $user -c "gconftool-2 --set "/apps/gnome-screensaver/lock_enabled" --type bool 1"
  9. fi
  1. #!/bin/bash
  2.  
  3. user=`ps aux | grep gnome-screensaver | head -n 1 | awk '{print $1}'`
  4.  
  5. if [ -n $user ]; then
  6. GNOME_SCREENSAVER_PROC=`ps xa | grep gnome-screensaver | head -n 1 | awk '{print $1}'`
  7. export `grep -z DBUS_SESSION_BUS_ADDRESS /proc/$GNOME_SCREENSAVER_PROC/environ`
  8. su $user -c "gconftool-2 --set "/apps/gnome-screensaver/lock_enabled" --type bool 0"
  9. fi

Make the scripts executable:

sudo chmod a+x /usr/local/bin/gnome-lock-enable /usr/local/bin/gnome-lock-disable

Restart udev:

sudo restart udev

Enjoy the convenience.