The Story

Not too long ago I wanted to work on a WordPress theme, but I had one main problem, I usually work in at least 2 computers every day. For a while I was doing well using WAMP on both machines and using Dropbox to host my files. Of course, I had to do some tweaking to redirect the directory on WAMP to my Dropbox. But when it cam to working on WordPress websites this setup was not going to work out. So I decided to search for an alternative solution.

The Solution

This solution became XAMPP Portable. With XAMPP portable, I can install WordPress, Drupal, and any other system and take it with me anywhere. Combining XAMPP with Dropbox is probably the best way to work on multiple computers without having to worry about constantly updating your files and so I wanted to share this wonderful bundle with everyone out there.

In this post I will provide you with a portable version of XAMPP, which a pre-installed version of WordPress. In the htdocs you will also find the popular HTML5 Boilerplate, Development and Minified version, as well as the Build Script. The H5BP can be used as a template for your next website making things easier for you. I was also going to include my favorite text editor, Sublime Text 2. However the portable version comes in 32-bit and 64-bit versions so I’ll let you download the one that fits you best.

Notes

IMPORTANT: Run setup_xampp.bat in order to reset the folder paths. Once this is done you can run xampp-control.exe to start the server.

XAMPP is configured to run on http://localhost:8080 this is just so that it doesn’t interfere with other services.

Unfortunately this bundle is for PC users only. However, if you are a Mac user you can still use it through a Virtual machine that has Windows installed, which is a good idea to have anyways for when you need to debug a website for Internet Explorer.

All the passwords have been left in default mode to make it easier for you. The wordpress login info is admin and password.

I also included the theme I used for our CrunchyBlog, feel free to play around with it, we won’t mind

Download

Download the bundle RIGHT HERE (45mb.). (This bundle uses 7-Zip compression)

If you have any suggestion for other things that should be included in this bundle, leave a comment and we’ll work on updating it.

Web Development

Bluehost – A simple web hosting company, great if you are just starting or have only a few domains to take care of.

MediaTemple – The next level of web hosting. MediaTemple’s DV Server are incredibly powerful and packed with lots of features. IF you require more horse power and the ability to resell, as well as host different websites for clients, you may want to look into it. ** Make sure you call their sales representative, they offer discounts to new customers!

CloudFlare – A very easy Content Delivery Network(CDN) solution for not very heavy users. Make sure you watch their intro video for a more extensive description.

WordPress – Ok, this is not a new one, but we discussed how we have used WordPress in the past to help us make things easier for clients and why it is so powerful. WordPress is mostly community driven and you can find an incredible amount of plugins and themes that will make you life a lot easier.

Swagger – Jason Bobich’s Swagger WordPress theme is an incredibly powerful and easy to use theme. I will definitely be looking into it.

Sucuri - Have you had security problems? You may want to look into this company! They help people protect their websites.

Finances

InDinero – A web application that will help you track and manage your business’ money.

RightSignature – Would you like to send your client contracts that they can sign online? This may be the tool for you!

Freshbooks - this is a great, easy to use, powerful web application. It will help you keep track of your clients as well as send invoices and keep an eye on your money.

Paypal - The quick and dirty solution for sending invoices to clients. However beware of fees!

When dealing with clients

Podio – This application looks very promising! It is a project management application that provides you with a lot of control over the user interface. It has a very powerful API library that can integrate with other web applications to make your work life a lot easier. As Terry said “It’s like BaseCamp on Crack!”

Other Resources

FreelanceSwitch – from Envato, freelance switch is a great source of information for new freelancers. learn from others’ experiences and horror stories. Don’t forget to checkout their FreelanceFreedom comic, if you are a freelancer you’ll be able to relate to many of them.

Envato – Speaking of Envato, make sure you checkout all their sites from their marketplaces to their other blogs. You won’t regret it!

The Big Web Show – Hosted by Jeffrey Zeldman, one of the most recognized figures in the Web development world brings us a very interesting podcast which includes interviews with other important developers and their own experiences with the web.

Well that’s all I can remember for now, for more information about the next meetup go to our website. http://meetup.crunchyweb.com or join our Facebook group.

In our effort to expand and continue networking, we decided to create a meetup group!

College Web Designers & Developers Meetup

