5 - HTML for the Blog

HTML for the Blog

Meter

Low

Medium

High

Wrapper

6 - JS for the Blog

Java Script for the Blog

7 - Experimental Markdown

Experimental Markdown

Experimental markdown to check markdown parser compatibility between Gatsby, Jekyll, Gitbook, and Hugo.

Internal Link Reference

Type 1

• Interactive and Explorable Sites
• Machine Learning Interactive Visualization
• Interactive Books
• Data Visualization

Success in Gatsby. Success in Jekyll. Fail in Gitbook. Fail in Hugo.

Type 2

• app/Interactive and Explorable Sites
• research/Machine Learning Interactive Visualization
• book/Interactive Books
• note/Data Visualization

Fail in Gatsby. Success in Jekyll. Success in Gitbook. Fail in Hugo.

Type 3

• Interactive and Explorable Sites
• Machine Learning Interactive Visualization
• Interactive Books
• Data Visualization

Fail in Gatsby. Fail in Jekyll. Success in Gitbook. Fail in Hugo.

Type 4

• Interactive and Explorable Sites
• Machine Learning Interactive Visualization
• Interactive Books
• Data Visualization

Fail in Gatsby. Success in Jekyll. Success in Gitbook. Fail in Hugo.

Obsidian Internal Link

• Awesome List of Interactive and Explorable Webs

Number and Bullet

1. One
2. Two

• Three
  • Three.a
  • Three.b

1. Four
2. Five

• List A

1. List B

• List C

Keyboard

imron

Comment

<!-- Write your comments here -->

Here is the comment:

Symbol List

💬 speech
🌏️ globe
⭐️ star
🚀 rocket
👣 footprints
⚓️ anchor
🔥 fire
🎯 target
📌 pin
⛔ stop
‼️ double warning
❗️ warning
⁉️ question
✔️☑️ check mark
❌ cross
ℹ️ info
📧 email
🌐 web
▶▷ triangle
⚠️ warning
💥 danger
📝 note
☝️ remember
⚡️ flash

Image Hosting in Github

Tittle YAML

• Cannot use : in tittle

Content

• Cannot use % { in github.io
• Cannot use | in github.io

SVG

github.io and gitbook.io cannot render svg

8 - Markdown for This Blog

Markdown for This Blog

Common markdown format for Gitbook, gatsby-starter-bee, and VNote.

1. h2 Heading

markdown

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

display

h3 Heading

h4 Heading

h5 Heading

h6 Heading

2. Paragraphs

markdown

This is the first paragraph.

This is the second paragraph

display

This is the first paragraph.

This is the second paragraph

3 Line Break

markdown

This is the first line.  
And this is the second line.<br>
And finally this is the last line.

display

This is the first line.
And this is the second line.
And finally this is the last line.

4. Emphasis

markdown

**This is bold text**  
__This is bold text__  
*This is italic text*  
_This is italic text_  
This text is ___really important___  

display

This is bold text
This is bold text
This is italic text
This is italic text
This text is really important

5. Blockquotes

markdown

> This is the first line of paragraph, followed by blank line
> 
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
>
> ### with a heading
> 
> - and list
> - list
> - with **bold** and *italic* text

display

This is the first line of paragraph, followed by blank line

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between arrows.

with a heading

• and list
• list
• with bold and italic text

6. Lists

6.1. Unordered

markdown

+ To start a list, there should be an empty line above
+ Create a list by starting a line with `+`, `-`, or `*`
- Changing the sign will add a linespace
+ Add text under an item  
This is a text under an item. Notice that there are two spaces at the end above.
- Sub-lists are made by indenting 2 spaces:
  * Item 2a
  * Item 2b
* Item 3

To end a list, there should be one empty line above.  

display

• To start a list, there should be an empty line above
• Create a list by starting a line with +, -, or *
• Changing the sign will add a linespace
• Add text under an item
  This is a text under an item. Notice that there are two spaces at the end above.
• Sub-lists are made by indenting 2 spaces:
  • Item 2a
  • Item 2b
• Item 3

To end a list, there should be one empty line above.

6.2. Ordered

markdown

1. Item 1
1. Item 2  
Notice that the sequence number is irrelevant. 
Markdown will change the sequence automatically when renderring. 
Notice that there are two spaces at the end above to make a new text under item.
3. Sub-lists are made by indenting 4 spaces
    1. Item 3a
    2. Item 3b
8. Any number for item 4

display

1. Item 1
2. Item 2
   Notice that the sequence number is irrelevant.
   Markdown will change the sequence automatically when renderring.
   Notice that there are two spaces at the end above to make a new text under item.
3. Sub-lists are made by indenting 4 spaces
   1. Item 3a
   2. Item 3b
4. Any number for item 4

6.3. Offset in Oredered List

• didn’t work in Gitbook

markdown

57. will started with offset 57
1. so it will be 58
2. this is 59

display

1. will started with offset 57
2. so it will be 58
3. this is 59

7. Elements in Lists

markdown

* To add another element in a list while preserving the continuity of the list...
* indent the element four spaces
     like this
* ...or add blank lines in between

    I need to add another paragraph below the second list item.

* the third list item.

    > A blockquote would look great below the second list item.

* the fourth list item.

display

• To add another element in a list while preserving the continuity of the list…

• add blank lines in between

  I need to add another paragraph below the second list item.

• the third list item.

  A blockquote would look great below the second list item.

• the fourth list item.

markdown

1. This image is inline ![wikquote](https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/35px-Wikiquote-logo.svg.png).
2. Linux mascot is called Tux.

   ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png)
