Little life saver: parsing HTML entities

Little life saver: parsing HTML entities

Recently I had the pleasure of building a calculator example exercise. Begin a good programmer I used the some HTML entities as values on the buttons: ×, ÷ and ± as values. It turned out to be quite difficult to parse them with native JavaScript. It is not so hard with LoDash or jQuery, but I wanted to do it native.

I ended up using the following script I got from a StackOverflow answer:

Ouch!

Drop a comment Kees C. Bakker

How to do a ‘select-all’ focus on a TextArea upon tab?

How to do a ‘select-all’ focus on a TextArea upon tab?

Most forms contain both Input and TextArea fields. When tabbing through the fields I realized that the input focus behaves different from the TextArea. Here, try it:



So the TextArea doesn’t select its text. This can be fixed by adding some jQuery:

It basically detects the a focus on a TextArea and registers a one-time event-handler for a key-up. When the key-up comes in, you’ll need to check for both tab and if the current focused element still equals the TextArea.

Drop a comment Kees C. Bakker

Click to ‘select all’ on the PRE element

Click to ‘select all’ on the PRE element

When you want to display code, you’re probably working with pre elements. The fact that they can contain markup make them really effective for syntax highlighting. I’ve used Knockout en comment binding to generate code into a pre field and that’s really cool.

Wouldn’t it be need if one could click on the element en it would select all its text? With a little bit of jQuery, it is done in a heartbeat:

Selectors
Just change the selector if you want to change the element on which it works. This also works for code and textarea.

Drop a comment Kees C. Bakker

Subscribe to all changes of an entire Knockout ViewModel

Subscribe to all changes of an entire Knockout ViewModel

Knockout is amazing. It is fast and intuitive. I use the subscribe function a lot, but I found myself lacking a general subscribe that allows me to track the changes of an entire ViewModel, so I created one myself that even supports unsubscribe and throttling.

The basic idea
So what are we going to do? Given a ViewModel, we’ll:

  • Find all observable properties
  • Subscribe to those properties
  • Inspect the value of each observable property and do the same: find, subscribe and inspect.

We’ll extend on the ko  variable, so we’ll get the following new features:

  • To subscribe a model:  ko.subscribe(vm, fn, 100);
  • To unsubscribe a model:  ko.unsubscribe(vm, fn);

So let’s dive in!

Read More Kees C. Bakker

How to make embedded YouTube play nicely?

How to make embedded YouTube play nicely?

WordPress supports YouTube links converting them into embedded video. You can even do this with comments. Embedding is very easy, you just add the link to a new line and you’re done.

Well… almost, because it might break your design. By default it renders an iframe with 900 height and 506 width, which is neither responsive nor — in my case — the right size:

Read More Kees C. Bakker

William Lawson’s Commercials – No Rules

William Lawson’s Commercials – No Rules

I work for a company that provides a marketing & communication platform, so naturally I’m interested in viral video campaigns. William Lawson’s keeps coming up with great commercials with a consistent theme: real man are rough and have humor. I think their campaigns are a great example on how a brand can connect with its audience.

Here are some of their best commercials.

On Chinese Philosophy

Read More Kees C. Bakker

Serving SASS files for WordPress theme on IIS

Serving SASS files for WordPress theme on IIS

I love SASS. More and more WordPress themes are supporting it. And what’s not to love? Well… it can’t be served directly by the web server like CSS. It needs to be pre-compiled before it is served.

Fortunately there is a PHP SASS compiler that can be used to make PHP compile and serve SASS. I’m using an IIS installation, so I’ll be explaining how it can be done on a Windows machine.

Read More Kees C. Bakker

How to scrape a photo from a Twitter Photo URL using PHP

How to scrape a photo from a Twitter Photo URL using PHP

After explaining how to scrape a photo from a Twitter Photo URL using C# (ASP.Net) I decided to port the script PHP so I could use it on WordPress.

I ended up using CURL and a regular expression to do the trick. The result is a redirect to the actual found photo. Just paste the code into a new PHP file and call it with the short code from the Twitter URL as a query string parameter (like: http://example.com/tweet.php?ecVE2qSScL).

Smaller image
By default this script will return the large image. If you want a smaller image, change the regular expression to '/data-url="(?<PhotoUrl>[^"]:large+)"/' . The script will redirect to a smaller version.

Permanent redirect
You might get an extra performance increase by doing a permanent redirect by changing 302 into 301. This kind of redirect will be cached by the browser.

Drop a comment Kees C. Bakker

How to scrape a photo from a Twitter Photo URL with C#

How to scrape a photo from a Twitter Photo URL with C#

Twitter uses its url shortener to place photo’s in Tweets. I’ve tried processing these URLs in the browser, but cross site scripting measures prevented me from processing the result with jQuery.

I decided to resolve it in C# (as I’m using ASP.Net). The following script leverages a WebClient and a regular expression to extract the photo URL from the shortened URL. This code could be added to a handler or a webservice that can be called from script.

The photoUrl contains the url to the photo; in this case: https://pbs.twimg.com/media/BiHtr_kIQAAMvx7.jpg:large.

Drop a comment Kees C. Bakker

A (slightly) better WebClient class

A (slightly) better WebClient class

I use C# quite frequently to scrape information from sites. The standard C# WebClient is not always sufficient for what I want to do. I like to:

  • store/retrieve cookies – needed for session support;
  • prevent redirects;
  • retrieve the HttpStatusCode of a request.

I’ve ended up overloading .Net’s  WebClient class and overriding the GetWebRequest method to set the cookie container and the redirect setting. To improve performance I’ve also enabled compression.

Read More Kees C. Bakker