This group is targeted to all college students, and young people, who are interested in learning more about designing and coding for the web. We hope to make of our meetings a place where you can meet other people, share ideas, ask for help, and complain about how annoying it is to code for IE.

We are very psyched about meeting new people, so if you like design, coding and coffee, join us!

Happy Crunching!

For those of you who are unfamiliar, Visor is an awesome mac application that lets your Terminal function as a system-wide slide-down HUD window. Pretty cool. However, it officially doesn’t support window groups; luckily, I have a workaround that is simple, efficient, and universal.

Applescript does the job perfectly – it comes installed on every mac, and can programmatically issue all the commands we need to our Visored Terminal with minimum hassle.

To go about this, I define a variable detailing the tabs I want in my window group:

set tTitles to {"Django Server", "Python Shell", "Django Shell", "Git Shell"}


This serves as a list of names for the tabs, and the number of tabs to create. The above is an example of one of my window groups I use.

Next, to create the tabs, we need to make the Terminal window active. However, we can’t simply activate the Terminal window, because that breaks Visor. Instead, we do:


tell application "System Events"
tell process "Finder" to keystroke "`" using command down
repeat with i from 1 to ((count tTitles) - 1)
tell process "Terminal" to keystroke "t" using command down
end repeat
end tell


1. We tell to “System Events” so we can access processes
2. We invoke our Visored Terminal via the hotkey (change ‘keystroke “`”‘ to reflect yours)
3. Create X number of tabs by passing new tab keystrokes, where X is the number of tabs in our list of tab titles

At this point, the new tabs are created, but they are not named. That’s the next part. Now we do:


tell application "Terminal"
set tTabs to every tab in window 1
repeat with i from 1 to (count tTabs)
set tTab to item i of tTabs
set tTitle to item i of tTitles
activate tTab
do script with command "PS1="\[33]0;`(echo "" & tTitle & "")`7\]$PS1";clear" in tab i of window 1
end repeat
end tell


1. We assume there is only one window (Because there can only be one visored-window at a time)
2. Set the variable tTabs to every tab in visor (the ones we created)
3. And for each tab, we:
4. Get the title from our list (iTitles)
5. Make the tab active
6. Rename the tab using the PS1 environment variable
7. Run “clear” to clear the terminal tab

Why set PS1? because doing “set custom title of tab i to whatever” sets all the tabs to that title, for some reason. I’m not sure if this is exclusive to Visor, but I couldn’t find a way around it.

Next, to sum up, just close Visor:


tell application "System Events"
tell process "Finder" to keystroke "`" using command down
end tell


And we’re done. Simple. The final result looks something like the following:


set tTitles to {"Django Server", "Python Shell", "Django Shell", "Git Shell"}



tell application "System Events"
tell process "Finder" to keystroke "`" using command down
repeat with i from 1 to ((count tTitles) - 1)
tell process "Terminal" to keystroke "t" using command down
end repeat
end tell
tell application "Terminal"
set tTabs to every tab in window 1
repeat with i from 1 to (count tTabs)
set tTab to item i of tTabs
set tTitle to item i of tTitles
activate tTab
do script with command "PS1="\[33]0;`(echo "" & tTitle & "")`7\]$PS1";clear" in tab i of window 1
end repeat
end tell
tell application "System Events"
tell process "Finder" to keystroke "`" using command down
end tell


So far, I have found only one issue, which is that tab names sometimes refuse to update after being changed, seemingly at random. Once the tab is clicked, the name updates. It seems a steep price to pay for having the convenience of my window groups back.

Keep in mind that you are not limited to simply creating and renaming tabs. It is just as easy to execute commands automatically after they are created, enabling a large number of customizations. A simple example is setting the initial working directory, which is a feature of window groups that can be useful.

To do this, we could define a new list:


set tDirs to {"~/folder1/", "/Users/me/", "~/this/", "~/this/that/"}


And then use it later, in our second block of code, something like this:


tell application "Terminal"
set tTabs to every tab in window 1
repeat with i from 1 to (count tTabs)
set tTab to item i of tTabs
set tTitle to item i of tTitles
activate tTab
do script with command "cd"" & (item i of tDirs) & """ in tab i of window 1
do script with command "PS1="\[33]0;`(echo "" & tTitle & "")`7\]$PS1";clear" in tab i of window 1
end repeat
end tell


