Case insensitivity with regex
You can use /i
at the end of a regex to match with case insensitivity.
The regex: /hello/i
Will match HELLO
, hello
, and Hello
You can use /i
at the end of a regex to match with case insensitivity.
The regex: /hello/i
Will match HELLO
, hello
, and Hello
If you want to view and/or edit your current key bindings in VS Code/Cursor simply press this key combo:
VS Code: [⌘K ⌘S]
Cursor: [⌘R ⌘S]
Is your Github account attached to multiple organizations? Does your primary address associated with Github get inundated with emails/notifications you don't care to find in your personal inbox?
Let me help you out by sorting your Github notification life. Get an email address to which you can flow relevant notifications and associate them with your Github account. Then head on over to Github > Settings > Notifications > Custom Routing
Click "Add new route" and choose an organization and an email address associated with your account.
As you can see, I have my primary email address with Github. Still, now all relevant notifications from Hashrocket projects will funnel into my Hashrocket email address.
Using skip
in Jest tests is a valuable technique for temporarily disabling specific tests without completely removing them from your test suite. This is particularly useful during development when you focus on one particular feature or bug and want to avoid running unrelated tests to save time. In Jest, you can use skip
by prefixing it to your test or describe blocks.
For instance, test.skip(...)
or describe.skip(...)
will skip the execution of the specified test or group of tests. This approach is much more maintainable than commenting out tests, as it keeps the test code intact and easily readable.
Moreover, skipped tests are reported in Jest's output, reminding you that there are tests that need attention. This feature is convenient when working in a team environment, as it allows developers to be aware of tests that are not currently active but are still part of the overall test plan. It also helps ensure that all tests are eventually re-enabled and the test coverage remains comprehensive.
If you ever need to find the location of your Postgres config file, you can connect to Postgres and run:
show config_file
This command will return the absolute path for the config file.
This is a neat pattern matching trick in elixir, its best explained with a simple example:
invoice_message = "You owe $34"
"You owe " <> dollar_amount = invoice
IO.inspect(dollar_amount)
# => "$34"
With a slightly different situation, It may seem like you could do this:
invoice_message = "You owe 34 dollars"
"You owe " <> dollar_amount <> " dollars"= invoice
IO.inspect(dollar_amount)
# => ** (ArgumentError) the left argument of <> operator inside
# a match should always be a literal binary because its size can't be verified. Got: dollar_amount
But sadly you'll need to use regex to that because elixir will throw an error.
In TypeScript, the Pick
utility type provides a flexible way to construct new types by selecting subsets of properties from existing ones. For example, consider an interface User
:
interface User {
id: number;
name: string;
email: string;
age: number;
}
// Using Pick to create a new type type
UserContactDetails = Pick<User, 'email' | 'name'>;
In this example, UserContactDetails
is a new type with only the email
and name
properties from the User
interface.
This is particularly beneficial when you must pass or manipulate only specific aspects of a complex type, ensuring type safety and reducing the risk of handling unnecessary or sensitive data. By tailoring types to particular use cases, Pick
enhances code maintainability and readability, streamlining development processes in TypeScript applications.
Today I learned that Phoenix.LiveView.redirect/2 accepts an option external
so I can redirect the user to a full external url.
my_redirect_url = "https://til.hashrocket.com/"
socket
|> redirect(external: my_redirect_url)
|> noreply()
In Ruby on Rails, saved_changes
and previous_changes
are methods used to track changes in Active Record models. saved_changes
is used after an object is saved to the database. It provides a hash of all the attributes changed when persisting an object, including their original and final values. This method helps understand what changes have just persisted. On the other hand, previous_changes
is used after an object is saved but before reloading. It holds the same information as saved_changes
but becomes available only after the save operation and before the object is reloaded. It is helpful for actions triggered immediately after a save, like callbacks or logging changes.
Both methods are instrumental in tracking attribute changes and responding to them effectively in a Rails application.
Today I found out that there's an option preload_order in the Ecto.Schema.has_many/3
macro that allow us to configure a sorting field and direction for a relationship. This way we can:
defmodule Post do
use Ecto.Schema
schema "posts" do
has_many :comments, Comment, preload_order: [asc: :title]
end
end
Now with Rails 7.1, has_secure_password
can now automatically verify the current password when updating the password. This is useful to check if the user who is trying to update the password, knows the current password:
class User < ActiveRecord::Base
has_secure_password
end
user = User.new(password: "sekret", password_confirmation: "sekret")
user.save
#=> true
user.update(password: "HAHAHA", password_challenge: "")
#=> false, challenge doesn't authenticate
user.update(password: "updated*sekret", password_challenge: "sekret")
#=> true
Suppose you import two functions from an external library in one of your js files:
import { func1, func2 } from "externalLib";
export const doSomething = () => {
func1();
func2();
// ...
};
Now let's write a test for this function, and say we want to mock func1
.
describe("doSomething", () => {
jest.mock("externalLib", () => ({
func1: jest.fn(),
}));
it("does something", () => {
func1.mockImplementation(...);
// ...
});
});
But oh no! This test will fail - we inadvertently blew away the rest of the implementation of externalLib
when we created the mock for func1
. Since doSomething
relies on other functions in externalLib
, we get errors.
In order to preserve the rest of the implementation of externalLib
and only mock func1
, we need to call requireActual and spread it's return into the mock to get the implementation of the rest of the library:
describe("doSomething", () => {
jest.mock("externalLib", () => ({
...jest.requireActual("externalLib"),
func1: jest.fn(),
}));
it("does something", () => {
func1.mockImplementation(...);
// ...
});
});
Et voilà, your test will pass ✅.
Ecto.Query has 2 very useful functions for Datetime querying. Here's ago/2:
from p in Post, where: p.published_at > ago(3, "month")
And here's from_now/2
from a in Account, where: a.expires_at < from_now(3, "month")
And finally this is the list of intervals that it's supported:
Jest runs tests in parallel by default, file by file.
That means if you add a .only
on an it
or describe
, that only applies in the context of a single file. So if you have a test suite with 5 different test files and execute tests with jest
, 4 test files will run all their tests and one file will run it's only
test.
If you want only a single test to run, you need to add that .only
and narrow jest's scope to that single test file: jest src/path/to/test.js
.
As of Rails 7.1, you can now generate your application using the Bun JavaScript runtime.
To do so, you can pass the --javascript=bun
option to rails new
.
rails new --javascript=bun
The :host
declaration in CSS is a functional pseudo-class used in Web Components, specifically within Shadow DOM. When you create a custom element with Shadow DOM, the :host
pseudo-class allows you to define styles that will apply to the host element of the shadow tree. This means you can style the custom element rather than just its content. For instance, if you create a custom <my-element>
tag and attach a shadow DOM to it, using :host
in your CSS (inside the shadow DOM) lets you set properties like background color, margin, or padding directly on <my-element>
. This is particularly useful for encapsulating styles in web components, as it allows the component to have its own isolated styling that doesn't bleed into the rest of the page or get affected by external styles.
In Vim if you want to join two neighboring lines, place your cursor anywhere on the top line in NORMAL
mode and press J
/ (SHIFT
+ j
)
const object = {
name: <- With your cursor anywhere on this line
"bob"
}
=>
const object = {
name: "bob"
}
h/t Matt Polito
Today I learned that sometimes a URI can be too long. There's no a set length - it can vary by server, and some might not even enforce it - but it can happen. And when it does, you'll get a 414 - URI Too Long
.
So next time you sling a long array of ids into a query string, beware the 414
.
If you want to gracefully kill all of your tmux sessions/windows/panes in one fell swoop, run tmux kill-server
Wanted to share a method that I learned about today.
ActiveRecord has a handy utility for checking the value of an attribute in the database. These methods are actually on the Dirty module, and as such, are intended to be used when checking during validations or callbacks before saving.
These particular methods will read from the database (as their name implies), instead of using the value currently in memory.
There's 2 different methods to be aware of that you can use like below -
class Invoice < ActiveRecord::Base
validates :amount, presence: true
end
invoice = Invoice.last
invoice.amount
=> 10.0
invoice.amount = 80.0
invoice.attribute_in_database("amount")
=> 10.0
invoice.amount_in_database
=> 10.0
In the past, we've written about how to disable IRB autocomplete on Heroku. However, as of Rails 7.1, the Rails console turns off IRB
's autocompletion feature in production by default.
As usual, there is a way to customize the functionality, so setting IRB_USE_AUTOCOMPLETE=true
can override this default.
A newly generated Rails 7.1 app will now add an endpoint to your routes file to act as a heartbeat. You can point to many services or monitoring tools to check for downtime.
get "up" => "rails/health#show", as: :rails_health_check
However, this is just an indicator of the application running. If you want to do anything more advanced, like checking if the database is up... feel free to write your own. Ultimately, this is a great addition and will work in most situations.
Say you have a few unused imports in your JS file:
import charlie from "@library/charlie";
import alpha from "@library/alpha";
import beta from "@library/beta"; #UNUSED
import echo from "@library/echo";
import delta from "@library/delta"; #UNUSED
If you're using Visual Studio Code (or a forked version like Cursor) you can press Option/Alt
+Shift
+O
to remove all unused imports.
import alpha from "@library/alpha";
import charlie from "@library/charlie";
import echo from "@library/echo";
Note: this also sorts your current imports
Today I learned you can print the git log for an individual function with the -L
flag - -L :<funcname>:<file>
.
So if I have a function named friendlyFunction
in app/fileName.ts
, I can see it's history with:
% git log -L :friendlyFunction:app/fileName.ts
commit 740ab0c1eeb63e0a6bef06f89397e76407325f58 (HEAD -> main)
Author: Tony Yunker
Date: Mon Nov 6 17:22:52 2023 -0600
last commit
diff --git a/app/fileName.ts b/app/fileName.ts
--- a/app/fileName.ts
+++ b/app/fileName.ts
@@ -1,4 +1,4 @@
export const friendlyFunction = () => {
- console.log("hi there 👋");
+ console.log("bye now 👋");
return 2 + 2;
};
commit 314e725e56871e17c64b811de8e8cdb65badb08e
Author: Tony Yunker
Date: Mon Nov 6 17:22:31 2023 -0600
second commit
diff --git a/app/fileName.ts b/app/fileName.ts
--- a/app/fileName.ts
+++ b/app/fileName.ts
@@ -1,4 +1,4 @@
export const friendlyFunction = () => {
console.log("hi there 👋");
- return 1 + 1;
+ return 2 + 2;
};
commit 61998a2a9dfb64b0ee3aa5c23f783cca517ab15b
Author: Tony Yunker
Date: Mon Nov 6 17:22:08 2023 -0600
first commit
diff --git a/app/fileName.ts b/app/fileName.ts
--- /dev/null
+++ b/app/fileName.ts
@@ -0,0 +1,4 @@
+export const friendlyFunction = () => {
+ console.log("hi there 👋");
+ return 1 + 1;
+};
You can create custom sigils by following the sigil_{character}
definition pattern. Let's make an addition sigil sigil_a
that sums up space separated numbers.
defmodule CustomSigil do
def sigil_a(string, []) do
string
|> String.split(" ")
|> Enum.map(& String.to_integer(&1))
|> Enum.sum()
end
end
# ~a(2 4 6)
#=> 12
# ~a(12 12)
#=> 24
Many years ago, the lib
folder was removed from being auto-loaded in Rails. However, in Rails 7.1 it's back.
You can add autoload_lib
to your config, and the lib
folder will be added to your application's autoload paths. It does accept an ignore
argument, which allows you to, of course, ignore folders in lib
. When your new project is generated, it will add the assets
& tasks
folder to be ignored.
config.autoload_lib(ignore: %w(assets tasks))
There is a caveat that autoloading of lib
is unavailable for Rails engines.
In a Node.js project, versions of Node that a project is compatible with can be declared using the "engines" key within the package.json
file. To set a specific Node version (or a range of versions), you'll use the node
property inside the engines
object.
For example, to specify that your project is compatible with Node version 14.15.1, you would include the following:
{
"engines": { "node": "14.15.1" }
}
If you want to indicate compatibility with various versions, you can use semantic versioning notation. For instance, "node": ">=14.0.0 <15.0.0"
means your project is compatible with versions of Node greater than or equal to 14.0.0 but less than 15.0.0. By setting the engines
key, you hint to other developers and deployment platforms about which Node versions should be used with your project. Note, however, that unless you use a package manager that enforces this (e.g., Yarn or newer versions of npm), this is primarily advisory and won't prevent the project from running on non-specified versions.
Importing a module can be lengthy, depending on your project's app structure.
import { Widget } from "../../../../components/widget";
Utilizing your tsconfig
, aliases can be created for module resolution.
{
"compilerOptions": {
"paths": {
"@components/*": ["./app/components/*"],
}
}
}
Now, our previous example can be expressed like so:
import { Widget } from "@components/widget";
Next.js is already set up to deal with this, so you should not need to add any additional libraries like tsc-alias
to handle the actual module resolution when the project is built for production.
When working with command-line tools, it's common to encounter scenarios where you'd like to test or run a tool without committing to a global installation, especially for one-off tasks. The npx utility addresses this exact need. By invoking npx <command>
, the tool automatically fetches and installs the package corresponding to <command> from the npm registry if it's not already in your $PATH
. This allows you to execute the desired command seamlessly. A significant advantage is that post-execution, npx
ensures the package is not retained as a global installation, preventing unnecessary clutter or "pollution" in your global packages. This utility offers a cleaner, transient approach to testing and using CLI tools.
Rails 7.1 adds the ability to use pre-defined variants when calling preview
or representation
on an attachment.
class User < ActiveRecord::Base
has_one_attached :file do |attachable|
attachable.variant :thumb, resize_to_limit: [100, 100]
end
end
<%= image_tag user.file.representation(:thumb) %>
Here, we declare a thumb
variant that can later be referenced—no need to explicitly express the resize_to_limit
directly at the image_tag
call.
When creating a GitHub repo with the CLI tool, you have the opportunity to push up your commits immediately as well using the --push
or (-p
)
❯ gh repo create OWNER/REPO --push --source .
✓ Created repository OWNER/REPO on GitHub
✓ Added remote git@github.com:OWNER/REPO.git
Using the push flag requires the --source
flag to tell it where the repo is locally which is why you see that in the example above.
In your test.exs
config change from
config :logger, level: :warning
to
config :logger, level: :debug
to see your app's logs output when running mix test
If you have not partaken, creating a GitHub repo with the CLI tool is pretty cool; however, one thing that always got me was that when you create a new repo it does not create a remote so I'd always have to go back and make an origin
.
There is an additional CLI flag that you can pass to do this for you.
gh repo create OWNER/REPO -r origin -s .
So, just for context, the -r
(or --remote
) flag is for naming the remote. This must also be used with the -s
(or --source
) flag, which tells the CLI where the repo lives on your local system. In the above example, I referenced the directory I was in using a .
.
There's a good chance you're using GitHub if you're a developer. A long while ago, GitHub wrapped git
commands with a tool they released called hub
. This was nice, then, as it helped bridge the gap between Git and GitHub. A few years ago, they released the GitHub CLI, a dedicated command line tool for GitHub... no more wrapping Git commands.
There are many things you can do with this tool, but the one I use the most is setting up a new repository.
With this simple command, you can generate the repo on GitHub.
> gh repo create OWNER/REPO
✓ Created repository OWNER/REPO on GitHub
There are several ways to get your text to wrap with css. However it always seems that there ends up being an orphan piece of text on the wrap. The newly introduced pretty
option for text-wrap
aims to fix this.
Image sourced from Why you should remove orphans from your body text.
Like i mentioned earlier it is a new feature and is not fully supported in all browsers yet but definitely a welcome addition.
git log
is great to see a detailed diff, but what if you only want to see the files that were changed?
There's git whatchanged
, but it's essentially deprecated, and git docs recommend using git log
instead:
% git whatchanged
commit 9925b8ec8fc8024544a36c71e210a23192a63bf4 (HEAD -> main, origin/main, origin/HEAD)
Author: Tony Yunker <tony.yunker@gmail.com>
Date: Fri Oct 20 15:07:09 2023 -0500
ruby - abbreviated assignment operators
:100644 100644 7d41153 7449733 M README.md
:000000 100644 0000000 5a432d1 A ruby/rubys_abbreviated_assignment_operators.md
So then we can use git log --name-only
to see the names of the files that were changed.
% git log --name-only
commit 9925b8ec8fc8024544a36c71e210a23192a63bf4 (HEAD -> main, origin/main, origin/HEAD)
Author: Tony Yunker <tony.yunker@gmail.com>
Date: Fri Oct 20 15:07:09 2023 -0500
ruby - abbreviated assignment operators
README.md
ruby/rubys_abbreviated_assignment_operators.md
But that won't tell us if they were updates or adds or whatnot. For that, we can use git log --name-status
% git log --name-status
commit 9925b8ec8fc8024544a36c71e210a23192a63bf4 (HEAD -> main, origin/main, origin/HEAD)
Author: Tony Yunker <tony.yunker@gmail.com>
Date: Fri Oct 20 15:07:09 2023 -0500
ruby - abbreviated assignment operators
M README.md
A ruby/rubys_abbreviated_assignment_operators.md
These flags can be used on git show
too!
To enable key repeat on mac for an app + Vim, find the bundle identifier for the app you want to enable and use its bundle identifier in the following defaults
command:
# For VSCode
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false
For example we are enabling for VSCode which is why we use com.microsoft.VSCode
.
Use lsof -i :port_number
to find details about a process listening on whichever port you pass.
For example, if you were running a local server on port 4000 and wanted to find the server's PID you could run lsof -i :4000
If you need to find the bundler identifier for a MacOS application for whatever reason, maybe you're trying to execute some useful defaults
command. You can use a quick AppleScript in the terminal like so:
osascript -e 'id of app "Visual Studio Code"'
> com.microsoft.VSCode
Have you ever needed to log into your Github CI run? Is it a flaky test that's hard to reproduce, and the logging output could be more helpful?
You can log into the CI run while it's going. Try out the Github action Debugging with SSH. Utilizing upterm and Tmux, allows for a session that can be logged into.
Add a step like this to your workflow:
name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup upterm session
uses: lhotari/action-upterm@v1
A cool feature is that it lets you lock down who can log in via SSH keys. Add a limit-access-to-*
declaration like so:
name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup upterm session
uses: lhotari/action-upterm@v1
with:
## limits ssh access and adds the ssh public key for the user which triggered the workflow
limit-access-to-actor: true
## limits ssh access and adds the ssh public keys of the listed GitHub users
limit-access-to-users: githubuser1,githubuser2
Then, you can log in via your workflow's 'checks' panel.
h/t JackC
In Chromium based web-browsers (Chrome, Brave, etc.) go into your settings and search for site search
.
Once you find the settings, click on Add
under Site Search
. This will give you a form like so:
Search engine
is the name that will be displayed in the address bar when searching
Shortcut
is the string you type in the address bar that will begin the site-specific searching
URL
is the desired search url, putting %s
where your search terms will go.
For example, searching through all of the TILs can be done with
https://til.hashrocket.com/?q=%s
Now with this in place, you should be able to something like the following, to quickly view all TILs on a certain topic:
til vim
Now you can enjoy easily learning about the thousands of things all the Hashrocketeers have learned for themselves over the years!
Previously, when writing an ActiveRecord select and having the need to add a column alias, you'd have to provide a SQL fragment string like so:
Customer.select("customers.name AS customer_name")
=> SELECT customers.name AS customer_name FROM "customers"
Rails 7.1 added a more robust hash syntax for selects that also allows for column aliasing.
Customer.joins(:orders).select(name: :customer_name)
=> SELECT "customers"."name" AS "customer_name", FROM "customers"
Using the newly available select syntax in Rails 7.1 we can express a SQL select like so:
Customer.joins(:orders).select(customers: [:name], orders: [:total])
=> SELECT "customers"."name", "orders"."total" FROM "customers" INNER JOIN "orders" ON "orders"."customer_id" = "customers"."id"
There's also some shorthand you can utilize to make it even shorter. We can still add column names as Symbols, as we've always been able to. They will reference the Model the select is being performed on.
Customer.joins(:orders).select(:name, orders: [:total])
=> SELECT "customers"."name", "orders"."total" FROM "customers" INNER JOIN "orders" ON "orders"."customer_id" = "customers"."id"
We removed the need to declare the customers
table as it is implied from being called on the Customer
relation.
Caveat: since declaring other columns is done via a hash, that must be provided as the last argument. You couldn't say something like .select(:id, orders: [:total], :name)
.
Previously, when writing an ActiveRecord select and wanted to add columns from anything outside of the model you originated from, you'd have to provide a SQL fragment string like so:
Customer.joins(:orders).select("customers.name, orders.total")
=> SELECT customers.name, orders.total FROM "customers" INNER JOIN "orders" ON "orders"."customer_id" = "customers"."id"
Notice above how we declare columns from the customers
table and the orders
table.
As of Rails 7.1, you can now stay in the ActiveRecord DSL and provide hash key/values. The query example above can directly be expressed as:
Customer.joins(:orders).select(customers: [:name], orders: [:total])
=> SELECT "customers"."name", "orders"."total" FROM "customers" INNER JOIN "orders" ON "orders"."customer_id" = "customers"."id"
You provide the table names as keys and the column names you want to select as Symbols in an Array.
Also, notice that the selected columns in the query are appropriately quoted vs the SQL fragment above.
Today I Learned ruby has a lot of abbreviated assignment operators.
The best known are +=
and -=
to increment and decrement values:
x = 2
x += 1
x #=> 3
And of course there's ||=
, to assign only if the value is nil
or false
:
x = nil
x ||= 4 #=> 4
x ||= 5 #=> 4
But these abbreviations can be applied to a lot more operators!
It works with all of the following: +
, -
, *
, /
, %
, **
, &
, |
, ^
, <<
, >>
, &&
, ||
.
So we could use |=
to union two arrays and assign the result to the variable:
x = [1, 2, 3]
x |= [2, 3, 4, 4]
x #=> [1, 2, 3, 4]
Have you ever found yourself typing out long commands in the terminal, only to need a part of that command in a subsequent command? You can save time by reusing the last argument of the previous command using the ESC
key followed by a period .
First, you use cat
to display the contents of the file example.txt
:
cat path/to/your/files/example.txt
Now, if you want to perform an operation on the same file, you don't need to type out the entire path again. Instead, use the ESC
key followed by the period .
vim ESC.
# After pressing ESC. this becomes:
vim path/to/your/files/example.txt
In this example, ESC.
automatically inserts the last argument from the previous command, which is the file path path/to/your/files/example.txt
.
Note: You can use
ESC .
repeatedly to cycle through previous arguments in your command history.
When you take screenshots on MacOS they are saved with a rather long name, like Screenshot 2023-10-18 at 4.13.56 PM
To remove the timestamp making the names shorter just enter this in your terminal:
defaults write com.apple.screencapture "include-date" 0
After doing that go ahead and run this:
killall SystemUIServer
Now your screenshots will just be saved as Screenshot
and successive screenshots in the same directory will have a number appended to them. (i.e Screenshot 1
, Screenshot 2
, etc.)
When using rails and wanting to know how one of your routes plays out, it's very easy to do a quick cli call to rails routes
. This gives an overview of all routes in the app.
> rails routes
Prefix Verb URI Pattern Controller#Action
rails_health_check GET /up(.:format) rails/health#show
restaurants GET /restaurants(.:format) restaurants#index {:format=>:json}
However if we provide the --expanded
flag, we get a more verbose output with also tells you exactly where in the routes file it was declared.
> rails routes --expanded
--[ Route 1 ]--------------------------------------------------------------------
Prefix | rails_health_check
Verb | GET
URI | /up(.:format)
Controller#Action | rails/health#show
Source Location | config/routes.rb:6
--[ Route 2 ]--------------------------------------------------------------------
Prefix | restaurants
Verb | GET
URI | /restaurants(.:format)
Controller#Action | restaurants#index {:format=>:json}
Source Location | config/routes.rb:11
This could be exceptionally helpful when breaking up large routing files in Rails
Using Tailwind you can apply custom styling to an element based on it's data attribute.
For example, given these elements:
<div data-state="checked" class="data-[state=checked]:bg-black bg:white">
<!-- Html that could change the data-state goes here -->
</div>
<div data-state="unchecked" class="data-[state=checked]:bg-black bg:white">
<!-- Html that could change the data-state goes here -->
</div>
Of these two elements, the first one would be given a black background, while the second one would have a white background, unless it's data-state changes to checked.
By default, screenshots on MacOS are saved to the Desktop. To change this to a specific directory:
First, bring up the screenshot utilities by pressing CMD + SHIFT + 5
.
Next, click on the Options
selector.
Finally, choose a location under Save to
Note: Here is where you can set your screenshot to be on a timer, choose whether or not you want the mouse/cursor to show up on the screenshots, and a change few other options.