Information overload

For me to remind myself some useful things I have learnt along the way and contribute back to the world wide web

Bulk compress and optimize image for web

Optimize Images Bulk image compression Mac and Windows (Before Upload) If you have some high res images and wants to compress them before upload photoshop is one of the more powerful tool to do your compression. However to do it in bulk quickly I have found a better tool xnConvert. It does compression and resize. Image compression vs file compression Firstly do not get confuse with image compression and files compression they are different types of process altogether. Images compression (Lossy) uses algorithms to determine how best to reduce data/pixels to maintain the same viewing effect on a screen. Where else a file compression finds ways to reduce file size by looking at repetitive data stream and grouping them together and it works for any types of files. After a file is compressed they are commonly save as file types  zip, tar, or gzip depending on their compression methods. Compression criteria There are many criteria to reduce image file size. I typically work with these 3: 1 – Size Size is tricky for images you want to keep at full width or full height and responsive, I typically just use the ratio of 1920×1200 for maximum prettiness and 1280×1024 for most cases and 800×600 for maximum file save (like a mobile intensive site). Anything else with a consistent size you can just use the chrome plugin MeasureIt  to measure the size you need in pixels. 2 – DPI We wont go into explaining Dots Per Inches (DPI) you can google and read up on that. Simply put , it is the amount of Pixels Per Inch (PPI) which is more commonly known as...

Increasing WordPress upload limit in digitalocean

Server : Ubuntu WordPress on 14.04 –  automatic wordpress install by digitalocean ACTIVITY Was exporting posts from old site and importing into new site, few things I learned: WordPress exports in xml format images link are included So when you import on the new site it will automatically download the images with url provided in the xml export PROBLEM There was a memory limit in uploading it was just 8mb but my file was 8.7mb. SOLUTION So solution was to increase the limit. [1] Login to your digitalocean server, if you dont know how easiest way is to access the webconsole by digitalocean Vim ../etc/php5/apache2/php/ini to find your php.ini refer here.[3] (VIM cheatsheet) 1. Try adding this line to your wp-config.php file: define('WP_MEMORY_LIMIT', '64M'); 2. If you have access to your PHP.ini file, change the line in PHP.ini If your line shows 32M try 64M: memory_limit = 64M ; Maximum amount of memory a script may consume (64MB) post_max_size = 64M; upload_max_file_size = 64M; 3. If you don't have access to PHP.ini try adding this to an .htaccess file: php_value memory_limit 64M 12345678910111213  1. Try adding this line to your wp-config.php file:define('WP_MEMORY_LIMIT', '64M'); 2. If you have access to your PHP.ini file, change the line in PHP.iniIf your line shows 32M try 64M:memory_limit = 64M ; Maximum amount of memory a script may consume (64MB)post_max_size = 64M;upload_max_file_size = 64M; 3. If you don't have access to PHP.ini try adding this to an .htaccess file:php_value memory_limit 64M  Remember to restart the apache server sudo service apache2 restart REFERENCE [1] https://wordpress.org/support/topic/importing-blog-larger-than-8mb-from-wordpresscom-to-wordpressorg [2] https://www.digitalocean.com/community/questions/php-memory-limit-wordpress-xml-rpc-and-large-files [3] http://stackoverflow.com/questions/8684609/dude-wheres-my-php-ini/24342463#24342463...

Checking if your website is down for you and from other countries

So recently I had a problem with a website not working from another country but it worked fine for me. So I started a few routine checks. First try to see if its down just for you or also a US server “: Is it up or just me” : http://www.isup.me/ Net you can try a proxy : https://hide.me/en/proxy to see if your ip was blocked   Last you can try this online ping that allows one to check ping from many multiple other countries.: https://cloudmonitor.ca.com/en/ping.php Now if you want to consistently making sure your site works for all other countries as well you can use pingdom....

WordPress editor missing

