Grunt, Gulp, Sass, Sublime, Coda, MAMP, FirefoxDeveloperEdition, Git, etc

The CMS Questions
30

I love reading lists like these as it always inspire me to find new tools/methods.

My current set-up is as follows:

###Hardware

  • iMac 27 Retina 5k (32 gb ram, 1tb ssd)
  • Macbook Pro 13", late 2012 (8 gb ram, 512gb ssd)
  • iPad 4 Retina / iPhone 6 / Samsung S4 - all mainly for testing
  • A couple of laptops running Win7, Linux Mint, Ubuntu & Crunchbang, also for testing things

###Software

  • Vagrant (via virtualbox) running dev servers, in my case most often Ubuntu Server, nginx, php5-fpm etc
  • Grunt as a task runner, mainly for compiling SCSS (Bourbon, Susy as well), concatenate JS, minification, basic image edits etc
  • CodeKit for when I don’t use Grunt (depending on project and colleagues)
  • Brackets (+ some really nice extensions) is my current main editor
  • I struggle to run a command-line without zsh these days so guess I should list it too
  • Transmit for the few times I actually FTP these days
  • GitHub
  • Dropbox
  • Photoshop
  • Lightroom
  • TypeKit
  • Main browser for surfing: Chrome
  • Main browser for dev stuff: Firefox
  • Testing in the usual suspects (Safari, IE, mobile devices)
  • Evernote for notes, planning, content, to-do etc (went all in, only way it makes sense) + Gneo
  • Slack for communication updates from team
  • Dash for reading documentation on things
  • Gmail for most e-mail things

Other Services

  • Digital Ocean
  • Rackspace Cloud Servers
  • Amazon AWS
  • Arq (backups of my Macbook Pro to AWS) - I use an Airport Time Capsule for iMac atmo

For my deployments I most often use (SSL) webhooks on GitHub which deploys to different servers depending on GitHub branches so haven’t really seen the need for external deployment services just yet, though I might get there some day. :slight_smile:

31

Hey folks!

  • MacBook Pro 15" Retina, Late 2013, 16GB RAM, i7, 500GB SSD
  • Cinema Display 27"
  • iPhone 6
  • iPad 4 Retina
  • Couple of external harddrives of course, the most important one: TimeCapsule with 2TB for backups.
  • Some old brother printer for clients who insist on invoices on paper…
  • Mac OS X Yosemite
  • VirtualBox and Windows 7 for testing and taxes
  • Apple Mail for mailing – this used to change quite often in the past, still not 100% comfortable with Mail, but for me the best solution out there
  • A weird combination of Fantastical 2 (awesome) and Wunderlist (even more awesome) for managing dates and to-dos (not the combination it self is weird, but the way I’m using those two)
  • Dropbox and ownCloud for file sharing and cloud storage
  • Adobe CC with Typekit subscription for designing
  • SublimeText 2 for coding
  • CodeKit for preprocessing, minification and that kind of stuff
  • Transmit as FTP client
  • Tower as Git-client
  • MAMP Pro for several local servers
  • Of course all kind of different browsers, but for usual surfing I’m still used to Safari
  • Numbers for all number-related stuff as “preparation tool” (e.g. invoices, calculations, taxes etc.)
  • Fluid for some better web apps
  • Spotify subscription for a nicer working atmosphere…
  • Bartender for keeping my menubar clean – can’t understand why it is so unknown (or at least why I don’t see it more often)
  • SCSS as preprocessor without any other dependencies or frameworks (like compass, inuit.css or thinks like that)
  • Wordpress as my main CMS … oh wait … :wink:
32

Hardware
13" MacBook Air - Mid 2012
8 GB RAM
250 GB SSD

Software
OSX: Yosemite
Languages: HTML, CSS, JS, PHP
Editors: PHPStorm, WebStorm, Sublime Text 3
Preprocessor: grunt
Design: Adobe Tools
Documentation: YUI Docs
Terminal: Terminal with ZSH
Git Hosting: BitBucket, github
Git Client: SourceTree
Diff Tool: Kaleidoscope
Local Server: MAMP, VB
Default Browser: Chrome
Project Managment: Attask
Hosting: is secret :smile:
Others: 1Password 5, Transmit

33

Another odd PC user for the mix…

Hardware:
HP laptop with Windows 8.1 Pro
23in monitor
Surface Pro

Software, developing:
PhpStorm
PyCharm
Visual Studio (for .NET work)
Postman for Chrome
SourceTree
Composer, Bower, Nuget, NPM, Gulp (learning)

Software, utility:
Beyond Compare
Shotty

Software, time/task management:
Trello
Todoist
Toggl
Rescue Time

Software, other:
Chrome
MarkdownPad
Creative Suite
OneNote

34

