-
The importance of Titles in blog posts
Nov25
Posted by agrublev in Angel Grablev
I found this great article, you should read it
http://www.graphicrating.com/2008/11/24/the-importance-of-blog-posts-title/
-
Paint it black and forget it.
Nov18
Posted by agrublev in Angel Grablev
Whacha mean Angel? I was just talking to my colleague about a little trick I like to use which helps me prevent errors from happening. What kind of errors am i talking about… well the most used case i find this useful in is Sprites, i have yet to make a tutorial on sprites because it would be really time consuming. But the basic idea is that sprites are cool hover effects by using the :hover property and the background positioning. Without further ado, the trick i am talking about is setting the background property to black to make sure that you know how big your element is whether you are actually applying a style to the element at all. It happens to all of us that we misstype a class or maybe think something is an ID when it’s a class… anyways paint it black and forget it means
background-color:#000;and preview to make sure you don’t make a silly mistake.Well that’s it for today folks
update: 11/18/2008
I just found a better way to do this! You use a class called fix and you apply it to the element that is you giving you problems
.fix { background:#0f0; border: 1px solid #f00; }
Best thing about this is that you can apply it to ANY ELEMENT because of the ability to apply multiple classes to any element.
-
What doc type should i use, and what is a doc type.
Nov14
Posted by agrublev in Angel Grablev
In brief i am no expert in doc types, they look like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">To understand what a doctype is you need to understand what XHTML is… unfortunately i do not have a lot of time so i will be brief. XHTML comes after XML which is a language to write your “own” language. Basically with XML you can write your own little version of HTML, hence XHTML is a version that was written by a bunch of smarter people than you and I. XHTML is used to make sure you write a cleaner code, using strict as your DOCTYPE will enforce a better level of coding that makes for a faster and cleaner website.
-
ID or Class… both?
Nov13
Posted by agrublev in Angel Grablev
Let’s start with the basics, an ID can be used only once and a Class can be used as many times as you want. Also you can apply more than one class inside the
class="one two three”. Use id’s only when you are going for an element that is only used once (and even to be safe an element you will only use in one page). Otherwise just use a class, or multiple classes. For example a really good practice is to define the couple of colors you will apply at the begging of your css file like so.blue {color:#24faf7} .blueBG{background-color:#24faf7;}and do this for all the colors you will use, that way you don’t have to specify that same color all over the place (what if you want to change it). This is just like constants in programming, at the top of your code you declare a constant c = 10 and then if you wanna do the same calculations with a different starting value you just have to change it in one place!!!
-
How to stay updated, and be the best Web Developer you can possibly be!
Oct21
Posted by agrublev in Angel Grablev
If you are like me, and you think you should learn something new every single day, than this article is for you.
I noticed a couple years ago it’s not just about knowing the basics of web development, but to read articles about new trends and techniques every single day. How do I do this? I use google reader. If you cannot find any blogs to subscribe to then here is a list of my favorites.
Angel Grablev’s Blog (yah i know it’s my blog)
CSS-Tricks (great variety of articles)
CSS Globe (these guys find the best articles on the net from all sorts of blogs)
Nettuts (some of the best and most detailed articles on the net)
Web Resource Depot (a great selection of resources always updated)
-
Get specific, now get vague with your css id’s and classes.
Oct17
Posted by agrublev in Angel Grablev
If the title made no sense than here is what I mean; back in the Oniracom days we had this strategy to apply an id to the body of each page the website contained. So for example
<body id="contact">it was mainly used to make the menu item stay selected via css. But it was also a nice way to apply something to an element that will only appear in the said page. For example if you wanted to have your paragraphs a bit larger and spacey you could apply abody#contact p {line-height:1.2em; letter-spacing:.2em;}. As a side note if you were unsure about why body is directly attached to #contact and p stands along after them here is a quick guide on correct calling of id’s and classes.When an id or a class is inside of a tag like
<p class=”test”>you can either directly attack any tag that has a class of test or apply it only to paragraphs who have a class test. Here is how it looks either way in codep.test {something} /*will attack only paragraphs with class test*/ .test {something} /* will attack anything that has the class test applied to it*/Why chose either… well first of all personally I like to be more specific most of the time, that way it’s easier to stay organized and know what may be causing what to appear the way it does. But being free with your classes gives you the multiple use advantage which we are not throwing out of the window yet. The more you use both, the more you will know what to use in which occasion.
-
How to remove the dotted outline
Oct15
Posted by agrublev in Angel Grablev
I don’t know if you have ever noticed the annoying dotted outline that a browser usually applies to links, but i have. And i recently found the fix which is so simple i had to share!
a {outline: none;}Yep it’s that easy just add the outline:none property to your a selector and vuala
-
How to make a div selectable. How to make a div clickable.
Oct13
Posted by agrublev in Angel Grablev
Recently I had to create large clickable areas where there was a title and a paragraph explaining the title. Unfortunately my first attemp at making a large clickable area by using div:hover property was not so succesful because of the simple fact it’s not completely cross browser. But then i realized that a while back I came up with a little trick that makes this task a fun walk in the park.
The Problem:
You have a cool h1 tag with a nice p following it… and you want to make the whole block of text selectable with a cool background color change. But you have realized that using div:hover is not cross-browser.The Solution:
Using the a tag and applying some css properties to make it behave like a div tag will lead you into the fully cross-browser happy world you want to be in.The Code
<style>a.hoverCode {
/*This makes it display like a div*/
display:block;
/*this removes some default a href styling */
text-decoration:none;
color:#000;}
a.hoverCode:hover {background-color:#ccc;}
</style>
<a href="#" class="hoverCode">stuff goes here... selectable at that</a>p.s. ohh yah and feel free to specify the width of the a to make it appear like a div a little more.
-
There is transparency and the right way to do transparency !
Oct6
Posted by agrublev in Angel Grablev
Unfortunately the standard css opacity/transparency feature that comes with css 2.x has a couple of flaws, first of all it is not fully cross browser in some cases. In general the more intense of a system you are trying to set up using opacity in css the more likely it is something will go wrong. For example if you nest any element within an element that has a lower opacity, the nested elements will inherit the parent and not allow you to set their opacity to a 100%. Hence I learned a little trick from back in the Oniracom days. The “pixel repeater”, the idea is you make a 1px by 1px transparent png, and you make it repeat inside a div (both in the x and y direction) for the background: property. Yes you should most definitely apply a png fix of your choice for internet explorer 6. Check out G. Love’s website for a nice sample!
-
Added Search to the website :)
Oct3
Posted by agrublev in Angel Grablev
Yay, i spent a couple of minutes to add a nice little search box on the bottom right of your page. If you are interested as to how i did it… its REALLY easy! Let me show you:
#bottomSearchBar {
z-index:999;
bottom:0;
right:0;
margin-right:20px;
margin-bottom:10px;
position: fixed;
width:250px;
height:50px;
text-align:center;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border: 1px solid #1a1a1a;
background-color:#2b2b2b;
padding-top:5px;
}So make a div ANYWHERE in your page called id="bottomSearchBar" and apply the css… you are done
(might need to adjust the width and the height though). This will not work perfectly in IE… it won’t have the rounded corners but who cares about IE users right 
-
ExpressionEngine 2.0
Oct2
Posted by agrublev in Angel Grablev
First off, if you didn’t know this website is based on ExpressionEngine, not only this website but thousands like it. Not just blogs either, the capabilities of the ExpressionEngine CMS are ENDLESS! Jack Johnson site has a full Social Network portion fully based on the basic features of ExpressionEngine. Version 2.0 is coming out, which will be godly… if you are in need of an amazing CMS please consider ExpressionEngine as your first choice. I may start doing tutorials on how to use expressionengine soon, if i get any request i may start sooner.
-
Use any font you like… what no images???
Oct2
Posted by agrublev in Angel Grablev
That’s right you heard me right, you can use any amazing font you have on your computer in your website… as long as you’re ok with using flash and JavaScript to do it. Now don’t get all scared and run off, it may sound intrusive to use the two together, but it works like a charm and if you do it just right it shouldn’t slow your website at all. Follow this link for more information on sIFR http://jquery.thewikies.com (there are quite a few versions out there so make sure to Google sIFR if you want to check them all out for yourself!)
-
Share the wisdom day
Oct1
Posted by agrublev in Angel Grablev
Today is a special day, first of all because I have not written anything in the past couple of days and I feel really bad. In my excuse though I have been really busy getting to know my amazing girlfriend (yes we computer people live normal lives as well…).
I am going to write about some of the most important and fundamental HTML and CSS principles and techniques I have learned over the years. I understand that you most likely have read about some of them, so swallow your pride and just go to the next one if you already know any of them, I am certain you will find at least one thing you didn’t know about
The poor man’s reset:
<style>* {margin:0; padding:0;}</style>make sure to put this in your<head>tag.
Pros: Whenever I start working on a new website, if I don’t have time to quickly apply my usual reset file then I like to apply that little line which really helps neutralize a lot of display issues in most browsers.
Cons: Unfortunately that simple line does not even do justice to the amount of element differences you will find when learning about the different ways browsers apply their own styles.
A little deeper into the subject of reset stylesheets. You will eventually find out that different browsers apply different default styles to each element, some browsers like IE6 have actual glitches in the way they render certain elements. That is why the reset.css came to be. People still argue the validity of using it, personally I think it helps beyond your imagination. But if you think the way you code is perfect and you would never need a reset sheet to hold your back, feel free and ignore my suggestions.A little more to the left, a little more to the right, it’s almost there…. Perfect now it’s centered
If you have no idea what I am talking about, there is quite an issue with newer web developers who do not know what the best practice for centering is. Fortunately enough for you I will list all the correct centering techniques. First of all let’s make this clear NEVER USE
<center></center>EVER! Now that we have that out of the way here are the two correct ways to do a nice centering job. The infamous<div style=”margin:0 auto; width:300px;”></div>now notice I set a width on the div as well as a “0 auto” margin. The reason you need a width is because if there is no width the element the div is nested in will just stretch 100% and there will be no way for the margin to actually center the element (there is no space on the sides to work with). So if you do use a CSS centering technique you always need to specify a width (even a width:80%; will work). Now why do we use “0 auto” well that is a nice shorthand technique for (0 auto 0 auto) which in position terms looks like (north east south west) or (top right bottom left) either way you should know that when you only specify (north east/ top right) the (south west/ bottom left) will inherit the same specifications. And if you ask yourself “is there an easy way to remember the order” I have to say there is… ([N]ever [E]at [S]our [W]heat) helps me every time.
Second way to center things I call the double text-align, which looks like this<style>#boxOne {text-align:center;} #boxTwo {text-align:left; width:200px;}</style>reason for the width specification I explained above. I have heard rumors this works well in IE6. But the idea is that you should always use CSS instead of the HTML tags provided in order to better cross-browser and improve flexibility of elements.What the heck was the name of that top left piece…
Yes if you have worked with other people’s work you may have noticed that their naming conventions (if any) are different than yours, but it takes you very little time to tell whether those conventions are good (consistent) or poorly written (unrecognizable). As a web developer I will admit I have gone through phases of naming conventions, but now I have it down to a science. Include as much information about the object as you can, such as position shape size etc. For example almost every page I make has the following:
- #wrapper
- #header
- #searchBar
- #menu
- #content
- #leftCol
- #rightCol
- #footer
Something that really helps is called Camel Case which works by simply capitalizing every worth after the first forExampleThisIsEasyToRead, each new word is a hump.The Multiple Class Theory
well it may not actually be a theory, but in my old company (oniracom we had to develop websites rapidly, we would develop up to three websites in the same week meaning we learned how we can make the process faster and better with each next project. At one point our regular structure.css file started becoming from a whopping 300lines or so to the miniscule 80lines, if you don’t believe me email me and ill make sure to send you a website we redid with our new structure ideas that saved us those 280lines. But here is how it works, in html you can legally apply more than one class per element like
<div class=”classOne classTwo”></div>which is really great, it allows you to set a few different structure classes that will be reapplied together to form a whole new style for an element. So instead of a single id for each element to style, you use a couple pre-defined classes and you just saved yourself 8 lines of code. Also helps you keep consistent with styles. Like the classis 5-10-20px system where you only use 5 10 or 20px margins and paddings but I’ll talk about page spacing in a later article.Well I have some other work to do, so that’s it for today. Thanks for reading hope you didn’t get bored.
-
Fixed vs. Fluid - What’s the difference.
Sep26
Posted by agrublev in Angel Grablev
I have had to face the big decision of Fixed VS. Fluid more than a couple times already in my career as a web(developer/designer) and I decided to give you an extract of what i know.
First of all if you don’t know what Fixed and Fluid stand for i’ll start with explaining them both. Fixed is a webpage that has a set width, whether it is left aligned or center aligned it will always remain the same width, commonly 800 or 960px. A fluid layout on the other hand will stretch depending on the width of your browser, so the more you stretch your awesome browser the more the page will spread (hence more text and graphics will fit in the same ammount of height that you have).
Fixed layouts allow for higher customization, because of the fixed with more graphic elements can be applied to the header and the menu. It also allows for a better view for less fortunate surfers of your page. Fluid on the other hand will allow the guys with the sweet 24inch monitors really use up their browsers playing field (removing the need to scroll to see more). But you will be limited to the design elements you can use, unless you use a repeater for each cool graphic element you wanna repeat-x then you will have an awkwardly sized element compared to the rest of the page. Lately i have been trying to combine the two, basically take the best features of fixed and fluid and stick them in one. For example this website has a fluid header, but a fixed body. Yes it’s not the greatest looking website, but for the 2 hours i spent making it in my very busy day i think it does OK. I am currently working on a huge project that will incorporate fixed fluid and then fixed and fluid all over the page, allowing for people with huge resolutions to really enjoy our content with less work. I am also using a lot of transparent png’s and z-indexing to accomplish some elemets to fly over each other and not look totally weird on a smaller browser screen. I will post updates with the project to show you what I mean by that.
p.s. To develop truly fluid layouts you will in no doubt need to use a lot of % and maybe some min-width. Check out vpgameslive.com for one of my fluid developed websites.
-
what a weekend
Sep22
Posted by agrublev in Angel Grablev
First of all, i worked most of this beautiful weekend getting onelight.tv to output. Then i broke up with my “girlfriend”, and so far to be honest it’s all in a bit of a haze. Anyways, i wasn’t really planning on making this post with any tips or suggestions but i found this great article online that you should read if you are into css
above taken from http://blog.position-absolute.com/web-experience/css-for-ie6-5-common-problems-and-fast-ways-to-fix-them1. IE6 double margin bug when using float property on a div
Ahh this is one of the most common bug, but also the easiest to correct. If you use margins on a floated DIV , most of the time (yeah not always, weird..) it will double your margin value. The solution is simple. Add display:inline property. It will correct it, i don’t know why, don’t ask me, it just works and it doesn’t change anything else.
2. Height:100% on a position absolute div do not work.
IE6 is kind of dumb, you need to tell a lot of informations to make it work. In this case, It will not understand the 100% because it’s parent don’t have an height property, 100% of what ??? You need to add a fixed height to it’s parent.
If you want to have 100% of your body you need to add height:100% on your html and body elements.3. PNG have no transparancy
PNG… 10 years ago png was not really known, or was not used in a good way. Microsoft had later implemented a CSS patch only understood by IE to correct this problem:
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”);There is also some javascript that can correct this problem automatically, if you chose to go that way, I recommend this one.
4. In my floated 2 or 3 columns website, sometimes one column just move under my other columns instead of staying aside.
A somewhat common problem too, even if you code a width on your floated column in IE6, it WILL expand to the largest item in this column. If you have a div, an input or anything larger than your column width, it will probably move under the other columns. Look inside your column for a larger element than your column width and correct it.
5. Ie6 render a double of my last item list(< li>) outside of my < ul>, WTF????
Yeah a weird bug that happens sometimes… Add a html comment like at the end of your list and your double item will magically disappear.
6. My list bullets are not aligned with my text
This happen when you have a top padding on your list element (< li>, etc..), put a top margin instead and you should be good. This is a IE7 bug too by the way.
Page 1 of 1 pages
Categories
Browse
Elsewhere
About me
Welcome to my Blog. My name is Angel Grablev, I am a Web Developer and i work as a software developer for UCSB. I have been professionally been developing websites for over 4 years, and I have been interested in web development since i was 7 years old.