Understanding website paywall approaches

Subscription paywalls are becoming more and more common on a number of news and other sites. Assuming that the sites are using JavaScript and/or CSS approaches in the page to popup floating DIVs obscuring the content of the page, these are surprisingly easy to bypass if you know what to look for.

There’s many other articles (e.g. here) discussing these approaches and this is not intended to be an exclusive list, but here’s a few useful observations:

  • Adding a trailing ‘.’ to the domain name works on a surprising number of sites (Google if you’re interested why this works)
  • If you’ve tried this and you’re still getting a popup obscuring content on the page, using your browser’s developer tools, use the ‘select element’ feature to click on a floating DIV in the page and then update the CSS to style=”display:none” is also effective. If there’s other script in the place which is adding the CSS to the DIV, right click the DIV and just select the delete element option also works
  • Some sites use a combination of approaches. Often script or CSS to disable scrolling the page underneath a floating DIV is also used, so if you’ve removed the DIV but now you can’t scroll the content, look at the style on the body. If there’s an “overflow:hidden” style, remove it, or change it to “overflow:auto”

CSS styling alternating items, rows or columns using nth-child

The nth-child CSS psuedoclass allows you to apply a style to child elements in lists, such as <li> items or table <tr> rows or <td> cells.

I’ve been working on a React frontend client to a Sudoku puzzle solver which is deployed as am AWS Lambda. It’s easy to build a table of <input> fields, but how can you styles that alternate only every 3 elements?

nth-child is perfect for this. First, you can specify the repeating style every nth element, starting with a thick border every 3 <td> cells : nth-child(3n):

/* right border for every 3rd td */
.sudoku-grid tbody tr td:nth-child(3n){
border-right: 3px solid;
}

This results in this:


To handle the first column, you can apply a style to a specific element only, with:

/* set 1st column left border */
.sudoku-grid tbody tr td:nth-child(1){
border-left: 3px solid;
}

This gives:

Now similarly for the <tr> rows, every 3rd row:

 /* bottom border for every 3rd tr row */
.sudoku-grid tbody tr:nth-child(3n){
border-bottom: 3px solid;
}

And 1st row, now we’re done!

/* top border for first row */
.sudoku-grid tbody tr:nth-child(1){
border-top: 3px solid;
}

Bootstrap dropdown nav menus not working? (and solution)

It’s not immediately obvious unless you’ve run into this before, but the dropdown nav menu feature of Bootstrap requires both jQuery and the bootstrap.js includes. Maybe because I normally don’t use any of the JavaScript features of Bootstrap I haven’t run into this before. It is covered in the install docs here as a requirement, but maybe I’ve not noticed this before. It must be a common issue though, here’s a question on SO.

If you leave out either of these the menu renders as expected but the dropdown doesn’t do anything. Here’s a plunkr with both .js files included as a working example (example HTML from the example here).

Fixing JSF Radio Button layout when using Twitter Bootstrap

Twitter Bootstrap adds ‘display:block’ to labels by default, which oddly affects the way radio buttons are displayed if renderd using JSF – the label drops down to the next line.

To work around this, add a class using styleClass to the <h:selectOneRadio> tag, and then use some additional CSS to set display back to ‘inline’ for labels within an element using the class you used on the selectOneRadio tag.

Here’s some example CSS:

.inlineRadioButtons {
}

.inlineRadioButtons label {
    display: inline;
}

And here’s it used on some JSF generating radio buttons:

<h:form>
    <h:panelGrid columns="2">
    <h:outputText value="Color:" />
    <h:selectOneRadio value="#{testBean.selectedColor}"
        styleClass="inlineRadioButtons">
        <f:selectItems value="#{testBean.colors}" var="#{item}"
            itemValue="#{item}" itemLabel="#{item.desc}"></f:selectItems>
    </h:selectOneRadio>
    </h:panelGrid>
    <h:commandButton action="#{testBean.save}" value="Save" styleClass="btn btn-primary"/>
</h:form>