As I’ve been doing more and more work in Terminal, I thought I’d share a couple scripts that are helpful for my workflow.

I’m not going to list my whole suite of tools except for those that give these scripts a bit of context -

  • I use the PHP built into Mac OS X,
  • Compass for SASS preprocessing
  • git-ftp for deployment (backed up with Transmit - git-ftp doesn’t support submodules so I do that manually for now)

This is in my .bash_profile, and saves me the five extra seconds it takes to cd to the project in two terminal windows and have the second one initialize compass.

start () {
	if [ "$1" ]
	then
		compass="cd ~/Sites/$1/assets; compass watch"
		osascript <<EOD
 tell application "Terminal" to do script "$compass"
EOD
		cd ~/Sites/$1
		git status
	else
	  echo "Specify a project"
	fi
}

This is a shell script for initializing a new kirby project.

$ sh .init.sh newsite

I clone the plainkit, remove the origin to detach it, add submodules, and make some changes to Kirby’s defaults by overwriting them with files my init folder (my customized plainkit, essentially) - this includes some SASS stuff, a copy of a .git-ftp script (below).

Finally, it opens my hosts and httpd-vhosts.conf files where I manually type in the new local url (I suppose there is a way to do this in the script but I wanted to be a bit more careful with system files)

#!/bin/bash

if [ "$1" ]
then
git clone --recursive https://github.com/getkirby/plainkit.git $1
cd $1
git remote rm origin

# Add submodules
git submodule add git@github.com:storypioneers/kirby-selector.git site/fields/selector

# Make required folders
mkdir thumbs assets/avatars site/accounts ~working

# Replace defaults with preferred setup, add SCSS, and scripts

rm -rf site/snippets site/templates 	# remove site snippets & templates
rsync -rtv ../init/ .    				# Add SCSS, scripts, preferred default templates

# replace sublime project with sitename

mv ~working/init.sublime-project ~working/$1.sublime-project

# replace push script with new sitename
sed -i '' "s/sitename/${1}/g" .git-push.sh 

# Make initial commit

git add --all
git commit -mv "Initial Commit"

# Open apache files
subl /Volumes/Macintosh\ HD/private/etc/apache2/extra/httpd-vhosts.conf /Volumes/Macintosh\ HD/private/etc/hosts
read -p "Restart Apache [press enter]"
sudo apachectl restart

open ~working/$1.sublime-project
else
	echo "Specify a target directory"
fi

Lastly, my git-ftp and updating kirby scripts:

#!/bin/bash

if [ "$1" = "init" ]
then
  git ftp init --user <my username> --passwd <my password> --verbose ftp://<subdomain URL>
else	
  git ftp push --user <my username> --passwd <my password> --verbose ftp://<subdomain URL>
fi

#!/bin/bash

git submodule foreach --recursive git checkout master
git submodule foreach --recursive git pull

git add -A
git commit -am "Kirby Update"
2 Likes
35

Hardware:

  • MacBook Pro 13" 2011
  • 8GB RAM
  • 250GB SSD

Sublime Text 3:

  • Plugins:
  • Bracket Highlighter
  • Color Picker
  • Emmet
  • GitGutter
  • HTML5
  • SideBarEnhancements
  • SideBarFolders
  • SublimeLinter (php&scss)
  • Theme:
    • UI: El Capitan
    • Color: Tomorrow Night Eighties
  • Config:
    {
      "auto_complete_commit_on_tab": true,
      "bold_folder_labels": false,
      "color_scheme": "Packages/User/SublimeLinter/Tomorrow-Night-Eighties (SL).tmTheme",
      "dictionary": "Packages/User/dictionaries/German.dic",
      "ensure_newline_at_eof_on_save": true,
      "fade_fold_buttons": false,
      "folder_exclude_patterns":
      [
        "node_modules",
        ".git"
      ],
      "font_face": "Source Code Pro",
      "font_size": 13,
      "highlight_line": true,
      "highlight_modified_tabs": true,
      "ignored_packages":
      [
        "Vintage"
      ],
      "line_padding_bottom": 1,
      "line_padding_top": 1,
      "rulers":
      [
        80
      ],
      "spell_check": false,
      "tab_size": 2,
      "theme": "El Capitan.sublime-theme",
      "translate_tabs_to_spaces": true,
      "trim_trailing_white_space_on_save": true,
      "word_wrap": true
    }

Development Environment:

  • Grunt (regular plugins):

    • grunt-autoprefixer
    • grunt-bower-concat
    • grunt-contrib-clean
    • grunt-contrib-copy
    • grunt-contrib-cssmin
    • grunt-contrib-uglify
    • grunt-contrib-watch
    • grunt-processhtml
    • grunt-sass
    • load-grunt-tasks

  • Apache, PHP, MySQL and DNSMasq via Homebrew

  • Bower

  • git and sourcetree