Was working on a wordpress site when i found that the theme editor under appearance was missing. Started to google it and some common reasons was because: Multisite enabled role editor  plugin wp-security plugin have it disabled with an option to turn on. but for my site it was because it was disabled by hard code in the wp-config.php file define(‘DISALLOW_FILE_EDIT’, TRUE); //Disable File Editing This is a good security practice. so turn it off if you dont need it....

Digital Ocean + Server Pilot + wordpress setup

I had always thought of going with Amazon Servers (AWS) when I needed more power from my servers or else i just stick to my server with Exabytes or my personal server with Fatcow . But recently I have discovered Digital Ocean a Virtual Private Server. Quote from wiki A VPS runs its own copy of an operating system, and customers have superuser-level access to that operating system instance, so they can install almost any software that runs on that OS. Basically you have your own computer instead of sharing it with other people. The interface for this is so beautiful I can’t help but want to use it and its affordable! The reason for me to pick Digital Ocean instead of AWS is because of its price and easy setup interface. At 10$ a month and you can upgrade it as you need it ! If you want to get 10$ which means 1 month free test account use my reference link here. Awesome! But using the VPS means you have to do a lot of things yourselves and you don’t have cpanel. But you can install it if you want to pay the monthly price for it. There are a lot of other choices besides cpanel out there free and paid. So i did some research… http://www.gnutomorrow.com/best-free-web-hosting-panel-cpanel-alternative/ http://en.wikipedia.org/wiki/Comparison_of_web_hosting_control_panels After some research I have decided to go with ServerPilot for these reasons: Pretty! Developed with digital ocean in mind therefore easy to setup for DigitalOcean Server pilot is cloud based server management. This means this is 0% of your CPU time & resources is being used by the control panel! How...

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;}...

Merge separated illustrator path points

We were trying to export some 3d Drawings from Solidwords to eps file for the old router machine to cut. To do that we have to first export as dwg. In the dwg file our paths we all broken. We had group them together to allow the router to cut properly. To do that first select all the lines that you need then open Pathfinder and use the ” divide ” feature and it will merge. I don’t understand how this works as the name is the opposite of what we are trying to do. but it works 😀 hope this helps...

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 UX Research.

An Emailed i sent to a friend about UX research i was doing for EasyRead. Hi Shawn, As promised at lunch today. These are due to research I was doing for EasyRead. Some UX stuff. http://uxmovement.com/forms/8-reasons-users-arent-filling-out-your-sign-up-form/ https://www.behance.net/gallery/A-Readable-Wikipedia/14274791 https://www.behance.net/gallery/Questure/11136135 Interaction stuff https://www.behance.net/gallery/INTERACTION-DESIGN/14941337 http://uxdesign.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/   Some nice sites: http://www.distancetomars.com/ http://yourpower.panda.org/  http://www.charitywater.org/ Portfolio behance dribble.com http://www.hongkiat.com/blog/web-designers-on-dribbble/ http://www.hongkiat.com/blog/ui-designer-portfolios/ http://www.hongkiat.com/blog/responsive-portfolios-for-inspiration/ some reference: http://www.awwwards.com/ http://www.cssawards.net/ http://www.cssdesignawards.com/ http://www.csswinner.com/ contract stuff http://www.smashingmagazine.com/2013/04/03/legal-guide-contract-samples-for-designers/ Smashing magazine is awesome btw Tools http://html.adobe.com/edge/animate/ (thanks to Adelyn) Hope you find it useful. cheers, sky Best UX for EasyRead to look up to is www.medium.com and...

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...

Saudee website freelance

