Houen's Blog

Thoughts on life, startups, tech & code

Turn off javascript in Google Chrome DevTools (1 min read)

When testing and debugging, I often need to see how a web page looks like and behaves with Javascript / JS turned off. Luckily it is easy to turn off javascript in Google Chrome DevTools.

Step 1: Open Google Chrome DevTools

Either right click any element and choose “Inspect”, or use a keyboard shortcut (Mac/OSX: Cmd + Option + J, Windows: Ctrl + Alt + J)

You will see something like this bar:

Open Chrome DevTools

Step 2: Open the Run command box

Use keyboard shortcut:

Mac / OSX: Cmd + Shift + P

Windows: Ctrl + Shift + P

You should now see this:

Open Chrome run command box

Step 3: Turn off Javascript

Start typing “Javascript” in the run cmd box. After a bit of the word, you will see the option “Disable Javascript” to turn it off, or “Enable Javascript” to turn it back on. Select it with the keyboard or mouse, and you are done. Javascript is now turned off in Google Chrome

Turn off Javascript with Chrome Run command

Step 4: Turn Javascript back on

Complete steps 1-3 and choose “Enable Javascript” to revert to normal:

Turn Javascript back on

There. With this post, I will never forget how to turn off javascript in Chrome again.

If you liked this post, also check out more Chrome keyboard shortcuts or more on the Run Command menu. Who likes doing extra work after all?

Capybara finding and Selecting hidden elements and text

Finding hidden elements

After upgrading an older version of the Capybara gem to something a bit more modern, you may come across a lot of errors regarding finding hidden elements and hidden text, like this:

Capybara::ElementNotFound: Unable to find visible css ...

The error above is because Capybara by default no longer “sees” hidden elements. Hidden elements can be many things. Most common are content hidden by CSS and content out of the current viewport (screen).

Tell Capybara to look for hidden elements as well

To fix it, you must add visible: false or visible: :all to your test code.




find('span', visible: false)

The same goes for other selectors such as all and first. Now Capybara will be able to find the element. However, calling .text may simply produce nil on the element.

Capybara still cannot see the text

There is a particularly annoying addition to the above: In order for Capybara to find and select the hidden text of the hidden elements, you can no longer simply do .text. You have to instead do .text(:all), as described in the Capybara docs here.

Finding and selecting hidden text

So now our final Capybara text selector becomes:

sometext = find('span', visible: false).text(:all)

That is all that is required. As a final comment, please note that you can also have Capybara work like it used to and “see” hidden elements and hidden text by default:


I generally tend to avoid this option, though, since it is not recommended by the author / contributors. This argument may sound silly, but since it is not recommended, they are going to be coding in a different direction in the future. This might lead to difficulty down the line. Better to just get it done with now.

And it can be done.

I have upgrade several Ruby / Rails projects where the LOC (lines of code) of the app/ folder was 35000+ and while fixing capybaras use of hidden text is tedious work, it can generally be completed within a working day or two.

Happy coding!

Finding and selecting hidden elements and text with Capybara

The day you became less stressed at work

I have found a work system that helps me relax. It helps me focus my brain on energising and fun things. My brain has no worry about remembering tasks. It is free to focus on fun and creative thoughts.

Passively I have been simplifying and evolving the system all my work life. I will try to tell you about the system as I use it today. This way you can hopefully jump right into being less stressed and more productive, starting tomorrow.

Note: I will spend some time here trying to convince you why you should have a system. If you are already convinced, scroll to “The System” below.

Why a system?

  • Your brain has a finite amount of computing power.
  • Everything you need to remember uses up this power.
  • The more power you can use on interesting tasks, the more real progress you can make.
  • Things can get complicated at work. The first thing to go the way of the mammoth is your overview. This is when you need a good, simple system.

If you are anything like me:

  • Remembering everything that comes in at work is tasking. (Most for managers, but also as a developer)
  • You spend too much energy actively remembering things you must not forget.
  • You stress about important things you have to remember to do.

Even if you are not like me, this is true for everyone:

  • Things often come up that must be handled later, but you are in the middle of something else.
    Coding maybe? Maybe you are in “the zone”.
    Maybe it is imperative that you do not switch focus constantly.

A good work system can help with all of the above. In my system, it takes me 5 seconds to be sure I do not forget a task. No matter how important a task is.

This way, even if a task is very important, I can continue whatever I was doing without wasting time switching tasks.

But we use Jira / Trello / Taiga / Kanban / Scrum already?

Awesome! But those are team systems. You need a system that is private only to you, where:

  • You do not need to care what your boss / coworkers / HR thinks about what you write.
  • You are limited to only the important things.
  • You are not distracted by other peoples tasks or ideas.
  • You can put a task in so fast there is no reason not to. This goal is key.

Many people use no system

I see many developers working in tech startups not using any system for managing their personal work. This can work very well, but I believe with a good system they could be doing even better. I have been using mine for the last decade. It has served me very well. I am writing this post to suggest you to give it a try.

