Websites | Photography | Video Editing | 3D Animations

Tips and tricks

Apr
27
Posted by Paul Costan at 6:57 pm

Only recently I needed to access my iMac GUI whilst I was away aboard. I’ve always ssh to my iMac being a geek. But for this particular occasion I needed to demo things on my iMac.
Anyways I did a little research and here are my findings and conclusion.

Like I said I’ve always ssh in to my box via VPN, takes awhile to setup if you know what you’re doing, but very useful if you want connect to your home network whilst your in another country.

VNC Viewer

If you have VPN the best app to use is VNC viewer and this is free.

On your Mac you first need to download VNC Connect client. See step by step instructions here.

Next download VNC Viewer on you iPad/iPhone. If you sign up and add your mac details and your way!

Usability is ok, I find it a bit slow compare to the other Remote Desktops apps. I feel it’s very graphic heavy and may eat in to your data plan.

Teamviewer

Teamviewer is free for personal use only… But you if you have several machine you like to connect to, you are advice to purchase a licence, which I think is fair.

Teamviewer is very simple to install. Again it is best to sign up and user your login to your both desktop and mobile apps:
Desktop – Teamviewer client
iPad/iPhone – Teamviewer app

By far, I think the usability on the iPad/iPhone is very simple compare to all the rest for Remote Desktops apps. The app is optimise to your reduces your mobile bandwidth.

Google Chrome Remote desktop

Google is new to the game. I know Google had done similar in the past using their web browser, but this did not fly too well as it was very sluggish. Chrome Remote Desktop is the new and improve version. Works very well. You do not need VPN enable. You can access again on your iPad/iPhone.

The navigation works very similar to VNC viewer. The app is also optimised to your reduces your mobile bandwidth.

Apple Screenshare

Apple Screenshare is pretty recent with the new macOS Sierra. Screenshare is already intergated to the system. all you need to do is make use you are signed in to iMessage and thats it.

Search Screenshare by holding down Command and spacebar and type in ‘Screenshare’. put in the ip address if you have VPN and your in.

The other way is by sharing your screen or taking control of your friend/family desktop is by going to iMessage select the your user message and click on the ‘i’ icon and you will see the overlapping windows icon. Click on this and you will be presented the two options. Control or view.

Join.me

Is Join.me is simple Remote desktop app which is web based.

Jul
03
Posted by Paul Costan at 1:09 pm

I had issue running Drush after upgrading MAMP 3.0.5 on PHP5.5.10

To fix this you need to edit .bash_profile. Run these commands in terminal

sudo nano ~/.bash_profile

Add the following line

export PATH="/Applications/MAMP/Library/bin:/Applications/MAMP/bin/php/php5.5.10/bin:$PATH"

Exit and save… next run

source ~/.bash_profile

Restart machine…

Job DONE! to test drush is working correctly

drush status

Mar
24
Posted by Paul Costan at 3:19 pm

1. Sublime Text 3
The must popular IDE to write up your HTML and CSS.

2. iTerm / terminal
All front-end mush have some knowledge of using terminal for example using Compass to compile your SASS to CSS. Or using Git and Drush commands to commit or revert features.

3. Adobe Photoshop
As a front-end developer you need Photoshop to help create your fabulous and create designs.

4. Adobe Fireworks
Fireworks is a great way to export your prefect graphical elements such as icons in to PNGs or JPG. Firework can optimise this graphic to reduce download time.

5. Adobe Illustrator
Illustrator is a prefect tool to create your vector to SVG… commonly used now for retina displays and mobile devices.

6. VMWare Fusion for Mac / VMWare Player for PC
To test IE browsers you will need virtual machines. Starting from WindowsXP (ie6/7), WindowsVista (ie8/9) Windows7 (ie9/10) and Windows8 (ie11). Optionally you can install Ubuntu, centos, android and so forth.

7. Browsers – Google Chrome / Firefox / Safari
All your broswers should now have debugging tools to debug javascript, html and CSS. Firebug is a great extensions to debug code. Webdeveloper tools extension is a good one to.

8. MAMP for Mac / xamp for PC
These apps are a great tool to recreate your web environment on your local machines; which is a web service including Apache / MySQL (LAMP)

9. Github / SourceTree / Subversion / Tower
All developers needs Repository to store all their code files. Pulling and Pushing your files to github cloud Repository is the best way to share and collaborations.

10. Balsamiq / Auxure wireframes
Awesome tools to build up quick wireframes for UX

Mar
07
Posted by Paul Costan at 11:21 am

Here are my top tips for frontend developers who works with Sublime

