Save 37% off PRO during our Black Friday Sale! »

Web Development for Physicists

Web Development for Physicists

F6baf93a0833a98bdc8184c214f4c468?s=128

Rohit Goswami

June 26, 2021
Tweet

Transcript

  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

  25. 29

  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

  47. 54

  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