Tag: css

Posted on

React app using create-react-app: webpack and CSS opacity 1% issue

This seems like such an obscure and weirdly random issue, but I’ve come across this issue 3 times now in the past few years.

I’m working on my React frontend app for Sudoku puzzles (which is related to many other past personal projects, which I’ve posted about here).

I have a nested set of grids representing the cells of the puzzle. To support ‘pencil marks’ when working on solving a puzzle, each cell has an overlaid 3×3 grid that displays the grid of current pencil marks. To display this I’m using an opacity of 40% to display them slightly greyed out. See the top left cell here with opacity:40%

Running locally this works as expected. When built and deployed and loaded from a remote server however, the logic for clicking and entering pencil marks works exactly the same, but nothing is displaying in the grid – here I’ve entered a pencil mark of 1 in row 2, col 1:

The HTML clearly shows a value of 1 but nothing is being displayed. If you look at the CSS on the right you’ll see opacity:1%, which is why the value is not visible, but that’s a difficult difference to find when comparing local vs deployed.

This is a known issue with create-react-app based React apps and a specific webpack plugin that optimizes CSS, discussed here.

Instead of using a % value for the opacity, change it to a decimal fraction of 1 instead, so instead of 40% use 0.4.

Posted on

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”
Posted on

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;
  }
Posted on

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).

Proudly powered by WordPress