Toolbox and Resources

KonFusion · 30-05-2013 5:35pm #1

So I was thinking it'd be handy to have a list of resources & a 'toolbox' of sorts, containing things we use every day/week/month, such as Compass, Animate.css, Prefix-free, or maybe even ST2 plugins etc.

I'll come back to edit this in an hour or 2 when I finish compiling my list, but feel free to post your own in the meantime. Any handy links, the text editor you use, sites you visit regularly, plugins, JavaScript libraries, resourses etc and once we get the ball rolling I can add them all to this post along with my own. (Might need mod help to update once my editing-time-window closes.)

If we could categorise them in bullited lists that'd be handy. Akin to:

Responsive design resources:

Text editors:

Editor Plugins:

Wordpress plugins:

Ecommerce solutions/plugins:

CSS frameworks:

and so forth.

Thoughts?

KonFusion · 31-05-2013 11:30am

Taking longer than expected :pac:

Any sass users out there with custom mixin sets they want to share?

KonFusion · 11-06-2013 12:05am

Relates - http://net.tutsplus.com/articles/what-are-you-using/

Graham · 11-06-2013 12:42am

Current tools:

Text Editors:
Coda 2 for as text editor (just started trying it) synchs nicely with iPad version.
Cloud9 http://c9.io - online IDE

Rested - for testing JSON feeds
RegexMatch - for testing/writing regular expressions.

_ciaran_ · 11-06-2013 9:45am

Adobe Illustrator - mockups, logos and icons

Big Stock Photo - Stock Imagery

Sublime Text 2 - Text Editor

Codekit - Compiles sass & live browser refresh amongst other things

HTML5 Boilerplate or Bones (if wordpress) - framework

Broswerstack - Testing cross browser compatability

Responsive grid system or Skeleton - Responsive grid

Filezilla - FTP/SSH

Sequel Pro - MySQL db management

Github - Version Control

Trojan · 11-06-2013 11:50pm

KeePass - password management (open source)
Bitvise Tunnelier - SSH, sFTP - lovely client (commercial use free with conditions)

I'm not getting into that whole text editor debate again

redman85 · 03-07-2013 11:44am

http://zmoazeni.github.io/csscss/

Came across this handy ruby gem for finding redundant css declarations. Also supports SASS and LESS.

miralize · 04-07-2013 12:21am

For anyone using Fitvids these last few years, heres one that doesn't rely on jQuery

http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/

Also a very nice (free) icon set from Adam Whitcroft

adamwhitcroft.com/batch/

smcelhinney · 05-07-2013 11:04pm

_ciaran_ wrote: »

Codekit - Compiles sass & live browser refresh amongst other things

Agree with all except this one. Used Codekit for Sass then I copped on and just typed

sass --watch styles.sass --style=compressed

into Terminal, and never opened Codekit again.

miralize · 05-07-2013 11:10pm

smcelhinney wrote: »
Agree with all except this one. Used Codekit for Sass then I copped on and just typed
sass --watch styles.sass --style=compressed
into Terminal, and never opened Codekit again.

I still kind of like using Codekit. Its setup once and just run the app when you're developing.

_ciaran_ · 05-07-2013 11:51pm

It's the ability to open and save whole projects in codekit that makes it essential to my workflow. I couldn't be arsed inputting file directories into terminal*, especially when working on multiple projects, when codekit has all my projects loaded up already.

Also, live refresh FTW.

*Edit: Never mind, just realized you don't need to declare the directory when using command line.

yoyo · 07-07-2013 1:12pm

Notepad++ is great, have tried changing to Sublime Text which is also very nice but find notepad++'s search features to be better. NPP is also free

.

Nick

miralize · 12-07-2013 9:19pm

http://shouldiuseacarousel.com/

redman85 · 26-07-2013 11:59am

Livereload app for the mac is on sale today.

Was €9.99....now €0.89

iTunes link

http://livereload.com

Extremely useful app if your not to comfortable using the terminal.

miralize · 05-08-2013 9:06pm

Not working for ST3 users or for Pre-processing projects yet, but Emmet.io (the guys behind what was previously known as Zen Coding), released a cool tool that allows you to edit css in realtime in Chrome (or any device that uses web inspector) using ST2

http://livestyle.emmet.io

KonFusion · 06-08-2013 12:25am

https://github.com/scottjehl/picturefill

Picturefill - Responsive image solution.

-

http://modernizr.com/

Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

-

http://xscopeapp.com/ - On screen ruler thingy

-

http://yeoman.io/

Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.

-

http://smacss.com/ - Scalable and Modular Architecture for CSS

-

http://bourbon.io/ - Sass mixin library

-

Adobe edge inspect, for cross browser testing and what not - http://html.adobe.com/edge/inspect/

-

http://johnpolacek.github.io/superscrollorama/ - The jQuery plugin for supercool scroll animation

-

The Big Web Show - Podcast http://5by5.tv/bigwebshow

-

http://businessologyshow.biz/ - 'A podcast about the business of design and the design of business'. (In it's early stages so quality isn't as great as other 'big' podcasts, but it's been promising so far).

