Running Development Server

  • https://jekyllrb.com/docs/usage/
# => 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
plugins:
  - 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

Resources

  • https://jekyllrb.com/docs/usage/

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

Blogposts

  • 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

https://www.sparkpost.com/blog/why-chose-css-modules/

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

How to use HTTPS on localhost for local jekyll development

  • https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec

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
//assets/javascript/service-worker.js
var CACHE_NAME = 'site-cache-v1';
var secureLocalHostPath = 'https://127.0.0.1:4000/'

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

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

})

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

})

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

})
//head.hmtl

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

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

}
</script>