mirror of
https://github.com/jbranchaud/til
synced 2026-10-31 00:13:27 +00:00
Compare commits
4
Commits
0f143e71ed
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
bff11a2fee | ||
|
|
891e3453d1 | ||
|
|
2b29a572bb | ||
|
|
91a69640d8 |
@@ -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)
|
||||
|
||||
@@ -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/)
|
||||
Reference in New Issue
Block a user