Writing your first encrypted DB-backed session store with sliding timeout

Image for post
Image for post
Photo by Vadim Morozov on Unsplash.

If you’ve ever caught yourself pushing large encrypted content into the standard Plug.Session.COOKIE store, you may have noticed that hitting the 4096-byte cookie size limit isn't all that difficult. And if that hard limit becomes a deal breaker, next you'd probably be inclined to reach for Plug.Session.ETS which in turn comes with the small gotcha that if your app runs in a distributed environment, now you'll have to deal with syncing ETS tables across nodes - something you may or may not be comfortable with.

In this post, we’ll explore…

Once you have Webpack and Sass set up for your Phoenix 1.3 project, replacing Bootstrap with Semantic UI is a breeze.

If you prefer Brunch to Webpack, see this article.

Step 1: Add jQuery

$ cd assets
$ yarn add jquery

Next, automatically load jQuery inside webpack.config.js:

const providePlugin = new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"

Find the plugins entry in your Webpack config and add providePlugin there.

If you want jQuery to be available in your browser’s dev console, also edit app.js:

window.$ = window.jQuery = jQuery;

Example commit

Step 2: Add Semantic UI

Assuming you’re in project root:

$ cd assets $ yarn add…

Whether or not your motivation for adding Webpack to Phoenix has to do with React, I’ve found Webpacker project template to be one of the easiest ways to get started. You can clone the repo as such or hand pick the interesting bits as we do in the following.

Step 1: New Phoenix Project

$ mix phx.new my_app

Step 2: Copy Webpacker Files

Remove brunch-config.js and copy files from Webpacker GitHub repo. At the time of writing, the files and folders to copy are:


Example commit

Step 3: Edit package.json

Replace Brunch related scripts with these:

"scripts": { "start": "npm run watch", "watch": "MIX_ENV=dev webpack-dev-server --inline --hot --stdin --colors…

First steps

Image for post
Image for post
Photo by Rucksack Magazine on Unsplash

Until recently, I had somehow managed to overlook Ebert, a code review service that supports a bunch of languages including Elixir. As I’ve since made Ebert part of my workflow, I thought I’d share some initial impressions and show how to run the same linters locally.

After you’ve set up Ebert for your repo, there’s a button on the review page that says ”Download the configuration file”. This default config might be all you need but just for reference, here’s the .ebert.yml that I’m currently using for new Phoenix projects:

engines: credo: enabled: true fixme: enabled: true eslint: enabled: true…

The inherent problem with code linting is that it tends to happen after the fact, whereas in my opinion it’s better to auto-format code already while it’s being written. With this grand philosophy in mind, I decided to install JsPrettier for Sublime Text and have it reformat my JavaScript every time I hit Cmd-S (or Ctrl-S).

Step 1: Install Prettier

$ yarn global add prettier

Step 2: Install JsPrettier

Open Sublime Text and using Package Control, type Install Package and then JsPrettier.

Step 3: Edit JsPrettier Settings

Select Preferences > Package Settings > JsPrettier > Settings - User to edit JsPrettier.sublime-settings. My config looks like this:

{ "auto_format_on_save": true, "auto_format_on_save_excludes": [ "*/node_modules/*", "*.scss"…

Sometimes adding Semantic UI as minified CSS is all you need for your Phoenix project. And for the times you want more fine-grained control over which modules to include, there’s Semantic UI Sass. Here’s how to get started with Phoenix 1.3 and Brunch.

Step 1: New Phoenix Project

$ mix phx.new my_app

Step 2: Add jQuery and Sass

$ cd assets
$ yarn add jquery
$ yarn add --dev sass-brunch

You can of course replace Yarn commands with NPM equivalents if you’d like.

Next, add jQuery as a global inside brunch-config.js:

npm: {
globals: {
$: "jquery",
jQuery: "jquery"

Example commit

Step 3: Add Semantic UI

Assuming you’re in project root:

$ cd assets…

If you had to name the libraries you rarely start an Elixir project without, what would those be? Personally, the top of my list is reserved for security scanners and code analyzers that gently but firmly push me to write better code. Without further ado, here’s three of them.


Have Credo analyze your code for style issues by typing:

$ mix credo

To create a per-project .credo.exs config file, type:

$ mix credo gen.config

Hint: For your open-source projects, you may also want to check out Codebeat. (At the time of writing, CodeClimate doesn’t seem to support Elixir.)


If you…

Kim Lindholm

Caveat lector

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store