….The possibilities really are endless. It’s pretty exciting.

We’ve officially released our first web application, CRNCH.IT! A URL shortening service written in python using Django. It offers short link creation as well as statistical tracking for URLs.

How to Crunch:

To use Crnch.It all you need to do is go to the website, enter your long, annoying URL and click on the arrow! You will be redirected to your statistics page, where you are provided with your new URL and an overview of your URL’s performance.

If you’d like to check your URL statistics again all you need to do is go to www.crnch.it/view/XXXXX and replace the Xs with your URL characters.

Development:

Crnch.It (codename CrunchyURL) will receive updates and new features along the way, if you are a developer and would like to help us improve it, you can do so through GitHub. Documentation on the application and it’s inner workings is available on our Labs page.

Are you experiencing any problems? Please let us know here in the comments or using our online form. We appreciate your help.

Browser Support:

The design for Crnch.it relies heavily on CSS3 and even though it renders well in modern web browsers(IE7, IE8, Firefox, Opera, Chrome, Safari), it is fully supported only by WebKit browsers (Chrome & Safari). The site has also been tested in Android and iOS devices successfully.

Happy Crunching!

We have some interesting things going on here in the Crunchyverse! We’ve been working on some updates and new features that we hope you enjoy.

• CrunchyLabs – Welcome our latest creation! CrunchyLabs is a place for experiments, new ideas and a bit of chaos. As we produce new applications, we’ll be testing them and making them available to the public through CrunchyLabs. If you are a developer feel free to play around with them.
• New Blog Theme – If you have seen our blog before you will notice quite a difference. We’ve changed the color of the blog to differentiate it from the regular site and added a few extra features, such as our navigation bar where, now, you will find our different posts categories.
• Subtle Design Updates – Always trying to improve ourselves, we’ve made some very subtle modifications to our design, including: textured background,  typography and vertical rhythm.
• Wallpapers - Would you like to have CrunchyWeb on your computer? You can find some wallpapers create by our team in our labs page.

Intro

Working in a web environment, where you can use effects to make things more interesting, has changed the way I look at pictures. It happens unconsciously, whenever I see a picture I will automatically imagine what it would look like if it were animated. I rarely do anything about these ideas, but this latest idea really caught my attention.

I recently ran into this beautiful vector background done by Iormundr.

As soon as I saw this image, I had this idea that each box could take over the total width of the container, showing the rest of the image.

~ View Demo ~

How to Build It

The project uses the CSS3 transition property to animate the width and position of each box. If you are not familiar with this property, I’ve put some links at the end of the post.

The HTML for this page is very simple and you can see it below. We have a main container #expWrapper and 4 boxes - #expBox1, #expBox2, #expBox3, #expBox4. Everything else is done with CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
	<title>Expanding Fauna Boxes</title>
</head>
<body>
	<div id="expWrapper">
		<div id="expBox1">
			BOX1
		</div>
		<div id="expBox2">
			BOX2
		</div>
		<div id="expBox3">
			BOX3
		</div>
		<div id="expBox4">
			BOX4
		</div>
	</div>
</body>

The style for the wrapper doesn’t involve anything complicated. Setup the desired width and height, background color, margins, border, and you’re done.

#expWrapper{
	width:480px;
	height:300px;
	border:5px solid #333;
	margin:50px auto;
	position:relative;
	background:#333;
}

Now let’s look at what we used for the boxes; this is where things get interesting. In this case, each box will be a quarter of the total width, but we must consider the margins and border as well, so keep that in mind. We are using display:inline-block to keep the boxes next to each other without using the float property. We also need to use the z-index property to keep the boxes in the back when they are not hovered.

Now, because these properties are applied to all the boxes, I’ve grouped them all together to reduce the amount of css we use.

#expBox1,
#expBox2,
#expBox3,
#expBox4{
	width:112px;
	height:296px;
	margin:0 2px;
	border:2px solid #000;

	z-index:0;               /* Keeps boxes behind when they're not hovered */
	position:absolute;       /* Allows us to use margins to place the boxes */
	display:inline-block;    /* Keeps boxes in the same row */
}

