How to Inspect and Design Transitions – Pause/Stop Requests with Fiddler

Designing user-friendly applications often involves creating tranisitions between two states. For example after hitting the save button you want to show feedback (a loading overlay with a spinner),  so that the user knows your app is actually doing something – processing and saving the data.

design and layout transitional elements, interactions, loading overlay by pausing the loading of a page

Here is an example where communicate that we are saving the Premium settings in discoverize – the html of the overlay is being appended by javascript.

Because these transitional elements are only on screen while the transition takes places it is hard for a frontend designer to design and layout the elements show during the transition. If they are only being hidden with css properties you could make the elements visible with help of firebug or any other browser developer tool or inspector.

However if these elements are loaded/appended by javascript and removed after the transition has finished it is almost impossible to inspect and adjust them.

How to Stop or Pause a Request with Fiddler Filters Break for Inspection

There is an easy way to pause or stop your request: Fiddler filters.


Fiddler is a free desktop web debugging tool by telerik. It allows you to analyse traffic of your web app or website.

Here is how you set a breakpoint on POST to interrupt the request:

pause or stop a request with breakpoint on POST in Fiddler - to design and layout transitions in web apps

  1. Open Fiddler
  2. Navigate to the “Filter” Tab
  3. Turn on the checkbox “Use Filters
  4. Go down to “Breakpoints” and turn on the checkbox “Break request on POST

Done. Now, in your web app, as soon as you press the save button (or equivalent interaction) fiddler stops/pauses the request. In our case the loading overlay is being shown permanently.

You can layout and design the transitional elements as you are used to with firebug and so on.

Once you are done you can either resume the request by pressing “Go” (top left) in Fiddler or simply turn off the breakpoint or filter.

Thanks to Oliver for showing me this tip 🙂

How to Stay Sane and Productive and Up-to-date as a Digital Worker – Manage Incoming Information

Being productive is key to being a web and ux designer or any person working on the web.

One part of productivity is knowing where to find the information you need when you need it.

Another part is keeping up with new developments in your trade, constantly learning and improving.

However, I believe the most important part to being productive is actually getting back to work and getting things done: designing web sites, building web apps, publishing content.

Many Opportunities to Learn and Improve your Skills

As a passionate frontend developer or ux designer for that matter you get bombarded with more information than you can possibly handle, let alone use productively. If you just try to stay up to date with developments in your field of expertise, you follow leading blogs, important people on twitter and signed up for a couple of newsletters.

Every day you get dozens if not hundreds ideas for improving your workflow, speeding up production or trying something completely new:

  • Sass for smarter css development
  • Grunt and Gulp for automation
  • flexbox for more complex layouts

And if you are building a product you have to learn even more stuff:

  • marketing and sales
  • support and customer satisfaction
  • pricing and business models

So basically, your inbox, rss reader, twitter is overflowing.

“Getting Things Done” Rescues Your Sanity and Creativity

If you have read the enourmously popular “Getting Things Done” by David Allen, you know that a major key for being productive is a well structured system for managing incoming stuff.

Simply put, Allen suggests that you sort all incoming stuff into clearly predefined buckets. For the purpose of this post I am only going to focus on 3 buckets:

  • actions: things I should do next
  • someday maybe: things I might consider doing sometime in the future
  • reference: information I might need later

The crucial step to staying creative and sane is to keep your head free from todos, mental notes, reminders - so that you can actually focus on the work at hand. This may even apply more to designers then to other digital workers, because designing is about coming up with many solutions to a problem. And more mental space you have, the more ideas you will generate.

Tools That Help Me Stay a Productive Designer

Diigo for Maybe Later and Reference Information

A lot of information is nice to know, however does not  change your current course of action. But you might need it at some point in time - so it would be great if you could find it later quickly.

Examples for reference information might be:

  • a blog post on how to create circle icons with css
  • a guide how to build your own html emails
  • a video on how to run a facebook ad campaign for your product

All these things are currently not relevant to your actions, because you currently don’t work on them. But you think, they might prove useful to you in the future. And you already know that you can trust the source - which in most cases beats a new google search on the topic.

diigo logo - bookmarking productivity tool

So I save them in diigo. Diigo is basically an online bookmarking tool. You can save links and access them in your account from any device later. I just recently switched to diigo from delicious, because it is a lot faster and easier to use:

  • You can install the diigo add-on in any browser to save a web page with a click of a button (I simply click ctrl + d) - the diigo popup opens
  • I add some tags (for example to associate the post with a project of mine) to find the ressource later hit save and I am done

using diigo for reference bookmarking with firefox addon

I know the information is securly saved and I don’t need to worry about finding it again.

So I can get back to work.

Pocket for Actions and Maybe Later

If I get across a blogpost that I think will change the way I work or approach things, I will actually want to read it sooner than later.

Examples might be:

  • a blog post about improving your sass compiling time by switching from grunt to gulp
  • an article on how to auto-reload your web page across devices during development with browser sync
  • a guide how to improve your blog post writing by chosing better headlines

The difference to the reference information is crucial: These posts help me improve my work right now. Because:

  • I am using sass and it’s slow to compile
  • I loose time waiting for my browser to reload while designing web apps
  • I would love to improve the readibility of my posts 🙂

However I cannot stop the work I am currently doing just to implement these ideas. So I need a place to store them for later completion.

pocket logo - bookmarking productivity tool

Pocket to the rescue: Pocket is also an online bookmarking tool - however offers a better read-later experience - which is perfect for actionable information.

With a simple click of a button you save a page to pocket:

using pocket to save posts for later read

Because I don’t store these posts for reference but want to act on them, I do not add any tags here. I am going to get them sooner or later.

The next step is simple: Whenever I have a moment spare time or energy avaible to try something new, I fire up the pocket app and simply pick a post from my list and read it or implement it. I either pick the first post or if I am not into just scroll to the first thing that catches my eye:

my pocket reading list - simple productivity

Another great thing about pocket is the great reading user experience: It let’s you completely focus on the content - no distractions, no ads, no navigation, no newsletter popups:

pocket reading view - focus on the stuff you want to learn

I especially enjoy the reading experience on my smartphone with the pocket app. The content always looks good, sharing and saving new links is easy and let’s you get back to the article quickly.

With Pocket I have completely changed my blog reading habits: I don’t have dozens of tabs open with blog posts that nag at me for not reading them for weeks. And even though my list in pocket is growing every day, it does not bother me, because I know I will get to it if I have the time for it.

Clearing Your Mind and your Workspace to Stay Productive

Which brings us back to Getting Things Done: Using diigo and pocket gives me the peace of mind to organize incoming stuff where it belongs and getting back to doing actual work.

As David Allen best put it:

Your Mind is for having ideas, not holding them.

Try the tools: and