1. Sorting CSS
By highlighting your CSS you can hiting F5 to organise your css in alphabetical order.

subl

2. Command Palette
Installing syntax i.e HTML,HTML5, CSS, CSS3, LESS and SASS snippets which helps you code up fasters

3. Tab Spacing
Convert indentation tab spacing to two spacing.

Mar
06
Posted by Paul Costan at 4:01 pm

I’ve been using Compass for awhile now… the best tool to compile your SASS. Below are some plugins I use to help create that perfect website.

To get started you first need to install ‘Ruby’ and ‘Compass’ and the below plugins… So when you start writing up your SASS you can call in Mixins from any of those plugins. The rest is magic!!!

Insert these to your ‘config.rb’ file.

# Require any additional compass plugins here.

require ‘compass-recipes’
require ‘compass-css-arrow’
require ‘breakpoint’
require ‘susy’
require ‘rgbapng’
require ‘compass-normalize’
require ‘animate-sass’
require ‘toolkit’
require ‘sassy-buttons’
require ‘font-awesome-sass’
//require ‘bootstrap-sass’ // Some of you would like to use Bootstrap framework

————————————

Add these to your ‘_layout.scss’ file.

//Compass Mixins
@import ‘compass’;
@import ‘compass/reset’;
@import ‘breakpoint’;
@import ‘compass-css-arrow’;
@import ‘rgbapng’;
@import ‘bootstrap’;
@import ‘toolkit’;
@import ‘sassy-buttons’;
@import ‘font-awesome’;
@import ‘susy’;
@import ‘toolkit/fluid-media’;
@import ‘toolkit/nested-context’;
@import ‘animate/shared’;
@import ‘animate/animations/attention-seekers’;
@import ‘animate/animations/flippers’;
@import ‘animate/animations/fading-entrances’;
@import ‘recipes/effect/ribbon’;

Mar
07
Posted by Paul Costan at 5:07 pm

Here is a tip how to use div to crop your images and keep its dimensions.

CSS3

<code>
.crop-image-90×90 {
border-bottom: 2px solid #E17D00;
float: right;
margin: 0 0 0 10px;
max-height: 90px;
overflow: hidden;
width: 90px;
}

.crop-image-90×90 a img {
width:auto;
height:90px;
padding:0px;
float:left;
}</code>

HTML:

<code>
<div>
<a href=”#”>
<img title=”Generic image” alt=”Generic image” src=”/file_source/images/promo_conduct.gif”>
</a>
</code>

Sep
04
Posted by Paul Costan at 10:55 am

Hi guys, if you are looking for a quick site build from scratch, i would advice to download Twitter Bootstrap or Skeleton to help you get on your way. You do not need to be an expert in html or css, but you need to have some knowledge to take full advantage. Both Twitter Bootstrap and Skeleton front-end frameworks works are great, but I think Twitter Bootstrap has the upper-hand, in terms of use of JavaScript, JQuery libraries and icons. Both frameworks has the 960 grid, responsive and fluid system.

See links below and let me know what you think?

http://twitter.github.com/bootstrap/index.html

http://www.getskeleton.com/

Jul
26
Posted by Paul Costan at 9:34 am

Hi guys,

If you’re having problems with GIT after installing Mountain Lion. You need to do the following:

1. Make sure you install and update ‘Xcode’

2. Open up Xcode and go to Xcode > Preferences > Downloads.

3. Install the following ‘iOS 5.0 Simulator’ and ‘Command Line Tools’.

 

 

 

 

 

 

 

4. After install complete fire up ‘Terminal’ and Presto! You’re backup and running.

Jul
05
Posted by Paul Costan at 11:39 am

Here is a tip how to create and import database dump to your MAMP phpMyAdmin using Terminal command line:

/Applications/MAMP/Library/bin/mysql –host=localhost -uroot -proot –default-character-set=utf8 DB-NAME < /Users/name/Desktop/sqldump.sql

Copy and paste line below to access DB:

/Applications/MAMP/Library/bin/mysql –host=localhost -uroot -proot

 

Jun
27
Posted by Paul Costan at 10:24 am

To add icon to your homescreen. you need to create graphic to 58px x 58px

 

with the half glare:

<link rel=”apple-touch-icon-precomposed” href=”img/icon.png”/>

 

plain:

<link rel=”apple-touch-icon” href=”img/icon.png”/>

 

Loading splash page – graphic need to be 320px x 460px:

<link rel=”apple-touch-startup-image” href=”img/splash.png” />

 

Make your web app / website full screen:

<meta name=”apple-mobile-web-app-capable” content=”yes” />

 

Status bar style:

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” /><br />

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” /><br />

<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />