Slide 1

Slide 1 text

WEB DEVELOPMENT FOR PHYSICISTS ROHIT GOSWAMI MINSTP Created: 2021-06-26 Sat 09:52 1

Slide 2

Slide 2 text

BRIEF INTRODUCTION 3

Slide 3

Slide 3 text

HELLO! Find me here: Who? Rohit Goswami MInstP Doctoral Researcher, University of Iceland, Faculty of Physical Sciences https://rgoswami.me 4

Slide 4

Slide 4 text

LOGISTICS All contents are Generated from sources Companion hosted on GitHub orgmode post here Slides have screenshots of existing sites These will be discussion topics Questions are welcome after / during the lecture 5

Slide 5

Slide 5 text

GETTING ON THE WEB Now easier than ever! 7

Slide 6

Slide 6 text

STATIC SITES 8

Slide 7

Slide 7 text

HUGO Installation instructions Quick start hugo new site quickstart cd quickstart git init cd themes gh repo clone haozeke/hugo-theme-hello-friend-ng-hz cd ../ echo theme = \"hugo-theme-hello-friend-ng-hz\" >> config.toml hugo new posts/my-first-post.md nvm use node npm install postcss-cli autoprefixer hugo server -D 9

Slide 8

Slide 8 text

JEKYLL Quickstart rbenv shell 3.0.1 gem install jekyll bundler jekyll new myblog cd myblog echo "gem \"webrick\"" >> Gemfile bundle exec jekeyll serve # --livereload 10

Slide 9

Slide 9 text

HEXO Quickstart nvm use node npm install hexo-cli -g hexo init blog cd blog npm install hexo server 11

Slide 10

Slide 10 text

GATSBY Docs 12

Slide 11

Slide 11 text

DEPLOYING , , Pages –> With one click button!!! Github Gitlab Bitbucket Netlify 13

Slide 12

Slide 12 text

CONTENT MANAGEMENT SYSTEMS 14

Slide 13

Slide 13 text

WORDPRESS Got $$$ ? Similar to Ghost, can be self- hosted Self hosted Pay for a server and web space 15

Slide 14

Slide 14 text

DONE! TL;DR go watch the keynote!! 16

Slide 15

Slide 15 text

WAIT Still here? 18

Slide 16

Slide 16 text

FROM THE TOP But.. getting online is easy! 20

Slide 17

Slide 17 text

WHY BE ONLINE? Cat pictures, communication, online shopping… 21

Slide 18

Slide 18 text

PROFILES AND PLATFORMS Where will people find you? LinkedIn Recruiters, possibly peers Facebook Talking to people? Twitter Rage tweeting, shower thoughts Tiktok Nihilistic people burning server time for eyeballs? Orkut ???? Foursquare ??? Misc ??? Google scholar, Yahoo answers, Quora, Tinder You are the product, so you conform to the platform 22

Slide 19

Slide 19 text

WHY HAVE A WEBSITE? Narrative control Freedom from being flooded by chaff and trolls Constant scratchpad Well designed posts can act as notes and mind-dumps Content prioritization Allows content to be grouped by your needs 23

Slide 20

Slide 20 text

THE INTERNET What it is and why we care. 25

Slide 21

Slide 21 text

FIRST APPROXIMATION Set of networked devices 26

Slide 22

Slide 22 text

FINDING A SITE ping -c 5 rgoswami.me 27

Slide 23

Slide 23 text

BASIC BROWSING ANATOMY Networking without a terminal Uniform resource locator (URL) essentially performs a lookup at DNS nameserver Server Something transmitting information across a network, commonly html, css, js, but also json or tabular data Browser User facing application to communicate with servers To get on the internet…… We need to control a URL 28

Slide 24

Slide 24 text

WHAT GETS RENDERED

Slide 25

Slide 25 text

Slide 26

Slide 26 text

HYPERTEXT MARKUP LANGUAGE Or HTML for structure Markdown simplifies HTML is the best variant Extends to code with or Circumventing HTML Also ,

Heading 1

Some text

A quote

Pandoc RMarkdown MyST # Heading 1 Some text > A quote Textile Orgmode 30

