One Line Hacks
A collection of random utilities that I find myself Googling too often.
Make CSS styling span multiple lines CSS
Using box-decoration-break to prevent abrupt style interruptions
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
Prevents styling applied to text to break abruptly at the end of a line. The above will force it to 'finish' its style (e.g., round a border and finish padding) at the end of the line, and start again at the next line.
An example without: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
An example with: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Style your webpage with one rule CSS
Please don't let your content span the full page width
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}
Webpages aren't pretty by default. The above will make a readable, single column in the center of the screen.
Make an element span the full screen width CSS
Making content full bleed (no matter its parent width)
max-width: none;
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
Rarely will your webpage span the full width—most of the time, you'll apply some rule like max-width: 768px. Sometimes, you'll want to "break out" of that and allow child elements to exceed their parent width. The rules above, applied to some child element you want to be full bleed, will do just that.
Initialize a Git Repository from an Existing Project Git
For when you've already started a project and want to start VC late
git init
git add .
git commit -m "init"
## Setup on GitHub/GitLab, etc.
git remote add origin git@github.com:<username/new_repo>
git push -u origin master
Super simple. Basically, rather than begin your project with git initialized/version control set up, you want to do so in an existing directory.
Prevent fixed navbar from overlapping hash-navigated content CSS
Apply scroll padding to your entire webpage
html {
scroll-padding-top: 70px; /* height of sticky header */
}
When your navbar is fixed (e.g. attached to the top of the webpage at all times), it takes up no space on the page. This means that it overlaps content below it; when navigating to subsections on your webpage, e.g. through hash-navigation, this means that the content below the navbar will be obscured.
scroll-padding-top fixes this problem. As explained on Web Platform News:
For example, websites with sticky headers can apply a matching scroll padding to the top of the page to ensure that scroll targets (e.g., section headings) aren’t concealed by the header after certain scroll operations (anchor scrolling, scrollIntoView method, etc.).
Format all files using Prettier Command LineVS Code
Format all files with a given extension using Prettier on the command line.
prettier --write "**/*.vue"
When you want to run prettier on all files in a given directory, and your VSCode extension isn't working (thanks M1?).
Where .vue matches the file extension you want to target and format.
Untrack tracked files Git
Untrack files already added to git repository based on .gitignore
git rm -r --cached .
git add .
git commit -m ".gitignore fix"
Ever added a file to .gitignore just to visit GitHub/Lab and realize its still there? It was probably never untracked. Doing the above will remove all files from git, readd them (with the newly ignored file), and recommit.
Hide an element, but only visually CSSAccessibility
Allow screen readers to access invisible content
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
Common techniques to hide elements, such as display: hidden, will also hide the element from screen readers.
In the event that you'd still like screen readers to be able to access the content, the above snippet will hide an element visually but not from assistive technologies. (In Tailwind, use the sr-only class.)