Home » Odeon Blogs »

Horia, Coding Passion

HTML5 Elements and the IE Nightmare

DOCTYPE html

We all like HTML5 and some of us even think it's going to solve all of our problems.
While it's a bit soon to say that, it's not too soon to start using the technology.


I do that. I use HTML5 today. And you can do that too. Just mind the gap.


Not all browsers completely understand HTML5 yet. And then, there's always legacy support.
Still, the major cool browsers have excellent support for the new tech. IE... not so much.


The first problem you'll have is that IE does not understand HTML5 elements like section, header, article, et al. Since it does not understand them, it cannot style them - and that's your problem.


Luckily, I have a super-duper-simple solution.

  1. <!--[if IE]>
  2. <script>
  3. for( var html5elements = [ 'article', 'aside', 'dialog', 'figure', 'footer', 'header',
  4. 'hgroup', 'menu', 'nav', 'section', 'menu',
  5. 'time', 'mark', 'audio', 'video', 'source' ],
  6. i = 0, l = html5elements.length;
  7. i < l && document.createElement( html5elements[ i ] ); i++ );
  8. </script>
  9. <![endif]-->


Just paste that in the header of your website, since you want it to execute fast so IE can style the elements before the page gets dispalyed, and you're all set to play with the awesome semantic elements of HTML5.


Category: HTML5


Tagged as: html5 ie

Leave a Comment

Two git Tips That Will Make You Smile

GIT ME

Here, at Odeon, we use GIT to handle Source Code. We need this mature DSCM solution since we're scattered all over the globe.

We do most of our work in Django, so we deal with python. Naturally, we need to manage the .py files with GIT, but we need to ignore the .pyc (compiled python code) -- no sense keeping those under source control since they're not source code.

One way would be to create a .gitignore file in the repository root and put *.pyc in there. Another way would be to vim .git/info/exclude and put *.pyc in there. But these two are per-repository solutions. We would need to do this every time! Not nice.
Here's a simpler way:

  1. git config --global core.excludesfile ~/.gitignore

You don't need to use ~/.gitignore, by the way, but that just makes the most sense.

Now you have ONE file where you need to put the *.pyc line and all your problems with files you want to keep out of source control are solved!

Oh, right. Mac users: please add .DS_Store to that file, eh?

The other little trick I want to tell you about has to do with log review. I usually want a list of things I've done during the past day so I can punch them into our Issue Tracker, or just to see whether I'm to blame for a bad commit or not, or just to show off to others with the work I've done. I came up with this:

  1. git log --author="horia" --after=yesterday --no-merges --format=%s, --reverse

This will bring up a simple comma-separated list of commit messages. Very handy when you want to quickly answer the question "So what have you been up to?" without talking. You should obviously replace "horia" with your name.

I even set up an alias for this, so all I have to type is git me. ;-)

  1. git config --global alias.me log --author="horia" --after=yesterday --no-merges --format=%s, --reverse


Category: Linux


Tagged as: git

Leave a Comment

Android Development Environment Setup (on ubuntu lucid lynx)

Android + ubuntu

I recently set up my own Android Development Environment and I decided to take notes. If you're on Ubuntu and you're looking for a quick way to get yourself going with Android Dev, you've come to the right place.

We'll be working with Java and we like smart IDE's so we will be using Google's own Eclipse Plugin for Android Development. This means that we need to have Eclipse installed.