The system has proven versatile

My system has evolved through my different roles. While evolving, it has also stayed much the same. It has served me well as junior developer, senior developer, team lead, CTO and freelance contractor.

The system is deceptively simple

Prepare to be underwhelmed. My system is insanely simple. That does not mean it is not valuable.

The system

Here it is. It is just a piece of paper. The power lies in the checkboxes.


The checkboxes

I currently use four kinds.

The empty checkbox

This is a task I should remember to take care of today. Taking care of a task means one of four things:

A started task: “The Dot”

This is a task I have started. I am actively working on this task today.

A deferred task: “The Arrow”.

This is a task I needed to defer until tomorrow. Either it took too long, or better things to do came up.

A completed task: “The Check Mark”.

This is the most satisfying. The task has been completed, and I have moved on to other things.

A dropped task: “The X”.

The task was for some reason either not doable, or not needed. I currently do not plan to  revisit this task.

How I use my system

The weekly routine

I keep all my today lists in a bundle with a paperclip. This way I can always easily see what I did this week, and compare with what I need to do today.

Daily Standup

If you are not a software developer and/or have not heard of daily standups: It is a system where a team meets every day. Most commonly it consists of the following:

  • What did I do yesterday?
  • What will I do today?
  • Am I currently blocked by anything?
  • Do I need help from other team members?

Between when I come in to work and we have our daily standup, I fill in my tasks for the day. At standup I use the task list from the last day as a reminder of what I did and how it went. If anything comes up during standup that I need to take care of, I add it to my list immediately. 5 seconds, remember?

The daily cycle

  • I start by reviewing last days paper. Things to defer to today, I copy to todays paper, and mark with the Arrow. Otherwise they get the X. Or the Check Mark if it is completed.
  • Now pick a task based on the fun / benefit of doing. Mark it with The Dot. Work on it.
  • Switch to something else. Mark that. Work on it. Come back to the original task
  • End it. Mark it with The Check Mark, The Arrow, or The X.
  • Workday is over. Leave paper. Come back tomorrow.

A small side note; I use “next day” instead of “tomorrow”, since on Monday, I review the paper from Friday. Once the Friday paper has been reviewed, I archive or trash the notes from the previous week. Normally I archive them. They will help me if I need to remember something. As I am currently freelancing, they also help with my CV / Resumé.

The emotional boost

I get satisfaction from checking the boxes completed during the day. When it is done I can look at the check marks and think: “I did well today.” This emotional boost should not be underestimated.


There you have it. This is my system for keeping track of my daily tasks, and keeping my head clear. I know it can seem trivial. It is a small change, with a big impact. For me it has made a huge difference. I can focus on what I am doing without worrying about what I need to do next. I can more easily achieve “flow”.

Parsley bootstrap form validation in Rails 3

Hi there

Parsley bootstrap form validation in Rails 3

        // basic data-api overridable properties here..                                       
        inputs: 'input, textarea, select'                                                     
        , excluded: 'input[type=hidden]'                                                      
        , trigger: false                                                                      
        , focus: 'first'                                                                      
        , validationMinlength: 3                                                              
        , successClass: 'success'                                                             
        , errorClass: 'error'                                                                 
        , validators: {}                                                                      
        , messages: {}                                                                        

        //some quite advanced configuration here..                                            
        , validateIfUnchanged: false                                                          
        , errors: {                     // specify where parsley error-success classes are set
        classHandler: function (el) {                                                         
            return jQuery(el).closest('.control-group');                                      
        , container: function ( elem, isRadioOrCheckbox ) {}                                  
        , errorsWrapper: ''                                                      
        , errorElem: '

‘ } , listeners: { onFieldValidate: function ( elem, ParsleyField ) { return false; } , onFormSubmit: function ( isFormValid, event, ParsleyForm ) {} , onFieldError: function ( elem, constraints, ParsleyField ) {} , onFieldSuccess: function ( elem, constraints, ParsleyField ) {} } } );

Git large rebase made simple, easy and painless

Git clutter

The large Git rebase

At my work we use a simple and clean workflow, for getting our code into production. We use Pull Requests for our branches, and rebase them so our history is nice and tight. This works very well 95% of the time. Branches are sufficiently small, turnaround is fast, and we have no problems. But, sometimes we still end up with something less than ideal. Luckily there is a nifty way of doing this. (more…)

Easy way to copy one git branch to another local branch

At my work we use a couple of branches for deployment with CodeShip. When we push one of our ‘build’ branches, Codeship automatically starts a new build on it, and deploys if all tests pass. One of these is our QA branch. For this reason it is beneficial for us to have a quick workflow to make one of these branches behave like a dev branch we want to test-deploy. I think I have now found the easiest, fastest Git command for doing so: (more…)

Get email about new posts

Get the latest posts delivered to your mailbox: