Category: Web Development

What are CSS Modules and why do we need them?

TheSmithy
What are CSS Modules and why do we need them?

#What are CSS Modules?

According to the repo, CSS modules are:

CSS files in which all class names and animation names are scoped locally by default.

So CSS Modules is not an official spec or an implementation in the browser but rather a process in a build step (with the help of Webpack or Browserify) that changes class names and selectors to be scoped (i.e. kinda like namespaced).

Read more on CSS tricks

commonWP

TheSmithy
commonWP

Description

commonWP is a plugin that enables usage of free, public CDN (jsDelivr) for open source JavaScript and CSS files. Those files are:

  • All files from WordPress core, unless development version of WordPress is used.
  • All files from plugins hosted by WordPress.org Plugins Repository, unless author of specific plugin doesn’t use SVN tags for releasing.
  • All files from themes hosted by WordPress.org Themes Repository.
  • All files from plugins and themes hosted on GitHub that support GitHub Updater.
  • All files marked as available on npm in any type of theme, plugin, or MU plugin.

HTTP headers for the responsible developer

TheSmithy

https://www.twilio.com/blog/a-http-headers-for-the-responsible-developer

https://news.ycombinator.com/item?id=19856419

Developers have the power to build the web for everyone, but that power needs to be used responsibly. What matters, in the end, is building things that help and enable people.

In this article, I want to share how HTTP headers can help you build better products for a better web for everyone.

HTTP – HyperText Transfer Protocol

Let’s talk about HTTP first. HTTP is the protocol used by computers to request and send data over the web.

When a browser requests a resource from a server it uses HTTP. This request includes a set of key-value pairs giving information like the version of the browser or what file formats it understands. These key-value pairs are called request headers.

The server answers with the requested resource but also sends response headers giving information on the resource or the server itself.

Request: 
GET https://the-responsible.dev/ 
Accept: text/html,application/xhtml+xml,application/xml 
Accept-Encoding: gzip, deflate, br 
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,de;q=0.7 ... 

Response: 
Connection: keep-alive 
Content-Type: text/html; charset=utf-8 Date: Mon, 11 Mar 2019 12:59:38 GMT ... Response Body

HTTP is the foundation of the web today and it offers many ways to improve user experience. Let’s dive into how you can use HTTP headers to build a web that is safe, affordable and respectful

Read the rest of the article

Video: Web Performance Mini Series: Animations (Paul Lewis)

TheSmithy

By Paul Lewis. See also his article on HTML 5 Rocks:
https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Even more links:

  1. https://eu.udacity.com/course/browser-rendering-optimization–ud860
  2. https://developers.google.com/web/fundamentals/performance/rendering/
  3. https://aerotwist.com/blog/flip-your-animations/
  4. https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse
  5. https://aerotwist.com/blog/the-anatomy-of-a-frame/

Takeaway of this video:

The magic goal: 16ms

For 60HZ monitors aim for 16ms delay or less. (60fps = ~16ms per frame).
Delays above that will make the animation look janky
Note: for the 120HZ monitors that are getting more common these days the magic number would of course be 8 ms.


Read More