I have decided to release my own PHP/MySQL framework on Github, called NOOPHP. Because of this, I have decided to take down my other PHP posts. Not only were the posts outdated, but the code that I had in the posts has been updated and implemented into my new framework, making the code in my previous posts outdated.

What is the framework?

The framework is called NOOPHP. It is a PHP framework, built from the ground up, over the past few years. The name is a bit of a sarcastic name since I too often hear that PHP is not trully OOP, hence NOOPHP. This is a complete framework built from code I have developed over the years, refined (and still refining) and packaged together. It enables developers to rapidly deploy websites that need to allow for rapid expansion and scaling. I have used this code on a number of sites and have recently decided to clean it up and release it for open source. Feel free to check it out and fork the code if you want to try it.

I am still working on the documentation, but it’s extremely easy to jump in and learn. Documentation will be added as quickly as I can. I am also working on cleaning up notes in the code itself.

The NOOPHP wiki

Currently I am rebuilding beta.tnyb.it. Most of the rebuild is focused on bringing in a new design as well as some much needed performance increases (both back-end and front-end). The redesign utilizes a lot of CSS3 and HTML5 in order to make a smooth transition from a desktop environment to a tablet environment when using the account dashboard. This type of design has lead me to discover a major flaw with IE9’s ability to render an element that has both a gradient and a border-radius declaration. IE9 will render the gradient background, but then ignore the border-radius declaration in the CSS.

#my-element {
	background: #82c9ef; /* Old browsers */
	/* background gradient for cross-browser compatibility */
	background:  -moz-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* FF3.6+ */
	background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%, #82c9ef), color-stop(100%, #59ACD9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* Chrome10+,Safari5.1+ */
	background-image:  -ms-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* IE10+ */
	background: -o-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* Opera11.10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c9ef', endColorstr='#59ACD9', GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #82c9ef 0%,#59ACD9 100%); /* W3C */
	/* border radius for cross-compatibility */
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;


Example (pure CSS3 and IE gradient filter)
missing border radius because of the ‘filter’ declaration



So how do you fix it? SVG of course!

Interestingly enough, Microsoft has a website specifically designed for this problem. Using the their tool, you can specify your gradients and it will automatically generate the SVG source and CSS markup needed. In IE9, you can clear the filter, assuming you need a border-radius, and use the SVG CSS markup the site generates for you. This creates the exact same gradient you specify with pure CSS3 markup, but allows for a border-radius in IE9.

The beauty of this is that it is compatible with all modern browsers. The background gradient is fluid and there’s not a visible difference between the SVG markup and the CSS3 markup. You could, theoretically, use this as a workable solution for all desktop browsers. The only flaw I have found is noted below, under ‘Issues’.

/* you can remove all CSS code not needed since we're targeting IE */
#my-element {
	background: transparent none; /* reset the background, just in case */
	filter: ''; /* clear the filter since it's the reason for the border-radius missing */
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5ODEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MkM5RUYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM1OUFDRDkiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c5ODEpIiAvPgo8L3N2Zz4=');

Example Fixed in IE9 (Removed cross-browser CSS3 and IE gradient filter)
filter declaration removed and SVG background used instead



Are there any issues with this method?

The only issue I have found so far is that the SVG markup kills performance in Chrome. I’m not sure if this because of the UI I have built specifically for tnyb.it’s new design or if it’s just a Chrome bug, but it brings Chrome to a hault. Until I can test more thoroughly, I’m only using the SVG markup in IE9 and sticking with CSS3 markup for all other browsers. I’m trying to move away from images as much as possible and only use them for logos/icons/etc. If it’s a background, there’s no reason you can’t use CSS these days.



For those without IE9, here’s a before and after

I’ve developed my previous accordion a little further now. I’ve turned into a full plugin, plus it allows for multiple accordions on the same page. The way this differs, however, is that it allows you to create one accordion that closes open elements in another accordion and vice-versa. You may ask how this is different than a single accordion with tedious amounts of HTML and CSS. Well, the answer is simple: this is less work. By using jQuery’s traversing, I allow you to have more freedom in your HTML and CSS design, as well as fewer restraints on the hierarchical relationship between each accordion.

There is no CSS required for this plugin to work. The only CSS I recommend is setting the collapsible elements to ‘display: none’. This will keep the browser from rendering them initially causing that jittery appearance when the page first loads for the user.

Continue reading

I appear to get bored quite often and need projects to keep me entertained, or I come up with ideas and try to see if I can accomplish said idea. Below is a list of those projects:

  • http://omgwtfis.it
  • http://imtell.in
  • http://tnyb.it
  • http://tnyb.us
  • http://jjis.me
  • http://doesnickelbacksuck.com
  • http://doesjustinbiebersuck.com
  • http://doyouprefer.it
  • http://do-u.me
  • http://4wrds.me

Here are some screenshots of the new NOOKcolor HDPI theme (I need a new name for it) I’ve been working on.

Basic Form Elements

Settings w/ Line Item Pressed

Popup Full Bright

Popup Full Bright/Dark


Notification Pulldown

New Wifi and Battery Indicators

With Softkeys

If he has already done so, have him boot into Safe Mode. The best method is to reboot and immediately following the bios screen, start pressing F8. The computer should give the option to boot multiple ways. Choose, Safe Mode with Network.

Once the computer is cleaned, I’d seriously recommend using Microsoft’s Security Essentials. I’ve been using it since it was in beta and I have had no problems with it. Most everyone I’ve switched over to it has had no problems. Plus, it’s free.

jQuery’s fadeIn() method is a wonderful thing. It’s a great way to bring things in and out of the UI without a sudden jolt, visually. The downside to this, however, is Internet Explorer and the way it handles filters for transparency. When an element is faded in, and it contains fonts, IE does not remove the filter by default. This prevents the fonts from smoothing like they should.

Internet Explorer post standard jQuery fadeIn() method

Continue reading