day 341 — code 365

Sat 19 Nov 2016


I implemented my first polyfill! One component was using the .endsWith() String method, but this was only implement in Safari after version 9. This meant that the application was completely broken for users using older versions of Safari.

From the MDN documentation, this was the polypill:

if (!String.prototype.endsWith) {
console.log('inside if');
String.prototype.endsWith = function(searchString, position) {
var subjectString = this.toString();
if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
position = subjectString.length;
position -= searchString.length;
var lastIndex = subjectString.lastIndexOf(searchString, position);
return lastIndex !== -1 && lastIndex === position;

So I placed that in a helper file, inside an exported function, and imported that in the troublesome component. Then I invoked the polyfill:


at the top of the component, before any other code. This mean that all subsequent String objects now had a endsWith method! I found this very interesting to actually implement — I have come across the term “polyfill” a lot in my readings.


.row {
page-break-inside: avoid;

This doesn’t work:

@page {
counter-increment: page;
size: A4;
@bottom-right {
content: counter(page);

I think it’s because there’s only ONE page if there are no explicit page breaks. I managed to work around this:

.row:nth-child(6n) {
page-break-after: always;
.row:nth-child(6n)::after {
counter-increment: page;
content: "Page " counter(page) " of " counter(pages);

This allowed me to get an incrementing counter (!!!), but pages was always zero, because it’s not incremented anywhere!

I found this comparison of layout engines very interesting: