Changelog

v12.1.0

Enhancements

• Add MacPorts SDK locations to README.
• Add support for ** operator to lexer and parser.
• Color settings for each sigil name. Both the interpolating (lower case) and literal (upper case) name use the same settings.
• Add support for stepped ranges

Bug Fixes

• Decompile {:|, …, …} as cons operator in Elixir Dbgi.
• Fix missing guards when decompiling Elixr DbgI clauses using special decompiler Guards where missing because only decompiler.appendSignature was used.
• Fix module.Reference.calculateDefaultRangeInElement element.textOffset instead of element.textLength was used for end of range.
• Render OtpErlangExternalFun correctly as remote captures (&Mod.fun/arity). Fixes decompiling Ecto.Changeset.validate_number.
• Protect ExUnit configuration Producer from ElixirFile without VirtualFile.
• Unquote.treeWalkUp no longer assumes that the final argument to unquote is a Call.
• Fix Find Usages for call definitions
  • Don’t resolve primary Find Usages element. The primary element passed to FindUsageHandler is now already resolved, so resolving it again for call definitions finds usages of def, defmacro, etc.
  • Since the element passed to FindUsagesProvider#canFindUsageFor, definers can no longer be excluded, so remove that check.
• Don’t highlight Quote or Sigil as normal text if part of documentation. Since the annotators will run in arbitrary order, the Textual annotator has to avoid annotating the same nodes as the ModuleAttribute annotator or the colors can get interleaved.
• Put ENTRANCE and Initial Visited Element in __module__.Resolver.
• Keep searching when resolving type parameters if bitstring is encountered.
• Fix UnaliasedName.unaliasedName for atoms.
• Restore ElixirAtom#getName Lost when parser was regenerated when Elixir <= 1.6 support was dropped in 679a9689cfe097018b9baa4e894d4550a84d7aac.

Installation Instructions

A quick reminder that using a meaningful key (eg. a module name instead of an arbitrary atom) to store configuration in Elixir is quite simple and often leads to more maintainable code.

https://craft.mirego.com/2022-01-06-meaningful-config-keys-in-elixir-projects

On your LiveView page, you are using a custom component. You want to be able to pass HTML attributes into the component, but the component doesn’t know anything about the attributes being passed! You need a way to pass arbitrary attributes through and get them where you want them.

https://fly.io/phoenix-files/passing-unknown-attributes-into-component/

The latest episode of the Elixir Wizards podcast released this morning! Check it out: https://smartlogic.io/podcast/elixir-wizards/s7e8-magwa/

The latest episode of the Elixir Wizards podcast released this morning! Check it out: https://smartlogic.io/podcast/elixir-wizards/s7e8-magwa/

I published a new Elixir book:

100 Elixir Tips

Get it for free here

Enjoy!

Many applications introduce some kind of status to make it easier to share data.

However, more and more modules in your codebase need to be explicit about these assumptions. Views can eliminate the problematic SQL query. It’s also great way to introduce well-defined entities.

https://bartoszgorka.com/view-as-way-to-eliminate-problematic-queries

You are storing some LiveView state in the browser. You want to retrieve that saved state as early as possible to improve the user experience.

The approach we used earlier waits for the LiveView to request the client to send the data. In your situation, you know you want the data, so why wait around to be asked for it? Can you have it automatically pushed from the client without being requested? Can you do it in a way that is reusable for other pages and other LiveViews and not just this one page?

This recipe improves the design and even makes it work for multiple LiveViews in the same application!

https://fly.io/phoenix-files/restore-liveview-state-on-startup/

In episode 80 of Thinking Elixir, we talk with Boris Kuznetsov to learn about the Waffle library and how it is used to attach images, video, and audio to your Ecto records while also processing the attachments for thumbnails, encodings, and more. We learn about the history of the project having forked from Arc, which is no longer maintained. We cover the challenges of supporting and maintaining a library created as a fork. We talk about Second System Syndrome and the desire we often feel that it would be easier to just start over. All this and more!

https://podcast.thinkingelixir.com/80

We introduced a new Dockerfile and CI config that uses Elixir releases and it cut our image build times by 60-70%!

https://gitlab.com/mythic-insight/legendary

Elasticlunr is a small, full-text search library for use in the Elixir environment. It indexes JSON documents and provides a friendly search interface to retrieve documents.

The library is built for web applications that do not require the deployment complexities of popular search engines while taking advantage of the Beam capabilities.

Read more: https://atandarash.me/blog/introduction-to-elasticlunr

Heyplay is a game creation platform powered by Phoenix coupled with Node and Rust — an ultimate web development stack that deploys in seconds thanks to using Docker multi-staging to the fullest. Here’s the secret sauce plus extra hints for those into Tailwind or Umbrellas.

Read more on the Cloudless Studio blog.

