Web Development for Physicists

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

BRIEF INTRODUCTION 3

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

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

GETTING ON THE WEB Now easier than ever! 7

STATIC SITES 8

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

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

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

GATSBY Docs 12

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

CONTENT MANAGEMENT SYSTEMS 14

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

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

WAIT Still here? 18

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

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

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

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

THE INTERNET What it is and why we care. 25

FIRST APPROXIMATION Set of networked devices 26

FINDING A SITE ping -c 5 rgoswami.me 27

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

WHAT GETS RENDERED

HYPERTEXT MARKUP LANGUAGE Or HTML for structure Markdown simplifies HTML
is the best variant Extends to code with or Circumventing HTML Also , <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <h1 id="heading-1">Heading 1</h1> <p>Some text</p> <blockquote> <p>A quote</p> </blockquote> </body> </html> Pandoc RMarkdown MyST # Heading 1 Some text > A quote Textile Orgmode 30

CASCADING STYLE SHEETS Or CSS, for presentation 31

JAVASCRIPT Or JS, for executing requests 32

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

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

USER WORKFLOW 36

JAMSTACK Augmented by APIs 37

CONTENT CONSIDERATIONS 39

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

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

PRACTICALITIES Using JS and other ugly truths 43

KaTeX and MathJax Compared MATH here (2016) 44

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

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

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

DESIGN DISCUSSIONS 49

MATH AND TYPOGRAPHY 50

WIKIPEDIA Heat equation 51

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

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

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

CODE AND TEXT 55

TENSORFLOW MNIST QComp tutorial 56

SSG AND SYNTAX HIGHLIGHTING A tutorial introduction to Nix 57

REFERENCING 58

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

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

DOCUMENTATION EXAMPLES 61

CHAPEL LANGUAGE DOCUMENTATION Single source design Link 62

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

IRHPC DOCUMENTATION Uses docusaurus, link here 64

CONCLUSIONS The world is your oyster. 66

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

THANKS! Questions? 69

Web Development for Physicists

Web Development for Physicists

More Decks by Rohit Goswami

Other Decks in Design

Featured

Transcript