Next, let’s style each box. We are going to start by using solid colors instead of a background, just to show how it works. As you can see, we have setup left margins to position each box. This is possible thanks to the absolute positioning we setup before. If we had used position:relative, it would break so make sure you have those settings right.

#expBox1{
	background-color:green;
	margin-left:2px;
}
#expBox2{
	background-color:yellow;
	margin-left:122px;
}
#expBox3{
	background-color:red;
	margin-left:242px;
}
#expBox4{
	background-color:blue;
	margin-left:362px;
}

So, by this point, your page should look something like this.

Now that we have the basic setup, let’s animate them! You will notice that I’ve also grouped the properties here as they repeat.

	#expBox1:hover,
	#expBox2:hover,
	#expBox3:hover,
	#expBox4:hover{
		margin-left:2px;
		width:472px;
		z-index:50;
		-webkit-transition: width .5s ease, margin .5s ease; /* WebKit transition property */
		-moz-transition: width .5s ease, margin .5s ease;    /* Mozilla transition property */
		-o-transition: width .5s ease, margin .5s ease;      /* Opera transition property */
		transition: width .5s ease, margin .5s ease;         /* Standard transition property */
	}

So, if you did that right, your boxes will animate when you hover IN, but when you move the cursor out, they go back to their original form instantly. Why? Well, we need to add a few more lines of code to the boxes in order to achieve this. These lines go to the basic form of the boxes (not hovered ones). Pay attention to the z-index transition, I gave it a time of .6s (.1s more than the other properties) with a .5s delay. This is to prevent any boxes from appearing above the affected box before the effect finishes.

#expBox1,
#expBox2,
#expBox3,
#expBox4{
	width:112px;
	height:296px;
	margin:0 2px;
	border:2px solid #000;

	z-index:0;
	position:absolute;
	display:inline-block;

        -webkit-transition: width .5s ease, margin .5s ease, background .5s ease,z-index .6s ease .5s;
        -moz-transition: width .5s ease, margin .5s ease, background .5s ease,z-index .6s ease .5s;
        -o-transition: width .5s ease, margin .5s ease, background .5s ease,z-index .6s ease .5s;
        transition: width .5s ease, margin .5s ease, background .5s ease,z-index .6s ease .5s;
}

Here’s how it looks now.

~ Solid Colors Demo ~

And for the most part, that’s all you need to have these boxes working! If you want to know how to setup a background, keep reading

Background Image

So, what do we need to animate the background? Well, first of all, you need a cool background! In this case I used Iormundr’s image. After a little photoshoping, I recreated same versions of the image with different colors, which you can see below.

Alright so we’ll do this fairly quickly as the concept is the same as to what we have already done.

First you will need to setup custom background for each box AND position them correctly! Because of how these images look, we need to make sure that the background shows in the right place or you won’t get the effect you want. Here we are replacing the settings we already have, so don’t just add them to the previous code.

#expBox1{
	background:url(img/box1.jpg) 0 0;
	margin-left:2px;
}
#expBox2{
	background:url(img/box2.jpg) -120px 0;
	margin-left:122px;
}
#expBox3{
	background:url(img/box3.jpg) -240px 0;
	margin-left:242px;
}
#expBox4{
	background:url(img/box4.jpg) -360px 0;
	margin-left:362px;
}

So now, our boxes have a background, but you will notice that if you hover, the background will move to a different position. So now we gotta change and animate the position of the background. Once again, we are replacing the code we have. As you can see, we are changing the background-position and animating it at the same rate as the other properties. Notice that the timing is important for the effect to look consistent.

	#expBox1:hover,
	#expBox2:hover,
	#expBox3:hover,
	#expBox4:hover{
		margin-left:2px;
		width:472px;
		z-index:50;
		background-position: 0 0;                  /* New background position */
		-webkit-transition: width .5s ease, margin .5s ease, background-position .5s ease;
		-moz-transition: width .5s ease, margin .5s ease, background-position .5s ease;
		-o-transition: width .5s ease, margin .5s ease, background-position .5s ease;
		transition: width .5s ease, margin .5s ease, background-position .5s ease;
	}

And you’re done! With just a few lines of code you’ve got yourself a nice effect using CSS3 so find yourself a background and have fun.

