@ -64,12 +64,12 @@ REST API at `/api/events` (show, create, delete) with JSON rendering. Uses `Fall
- Out of the box, `core_components.ex` imports an `<.icon name="hero-x-mark" class="w-5 h-5"/>` component for for hero icons. **Always** use the `<.icon>` component for icons, **never** use `Heroicons` modules or similar
- Out of the box, `core_components.ex` imports an `<.icon name="hero-x-mark" class="w-5 h-5"/>` component for for hero icons. **Always** use the `<.icon>` component for icons, **never** use `Heroicons` modules or similar
- **Always** use the imported `<.input>` component for form inputs from `core_components.ex` when available. `<.input>` is imported and using it will save steps and prevent errors
- **Always** use the imported `<.input>` component for form inputs from `core_components.ex` when available. `<.input>` is imported and using it will save steps and prevent errors
- If you override the default input classes (`<.inputclass="myclass px-2 py-1 rounded-lg">)`) class with your own values, no default classes are inherited, so your
- If you override the default input classes (`<.inputclass="myclass px-2 py-1 rounded-lg">)`) class with your own values, no default classes are inherited, so your
custom classes must fully style the input
custom classes must fully style the input
<!-- usage-rules-start -->
<!-- usage-rules-start -->
<!-- phoenix:elixir-start -->
<!-- phoenix:elixir-start -->
## Elixir guidelines
## Elixir guidelines
- Elixir lists **do not support index based access via the access syntax**
- Elixir lists **do not support index based access via the access syntax**
@ -87,7 +87,7 @@ custom classes must fully style the input
Enum.at(mylist, i)
Enum.at(mylist, i)
- Elixir variables are immutable, but can be rebound, so for block expressions like `if`, `case`, `cond`, etc
- Elixir variables are immutable, but can be rebound, so for block expressions like `if`, `case`, `cond`, etc
you *must* bind the result of the expression to a variable if you want to use it and you CANNOT rebind the result inside the expression, ie:
you _must_ bind the result of the expression to a variable if you want to use it and you CANNOT rebind the result inside the expression, ie:
# INVALID: we are rebinding inside the `if` and the result never gets assigned
# INVALID: we are rebinding inside the `if` and the result never gets assigned
if connected?(socket) do
if connected?(socket) do
@ -124,9 +124,10 @@ custom classes must fully style the input
- Instead of sleeping to synchronize before the next call, **always** use `_ = :sys.get_state/1` to ensure the process has handled prior messages
- Instead of sleeping to synchronize before the next call, **always** use `_ = :sys.get_state/1` to ensure the process has handled prior messages
<!-- phoenix:elixir-end -->
<!-- phoenix:elixir-end -->
<!-- phoenix:phoenix-start -->
<!-- phoenix:phoenix-start -->
## Phoenix guidelines
## Phoenix guidelines
- Remember Phoenix router `scope` blocks include an optional alias which is prefixed for all routes within the scope. **Always** be mindful of this when creating routes within a scope to avoid duplicate module prefixes.
- Remember Phoenix router `scope` blocks include an optional alias which is prefixed for all routes within the scope. **Always** be mindful of this when creating routes within a scope to avoid duplicate module prefixes.
@ -145,6 +146,7 @@ custom classes must fully style the input
<!-- phoenix:phoenix-end -->
<!-- phoenix:phoenix-end -->
<!-- phoenix:ecto-start -->
<!-- phoenix:ecto-start -->
## Ecto Guidelines
## Ecto Guidelines
- **Always** preload Ecto associations in queries when they'll be accessed in templates, ie a message that needs to reference the `message.user.email`
- **Always** preload Ecto associations in queries when they'll be accessed in templates, ie a message that needs to reference the `message.user.email`
@ -157,6 +159,7 @@ custom classes must fully style the input
<!-- phoenix:ecto-end -->
<!-- phoenix:ecto-end -->
<!-- phoenix:html-start -->
<!-- phoenix:html-start -->
## Phoenix HTML guidelines
## Phoenix HTML guidelines
- Phoenix templates **always** use `~H` or .html.heex files (known as HEEx), **never** use `~E`
- Phoenix templates **always** use `~H` or .html.heex files (known as HEEx), **never** use `~E`
@ -186,7 +189,7 @@ custom classes must fully style the input
...
...
<% end %>
<% end %>
- HEEx require special tag annotation if you want to insert literal curly's like `{` or `}`. If you want to show a textual code snippet on the page in a `<pre>` or `<code>` block you *must* annotate the parent tag with `phx-no-curly-interpolation`:
- HEEx require special tag annotation if you want to insert literal curly's like `{` or `}`. If you want to show a textual code snippet on the page in a `<pre>` or `<code>` block you _must_ annotate the parent tag with `phx-no-curly-interpolation`:
<codephx-no-curly-interpolation>
<codephx-no-curly-interpolation>
let obj = {key: "val"}
let obj = {key: "val"}
@ -233,6 +236,7 @@ custom classes must fully style the input