Recap – storing state in a browser for users

I’ve been working on some static sites recently, and I needed to show some content to someone, but allow it to be dismissed easily, and then stay dismissed. This is much a note to future me as anyone else, but hopefully it’ll be helpful to some other soul on the net.

Doing this with frameworks like django or rails

When I’m working with a full dynamic site, how you do this is usually hidden from you using a handy data structure in the language that your framework is written in.

For example, in django you often have a handy session object available, which works like a dictionary you can get and set data on. Let’s say you have a blog, and you want to set some state on the user, to mark that they’ve commented on on a post you’ve written.

In some view code handling a get request, you might set a value on the session like so:

request.session['has_commented'] = True

Then, later on you could check for this by calling get on the session object:

if request.session.get('has_commented', False):
        return HttpResponse("You've already commented.")

Python also has a native cookie library that does a similar job, of storing state on a client browser, and sparing you the gory details.

This is very handy, but when when you’re working with a static site, you don’t have the server there to wrap all of it in some tasty syntactic sugar.

If like me, you’ve had it abstracted away from you most of the time, it might be useful to know your options.

Your options if you need to do it yourself

If you want to keep data on the client

Right now, if you want to store state just on the client you have two popular options: local storage, and session storage. In both cases you use javascript to write values, with an api that looks a bit like so:

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

The main difference between localstorage and session storage is that session storage is automatically expired at the when you close a tab. By comparison, local storage persists, so you can visit a page, set some data, close it, and assuming you haven’t set a super short expiry date, access it again the following day  from the same browser.

You can’t access this from a server though it never leaves the browser.

If you want to be able to access the data on the server

If you do want data to persist for more than one session, and you want to be able to read this information on the server side (like the example the django example above), then cookies are a better fit. They work at the HTTP level, so they’re really sent as extra headers when you send HTTP requests to a server somewhere. Mozilla’s docs are fantastic if you want to learn more about what’s really happening under the hood.

You might want to have a similar API to the session and local storage APIs, to keep them easy to remember, so you can use javasscript to set data on a user’s client browser like so:

// set a value as cookie
docCookies.setItem(name, value)

// get saved value from the cookies
docCookies.getItem(name)

If you want this, then you want to look at the nice cookies.js library, that wraps it up in some nice synatactic sugar, and save you remember esoteric invokations, just to set some basic data on a client.

Just remember, you can’t set much data with cookies compared local storage or session storage.

Obviously if you’re sending data back and forth between a browser and server, there are privacy implications and in the EU, you should to inform users how you’re using cookies, to get consent before you start tracking your users. Again the MDN docs are a good concise starting point, if you need a reminder.

 

 

This is not news but Mozilla’s Developer Docs site is fantastic

I recently was trying to debug why some snazzy passwordless sign-in flow wasn’t working on Firefox for me, when it worked just fine on Chrome, and investigation lead to me reading up on CORS (Cross Origin Resource Sharing), a way to share access to resources (like images, js files and so on) across domains.

I’m really impressed by the writing, and something I thought I knew, I came away learning loads more about.

Good stuff.

How to search better with Atom

I’ve been using Atom as my text editor for longer than any other text editor now, after using Textmate, Sublime Text, and Vim for a couple of years each. In this post, I show a little tip I’ve discovered to help make searching more powerful.

Using Atom?

I like using Atom as an editor.

It’s free, open source, polished, under constant development in the open with a well funded team, and on the whole, I agree with Alex Payne’s post about the flight to old text editors feeling like mis-step.

It’s easy enough to start with, and can adapt to work well with many, many languages. It’s what I’d recommend to most people learning to code too.

However, because it isn’t a full IDE, you do need to know how to use the search tools to get the most from it.

Searching for things that match one pattern, but not another

As the wonderful flight manual from Atom editor describes in more detail, you can search in within files, and search within projects easily, by hitting cmd+F to search in a file, and cmd+shift+F to search across your project.

This is nice, and it’s common to search for a pattern like some_function  or some class like Page in your existing project.

This example here shows a personal site I used to run, searching for mentions of Page in an django project:

Screen Shot 2017-05-11 at 22.13.25.png
I’m getting all kinds of maches, including ones in files I don’t want

However, lets say you’re working on an app, where you’re sure you don’t want to look in some kinds of files that also end in .py. This might be some migration files, which are written in python, but you know you won’t want to look in them for code that controls how an application works right now. To filter out all the migration files, you can and a second negated pattern, by adding the bang/exclamation mark instead, like so:

Screen Shot 2017-05-11 at 22.13.47.png
That’s more like it, no migration files in the search results. Huzzah!

This is, really, really handy when working with javascript projects, and huge node_modules directories. More here in this forum thread on discuss.atom.io.

Searching across files you normally want to ignore in a project

The other handy trick I’ve started using a fair amount of late, and especially since I started writing in javascript and python more is toggling the search behaviour between to ignore the files that you have told git to ignore with a .gitignore file, and including them when you’re trying to understand where a given bit of code came from.

You can do this the quick and dirty way by opening up Atom’s config file here:

Screen Shot 2017-05-11 at 22.25.08.png

And in the config.cson file that’s presented ​to you, making sure you have this property set to either true or false:

“*”:
core:
excludeVcsIgnoredPaths: true

If you have this set to true, you’ll have faster searching of just the files and folders you have decided to ignore with your gitignore file. But if you do need to search for something in something like a node_modules folder in javascript, in a virtual environment in Python, you can toggle this by setting this value to true or false.

I only really discovered these this year, and it’s not something I new how to do before, and I figured Atom others might find it useful too.

Hope it helps, and happy searching! If you use Atom, and there are any other gems like this, feel free to add a comment below.