f w h

Simple Mobile Detection for JavaScript

One common question I see asks how one might conditionally run JavaScript based on screen size. There are a number of use cases for this, and there are a couple ways to go about it.
One easy way, as I wrote about almost exactly three years ago is to detect a CSS property based on a media query.
Another possibility is to use JavaScript to pull the size of the browser’s viewport. To make things easy, we can package everything in a neat little function that returns an object with the viewport details.

function viewport(){
  this.w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  this.h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  this.orientation = this.w > this.h ? 'landscape' : 'portrait';

  this.output = {
    w: this.w,
    h: this.h,
    orientation: this.orientation

  return this.output;

The function can then be used in a number of ways.

// Conditionally do a thing inside a function
function doAThing(){
  if(viewport().w < 480){
    // Do a thing

// Do a thing when the browser is resized
window.onresize = function(){
  if(viewport().orientation == 'portrait'){
    // Do a thing

UPDATE July 2017: JS matchMedia API

Recently, SitePoint updated one of their 2011 posts to recommend this API.
In short, matchMedia returns a mediaQueryList object, which has a .matches() method attached to it. Passing a media query formatted the same as a CSS media query will return a boolean based on whether the query matches.
Read more about it on SitePoint’s How to use Media Queries in JavaScript.

NiceMenu – A JavaScript Responsive Menu for Multiple Menus

On a recent build, I needed a menu system like the impressive MeanMenu. Unfortunately, MeanMenu doesn’t support multiple menus. One fork of MeanMenu allows for multiple menus, though they present as multiple mobile menus, which I thought looked horrible. So, I thought, I’ll just roll my own.

NiceMenu isn’t, perhaps as polished as MeanMenu as far as presentation, but it will convert multiple menus into one responsive mobile menu.

Check out this Gist. Intructions for use are in the comments in the head of the JavaScript file.

The Poor Man’s FitText – JavaScript Text Size Adjustment

Dave Rupert’s FitText is a great tool for inflating or deflating type for responsiveness. I do find, however that it’s a bit finicky for certain cases, particularly if you want your text to fill the width of the space completely regardless of height. For a recent project, I wrote this script, which does exactly that by looping through the container’s width, checking it against the parent and adding to (or subtracting from) the font size until the container’s width matches the parent minus an offset.

The script currently uses jQuery, because I was already using it on the project. I will likely add a vanilla JS version in the near future.

The script requires that the container element be set to display:inline or inline-block.

See this Gist for the code. Instructions on how to implement it are in the file’s comments.

Solving Common Design Problems Using CSS Calc()

CSS’s calc() property is one of the lesser known but most useful around. It can solve a number of the more common front end code issues we face, and browser support is surprisingly deep.

First, let’s take a look at how calc() works. calc() can be used in place of any length, frequency, time, number or integer. If, say you wanted to set the width of an element to 90%, but subtract 20 pixels to compensate for another element, you would write it like so: width: calc(90% – 20px);

Note the spaces between the numbers and the operator. The expression will not work without them. It is possible to create more complex calculations and nest parentheses. See the spec for more information.

Compensate for Margins

Say you have 5 elements across, each sized at 20% width, but you need to add a 5px right margin on each for spacing. Add the margin-right:5px; as you normally would. Then, calculate the width like so: width:calc(20% – 5px);

Calculate Width for X Number of Elements

Calculating width for the 5 elements I mentioned above can be done more easily. Simply divide 100% by the number of elements like so: width:calc(100% / 5);. Incorporate the margin compensation, if necessary: width:calc((100% / 5) – 5px);. If rounding errors are a problem, use 99.9% in place of 100%.

Static Width Element + Fluid Width Element + Responsive

Perhaps your right sidebar needs to remain a fixed width, but you need the content area to be fluid. Consider the following HTML:

<aside class="sidebar">
	<!--Sidebar content-->
<section class="main">
	<!--Articles and what-not-->

Let’s say we want the sidebar to be a static 150px wide, but the content area to fit the rest of the area and remain fluid. The relevant CSS would look like this:

	width:calc(100% - 150px);

Centering Elements Vertically and/or Horizontally

There are a plethora of ways to center elements, and this is really just an easier way to do the old left:50%; with a negative half margin trick:

	left:calc(50% - 50px);

These are just a few of the really common front end design problems. The possibilities are endless. What other uses cases do you know of?

Quickly Set Up a Local WordPress (Linux)

I do a lot of work on WordPress, so I find myself downloading the latest copy and setting it up fairly often. It helps to have simple scripts to do these things.

The concept here is to create a shell script that downloads and extracts WordPress to the current folder. We also want to be able to run the script from any folder.

Set the Stage

First, in your home folder, create a new folder called bin. Inside that folder, create a new blank file called wordpress.sh.

Add the Script

Inside the file you just created, add the following script:


sudo wget http://wordpress.org/latest
sudo tar -xvzf latest*
cd wordpress
sudo cp -R * ..
cd ..
sudo rm -rf wordpress/
sudo rm -rf latest*

Save the script, then make it executable by opening your terminal, navigating to ~/bin and running the following command:

sudo chmod -x wordpress.sh

Run the Script from Anywhere

Now, we just need to add the script to the path so we can execute it from anywhere. Run the following command:

export PATH=$PATH:$HOME/bin && echo 'export PATH=$PATH:$HOME/bin >> ~/.bash_profile'

Run the Script

Create a new folder, navigate to it in the terminal and type wordpress.sh. The script will download and extract the latest version of WordPress for you.

What’s Next?

I personally use PHP’s built in server along with a custom domain to develop, so I’ll run sudo php -S roe.dev:80, then go to http://roe.dev in my browser. One could add that line to the shell script just to make the process that much smoother.

« Previous PageNext Page »