A good[ish] website
Web development blog, loads of UI and JavaScript topics
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.
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.
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.
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.
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.
Gregor then turned to look out the window at the dull weather.
Here’s a horizontal rule:
There are 3 types of lists.
const foo = () => 'bar'
?li
elements:const foo = () => {
return 'bar'
}
'li .gatsby-highlight': {
backgroundColor: 'var(--gray-lightest)',
fontSize: '90%',
margin: 0,
width: '100%'
},
'li > p': {
marginBottom: 'calc(var(--spacing-m) / 2)'
},
"li pre[class*='language-']": {
padding: '10px'
}
rgb(0, 255, 0)
to rgb(255, 0, 0)
foo('bar')
<Foo>
{map.bars(bar => {
return <span>{bar}</bar>
})}
</Foo>
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...\`
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 :)
<kbd>
:
Press Cmd+/ or Ctrl+/ to search, then Esc to close the search.
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;
}
}
The CodePen shortcode should work <CodePen slug="ZEOdZGz" />
:
CodeSandbox:
And YouTube:
100% wide Iframe (default):
Iframe with a fixed width and no caption:
A normal image:
SVG image with an image tag:
Gif-like video:
Video with controls and audio:
All the lesser used HTML elements.
<address>
<sup>
and <sub>
Here’s the sup superscript between norma text subscript
<small>
Normal text small text. More normal text.
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
<abbr>
The WAP is a highly modern technical standard that renders pages in written in WML.
<q>
After Gregor Samsa had woken up, he simply thought What’s happened to me?
like what had just transpired wasn’t that unusual.
And <mark>
for highlighting pieces of text:
Here's some highlights marked with mark. Oh hi Mark!
<del>
and <ins>
Deleting and correcting text with <del>
and <ins>
:
And it was like that. Not anymore, bitch!
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>
Detail summary thingy:
Code inside detail/summary:
<!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;
}
Command | Aliases | Action |
---|---|---|
tmux attach | a , at , attach-session | Attach to last session |
tmux attach -t myses | ditto | Attach to myses |
tmux ls | list-sessions , Ctrl+b s | List session |
tmux | new , new-session , :new | New session |
tmux new -s myses | :new -s myses | New named session |
tmux kill-ses -t myses | kill-session | Kill myses |
tmux kill-ses -a | ditto | Kill all but current |
tmux kill-ses -a -t myses | ditto | Kill 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.