notes
2021 February 22
collection of ideas and notes

css: Adjacent sibling selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

I ran into this css selector when adding styles to my markdown content.

If I have content that looks like this:

some long sentence
- list item 1
- list item 2
- list item 

It creates the following html:

<p>some long sentence</p>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
</ul>

Problem

The <p> element has margin-bottom: 16px applied to it.

  • I want to keep that margin for spacing between paragraphs
  • I want a smaller margin between <p> and <ol>, and other elements like <pre> and <code>

Solution

Adjacent Sibling combinator!

/* Change to this */
p {
    margin-bottom: 8px;
}


/* 
Add this
former_element + target_element { style properties } */
p + p {
    margin-top: 16px;
}

Grep notes folder

grep -nr string content/notes

Since I'll be doing this often, I'll add an alias for this command in my .zshrc file:

alias sn=grep -nr $1 ~/projects/williamhoyle.ca/content/notes

usage: (sn=search notes)

$ sn computer
/home/will/projects/williamhoyle.ca/content/notes/grepping-notes-folder.md:10:`sn computer`
/home/will/projects/williamhoyle.ca/content/notes/grepping-notes-folder.md:13:When I'm at the computer, it's easier to grep for the exact thing I'm looking for instead of going to this page.

When I'm at the computer, it's easier to grep than search a webpage.

Future enhancements

  • sn could parse the filepaths returned by grep and pretty print the note (and removes duplicates).

Creating a new note

I want it to be as easy as possible to create and maintain notes. Every note on this page is stitched together from individual markdown files. Just create a new file in content/notes/new-note.md. The build system can handle frontmatter but none of the fields are used at the moment. Commit, push and netlify will pick up the commit and render the static pages for this site.

Renaming a docker volume

It would be convenient if there was some sort of command to rename a docker volume:

docker volume rename old_vol_name new_vol_name

Sadly this doesn't exist.

The following commands can accomplish the same thing (taken from https://serverfault.com/a/1022691):

1. Create new volume

docker volume create --name new_volume

2. Move contents of old volume to new volume

docker run --rm -it -v old_volume:/from -v new_volume:/to alpine ash -c "cd /from ; cp -av . /to"

3. Delete old volume

docker volume rm old_volume

One-liner for .zshrc

# Usage:
# mv-docker-volume old_volume new_volume
mv-docker-volume() {
	docker volume create --name $2
	docker run --rm -it -v $1:/from -v $2:/to alpine ash -c "cd /from ; cp -av . /to"
	docker volume rm $1
}

When would you need this?

When working with docker-compose, you can specify volumes as such:

services:
	service1:
		...
	service2:
		...
volumes:
	volume_name1:
	volume_name2:

If those volumes don't exist, docker will create them for you. It names them by using the name of the folder your docker-compose.yaml is a child of.

So if your docker-compose.yaml file is in a folder called my_app, those volumes will be named as my_app_volume_name1 and my_app_volume_name2.

You might want to rename those volumes to something different, or in my case, I renamed the docker-compose.yaml file's parent folder, so when I ran docker-compose up, new volumes were created again but I want to use the contents of the old volumes.

Publishing notes, blog posts, project pages

This site is hosted on netlify. I tell netlify to build a public repository every new commit. I have a few workflows depending on what I'm doing:

blog or projects

Sometimes, I want to work on blog posts or new ideas in private before the polished version gets pushed to the public repo. I can use the following command:

publish "git message>" file1 file2 file3
publish "blog(publish): my-post" content/blog/my-post.md content/blog/image.png
publish() {
    # commit files I want to sync to public
    git add $2 $3 $4 $5 $6 $7 $8 $9 # maybe one day I'll learn how to slice args in bash lol
    git commit -m $1
    git stash

    # checkout to master
    git checkout master
    git checkout private -- $2 $3 $4 $5 $6 $7 $8 $9
    git commit -m $1

    # publish to public
    git push origin master

    # back to private branch
    git checkout private
    git stash apply
}

notes

I usually always want to sync my entire notes directory without really thinking about it. For this, I can use the following utility that is in my .zshrc: syncnotes which is just an alias:

syncnotes() {
    git add .
    # save everything
    git commit -m "Syncing notes - saving all"
    git checkout master
    git checkout private -- content/notes/
    git commit -m "Update notes for public repo"
    git push origin master
    git checkout private
}

No error handling but whatever, it works