Tools

Coding tools come and go as languages come into fashion and technology advances. Here’s a short list of tools I’ve come to depend on along with items I just came across shortly.

Adobe Edge Reflow

ReflowI’ll admit it. I’m a Bootstrap man. That’s how I learned how to work in grids and you can’t teach an old dog new tricks. Well… if they’re good tricks and Reflow is a really good trick!

Adobe Edge Reflow is a WYSIWYG editor especially focused on building static responsive layouts. I say “static” because it’s not too friendly in an enterprise production environment where you can be using erbs, js, or a myriad of other templating systems. This software will crank out basic HTML, CSS, and related fonts and images. That made it perfect for this landing page project I’m doing for The Jerry Garcia Amphitheater.

Edge ReflowScreenSnapz002

Reflow makes it super fast to work on mobile, tablet, and larger at the same time. I can switch between views with a click and see exactly what the layout is going to look like on a given platform. You know me, I like to code so WYSIWYG tools usually make me wince. This one actually cranks out pretty clean and compact code. I was pleasantly surprised.

The Font support is nice but fairly proprietary at the moment. You can use web fonts from Typekit, which Adobe owns, or another partner service. There’s no ability to simply install the fonts you already have locally into a project.

Adobe has not released an official version yet. The one I’m using is a preview release but it’s stable and… well… useful as hell! I’m not a fan of the AdobeCC monthly payment system but that’s the only way to get Edge Reflow at the moment. It’s definitely worth checking out with a Free Trial.

Brackets

Brackets

I’m starting to really like Brackets, Adobe’s open source (for now) editor. It has a small footprint, performs very quickly, and… inline editing.

The big deal is that it’s geared toward all the languages that I use for prototyping UI/UX; HTML, CSS, JavaScript. The whole thing is not only written for those languages, it’s written IN those languages! That’s right. You can crack open the source and start hacking away making mods, extensions, custom builds, you name it.

Live refresh of HTML files is growing in popularity and, at the time of this writing, Brackets has a working refresher for Chrome only.

On top of all that, the main developers actually write Brackets using Brackets and release often. Check it out at http://brackets.io.

Jade > HAML… or why I use Jade more than I ever used HAML

jade-greater-haml
Many years ago I was leading a small team on the presentation layer of a Rails app and it was suggested that my team start using HAML in strict mode. We had all been writing HTML/CSS/JS by hand for years and just could not see the value in learning shorthand syntax because we’re not Rails devs and we know how to write markup. Sure it’s more efficient and cleaner looking for a back end engineer but why add a layer on top of something that’s not a problem for us? That said, we tried it anyway. It was a disaster. The strict indenting slowed down the dev cycle and while the syntax was fairly close to raw HTML it looked more like Ruby than markup. We ended up dropping HAML and productivity sky rocketed.

Years later the landscape has definitely shifted. It’s not just about writing human readable code. It’s about semantic markup and accessibility compliance. These shorthand languages provide a system for reducing hacks in the markup and provide templates for a larger application.

It’s 2014 and I’m looking at Jade as a shorthand HTML markup language and… well… I actually like using it. The syntax is very much like HAML but I find it so much more digestible. Why? Probably because it writes like JavaScript and not Ruby. I spend a lot of time in JavaScript land so the syntax just works for me. There’s no % all over the place.

doctype html
html(lang="en")
	head
		title="selino"
		link(rel='stylesheet', href='index.css')
	body
		#container.flex-con
			p Item 1
			p Item 2
			p Item 3
			p Item 4
			p Item 5
			p Item 6
			p Item 7
			p Item 8
			p Item 1
			p Item 2
			p Item 3
			p Item 4
			p Item 5
			p Item 6
			p Item 7
			p Item 8
	script(src="js/reload.js")
	script(src="js/prefixfree.min.js")

The real sell for me was the ability to throw JS conditionals into the mix. I love JavaScript so it feels like home.

if youAreUsingJade
        p You are amazing
      else
        p Get on it!

Koala Brings SASS to My iOS Project

I’ve been using SASS in Rails projects for years. How I wrote CSS before is hard to imagine but I didn’t have to imagine it for long. As I began work on the Flojuggler iOS app I realized that I had to write some raw CSS. Was not a problem but… kinda sucked. So, I looked around for a tool that would let me write SASS without needing a server side interpreter. I shopped around, tried a few, and decided that Koala is the marsupial for the job.

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