Step 1: Install Eclipse via ubuntu Software Center (it's under Developer Tools / IDEs)

While that's going on(it takes a few minutes)...

Step 2: Download the Android SDK, install it anywhere you like; just make sure to add it to PATH.

Once Eclipse is installed, you will need to add a special repository from which we will download Google's Android goodies.

Step 3: Add Google's update site https://dl-ssl.google.com/android/eclipse/

In Eclipse, you do this by going to Window → Preferences → Install/Update →Available Software Sites. You have a button on the right that reads "Add." Click it, enter a suggestive name, like "Android," and paste the URL from above.

Step 4: Install the Android Development Tools.

In Eclipse, go to Help → Install New Software. From the first dropdown, select the Android repository, work your way through the Software Package Tree and select Android Development Tools. Click Next and you're done!

Now, if you encounter an error, it's OK. I did too. There are some simple steps to take care of this:

Step 5: Install Sun Java Development Kit 6 via ubuntu Software Center

Step 6: Try Step 4 again and you will probably get the following error:

"Session context was:(profile=PlatformProfile, phase=org.eclipse.equinox.internal.provisional.p2.engine.phases.Install, operand=null --> [R]org.eclipse.cvs 1.0.400.v201002111343, action=org.eclipse.equinox.internal.p2.touchpoint.eclipse.actions.InstallBundleAction).

The artifact file for osgi.bundle,org.eclipse.cvs,1.0.400.v201002111343 was not found."

Don't panic, like I did. This means your Eclipse installation is so bare-bones that you don't have the PDE.

Step 7: Install Eclipse Plugin Development Environment via ubuntu Software Center or using this spiffy command:

sudo apt-get install eclipse-pde

Step 8: Try Step 4 again and it should all work fine.

Step 9: Do small victory dance!

You are now free to roam in the world of Android Software Development!

If you're new to the Android Platform, I highly recommend you read through the online Dev Guide.


Categories: Android Linux


Tagged as: android eclipse java ubuntu

7 Comments

Animated Retro Clock

A friend of mine, Tudor, stumbled upon this great flip down clock tutorial.

Even the end-result is pretty spiffy. There was just one problem, MooTools. I have nothing against MooTools, really. This is not another MooTools vs. jQuery post. But here, at Odeon, we like working with jQuery. Since nobody really fancies adding both libraries on one page, I had decided to port this code to jQuery.

You can see a demo here. And I've also setup a github project for your cloning pleasure.

You can get the code fast by doing this:

  1. git clone git://github.com/hdragomir/Flip-Down-Clock.git

Enjoy!





Photo Source


Category: Javascript


Tagged as: github jquery mootools

7 Comments

Beware of the uint


When Actionscript3 came along - long, long ago -- one of the things I liked the most was the introduction of the uint - unsigned integer - data type.
It makes sense, you know? If you want to iterate over an array, you will never have negative values. Perfect use for a uint.


Most of my programming training comes from Javascript and Lisp. Not to say that's what I've spent the most time coding in, just that those languages have revealed more quirks about programming - and life - to me than any other. So naturally, with my JS background, I prefer to iterate over lists from tail to head when appropriate.

  1. for( var i:uint = arr.length - 1; i >= 0; i-- )
  2. _do.stuff( arr[i] );


the reason I like this method more is because you get rid of the extra variable in which you store the length of your array. And, as a side note, please store your array length somewhere when iterating over the array from head to tail! Why bother your CPU with reading a property of an object each time you go through your loop?


You know that Javascript and Actionscript are both ECMAScript, so you can easily carry most of your knowledge from one to the other.
So, the above example is how I'd iterate over an array in Actionscript. Everything was okay in AS2, but things started breaking when I carelessly used the same code in AS3. If you blink, you might miss the reason. That was some years ago, but I recently made the same error.


It took me five minutes of adding breakpoints and stepping through the loop to catch the bug. Funny thing how this was scarred deep in my brain once, and I totally forgot about it. You can imagine how silly and upset I felt when I realized what had happened.


Here's the breakdown. When you take an unsigned integer whose value is zero and subtract 1 from it... you can't get -1. You don't get NaN, either. You don't get and error or warning. What you get is 4294967295 because, for some reason, it takes a full lap around the possible values. In my loop, since i will go from 0 to 4294967295, it will never be -1 which is what I need for the loop to start. Can you say infinite loop and stack overflow?


So, what I did was

  1. for( var i:uint = arr.length; i-- > 0; )
  2. _do.stuff( arr[i] );


Of course, I wasted more time and keystrokes to find this elegant solution than it would have taken me to just use an int.

But I still love the uint.


Leave a Comment

Major Headache With Flex AS3 Date Formatting

Date formatting is one of my favorite features of coding for the web. I've always pushed its limits, especially in my PHP days when I would include words and even function calls, sometimes html tags, right in the string format. It's a lot of fun.

 What's not so much fun is the slight difference between format conventions. PHP date format is not like Python date format which is not like Django date format and so on. Most of the time, though, the basics are intuitive. But then there's Actionscript.

  1. var date = new Date( 2010, 1, 1 ); // let's set the date to the 1st of January, 2010
  2. var df:DateFormatter = new DateFormatter();
  3. df.formatString = 'YYYY-MM-DD HH:NN';
  4. df.format( date ); //returns '2010-02-01 24:00'
  5. // wait, what?


For some reason, the people that handled this part of the language thought it was a good idea to have the days start at one, but have the months start at zero!
I've gotten used to that now, and I have libs that take care of that. Still, it's a little confusing; especially to newcomers.


Now, the other problem is a bit more subtle. We all know that there's no such thing as the hour 24. Because, even in real life, hours are 0 based. But, for some reason, the people that handled this part of the language thought it was a good idea to have the 'H' in the formatting be 1 based. Oh, it's great for when you want to know which nth hour it is.

Because that's the way we speak, right?

"Jack, what time is it?" "It's fourteen minutes past the eleventh hour, Jill."

 The correct symbol in the format string is 'J' - the zero based hour representation. Why?!
But if we run into this error issue, this is our fault. We assume people are sane, and H would stand for hour, as with other languages. Properly consulting the documentation will reveal this little feature. So we're actually dealing with a funny case of RTFM( Read The Flex Manual ).

 Here's the code, adjusted to cater Actionscript's trifles.

  1. var date = new Date( 2010, 1 - 1, 1 ); // let's properly set the date to the 1st of January, 2010
  2. var df:DateFormatter = new DateFormatter();
  3. df.formatString = 'YYYY-MM-DD JJ:NN';
  4. df.format( date ); //returns '2010-01-01 00:00'
  5. // there we go!


5 Comments

Passionate Evolution, Part II: Learn!


Because, remember, you can never know it all!


There are two reasons for learning: getting better at what you know and learning new things. So make some time in you busy schedule and read. Read about the new jQuery API, read about polymorphism, read the programming section from digg.com, read about whatever catches your eye. 


Then do! If all you do is try to soak up information, you're confusing motion for action. You need to use what you learn. Try reimplementing demos you find on the web. Tinkering with examples. Or just applying OOP in real life for a laugh.


The best way to do is to have small side projects from work. Best, because you're free to mess up. And it's fun to make mistakes. Start working on something you're keen on. Something you think you could do better than what is already out there. Or create simple, fun, programs that do nothing but make you smile once they compile.

Just learn; learn something new every day!


What you learn does not have to be related to your work. Not even in the same ball park. You can learn on how to knit faster and more efficient. You can learn how to juggle or learn how to play the violin.


The idea is to keep your mind posing questions, keep it working. And do try to make it fun. It's not worth it, and you're probably going to quit soon, if what you're doing is not fun.


Leave a Comment

Passionate Evolution, Part I: You Are Not An Expert!


I know you're a good coder. I do understand you know things others do not.
It is indeed nice when other programmers come to you and ask for directions. It boosts your ego, raises your self-esteem, but it does not make you an expert.


In fact, there is no such thing as an expert. There is no such thing as knowing it all. Not when it comes to the software business. The problem arises when your ego tells you that you're a great coder, with a lot of knowledge to support you. You then get lazy. You start relying on your experience, your hammer. Every problem will start to look like a nail. You will stop learning because you feel there is no need to.

Don't do that!

 Know that there is always more to be known. And learn. Understand that it is impossible for all the knowledge on, say, bash scripting to fit in your skull. 


Be humble. Not a doormat, but humble. Rejoice when you know something that saves your team, or just yourself, a lot of time. Be happy when others come to you for solutions to tough problems. But remember to do the same. Remember to ask others when you're in trouble. Remember to keep up with your niche, keep learning new stuff.

You are not an expert!


Leave a Comment

Deep vs. Broad

Coding is all about the people.

It's about the people that code and the users they code for.
You users are your audience. As with concerts, putting on a good show will make people happy; it will make them come back for more.

But to define "a good show," let's go into the restaurant business. Say you open a restaurant that serves steak and sausages. The dishes are pretty good, so you build a decent following. The next step is your restaurant's growth is to bring in more people! The question is: how do you go about that?

You can add another four types of steak, and five different sausage dishes. That will be the wrong thing to do. Your clientele has already been set. They are meat eaters. Bringing in more types of meat will not bring you more clients. Not considerably more and not directly, anyway.

What it will do is make people that are happy with your restaurant slightly happier. That means making deeper connections, but you want more clients!

The right move is to add an equally good vegetarian dish, or maybe two. This way, you're getting into a new group of people. People that previously had no interest in coming to your meat-eater-exclusive restaurant. You are making for a broader reach to a more diversified group.

Now, let's bring this to the realm of the internet.

Evernote have a service which allows you to synchronize text or voice memos, images, videos, and what-not over desktops and smartphones. Their product's features are few, and simple at that. But that is a good thing. They do not do everything, but the little they to, they does great!

A few weeks ago, I got into a chat with Deadprogrammer about how he hates it that Evernote cannot rotate images. He thinks it's a simple feature and a must-have. I think he can just turn his iPhone sideways.

A few days ago, he took his little grudge really public, bashing the devs over at Evernote for focusing on a version of their product that will work on the Palm Pre, rather than working hard to get the image rotate feature working on the already popular iPhone version of Evernote.

The thing is, Evernote gets money from people's subscriptions. Adding a new feature, like image rotate, would be going deeper. It would make some of their clients happier. What they want and need right now is to get more clients, more people to use their software. They need to go broader! And that is exactly what they are trying to do.

Their approach is working, for now, but they will need to deepen the connection with their users soon, though. And they will, when their audience is big enough.


1 Comment
Page generated in: 0.39s