-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
70d2d53
commit a431209
Showing
60 changed files
with
745 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
posts/2023-12-29-defining-active-menu-item-in-phoenix-framework.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
|
|
||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | ||
|
|
||
| <title>Defining active menu item in Phoenix Framework through Short-circuit Evaluation - wevtimoteo</title> | ||
|
|
||
| <link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon"> | ||
| <link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon"> | ||
|
|
||
| <link rel="stylesheet" href="/assets/css/style.css"> | ||
| <link rel="stylesheet" href="/assets/css/prism.css"> | ||
|
|
||
| <style> | ||
| img { | ||
| max-width: 800px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="wrapper"> | ||
| <header id="top"> | ||
| <h1><a href="/">wevtimoteo</a></h1> | ||
| <p>kairos _ sharing _ tech _ learning _ kaizen _ path</p> | ||
| </header> | ||
|
|
||
| <nav> | ||
|
|
||
| <ul> | ||
| <li><a href="/posts">Posts</a></li> | ||
| <li><a href="/about.html">About</a></li> | ||
| </ul> | ||
|
|
||
| </nav> | ||
|
|
||
| <hr /> | ||
|
|
||
| <main><h1 id="defining-active-menu-item-in-phoenix-framework-through-short-circuit-evaluation">Defining active menu item in Phoenix Framework through Short-circuit Evaluation</h1><p>Posted on Friday, 29 Dec 2023 by Weverton Timoteo</p><p>Tags:</p><ul><li><a href="/tags/elixir">elixir</a></li><li><a href="/tags/en-US">en-US</a></li><li><a href="/tags/phoenixframework">phoenixframework</a></li></ul><ul><li><a href="https://wevtimoteo.github.io/posts/2023-12-29-definindo-item-ativo-no-menu-no-phoenix-framework.html">Ler versão em pt-BR</a></li></ul><p>When developing web applications, marking menu items, tabs, or other parts of the user interface as active is a common need. In the <a href="https://phoenixframework.org/">Phoenix Framework</a>, doing this quickly might lead you to something like this:</p><pre><code class="elixir"><.link | ||
| href={~p"/stores/#{@store}/products"} | ||
| class={"tab" <> if @active == :products, do: " tab-active", else: ""} | ||
| > | ||
| Products | ||
| </.link></code></pre><p>In this approach, we use ternary expressions and string concatenation to conditionally define CSS classes. It works, but as conditional logic increases, it can become challenging to read and maintain.</p><h2 id="introducing-short-circuit-evaluation">Introducing Short-circuit Evaluation</h2><p>In Elixir, <strong>lazy evaluation</strong> and <strong>short-circuit evaluation</strong> are often used interchangeably. However, there’s a slight difference. Lazy evaluation is usually associated with more complex data structures, while short-circuit is <strong>more common in boolean expressions</strong>. And that’s what we’re going to use.</p><p>Let’s look at some examples using <code class="inline">iex</code>:</p><pre><code class="elixir">list = ["plataformatec", nil, "sourcelevel", false, "dashbit"] | ||
| #=> ["plataformatec", nil, "sourcelevel", false, "dashbit"] | ||
|
|
||
| # Using short-circuit evaluation on the list | ||
| list = ["plataformatec", nil && "sourcelevel", false && "dashbit"] | ||
| #=> ["plataformatec", nil, false]</code></pre><p>In the second definition of the list, we are using a short-circuit operation, where the last value of the expression prevails when the previous one is true; otherwise, the previous value is retained.</p><p>In simple terms, it’s like telling <a href="https://elixir-lang.org/">Elixir</a>: “stop thinking as soon as you know the answer.”</p><h2 id="applying-short-circuit-to-the-css-class-list">Applying Short-circuit to the CSS Class List</h2><p>In a <a href="https://github.com/phoenixframework/phoenix_html/issues/276#issuecomment-584911356">Phoenix Framework issue #276</a>, an approach using lazy evaluation for the class syntax was discussed. <a href="https://github.com/phoenixframework/phoenix_html/issues/276#issuecomment-742375950">In this comment</a>, it was clarified that if the list item is <code class="inline">false</code> or <code class="inline">nil</code>, it will be removed. We can apply this solution to our example:</p><pre><code class="elixir"><.link | ||
| href={~p"/stores/#{@store}/products"} | ||
| class={["tab", @active == :products && "tab-active"]} | ||
| > | ||
| Products | ||
| </.link></code></pre><p>If <code class="inline">@active</code> is <code class="inline">:products</code>, the string <code class="inline">"tab-active"</code> will be added to the list (resulting in <code class="inline">tab tab-active</code>), otherwise, it will be omitted (resulting in just <code class="inline">tab</code>). This approach is cleaner, more readable, and efficient:</p><ol><li><strong>Code Conciseness</strong>: The lazy evaluation syntax is more concise, resulting in cleaner code. | ||
| </li><li><strong>Efficiency</strong>: Lazy evaluation halts evaluation as soon as the result is known, avoiding unnecessary evaluations. | ||
| </li><li><strong>Readability</strong>: The class list is easy to understand and maintain, improving code readability. | ||
| </li><li><strong>Ease of Maintenance</strong>: The simplified syntax makes code maintenance easier over time. | ||
| </li></ol><p>When developing applications in Elixir, it’s not just about using the functional paradigm, but also about writing concise and easily understandable code. This approach not only simplifies our code but also makes maintenance more straightforward and direct. 😎✨</p></main> | ||
|
|
||
| <hr /> | ||
|
|
||
| <footer> | ||
|
|
||
| <a href="https://dev.to/wevtimoteo" target="_blank" style="float: right"> | ||
| <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="Weverton Timoteo's DEV Profile" height="30" width="30"> | ||
| </a> | ||
|
|
||
| <a href="https://github.com/wevtimoteo/wevtimoteo.github.io" target="_blank" style="float: right;margin-right: 10px"> | ||
| <?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 30 30" height="30px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="30px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path clip-rule="evenodd" d="M296.133,354.174c49.885-5.891,102.942-24.029,102.942-110.192 c0-24.49-8.624-44.448-22.67-59.869c2.266-5.89,9.515-28.114-2.734-58.947c0,0-18.139-5.898-60.759,22.669 c-18.139-4.983-38.09-8.163-56.682-8.163c-19.053,0-39.011,3.18-56.697,8.163c-43.082-28.567-61.22-22.669-61.22-22.669 c-12.241,30.833-4.983,53.057-2.718,58.947c-14.061,15.42-22.677,35.379-22.677,59.869c0,86.163,53.057,104.301,102.942,110.192 c-6.344,5.452-12.241,15.873-14.507,30.387c-12.702,5.438-45.808,15.873-65.758-18.592c0,0-11.795-21.31-34.012-22.669 c0,0-22.224-0.453-1.813,13.592c0,0,14.96,6.812,24.943,32.653c0,0,13.6,43.089,76.179,29.48v38.543 c0,5.906-4.53,12.702-15.865,10.89C96.139,438.977,32.2,354.626,32.2,255.77c0-123.807,100.216-224.022,224.03-224.022 c123.347,0,224.023,100.216,223.57,224.022c0,98.856-63.946,182.754-152.828,212.688c-11.342,2.266-15.873-4.53-15.873-10.89 V395.45C311.1,374.577,304.288,360.985,296.133,354.174L296.133,354.174z M512,256.23C512,114.73,397.263,0,256.23,0 C114.73,0,0,114.73,0,256.23C0,397.263,114.73,512,256.23,512C397.263,512,512,397.263,512,256.23L512,256.23z" fill="#0D2636" fill-rule="evenodd"/></g></svg> | ||
| </a> | ||
|
|
||
| <p> | ||
| Powered by <a href="https://github.com/Dalgona/Serum">Serum</a> v1.5.1, | ||
| with <a href="https://github.com/Dalgona/serum-theme-essence">Essence</a> theme | ||
| </p> | ||
|
|
||
| </footer> | ||
| </div> | ||
|
|
||
| <script src="/assets/js/prism.js"></script> | ||
| </body> | ||
| </html> | ||
| <script> | ||
| const ws_url = "ws://" + location.host + "/serum_live_reloader"; | ||
| var ws; | ||
|
|
||
| connect(); | ||
|
|
||
| function connect() { | ||
| ws = new WebSocket(ws_url); | ||
| ws.onmessage = onMessage; | ||
| ws.onclose = onClose; | ||
| } | ||
|
|
||
| function onMessage(e) { | ||
| if (e.data === "reload") { | ||
| location.reload(); | ||
| } | ||
| } | ||
|
|
||
| function onClose(e) { | ||
| console.warn("WebSocket disconnected from server. Reconnecting in 10 seconds."); | ||
| setTimeout(connect, 10000) | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.