Wanna build social media apps without the code?

Well now you can with Zembly 🙂

Zembly

What the hell is Zembly may you be asking? Well according to their website…

Using just your browser and your creativity, and working collaboratively with others, you create and publish Facebook apps, Meebo apps, OpenSocial apps, iPhone apps, Google Gadgets, embeddable widgets, and other social applications.

At Zembly, you can easily and instantly…

  • author social applications using your browser
  • participate and collaborate with others around live, editable code
  • use the richness of popular web APIs to create your applications
  • publish your social applications to multiple social platforms with a single click

So as you can see Zembly gives you a way to generate applications for a number of platforms without having to learn the code for each of the said platform. So how do you go about actually creating them?

Basically you have an online editor which allows you to take sample code snippets from other projects that people have made and then insert them into your application. For example you may be trying to work out how you can build a voting system, you would search using the inbuilt search function for “voting” and then it would return you all the code snippets which you could then plug straight into your application.

Once you have your application built you can then save it onto the Zembly server so you don’t even have to sort out hosting or setting up your server to handle applications. Once done you can submit your app’s to say, Facebook and watch the millions of $$$ roll on in 🙂 You can already check out a Facebook application which has been made using Zembly called Capitol Punishment, as you can see it is pretty robust.

Zembly is currently in private beta so keep an eye on their site for when it comes available.

Great new IE testing browser

I am not gonna make a massive post about this, but i came across this browser this morning which looks pretty cool.

Basically some guy over at My DebugBar has created a little browser which allows you to switch rendering engines between all versions of IE from 5.5 up to IE8 Beta.

I am fully aware that there are other programmes out their that allow you to install multiple copies of IE, but this little beauty lets you change the rendering engine by just hitting a drop down box so you have everything in one place.

Of course it only works on XP and Vista, but should save people some time. I however long for a OSX version of this software as running IE6 in an emulator to test pages really sucks.

IE Tester

Download from My DebugBar

8 CSS tips for beginners

Whilst I was working my previous job at MobileShop.com I did a lot of development work along with my in house marketing. One of the main things that I worked on was the redesign of the homepage. It was a tabular beast that I always wanted to slain, armed with nested tables, incorrectly closed tags, and transparent gifs amongst other things. The problem was that the higher ups always had some fantastic project that should be worked on instead of fixing the issues that I have just described.

Shut up Chewie – Show me the tips

Finally one month before I was due to leave they gave me my chance to defeat the demon that I had despised for so long. I cracked the whip and went into battle armed with Strict doctypes, Div’s and plenty of CSS.

Sometime (and many many changes) later I had managed to bring the site up to scratch, there were a couple of things that weren’t quite right but I was happy it was done, more importantly I was happy it was done before I had left.

So therein lies the problem, once I had left who was going to look after the development of it? Most of the other developers kept their heads down and coded in php echoing out the odd table here and there, the rest came from a purely design background, surprisingly though, all were interested in learning CSS.

I put up my chalkboard and took them through the code and compiled a list of the things that most frustrated me when learning CSS; Why does that do that, Tips on how to overcome IE issues, putting borders on div’s so you can see what you are doing… basically a little guide as to not smash the monitor when you get frustrated.

So here are my tips, they are in no order, they may not even be that accurate but they were useful to me and they may be useful to you…


1) Where art thou element?
This seems easy peasy but you wouldn’t believe how many people struggle through trying to position a div without actually knowing where it is. If in doubt, put a border on your element, e.g…

#header {
   border: 1px dashed red;
}

Then you can see EXACTLY how it is behaving, that sneaky div.

You can also but borders on all div’s on the page by using something similar to…

div {
   border: 1px dashed red;
}

2) dot dot, hash hash
In your css you should use .’s for class names and #’s for id’s. You should only ever have one instance of an id name in your html but you can reuse classes to your hearts content

3) Shorty Div
Some times you may make a div and place some text and an image in it only to have the div not expand to fit its contents. To solve this you can float the div left or right, or use overflow: auto;

4) li’s li’s li’s – I aint lying, I promise.
When creating ul’s or ol’s it is usually best to set the margin and padding to 0, this is because different browsers apply different paddings and margins to those elements and it can be a pain in the ass trying to get them all looking the same.

5) Getting out the Table mindset
When switching to using divs from tables *shudders* a lot of people find it hard to get out of the mindset of layout the page out in a manner similar to tables. Don’t worry, everyone is the same at first but what it helps to remember is that block elements don’t really need something to contain them… let me break it down for ya :o)

A new user might structure a page something like this…

<div id=container”>
<div>
<h1>title</h1>
</div>
<div>
<p>Hello this is some text that i am writting</p>
<div>
<ul>
<li> blah blah</li>
</ul>
</div>
</div>
</div>

However, because all of those elements are block elements you could easily just do…

<div id=”container”>
<h1>title</h1>
<p>Hello this is some text that i am writting</p>
<ul>
<li>Blah blah</li>
</ul>
</div>

Remember, do you really need that extra div?

6) Chucking out the center tag
If you wish to position an element in the center of the screen (e.g a fixed width website such as www.mobileshop.com) then you need to do two things…

#container {
   Margin: auto;
   Width: 1100px;
}

The margin auto tells the browsers you want to center the element, but you must set a width else the element will stretch to 100%

7) Position: absolute;
If you need to create an element that is absolutely positioned then its usually best to encase it in div which is set to position: relative, this will stop it “breaking out” of its parent div and using the top left of the screen as its reference.

8 ) Always code for Firefox
This may seem a little weird because the majority of users use IE as a browser. However it is a lot easier to code for Firefox (or any other standards compliant browser) and then fix for IE using conditional statements such as…

<!--[if IE 6]>
<link rel="stylesheet" href="/includes/css/clean/iefix.css" type="text/css" />
<![endif]-->

You can then put your CSS fixes for IE into the new CSS file.

More info on IE conditional comments at http://www.quirksmode.org/css/condcom.html

So I hope that this helps someone out there, I kinda put it together as a bit of a rush job so it may not be perfect.