7 Useful Twitter Bootstrap Resources (updated)

Twitter Bootstrap is a CSS framework that I’ve been using for all my projects recently.  It makes getting a nice looking design quick and easy.  The simplicity of it has made it possible for all sorts of resources and “hacks” to pop up.  Here are some that I’ve found…

  1. Built With Bootstrap
    A directory of sites that use Twitter Bootstrap. Many of them are easily identifiable by the grey nav bar and button styles, but some have really extended it.
  2. jQuery UI Bootstrap
    Bootstrap (especially v2) has some nice javascript included, but if you like jQuery UI and want it themed like Bootstrap, this will do it.
  3. Darkstrap theme
    If you’d prefer to have things not so “bright”, this theme will make a dark version of Bootstrap. It’s actually a separate file, so it doesn’t alter the actual Bootstrap CSS file.
  4. Bootswatch
    As of today, these are 6 nice, premade themes using altered Bootstrap.
  5. Lavish
    This is a pretty neat project.  You add in the URL for an image and it generates a color scheme for Bootstrap based on the colors in the picture.  You can get some nice results.
  6. Fbootstrapp
    A Bootstrap theme that mimics the Facebook design. It’s also designed to work really well if you develop canvas apps that will actually be viewed ON the Facebook site… keeping the design consistent. It’s still using v1.
  7. The Bootstrap customizer
    Finally, the customization page from Bootstrap. Choose only the elements you want in your CSS, change the default values, and download.

 

UPDATE ( 3/7/2012)

8. Font Awesome
“iconic font designed for use with Twitter Bootstrap”

 

 

 

Making a box “width” keep that width, even with padding.

I’m saving this Paul Irish post for later (or always) use from now on. There’s nothing worse than defining something as 400px wide with 20px padding left and right and… oh wait, NOW it’s actually 440px wide and screwing up the layout.  So if I want the box to REALLY be 400px wide, I have to define it as 360px wide… *sigh*

So here’s the code:

/* apply a natural box layout model to all elements */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

Getting good with Linux (pt 2)

In part 1, I got Ubuntu installed and was able to connect from my Windows laptop.  Now I need to get Apache, MySQL, and PHP installed.

First, Apache.  The command to install is simple: sudo apt-get install apache2  … and a few minutes later, Apache is up and running. I put the ip address into my browser, and i got “It Works!”.  Sweet.

To get PHP working, I followed this installation guide.  The guide is more for if you are USING the machine you’re installing to, but it works over SSH.  The one extra thing I did was get into the /var/www directory… then type sudo nano test.php .  In the file I put in <?php phpinfo(); and then Ctrl-O to save it.  Then in the browser, went to http://192.168.1.6/test.php and I got the PHP configuration page.  It worked again!

I followed the install guide for MySQL, and in a couple of minutes it was done.  I kept the main user as “root” with no password, then the command “mysql -u root” got me connected with no problem.  Then there’s this handy page with lots of useful commands.

So I’m all set up.  Now, I’m wondering what to do next.  How can I transfer local files to the dev machine?  I’ve read about installing samba and then map a drive… or use git, and push it to the dev machine… or even something like Phing, which I’d need a crash course in. That’s next…

A Different Type of Resume (Résumé)

The one thing that’s difficult to tell from a programmer’s résumé is “Can they actually code?”  Sure, they may have had some coding jobs in the past, or have some schooling in programming, but that doesn’t tell you much about their actual skill.  Or maybe they DON’T have the schooling or work experience, but have done tons of personal projects or worked in open source projects… a résumé might miss that talented coder.  One of the things that I see a lot of tech people looking for recently is a Github account, and examples of coding or helping with open source projects, which is great.

As I thought about putting together a résumé, I wondered how can I demonstrate understanding of modern PHP concepts, without the hiring person needing to jump through a lot of hoops, or visit a bunch of sites.  So I created a résumé in code, and got some useful tips from the Forrst community as well.

The goal was to make a resume that could be readable to a non-programmer.  And I think if you look at it, you should be able to follow along:

$myResume->myName = “Terry Matula”;
$myResume->myEmail = “terrymatula-at-gmail-dot-com”;
$myResume->myPhone = “281-656-1474”;
// Places I’ve worked
$workExperience = array();
etc…
Even if you knew nothing about coding, that should make sense. And the great thing is, if you copy the file to a server and run it, it actually makes a somewhat nice looking résumé page.

Things I’ve Learned Using Codeigniter – PHP

1) You don’t need an ORM

I had experimented with Datamapper, and it was great. But there was complex join statement I needed that DM didn’t support… so I had to just write out the SQL like normal.  I then realized it’s just as easy to use CI’s Active Record or regular query command and create your own methods.  Plus, it keeps things pretty speedy.

2) You DO need a base Model

I’ve only just recently started using Jamie Rumbelow’s MY_Model and it’s changed everything. Previously, when I wanting to get a single record from a table, I was writing $this->db->from('table')->where('id',$id)->limit(1)->get()->row(); for every single table. Now, that’s already included for every Model I make.

3) It’s helpful to look at the core code

For example, I was curious how the Active Record was implemented, so I opened up DB_active_rec.php. I know some people prefer to use “->get()” by adding in the table name and limit as parameters, and I wondering if there was difference in how it’s handled.  Interestingly, it runs the exact same “from()” method, just as if you had “->from()” in the query.

And while this is a micro-optimization, if you want to return a single result and you’re sure it’s the first result… use “->limit(1)”.  The “row()” method will work with multiple rows returned, so there’s logic built in to just return the first row.  Adding “->limit(1)” will help skip all that.

4) The url helper really needs to be auto-loaded by default

In my autoload file, I always load the database and sessions libraries and the url helper. I can’t remember a project where those didn’t get used.  I’ll occasionally autoload the form helper as well, but that’s a project-by-project call.

But the url helper… I honestly can’t see how anyone would ever NOT use that in every project.  “site_url()” and “redirect()” just seem like no-brainers.

5) Object-Oriented programming and MVC

Prior to learning Codeigniter, I was experience in Drupal and WordPress, and a bit of Joomla, but working with them isn’t strict OO.  The custom stuff I programmed was really procedural or functional, based on the fact that I learned programming using PHP 4 and classic ASP/ vbscript.  While I read about and tried using Classes and methods, I just didn’t get it. With CI, I had the ‘flipped switch’ moment, where Objects and Classes made total sense.

Now, I’m onto learning as much as I can about OO in PHP 5.3, including namespaces and inheritance… which aren’t yet built into CI