ZNAG

ZNAG - jQuery, ASP.NET MVC and more geeky stuff ;)

Startup Weekend, Android, Vim, Razor and a bit of Chirpy

Aug 01

posted by erikzaadi In : Personal, General | Comments (1)
Whoa, it's been a while since I've written.
A lot of stuff has been going on lately, so this post will be a quick summary..
1. Startup Weekend - Tel Aviv
  The second startup weekend in Israel took place in the Peres Peace House, in Yaffo, where Palestinian and Israeli joined forces for a lovely three day hack fest (http://tel-aviv.startupweekend.org/)
  
  I joined a brilliant idea called MovieOke (Karaoke with movies), and really enjoyed working on the project during the startup weekend..
  You can see the site in action at http://movieoke.tv
  
  We actually got to first place!
  
  I'm the one on the left, trying to tuck in my beer belly while being totally blinded by the sun on the beach, more details here.
2. I've been hacking on an Android application lately (see post on java).
  This has been a great experience. It's a bit annoying to get used to writing in Java, and the android SDK's xml layouts are a bit rough to get into, but when you get use to the idea, it's a joy.
  Hopefully I'll get some time over to finish the app, so I can publish it here.
3. I've been using (g)Vim a bit more lately. Can't really say I've gotten THE THING about it yet. But the more commands you remember, the more useful it gets..
4. I've experimented a bit with asp.net mvc 3 preview 1, especially with the new Razor view engine. Simply brilliant, finally a more concise templating, ala spark / nhaml.
5. Last but not least, Chirpy is an awesome Visual Studio adding that compresses js and css for you when you save the file.
  Very powerful and useful.
  I forked it to add jQuery as reference when compressing with Google Closure compiler (similar to this post), but then I had some more ideas, hopefully I'll have some time for that as well soon.
Well that's it, a small recap of that I've been about since the last time.
Cheerios,
Erik

Tags: Personal, General
Java Java for a .Niet dev

Jul 04

posted by erikzaadi In : C#, Java | Comments (1)

I've been hacking on a small Android application lately, which exposed me to Java.
I've never really written an entire application in Java before, and the experience is rather interesting.
I mainly write in C# for server side code, and although I like to learn other languages, C# still remains my favorite language.
Java for me was very similar to C# (and ActionScript too, being yet another ECMA'ish language), and writing it was not as annoying as writing c++.
Even though I found things missing (such as automatic getters and setters, String.IsNullOrEmpty), I was rather surprised to see how powerful Java really is.

To summarize, Java should be respected. It had an amazing feature set way before C# was created (or copied and enhanced).
That doesn't mean that I'll write applications in Java though :)
A certain brit called Tim might be furious that someone learns Java before Scala , but that's another story..

Cheers,
Erik

Tags: C#, Java
Using Blueprint CSS framework – saving http requests

Jun 24

posted by erikzaadi In : blueprintcss | Comments (0)

I love the blueprint CSS framework, I've been using it for a while, and it's a very useful time saver.
The only thing that bugs me about it's usage is the nagging I keep getting from YSlow and PageSpeed about reducing the amount of http request in the page.
Since blueprint CSS uses at least two http requests (one for screen media, the other for print), and as much as four (IE version and show grid image), I thought of a small way to enhance this a bit.
Meet the @media CSS selector
Using the

@media

CSS selector, we can differ between different medias for CSS rules.
Example:

