YUJI TOMITA

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

Mailchimp API how to submit booean values via form post data

Mailchimp’s API can be a bit of a nightmare if some systems are relying on raw encoded form data, while the API often works best with JSON.

Merge vars in the following format are valid via form post: merge_vars[foo][0][bar] but very difficult to convert to a JSON payload on the server side if one needs to modify it slightly.

If you absolutely want to retain the form data and not convert to JSON, just know that you can send a boolean "false" via the existence of a post key with a blank value.

I’m not sure how it’s done for boolean "true".

AngularJS slideDown or slideUp on ng-if

First massive angular roadblock.

I needed to use an ng-if due to many directives needing initialization on demand (most directives assume DOM is visible for calculating offsets, sizes), but all solutions I’ve encountered online did not work with ng-if. They typically work with ng-show, but not ng-if.

The problem ended out to be simple: ng-if can be used with ng-animate using a custom JS animation which triggers enter and leave animations which provide you the element being animated at exactly the right moments.

Add the below to your project to understand all the animation hooks firing upon an ng-if element becoming visible.

<div ng-if=”isVisible” class=”my-crazy-animation”>
Ng-If Block
</div>

app.animation('.my-crazy-animation', function() {
return {
enter: function(element, done) {
//run the animation here and call done when the animation is complete
console.log(&quot;entering&quot;);
element.hide().slideDown();
return function(cancelled) {
//this (optional) function will be called when the animation
//completes or when the animation is cancelled (the cancelled
//flag will be set to true if cancelled).
};
},
leave: function(element, done) {
element.slideUp();
console.log(&quot;leaving&quot;);
}
};
});

Who knew it would be so easy. I’ve spent literally 4+ hours on this with multiple solutions. CSS based, JS based directives which don’t fire in correct priority for ng-if, all solved by this one liner. Incredible!

Shopify collection ordering

There is no way to order collections in Shopify without using a manually defined LinkList, which can’t be exported via API or saved in themes. It’s always admin configured.

An alternative is a method to hard code collection handles, then iterate through all collections, only pulling matching collections handles.

It may "feel" inefficient, but Shopify pages are massively cached, and a few for loops are the least of our problems. Unless we have impossibly more collections.

{% assign collection_handles = 'sport,casual,dress,bespoke' | split: &quot;,&quot; %}

{% for collection_handle in collection_handles %}
{% for collection in collections %}
{% if collection.handle == collection_handle %}
{{ collection.title }}

Serve Django HTTPS over localhost

The easiest way to do this is to use an app called django-sslserver.

It adds a new management command that serves content over SSL, and generates its own certificates.

I had tried things like stunnel… and ultimately this was the easiest solution.

I need it purely to test a Shopify app which must be served over HTTPS.

Django 400 Bad Request, even with Allowed Hosts

I just had to break down django itself to understand why I could not get rid of my error.

It turns out underscores in domain names is invalid according to the RFCs.

Make sure your domains do not have underscores. If they do, you’ll have to patch django’s host validation function:

host_validation_re = re.compile(r"^([a-z0-9.-]+|\[[a-f0-9]*:[a-f0-9:]+\])(:\d+)?$")

Apple Bluetooth Keyboard – When All Else Doesn’t Work

NO bluetooth devices were working on my computer, suddenly (yosemite).

- Hold down the power button continuously. Check.
– Remove batteries, turn off bluetooth, add batteries, power up, turn on bluetooth. Check.
– Fresh batteries. Check.
– Distance / remove all other BT devices. Check.

A good old restart fixed my problem instantly. Instant pairing request / detection of my devices.

It looked to have installed an update on startup, so it was a much needed restart.

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.

Follow

Get every new post delivered to your Inbox.

Join 104 other followers