🛑OCD ALERT🛑: GET YOUR COPYRIGHT YEAR IN ORDER

Issam Mani — Fri, 12 Feb 2021 19:34:32 +0000

When I visit a website the first thing I check is the copyright year in the footer. You might be surprised how many websites out there don't update the year, which might suggest that even when they did some time in the past it was done manually.

Seeing a footer with an outdated year just tells me that the website is not properly looked after, which in a way as a business can degrade the value of your product.
As a web developer, I can't help myself but think that the person who made the website didn't care enough to add a one liner that auto generates the current year.

I even wrote a crawler to find such websites and boy there some big names in the mix. So without further ado I present to you :
🥁
🥁
🥁

"HONEY I F***** UP THE COPYRIGHT YEAR" TOP 10 2021 Edition: [Better name needed, let's make this an annual event 😝]

Apple Music
Outlook
Deutsche Bahn (German railways)
Deutsche Post (German Postal Service)

This one was a real mess. I found pages with 2017, 2019, 2020.
Another link
Some other apple subdomains (This isn't too bad, I mean some pages are archaic)
Apple podcast lisiting page

Apple app listing page
Vimeo help center
Ironically an article on sonet.digital titled "The Importance of Updating Your Copyright Dates" which in turn has an outdated copyright year.
Github Status
Stitcher
Atlassian investors

If you would like to test this for yourself grab a copy of the crawler and crawl away (If that's even a word).

Now I am by no means a lawyer or a trusted source on legal matters, but from what I understand and what other "by every means" more qualified people stated on the web is that it is not necessary to update the year from a legal standpoint.

Here is what a nolo had to say about this:

... The copyright notice must also state the year the work was published. It has yet to be decided exactly when a website is "published" for copyright purposes, since many websites are updated daily. You should assume that any website that can be accessed has been "published" as soon as it launches, and include a copyright notice on it to reflect the original date.

But it also states that after substantial changes to your website the copyright year should reflect the year of publication of those changes:

However, if an update contains a substantial amount of new material, it is considered to be a separate work of authorship in its own right. The notice for such a derivative work should contain the date the new work was published.

How you quantify "substantial changes" remains a mystery, though. Some other sources claim that having the original publication date might deter infringement of your website content.

Now here is my counterargument: Big companies whose products can be only described as living creatures, don't follow such conventions. Facebook, for instance, who btw. has a massive legal team and literally billions at stake has the following copyright text(as of the time of writing) :

Conclusion

This blogpost might feel like a rant (which it definitely is !), but really people this problem could be solved by a one liner in almost all languages ! On a final note: GET YOUR COPYRIGHT YEARS IN ORDER !

If you enjoyed reading this like, share and/or leave a comment. Feedback is always welcome !

Live long and prosper 🖖

Polyfills - What are they ?

Issam Mani — Fri, 12 Feb 2021 13:35:10 +0000

The web is full of weird terminology, that can be especially daunting for newcomers. The idea behind this blog post and ( hopefully 🤞 ) upcoming blog posts is to demistify "fancy" terms. In this article we will discuss polyfills.

In plain english

Polyfills are pieces of code that aim to make new features available on browsers ( or JS environments in general ) that don't or won't support said features. Two things to keep in mind:

Not all features are polyfillable ( new syntactic features cannot be polyfilled e.g. spread syntax(...).
A polyfill only runs, when the feature is missing. Otherwise it should use the native implementation.

A brief history...

The word polyfill was initially introduced [ coined and popularized] by Remy Sharp in 2009. The word itself originates from the name Polyfilla, a british product used to fill cracks and holes in walls.

Polyfilla is a UK product known as Spackling Paste in the US. With that in mind: think of the browsers as a wall with cracks in it. These polyfills help smooth out the cracks and give us a nice smooth wall of browsers to work with.

-- Remy Sharp

Enough history. I said brief, didn't I !

Polyfills vs Transpilers

Before digging any deeper, let's try to make the difference between the terms Polyfill and Transpiler clear.

Remember how I said there is no way to polyfill new js syntax. Well a transpiler ( transformer + compiler ) does just that.

It transforms new syntax into equivalent old syntax that is supported by old browsers. So unlike a polyfill, the code you write is transpiled into alternate code, that would eventually run in the browser.

Keep in mind that a transpiler like babel will use, depending on your target browsers, underneath the hood polyfills to support new features.

If you are still unsure about the difference, here is an SO response that goes into a bit more detail.

Let's write our own polyfill

All right, let's dig in. As I mentioned before a polyfill is just a piece of code, that aims to make some functionality available across all browsers. Usually a good polyfill will check if the target feature already is supported in the browser. If so do nothing da! Otherwise use the available APIs to mimic the behavior of this new feature.

JS : `Element.closest(selectorList)`

According to MDN:

The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns null.

So basically given an HTML Element the closest() method returns the closest element in the elements tree that matches at least one of the selectors in the selectorList.

Assume we have the following HTML DOM:

...
<div class="level-1">
    <div class="level-2">
        <p class="level-3"> Polyfills are awesome 🎉 </p>
    </div>
</div>
...

const paragraph = document.querySelector('p');
paragraph.closest('.level-1'); // Returns <div class="level-1">...</div>
paragraph.closest('.level-1, .level-2'); // Returns <div class="level-2">...</div>
paragraph.closest('.level-3'); // Returns paragrah itself
paragraph.closest('.level-bla'); // Returns null

All right ! Now that we know how this function works , we can start implementing.

👋 Beginner's Tip: This is a good time to open codepen and start experimenting.

Let's think about the problem for a second (or more). We need:

A way to traverse the DOM upwards.
To check if element matches the selectorList.

Now, let's talk solutions:

A way to traverse the DOM upwards *=> use a while loop and the .parentElement prop.
To check if element matches the selectorList => use the .matches() method.

const closest = (element, selectorList) => {
    while(element && !element.matches(selectorList)) {
        element = element.parentElement;
    }
    return element;
};

So in the snippet above, we are defining a function that takes two arguments: element and selectorList. Then we are looping until one of two things happen:

element is null, and therefore we have reached the root element.
element.matches(selectorList) returns true, and therefore we found the closest element that matches our selectorList.

We can check that this beahves the same way on our previous test set.

...
const paragraph = document.querySelector('p');
closest(paragraph, '.level-1'); // Returns <div class="level-1">...</div>
closest(paragraph,'.level-1, .level-2'); // Returns <div class="level-2">...</div>
closest(paragraph,'.level-3'); // Returns paragrah itself
closest(paragraph,'.level-bla'); // Returns null

The last step is to add the function to the Element's prototype, so that it's available to all instances of the Element object:

Element.prototype.closest = (selectorList) => {
    let element = this;
    while(element && !element.matches(selectorList)) {
        element = element.parentElement;
    }
    return element;
};

One last detail, is that we would rather prefer if our polyfill somehow adds this function to the prototype only if the browser doesn't support it. In other words, we would rather use the browser's native implementation if it's available. A simple if will do !

if(!Element.prototype.closest) {
    Element.prototype.closest = (selectorList) => {
        let element = this;
        while(element && !element.matches(selectorList)) {
            element = element.parentElement;
        }
        return element;
    };
}

✨ NOTE: This is by no means a production-ready polyfill. For simplicity I assumed a lot of things. A production-ready polyfill would also account for the fact that .matches() may not exist and also check different browser vendor prefixes. A more complete version can be found here

CSS: `:blank`

As of the time of writing the :blank pseudo-class has very low support . In this section we will try to write a rough polyfill (not complete by any means) just to demonstrate the idea of polyfilling CSS functionality.

Again I will quote the MDN definition ( as one normally does ! ) :

The :blank CSS pseudo-class selects empty user input elements (e.g. <input> or <textarea>).

So using the :blank pseudo-class will look something like this

input:blank{
  background: red;
}
textarea:blank{
  color: green;
}

✨ NOTE1: Since this is a syntactic proprety of CSS using textarea:blank will be ruled out as an invalid selector by the CSS Parser. So instead we will use textarea[blank]. Just keep in mind that in the rest of this post I will use :blank and [blank] interchangeably.

✨ NOTE2: This is actually what PostCSS does underneath the hood. It replaces all occurences of :blank with [blank].

Let's think about how we can achieve this. We need :
1. Some way to access our stylesheet(s).
2. Detect selectors of the form selector[blank].
3. Bind our the blank pseudo-class to the selected elements.
4. Update styles when value of input is changed.

👋 Beginner's Tip: This is a good time to open codepen and start experimenting.

These are our requirements. Let's talk about how we can tackle each and everyone:

1. Some way to access our stylesheet => CCSOM
2. Detect :blank function => use a regex
3. Bind our the blank pseudo-class to the selected elements => Add an attribute to the selected inputs
4. Update the value of the state of the input when the the value is changed via JS => listen for the input event

1. Access our stylesheets

First we need to access our CSS Stylesheets. We do so by using CCSOM, specifically by accessing the styleSheets prop on the document.

for(let  styleSheet  of  document.styleSheets) {
  for(let  cssRule  of  styleSheet.cssRules) {
    console.log(cssRule.cssText); // Prints each css rule in our stylesheets
  }
}

2. Locate selectors with `:blank` pseudo-class

Now that we have access to all the CSS rules we can check if any of them have the :blank pseudo-class.

const blankRegex = /(.*)\[blank\]/;
for(let  styleSheet  of  document.styleSheets) {
  for(let  cssRule  of  styleSheet.cssRules) {
    const match = cssRule.selectorText.match(blankRegex);
    if(match) {console.log(match[1]);} // Prints matched selector name i.e input, textarea without the [blank]
  }
}

🛑 Refactoring detour
Let's try to refactor our code so that it doesn't get messy.
Let's start by defining a function that's responsible for returning an array of selectors.

const extractBlankSelectors = () => {
      const blankRegex = /(.*)\[blank\]/;
      // Returns an array of of all CSSRules
      const cssRules = 
        [...document.styleSheets]
          .map(styleSheet => [...styleSheet.cssRules])
          .flat();

      // Returns an array with our desired selectors
      const blankSelectors = 
        cssRules.map(cssRule => cssRule.selectorText)
                .reduce((acc, curr) => acc.concat(curr.split(",")), [])
                .map(selectorText => selectorText.match(blankRegex) ? selectorText.match(blankRegex)[1] : null)
                .filter(selector => !!selector);

      return blankSelectors;
    };

Here I used a functional approach instead of using for loops as before, but you can achieve the same with the nested for loops. If this looks weird or confusing to you here a nice article talking about this. Also feel free to ask in the comments section.

🛑Refactoring detour end

3,4. Bind our the blank pseudo-class to the selected elements and watch for change !

Now that we have access to the the desired selectors via extractBlankSelectors we can easily select and add attributes to our target elements.

....
    const bindBlankElements = () => {
      // Select all elements from DOM that match our SelectorList
      const elements = document.querySelectorAll(extractBlankSelectors().join(','));
      elements.forEach(element => {
        // Add blank attribute if value is empty
        if(element.value === '') {
          element.setAttribute('blank', '');
        }
        // Attach an input event listener
        element.addEventListener('input', (ev) => {
          element.value === '' ? element.setAttribute('blank', '') : element.removeAttribute('blank', '');
        });
      });
    };

Initially we select all the elements returned from extractBlankSelectors. Then for each one of them:

Add blank attribute if the value is empty.
Attach an input event listener. On eah input the callback checks wether the input value is empty or not and applies the blank attribute accordingly.

Here is a codepen to try it out live:

Et voilà ! We are all done !

Conclusion

As you can see polyfills are a super important concept, that helped the web move forward and developers use new features without the fear of breaking compatibility. If you enjoyed reading this like, share and/or leave a comment. Feedback is always welcome !

Live long and prosper 🖖

DEV Community: Issam Mani

🛑OCD ALERT🛑: GET YOUR COPYRIGHT YEAR IN ORDER

Conclusion

Polyfills - What are they ?

In plain english

A brief history...

Polyfills vs Transpilers

Let's write our own polyfill

JS : `Element.closest(selectorList)`

CSS: `:blank`

1. Access our stylesheets

2. Locate selectors with `:blank` pseudo-class

3,4. Bind our the blank pseudo-class to the selected elements and watch for change !

Conclusion

Useful links

DEV Community: Issam Mani

🛑OCD ALERT🛑: GET YOUR COPYRIGHT YEAR IN ORDER

Conclusion

Polyfills - What are they ?

In plain english

A brief history...

Polyfills vs Transpilers

Let's write our own polyfill

JS : Element.closest(selectorList)

CSS: :blank

1. Access our stylesheets

2. Locate selectors with :blank pseudo-class

3,4. Bind our the blank pseudo-class to the selected elements and watch for change !

Conclusion

Useful links

JS : `Element.closest(selectorList)`

CSS: `:blank`

2. Locate selectors with `:blank` pseudo-class