All posts by year

Showing everything matching: clear


Graph Paper CSS only background

23 Mar 2020
CSS Privacy

When you're working with designers and UX, it's occasionally helpful to have a grid on the page in order to help with layouts. I used to love working with graph (construction) paper when I was younger, and I thought it'd be cool to be able to do this without using a background image.

See the Pen Graph Paper CSS only background by Pete (@peterbenoit) on CodePen.

As a bonus, here's a Bookmarklet you can add to your browser so you can use it on demand. GridMe!


Google doesn't sell your data

20 Mar 2020
Security Privacy

Taking a break from Coronavirus this morning to read about how the big tech companies handle your data. While this isn't new news, I hadn't seen it delivered like this before.

Google controls about 62% of mobile browsers, 69% of desktop browsers, and the operating systems on 71% of mobile devices in the world. 92% of internet searches go through Google and 73% of American adults use YouTube. Google runs code on approximately 85% of sites on the Web and inside as many as 94% of apps in the Play store. It collects data about users’ every click, tap, query, and movement from all of those sources and more.



Security vs. Privacy

04 Mar 2020
Security Privacy

Security and Privacy are very different. Think “Google is very secure but not private”.

For example, for privacy we often want deniability—you can’t prove a statement came from me. For security we might want authenticity (you know the statement is from me and not an impostor) or even non-repudiation (I can’t sign a contract then later claim I never signed it).

One reliable absolute in security and privacy is there are no absolutes.


Using the Noembed service with jQuery to get YouTube video data

26 Feb 2020
jQuery Noembed YouTube

You can use the Noembed service to get oEmbed data with JSONP for YouTube videos.

See the Pen How to use Noembed service to get YouTube video data using jQuery by Pete (@peterbenoit) on CodePen.


jQuery "on" method with various event handlers

26 Feb 2020
jQuery Javascript

There are several ways to handle events on elements with jQuery’s “on” method. See the Javascript for examples.

  1. This method is the standard one event, one function method. On your .mybutton click, execute a function.
  2. This is a little more advanced. Capture two events and run the same function.
  3. Same as the previous example, this time we determine which event using e.type and handle that event separately.
  4. You can also chain the "on" method to handle different events with specific code.
  5. This time we're taking one selector and applying multiple unique handlers through one "on" method.

See the Pen jQuery "on" method with various event handlers by Pete (@peterbenoit) on CodePen.


All of the images YouTube generates for a video

24 Feb 2020
YouTube Images

All of the YouTube images. All, of, them.

See the Pen YouTube Images by Pete (@peterbenoit) on CodePen.


Idiom of the day

12 Feb 2020
Idiom English

"Expectation of the Awful"

Use in a sentence.

I don’t know if you necessarily had a bad attitude or if you were anxious about the expectation of the awful.


How to use blockquotes in Markdown

12 Feb 2020

You can add blockquotes to your Markdown pages by using the right arrow (greater than) sign, followed by your text.

> This is a blockquote

Which will render like this:

This is a blockquote


CSS nth child psuedo-selector

30 Jan 2020

I had been familiar with the nth-child pseudo-selector for some time, but I apparently haven’t been using it to its fullest extent.

Today I had an issue where I wanted the first three images in an element to have a certain height, and the rest to have a different height. Since I knew the first three would always be the same, I decided to target them instead of the rest of the images.

Here’s roughly how I managed to do this.