Final Thoughts

• As I mentioned at the beginning, this project is experimental, there are many ways to do this effect using other technologies and they are probably more compatible and successful at it. Nonetheless this is useful to practice CSS3.
• Possible background ideas:
  • Use real pictures of a place at different times of the year.
  • Group picture of 4 people broken into boxes for each person, when hovered, show that single person with information next to them.

I hope you found this post useful and enjoyable. If you have any suggestions or questions. Let me know in the comments.

Links

• W3C Transitions
• CSS3 Timing Functions
• A List Apart: Understanding CSS3 Transitions

Over the last few weeks some friends of mine have asked me what did I use for the navigation of the site and the short answer was “jQuery!”  But today, I’m writing the long answer!

The Problem

For my Web Design class I was asked to come up with a website idea, the design and content were up to me. This was my chance to create a single-page site. Something I had been craving to do for a few months but I never got the chance to work on.

Now, all the single-page websites I had seen have one thing in common, they scroll only in one axis. (volll.com, pojeta.com, denoakley.com) They either scroll up and down, or from left to right. I wanted to break from this standard and make a site that scrolled in both axis. However I found a few challenges to this model.

The biggest one was that if I used the entire screen I would have to figure out a way to make the site work in most resolutions. I would have to make sure it works when resizing, that the content stays centered, that it is centered when things move around, etc. With enough Javascrip, I’ve come to find out that this is possible, however my skills are not there yet. So I had to find a way to simplify things.

The Solution

While discussing this idea with my Web Design professor, he suggested resizing the window. It was a valid idea and maybe the most efficient one (you can’t break something you can’t change). However, I would hate doing that just as much as I hate finding a website that does it.

But I got closer to the solution, I knew I needed to control the size of the window… without controlling the window. As confusing as that may sound, the solution was simple. I had to create a window inside the browser.

This window would not be like a regular web browser window or a pop up, it is more of a concept. I needed a container that would not change even if the web browser changed.

How to?

First things first. We will need to create the entire environment and the content for the site. If you are doing your own single-page site  you want to think of something similar to what I have. Things like a blackboard, whiteboard, canvas, an actual window, a computer screen, etc.

For SketchyWeb, I laid it all out in paper(6 pieces of paper taped, to be precise). Once I had the basic idea, I re-drew it in Photoshop.  (The original was 2880x2400px)

To make the background of the site, I took a picture of my drawing table. Then I edited it in Photoshop, making sure that the perception was right – in this case, the viewer must be looking at it right from above. I cropped it at 1920×1080 – according to W3C, 1920×1200 is more popular so you may wanna go for that. Click the pictures below to see the process. You will notice I added a grungy texture and some light effect to make it more interesting.

Next, you will have to add the “window”, in this case, the piece of paper where the content will show. Make sure you center it so that when you bring it to HTML, it’s in the middle of the page – unless you are planning something different of course. So to do this, I created a 960x800px rectangle, and centered it.  I used some guidelines to have a better view of what it would look like. Then I increased the size of the paper, tilted it, and added a very subtle drop shadow. After I added the pencil and eraser, the composition seemed more complete and realistic.

Now that we have the content and background ready, let’s look at the code.

First, you will need to embed  jQuery on the page. You can get it from Google, (https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js) or download a copy to your server from jQuery.com.

Now let’s take a look at the basic structure of the site. As you can see below, it is very simple and straight forward. A #canvas wrapper, an #inCanvas container and .scene containers for each page of the site.

<body>
<div id="canvas">
	<div id="inCanvas">

            /* Top Row
            ---------------------------------*/
            <div id="resume" class="scene">
            </div>
            <div id="architect" class="scene">
            </div>
            <div id="contact" class="scene">
            </div>

            /* Middle Row
            ---------------------------------*/
            <div id="projects" class="scene">
            </div>
            <div id="index" class="scene">
            </div>
            <div id="about" class="scene">
            </div>

            /* Bottom Row
            ---------------------------------*/
            <div id="under" class="scene">
            </div>
            <div id="underLinks" class="scene">
            </div>
            <div id="under" class="scene">
            </div>

        </div>
</div>
</body>

Let’s look at the styles for the main containers.

