dropshado.ws

IE unloaded img size

Wed, 25 Nov 2015 11:27:01 -0500

Internet Explorer 11, unlike Chrome or Firefox, renders a small 28px x 32px placeholder for an unloaded image. This might getcha if you are using responsive sizing img { width: 100% }. Other browsers will render a full-width unloaded image with 0 height, but IE11 will render it large, maintain its size ratio. See pen.

event.currentTarget vs. this

Wed, 04 Nov 2015 11:55:25 -0500

You can use event.currentTarget in place of this inside jQuery event handlers

$('.button').on( 'click', function( event ) {
  console.log( event.currentTarget === this ); // true
});

While this inside event handlers has become commonplace, I feel the event.currentTarget pattern is more obvious. It is more compatible working with other patterns that use this differently.

Scripts at bottom vs. document ready

Thu, 22 Oct 2015 15:01:33 -0400

Scripts at bottom vs. document ready:

Including



padding-bottom border-box border bug
Fri, 27 Feb 2015 08:26:22 -0500
You can use padding-bottom as a way to set height of an element based on its parent width, so that it is proportional with its own width.

/* item sized as a square 1/3 size of container */
.item {
  width: 33.3%;
  padding-bottom: 33.3%;
}


If you are using box-sizing: border-box and the element has border, you would expect that element to remain a perfect square.

.item {
  width: 33.3%;
  padding-bottom: 33.3%;
  border: 2px solid;
}


But that’s not the case. Because the height is faked with padding-bottom, it’s not actually setting its height. Consequently, the height of the border is added on top of the padding-bottom height.

This can be resolved either by using outline instead of border, or using calc to account for the border size.

See the Pen bug with padding-bottom, border, and box-sizing: border-box by David DeSandro (@desandro) on CodePen.




Match CSS animation keyframe transforms
Sun, 08 Feb 2015 17:35:15 -0500
My loader spinner wasn’t spinning.

.loader-spinner {
  animation: spinLoader 600ms steps(12, end) infinite;
}

@keyframes spinLoader {
  from { transform: translate( -50%, -50% ); }
  to { transform: translate( -50%, -50% ) rotate(1turn); }
}


The problem was that the keyframes for transform need to match. Even though there’s an implicit rotate(0turn) in the transform value, it’s required to be explicit for animation keyframes.

@keyframes spinLoader {
  /* match transform values */
  from { transform: translate( -50%, -50% ) rotate(0turn); }
  to { transform: translate( -50%, -50% ) rotate(1turn); }
}


See the Pen loader spinner with CSS animation by David DeSandro (@desandro) on CodePen.




jQuery event trigger namespace
Sat, 31 Jan 2015 14:32:00 -0500
jQuery event namespaces allow you to separate event listeners.

// bind click listeners
$element.on( 'click.alpha', function() {
  console.log('Alpha click');
});
$element.on( 'click.beta', function() {
  console.log('Beta click');
});
// unbind alpha click listener only
$element.off('click.alpha');


EDIT The rest of this post is false I had thought I verified this, but alas, no. Triggering with a namespace will not trigger that event without the namespace.



They can also be used when triggering events, to specify where that event came from.

$element.trigger('click.pluginName')


I’m using namespace triggering in Flickity, as a way to distinguish Flickity’s select event from the native select event.

// create jQuery event from original event object
var $event = jQuery.Event( event );
// set type, like select.flickity
$event.type = type + '.flickity';
this.$element.trigger( $event, args );



Object.prototype.watch()
Tue, 13 Jan 2015 22:37:43 -0500
Firefox has native .watch() method.


  The watch() method watches for a property to be assigned a value and runs a function when that occurs.


Interestingly, it’s special to Firefox.


  Warning: Generally you should avoid using watch() and unwatch() when possible. These two methods are implemented only in Gecko, and they’re intended primarily for debugging use.


I discovered this when I was using watch for an option property name options.watch = true. My stuff worked fine in Chrome & Safari, but it was absolutely broken in Firefox.


Reinstall IE8 ievms
Sat, 10 Jan 2015 08:44:17 -0500
I use ievms to browser test Internet Explorer. Every couple of months, the IE8 VM expires (This copy of Windows must be activated…). The only solution is to reinstall the VM. ievms maintainer xdissent also made iectrl, a command line tool to make stuff like this easier.

iectrl reinstall 8


I tried removing .ievms/ files, and re-installing via the bash script. No dice. iectrl is the way to go.


moveChildren
Thu, 08 Jan 2015 14:34:00 -0500
To move all children from one element into another.

function moveChildren( fromElem, toElem ) {
  while ( fromElem.children.length ) {
    toElem.appendChild( fromElem.children[0] );
  }
}
// move all children in alpha into beta
moveChildren( alpha, beta )



Absolute text wrap
Mon, 28 Jul 2014 21:50:08 -0400
When an element is positioned partly outside the window AND that element does not have a width set, its text will wrap inside the window.

See the Pen absolute text wrap by David DeSandro (@desandro) on CodePen.



This behavior threw me for a loop on this Masonry bug.


Conditional CSS doesn't work in Chrome
Thu, 13 Mar 2014 18:03:49 -0400
Jeremy Keith’s Conditional CSS technique currently doesn’t work in Chrome.