.yourelement .img-wrapper img {
  height: 300px;

.yourelement .img-wrapper:nth-child(-n+3) img {
  height: 200px;


CSS-Tricks has a great tool for testing variations of the nth-child pseudo-selector.


The second page of Google search results

26 Jan 2020
Google Search

I don’t know who made this, but thank you.

The second page on Google search results


How to highlight Jekyll in Jekyll. AKA, Jekyllinception.

26 Jan 2020
Jekyll Highlight

Highlighting in Jekyll is pretty straight-forward as long as you are using a language it supports, and it supports quite a few.

In my previous post, I realized I wasn’t sure how to highlight Jekyll inside of Jekyll - it would auto convert the markup I was trying to highlight. Not ideal.

The key to getting this to work is to wrap your Jekyll markup in a {% raw %} block. See this Gist.

And an example of the output

{% for post in paginator.posts %}
   <div class="author">{{ | date_to_string }}</div>
   <h3><a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a></h3>
   <div class="content">
       {{ post.content | split:"<!--break-->" | first }}
   <b><a href="{{ BASE_PATH }}{{ post.url }}">continue reading >></a></b>
{% endfor %}

One way to prevent caching of your Javascript and CSS using Jekyll

26 Jan 2020
Jekyll Cache

As with most things in development, there are often a handful of ways to do the same thing. Some might be more readable, others might be more performant, but rarely does the end user know the difference. In this case, I want to limit the amount of caching the browser does on my local CSS and Javascript assets. There are a variety of reasons why anyone would want this, mine is purely for testing; I want to always have the latest version of a file. Once I’m happy with the end product, I’ll remove the mechanism.

Here’s one way to do it using Jekyll. The site.time is the current time when the jekyll command is run; typically this is when the site is built.

  <link href="{{ site.baseurl }}/css/{{ pg | strip }}?{{ site.time | date:'%Y%m%d%U%H%N%S' }}" rel="stylesheet">

The output with the querystring

<link rel="stylesheet" href="/code/theme/css/site.css?20200126040844656780058">

jQuery CSS !important

25 Jan 2020
Javascript jQuery CSS

You cannot add an !important declaration to your CSS using jQuery’s .css method, but you can add it using .attr with style like so. This method keeps the original style declarations.

function setMyCSS( element, setting, value ) {
    $( element ).attr( 'style', function( i, s ) { return ( s || '' ) + setting + ':' + value + '!important;' } );

setMyCSS( 'body', 'background-color', 'red' );

Convert camelCase to hyphenated camel-case

24 Jan 2020

It’s pretty straight-forward to take a hyphenated string and convert it to camel case, but the other way around isn’t so obvious.

Here’s one way you can do it in Javascript.

"camelCase".replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);

Reading Mode

22 Jan 2020
Content CSS

Before I get too far into this post, I want to make a point that I’m rather interested in at work.

No one reads your content.

That’s right. Your article, publication, journal, my blog posts, no one reads any of it.

Reading is an active act of engagement between the reader and your content, and generally speaking, most people just aren’t that interested to become that involved.

If that is the case, what is the point of it all!?

I’m glad you asked.

People skim, scroll and scan. People want what they’re looking for without all of the rest of that stuff which is getting in the way of what they’re looking for. Think of it like flipping through a magazine. Who reads a magazine from front to back? No one, that’s who!

Okay, okay. I kind of see your point. What do I do?

Keep writing!

Write with your audience in mind. Be creative, but not too creative. Explain thoroughly but succinctly. Try to understand what they want and discover what is the best way to give it to them. Have an effective content strategy, and use it consistently.

Alright, fine. But what does this have to do with Reader Mode?

In many ways, websites today (2020) are much worse than they were back in the early 2000’s. It is difficult to immediately find what you are looking for, even if the result comes from a Google search. Instead, you’re often treated to content structured something like this:

  • Teaser
  • Ad
  • Backstory
  • Ad
  • Ad
  • Related Info
  • Ad
  • Ad
  • Some content
  • What you’re looking for
  • Ad
  • Related Pages
  • Ad

Reader Mode attempts to alleviate some of this page pollution and reduce the noise on your page to simply the content. It’ll look more like this:

  • Teaser
  • Backstory
  • Related Info
  • Some content
  • What you’re looking for
  • Related Pages

It does more than remove the advertisements from your content, rather reader mode will also remove other page components in order to promote the content as much as possible without other distractions on your page. And there are plenty. Reader Mode also will format the content that remains with a light background and large serif font. Think of an e-reader, like as a Kindle. Like that.

Safari and Firefox have made some attempts to provide a Reader Mode, but those can only take you so far, for any number of reasons. To offset these potential shortcomings, I created a demo of using reader mode on CDC pages. This allows greater customizations and flexibility, and the additional benefit of providing a basis for printing from.

You can try it out by adding this bookmarklet to your browser Reader Mode, visiting a page on and clicking on the bookmark.

For those interested in the inner workings, I’ve provided the Codepen pen.

See the Pen reader mode by Pete (@peterbenoit) on CodePen.


Using inline-block and dealing with padding

14 Jan 2020

There was a question in one of my Slack channels today. A developer was trying to display two elements horizontally using inline-block, but they kept appearing vertically. To be clear, there are a number of ways to get to the presentation that this person was attempting, but I didn’t consider that part of the exercise.

The problem stems with the way inline-block will pad elements whenever the HTML markup isn’t compressed.

For example:



Will render differently than this


Here’s a working example of what the developer was working with

See the Pen Inline Block with padding by Pete (@peterbenoit) on CodePen.


Development without design

13 Jan 2020
Development Design

It might seem this way, but developing a product or a tool isn't about the product or the tool; rather it's about all of the steps needed in order to start, produce, complete and maintain whatever the software is.


How to use numbers in Font Awesome 5

06 Jan 2020
HTML Font Awesome

I have a project that required numbers to be displayed as icons, but Font Awesome doesn’t provide numbers by default. Here’s how to add numbers using Font Awesome’s icon stacking.

See the Pen Using Font Awesome with Numbers by Pete (@peterbenoit) on CodePen.


Alot vs A lot

06 Jan 2020

Here I go again, trying to fix everyone on the Internets!

When I see folks using "alot" instead of "a lot" I want to scream at them and yell "WHY WEREN'T YOU PAYING ATTENTION IN SCHOOL⁉"

Well... not really. But I digress.

An easy way to remember that you shouldn't use "alot" a lot, is to wonder "would I use alittle?".

If the answer is a resounding "yes!", then carry on with your nonsense.


Find the closest matching number

31 Dec 2019

Today I needed to find a way to match a number in an array to a specific number. For my case, it was matching the window width with each of the Bootstrap 4 breakpoints.

I found a version of this snippet somewhere (I am assuming Stack Overflow, but I cannot find it!), and thought it was a gem worth holding onto because of its simplicity and elegance.


Image API for loading images in a browser

19 Dec 2019
Lazy Loading HTML5 images

The browser support for lazy loading images isn’t quite there yet… dare to dream.

  • auto - default
  • lazy - loads the image when it becomes visible based on scroll position
  • eager - loads the image immediately regardless of scroll position

See the Pen Using loading attribute for lazy loading images by Pete (@peterbenoit) on CodePen.

Thanks to David Walsh and Addy Osmani.


Entitled title

19 Dec 2019

A book is entitled to have a title but not entitled with a title.


You're vs Your

18 Dec 2019

I don't really care if you get this wrong, though I do notice it when it happens! 🤫

English is a fun and often confusing language that even the experts disagree about. If you are not sure which version of "you are" to use, here are some options.

  • You're
  • Yer
  • Ur
  • Yous

Just not "your".



18 Dec 2019

Literally has literally lost its meaning.


How to write good

17 Dec 2019

I found this eons ago, and kept it around long enough to post it here. Mucho gracias to the original poster!

  1. Avoid Alliteration. Always.
  2. Prepositions are not words to end sentences with.
  3. Avoid cliches like the plague. They're old hat.
  4. Comparisons are as bad as cliches.
  5. Be more or less specific.
  6. Good writers should never generalize.
  7. Seven: Be consistent!
  8. Don't be redundant; don't use more words than necessary; it's highly superfluous.
  9. Who needs rhetorical questions?
  10. Exaggeration is a billion times worse than understatement.

How to write code, with syntax highlighting

10 Mar 2018
syntax highlighting

This post demonstrates both inline code and code blocks with syntax highlighting.


How to use Multiple Images

19 Oct 2017
HTML images Markdown Liquid

Here’s an example for multiple images that uses Bootstrap’s card columns for a Masonry-like layout. It’s not perfect, but with some careful ordering of the images, you can get some good results. This example also shows some Liquid tags used in conjunction with frontmatter variables to automatically create your layout.


How to use Single Images

13 Oct 2017
HTML images Markdown

Here’s how to put a single image into a post, using a Bootstrap 4 card. This shows how to mingle Markdown with HTML, too.