NotOneBit Blog

Get started today on your next web project with NotOneBit
We've been doing web development before you were born *

CSS calc()’s Annoying Space

If you’ve ever tried to use the CSS calc() function only to fail to see anything change, make sure you have your code properly spaced when using plus or minus.

For example, this fails:

calc(100%-50px)

But this will work:

calc(100% - 50px)

The white space around the minus sign is REQUIRED! As the W3 states:

white space is required on both sides of the + and – operators. (The * and / operators can be used without white space around them).

As MDN states:

Note: The + and – operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% – 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

facepalm[1]

A Flex Box Playground

For the past several months I’ve been trying to learn more about the CSS flex box module. If you’re like me you learn from reading and then doing, so to help out I built a playground where you can learn about and test out the basics of the flex box module. The playground gives you all sorts of useful information about the various properties of flex box and an area to test basic layouts.

flexbox-playground

The is the first release (I’ll probably post this on GitHub) and I’m open to any suggestions on making this a better learning resource.

You can access the playground at https://flexboxplayground.notonebit.com/

Looking for feedback on a WordPress dashboard plugin

I’ve developed a WordPress dashboard plugin and would like some feedback on it. If you’re interested, hit me up with your contact information. Oh, and it’s a simple to-do widget. You can see the plugin at https://wordpress.org/plugins/to-do-dashboard-widget/  Continue reading “Looking for feedback on a WordPress dashboard plugin”

Disney Blog Using Before/After Plugin

For those that missed it around the holidays last year, the Disney Parks Blog recently used the Before/After plugin to show some dramatic differences in Walt Disney World’s Tomorrowland from 1971 to today. The plugin was also used in 2013 to showcase differences in Fantasyland in the blog’s Then and Now series.

Tomorrowland_at_Magic_Kingdom_Park.23