just a suggestion on how to handle map types in Phoenix forms https://blog.jasonkaniekete.fr/how-to-handle-map-type-in-a-phoenix-form/

This post was for a long time on “ready to publish” list, but finally I managed to do it. Here I try to describe all the features and capabilities of current Logger implementation that is backed by the Erlang logger.

https://hauleth.dev/post/log-all-the-things/

Enjoy

This project is scaffold bulma and tailwind boilerplate code to project Elixir Phoenix ~> 1.6 that now uses esbuild.

• Bulma test here!
• Tailwind test here!

Thanks to fly.io

Running

To start your Phoenix server:

• Install dependencies with mix deps.get
• Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

Testing

• Enter localhost:4000/ to bulmacss and admin template.
• Enter localhost:4000/tailwind to tailwindcss admin template.

Production

Ready to run in production? Please check our deployment guides.

NOW => How this project was made :D

• Creating mix phx.new phx_scaffold_bulma_tailwind –live –no-ecto
• Install and configure dart_css.
• Install and configure bulma.
• Install and configure tailwind
• Configure mix.exs
• Configure dev.exs

Follow complete steps:

1. Creating Phoenix 1.6 LiveView project

mix phx.new phx_scaffold_bulma_tailwind --live --no-ecto

2. Install dart_css

Follow instructions here.

3. Install bulma

npm i -D --prefix assets bulma

Import bulma.sass file into css/app.scss with:

@import "../node_modules/bulma/bulma.sass";

4. Install tailwindcss

npm i -D --prefix assets tailwindcss autoprefixer postcss postcss-loader

Create file assets/tailwind.config.js with:

module.exports = {
  content: [
    "../lib/**/*.html.eex",
    "../lib/**/*.html.leex",
    "../lib/**/*.html.heex",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create file assets/postcss.config.js with:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}

Create file assets/css/tailwind.css with:

/* This file is for your main application CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import css/tailwind.css into assets/css/app.scss after css styles:

Here is last line of the file

@import "./tailwind.css";

Configure mix.exs into function aliases with:

  #     $ mix setup
  #
  # See the documentation for `Mix` for more info on aliases.
  defp aliases do
    [
      setup: ["deps.get"],
      "assets.deploy": [
         "cmd npm --prefix assets install",
        "tailwindcss --postcss --minify --input=css/tailwind.css --output=../priv/static/assets/tailwind.css",
        "esbuild default --minify",
        "sass default --no-source-map --style=compressed",
        "phx.digest"
      ]
    ]
  end

Configure dev.exs into watchers with npx instructions:

# For development, we disable any cache and enable
# debugging and code reloading.
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with esbuild to bundle .js and .css sources.
config :fvideen_platform, FvideenPlatformWeb.Endpoint,
  # Binding to loopback ipv4 address prevents access from other machines.
  # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
  http: [ip: {127, 0, 0, 1}, port: 4000],
  check_origin: false,
  code_reloader: true,
  debug_errors: true,
  secret_key_base: "q8icUmJfcHI8LF9Ajh+WKBaIXlxER5k7Hdwu845pJO45MBjL8eg5bJ8o9cJyverv",
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    npx: [
      "tailwindcss",
      "--input=css/tailwind.css",
      "--output=../priv/static/assets/tailwind.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ],
    esbuild: {
      Esbuild, 
      :install_and_run, 
      [:default, ~w(--sourcemap=inline --watch)]
    },
    sass: {
      DartSass,
      :install_and_run,
      [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]}
  ]

Understanding exactly what SQL commands are running is helpful to ensure safe migrations. By default, Ecto does not log the raw SQL. However, we can change it.

Check more on: https://bartoszgorka.com/log-sql-generated-by-ecto-migration

In episode 79 of Thinking Elixir, we talk with Nathan Willson about GEMS, his collaborative music generator written in LiveView. He explains how it’s built, the JS sound library integrations, what could be done by Phoenix and what is done in the browser. Nathan shares how he deployed it globally to 10 regions using Fly.io. We go over some of the challenges he overcame creating an audio focused web application. It’s a fun open-source project that pushes the boundaries of what we think LiveView apps can do!

https://podcast.thinkingelixir.com/79

Based on Phoenix Framework and Phoenix LiveView, opensourse platform Bonfire social network got awarded from the European Cultural foundation https://bonfirenetworks.org/posts/bonfire_cos/

👋🏼Here’s part six of the Building a simple Calendly clone with Phoenix LiveView series, in which we will start managing event types.

https://bigardone.dev/blog/2021/12/20/building-a-simple-calendly-clone-with-phoenix-live-view-pt-6

Happy coding!

Just published a mix format plugin for json. It works with jason sigils (v1.3+) and json file extension. https://hex.pm/packages/json_formatter

Suggestions are very welcome.