Developers for my saudee website was having problems getting normal navigation to work. Had to look into the problem myself because it was very close to dateline. Installed plugin WP Editor which has the advance editor(using mirrorcode) for the template editor. Installed plugin Blackbox for debugging but was clashing with the site so I disabled it. Found that the problem was bookblock.  Although this was a really cool javascript library for the flip effect it was not very extensible in terms of navigation. It did not have a class to just jump to lets say page 10. what it does is it loads all the posts object and also all navigation as an empty span. These buttons are not numbered or has id in anyway. The script will automatically detect which button you press and then figure out which page that is. Very cool for a normal button based site, but if you wanted to say jump to a page by code it is a problem. MY solution was to use the jump to function in bookblock in the header during document load to jump to page value saved in cookie initiated from the navigation from previous page. Bascially all navigation not from this page will jump to this page with value already saved in cookie. the below method using post could not work. &lt;script type="text/javascript"&gt; var php_var = "&lt;?php echo $php_var; ?&gt;"; &lt;/script&gt; 123 &lt;script type="text/javascript"&gt;   var php_var = "&lt;?php echo $php_var; ?&gt;";&lt;/script&gt; But we are accesing the page as categories. domain/categoryType (cant append ?variable=value). so next had to use cookie method instead. 2 ways to set a...

EasyRead Simplifier Editor

