Running Development Server

# => A development server will run at http://localhost:4000/
on# Auto-regeneration: enabled. Use `--no-watch` to disable.
jekyll serve

# LiveReload refreshes your browser after a change.
jekyll serve --livereload

# Incremental will perform a partial build in order to reduce regeneration time.
jekyll serve --incremental

# => Same as `jekyll serve` but will detach from the current terminal.
#    If you need to kill the server, you can `kill -9 1234` where "1234" is the PID.
#    If you cannot find the PID, then do, `ps aux | grep jekyll` and kill the instance.
jekyll serve --detach

Installing a plugin

  • stop your server
  • add the plugin to the _config.yml file
  • add the plugin to the Gemfile file
  • install your new plugin by running gem install my-plugin-name-here
  • restart your server
# config.yml
  - some-plugin-name-here
# Gemfile
gem 'jekyll-paginate'
gem install some-plugin-name

Jekyll Command Usage

# => The current folder will be generated into ./_site
jekyll build

# => The current folder will be generated into <destination>
# => Ex: jekyll build --destination ./my-site-build ... (all the generated contents can be pushed to repo. It contains index.html)
jekyll build --destination <destination>

# => The <source> folder will be generated into <destination>
jekyll build --source <source> --destination <destination>

# => The current folder will be generated into ./_site,
#    watched for changes, and regenerated automatically.
jekyll build --watch

# serve drafts (this will also include non drafts)
jekyll serve --drafts --livereload



Testing PWA experience

  • open xcode -> Preferences -> Open Developer Tool….you can simulate adding to Homescreen etc.

Video notes

  • enhanced client-side rendering video….inline css using css for interactive menus and not js
  • serverside rendering…cookie the user to find out their screen size…ex pinterest

TODO: profile time to first paint…….

  • take some preliminary high level details……………css size of my original app…..
  • maybe hosting on zeit


  • Blog post on tti, using Netflix slides
  • Basics of client side & serverside rendering. …server-side rendering & challenge 2….make tti faster by getting critical html & css

Format all files with atom……………..

How to use HTTPS on localhost for local jekyll development


1: Root SSL certificate

  • openssl genrsa -des3 -out rootCA.key 2048 (generates the file called rootCA.key)
    • use the generated key to create a new Root SSL certificate
    • openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem
var CACHE_NAME = 'site-cache-v1';
var secureLocalHostPath = ''

var urlsToCache = [
  secureLocalHostPath + 'assets/css/main.css',

self.addEventListener('install', function(event){


self.addEventListener('fetch', function(event){


self.addEventListener('fetch', function(event){


<script type="text/javascript">
if ('serviceWorker' in navigator) {
    .then(registration => {

    .catch(error => {
      console.error("Something went wrong. Couldn't acvtivate service worker.", error)