Super Simple Router for React Without Any Dependencies
Here is some very simple code to render React components dynamically without using a framework or routing library. It doesn't cover pushState and URL parsing, so in that sense it isn't a routing library. But it does let you render components from othe...
Written by Sean Behan on 11/16/2018
How to Emulate Double Tap for Progressive Web Apps (PWA) iOS and Android
The double tap event isn't supported in libraries like jQuery Mobile (out of date anyway). But coding up your own function is very easy. We will compare time in milliseconds between tap or click, events. The reason for both tap and click events is due ...
Written by Sean Behan on 04/08/2018
How to Filter or Search HTML with Vanilla Javascript - No JQuery Required
The basic approach is to use the `document.querySelectorAll` to match certain elements, then manually set the display property to 'none' or 'block' (or 'inline-block') to hide or show it. Using the `match` method allows us to detect whether or not the sea...
Written by Sean Behan on 01/30/2018
Simple Way to Calculate the Odds of Something Happening
Here is a quick way to express a chance of something happening. This is an example in JavaScript that gives you a 1 in 3 chance of being true. [true, false, false].sort(function(){ return Math.random() >= 0.5 ? 1 : -1 })[0] Basically, we popu...
Written by Sean Behan on 11/27/2017
How to Read Response Body HTML with Javascript Fetch Method with React Native
In React Native you see a lot of tutorials and articles using the `fetch` method when interacting with `JSON` APIs. It's great for this and the the pattern looks like this fetch(url).then((resp)=>{ return resp.json() }).then((json)=>{ console.log(json...
Written by Sean Behan on 07/17/2017
Matching email addresses in Javascript
Matching email addresses in Javascript regex = /\b[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}\b/img "hello sean@example.com how are you? do you know bob@example.com?".match(regex) // => ["sean@example.com", "bob@example.com"]
Written by Sean Behan on 03/24/2017
Link to jQuery Source from Google's CDN
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js That is the link to the jQuery source hosted by Google on their CDN. It's probably already cached on client machines so it should be as fast as is possible! You can read more/use other Java...
Written by Sean Behan on 06/17/2012
Rails 3 disable_with Does Not Work with Ajax Remote Form_for
It appears that the :disable_with option on the submit_tag form helper method does not behave as expected with remote forms. I'm not sure if this is a bug or not. But the fix is pretty straight forward, but perhaps a little difficult to trouble shoot. Usi...
Written by Sean Behan on 06/17/2012
Execute Javascript When Using Link_to_function To Include a Partial in Rails
If you use the link_to_function to replace content in a div with content from a partial, any javascript that you include in the partial will not be executed. It is instead included, but will do nothing. Obviously, this isn't the desired behavior. Why woul...
Written by Sean Behan on 06/17/2012
Accessing Links in Nested TD Cells with Prototype
There must be a better way to do the following with PrototypeJS. I want to loop over nested links inside of table td cells and apply a class to the row that the link is in when the link is clicked. If a user clicks on another link the class will be remov...
Written by Sean Behan on 06/17/2012
TinyMCE Rich Text Editor: HELLO EDITOR Plugin Tutorial and Example
I wanted to create a button for the TinyMCE Rich Text Editor for Wordpress. It was tough to find good docs on the subject. There are a couple of useful posts out there but in general I found them lacking. http://codex.wordpress.org/TinyMCE_Custom_Buttons...
Written by Sean Behan on 06/17/2012
Double Click Event Using Prototype Javascript Framework
Super simple to get double click "desktop" like functionality out of Prototype! For some reason, googling it doesn't yield many useful results. http://www.google.com/#hl=en&q=double+click+in+prototype+javascript&aq=f&oq=&aqi=&fp=peEfEjG9pWY :( Anyway, he...
Written by Sean Behan on 06/17/2012
Using Prototype to Access Form Data
Prototype has a powerful API for accessing and manipulating the Document Object Model, A.K.A the DOM. The following code will let you interact with a simple web form. Suppose we have a form that contains hidden/or locked inputs and they need to be update...
Written by Sean Behan on 06/17/2012
Parse for Links with Prototype JS
Parsing for links with the Prototype javascript library is easy. Here is the pattern for finding links /(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^ =%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/ And to implement it you can loop through your con...
Written by Sean Behan on 06/17/2012