clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

New blog. Test post, ignore

Filed under: Meta— Tagged with: typography, design

I just did an update on this website (finally), and churned out some new posts. This post will act as a primitive style guide and as a visual reference.

This is an h2 heading

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

Here’s an h3

His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.

H4, deep enough?

A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.

This is h5

It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.

And an h6 😬

Gregor then turned to look out the window at the dull weather.

Horizontal rule

Here’s a horizontal rule:


Lists

There are 3 types of lists.

Unordered list

  • This here
  • is an
  • unordered list.
    • How about nesting?
    • Is that working?
      • How deep can you go?
        • Huh?
  • Looks good?

Code inside a list

  • What about inline code inside a list: const foo = () => 'bar'?
  • And codeblocks inside li elements:
    const foo = () => {
      return 'bar'
    }
    • Nested one level deeper:
      'li .gatsby-highlight': {
        backgroundColor: 'var(--gray-lightest)',
        fontSize: '90%',
        margin: 0,
        width: '100%'
      },
      'li > p': {
        marginBottom: 'calc(var(--spacing-m) / 2)'
      },
      • One more level just make sure:
        "li pre[class*='language-']": {
          padding: '10px'
        }
  • That looks pretty good, margins and all.

Ordered list

  1. What about
    1. Indented
    2. Foo
  2. ordered lists?
    • Unordered list inside ordered
    • Foo bar
  3. Do they
  4. Look ok?

Description list

Banana
A yellow-ish, long fruit growing on a tree.
Apple
A round fruit with a color gamut from rgb(0, 255, 0) to rgb(255, 0, 0)
Code in title: foo('bar')
Codeblock in description:
<Foo>
  {map.bars(bar => {
    return <span>{bar}</bar>
  })}
</Foo>
Nested description list
Description lists can be nested, like other lists. It’s good when documenting code for example. JSX markup for these gets pretty dicey.
Lorem ipsum
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla vitae omnis blanditiis similique, ipsa cupiditate quam assumenda deleniti inventore cumque alias ex id in culpa aperiam! Numquam quo sit officiis!

Code

Inline code

Here’s some inline code: const foo = (bar) => bar.fooz.trim() === 'baz'. And here is some syntax highlighted inline code const foo = (bar) => bar.fooz.trim() === 'baz' you can make that happen by starting the like with js», js being the highlighted lang:

`js»foo...\`

Sample output, samp

Inline samp looks like this. Block samp looks like thi:

mike@interwebz:~$ md5 -s "Hello world"MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62mike@interwebz:~$ 

You should fix that :)

Keyboard

<kbd>:

Press Cmd+/ or Ctrl+/ to search, then Esc to close the search.

Code blocks

Here’s some jsx with a highlighted lines:

const [searchOpen, setSearchOpen] = React.useState(false)

const handleKeyboard = ({ repeat, metaKey, ctrlKey, key }) => {
  if (repeat) return
  // Handle both, `ctrl` and `meta`.
  if ((metaKey || ctrlKey) && key === '/') setSearchOpen(prev => !prev)
}

React.useEffect(() => {
  document.addEventListener('keydown', handleKeyboard)

  // Important to remove the listeners.  return () => document.removeEventListener('keydown', handleKeyboard)})

Here’s a bigger chunk of code, so much that the container scrolls, also with line numbers and with highlighted lines, to test how they work when the code block overflows:

const listItems = ['foo', 'bar', 'baz', 'quix']

const FilterableList = () => {
  const [searchResults, setSearchResults] = useState(listItems)
  const handleChange = event => {
    const value = event.target.value.toLowerCase()

    if (value) {
      const filteredItems = listItems.filter(item =>        item?.toLowerCase().includes(value)
      )

      setSearchResults(
        filteredItems.length > 0 || value ? filteredItems : listItems      )
    } else {
      setSearchResults(listItems)    }
  }

  return (
    <Wrap>
      <Input onChange={handleChange} placeholder="Search" type="text" />
      <ul>
        {searchResults.length < 1 ? (
          <li>No results</li>
        ) : (
          searchResults.map(item => <li key={item}>{item}</li>)
        )}
      </ul>
    </Wrap>
  )
}

Here’s some NGINX with line numbers:

server {
  server_name staging.clubmate.fi;
  root /var/www/staging.clubmate.fi/public_html;

  location /foo {
    return 301 http://clubmate.fi;
  }
}

Embeds

The CodePen shortcode should work <CodePen slug="ZEOdZGz" />:

See a Demo ZEOdZGz

This demo is demonstrating a keyboard shortcuts

CodeSandbox:

An embedded CodeSandbox demo

And YouTube:

This is a caption

100% wide Iframe (default):

This site loaded into an Iframe

Iframe with a fixed width and no caption:

Media

A normal image:

A silly looking cat wearing Supreme bucket hat, chain, and Timbs
A meme

SVG image with an image tag:

Erlang logo as an SVG
Erlang programming language logo

Gif-like video:

A gif-like video showing fish autocomplete

Video with controls and audio:

Hungarian senior citizen wishing you happy holidays

HTML elements

All the lesser used HTML elements.

Address

<address>

This is an address.

Superscript and subscript

<sup> and <sub>

Here’s the sup superscript between norma text subscript

Small

<small>

Normal text small text. More normal text.

Blockquote and cite

Here’s a <blockquote> where the name is wrapped in <cite>:

Never argue with stupid people, they will drag you down to their level and then beat you with experience. ―Mark Twain

Abbreviations

<abbr>

The WAP is a highly modern technical standard that renders pages in written in WML.

Quote

<q>

After Gregor Samsa had woken up, he simply thought What’s happened to me? like what had just transpired wasn’t that unusual.

Marking

And <mark> for highlighting pieces of text:

Here's some highlights marked with mark. Oh hi Mark!

Deleting and inserting

<del> and <ins>

Deleting and correcting text with <del> and <ins>:

And it was like that. Not anymore, bitch!

Boxes

Read more:

<Note
  link="/disable-gatsby-telemetry"
  type="readMore"
  text="How to disable Gatsby telemetry"
/>

Note:

<Note type="info">
  Did you know that one kilo of feathers weighs exactly one kilo. The more you
  know 🌈 🙌
</Note>
Did you know that one kilo of feathers weighs exactly one kilo. The more you know 🌈 🙌

Drawers

Detail summary thingy:

More on Kafka:Franz Kafka (3 July 1883 – 3 June 1924) was a German-speaking Bohemian novelist and short-story writer, widely regarded as one of the major figures of 20th-century literature. Wikipedia

Code inside detail/summary:

Here are few codeblocks:
<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Demo</title>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script data-type="module" type="text/babel">
    /* eslint-disable react/react-in-jsx-scope */
    const App = () => {
      return <p class="test">Hello, this is a test</p>
    }

    ReactDOM.render(<App />, document.getElementById('root'))
  </script>
</body>
.test {
  color: #bada55;
}

Table

CommandAliasesAction
tmux attacha, at, attach-sessionAttach to last session
tmux attach -t mysesdittoAttach to myses
tmux lslist-sessions, Ctrl+b sList session
tmuxnew, new-session, :newNew session
tmux new -s myses:new -s mysesNew named session
tmux kill-ses -t myseskill-sessionKill myses
tmux kill-ses -adittoKill all but current
tmux kill-ses -a -t mysesdittoKill all but myses
Ctrl+b $-Rename session
Ctrl+b d-Detach session
Ctrl+b (-Previous session
Ctrl+b )-Next session

Comments would go here, but the commenting system isn’t ready yet, sorry.

  • © 2022 Antti Hiljá
  • About
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!