Sync facebook Events with Google Calendar

So I was trying to manage my google calendar when I realised its not synced to my facebook events like my ipad does. So I went to google it and found out that Facebook actually allows that sync to happen via a url connection. The original post with the instructions was dated 2009 from insidefacebook.com original article. So decided to just update it with some new screenshots the steps are still the same. Basically go to facebook events page get the url and add it as your “other calendar” in google calendar.     bottom right corner of your facebook events page.     Paste into your google others calendar.    ...

css image auto resize height and width while maintaining aspect ratio

Giving users the power to update their site is a good thing. But sometimes asking a user to resize an image to certain pixel size is a daunting task. So we should always have a container that can resize these images for them. Below is the solution to resize an image based on its maximum height and maximum width while maintaining its aspect ratio. The solution is inspired from addedoptimization. First the image container in the html Html for the image container <div class="image-container"> <img src="place the image location here" class="resize"> </div> 123 <div class="image-container"><img src="place the image location here" class="resize"></div> Then the css resize code. css image resizing code img.resize{max-height:80px;width:auto;} img.resize{height:auto;max-width:80px;} 12 img.resize{max-height:80px;width:auto;}img.resize{height:auto;max-width:80px;}...
WP code beautifier or Syntax highlighter

WP code beautifier or Syntax highlighter

I wanted to add code highlighter for the code examples on my blog in this site. Looked around for plugins and tried a few and finally found the one that works really well infact better than I imagine it to. The plugin I used was Crayon Syntax Highlighter. 2 cool things about the syntax highlighter is that it has its own input box to make each highlighter box custom and it also adds a button in the toolbar making it easy to add a “code box”   and the second cool thing about this plugin is that it has a lot of preloaded themes which you can select while adding a crayon code or in the settings page where you can preview the theme.   Enjoy your new crayon code....

Force refresh css js browser

Sometimes when you are making lots of changes to css and js it is annoying that the browser keeps your cache and is quite persistent about it. During development mode i use these for CSS and JS. The idea is that by adding a    ?v=<time> to the end of the filename  filename.css?v=<time> we make the browser thinks it is a different file therefore retrieves it instead of using the one in the cache. This is able to happen because of the GET http method. HTML <!-- FORCE REFRESH HTML --> <script type="text/javascript" src="sequences.js?v=nocache" ></script> 123 <!-- FORCE REFRESH HTML --> <script type="text/javascript" src="sequences.js?v=nocache" ></script>   PHP Force css and js refresh with php /* FORCE REFRESH */ <link rel="stylesheet" href="style.css<?php echo '?v=' . filemtime( get_stylesheet_directory() . '/style.css'); >" type="text/css" media="screen" /> <br> <!-- files must be php file (eg:filename.php) --> <script type=”text/javascript” src=”javascriptfile.js?v=<?php print(time()); ?>”></script> 1234567 /* FORCE REFRESH */ <link rel="stylesheet" href="style.css<?php echo '?v=' . filemtime( get_stylesheet_directory() . '/style.css'); >"  type="text/css" media="screen" /><br> <!-- files must be php file (eg:filename.php) --><script type=”text/javascript” src=”javascriptfile.js?v=<?php print(time()); ?>”></script> JS force css and js update with js <script> document.write('<link rel="stylesheet" type="text/css" href="bootstrap.css?version=' + Math.floor(Math.random() * 100) + '"\>'); </script> 123 <script>document.write('<link rel="stylesheet" type="text/css" href="bootstrap.css?version=' + Math.floor(Math.random() * 100) + '"\>');</script>   Hope this helps. Let me know if there are other ways as...
EasyRead Wheel of fortune

EasyRead Wheel of fortune

So my Co-founder Anna suddenly had an idea to give out promotion using a fun game of wheel of fortune. So we had decided to built one. First research Wheel of Fortune. There is 3 which i think is great. HTML5+ javascript http://www.dougtesting.net/winwheel http://tech.pro/tutorial/1008/creating-a-roulette-wheel-using-html5-canvas http://www.html5canvastutorials.com/labs/html5-canvas-wheel-of-fortune/ Jquery http://www.jquery4u.com/animation/jquery-wheel-fortune-demo/ Let’s get crackin I liked the Jquery one but the Jquery version had some bugs with IE .Decided to go with: http://www.dougtesting.net/winwheel Unzipped the whole folder into geteasyread Change info and remove the code to choose the strength Needed to force javascript refresh instead of keep clearing my cache but you could put your browser in developer mode as well. But i used these one liner instead. Forced javascript refresh <script>document.write('<script type="text/javascript" src="winwheel_1.2.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script> 1 <script>document.write('<script type="text/javascript" src="winwheel_1.2.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>   Ok great the wheel works, now we need user to enter their email and name before proceeding so that they don’t cheat. Used PureCss to built the page and form. Used Medoo as micro php framework for database. Important as it has security to Prevent SQL injection. Remember to turn on error report when developing. After modifying the pureCSS I needed some simple validation. Ok both items are working well individually. Now we need to merge them. First we need to be able to save inputs from form. Now that we are able to identify who the spinner is, we just need user to spin the wheel and we capture that and automatically save it. First we need to be able to save the value from the javascript spin. We do that by using javascript to save the value...

EasyRead Editor

After discovering after_the_deadline it is really powerful and you were able to add your own rules into it i thought this would be a great platform for EasyRead editor. but after trying to : -push the plugin to comment in the front. very hard to do because the plugin has a lot of custom effects which is not easily transfarable to the #comment textarea. because it has also the feature where it disable the html tags when you click on text as well as features when you click on preview where they are hard coded “events” and effects. – so i decided to just use the #content editor or the usual editor. so next step was to try to add our own rules. After looking from the plugin from jetpack and its original non-jetpack-independent plugin did I realise that the text are send to an external server to process and sent back to the editor that is a reason why there was a proxy.php file to allow this to happen. -so to create our own rule we need to setup our own server and rebuilt the models based on our new model. this is where i decided this was too much trouble at this stage.   Custom plugin So now we will write our own custom plugin to just underline hardwords. First step we need to create a database for our plugin to compare the hardwords. so apparently the standard database $wpdb(global) does not support creating custom database so we had to use our own custom class to do it. http://codex.wordpress.org/Creating_Tables_with_Plugins while creating database wanted to know how many words...