Websites | Photography | Video Editing | 3D Animations

From the Blog

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’;