The Zaksoup Blog

Things that Zak Soup think are worth mentioning. Mostly stuff that nobody else does.

Begging

I  beg for a lot of shit, quite often. Most of the time, I jest. Now, I am serious. On tuesday an external hard drive of mine that due to a slightly strange situation was the only piece of equipment that had my work and composition files on it was destroyed. The quote for repair is over $1000 and I don’t have that money right now. I have also been saving up to buy myself a new instrument. For the past year or so I’ve been putting away every bit of money I can find to get myself a Keytar, after seeing Chick Corea play one in concert. I really really really want a keytar. So, if you wouldn’t mind helping me get one by donating to my Keytar/Hard Drive fund. What do you get if you do? For every $5 you donate I’ll give you an hour of coding time. Do you have a design? Or want some PHP done? Or want me to give you a lesson in Javascript? $5/hour is a steal. Please help me.

My direct donate link is here or you can go to my website and see the excellent work that Stephen Revesvesezezeesvs did on designing a keytar for me to lust after. http://zaksoup.com

Thanks, <3

-Z

Neven Mrgan's tumbl: iPhone 4 and mobile web app icons

Let’s say you’ve got a mobile web app, such as my own Glyphboard. Since it’s built using no images whatsoever - I rely on CSS effects instead - it looks great on the new iPhone’s mindblowing Retina display.

Well, there is one image, of course - the app icon. If you’ve read my post on the…

Soupr + Equili = <3

Remember yesterday when I told you about this guy who was an amazing designer and programmer? Well, his name is Martin Sorensen and he’s amazing.

“So, Zak, what’s the dealio here?” you ask.

Well, let me splain you. Martin is an amazing designer and developer from Copenhagen Denmark and for the past year has been working on Equili, his own URL Shortener and Media host service. We were talking over aim and I told him about Soupr. I think we were both mutually impressed with the work each-other had done. So then a day later I suggested to him “well, why don’t we work together.” We both liked the idea and decided on a plan of action.

The Plan:

Soupr is still going to happen, as is Equili. Equili will be Soupr and Soupr will be Equili. Equili will be the “service” that is powered by soupr, much like droplr and cloudapp. Soupr will be the “engine” behind Equili, the code that makes Equili tick, and it will be available for free download onto your server for your own personal use. All of the cool features planned in Equili will still be there (support for groups) as well as the cool features of Soupr (theming).

We will be working throughout the summer to bring you the best possible experience, and the best possible app that we can create. I think that you will be as excited as I am when you see some of the stuff that is happening.

For now, head over to http://equi.li/souprsite/ or http://zaksoup.com/ to see the splash page that he’s created for the upcoming Equili + Soupr merger.

The future of Soupr.

So. Hey. It’s been a while. Yeah. Soupr. Soooooo. Um, Lets start with some history.

I started work on Soupr about six months ago as a project to really get myself confortable with PHP and MySQL, as well as learn the ins and outs of developing software in general. It quickly became apparent to me that people other than I were interested in using it, which surprised me. As such, I expanded the scope of the project to include some cool features like theming, as well as support for tagging and grouping. Built in Youtube embedding quickly followed. THEN (queue dramatic music), school reared its ugly head. Preparing for college applications and SATs, along with the ACT and just homework in general, took up ever increasing amounts of my time. Soupr got relegated to a much lower level of priority. Every time I committed to a release date, it seemed like something immediately followed that would negate all of the time I’d set aside for Soupr and crush it in a torrent of toil and trouble. And so, here we are, three months post original release date, and it is still not ready.

I cannot begin to express how sorry I am to all those who have been waiting for this, but I regret to have to tell you that it is going to take even longer.

On the other hand, at least that is the bad news. The good news is that someone (he has asked to remain anonymous for now) will be joining the “Team”. He is a stupendous designer and programmer; we will be working unceasingly to release Soupr by the end of the summer. As it currently stands, Soupr is, of course, in progress. I will be eliminating the remaining few bugs and announcing release it before we begin on “2.0” (what? did someone say something?), but it will be a measly teaser of what is to come.

