Wait for User to Stop Typing, Using JavaScript

Here’s the scenario. You have a search feature on your website that you want to live-update while the user types. The naive solution would be to execute a search query on every keystroke. This falls apart, however, because the user can usually type faster your server can respond. This makes for a poor user experience and an overloaded server. The solution to this is to execute the search only after the user stops typing.

HTML Templating – Output a Grid in a Single Loop

It was about a two years ago. I was working on a food startup and needed to display some food photos in a six-column grid. The image below shows what the end result looked like: I was using Bootstrap, which requires an HTML element to be wrapped around each column and each row. Here’s a sample of Bootstrap showing two rows of four columns each: <!-- 2 row - 4 column grid --> <div class="row"> <div class="col-md-3">Item 1</div> <div class="col-md-3">Item 2</div> <div class="col-md-3">Item 3</div> <div class="col-md-3">Item 4</div> </div> <div class="row"> <div class="col-md-3">Item 5</div> <div class="col-md-3">Item 6</div> <div class="col-md-3">Item 7</div> <div class="col-md-3">Item 8</div> </div> My first attempt at a solution involved putting the items in a 2D grid and using nested loops in the HTML template.

Creating a Pure CSS Dropdown Using the :hover Selector

In this tutorial we’re going to be building a basic dropdown button. Here’s a peak at what the final result will look like. .dropdown { position: relative; display: inline-block; z-index: 9999; } .dropdown .dropdown-menu { position: absolute; top: 100%; display: none; margin: 0; list-style: none; width: 100%; padding: 0; } .dropdown:hover .dropdown-menu { display: block; } .dropdown button { background: #FF6223; color: #FFFFFF; border: none; margin: 0; padding: 0.

Pure HTML Share Buttons

/** Social Button CSS **/ .share-btn { display: inline-block; color: #ffffff; border: none; padding: 0.5em; width: 4em; box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); outline: none; text-align: center; } .share-btn:hover { color: #eeeeee; } .share-btn:active { position: relative; top: 2px; box-shadow: none; color: #e2e2e2; outline: none; } .share-btn.twitter { background: #55acee; } .share-btn.google-plus { background: #dd4b39; } .share-btn.facebook { background: #3B5998; } .share-btn.stumbleupon { background: #EB4823; } .share-btn.reddit { background: #ff5700; } .

Exclude Dev Traffic from Google Analytics

Google Analytics is a great free tool for tracking your website. To avoid compromising tracking data, it is important to not have tracking enabled while building, testing, or fixing things. Excluding Google Analytics tracking is best done at render-time on the server. However, for static websites that don’t have a server component, the same thing can be done on the frontend using Javascript. Here’s how: // Get the current hostname (ex: "localhost:8000" or "mydomain.

How to Stop Tap Events From Passing Through an Android Fragment

By default, the layout view in Android (LinearLayout, RelativeLayout, etc) don’t consume click events. I discovered this trying to show a new fragment above another. Taps were registering on the non-visible fragment below. To fix this, add an attribute to the view to tell it to consume click events with android:clickable="true". <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@android:color/white" android:clickable="true"> </LinearLayout> I hope this tip saves someone else the time I lost :)

How to Make Files Uploaded to S3 Default to Public

By default, files uploaded to Amazon S3 are private, requiring a separate action to make public. To make uploads default to public, add this policy to your S3 bucket. { "Version": "2008-10-17", "Statement": [{ "Sid": "AllowPublicRead", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::MY_BUCKET_NAME/*" ] }] } If you aren’t sure how to add a policy, follow these steps: click on bucket expand the Permissions row click “Add Bucket Policy” copy/paste the snippet below into the text area.

Gamepad Support on Steam for Linux

After some searching, I have finally figured out how to enable gamepad support in Steam for Linux. Sometimes Steam has trouble locating button map configurations for older controllers so a manual set up is required. Set up is easy, but unusually hard to find. Here is how it’s done: 1. Enter Big Picture Mode In the top-right corner of the Steam interface is a button to enter Big Picture Mode.

"Clicky" 3D Buttons with CSS

I wanted to challenge myself to come up with some really tactile 3D CSS buttons and ended up with the result shown below. This is a short tutorial on how I used CSS to make this possible: button.clicky { position: relative; margin-top: 0; margin-bottom: 10px; box-shadow: 0 10px 0 0 #6B2A4A; display: block; background: #a47; color: #eee; padding: 1em 2em; border: 0; cursor: pointer; font-size: 1.2em; opacity: 0.9; border-radius: 10px; } button.

Creating Pure CSS Lightboxes With The :target Selector

This tutorial will show you how to create a JavaScript-free lightbox using CSS only. To accomplish this, we will make use of the :target selector from the CSS3 spec. Click the thumbnail below to see the lightbox in action, or see the full demo on CodePen. .thumbnail { max-width: 40%; } .italic { font-style: italic; } .small { font-size: 0.8em; } /** LIGHTBOX MARKUP **/ .lightbox { /** Default lightbox to hidden */ display: none; /** Position and style */ position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.