The body tag has the background image aligned to the top of the window and centered.

The canvas ID must be centered and it is meant to be the “window”. in this case it is 960x800px, I centered it with margins and added 100px on top which is where the piece of paper is positioned in the background image. As you can see it has the property overflow set to hidden, which allows us to use this container as a window. You can’t see anything outside your room if it is not through a window – or another type of hole on the wall.

The inCanvas ID is the content of the site. It is the total width and height of the entire content, in this case 2880x2400px. It is positioned absolute to its parent, canvas. This is very important because if it is positioned relatively, the links will not work properly. I’ll go over this later.

The scene class applies to all the “pages” of the site and it is very basic. It is the width and height of the canvas ID and it’s floated left.

I also added some ID’s for each of the pages. However they are not necessary for the correct functioning of the site. They can be used to have a single class with custom styles depending on the parent, or backgrounds for each page.

body{
    width:100%;
    height:100%;
    background:url(img/bg.jpg) top center;
    margin:0 auto;
    font-family:"Palatino Linotype", Book Antiqua, Palatino, serif;
    color:#3d3d3d
}
#canvas{
    width:960px;
    height:800px;
    margin:100px auto 0;
    overflow:hidden;
    position:relative;
    z-index:500
}
#inCanvas{
    width:2880px;
    height:2400px;
    position:absolute
}
.scene{
    width:960px;
    height:800px;
    float:left
}

The rest of the code is mostly the content of the site so I don’t think it’s necessary to cover it in this tutorial. Instead let’s look at the javascript that makes it all happen.

	$(document).ready(function(){
	    $("#inCanvas").css({left:"-960px",top:"-800px"});
		$(".lArch").click(function(){
			$("#inCanvas").animate({left:"-960px",top:"0"},"1000");
		});
		$(".lCont").click(function(){
			$("#inCanvas").animate({left:"-1920px",top:"0"},"1000");
		});
		$(".lProj").click(function(){
			$("#inCanvas").animate({left:"0",top:"-800px"},"1000");
		});
		$(".lInde").click(function(){
			$("#inCanvas").animate({left:"-960px",top:"-800px"},"1000");
		});
		$(".lAbou").click(function(){
			$("#inCanvas").animate({left:"-1920px",top:"-800px"},"1000");
		});
		$(".lUnde").click(function(){
			$("#inCanvas").animate({left:"-960px",top:"-1600px"},"1000");
		});
	});

Now, you will assign each of those classes(.lArch, .lCont, .lProj, .lInde, .lAbou, .Unde) to the respective links. lArch will be the class for the links that take the viewer to the Architect page, lProj for links that go to the Projects page, and so on. Those links don’t have any properties in the css, they are actually for javascript use only. So what do they do? Well, in simple terms, they tell the inCanvas element where to go. They write the new positioning of that element as inline styles. So a link with the class lAbou will change the coordinates of inCanvas to (-1920, -800). This is where the position absolute for the inCanvas ID becomes essential. If we had used position:relative, the links would move the inCanvas relatively to where it is at the time. So if we tell it to go to the coordinates (-960,0). it will move to a different place, depending on what page it is. I didn’t realize this for a while and I had a hard time figuring out what was the problem.

As you can see, I also have a line that sets the initial positioning of inCanvas. Without it, the page would initially load at the top left corner of inCavas – which for now is blank.

Final Thoughts

And that’s it! The code behind this page is very simple and can be implemented easily. What will take the most time will be the content, depending on its complexity. So, there you have it. A light, simple, single-page website that moves in any axis. This is a good design for websites that don’t have a lot of content but that are looking for an interesting element.

This website is at a very early stage. The HTML and CSS can be further optimized for an even lighter version. Eventually I’d like to add some animations and other ways for the user to interact but that’s another story.

If you have any questions, comments or suggestions; please leave a comment.

We’ve finally finished the site and we are ready to make the most of it!

This blog is an essential part of our company, we will provide news, articles and other things you won’t want to miss so make sure you subscribe.

We not only enjoy making awesome websites but we also enjoy sharing our knowledge with the world. In this blog we will also provide tutorials, tips, comments, and updates to some of the plugins and applications that we will release in the near future. Stay tuned!

Don’t forget to follow us on Twitter and Facebook!