I would like to express my thanks to all of the generous people who have contributed to Soupr to date: Daniel Waldron created the amazing icon, Matthew Reakus donated the initial designs, and Mathieu White kindly helped to code much of the HTML involved. I’m sure that there have been more than just those three, but if I named everyone we would be here all day, so, from the very bottom of my heart, let me just say thank you, gracias, merci beaucoup, dankscheen, domo arigato, grazie, obrigado. Without your constant, consistent support and aid, I would never have achieved as much as I have and I know I wouldn’t have even possessed the bravery to start.

Regards, Zak Auerbach

Adding CSS3 properties to CSSEdit's auto-completion

Today, MacRabbit pushed out the first update for CSSEdit since early 2008, which had me hopeful that they’d updated the automatic syntax completion to match that of Espresso. Alas, I was unsurprised to find that they hadn’t.

After searching Twitter to find out what the actual changes were…

The Zak Soup Center for Designers Who Can’t Code Good: PART 3

Part 3: CSS IS TEH COOLZ

So you’ve built your really basic html site using the syntax we learned in lessons one and two…

Now you want to make everything look reaaaaaly awesome. The first thing you have to do is create a new file. this file, rather than having the extension ‘.html’ will be ‘.css’ and therefor be called a CSS file. duh.

You must link your HTML and your CSS files together. You do this by creating a CSS link in the HEAD of your HTML file.

<link rel=”stylesheet” type=”text/css” media=”screen” href=”your_css_file.css”>

A little segue here, in term of linking files that are in the same directory on your webserver (directory=folder). When the file you are linking to is in the same folder as the file you are linking from you simple put the name of the file in the href=”name_of_file.html”. Now, it can be any type of file, so don’t be confused by my use of ‘.html’ as an example. When the file is in a folder that is in the same folder as your current file you will put the name of the folder / the name of the file: href=”some_folder/my_file.html”. When it is a folder behind (meaning up one level from the linking file) your linking file, then you will add a ‘../’ to your href: href=”../my_file.html”

Now, CSS. CSS has a very different syntax than html. It looks like this

name or tag {

style

}

First, you identify the part of the HTML page you want to style. There are two ways to do this, with a ‘class’ or an ‘id’. To give an HTML tag a class or id you put it in the opening tag: <div class=”awesome_class” id=”awesome_id”>content</div>. In the css file you identify a class or an id with a ‘.’ or a ‘#’ respectively.

So, to theme a div with a class of “awesomeness” your css would look like

.awesomeness {

my css styles

}

if you want to theme every single div tag in you page it would look like

div {

style

}

If you want to theme the entire body section

body {

style

}

Now, it gets more advanced. Lets say you wanted to style items with a class of “poop” but only those inside the div tag with an id of “toilet”

#toilet .poop {

style

}

In CSS more specific styles override less specific styles, so if you had already styled “poop” outside of #toilet with 

.poop {

style

}

than the ‘#toilet .poop’ would override the simple ‘.poop’

One last note: while I’m only using divs as examples here, you can use almost any HTML tag in css. for instance the hyperlink tag ‘<a href=”link”>content</a>’ can be given an id and a class. ‘<a id=”link” class=”class” href=”link”>content</a>’

The Zak Soup Center for Designers Who Can’t Code Good: PART 2

Part 2: Digging Deeper…

If you’ve looked at the source of a website you might sometimes see something that looks like this: 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 

A doctype is what lets the browser know how to take your code and turn it into a visual site. As different versions of HTML (4,5 strict, transitional, frameset) are supposed to look different even with the same code a doctype is necessary to tell a browser exactly how to render your code. For more info on doctypes go here

Another critical piece of a website is the metadata:

<meta name=”description” content=”Learning HTML” />
<meta name=”keywords” content=”HTML,CSS,XML,JavaScript” />
<meta name=”author” content=”Zak Soup” />
<meta content=”text/html;charset=utf8” />

The metadata is literally the data about your data. It is all of the information about your website that you don’t want to be visually displayed, but you do want to include. Search engines use this to better classify your site.

PS: you only use a ‘/’ before the closing ‘>’ in XHTML, not HTML. HTML is just <meta info=”info”> without a ‘/’. Confusing, Huh?

PART 3: CSS IS SOOOOO COOL!