@media all and (min-width: 45em) {
    body:after {
        content: 'widescreen';
        display: none;
    }
}


The problem is with how Chrome will not generate pseudo elements when set to display: none.

My current solution/hack is to fallback to the head font-size code, as Opera now supports this.

@media screen and (min-width: 45em) {
    head {
        font-family: widescreen;
    }
}


Thx @overflowhidden for the assist.


Canvas spinning fan
Wed, 26 Feb 2014 09:12:21 -0500
 



The white noise you hear in this Vine is the sound of my laptop fan whirling away at top speed. This animation is rendered in <canvas>, in Chrome. While the animation does have thousands of particles being rendered, I hadn’t expected the top-speed fan.

I’ve been able to pinpoint its cause. The animation was using the width of an image, this.img.width, for every particle, every frame. Setting this value to a separate property this.imgWidth has slowed down the fan significantly. I speculate that this issue is similar to reflow triggers.

Clearly, debugging via hardware machinations is not a good strategy. I still struggle with making sense of anything in the Chrome Developer Tools around rendering performance – especially for a rendering like this one, involving thousands of particles over thousands of frames.


Firefox doesn't support canvas composite darker
Wed, 19 Feb 2014 20:27:00 -0500
Firefox doesn’t support canvas globalCompositeOperation darker. As it turns out, the darker composite value was removed from the canvas spec in 2007. See the globalCompositeOperation examples on MDN.

The closest solution is to use difference (which oddly enough isn’t in the spec), which Firefox (currently v28) does support. But difference is different from darker. difference subtracts channel values, darker multiplies them. If you’re using primary colors (#f00, #f0f, etc.) it may work.

IE10 supports neither.

See the Pen darker/difference canvas composite by David DeSandro (@desandro) on CodePen.




Safari rounds off fractional pixels
Sun, 12 Jan 2014 11:43:51 -0500
I’m looking to measure the width of an element with width: 66.666%, whose container is width: 300px. Most browsers return a fractional pixel value, i.e. 199.98px. Safari rounds off the fractional pixel value to 199px. It’s a bit odd, as I would expect it would at least round up to 200px when the value is that close.

See demo:

See the Pen getComputedStyle width 66.666% by David DeSandro (@desandro) on CodePen.

I’ve opened WebKit bug #126844 to capture this behavior.

I have found that using calc() values produces more expected results. If I change the width of the element to width: calc( 100% * 2 / 3 ), Safari returns with 200px. It’s still problematic, but it’s an improvement.

See the Pen getComputedStyle width calc( 100% * 2/3) by David DeSandro (@desandro) on CodePen.




Static site S3 workflow
Thu, 02 Jan 2014 23:04:05 -0500
After a snafu with my previous hosting company, I’ve been using Amazon’s static site service on S3.

Site is built in build/. I’ve been using Grunt mostly, but this would work just as well for Jekyll sites.

I use s3cmd to transfer the files. Everything in build/ gets uploaded.

s3cmd sync build/. s3://masonry.desandro.com


This command is saved in a Makefile. See masonry-docs/Makefile.

make deploy


So after set up, making a site takes one or two commands

grunt
make deploy


See this workflow in use:


Masonry docs
Isotope docs
Draggabilly site




This workflow is especially straightforward. At one time I did try a git post-receive hook (like one Nicolas Gallagher explains), but this felt murky, _ssh_ing to a remote box, managing two git instances. Sticking with straight-up file transfering is dumb enough that I can understanding it. Adding a separate workflow for deployment on top of git seems like duplicated effort, but there’s a benefit to separating these tasks. In my head, they’re separate.


Transition end propertyName
Mon, 02 Sep 2013 21:43:27 -0400
When listening to transition End event, the event object comes with propertyName. This is useful when detecting just what transition has completed.

elem.addEventListener( 'transitionend' function( event ) {
  console.log( event.propertyName + 'transition completed' );
});


Also interesting is how the transition end event will only trigger once if a property gets changed again, during a previous transition.

See the Pen transtionEnd by David DeSandro (@desandro) on CodePen




Flex box with collapsed height
Tue, 28 May 2013 14:33:41 -0400
By default, flex box makes item elements inherit the height of their container. To disable this behavior, and collapse item heights, use align: start (or the proper variation there-of).

.row {
  /* flex box */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;   
  /* align start, disable vertical height */
  -webkit-box-align: start;
     -moz-box-align: start; /* FF <=20 */
     -ms-flex-align: start; /* IE10 */
  -webkit-align-items: flex-start;
          align-items: flex-start;
}


Check out this Pen!




Refresh button in IE developer tools
Wed, 27 Mar 2013 13:10:09 -0400
Internet Explorer’s HTML developer tool will not display changes to the DOM until you click the Refresh button. This goes for newly appended elements, changes to classes, and other changes.



Try out this demo. New items won’t appear in the inspector until you refresh.

Thx to KillianJK on GitHub for putting in the due diligence to get to the bottom of this.


event.target on resize in Opera
Sun, 24 Mar 2013 19:08:40 -0400
In Opera, on resize, event.target is document, not window.

See fiddle.