Showing posts with label javascript. Show all posts

Tuesday, February 22, 2011

Easy pdf download event tracking with jQuery and Google Analytics

Quick tip:
One of the things we wanted to add was a generic script to track pdf downloads as events in GA so i wrote this real quick... ill probably add in some other flavors based on prototype or another library later but for now this is a quick and easy post to try and get me in the habit of publishing again

you can easily modify this to also look for powerpoint or txt file whatever... just change the extension in the jQuery selector

Do you have any cool Google Analytics scripts you use around your sites? Id love to hear about some other ideas for what to track

Wednesday, September 29, 2010

Asteroids Everywhere Chrome Extension Game

So I was checking the news and came across this site with a cool bookmarklet to add asteroids to any webpage... it was super cool but i hate bookmarklets so now its a chrome extension

Get The Game

Friday, April 2, 2010

OK so what is Start Panic! and do we need to be?

OK so what is Start Panic!

Basically all it does is enumerate your browsing history… but that’s a lot. Everything we do now is online and all those sites we use to do everything from our banking to our social networking. First I want to quickly cover why this information should be kept secret and then explain exactly how they are getting to it.
First this on its own is hardly a problem aside from some embarrassing browsing history there isn’t a lot you can do with the history you steal but combined with the classics (social engineering, weak passwords and phishing) you could be in a lot of trouble. It happened to twitter just recently and it can happen to you, people can guess security questions based on your social networking sites responses “where did you first go to school” or “what’s your pet’s name” are no longer hard to find and you browsing history will tell them exactly where they can find you profiles. With some basic info on you and a crafty email many would fall for a phishing scam and from there they can get even more. 61% of passwords are reused for all sites (1) and that means if one of your online profiles is lost they all are in danger especially if it’s your webmail account. They can just have the sites reset your passwords for them. Yahoo has taken one of the first measures against this by having multiple security questions and the ability to reset your password with your cell but many sites still don’t offer this service.
But enough with the scare tactics let’s look at exactly how this attack is conducted and how some simple functionality gave the attacker the keys to the kingdom.
CSS is the new way to style text on the web and it’s responsible for much of the explosion in design creativity but it can also leak important info (such as your browsing history)
Consider this css:

Now any links will only display if they have been visited. They write a large number of links to the page from common sites like facebook, or your bank and it’s a simple task to make some JavaScript to check which links on the page are displayed. It’s done they have your browsing history (and know what sites you use and where you bank online)
There is no way to prevent this attack, it is still possible to perform this attack with no JavaScript (it involves using a server side script and requests to the server for images) but it is uncommon and unreliable. So watch out and clear your history because you don’t know who’s reading your history as you pass by on the world wide web

1) http://www.readwriteweb.com/archives/majority_use_same_password.php

Thursday, October 29, 2009

Awesome code syntax highlighting made easy

So ive finally come across an awesome syntax highlighter that i think will work well for most any application and it works well on Blogger Hosting which is even better. It uses a flash swf to do a click to copy button and has support for a variety of languages as well as a bunch of themes

here is the code you need to drop right before your <head> tag in the HTML of your blogger template (or wherever you may find yourself in a need of a syntax highlighter). just remove any lines for languages you don't use...

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

and a little about how to use it...
you can use a special <script> tag with CDATA around it

<script type="syntaxhighlighter" class="brush: html"><![CDATA[
<html>
<head>
<title>Carter Tomorrow Fund Donations</title>
<meta name="title" content="Help Give to the Carter Tomorrow Fund" /> 
<meta name="description" content="Show your support and help out with a small gift" 
]]></script>

- or -

you can use a <Pre> tag with html escaped characters
heres a quick way to escape your html

Theme Preview Widget

and this is my way cool theme switcher... just click the css theme below to see how it looks (you will need to change the second line that imports the style sheet to use the filename you want to use from below) check below the switcher to see theme with white background...

so thats about it. if you found the post helpful please consider linking to this post...
and you can see your linkback at the bottom :) thanks

Another note for blogger users...

you will see the following message if you you the
<script class="brush: html" type="syntaxhighlighter"> method

Your HTML cannot be accepted: Tag is broken: ![CDATA[
Stop showing HTML errors for the body of this post

just disregard it... im sending a message to blogger about it but it doesn't understand CDATA tag
it will also keep you from saving a draft of the post. its uncool but you can fix it by putting a space before the <![CDATA[ like this < ![CDATA[ (dont forget to add a space at end and change ]]> to ]] >) then it wont count it as a broken tag and you can save just remember to switch it back before you publish

Thursday, September 24, 2009

google profile icon gadget | show off your social bookmarks

so I love Google and one of the cool things i have found now is Google profiles (if you haven't made one yet get on that). i wanted to be able to put my string of social bookmarks into a page. the explanation is below but heres the code to use the script along with some examples

you may also be interested in the other widget i made to embed a google profile badge

Carter Cole

<script src="http://cartercole.com/gpicons.asp?user=[user]&width=[100]&limit=[5]"></script>

Matt Cutts <script src="http://cartercole.com/gpicons.asp?user=mattcutts"></script>

Tim O'Reilly (limit = 5) <script src="http://cartercole.com/gpicons.asp?user=timoreilly&limit=5><"/script>

Jeff Huber (width = 100) <script src="http://cartercole.com/gpicons.asp?user=jhuber&width=100"></script>

i also did css classes on each element (you may need the css !important)

image class = "google-profile-img"

anchor class = "google-profile-link"

wrapper div = "google-profile-gadget"

i think one of the best features is the links and reader uses your profile links see?

i have all my profiles linked to from there but i wanted to be able to embed them into pages(like google reader did). rather than trying to fight and get the data from google i decided to go about the problem myself. First i thought i was going to have to do parsing and checking to find the right favorite icon but then i found that google had done my work for me(thanks). you can do this...

http://www.google.com/s2/favicons?domain=[domain]

http://www.google.com/s2/favicons?domain=wellsfargo.com

http://www.google.com/s2/favicons?domain=seomoz.com

http://www.google.com/s2/favicons?domain=pipes.yahoo.com

so then i made a asp page to spit out some js to write the icons...
there are 3 optional parameters

user=username (this is the last part of the profile url)
http://www.google.com/profiles/Carter.Cole
(if you dont set a user it uses mine)
limit=number (this sets the number of icons that the script should spit out) [default is 100]
width=number (this is used to make the icons show up in a block) [its the div width that holds the icons]

please let me know if you have any questions / comments / concerns id love to hear from you