Multi-cursor from Mouse Position in VS Code

If you do option + click in VS code, a multi-cursor will be inserted at the position of your mouse.

Transform to Camel Case with VS Code

Using VS code's command palette, Cmd+Shift+P, You can transform highlighted text to camel case

You can also transform to most other cases.

Get an elements entire height

The scrollHeight Element property gives you an elements entire scrollable content height, meaning it accounts for the overflowed content not visible on the screen.

Exclude parts of a query in Ecto

Ecto.Query has a function called exclude you can call it to remove previous parts of a query that have already been defined

query = from(u in User,
  where: u.email == "jack@example.com",
  select: u.email

query
|> exclude(:where)
#=> will return the %Ecto.Query{} expression without the where clause

Random enum element in elixir

Enum.random is a simple way to select a random element of an Elixir enum.

[1, 2, 3]
|> Enum.random()
# => who knows?? either 1, 2, or 3

Pattern match anonymous function clauses in elixir

Did you know that you can use pattern matching headers with anonymous functions in elixir? It works like this:

anon = fn
  {:ok, value} -> "Got value: #{value}"
  _ -> "Doing something else"
end

# IO.puts anon.({:ok, 42})   # => "Got value: 42"
# IO.puts anon.(:ok)   # => "Doing something else"

Visualize Easing Animation Curves

easings.net has a handy table for visualizing easing functions for animation curves.

Delay Long Press on React Native Pressable

The delayLongPress prop on the react native pressable component allows you to specify a delay in milliseconds before the onLongPress callback prop is executed. Allowing you to control exactly how long a user should press on the element before receiving feedback etc.

Use Physical Device Size on IOS Sim window

You can set the dimensions of the simulator window to be the exact physical size of the simulated device on the xcode IOS simulator.

Window -> Physical Size or Command + 1

Get React Native Component's Dimensions

In React Native you can use the onLayout prop along with the nativeEvent's layout to get the dimensions (in pixels) of a rendered component.

const [viewDimensions, setViewDimensions] = useState({height: 0, width: 0})
return (
  <View
     onLayout={(e) => setViewDimensions(e.nativeEvent.layout)}
  />
)

Now we have an object containging our view's height and width saved as viewDimensions

React Native Scroll Refresh

In React Native, the RefreshControl component can be placed inside of a scrollview component to handle refreshes. When the user scrolls up, the onRefresh function will be called where you can handle your refresh/query logic.

Keep IOS Simulator Window on Top

You can keep your xcode IOS simulator window on top of all your other windows by selecting Window -> Stay on top

Show Keyboard in Xcode Simulator

If you want to see the device keyboard while using the Xcode simulator, use ⌘ + K

Expo Reactive Native Apps on IOS Simulator

With Expo's CLI, the command npx expo run:ios will build and run your application in xcode's IOS simulator. You will need to have Xcode installed in order for the command to work. If you receive an error stating Xcode must be fully installed before you can continue, you may need to navigate to Xcode's settings and set a version of command line tools under the locations tab.

Access a file's timestamps with Elixir

File.stat/2 will return data from the path passed to it, including the accessed time atime and the modified time mtime.

Sentry Records 'Rage Clicks'

In a Sentry session replay, you can view if a user rage clicks on an element in your app. A rage click is defined as "a series of rapid clicks on the same unresponsive element".

Similarly, sentry records "Dead" clicks when a user clicks on an element and the page does not visibly respond within 7000ms.

Enum Reject vs Filter

If you're anything like me, you regularly forget if Enum.filter/2 keeps elements that return true or filters them out.

Let existence of Enum.reject/2 be your reminder.

reject/2 does the same thing as filter/2 but discards truthy elements instead of keeping them. I wish that filter/2 was renamed to keep/2, then the 2 functions would feel more like logical opposites and perhaps more readable.

Create Directories Recursively

If you pass the -p option to mkdir, it will create any necessary parent directories that do not exist yet. In Elixir the File.mkdir_p/1 function will do the same thing!

Using Enum Sort with multiple keys

You can sort an enum by multiple keys at once. For example, If we wanted to sort a list of 'Vehicle' structs by type and model at the same time, we could do this:

vehicle_list = [
  %Vehicle{type: "van", model: "Odyssey"},
  %Vehicle{type: "truck", model: "Avalanche"},
  %Vehicle{type: "van", model: "Pacifica"},
  %Vehicle{type: "truck", model: "Bronco"}
]

Enum.sort_by(vehicle_list, &{&1.type, &1.model})
#=>
[
  %Vehicle{type: "truck", model: "Avalanche"},
  %Vehicle{type: "truck", model: "Bronco"},
  %Vehicle{type: "van", model: "Odyssey"},
  %Vehicle{type: "van", model: "Pacifica"},
]

sort_by is first sorting the vehicles by the :type key and then sorting by the :model key.

Distinct Query Expression in Ecto

In an Ecto query expression, use distinct: true to ensure the values returned from your query are distinct.

from(u in User, distinct: true, select: u.first_name)

You can also use distinct with an expression to be more specific

from(u in User, 
  distinct: last_name,
  order_by: [asc: :last_name])

Go back to previous git branch shortcut

git checkout - takes you right back to the previously checked out branch.

Clear Git Stash

git stash clear does exactly what it sounds like!

Omit Primary Key in Embedded Schema

By declaring @primary_key false in an Ecto embedded schema, the struct will not require a primary key!

Redacted fields in Ecto Schema

By including redacted: true when defining a field on an ecto schema, Ecto will redact the field value in a changeset and hide the field when inspecting the schema

Handling Insertion Conflicts With Ecto Repo

When inserting an struct with Ecto.Repo, you can use the on_conflict option to handle the case of a constraint conflict. The options you can provide include :nothing, :replace_all, {:replace_all_except, fields}, and {:replace, fields}

Restrict Phoenix Component Attr Values

If you want to limit the permissible values of a Phoenix Component attribute, you can use the values keyword list option when you call attr/3. Here's is an example that restricts which atoms are being passed to the component:

use MyApp.Component

attr :acceptable_color, :atom, values: [:green, :blue]

if you were to pass any atom other than :green or :blue to this component, the compiler will warn you.

Validate data is included in Ecto Changeset

validate_inclusion/4 allows you to validate that specific data is included in a changeset. One way you could use it is by restricting a field's accepted values like this:

changeset
|> validate_inclusion(:direction, ["left", "right"])

if the value of the :direction field is not "left" or "right" a validation error will be added to the changeset

Run an abritrary function in Ecto.Multi

If you are building an Ecto.Multi transaction and you need to add a function that is not a direct repo operation, you can use Ecto.Multi.Run and pass a function to it. The function you pass to Ecto.Multi.Run must return either {:ok, value} or {:error, value} in order for the multi operations to continue.

Tailwind Underline Offset Spacing

You can change the underline offset spacing with the Tailwind class underline-offset-{width}

Add an error to an Ecto Changeset

If you want to create custom validations with ecto changeset, chances are you are going to need to add errors to the changeset to be shown to the user.

Using add_error/4 allows you to add an error to a changeset.

changeset = change(%BlogPost{}, %{content: "Hello World ...cont"})
add_error(changeset, :content, "Your blog content is too long!")

changeset.errors
[content: {"Your blog content is too long!", []}]

Convert Changeset to Schema With Ecto

You can convert an Ecto.Changeset back to a schema by using Ecto.Changeset.apply_changes/1

movie_changeset = change(%Movie{title: "Citizen Kane"}, %{director: "Orson Welles"})
#=> This returns an ecto changeset with the new director change

apply_changes(movie_changeset) 
#=> %Movie{title: "Citizen Kane", director: "Orson Welles"}

Recompile iex console with mix

Call recompile when running iex with mix to recompile the project. This works just like the rails console reload! command.

Compare NaiveDateTimes by a specific unit

In Elixir, you can get the difference between two NaiveDateTimes using the NaiveDateTime.diff/3 function.

The third arg allows you to pass a unit such as :microsecond, :millisecond, or any unit returned from System.time_unit. By default, the unit is set to :second.

NaiveDateTime.diff(~N[2014-10-02 00:29:18], ~N[2014-10-02 00:29:10])
#=> 8
NaiveDateTime.diff(~N[2014-10-04 00:29:18], ~N[2014-10-02 00:29:10], :day)
#=> 2

Interestingly enough :day works as a unit, but not :month, or :year. 🤔

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

String Concat Pattern Matching In Elixir

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 do that because elixir will throw an error.

Kill all Tmux Sessions

If you want to gracefully kill all of your tmux sessions/windows/panes in one fell swoop, run tmux kill-server

Custom Sigils In Elixir

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

Run Mix Test with Debug Log

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

Find a process listening on a port

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

Jump to the beginning/end of line in the terminal

use ctrl+a to jump the cursor to the beginning of the line, and ctrl+e to jump the cursor to the end of the line.

Changing Elixir DateTime Precision

DateTime.truncate(datetime, precision)

Calling this function on a DateTime allows you to change the level of precision from microsecond, :millisecond, or :second.

now = DateTime.utc_now()
# => ~U[2023-10-09 17:52:05.305420Z]

DateTime.truncate(now, :second)
# => ~U[2023-10-09 17:52:39Z]

Variable key names in Elixir

You can wrap strings and atoms with brackets in elixir to use them as keys in maps

var_key = :name
# This is the syntax for using that variable as a key name
%{[var_key] => "Jack Rosa"}
# => %{name: "Jack Rosa"}

Elixir's Info function

The elixir Kernel module has an interesting function i/1 that returns information about whatever you pass to it.

It will provide the argument's data type, byte size, raw representation, a description, and reference modules

i("hello world")

#=>
# Term
#  "hello world"
# Data type
#  BitString
# Byte size
#  11
# Description
#  This is a string: a UTF-8 encoded binary. It's printed surrounded by
#  "double quotes" because all UTF-8 encoded code points in it are printable.
# Raw representation
#  <<104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100>>
# Reference modules
#  String, :binary
# Implemented protocols
#  Collectable, IEx.Info, Inspect, List.Chars, String.Chars

Toggling Case with vim

~ in Vim toggles the case of the character under the cursor and then moves the cursor to the next character.

Check and generate your site's Favicons

https://realfavicongenerator.net/ can audit your website's favicon's to show which devices and browsers will display your favicon properly. The site also helps with favicon generation and target resolutions.

Close File Shortcut In VS Code

You can use Cmd (⌘) + w in VS Code to close the currently open file.

Elixir Data Type Comparison

Elixir has an interesting defined sorting order for its data types. The order is as follows:

number < atom < reference < function < port < pid < tuple < map < list < bitstring

For example:

random_data = [["Hello World"], {:hello, :world}, 16, %{key: "value"}, :atom]
Enum.sort(random_data)
#=> [16, :atom, {:hello, :world}, %{key: "value"}, ["Hello World"]]

Or even

4 < :atom
#=> true

Unix Timestamps in Elixir

Unix timestamps are a very simple way to compare times in an integer format. They are the total seconds elapsed since January 1st, 1970 UTC (The Unix Epoch).

In elixir, if you want to do some operations on a DateTime struct, and want to keep things simple, you can convert a DateTime struct to an integer with to_unix/2. By default, it will use seconds as the unit.

Command Line Wildcards

The * character can be used as a wildcard to match sequences of unknown characters in the command line.

For example, lets say my elixir project has a few tests that I want to run in a directory: MyProject/tests. The folder is filled with a bunch of random files, but the ones that i want to run have a similar name, tests/user_views_home and tests/user_views_show. We could use a wild card to match on both of these file names and run the tests (assuming there are no other files that match) like this:

mix test MyProject/tests/user_views*

VS Code Multi-Cursor Clipboards

When using ⌘+d to create multiple cursors in VSCode, each cursor has its own independent clipboard. With each cursor you can copy different text selections and paste them separately. 🤯