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!

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.

via eff.org/

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.

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.

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 YouTube images. All, of, them.

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

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

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

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.

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

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">{{ post.date | date_to_string }}</div>
   <h3><a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a></h3>
   <div class="content">
       {{ post.content | split:"<!--break-->" | first }}
   </div>
   <b><a href="{{ BASE_PATH }}{{ post.url }}">continue reading >></a></b>
   <hr/>
{% endfor %}

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">

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' );

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()}`);

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 CDC.gov 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.

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:

This

<div>
    <div>1</div>
    <div>2</div>
</div>

Will render differently than this

<div><div>1</div><div>2</div></div>

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

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

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.

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.

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.

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.

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.

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

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

Literally has literally lost its meaning.

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.
Seven: Be consistent!
7. Don't be redundant; don't use more words than necessary; it's highly superfluous.
8. Who needs rhetorical questions?
9. Exaggeration is a billion times worse than understatement.

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

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.

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.