@media screen, projection
{
body { background: #CCC; }
}
@media print
{
body { background: #FFF; }
}

That allows us to embed the print CSS into the main blueprint CSS saving one http request.
Embedding images in the CSS as base64 encoded images
All modern browsers (Except IE below 8) can display images embedded in the CSS or Markup.
Example:

.showgrid{background:url(data:image/png;base64,idsadsaVERYLONGBASE64String=)}

There's actually an online utility converting images to the base64 format, see here.
This saves us another http request!
As always, IE finds a way to ruin things..
The only extra http request left is the IE specific CSS.
You could solve this with some server side logic, however, this is not recommended, as won't help your caching.
Besides, whatever is solvable at client side, should be solved there!
The final CSS :
Download | Gist (Do fork and improve!)

Enjoy

Tags: blueprintcss

Creating a theme for AtomSite, a quick walkthrough

Jun 20

posted by erikzaadi In : atomsite, Blog | Comments (1)

Prelude : Reading throughhttp://atomsite.net/info/Themes.xhtmlmight help if anything here is not understood.

Small disclaimer: I'm under no circumstances a good designer, hence the "estetics" of the sample..

It might be needless to say, but I do recommend having a local copy of AtomSite available to test the theme until it's mature..

Getting Started:

Let's say we want to create a template called "Sample":

Create the folder "sample" in themes
Copy the "settings.xml" from "themes/settings/settings.xml" and rename it to "sample.xml"
Open up the xml, and change the following tags to the following values:
Tag Name Tag Value
atom:title Sample Theme
atom:content This is the Sample Theme's description…
atom:id tag.atomsite.net,2008:themes,sample
When finishing up the theme, remember to change the screenshot, homepage, author, contributor and dates (published, updated).
Note: Not needed in this stage..
Log in to your Admin Dashboard, and choose the Sample Theme, and then open up your home page..
You should see a very simple (yet still structured) text only theme:
Download this file : (Shamelessly generated at http://bgpatterns.com/), and save it as "img/sample/background.jpg". (create the folder)
Create the file "sample.css" in "css/sample/" (again, the folder needs to be created)
Add the following to the created CSS file:
body {
background : transparent url('../../img/sample/background.jpg') repeat fixed;
}
Refresh the browser with the home page, and voila! , you get a new lovely background.

So what happened here?
AtomSiteautomagically picks up the CSS file, since it's named the same as the theme.
Notice the path to the image, this is very important, since you'd typically only use your own images, and the best place to put them is in your themes designated image folder.

Ok, You're a CSS Ninja, you know how you could "re-skin" everything with CSS only, which is fully possible, since AtomSite adds id's to the body per page and component.
My CSS Fu can be disputed, and from what I've experienced so far, I've usually needed to alter the HTML markup to generate the desired result.
Copy the file "themes/default/Site.Master" to "themes/sample/" .
Edit the copied "Site.Master" and add :
  <h3>I can has my custom sub sub title!</h3>
      <h4>Even with dynamic content (Today == <%= DateTime.Now.ToString() %>)!</h4>

right after :
<h1><a href="/"><%= Model.Workspace.Title %></a></h1>
      <h2><%= Model.Workspace.Subtitle %></h2>
Refresh, and you'll see the new sub sub, and sub sub sub titles (pun intended).

Tag Name	Tag Value
atom:title	Sample Theme
atom:content	This is the Sample Theme's description…
atom:id	tag.atomsite.net,2008:themes,sample

YUI or not to YUI

AtomSite uses the YUI CSS framework reset.
Although it's a very powerful framework, I have to admit that I personally prefer writing my own or using blueprintcss.
To disable the YUI framework in your theme, remove the following line from the file "Site.Master" in your theme folder:

  <link rel="stylesheet" type="text/css" href="<%= Url.StyleHref("reset-fonts-grids-2.7.0.css") %>" />

When using AtomSite in a subfolder

Change the following in the "Site.Master" to fix the link in the header:

To Find	Replace with
<h1><a href="/"><%= Model.Workspace.Title %></a></h1>	<h1><a href="<%= Url.Content("~/)"><%= Model.Workspace.Title %></a></h1>

Testing

Nothing can replace good testing, here's the usual list of tests I run to ensure that the theme is ready
Very Important:always check each task both authenticated as an admin, as a user and not authenticated!

Master Page
1. General layout
2. Navigation
3. Search bar
4. Footer
5. Sidebar
Blog Home
Blog Listing
Blog Entry
Blog Comments (View)
Blog Comments (Adding)
Sidebar Widgets

Test the theme in all browsers (Chrome, Opera, Firefox, Safari), and even non browsers as IE..

ThemeExtensions

I've written a plugin to AtomSite which exposes Html and Url Helpers that saves some time when developing / porting a theme.

Example:

    
      <ul>
    
 <% foreach (var status in Model.Statuses){%>

                <li><span class="entry">

                    <%= Html.ThemeExtensions().Social.MakeTwitterContentClickable(status.Text)%>

                    <a class="date" href="http://twitter.com/<%= Model.Statuses.First().User.ScreenName %>/statuses/<%= status.Id %>" rel="nofollow"><%= Html.DateTimeAgoAbbreviation(status.CreatedAt)%></a></span>

                </li>

         <% } %>
</ul>

You can download or fork the source code here.

More samples

The source code for AtomSiteThemes might help, besides the AtomSite code there, it also includes all custom themes I've ported from Wordpress so far, grab it here.

Sample theme from this post : Preview | Download

If you found this interesting, [Porting Wordpress themes to AtomSite] will be available soon..

Enjoy!

Erik

Tags: atomsite, Blog

Moving from Webhost4life to Arvixe

May 23

posted by erikzaadi In : Blog, Blog Migration, webhost4life, arvixe | Comments (1)

Webhost4life was my first hosting provider, I joined their service at November 2009.
Although their support was… not very technical, and REALLY slow on response time, I was able to solve most problems I had by myself.
In the middle of January, they announced that their moving to a new and improved platform, and they even had this fancy "transition kiosk" that was suppose to find and resolve all potential migration problems automatically.
I looked at the new platforms control panel, and got the impression that this might really be an improvement.
After they migrated the account, it took about a month of nerve wrecking support calls, and my own manual attempts to fix their crappy ISAPI Rewrite templates to get my applications somewhat working.
Even then, all my .net apps were broken since they changed the way they worked with sub domains in a way that ruined all links generated by .net (E.G. using a simple Url.Content("~/") would return an invalid path).
After a furious support log where I threatened to sue them, they finally moved me back the old platform.
Everything was back to normal.
Suddenly, at the beginning of May, I got an email from webhost4life saying that a migration must take place until May 17, since they old servers will no longer be active after that date.
Due to my history with the infamous new and "improved" platform, I asked the following at a support call:

Webhost4life had integrated a new control panel (although in beta of course), so I had some slight hopes that this time it'd work.

After the migration, nothing worked.
Their incompetent support where not even able to get a simple index.html working.

This time I didn't wait a month to get a partially working site.
After some nice tweeple suggested some hosting providers, I choose Arvixe, and so far they've been great.
Arvixe .net support are far superior to webhost4life, they even have .net 4 support.
Small disclaimer, I'm in no way affiliated with Arvixe , I'm simply a satisfied customer (so far).
They prices are cheaper, and you don't need to pay for the domain name, which saves you about ten bucks a year.

So what really happened with webhost4life?
They were a rather solid hosting provider with good .net support, but unfortunately, they were bought by Endurance International Group, who decided to make changes, radical changes there.
There are plenty "webhost4life's new platform ruined my site" , I think the best is : http://fhemsher.blogspot.com/

Erik

Tags: Blog, Blog Migration, webhost4life, arvixe
AtomSite Themes site

May 16

posted by erikzaadi In : AtomSite, Blog | Comments (3)
I've put together a small site that allows you to preview the custom AtomSite themes I've done.
Furthermore, you can rate, download and comment the themes at the site, would love some feedback if you liked any theme.
http://atomsitethemes.erikzaadi.com
You'll notice a gray thing on the left :

This is the compact mode of the theme switcher. If you click on the show button you'll see:

This is where you can choose a theme to preview.
The theme switcher can be dragged around, allowing you to see the entire theme you are previewing.
Custom Themes
As of the time I'm writing this post, there are 4 custom themes that are (for now) not available out of the box with AtomSite:
1. Arclite
  This is the theme I'm using currently at this blog, very customizable with variable header, sidebar and content styles
  
  Based on Arclite by Digital Nature
2. Notepad
  A smooth theme, however with no variable customizations
  
  Based on Notepad by ndesign-studio
3. Arjuna-X
  Very popular wordpress theme, with variable header and side bar styles.
  
  Based on Arjuna-X by srs solutions
4. Inove
  Also a popular wordpress theme, not customizable
  
  Based on inove by neoease
Enjoy!
Erik

Tags: AtomSite, Blog
Windows Live Writer Workaround For AtomSite Plugin 1.4

May 16

posted by erikzaadi In : AtomSite, Blog | Comments (2)

[This post is a follow up to the workaround for AtomSite 1.3]
I've updated the Windows Live Workaround to the new release of AtomSite (1.4).
Thanks to some hierarchical changes made in the new release, deploying the workaround is much easier.
The workaround is built as a plug-in, so you can apply it to any AtomSite deployment without the need for compiling source code.
Simply unzip the binaries zip file below to your AtomSite root, then access "http://yourblogAddress/WLWWorkaround"

Small disclaimer:
You should only use this workaround plug-in if you have problems removing the authentication model at your hosting provider.
Binaries | Source

Enjoy,
Erik

Tags: AtomSite, Blog
Windows Live Writer Workaround for AtomSite 1.3

Apr 16

posted by erikzaadi In : asp.net mvc, aspnetmvc, Blog, AtomSite | Comments (4)

[UPDATE - Available for version 1.4 as well, see posthere]
In continuous to an old series about migrating from Blogger to AtomSite, I came up with a workaround/solution that allows you to connect Windows Liver Writer to the AtomSite blog.
I've been asked a couple of times to supply the solution, so I thought I'd publish it here for more easy access:
WLWWorkaround.zip
Read the included README file for specific instructions..
If you want an easier access to the workaround than clicking in the address mentioned in the README, you can add the following to your service.config, I added it "AdminSettingsEntireSite"=>"settingsRight"
<svc:include name="LiteralWidget">
    <div class="widget settings area">
        <h3>Windows Live Writer Workaround</h3>
        <a href="/Admin/WLWWorkaround">Activate/Disable</a>
    </div>
</svc:include>
Small disclaimer, this has been tested on AtomSite 1.3 only..
Enjoy!
Erik

Tags: asp.net mvc, aspnetmvc, Blog, AtomSite
Host Automatic updatable Air applications on Github

Apr 08

posted by erikzaadi In : Github, Air | Comments (0)

For the impatient, check out the demo | source..

Intro

Creating desktop applications in Air with html and JavaScript is a joy for any web oriented developer.
You get the same environment to work in, jQuery included, and the ability to create desktop based applications fast.
The only thing problem you encounter is the switch in concept of updating the desktop application with a new version.
It’s no longer as easy as updating the site, you need to get the user to download the update..

The good news is that Adobe has made it really easy to set up a workflow where the application automatically updates itself.
All you need is a web site to host the updated versions, a small xml describing the version, and Air takes care of the rest.

There are some nice Tutorials available, and the documentation is fairly good.
You customize the update interface, localize and hook into almost every step in the update process.

However, for open source applications, affording a web site might be a bit out of the budget.

Here Github steps in to offer not only an affordable (free), but also reliable, fast and easy to manage solution.

What better way than to simply push the changes using git to Github?

So how is it done?

If you’re not a Github member, do join, it’s free and it’s great!

Download/Clone/Fork the example project

Open the directory updater and notice the following xml files:

config.xml:

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns="http://ns.adobe.com/air/framework/update/configuration/1.0">
<url>http://github.com/erikzaadi/AirOnGithub/raw/master/updater/update.xml</url>
<delay>2</delay>
</configuration>

update.xml

<?xml version="1.0" encoding="utf-8"?>
<update xmlns="http://ns.adobe.com/air/framework/update/description/1.0">
<version>2.0</version>
<url>http://github.com/downloads/erikzaadi/AirOnGithub/AirOnGithub-2.0.air</url>
<description><![CDATA[
This would be a good place to put release notes etc
]]></description>
</update>

The Air updater framework will open up the config.xml file in order to to get the url of update.xml, which includes version, description and most important, the url to the updated Air file.

Whenever the framework recognizes that a new version is available, it’ll launch the updating process, downloading and applying the update.

Since Github are kind enough to expose such a wonderful api on their site, you can access the update.xml either on the master branch as I did, or on a special branch/tag preserved for the update mechanism.
Furthermore, Github allows you to upload files to the download section, served by the cloud to ensure superfast speed.

If you want, you can even add a installer badge using Github Pages.
(Sample not included in the example mentioned before, see demo | source for the jQAPI project as reference)

Example Air file | Example Source

Enjoy!

Erik

Tags: Github, Air
jQAPI Air Application

Mar 20

posted by erikzaadi In : jQuery, Github, jQAPI | Comments (0)

For the last year and a half I've been heavily exposed to a lot of open source software.
It started out with a small conversation mentioning jQuery (Thanks Tim!), and since then I've been amazed by the open source community.
The great thing about open source is that you can pay back to the people that created software that you like (Yes, the price is also nice, of course).
I've been using jQAPI by Sebastian Senf (@mustardamus), which is an alternative (and in my personal opinion better) documentation for the jQuery API framework.
Before that, I used the jQuery API Browser, which is also great, and provides a downloadable air file for offline browsing of the API.
However, it's not been updated to 1.4.2, and lacks that kind of special touch that jQAPI has.
So, after a couple of times of using jQAPI, I thought, heck, I know Air, I'll spend a couple of minutes hacking together a small air wrapper for jQAPI..
Here are the results..
Unfortunately, embedding the air installation badge in the post would have most likely to ruin any rss/atom subscriber reading this post, so we'll have to do with the link :)
@mustardamus has been kind enough to both accept my fork changes, and to include both credits and a link at jQAPI(Thanks!).
The source is at http://github.com/erikzaadi/jQAPI

Enjoy!
Erik

Tags: jQuery, Github, jQAPI

erikzaadi.com

jQuery, ASP.NET MVC and more geeky stuff ;)

ZNAG - jQuery, ASP.NET MVC and more geeky stuff ;)

Startup Weekend, Android, Vim, Razor and a bit of Chirpy

Java Java for a .Niet dev

Using Blueprint CSS framework – saving http requests

Meet the @media CSS selector

Embedding images in the CSS as base64 encoded images

As always, IE finds a way to ruin things..

The final CSS :

Creating a theme for AtomSite, a quick walkthrough

Getting Started:

YUI or not to YUI

When using AtomSite in a subfolder

Testing

ThemeExtensions

More samples

Moving from Webhost4life to Arvixe

So what really happened with webhost4life?

AtomSite Themes site

Custom Themes

Windows Live Writer Workaround For AtomSite Plugin 1.4

Windows Live Writer Workaround for AtomSite 1.3

Host Automatic updatable Air applications on Github

Intro

So how is it done?

jQAPI Air Application

Subscribe/Reach me

Latest Posts

Archive

Categories