Slide 27

Slide 27 text

CASCADING STYLE SHEETS Or CSS, for presentation 31

Slide 28

Slide 28 text

JAVASCRIPT Or JS, for executing requests 32

Slide 29

Slide 29 text

WAIT! I don’t want to be a web developer –> We use themes to keep HTML, CSS and JS away from us 33

Slide 30

Slide 30 text

STATIC SITE GENERATORS Stolen from https://netlify.app/jamstack/ 35

Slide 31

Slide 31 text

USER WORKFLOW 36

Slide 32

Slide 32 text

JAMSTACK Augmented by APIs 37

Slide 33

Slide 33 text

CONTENT CONSIDERATIONS 39

Slide 34

Slide 34 text

ILLUSTRATIVE EXAMPLE Content from https://frinkiac.com/ = 40

Slide 35

Slide 35 text

BASIC GUIDELINES Do not post a lot of gripes Keep a diary instead Or twitter or something Do not make it hard to navigate Do not lie Never use pop-ups Multiple images go in a gallery If its a single image and snark, go for Instagram / Twitter Be wary of frameworks 41

Slide 36

Slide 36 text

PRACTICALITIES Using JS and other ugly truths 43

Slide 37

Slide 37 text

KaTeX and MathJax Compared MATH here (2016) 44

Slide 38

Slide 38 text

or Might be native methods too Hugo has Org has Pick a theme which works across backgrounds Or use SYNTAX HIGHLIGHTING Highlight.js Prism.js highlight htmlize.el carbon 45

Slide 39

Slide 39 text

REFERENCES No real standard Pandoc markdown has native support Can consider using and embedding Jekyll Hugo (WIP) Pandoc inbuilt Zotero reports jekyll-scholar hugo-cite 46

Slide 40

Slide 40 text

HOSTING AND DOMAINS Namecheap is cheap, works well enough Netlify is very generous SSGs can be built on a CI before pushing to Netlify Account demo Account demo GH Actions explanation 47

Slide 41

Slide 41 text

DESIGN DISCUSSIONS 49

Slide 42

Slide 42 text

MATH AND TYPOGRAPHY 50

Slide 43

Slide 43 text

WIKIPEDIA Heat equation 51

Slide 44

Slide 44 text

NO EQUATIONS https://math3ma.com Matrices as Tensor Network Diagrams 52

Slide 45

Slide 45 text

FORMULA LIST –> https://grimoire.science Formula list 53

Slide 46

Slide 46 text

LONG-FORM WITH REFERENCES https://rgoswami.me Trees and Bags

Slide 47

Slide 47 text

Slide 48

Slide 48 text

CODE AND TEXT 55

Slide 49

Slide 49 text

TENSORFLOW MNIST QComp tutorial 56

Slide 50

Slide 50 text

SSG AND SYNTAX HIGHLIGHTING A tutorial introduction to Nix 57

Slide 51

Slide 51 text

REFERENCING 58

Slide 52

Slide 52 text

GROUP PUBLICATIONS ( ) Jekyll based, with metadata Femtolab list of publications 59

Slide 53

Slide 53 text

Post on Post on REFERENCING IN-POSTS https://rgoswami.me fortran with references https://grimoire.science basic statistics 60

Slide 54

Slide 54 text

DOCUMENTATION EXAMPLES 61

Slide 55

Slide 55 text

CHAPEL LANGUAGE DOCUMENTATION Single source design Link 62

Slide 56

Slide 56 text

D-SEAMS DOCUMENTATION Has a split design ( , , ) homepage wiki doxygen 63

Slide 57

Slide 57 text

IRHPC DOCUMENTATION Uses docusaurus, link here 64

Slide 58

Slide 58 text

CONCLUSIONS The world is your oyster. 66

Slide 59

Slide 59 text

NOT COVERED Search Engine Optimization Making people find you by accident better RSS Feeds Retaining an audience and random marketing things Writing No style can be universally approved Workflows Paucity of time, surfeit of generality 67

Slide 60

Slide 60 text

THANKS! Questions? 69