miralize · 06-08-2013 12:54pm

I'm addicted to looking at brand guidelines, spend a good 30 mins reading this Jamie Oliver one

http://dl.dropboxusercontent.com/u/107364/FRV-Brand-Guidelines-%28Final%29.pdf

KonFusion · 06-08-2013 1:48pm

miralize wrote: »

I'm addicted to looking at brand guidelines, spend a good 30 mins reading this Jamie Oliver one

http://dl.dropboxusercontent.com/u/107364/FRV-Brand-Guidelines-%28Final%29.pdf

Got any more? Love these.

tricky D · 06-08-2013 2:20pm

miralize wrote: »

I'm addicted to looking at brand guidelines, spend a good 30 mins reading this Jamie Oliver one

http://dl.dropboxusercontent.com/u/107364/FRV-Brand-Guidelines-%28Final%29.pdf

http://www.sitepoint.com/create-a-style-guide-for-your-brand/

Used to enjoy doing these up and like yourself, reading others'.

KonFusion · 06-08-2013 2:29pm

miralize wrote: »

Not working for ST3 users or for Pre-processing projects yet, but Emmet.io (the guys behind what was previously known as Zen Coding), released a cool tool that allows you to edit css in realtime in Chrome (or any device that uses web inspector) using ST2

http://livestyle.emmet.io

Jsbin has a similar feature too - https://www.youtube.com/watch?v=nWRf570IJ68&feature=player_embedded

miralize · 06-08-2013 8:31pm

KonFusion wrote: »

Jsbin has a similar feature too - https://www.youtube.com/watch?v=nWRf570IJ68&feature=player_embedded

Yeah I saw that last year, Remy Sharp is a JS god.

I like how it works for production sites though

redman85 · 06-08-2013 9:17pm

KonFusion wrote: »

http://smacss.com/ - Scalable and Modular Architecture for CSS

KonFusion do you us this approach for css? How do you find it? Is it essential another name for OOCSS?

Read the book a few weeks ago and thinking of using this method but would like to get someones experience with it.

KonFusion · 06-08-2013 9:51pm

redman85 wrote: »

KonFusion do you use this approach for css? How do you find it? Is it essential another name for OOCSS?

Yup, I think it's great, and yup.

If you're using Sass, check out this recent post: http://thesassway.com/advanced/modular-css-an-example

Read the book a few weeks ago and thinking of using this method but would like to get someones experience with it.

Not sure how I can 'explain' my experience with it. Good? ha. Can you rephrase that question maybe and I might be able to better answer.

As Snooka says:

! Feel free to take this in its entirety or use only the parts that work best for you. Or don’t use it at all. I understand that this won’t be everybody’s cup of tea. When it comes to web development, the answer to most questions is “it depends”.

So, use it. If its not for you then nothing lost. There's no 'one true way'. It's just another tool in the box. I think you'll find it beneficial though, especially if you work on a team.

You may even find you've already been doing something similar anyway.

redman85 · 06-08-2013 10:40pm

KonFusion wrote: »

If you're using Sass, check out this recent post: http://thesassway.com/advanced/modular-css-an-example

Thanks for the link. Bookmarked and will give that a read tomorrow.

Came across this video the other day, some good tips when using Sass and OOCSS...

https://www.youtube.com/watch?v=GhX8iPcDSsI

Mister Man · 10-08-2013 2:21am

Seen this website yesterday - http://subtlepatterns.com/
Lots of nice patterns on there for designers. Could be really handy.
They just released a plugin which allows you to get all the patterns straight to your photoshop without any of the messing around. It's 11.99$ currently. I would pay for it, if the updates to the library became for frequent. Worth keeping an eye on.

miralize · 10-08-2013 2:41am

Its been around for a few years. They used to have a Photoshop .pat file for free.

miralize · 10-08-2013 4:21pm

Mentioneda few days before that I wanted something like this, but its here now! Edit Sass in realtime

http://usetakana.com/

redman85 · 10-08-2013 7:31pm

miralize wrote: »

Mentioneda few days before that I wanted something like this, but its here now! Edit Sass in realtime http://usetakana.com/

Whats the difference between these apps and running the grunt live reload task?

miralize · 10-08-2013 7:34pm

redman85 wrote: »

Whats the difference between these apps and running the grunt live reload task?

No save button in between I think. Thats what I assume anyway. Theres no point in a separate app otherwise

redman85 · 10-08-2013 7:44pm

miralize wrote: »

No save button in between I think. Thats what I assume anyway. Theres no point in a separate app otherwise

Cool, saving has become second nature to me at this stage in sublime. Its nice to see new apps released tho

miralize · 10-08-2013 7:45pm

redman85 wrote: »

Cool, saving has become second nature to me at this stage in sublime. Its nice to see new apps released tho

Ahh now it'd be great to have browser and IDE side by side and seeing the changes in realtime..

Video here

redman85 · 13-08-2013 3:21pm

git plugin for sketch - https://github.com/almonk/SketchGit

Also layervault released a free version of their version control for photoshop - https://layervault.com/

Toolbox and Resources

Comments