36
  • Git on the command line for version control and deployment
    • 3 repos per project: a hub (or origin) hosted on BitBucket; a local repo, and a production repo
    • This lets me make changes on the production server, i.e. via panel, without worrying about messing up a bare repo. Changes can go local->hub->production or production->hub->local
  • Sublime Text for code editing
    • SassBuilder compiles SASS to CSS every time I save. I find it makes sense for my code editor to do this work rather than Grunt or some such thing
    • GitGutter helps keep track of which lines have changed since the last commit
  • AMPPS for setting up my local dev environment
    • easier PHP version switching, extension management, and domain aliases than MAMP
  • YummyFTP for when Git isn’t a deployment option
  • BrowserStack for cross-browser testing … if my client is willing to pay for the subscription :smile:
37
  • MacBook Pro running the latest Mac OS X release :smile:
  • phpenv and the PHP built-in web server. I use Homebrew to manage packages on Mac OS X, including PHP and related stuff
  • Composer to manage PHP packages and dependencies
  • Composer custom scripts to start the PHP built-in server, test code, deploy with git or rsync and preprocess/bundle/minify assets. In alternative I use CodeKit just for assets :zap:
  • Vim + Git or Textmate and SSH + SCP or Transmit :older_man:
  • GitLab + GitLab CI for code hosting, continuous integration, notes (Wiki), code snippets and project management (Issues)
  • Fastmail for emails, calendars, contacts and even file storage/sharing. :older_man: Slack for lightning fast teamwork communications :zap:
  • DigitalOcean (and sometimes Heroku :zap:) for websites hosting
38

Software

  • Sublime text 2
  • Prepros for SASS and JS
  • Filezilla
  • Todoist for todo list
  • Kirby (2 sites)
  • Wordpress (30 sites)

Hardware

  • Asus mini PC
  • HP 27"
40
  • Sublime Text 3
  • git
  • SourceTree
  • bitbucket
  • git-ftp (deploying)
  • lftp (backup)
  • ForkLift
  • Trello
  • local Apache Installation
  • iMac + MacBook
41

Okay, seems that I’m a littlebit late to the party, but let’s see what I got … :slight_smile:

Hardware

  • Retina MacBook Pro 15" (2,5 GHz, 16 Gb RAM): It is a little too heavy and too large for my taste, after I had worked with a 13" Macbook for about 8 years. But on the other hand, the larger screen is versy helpful when working while travelling.
  • Crappy old 24" Samsung TFT Monitor: It’s still around and I finally found a colorimeter that could make it almost display colors like it should. :rainbow:
  • Wacom Cintiq 13": For illustration, artwork and photo retouching.
  • Apple Keyboard: The wired one, as the larger arrow keys and the num pad are more economic. I also have a wireless one, but I only use it while drawing on the Cintiq, as it needs less space on my desk.

Software

  • Apple Mail for E-Mail
  • Firefox for Browsing (sometimes Safari, because the battery lasts longer when using it)
  • iA Writer (Markdown Editing)
  • ownCloud for File/Contacts/Calendar syncing (iOS support sucks … :frowning: )
  • Adobe Photoshop (Illustration, web design, photo editing)
  • Adobe Illustrator (vector editing)
  • Adobe InDesign (for print)
  • Affinity Designer (bought it to replace photoshop and Illustrator, but I am not fully convinced yet)
  • Sketch 3 (just started to learn it)
  • Coda 2 (not for editing anymore; only for FTP, as I did not switch to Transmit yet)
  • Sublime Text 3 / Atom (not sure, which one is better suited for me … but with Sublime, my notebook’s fans are way less noisy)
  • Parallels Desktop (for virtualization, browser tests and occasionally playing old windows games :wink: )
  • MAMP PRO (Dev Server)
  • Tower (git client)
  • Gulp.js & SASS
42

Hardware

  • Retina MacBook Pro 13" Early 2015 (2.7GHz 16BG ram) : agree with @fabianmichael on the screen, the 13 is a bit tiny if you want to work only on it and you don’t have an external monitor BUT with the retina you can push the resolution up to 1680x1050 which makes everything insanely small on a 13 but you gain some virtual real estate space.
  • 29" Dell ultrawide : decent to do work, AWESOME to watch movies :grin:
  • Apple Magic Mouse
  • 2x1TB WD MyPassport : one is for timemachine backups and the other is my archive for old projects or stuff I don’t need on a day to day basis (stock photos, videos ecc)
  • Ikea desk : my desk is just an Ikea wooden board on top of 2 ikea trestles
  • Varier Thatsit : last year I decided to invest in a good chair because I’m fairly tall (190 or 6.3 for the imperial friends out there) and my back was killing me.
  • AKG K545 : my current headphones.
  • iPhone 6s & iPad Air 3 : mainly to test stuff

