Build automation and task automation tools.

• Apache Ant - Automation build tool, similar to make, a library and command-line tool whose mission is to drive processes described in build files as targets and extension points dependent upon each other.
• Apache Maven - Build automation tool mainly for Java. A software project management and comprehension tool based on the concept of a project object model (POM).
• Bazel - A fast, scalable, multi-language and extensible build system. Used by Google.
• Bolt - You can use Bolt to run one-off tasks, scripts to automate the provisioning and management of some nodes.
• GNU Make - The most popular automation build tool for many purposes, make is a tool which controls the generation of executables and other non-source files of a program.
• Gradle - Another build automation system.
• Rake - Build automation tool similar to Make, written in and extensible in Ruby.

Context

Automation tools are essential for system administrators to streamline repetitive tasks, ensure consistency in builds and deployments, and improve overall efficiency in system management.

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Context

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

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Context

Webpages aren't pretty by default. The above will make a readable, single column in the center of the screen.

max-width: none;
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);

Context

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.

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

Context

Super simple. Basically, rather than begin your project with git initialized/version control set up, you want to do so in an existing directory.

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

Context

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.).

prettier --write "**/*.vue"

Context

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.

sudo passwd root
# Enter your account password if you have one or 
# Type in the new root password.
# Retype the root password.
# The output confirms the password has been changed successfully.

Context

Sudo and root privileges allow you to execute commands with elevated permissions, and managing these passwords ensures that only authorized users perform critical administrative tasks. Therefore, knowing how to change the root or sudo password in Ubuntu is crucial for maintaining system security and control. Not Ideal but sometimes it need.

git rm -r --cached .
git add .
git commit -m ".gitignore fix"

Context

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.

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

Context

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.)