bgoonz

Headers and Caching

Caching is a big subject and it can get pretty complicated. Luckily, the browsers have done all the really hard work for us and we just need to #useThePlatform.

There are three types of caches you'll likely deal with in Remix applications:

1. Application-level caches that you implement in your own code.
2. Browser caches you can control through the Cache-Control header.
3. CDN caches you also can control through the Cache-Control headers.

bgoonz

How rsync works

(source: https://sites.google.com/site/rsync2u/home/rsync-tutorial/how-rsync-works3)

~/demo1$rsync is efficient. The first time rsync is run, destination is created and the full source is copied to destination. Thereafter, only changes in source are copied to destination. If the --link-dest option is used, unchanged files are hard linked to the previous backup.

A hard link is a pointer to a file. Hard links have the advantage of using very little memory. There is an illustrated explanation of hard links on http://blog.interlinked.org/tutorials/rsync_time_machine.html > scroll down to “Hard-Links”.

Here is how the "rsync --link-dest=DIR" algorithm creates files in destination:

if destination does not exists,

bgoonz

Front-End Performance Checklist

🎮 The only Front-End Performance Checklist that runs faster than the others.

bgoonz

Appearance

The outward or visible aspect of a website.

• Animation: The process of creating motion and shape change.
  • Animate.css: Just-add-water CSS animations.
  • Animate.less: A bunch of cool, fun, and cross-browser animations converted into LESS for you to use in your Bootstrap projects.
  • Anime.js: Anime is a flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.
• Approach: A jQuery plugin that allows you to animate CSS properties based on distance to an object.

bgoonz

    class GraphNode {
      constructor(val) {
        this.val = val;
        this.neighbors = [];
      }
    }

    let a = new GraphNode("a");
    let b = new GraphNode("b");

bgoonz

body {
	font-family: Helvetica, Verdana
}
p {
	padding: 7px 10px;
}
#demo { 
	border: 1px solid #999;
}