You CAN jam stuff into your clipboard from the devtools!

Have you ever spent far too long writing a clever little script in the browser’s devtools to get some information from a page? Maybe you’re trying to generate a list of recurring characters from the Marvel Cinematic Universe (MCU) with their names and secret identities from a Wikipedia page…

Image for post
Image for post
That wasn’t too bad…

Or maybe you’re trying to get a JSON representation of all of the MCU movies sorted by total profit…


This article was originally published on 17 June, 2014 at Codepen.io.

Handlebars is awesome. I can separate my template logic from my application logic? Yes, please. When I try to use Handlebars in my local editor, though, it vomits all over those ugly <script> tags. Fortunately there’s an awesome, future-friendly, spec-compliant solution — the <template> tag.

<template> tags are super cool in a lot of ways. From the HTML5 Rocks article, here are the pillars of <template> tags:

  1. Its content is effectively inert until activated. Essentially, your markup is hidden DOM and does not render.
  2. Any content within a template won’t have side effects. Script doesn’t run, images don’t load, audio doesn’t play… until the template is used. …

This article was originally published on 01 March, 2014 at Trezy.com.

The CSS transition property allows for a lot of really cool effects in your design but it has definitely caused me to bang my head against the desk a few times. Here are some details about the transition property that aren’t very well documented.

Disclaimer: At the time of this writing transitions still require browser prefixes to work for Firefox (-moz-), Opera (-o-), and Webkit (-webkit-). I have omitted them from the code examples here for readability, but they will be required if you intend to use these techniques.

The long and the short of it

The transition can be broken into several different properties or used in its shorthand form. You can even mix and match depending on what you prefer. …


This article was originally published on 02 September, 2015 at Codepen.io.

ngOptions is awful. It’s hard write and even harder to decypher. If you’re looking at an ngOptions expressions that somebody else wrote? God help you. Luckily, creating select elements in Angular can be so, so much easier. Try this out:

var selectedState, availableStates;

selectedState = ‘’;
availableStates = [
{
name: ‘Alabama’,
code: ‘AL’
},
// ... {
name: ‘Wisconsin’,
code: ‘WI’
}
];
<!-- `ng-model` represents the home for our selected value. -->
<select ng-model=”selectedState”>
<!-- This is the default option -->
<option value=””>Select a state</option>

<!-- The list of states. -->
<option
value=”{{ state.code }}”
ng-selected=”state.code === selectedState”
ng-repeat=”state in availableStates”>
{{ state.name …

This article was originally published on 03 December, 2013 at Trezy.com.

box-shadow is arguably one of the coolest things to come out of CSS3. However I’ve been creating shadows in Adobe Fireworks and Photoshop for years so I feel like I’m too constrained by CSS3’s box-shadow implementation. In an effort to expand my boxy horizons, I set out on a quest to create some cooler shadows.

Disclaimer: At the time of this writing filters and transforms still require browser prefixes to work, though filters will only work in Webkit browsers. …


Recently I discovered something mind-blowing that I feel like I should have known for years.

This article was originally published on 06 May, 2013 at Trezy.com.

When I write my sans-serif font-family stack in my CSS file I normally use this:

body {
font-family: Ubuntu, Helvetica, Arial, sans-serif;
}

Ubuntu is one of my favorite fonts which I import from Google Fonts but you can replace it with whatever custom font you want. Since I prefer Helvetica over Arial, it’s the next font on the list which I’m hoping they have pre-installed. If not the stack falls back to Arial, then the default sans-serif system font.

Now I’ve been writing my font stack this way for several years (sans the custom font) completely oblivious to the ridiculously obvious fact that half of the stack isn’t necessary. The sans-serif piece of the stack asks for the system’s preferred sans-serif font which, by default, is Arial on Windows and Helvetica on Mac. If I’m not concerned about the user having changed their default sans-serif font, I can cut 16 characters (not including spaces) out of my font…


This article was originally published on 15 December, 2012 at Trezy.com.

Disclaimer: Alright, don’t get too excited. This stuff isn’t backwards-compatible at all. However, there are fallback solutions and it’s pretty darn cool that it’s actually being spec’d.

Web designers were begging for CSS to add variables and calculations for years before LESS and SASS came along, giving us the ability to use these shiny new toys to our heart’s content. However, SASS and LESS output can sometimes bloat your CSS sheets and while it’s pretty fun to play with, it’s a pain to have to recompile your CSS after every change. …


This article was originally published on 05 October, 2012 at Trezy.com.

Pure CSS tooltips have been a thing for a while now but all of the solutions I’ve found have had limitations. After reading through Louis Lazaris’s article Pure CSS Tool Tips Revisited over at ImpressiveWebs, I decided to make a few modifications of my own to his design.

Check Out the Demo

The Problem

Louis’s design broke some of the boundaries but still had some limitations. These were my goals:

Multiline

Louis makes the argument that tooltips are only supposed to contain a small amount of information, eliminating the need for multiline tooltips. I agree with him to an extent, but I still think there are cases in which you would want a multiline tooltip. In my example, I am creating an error message rather than your average tooltip. …


This article was originally published on 01 March, 2012 at Trezy.com.

After reading through A List Apart’s article What I Learned About the Web in 2011 I decided I needed to make a second effort at getting into mobile web design. This article chronicles the epic struggle between myself and the perils of designing for a screen that fits in my hand.

Part 1 will discover the philosophy behind responsive design and how to apply these new bits of brain lightning to our current processes. My odyssey will continue in part 2 as I get into the technical side of using techniques like media queries to create a responsive design. …


…or Why the Hamburger Icon is Awesome.

This article was originally published on 16 April, 2015 at Codepen.io.

I’ve read plenty of anti-hamburger icon posts that came out after Mike Stern's rant at WWDC ’14. The issue I take with those articles — and Mike’s rant, for that matter — is that they aren’t addressing the icon. They’re addressing the menu.

Hamburger Icon vs. Hamburger Menu

The hamburger icon — three vertically stacked horizontal bars — is most often the iconography selected for a button that opens an action menu. The terms used to refer to that menu are vast in number and so I’ll not attempt to list them all but I can at least give you the most common: drawer, sidebar, or — least commonly — a hamburger menu. The hamburger icon typically does what you would expect based on it’s design. …

About

Trezy

I'm a creative engineer, an entrepreneur, and a hopeless pedantic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store