3. Tux is is really cool.
4. For quote in ordered list, add five spaces.
     > A blockquote would look great below the second list item.
5.  But, for code blocks in the lists, add eight spaces or two tabs:

        <html>
          <head>
            <title>Test</title>
          </head>

6.  So okay for now

display

1. This image is inline .

2. Linux mascot is called Tux.

   

3. Tux is really cool.

4. For quote in ordered list, add five spaces.

   A blockquote would look great below the second list item.

5. But, for code blocks in the lists, add eight spaces or two tabs:

    <html>
      <head>
        <title>Test</title>
      </head>
   

6. So okay for now

8. Code

markdown

This is inline `code`.

display

This is inline code.

markdown

    // add four spaces before for code
    like this

display

// add four spaces before for code
like this

markdown

    <html>
      <head>
        <title>HTML code with four spaces</title>
      </head>

display

<html>
  <head>
    <title>HTML code with four spaces</title>
  </head>

9. Links

markdown

This is [link](https://example.com/)  
This is [link with title](https://example.com/ "title text!")
https://example.com/  
<https://www.markdownguide.org>  
I love supporting the **[EFF](https://eff.org)**.  
This is the *[Markdown Guide](https://www.markdownguide.org)*.  
See the section on [`code`](#code).  
But  `https://www.example.com`  
but be careful with [%20 link](https://www.example.com/my%20great%20page)  
example [without %20](https://www.example.com/my great page)

display

This is link
This is link with title
https://example.com/
https://www.markdownguide.org
I love supporting the EFF.
This is the Markdown Guide.
See the section on code.
But https://www.example.com
but be careful with %20 link
example [without %20](https://www.example.com/my great page)

9.1. Email Linkify

• didn’t work in Gatsby and Gitbook

markdown

fake@example.com didn't work in Gatsby and Gitbook  
<fake@example.com> is okay  

display

fake@example.com didn’t work in Gatsby and Gitbook
fake@example.com is okay

10. Reference-style Links

markdown

I know [Indonesia][1]  
I also know [etymology of Indonesia][2]  
I knew [History of Indonesia][3]  
It doesn't have [hobbit-hole][hh].

[1]: <https://en.wikipedia.org/wiki/Indonesia>
[2]: https://en.wikipedia.org/wiki/Indonesia#Etymology "Etymology of Indonesia"
[3]: https://en.wikipedia.org/wiki/Indonesia#History 'History of Indonesia'
[hh]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"

display

I know Indonesia
I also know etymology of Indonesia
I knew History of Indonesia
It doesn’t have hobbit-hole.

11. Images

markdown

![Wikipedia with Optional Text](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png "Optional Text")  
![Wikipedia with Alt Text, reference style][id1]  

[id1]: https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png "Optional Text"

display

12. Escaping Characters

markdown

\* star  
\\ backslash itself  
\` backtick  
\{ \} curly braces  
\! exclamation mark

display

* star
\ backslash itself
` backtick
{ } curly braces
! exclamation mark

13. HTML Code

• very restricted in Gitbook

13.1. HTML: Bold, Italic, Strikethrough

markdown

This <em>word</em> is italic.  
This <strong>word</strong> is bold.  
This <del>word</del> is deleted with strikethorouugh.

display

This word is italic.
This word is bold.
This word is deleted with strikethorouugh.

13.2. Others HTML Code

• didn’t work in Gitbook

markdown

<font color=red>red color</font>  
<mark>highlight</mark>  
<ins>underline</ins>  
<small>smaller text</small>  
H<sub>2</sub>O  
x<sup>2</sup>+y<sup>2</sup>=0  
Variable of triangle area: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.

display

red color
highlight
underline
smaller text
H₂O
x²+y²=0
Variable of triangle area: 1/2 x b x h, where b is the base, and h is the vertical height.

14. Horizontal Rules

• didn’t work in Gitbook

markdown

___

---

***

but only didn't work for Gitbook

display

15. Heading ID

• didn’t work for Gatsby

markdown

### My Great Heading {#heading-ids}

Link to [Heading IDs](#heading-ids)

display

My Great Heading

Link to Heading IDs

16. Code Fencing and Highlighting

markdown

```
This is a fenced code block.
```
~~~
No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
~~~

```python
def function():
    #indenting works just fine in the fenced code block
    s = "Python syntax highlighting"
    print s
```

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

```ruby
require 'redcarpet'
markdown = Redcarpet.new("ruby syntax highlighting")
puts markdown.to_html
```

display

This is a fenced code block.

No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."

def function():
    #indenting works just fine in the fenced code block
    s = "Python syntax highlighting"
    print s

var s = "JavaScript syntax highlighting";
alert(s);

require 'redcarpet'
markdown = Redcarpet.new("ruby syntax highlighting")
puts markdown.to_html

17. Tables

markdown

| Syntax      | Description | Test Text is long    |
| :---        |    :----:   |          ---: |
| [Example](https://www.example.com/)      | **Title**       | `Here's this  is` |
| Paragraph   | Text        | And more   |

display

18. Text Formatting

18.1. Strikethrough

markdown

~~strikethrough~~  

display

strikethrough

18.2. Highlighting and Underline

• didn’t work in Gitbook and Gatsby

==highlight, fail in Gitbook and Gatsby==  
_underline, fail in Gitbook and Gatsby_  

display

==highlight, fail in Gitbook and Gatsby==
underline, fail in Gitbook and Gatsby

19. Task Lists (Checkbox, Tick Mark)

markdown

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

display

• Write the press release
• Update the website
• Contact the media

20. Emojies

20.1. Copy Pasted Emojies

markdown

Gone camping! ⛺ Be back soon.  
That is so funny! 😂  

display

Gone camping! ⛺ Be back soon.
That is so funny! 😂

20.2. Shortcode Emoji

• didn’t work in Gitbook
• in Gatsby and VNote, use Github Emoji Shortcode

markdown

Shortcode emoji examples :grinning: :smiley: :smile: :grin: :laughing: :joy:

display

Shortcode emoji examples :grinning: :smiley: :smile: :grin: :laughing: :joy:

21. Typographic Replacements, Superscript, Subscript

• dind’t work in Gatsby and Gitbook

markdown

autoreplacement of (c) (C) (r) (R) (tm) (TM) (p) (P) +-  
superscript x^2^ and subscript H~2~O

display

autoreplacement of (c) (C) (r) (R) (tm) (TM) (p) (P) +-
superscript x^2^ and subscript H~2~O

22. HTML Entities and Character Codes

markdown

© &  ¨ ™ ¡ £  
& < > ¥ € ® ± ¶ § ¦ ¯ « ·  
x² y³ ¾ ¼  ×  ÷   » |  
18ºC  "  '

display

© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·
x² y³ ¾ ¼ × ÷ » |
18ºC " '

23. Latex

23.1. Inline Equation

• Equation with one dollar sign $ works inline in VNote
• Equation with two dollar signs $$ works inline in Jekyll and Gitbook, but not in VNote

markdown

Inline equation with one dollar sign: $E=mc^2$ (worked in VNote and Gatsby).  
Inline equation with two dollar sign: $$E=mc^2$$ (worked in Gatsby, Jekyll and Gitbook).

display

Inline equation with one dollar sign: $E=mc^2$ (worked in VNote and Gatsby).
Inline equation with two dollar sign: $$E=mc^2$$ (worked in Gatsby, Jekyll and Gitbook).

23.2. Newline Equation

markdown

Newline equation with two dollar signs.

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

display

Newline equation with two dollar signs.

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

24. Specific HTML Code

• didn’t work in Gitbook

24.1. Drop Down List

markdown

<details>
  <summary>Click this List ▶</summary>
  <p>
    <ul>
      <li>irosyadi: https://irosyadi.netlify.app</li>
      <li>irosyadi: https://irosyadi.gitbook.io</li>
      <li>irosyadi: https://irosyadi.github.io</li>
    </ul>
  </p>
</details>

display

24.2. Summary

markdown

<details>
  <summary>Clik this Term ▶</summary>
  <p>Term is explanation of something</p>
</details>

display

24.3. Definition

markdown

<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term. </dd>
<dd>This is another definition of the second term.</dd>
</dl>

display

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.

24.4. Abbreviation

markdown

The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.

display

The HTML specification is maintained by the W3C.

26. Admonition Styles

26.1. Admonition with CSS

• CSS delivered from: https://cdn.jsdelivr.net/gh/irosyadi/irosyadi@master/alert.css
• didn’t work in Gitbook

markdown

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/irosyadi/irosyadi@master/alert.min.css">

<div class="alert alert-success"><strong>🎯 SUCCESS!</strong> <br> Success text. </div>  
<div class="alert alert-info"><strong>📌 INFO</strong> <br> Info text. </div>  
<div class="alert alert-warning"><strong>⚠️ WARNING!</strong> <br> Warning text. </div>  
<div class="alert alert-danger"><strong>⛔ DANGER!</strong> <br> Success text. </div>  

display

26.2. Admonition with Quote

• worked in everywhere

markdown

> **⚠️ WARNING!**
> > This is a warning for you...

display

⚠️ WARNING!

This is a warning for you…

26.3. Admonition with Table

• worked in everywhere

*** markdown***

| **⚠️ WARNING!**                |
| :--------------------------- |
| This is a warning for you... |

display

27. Footnote

• didn’t work in Gitbook

markdown

Here's a simple footnote,[^1] and here's a longer one,[^bignote], and [^withcode].  

[^1]: This is the first footnote, in Gitbook, there is no new line between.  
[^bignote]: Here's another one.  
[^withcode]: `code` or code in paragraphs  

display

Here’s a simple footnote,¹ and here’s a longer one,², and ³. But there is problem with Gitbook for footnote.

9 - Web Metrics and Performance Analysis

Web Metrics and Performance Analysis

• GTMetrix
• WebPageTest - Website Performance and Optimization Test
• Pingdom
• Google Page Speed
• Dotcom Tools
• Web Page Test : lighthouse
• Web Bloat Score
• Web Hint
• Dotcom Tools
• Uptrends
• site24x7
• Treo
• Measure

10 - Jamstack and WebApps

Jamstack and WebApps

What is Jamstack?

• Jamstack is Javascript, APIs, and Markup.
• Jamstack
• What is Jamstack
• Awesome Jamstack
• Structure
  • JavaScript Frontend Frameworks
  • Static Site Generator
  • Headless CMS
  • Deployment
  • Third Party SaaS

List JavaScript Frontend Frameworks

• React
• Vue
• Angular
• Svelte

List Static Site Generators

• Next.js
• Gatsby
• Hugo
• Jekyll
• 11ty (Eleventy)
• Nuxt
• Docosaurus

List Headless CMS’s

• Contentful
• Strapi
• Netlify CMS
• Dato CMS
• Ghost
• Publii
• Prose
• Forestry
• Sanity
• Stackbit

List of Deployments (Static Hosting)

Comparison

• Github Pages
• Netlify:
  • Netlify
  • Netlify Drop
• Zeit, now Vercel
• Cloudflare:
  • Cloudflare Pages
  • Cloudflare Workers
• Google:
  • Firebase
  • Google Cloud Platform : How to GCP
• Azure Static Web Apps–App Service - Microsoft Azure, How to Azure
• Amazon:
  • AWS Amplify
  • AWS
• Surge
• Render
• Digital Ocean App Platform
• NearlyFreeSpeech
• Peergos
• Neocities
• Oracle Cloud Free Tier
• Fleek
• CodaSite

Host Comparison

• CloudFlare Pages, Netlify, Zeit, Github Pages, and Gitlab Pages. Where to host for free?

Third Party SaaS

• Comments
  • Disqus
  • Staticman
• Search
  • Algolia
  • List.js
• Authorization
  • Auth0
• Form Submission
  • Typeform
  • FormKeep
• E-Commerce
  • Snipcart
  • Foxy.io

Learn Jamstack

• How to host and deploy a static website or JAMstack app to AWS S3 and CloudFront from freeCodeCamp
• A Step-by-Step Guide: Gatsby on Netlify from Netlify
• Build your own Blog from Scratch using Eleventy from filament group
• How to Host your Static Website with AWS - A Beginner’s Guide from freeCodeCamp
• Hugo Tutorial: How to Build & Host a (Very Fast) Static E-Commerce Site from SnipCart
• How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify from freeCodeCamp
• Which service? Netlify vs Vercel vs Azure Static Web App · Elio Struyf
• How to Deploy a Full-Stack App to the Web
• 10 Tips To Host Your Web Apps For Free
• Deploy A Web App (Golang, Java, …) To The Cloud For Free - Simply How

Gatsby Starters

• BooGi: Gatsby Starter - Gatsby
• gatsby-starter-rocket-docs: Gatsby Starter - Gatsby
• gatsby-starter-docz-netlifycms: Gatsby Starter - Gatsby
• gatsby-personal-site-template: Gatsby Starter - Gatsby
• gatsby-markdown-typescript-personal-website: Gatsby Starter - Gatsby
• Gatsby Starter - Gatsby
• gatsby_starter_portfolio: Gatsby Starter - Gatsby
• LekoArts/gatsby-starter-minimal-blog: Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting. *
• Home - Julia Doe
• AbdaliDahir/gatsby-portfolio: creative personal & portfolio template based on gatsby. designed so you can showcase your work and write your blogs.
• gatsby-starter-foundation/blog-post.js at main · stackrole/gatsby-starter-foundation
• Chronoblog/gatsby-theme-chronoblog: ⏳ Chronoblog is a Gatsbyjs theme specifically designed to create a personal website. The main idea of ​​Chronoblog is to allow you not only to write a personal blog but also to keep a record of everything important that you have done.
• codebushi/gatsby-starter-dimension: Gatsby.js V2 starter template based on Dimension, designed by HTML5 UP. Check out https://codebushi.com/gatsby-starters-and-themes/ for more Gatsby starters.

Jekyll Themes

• mpa139/allanlab: Allan Lab website
• liuyxpp/liuyxpp.github.io: Homepage for my research group as an example of LYX Jekyll Theme.
• Niemeyer-Research-Group/niemeyer-research-group.github.io: Niemeyer Research Group site
• alshedivat/al-folio: A beautiful, simple, clean, and responsive Jekyll theme for academics
• mmistakes/minimal-mistakes: Jekyll theme for building a personal site, blog, project documentation, or portfolio.

11 - List of Static Web Generator

List of Static Web Generator

List of List

• Staticgen
• Booktree Alternatives

Fast Static Site Generator

• hugo (Apache 2.0)
• hugonews (GPL 2.0), HN-like with Hugo (demo)
• zola (MIT) : A fast static site generator in a single binary with everything built-in.
• Publii (GPL 3.0) : Publii is a desktop-based CMS for Windows, Mac and Linux that makes creating static websites fast and hassle-free, even for beginners.
• Susty (GPL 2.0) : A tiny WordPress theme focused on being as sustainable as possible. Just 6 KB of data transfer.
• Docsy Hugo
  • Examples - Docsy
• Cloudflare Pages
• Static Generator Comparison
• SSG Comparison
• Vercel

Static Site Client Side Rendering

• MDWiki : javascript
• VNote : javascript
• Grav : PHP
• Bludit

Static Site with PHP

• Jigsaw

Jekyll Theme

• Home - Just the Docs
• Docsy Jekyll Theme

Hugo Theme

• nodejh/hugo-theme-mini: A fast, minimalist and responsive hugo theme for bloggers.
• dillonzq/LoveIt: ❤️A clean, elegant but advanced blog theme for Hugo 一个简洁、优雅且高效的 Hugo 主题

12 - Web Development

Web Development

{% include list.liquid all=true %}

13 - Classless CSS

Classless CSS

Classless CSS

• Pico.css • Minimal CSS Framework for semantic HTML
• GDCSS - An accessible alternative to HTML5 CSS resets
• BareCSS
• μ css framework
• sakura: a minimal classless css framework / theme
• holiday.css - a minimalist classless CSS theme
• Water.css

List of Clasless CSS

• CSS Bed
• Drop-in Minimal CSS
• https://github.com/dbohdan/classless-css

Simple CSS

• Simple.css - A classless CSS framework
• troxler/awesome-css-frameworks: List of awesome CSS frameworks in 2022
• Drop-in Minimal CSS
• new.css
• concrete.css
• YACCK - Yet Another Classless CSS Kit
• Bamboo CSS Demo
• MVP.css - Minimalist stylesheet for HTML elements
• Vanilla CSS - A minimal baseline stylesheet for any web project
• Home · Marx
• sw-yx/spark-joy: ✨😂easy ways to add design flair, user delight, and whimsy to your product.

Minimal CSS

• spark-joy/README.md at master · sw-yx/spark-joy
• CSS Bed
• new.css
• dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots
• Yax · Website Templates · Build and Host a Website for Free
• MVP.css - Minimalist stylesheet for HTML elements
• Drop-in Minimal CSS
• LaTeX.css—Make your website look like a LaTeX document
• Pure
• Pico.css • Minimal CSS Framework for semantic HTML
• GDCSS - An accessible alternative to HTML5 CSS resets
• Simple.css Demo - Simple.css
• lit
• screencss.com
• xz/new.css: A classless CSS framework to write modern websites using only HTML.
• oxalorg/sakura: a minimal css framework/theme.
• Native-elements -
• Luxa CSS
• chota - A micro CSS framework
• DoodleCSS
• susam/spcss: A simple, minimal, classless stylesheet for simple HTML pages
• Element CSS
• Learn CSS - Base Styles
• Open Props: sub-atomic styles
• alvaromontoro/almond.css: Collection of CSS styles to make simple websites look nicer
• No-Class CSS Frameworks - CSS-Tricks - CSS-Tricks
• Plugins
• Water.css
• tacit
• concrete.css
• Bolt.css
• https://github.com/andybrewer/mvp
• https://github.com/kognise/water.css
• https://github.com/xz/new.css
• https://github.com/vladocar/Basic.css
• https://github.com/oxalorg/sakura
• https://github.com/igoradamenko/awsm.css
• https://github.com/hawkz/gdcss
• https://github.com/emareg/classlesscss
• https://github.com/vincentdoerig/latex-css
• picocss
• https://github.com/kevquirk/simple.css

CSS

• dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots
• Pico.css • Minimal CSS Framework for semantic HTML
• alvaromontoro/almond.css: Collection of CSS styles to make simple websites look nicer
• missing.css

14 - Developer Tools

Developer Tools

agamm/awesome-developer-first: A curated list of awesome developer-first tools products.

15 - Experimental iFrame

Experimental iFrame

Iframe Code

<iframe src="https://wttr.in" frameborder="0" width="500" height="300" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

<div style="border: 1px solid rgb(255, 255, 255); overflow: hidden; margin: 15px auto; max-width: 400px; max-height:400px;">
<iframe scrolling="no" src="https://thisartworkdoesnotexist.com/" style="border: 0px none; width: 410px; margin-left: 0px; margin-right: 0px; height: 410px; margin-top: 0px; margin-bottom: 0px;">
</iframe>
</div>

Iframe Test with Div

Iframe Test

16 - Web List

Web List

Knowledge Bases

• irosyadi.netlify.app
• irosyadi.github.io
• irosyadi.gitbook.io

Digital Gardens

• irosyadi-garden.netlify.app
• irosyadi-wiki.netlify.app

Simple Blogs

• irosyadi.mataroa.blog
• irosyadi.bearblog.dev

Landing Page

• irosyadi-web.netlify.app

Portals

• rosyadi.com
• ipwt.org

Performance Comparison

17 - Website Rank

Website Rank

Web Rank

• Website Traffic - Check and Analyze Any Website - Similarweb
• Cloudflare Radar
• Domain DNS Record and WHOIS Information
• Discover web and drink vodka with SiteGur
• 🔥 Website Discovery and Reviews
• A research-oriented top sites ranking hardened against manipulation - Tranco
• Cisco Popularity List