Web Development for Physicists

Original RevealJS Version: https://rgoswami.me/revealjs/iop_caps21/caps21webdev#/sec-title-slide

Webinar Page: https://www.iopconferences.org/CAPS21

Blog Post: https://rgoswami.me/posts/iop-caps-webdev-2021-meta/

1. WEB DEVELOPMENT FOR PHYSICISTS ROHIT GOSWAMI MINSTP Created: 2021-06-26 Sat 09:52 1
2. BRIEF INTRODUCTION 3
3. HELLO! Find me here: Who? Rohit Goswami MInstP Doctoral Researcher, University of Iceland, Faculty of Physical Sciences https://rgoswami.me 4
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
5. GETTING ON THE WEB Now easier than ever! 7
6. STATIC SITES 8
7. 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
8. 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
9. HEXO Quickstart nvm use node npm install hexo-cli -g hexo init blog cd blog npm install hexo server 11
10. GATSBY Docs 12
11. DEPLOYING , , Pages –> With one click button!!! Github Gitlab Bitbucket Netlify 13
12. CONTENT MANAGEMENT SYSTEMS 14
13. WORDPRESS Got $$$ ? Similar to Ghost, can be self- hosted Self hosted Pay for a server and web space 15
14. DONE! TL;DR go watch the keynote!! 16
15. WAIT Still here? 18
16. FROM THE TOP But.. getting online is easy! 20
17. WHY BE ONLINE? Cat pictures, communication, online shopping… 21
18. 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
19. 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
20. THE INTERNET What it is and why we care. 25
21. FIRST APPROXIMATION Set of networked devices 26
22. FINDING A SITE ping -c 5 rgoswami.me 27
23. 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
24. WHAT GETS RENDERED
26. 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
27. CASCADING STYLE SHEETS Or CSS, for presentation 31
28. JAVASCRIPT Or JS, for executing requests 32
29. WAIT! I don’t want to be a web developer –> We use themes to keep HTML, CSS and JS away from us 33
30. STATIC SITE GENERATORS Stolen from https://netlify.app/jamstack/ 35
31. USER WORKFLOW 36
32. JAMSTACK Augmented by APIs 37
33. CONTENT CONSIDERATIONS 39
34. ILLUSTRATIVE EXAMPLE Content from https://frinkiac.com/ = 40
35. 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
36. PRACTICALITIES Using JS and other ugly truths 43
37. KaTeX and MathJax Compared MATH here (2016) 44
38. 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
39. 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
40. 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
41. DESIGN DISCUSSIONS 49
42. MATH AND TYPOGRAPHY 50
43. WIKIPEDIA Heat equation 51
44. NO EQUATIONS https://math3ma.com Matrices as Tensor Network Diagrams 52
45. FORMULA LIST –> https://grimoire.science Formula list 53
46. LONG-FORM WITH REFERENCES https://rgoswami.me Trees and Bags
48. CODE AND TEXT 55
49. TENSORFLOW MNIST QComp tutorial 56
50. SSG AND SYNTAX HIGHLIGHTING A tutorial introduction to Nix 57
51. REFERENCING 58
52. GROUP PUBLICATIONS ( ) Jekyll based, with metadata Femtolab list of publications 59
53. Post on Post on REFERENCING IN-POSTS https://rgoswami.me fortran with references https://grimoire.science basic statistics 60
54. DOCUMENTATION EXAMPLES 61
55. CHAPEL LANGUAGE DOCUMENTATION Single source design Link 62
56. D-SEAMS DOCUMENTATION Has a split design ( , , ) homepage wiki doxygen 63
57. IRHPC DOCUMENTATION Uses docusaurus, link here 64
58. CONCLUSIONS The world is your oyster. 66
59. 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
60. THANKS! Questions? 69