Phoenix Blog Posts

Async Task Streams with Elixir, a nice blogpost:

https://medium.com/@dinojoaocosta/elixir-findings-asynchronous-task-streams-7f6336227ea

3 Likes

I wrote a couple of Phoenix related posts a couple of months ago but just recently discovered this topic in the forum, so here they are:

2 Likes

A post was split to a new topic: Step-by-Step Tutorial to Build a Phoenix App that Supports User Uploads

Dealing with long-running HTTP Requests and Timeouts in Phoenix

phoenix_timeout

When processing an HTTP request takes too long, it times out and Phoenix closes the connection. In this article we see how to simulate a long-running request and ways on how to fix the problem.

3 Likes

Creating Thumbnails of uploaded Images and PDF in Phoenix

robot_resizing_images

In this article I start from what built in Step-by-Step Tutorial to Build a Phoenix App that Supports User Upload. We see how to integrate ImageMagick and the Mogrify wrapper in the last article Phoenix app, to create thumbnails for image and PDF files.

As always any kind of feedback or question is more than welcome! :purple_heart:

5 Likes

Add a Progress Bar in the Phoenix File Upload app

phoenix_jquery_progressbar

in the previous articles we’ve seen how to build a small Phoenix app that processes user uploads, creating thumbnails for images and PDFs.

The problem with the current app is that nothing is shown during the upload, which is maybe ok while testing the app in localhost (the upload was fast also with big files). But in the real world an upload could last minutes… or even hours.

So in this part we focus on the front-end and see how to use JavaScript to upload a file while animating a progress bar.

At first we see how to add jQuery to our Phoenix app and using it in our JavaScript files. We then see how to use jQuery to upload a file and listen to progress events to update an HTML5 progress bar.

6 Likes

Learn about custom ecto types.
https://invictusbytes.blogspot.com/2019/06/how-to-create-elixir-ecto-custom-type.html

3 Likes

Phoenix LiveView pushState support – Change the URL without refreshing the page

)

t’s now possible to try the LiveView pushState support! Just few days ago Chris McCord (creator of Phoenix) made it available in the LiveView master branch!

But… What is pushState? and why can be useful?

With Phoenix LiveView we can easily update parts of the page without having to change the location, refreshing the page or directly use JavaScript.

But when the page’s content changes, the URL remains the same, making it difficult for a user to bookmark or share the current page state.

The LiveView pushState support solves exactly this - while changing the page content we can now dynamically update the URL without a page refresh.

5 Likes

I started a series about Phoenix Internals a couple of months ago, and just published part two! This one covers routers: https://griffinbyatt.com/2019/06/26/Phoenix-Not-Magic-2.html

4 Likes

Yet another article on working with elixir tasks.

1 Like

Phoenix LiveView live_link

phoenix_liveview_link

A quick article (and screencast) still related to the LiveView pushState. The previous one was mainly focused on live_redirect .

We now see how to refactor the code with live_link getting simpler code and less messages exchanged between LiveView and our browser.

2 Likes

Using Select2 with Phoenix LiveView

featured_image

LiveView doesn’t support JavaScript interop at the moment (but it’s a planned feature), so in this article we see how to come up with a workaround to make LiveView playing together with a JavaScript library like Select2.

We see how to take advantage of phx:update ​ events, which LiveView dispatches every time it updates the DOM. Then we see how to send events to the server using liveSocket.

5 Likes

I’ve had similar issue keeping a JS library component initialized but have been too lazy to figure it out! Thank you for posting!

3 Likes

Hey everyone :blush:

After few busy months, I’m super happy to be back posting content weekly, starting with the first of a series of episodes for who wants to explore Phoenix LiveView and start building real-time web apps.

3 Likes

Hey all,

We’ve been working hard on building trykno.com over the last few months.
As we are built with Elixir it seems sensible that our first integration guide should be for elixir and phoenix.

(I’ve shared this on github because we thought it might need a library but in the end we didn’t build one so the README is simply an integration guide)

4 Likes

Hey!

This episode is focused on LiveView’s primitives, exploring the necessary bricks to build an app with this technology. A special look at what happens behind the scenes, understanding Life-cycle while inspecting websocket messages and DOM updates.

Hope you like it and that can be useful :blush: As always, please let me know if you have any question or feedback!

Alvise

1 Like

A post was split to a new topic: Understanding Phoenix LiveView: build a Gallery app (screencast)

3 Likes

Hi everyone, I was doing some research on how the request and response cycle works in phoenix? After doing lots of research and reading. I have written my own understanding of it. Here’s a link:-

Let me know if I can do some changes and if someone wants to discuss I’m open to that.

Thanks

1 Like

Hi elixir friends!

I’ve just published a quick post about LiveView and JS hooks with Select2. The previous version of this article was using different workarounds since JS hooks were not available. It’s now much easier to use select2 with LiveView.

1 Like