We needed an editor for EasyRead for simplifiers to be able to edit side by side. So decided to use the comment system as the editor. single.php for the post page. In there we modify the css and divs to look like what we need. Assuming only one type of category I had used a temporary hard coded check to check if the post is of category “simplify” if it was then show the editor layout. [code language=”php”] <?php $categories = get_the_category( $id ); if( $categories[0]->cat_name <> “Simplify” ){ //do something} ?> [/code] Found I could load different templates of comment so now we can load a different template for the comment for simplifying [code language=”php”] if (get_option(‘askit_show_postcomments’) == ‘on’) comments_template(‘/comments-simplify.php’, true); [/code] Was working on the editor css when I ran into issue of CSS being stubburnly cached. Googled the issue and found a CSS force refreshing by adding a timestamp to the css link to force the browser to think it is a new css file. Change this: [code language=”html”] <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” /> [/code] to this [code language=”html”] <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); echo ‘?d=’ . filemtime( get_stylesheet_directory() . ‘/style.css’); ?>”  type=”text/css” media=”screen” /> [/code] DEBUG Remember to turn on debug in wp-config it also has a debug log saved in wp-content DIVS SIDE BY SIDE (source) First tried the display:inline; method but didn’t work.then used float and it worked! finally. &lt;div id"container"&gt; &lt;div id="leftcolumn"&gt;&lt;p&gt;text goes here&lt;/p&gt;&lt;/div&gt; &lt;div id="rightcolumn"&gt;&lt;p&gt;text goes here&lt;/p&gt;&lt;/div&gt; &lt;div class"clear"&gt;&lt;/div&gt; &lt;/div&gt; 12345 &lt;div id"container"&gt;&lt;div id="leftcolumn"&gt;&lt;p&gt;text goes here&lt;/p&gt;&lt;/div&gt;&lt;div id="rightcolumn"&gt;&lt;p&gt;text goes here&lt;/p&gt;&lt;/div&gt;&lt;div class"clear"&gt;&lt;/div&gt;&lt;/div&gt; CSS 1 CSS #leftcolumn { width: 300px; border: 1px solid...

Accident Sketcher [Flash][AS2][PHP]

Flash actionscript 2 based drag and drop accident visualizer. Can’t Give out too much information about it but here is the complete result. Will provide tutorials on different parts of the program one stage at a time.because this requires php can’t directly embed here. just follow the link below. ACCIDENT...

Button less Bump Sensor [C , Atmel AVR]

Team project 1 Documentation Report 3 (by Sky)Report 5 (by Steve-incomplete version) 1. PROBLEM DESCRIPTION There are several specifications to be met in designing the product. They are:– The product must be battery powered and only standard alkaline can be used.– The batteries must last for 3 months– The device must be able detect phone tone to set password and also to deactivate the alarm– The device must be button less.– The device must be within the size restriction of 70mm x 70mm x 70mm– The total cost of the product must come in under $100. With the advancement in modern technology, it would be a great way to build a portable security device to help you in times of event when someone tired to steal away your unattended item. The objective of building this project is to provide a convenient way of bringing a portable security unit with you all the time. The advantages of building this project are that it is a small and portable device which can be easily carry with you. It will provide security for your unattended item when attached. Alarm will be trigger immediately when the item is being remove or taken away. Components · http://www.farnell.com/datasheets/2813.pdf ( DTMF MT8870 )· http://www.farnell.com/datasheets/42035.pdf ( ATTINY26L-8PI )· http://www.farnell.com/datasheets/29827.pdf ( Microphone )· http://www.farnell.com/datasheets/119.pdf ( Sensor )· http://www.avrfreaks.net/index.php?module=FreaksAcademy&func=viewProjects ( Many coding references were review from this website...

Schimmelbusch Music Video

A music video made for schimmelbusch for their song “The clock stops once” Lesson learnt, when doing animation that you will want to export as a movie. Do not use anything fancy like actionscripting or loops in movie clips. Do the standard on main stage animation. Anything else you will have to use a record while the swf is playing converters. which was what i have done. Quality would be sacrificed. Enjoy 😀 Youtube FLV version SWF...

xcelerate & macrae lawyers identity

Designed logo’s for xceleratenow , xcelerate legal ,macrae lawyers and uplifted xcelerate insurance recoveries’s logo. Designed name cards ,banners and website. This is my prefered version of the macrae lawyers banner 😀 some wallpapers used in the office www.xceleratenow.com.au The first web-design i did when i first joined xcelerate in SEP 2008. www.xir.com.au [xcelerate insurance recoveries] Modified from a template from flashden. www.xceleratelegal.com.au actionscript water ripple effect and fish follow mouse follow fish effect....

Image Processing II [Matlab Image Processing][Flash]

elec4600 – Signal and Image Processing.There were 5 Assignments all together in this subject.Shown below is 2 of the more interesting assignments. 1. Detecting Road Lines with Hough Transform and some custom filtering Result from Hough Transform Algorithm.Lines are then selected based on some distinctive characteristic. Remaining lines are then used to find the vanishing point.The vanishing point is then used to do more line selection filtering.Which gives the final result seen on the right below. 2. Blood Vessel Size – (Uses the Snake Method). Detection from 10 still imagesUsing the snake or rubber band idea,where a shrinking band is used to wrapthe outer layer of the vessel ,and an expandingband is used to outline the inner layer of the vessel.This is repetitively implemented on 10 imagesof the blood vessel. which is then wrapped togetherto produced a short clip seen here in a flash file....

THESIS | [J2ME ] Mobile Phone Barcode Reader (internal camera)

{ THESIS POSTER. } Brief Description A one year duration thesis. The main goal was to make a barcode scanner utilizing the inbuilt camera. There were many ways in implementing this feature. The main idea i have decided on was as a stock management tool. Where home users to medium sized business such as those on ebay can use this tool to update the database in their computer automatically. Basically the user just need to capture the barcode on the product they are going to ship out or is sold and it will automatically update the database, more examples will be such as defect or a new product or if user wants to edit details of a certain product. This software is made with J2ME(JAVA) and runs on s60 and s40s. Currently trying to improve recognition on the s40 which has bad resolution and low memory. BaToo The main program is based on Batoo (Barcode tool kit) by Robert Adelmann, http://people.inf.ethz.ch/adelmanr/batoo/ Abstract The Mobile phone has evolved from being a simple communication device to become a multipurpose device with advanced features such as camera device, video capabilities, and mp3 player. Using the internal Camera Device we will implement the Barcode Scanner. This research is not intended to replace nor compete with the laser barcode scanners but instead to introduce a different variant of usage of the barcode and the camera device. A Mobile phone Barcode scanner, although slower in recognition speed provides better mobility, flexibility and simplicity. Targeting home users and home-based online business owners, this technology provides a better solution as all they need is to install a...