Ahmed Nuaman

builder of internets ~ developer of dreams ~ tamer of Dachshunds

Posts Tagged “style”

• Fun with Radio Buttons

  Wednesday, February 2nd, 2011

  The humble radio button is a bit, well boring…

  Look at it, all round and what not; Why not have some fun with it?

  I’ve been working on a backend for a few clients of mine and thought I’ll add some form to enhance the function of the humble radio button.

  So, where to begin? Well let’s take some HTML like this:

  <label>
      <input type="radio" name="group" value="1" checked="checked" />
      <img src="1.jpg" />
  </label>
  <label>
      <input type="radio" name="group" value="2" />
      <img src="2.jpg" />
  </label>
  <label>
      <input type="radio" name="group" value="3" />
      <img src="3.jpg" />
  </label>

  So this gives us something like:

  
  
  

  
  
  

  
  

  But this isn’t very magical, so we apply some simple CSS:

  label
  {
      display: block;
      float: left;
      margin: 5px;
      cursor: pointer;
  }
  label input
  {
      display: none;
  }
  label img
  {
      border: 4px solid #ffffff;
  }
  label input:checked + img
  {
      border-color: #0080FF;
  }

  And this gives us something like:

  
  

  
  

  
  

  And with this you get all the features of the radio button but it looks much nicer!

  Tags: CSS ~ html ~ input ~ radio ~ style ~ styling
  Posted in CSS ~ Design ~ Development ~ HTML

  ---

• Coding Conventions

  Sunday, May 17th, 2009

  Recently I joined a debate started by the editor of Flashtuts+ regarding coding conventions. Now I’m a strong believer that if you’re going to code, you best do it right. Yet on a day to day level I still see sloppy code. Gone are the days of Actionscript 1 and 2 coding when you didn’t have to declare variable’s type or a function’s return value, but still people continue this in their coding of Actionscript 3.

  The fun doesn’t stop there. I admit, when I first started coding yes I was very sloppy with my convention, but I’ve cleaned up my act, honest. With other languages such as PHP and JavaScript, you see how easy it is to just keep typing and typing and through any sort of convention out of the window. But when the client turns around as says: “Why can’t that be 3D?” you’re then going to have to go through all your sloppy code and make it 3D.

  So convention pays, it really does. I got into Python a few months back and when I first had a look at it, my reaction was something along these lines: “What, no brace brackets? How the hell do they know what they’re editing?” and the answer was that Python uses very strict coding conventions.

  In Python you have to tab correctly, you have to leave sufficient spaces after statements and so on. Looking back at it now, Python is beautiful. I’m not fully migrated from PHP though, but because of it’s rigidity it’s very easy to pick up and develop with, and more importantly modify and update.

  So where does one go from this? Well the best places I found that help people use the correct conventions are different for each language:

  • PHP: CodeIgnitor User Guide
  • Actionscript: Flex SDK Wiki
  • JavaScript: MDC Wiki
  • CSS: MDC Wiki

  If you have any suggestions or think I’m wrong, please comment. Because if I’m doing it wrong then I’d want to get it right!

  Tags: actionscript ~ Actionscript 2 ~ Actionscript 3 ~ code ~ coding ~ convention ~ CSS ~ debate ~ guide ~ JavaScript ~ PHP ~ Python ~ style ~ tutorial
  Posted in Actionscript 2 ~ Actionscript 3 ~ CSS ~ Development ~ General ~ JavaScript ~ PHP ~ Python

  ---