Compare commits

4 Commits
4 changed files with 112 additions and 1 deletions
+4 -1
View File
@@ -10,7 +10,7 @@ working across different projects via [VisualMode](https://www.visualmode.dev/).
For a steady stream of TILs, [sign up for my newsletter](https://visualmode.kit.com/newsletter).
_1891 TILs and counting..._
_1894 TILs and counting..._
See some of the other learning resources I work on:
@@ -229,6 +229,7 @@ If you've learned something here, support my efforts writing daily TILs by
- [Parameterized SCSS Mixins](css/parameterized-scss-mixins.md)
- [Prevent Invisible Elements From Being Clicked](css/prevent-invisible-elements-from-being-clicked.md)
- [:root Has Higher Specificity Than html](css/root-has-higher-specificity-than-html.md)
- [Show Full URLs With Print Styles](css/show-full-urls-with-print-styles.md)
- [Style A Background With A Linear Gradient](css/style-a-background-with-a-linear-gradient.md)
- [Using Maps In SCSS](css/using-maps-in-scss.md)
@@ -481,6 +482,7 @@ If you've learned something here, support my efforts writing daily TILs by
### GitHub
- [Access Your GitHub Profile Photo](github/access-your-github-profile-photo.md)
- [Create A Private Repo From The CLI](github/create-a-private-repo-from-the-cli.md)
- [Create And Push To New Repo From CLI](github/create-and-push-to-new-repo-from-cli.md)
- [List PRs Awaiting Your Review](github/list-prs-awaiting-your-review.md)
- [Open A PR To An Unforked Repo](github/open-a-pr-to-an-unforked-repo.md)
@@ -1897,6 +1899,7 @@ If you've learned something here, support my efforts writing daily TILs by
- [Rename A Bunch Of Files By Constructing mv Commands](unix/rename-a-bunch-of-files-by-constructing-mv-commands.md)
- [Repeat Yourself](unix/repeat-yourself.md)
- [Replace Pattern Across Many Files In A Project](unix/replace-pattern-across-many-files-in-a-project.md)
- [Restart Process Managed By `process-compose`](unix/restart-process-managed-by-process-compose.md)
- [Restart Specific Overmind Process](unix/restart-specific-overmind-process.md)
- [Reverse Each Line Of A File](unix/reverse-each-line-of-a-file.md)
- [Run A Command Repeatedly Several Times](unix/run-a-command-repeatedly-several-times.md)
+46
View File
@@ -0,0 +1,46 @@
# Show Full URLs With Print Styles
Web pages are best experienced in a browser where you can fully interact with
them. Links, for instance, can be hovered, inspected, and clicked on to navigate
to the target location -- that's a core part of the web browser experience and
what makes the internet.
Some people have printers though and they want to be able to print off web
pages. Any web page can be printed off as is, but if your site or app is
anticipating certain pages being printed, then you may add some
`@print`-specific CSS styling to improve how it looks in print format.
Links are a prime example of lost interactivity. When printed, links render as
blue underlined text with no way to know what they are linking to. One trick
that I recently picked up from [this lobste.rs thread](https://lobste.rs/s/olnqh2/websites_should_be_printable#c_wigxfy) is to
add _after content_ that renders the actual, full URL next to the link.
```css
@media print
{
a[href]::after
{
content: " [" attr(href) "]";
}
}
```
This means that when a page has `<a href="https://still.visualmode.dev">still</a>`, the printed version will not
just render the word "still", but will be styled to render `still [https://still.visualmode.dev]`.
This will add content after links for both absolute URLs and relative paths (and
anchor tags). If I wanted to limit the after content to only show absolute URLs,
I could add a bit more specificity to the matching tag.
```css
@media print
{
a[href^="http"]::after
{
content: " [" attr(href) "]";
}
}
```
The `^=` matches the pattern of `http` on the start of the `href` string which
means it will only display absolute URLs.
@@ -0,0 +1,34 @@
# Create A Private Repo From The CLI
The vast majority of the GitHub repos that I've created over my career have been
done from the web UI. It was only recently that I found out that [I can create a
new repo from the CLI with `gh`](create-and-push-to-new-repo-from-cli.md).
A repo can be created for the current directory (where a local git repo already
exists) using the `gh repo create` command. I'm wanting this to be a private
repo so I can include the `--private` flag instead of the `--public` flag.
```bash
❯ gh repo create marathon-training --private --source=. --remote=origin --push
✓ Created repository jbranchaud/marathon-training on github.com
https://github.com/jbranchaud/marathon-training
✓ Added remote https://github.com/jbranchaud/marathon-training.git
Enumerating objects: 125, done.
Counting objects: 100% (125/125), done.
Delta compression using up to 16 threads
Compressing objects: 100% (114/114), done.
Writing objects: 100% (125/125), 56.69 KiB | 14.17 MiB/s, done.
Total 125 (delta 52), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (52/52), done.
To https://github.com/jbranchaud/marathon-training.git
* [new branch] HEAD -> main
branch 'main' set up to track 'origin/main' by rebasing.
✓ Pushed commits to https://github.com/jbranchaud/marathon-training.git
```
Since I am running this command from the root directory of the git-backed
project, I specify the `--source` as `.` (mean _here_, the current directory).
The remaining flags tell it what the remote should be set up as and that I want
to push this local repo up to the GitHub remote once it is created.
See `gh repo create --help` for more details.
@@ -0,0 +1,28 @@
# Restart Process Managed By `process-compose`
I'm working on a project where we are experimenting with
[`process-compose`](https://github.com/F1bonacc1/process-compose) as a better
way orchestrate a set of processes that all need to be running for a web
development server (Rails) to work. This includes the Rails server itself, a
JavaScript build process, PostgreSQL, a background worker process, etc.
In the past [I've used `overmind` with
Procfiles](/rails/run-dev-processes-with-overmind-instead-of-foreman.md) to do a
similar sort of thing. No matter what tooling is in play, from time to time, I
will eventually need to restart one of the processes that has become stale.
The `vite` (JavaScript build) process is a good example of this. Configuration
changes, new `npm` dependencies, and tailwind classes on new files can all lead
to the build being stale.
From the `process-compose` TUI, I can navigate the cursor over the `vite`
process and hit `Ctrl-r` to restart the process.
I can also issue a restart via the CLI like so:
```
❯ mise exec -- process-compose process restart vite
Process vite restarted
```
[source](https://f1bonacc1.github.io/process-compose/cli/process-compose_process_restart/)