YUJI TOMITA

Tech Consultant. Backend Developer. Frontend Developer. Designer. Adventure Time Super Fan.

Watch a child property / array with AngularJS

Turns out you cant. You’ll find a lot of people jumping to $scope.$watchCollection, which triggers on inserts/removes/sorts, but not updates.

You can watch all changes on an array simply by passing it $scope.$watch(‘myarray’), but that triggers on any change and doesn’t target a particular array item.

The answer is really to generate a child controller with a child scope.

<div ng-repeat="item in items" ng-controller="ChildController"></div>

<script>
app.controller('ChildController', function($scope) {
$scope.watch('itemProperty', function() {console.log("Child property changed")
});
});
</script>

Chrome opacity transition bug shows a flickering box

I found a bug with Chrome transitions on opacity fades which is caused by using a custom cubic bezier function for easing.

Try removing your custom cubic beziers in your CSS3 transitions and use "ease" or "linear".

Solution to sudden inertial scroll loss issues, and scrollTop() == 0 on mobile

The sudden loss of inertial scroll on one of my websites has had my head scratching for literally a year.

When I ran into it again, alongside issues with scrollTop() always returning 0, and being unable to move the viewport on mobile, I stumbled across the fix: html/body must NOT have a height set to 100%.

Sadly, the sticky footer solution I use requires 100% height (and no min-height will not work). Ultimately I have ended up repeatedly using both media queries, and JS based platform detection to target styles most effectively.

There it is though: if you have issues with inertial scroll loss or scrollTop not functioning, check if you have html/body set to 100% height.

Photoshop: Define save for web settings for all slices at once

Use the slice selector tool in the save for web dialog, drag a box around all slices, then set the slice settings.

IMO whatever output settings you select should default to all slices.

Tar a directory without including its parents

To tar a directory without its parent, simply use the -C or –directory flag to specify the directory to "cd" into, then provide "." as the directory to tar.

Example:

To tar everything in /foobar/ without including /foobar/ in the path names, run

tar -zcvf foobar.tar.gz -C foobar/ .

That simple.

Google maps V3 API Wrong Marker Position

Don’t use zoom values that are not integers (2.7) caused huge problems for me.

It may have to do with the supporting marker customization libraries, as this problem was only apparent when customizing the marker heavily.

HTML Tidy Sublime + Django Remove %20 Characters

The HTML Tidy plugin for Sublime is amazing when people like to code with no line breaks.. but by default breaks django tags by converting spaces in django statements to %20.

I found HTMLTidy has a suspicious option called "fix-uri". Disable that in your sublime package preferences (you’ll have to add the key/value yourself) and voila everything is clean!

Ultimately, I use HTML Tidy to indent, not modify my code.

"fix-uri": false

Pip Pillow OSX 10.9 CLANG GCC 4.9 Missing Directory

After trying everything, the problem was solved by upgrading my pip.

pip install pip –upgrade

pip install pillow.

Custom Desk.com Chat Icon

Desk.com doesn’t have very much documentation on their chat widget.

If there is, let me know.

All I needed was a custom icon for the chat button. I had to hack it into place by continually checking to see if the widget has initialized yet. Once it has initialized, hide the desk.com chat icon and attach a click handler to our own button, which merely proxies the click to the hidden original button.

// <a href="http://desk.com">desk.com</a> hack; custom chat now button.
var $chatButton = $(&quot;.my-chat-button&quot;);

var intervalID = setInterval(function() {
$widget = $(&quot;.a-desk-widget&quot;);
if ($widget.length != 0) {
clearInterval(intervalID);
$widget.hide();

$chatButton = $(&quot;.chat-now-button&quot;);

$chatButton.click(function() {
$widget.click();
})
}
})

Fix overflow scrolling juddering, or loss of touch scroll control

To fix judder during scrolling, or when the touch event is inconsistency scrolling the wrong element, apply a webkit overflow scrolling css rule:

-webkit-overflow-scrolling: touch;

Follow

Get every new post delivered to your Inbox.

Join 101 other followers