butiran-✗

html-css-js intro

· 6 mins read · edit

Experimental slide for a course session in Hugo post. Start presentation .

^

html-css-js further intro

local html, medium + codepen, github pages

Sparisoma Viridi
20260310_v1 | https://butiran-x.github.io/26c46/
butiran-x/26c46
2026-03-10
1
^

outline

  • local html 3
  • app examples 6
  • deployment 9
butiran-x/26c46
2026-03-10
2
^
local
html
butiran-x/26c46
2026-03-10
3
^

js-tutorial 1: javascript

  • javascript url https://butiran-x.github.io/26a43/ [20260310].
    • hello world, button, label, button label, textarea, canvas,
    • divs in div, buttons in div, udlr buttons in div, mxn div in div,
    • keypad, keypad textarea, keypad textarea canvas, buttons disabled,
    • counter anim canvas, mockup fx-xg-sim.
butiran-x/26c46
2026-03-10
4
^

js-tutorial 2: js-sim-ui

  • url https://butiran-x.github.io/26b38/ [20260310].
    • hello world textarea,
    • button textarea, textarea button textarea, textarea button canvas,
    • ta-bu-ta read-line, ta-bu-ta read-param, ta-bu-ta read-param 2, ta-bu-ta read-block, ta-bu-ta read-block 2, ta-bu-ca read-block 3
butiran-x/26c46
2026-03-10
5
^
app
examples
butiran-x/26c46
2026-03-10
6
^

heatmap

  • Sensors for air temperature dan humidity, wind velocity and direction, and particulate matter PM2.5, all can give information to construct heatmaps.
  • They provide insights for the correlation between parameters and also with human health and carbon emission.
  • Real time multi-dimensional data might build a better model with the help of machine learning.
butiran-x/26c46
2026-03-10
7
Sparisoma Viridi, "Very simple VanillaJS heatmap", Medium, 17 May 2025, url https://medium.com/p/b948e6cc4240 [20260310].
^

butiran.js

  • Using ABM at least, four phases of matter can be simulated using abmphasemat as part of butiran.js.
  • ABM can be used to investigate spatial and detail aspects of SIR (susceptible-infected-recovered) model.
  • Behavior of commuters is interested to study, where one way to simulate it is using ABM.
  • Combining ABM with MD method could produce simulation of stem cell deposition on substrate with nanopattern.
butiran-x/26c46
2026-03-10
8
Sparisoma Viridi, "butiran.js, a simple JS-based simulator for agent-based model", Medium, 10 Jul 2023, url https://medium.com/p/cba0e3f597ed [20260310].
^

deployment
butiran-x/26c46
2026-03-10
9
^

codepen

  • Pens from CodePen can be embedded to Medium story.
  • Go to https://codepen.io/ to find a public pen to embed.
  • In a story, press enter to make a new line, click (+) icon on the left, choose <> to embed something, then paste the link to your pen.
  • Wait for a while until the pen appears and publish the story.
  • Click JS button on the top right to see the code and Result on top center to see the app.
butiran-x/26c46
2026-03-10
10
Sparisoma Viridi, "CodePen in a story on Medium", Medium, 24 Jul 2023, url https://medium.com/p/46ada2e7ee13 [20260310].
^

github pages

  • Create repository.
  • Create docs/index.html.
  • Create GitHub Actions.
  • Change settings for GitHub Pages.
  • Add website link to repository page.
  • Open the deployed website.
butiran-x/26c46
2026-03-10
11
Sparisoma Viridi, "Simple website on GitHub Pages", Medium, 10 Mar 2026, url https://medium.com/p/1be8fcb0d64c [20260310].
^
some
exercises
butiran-x/26c46
2026-03-10
12
^

info

  • Exercises are written in the form of a Medium story.
  • Please refer to the story as given in the footnote.
  • Slide show only some words from the story as guidance.
butiran-x/26c46
2026-03-10
13
^

textareabox

  • It is a group of label and textarea.
  • It can be used as a input element that already has visible label above it.
  • The textarea and label elements are inside a div element.
  • There are function for reading all lines in the textarea, clear content of it, and add line of text to it.
butiran-x/26c46
2026-03-10
14
Sparisoma Viridi, "Group label and textarea in a div", Medium, 19 Apr 2025, url https://medium.com/p/3d9e597429cf [20260310].
^

buttonpanel

  • It is a group of buttons.
  • Currently it supports only vertical stacking mode, not horizontal one.
  • A button can enable or disable other buttons as necessary.
  • The click event can be advanced to do other things than only mentioned above.
butiran-x/26c46
2026-03-10
15
Sparisoma Viridi, "Group buttons in a div", Medium, 18 Apr 2025, url https://medium.com/p/0570fcef51cc [20260310].
^

div-n-text in div

  • It shows how to style text and div elements inside div element, where several the parent div elements are also inside container div element.
  • Features shown are word-break: break-all;, display: flex;, display: inline-block;, paddding-top: [n]px;, paddding-left: [n]px;, paddding-right: [n]px;, paddding-bottom: [n]px;, margin-top: [n]px;, and margin-left: [n]px;.
butiran-x/26c46
2026-03-10
16
Sparisoma Viridi, "Text and div in div", Medium, 7 Apr 2025, url https://medium.com/p/e747d312cd8e [20260310].
^

div in div

  • It is a example of three div elements in a div element.
  • CSS features given are border and background colors, border radius, absolute and relative position, and display in a line.
butiran-x/26c46
2026-03-10
17
Sparisoma Viridi, "Divs in div", Medium, 6 Apr 2025, url https://medium.com/p/d5fee4adf44f [20260310].
^

div, text, css

  • It shows how to create a blog appearance using div elements to divide the page.
  • A intro div is on top and three div elements below it serve as three column content.
butiran-x/26c46
2026-03-10
18
Sparisoma Viridi, "HTML div element and CSS", Medium 22 Jul 2023, url https://medium.com/p/5cd259e5772c [20260310].
^

svg circle

  • It gives information about SVG circle and its main attributes,
  • It shows how to use CSS to style the element and use one of its selectors,
  • It tells how to program the element using JavaScript.
butiran-x/26c46
2026-03-10
19
Sparisoma Viridi, "SVG circle", Dev Genius -- Medium, url https://medium.com/p/e1ebaf9c020e [20260310].
^
others
and misc info
butiran-x/26c46
2026-03-10
20
^

checkerboard

  • It shows the use of :nth-child() pseudo class.
  • It can produce sort-of checkerboard with one until four color.
  • Unfortunately, the formula for usual checkerboard can not be found.
butiran-x/26c46
2026-03-10
21
Sparisoma Viridi, "Multi-color checkerboard", Medium, 11 Apr 2025, url https://medium.com/p/f49a97a4fa71 [20260310].
^

css responsiveness

  • It shows an example of Hugo shortcode showing category card that behaves consistently in notebook screen and in smartphone screen.
  • Calendar card that behaves inconsistently in notebook screen and in smartphone screen, where it is as expected in the first device but it is unexpected in the second device.
  • The source of the issue is CSS responsiveness.
butiran-x/26c46
2026-03-10
22
Sparisoma Viridi, "CSS responsiveness issues", Medium, 7 Sep 2025, url https://medium.com/p/fc47ed17f272 [20260310].
^
Thank you
butiran-x/26c46
2026-03-10
23

stories