Code

There’s a mix of HTML5, CSS3, Javascript, Objective-C, and various frameworks.

Visit my Github repos.

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.

Examining the Flojuggler Home Page Animation JS


Flojuggler

I spent a fair amount of effort getting the animation on the Flojuggler home page just right. I felt like too many sites were doing horizontal slide shows on their home pages and I wanted this one to stand out.

There were no CSS animations/transitions when I wrote the code so it relies completely on JQuery methods. It loads the initial images in the HTML, checks to see if the browser can run the animation, then loops the two animation methods if it can. If the client cannot run the animation you see the static images displayed above so it still has impact.

I broke the animation into two methods so I could focus on the timing of each individually.

function animPeople() {
	if (navigator.appName == "Microsoft Internet Explorer") {
	  $(".iphone").slideUp();
	  $(".demo").slideUp(function(){
		  $(".hipster").slideDown(250);
		  $(".oh").slideDown(500);
		  $(".girl").slideDown(1000, function(){
			  $('body').wait(timer, function(){
				animDemo();
			  });
		  });
	  });
	} else {
	  $(".iphone").fadeOut();
	  $(".demo").fadeOut(function(){
		  $(".hipster").slideDown(250);
		  $(".oh").slideDown(500);
		  $(".girl").slideDown(1000, function(){
			  $('body').wait(timer, function(){
				animDemo();
			  });
		  });
	  });
	}
}

function animDemo() {
	if (navigator.appName == "Microsoft Internet Explorer") {
		$(".girl").slideUp();
		$(".oh").slideUp();
		$(".hipster").slideUp(function(){
			$(".demo").slideDown();
			$(".iphone").wait(timer/2).slideDown(function(){
				$('body').wait(timer, function(){
				  animPeople();
				});
			});
		});
	} else {
		$(".girl").fadeOut();
		$(".oh").fadeOut();
		$(".hipster").fadeOut(function(){
			$(".demo").slideDown();
			$(".iphone").wait(timer/2).show('bounce', function(){
				$('body').wait(timer, function(){
				  animPeople();
				});
			});
		});
	}

}

$(window).load(function () {
	timer = 6000;
	$(".hipster").slideDown(500);
	$(".girl").slideDown(1500);
	$(".oh").slideDown(1000,function(){
	  $('body').wait(timer, function(){
		  animDemo();
		});
	});
});

Damn you, JSLint!

JSLint is not handling my non-engineered PhoneGap architecture. Sigh

JSLint is not handling my non-engineered PhoneGap architecture. Sigh

Yea… this is what happens when you try to use JSLint standards without using a real JS framework to support required files. Not to mention my ghetto name spacing. This is what engineers are for!!! Sigh

At least I’ll have the formatting cleaned up. I have to admit that spending the time to conform to the JSLint rules actually does result in more readable code. It’s worth it.

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.