As you save files, Koala compiles the code and writes another file. You include the written file in your project. Not just CSS either. This tool makes it super easy to compile and minify JavaScript files, too. Check the feature list.

  • Multi-language Support: support for Less,Sass, CoffeeScript and Compass Framework.
  • Real-time Compilation: listening files, compile automatically when the file changes, that everything is running in the background without user action.
  • Compile Options Support: you can set the compiler options for each file.
  • Compression: auto compress code after compilation is completed.
  • Error Notification: if encountered an error during compilation, koala will pop up the error message.
  • Cross-platform: koala can run in Windows, Mac and Linux.

There’s a cheaper alternative to Github

Github is great if you want all of your code to be public. Open source is all about being available to everyone all the time. That’s a good thing. The thing is, when you’re looking for a place to store your not so public code Github’s pricing plans can get a bit steep.

Let’s say that you have 50 projects that you want code storage for. These are personal projects or client projects that you don’t want the world forking and making their own versions of. On Github that’ll cost $50/mo. Now let’s say that you want someone else to also have access to this repo. Just went up to $100/mo. That’s a lot of scratch for some fairly inactive code.

Codeplan private Git storage

Unlimited repos, unlimited users, 2GB storage cap for $9/mo.

I recently came across an upstart Git service called Codeplan. They offer unlimited private repos for $9/mo with one restriction, 2GB total limit. That’s a lot of space! No limit on the number of users, either.

So if you’re looking for no-frills, very affordable, and reliable private Git hosting… the math speaks for itself.

ScrumDo just works for me

Image

A quick shot of a two week sprint for the Flojuggler app.

When you hop around a lot from idea to idea, coding language to coding language, you develop tools to get things done. One of those tools is the Todo List. Every day I have a list of things that I need to do and I check them off as they are completed. It’s a basic tool but when your brain goes 1k miles an hour, it’s imperative to stay organized and on track. ScrumDo has become my “Todo List” for all of my coding projects. It’s intuitive, feature rich, and just simple.

I’ve been working in Scrum for roughly five years. In fact, I’ve worked in organizations that built Scrum tools and trained more teams than any other organization in the world. I have to say that ScrumDo just does it right. To me it’s like 37 signals meets Scrum. It does one thing and does it very well.

I can’t wait to start using it with a team.

100% Apple Development tools?!

Yes, it’s true! I know you think I’m mad for even considering using anything but Chrome with SublimeText2 or 3 or whatever. After all, Chrome has dominance over the rest in browser share (something like 80% last I read) and has some rock solid dev tools built in while FireFox still uses Firebug to do most dev’s heavy lifting very well. TextMate was all the rage when Rails was king but this is the internet business and kings fall fast around here. Now anyone not using Sublime Text is labeled a heretic. Unless of course you’re using vi in a terminal and then you’re just “keeping it real”.

Xcode and iPhone Simulator Setup

This is my general setup when I’m working on an iPhone app. These two apps cannot be separated.

One of my projects is a mobile app using Phonegap for IOS. Developing for the iPhone is great fun but it does have some serious drawbacks. Namely, Xcode and Simulator. To make sure that your app works on an iPhone you’ll need to use the Simulator application provided in the Apple Developer SDK. Apple is known for three things; Steve Jobs, great looking products, and insanely overbearing control of all aspects of their realm. You want to use a Mac? Better use OSX. You want to charge your phone? Better get the special connector. You want to develop apps for OSX or IOS? You better use Xcode and Safari alongside your standard toolset. Sigh.

Cursed was I! Cursed, I say. Well… not so much.

Safari Developer Tools

A real Javascript console in Safari? Yep, but it’s still a little buggy.

Turns out that Safari now has a full set of developer tools built in! Has a lot of the look and feel of Chrome and Firebug and all of the functionality. Dom inspection, xpath trees, resource lists, network activity, and… wait for it… a full console. Not that big a deal until you realize that means no more bouncing from browser to browser to check my JS in an app. I can load up in Safari and work “as usual”. Frankly, I think Safari is actually faster on OSX than Chrome. That’s so Apple.

So far so good but I was still stuck with Xcode giving me CSS files with no code coloring or hinting. When I was doing Objective-C it had more hinting than I could stand! I had to stop the thing from writing my code for me. With HTML, CSS3, and JS it seemed a bit lacking. So I did some digging. It turns out that you can manually set a document to the correct code hinting and coloring! From the top menu go to Editor > Syntax Coloring > [doc type]. Xcode seems to not be smart enough to apply the rules to all files with the .css mime type. I had to manually set each file that was not recognized.

Now I have a full on IDE that opens my Phonegap app in Safari (Open in External Editor command) so I can develop my app outside of Simulator with full browser dev tools and the same Javascript engine that the actual app will run. If it works in Safari, it’ll work on the iPhone web view.

Not the dreamiest situation but it’s way better than it used to be.