Software

  • OS : whatever Apple has released at the moment.
  • Polymail : my current email client
  • Chrome/Firefox/Safari : for browsing & testing
  • iA Writer 3 : I write everything on writer.
  • Sketch : for the rare occasions in which I need to do some design work
  • Slack : to stay in contact with a few friends around the globe and discuss work related stuff
  • Transmit : my Ftp client of choice
  • iTerm3 + zsh : to run scripts, using git and other dev related things
  • Sublime Text 3 : with material theme and input font
  • Alfred : Huge Alfred fan

Services

  • Fonts.com & Typekit : for webfonts
  • Mediatemple, Siteground and DigitalOcean : hosting
  • Gmail : for all my email both personal and work related (I use the Google Apps for Work)
  • Dropbox Pro : to share stuff and backup things
  • Hover.com : for all my domains
  • Github Pro : I like the github UI but I want private repos.
  • Spotify : because you simply can’t work without music
  • Sequel Pro : for those rare occasions in which i need to do something on a database

Dev Env

  • Apache : I’m using the built in version
  • Homebrew : to handle all the things that are not the built in apache (php versions, mysql…)
  • Node, NVM and NPM : I use npm as a building tool so no need for grunt, gulp and company. I have a bunch of packages I use regularly (basic things like compiling sass, minify things, live reload, browser sync and so on) and I cry for a week every time I need to set up everything again after a format or on a new machine.

Bonus Items

  • 4 cats : to make you happy
  • Coffee & Water : always on the desk
1 Like
43

I want to edit my post and update it, but I only have these options:

It seems like I can only edit the reply within a specific time. If I can’t edit my reply probably no one can except for the crew?

44

Wow, so Mac dominated!

My setup is…

Hardware:

  • Dell XPS 13 (Infinity Display, i5, 16GB RAM, 500GB SSD)
  • 27" 4k Samsung display
  • Bose QuietComfort 25 noise cancelling headphones

Software:

  • Ubuntu 16.04.1
  • Apache + PHP + MySQL from repos
  • Sublime Text 3
  • Filezilla for FTP
  • Kirby (duhh!)
  • The brilliant Kirby SCSS Plugin
  • Gnome Terminal
  • Chrome browser
  • Gimp for basic image stuff

Hosting:

45

I’m working on a 2015 Gibabyte P34w connected to a 24" iiyama display in my workshop. I’m running Arch Linux with a KDE environment. I changed last year after 10 years with a couple of Macbook Pro and OSX (last version was Mavericks). I decided to go open-source to change the way I work as a graphical designer, get out my comfort zone and do new things with different tools. (It does not change a lot from a Mac for the coding part.)

I always used the built-in Apache and PHP. I use Atom for almost every kind of text files. FileZilla for FTP. A terminal for SSH. I was using Tower to manage Git repositories, but it does not exist on Linux, so now I’m using command line from terminal and it’s actually faster when you get used to it. I’m using a personal Gogs installation for private repositories and Github for the public ones. A personal Yunohost installation to replace everything private (Dropbox, Gmail, Wetransfert, etc.) with open-source alternative. Firefox as main browser. A pre-configure Kirby environment for coding. Inkscape to designing. html2print when I make books. Antidote 9 as dictionary (even if it’s not open-source).

46

well, i have working whit Linux (Ubuntu,KDE) For a long time but now i’m back in Windows 10, but the day will come who i will change to Mac OSX ;), Because i’m a big apple fan!.

My Local Server runns whit XAMPP

My Programms:

  • SourceTree (Git Client)
  • Atom (Code Editor)
  • Sublime Text
  • Pycharm (IDE For Python)
  • GIT Bash (i love to typing commands into the terminal)
  • Putty (SSH Client)
  • Navicat (For Creating Database’s)
  • Filezilla (a FTP Programm)
  • Google Chrome Canary whit some Helpful addons, like the VueJS Dev tools
  • Bower (a package manager)
1 Like
47

Hardware

  • 2015 rMBP w/ Force Click (which really coems in handy)
  • iphone and old Android for for mobile testing

Software

  • Brackets (extensions: emmet, code-folding, phpLint)
  • Codekit (SASS, Live Browser Sync, etc.)
  • Sketch (for Design)
  • MAMP
  • Filezilla
  • Chrome for Development
  • Safari for browsing
48

Gotta PC for development.

I don’t know what kind of PC it is, but I guess it’s a PC - I bought it 10 years ago, in 2007.

Windows 10.

Connected to two monitors, also ten years old.

XAMMP for local development.

Notepad++ for editing.

WinSCP for uploading.

Navicat for remote mySQL.

Photoshop for imaging.

That’s it.

2 Likes