I'm a front end web developer living in San Francisco. I have been coding HTML since I was 15. I strive to be the best I can at what I do. I believe in clean and simple design as well as code. This is where I represent myself on the web. I am always looking to form relationships with other amazing people, part time or full time. contact me!
CSS3 has a lot of cool pseudo-classes. For this experiment I used the :target pseudo-class which lets you target css element based on the element targeted at the end of a url, for example.
http://example.com/page#article1
The :target on this page would be the element with the id="article1". So if you wanted to place a red dotted border around article1, then you would use something like this.
:target {
border: 1px dotted #FF0000;
}
So I decided to try an experiment and make a slideshow using nothing but HTML and CSS.
Demo
Sorry, but no IE’s allowed. You prob won’t see anything.
The HTML is a basic unordered list. Each list item will be the slide. Inside each slide is the controls to navigate backward and forward. And a span to display the current slide number.
The main CSS that controls the slideshow, is to just display the current slide, like this.
Object oriented JavaScript is everywhere today, and its the type of thing that takes a developer from someone tinkering with JavaScript on the path to becoming a JavaScript ninja. In this post I’m gonna discuss the basics of creating a JavaScript class, and a subclass which inherits methods from the superclass.
A JavaScript Class
Let’s start out with a basic class. The Person class has one method getName, when you create a new instance of the Person class you will pass in the Person’s name.
So in the above example I created a Person class with a name attribute and a function to retrieve the name. Now I’ll create a new person, “Jon Rohan”.
var p = new Person("Jon Rohan");
// output: Jon Rohan
console.log(p.getName());
The p is a new Person with the name “Jon Rohan”, when I log to the console the result of p.getName() it returns “Jon Rohan”.
Prototype Chain
Now we bring in the prototype chain. The chain is like an inheritance chain. Developer inherits → from Person. So we are defining a Developer as a Person, cause developers are people too. ;-) The developer takes the name attribute like Person, and an array of skills. The first line of the Developer class is to call the Person class. This calls the Person’s constructor. The Developer class also has a new method getSkills, because a Person is too general to have skills, but as a Developer, there are skills that they have.
We also need to set Developer.prototype to the Person’s prototype, by creating a new Person. Now we set the Developer’s constructor to the Developer. And we have successfully created a prototype chain from Developer to Person.
The Developer Class
function Developer(name, skills) {
Person.call(this, name); // we call the Person constructor since it's the superclass
this.skills = skills;
this.getSkills = function() {
return this.skills;
};
}
Developer.prototype = new Person();
Developer.prototype.constructor = Developer;
Now we’ll create a new Developer, with the name “Jon Rohan” and skills ["Javascript", "HTML", "CSS"]. When we create the new developer, he’ll also have the getName method inherited from the Person class, and the getSkills method from the Developer class.
var d = new Developer("Jon Rohan",["Javascript", "HTML", "CSS"]);
// output: Jon Rohan
console.log(d.getName());
// output: Javascript, HTML, CSS
console.log(d.getSkills().join(", "));
This is the basic ideas behind Object Oriented Programming in JavaScript, I’ve only really scratched the surface in JavaScript OOP. Check my RSS or Twitter for new posts.
I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web so I thought I would describe it here.
Demo
How it works
Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored.
<div class="css-arrow-multicolor"></div>
.css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}
As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.
.css-arrow-acute {
border-color: red green blue orange;
border-style:solid;
border-width:25px 10px 15px 30px;
width:0;
height:0;
}
With a little creativity and tweaking there are lots of shapes that can be made. border-style:dotted;
This technique doesn’t work in ie6 as is, mainly because ie6 doesn’t allow transparent borders, but there is a fix for that. What you need to do is give the “transparent” sides a completely different color like pink and then use filter: chroma to turn that color transparent.
I like to mix it up on my blog, sometimes posting experiments, and sometimes posting fundamental front end posts. This is a fundamental, but a crucial step in creating a website. Choosing the correct DOCTYPE for your site.
What is the Document Type Declaration?
A proper DOCTYPE is essential for the correct rendering and functioning of a website in compliant browsers. If you forget to declare a DOCTYPE, on use an incomplete one, then the browser will render in quirks mode, in which the browser will try and be backward compliant leaving you with a website that might as well have the hard hat under construction animated gif on it.
There are typically 3 types associated with each lang version. Strict, transitional, and frameset. Use Strict when you want a pure website that only uses the lang version’s current tags. Use transitional, when you have a site that you will be using some depreciated tags. Use frameset, when you include frames.
Pure Clean HTML
The HTML DTD are the most typical you’d find on websites. Use the HTML definition when writing plain old standard HTML. Great thing about this is by using standards there’s no surprises for any browsers when parsing your page.
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 5
I love the new HTML 5 DOCTYPE. Why? Because this is all it is.
<!DOCTYPE HTML>
X is for Extreme
The X in XHTML actually is referring to the fact that XHTML documents are XML conforming. This means that XML tools can more easily validate and parse the HTML. Another advantage of XHTML is that it is as extensable as XML. Meaning you can create your own html tags and use them, here’s an example of what I mean.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>A Math Example</title>
</head>
<body>
<p>The following is MathML markup:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply> <log/>
<logbase>
<cn> 3 </cn>
</logbase>
<ci> x </ci>
</apply>
</math>
</body>
</html>
This can be extremely useful when you are using an unofficial webstandard like microformats, foaf, etc…
Here are the declarations for XHTML.
XHTML 1.0 Strict
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
XHTML 1.0 Transitional
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
XHTML 1.0 Frameset
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
XHTML 1.1
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
So which do I choose?
Let me answer this question with a question. What will be the focus of your site? When you are building a site that will be viewed on non-standard browsers (eg. some mobile browsers, the kindle, the wii) then XHTML is your best choice. When you are building a site that’s gonna be viewed in standard browsers, (eg. firefox, safari, ie, opera) then HTML is what you should be using.
To decide how to pick between Strict, transitional, and frameset, this really depends on your coding style. I think you should use Strict and in special circumstances use transitional and frameset. My favorite at the moment is the HTML 5 DTD, it’s extremely simple to remember. <!DOCTYPE HTML>
More and more devices today are connected, to the web and to your location. Some of the most recent browsers and OS’s have location built in, (eg. mobile safari, snow leopard, FF 3.5, …).
The API doesn’t care what is updating the location, it just grabs the location from the navigator.geolocation object. Here’s a closer look at the interface.
Geolocation interface
interface Geolocation {
void getCurrentPosition(in PositionCallback successCallback, [Optional] in PositionErrorCallback errorCallback, [Optional] in PositionOptions options);
long watchPosition(in PositionCallback successCallback, [Optional] in PositionErrorCallback errorCallback, [Optional] in PositionOptions options);
void clearWatch(in int watchId);
};
[Callback=FunctionOnly, NoInterfaceObject]
interface PositionCallback {
void handleEvent(in Position position);
};
[Callback=FunctionOnly, NoInterfaceObject]
interface PositionErrorCallback {
void handleEvent(in PositionError error);
};
getCurrentPosition() – takes three arguments. The first (required) is the successCallback function which you define to handle the asynchronous call. The second (optional) is the errorCallback function, for when you can’t be found. The last is PositionOptions object which you can specify Boolean enableHighAccuracy, long timeout and long maximumAge. The function will get the position and pass it to the successCallback function as a position object.
watchPosition() – takes the same three arguments as getCurrentPosition. And on the surface it does the same thing as it, with one big exception. watchPosition will call the successCallback every time the position changes. So if you wanted to create a mobile app that follows you walking down the street, this would be the function to use. When called the function returns a unique identifier, which you use to call the last function.
clearWatch() – takes one argument, the unique identifier from the watchPosition method. This method will clear the watch timer.
Demo
I wrote a small example that will get your lat, long and display it.
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
} else {
noLocation();
}
}
function foundLocation(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
$("#current-location").replaceWith('<a id="current-location" href="http://maps.google.com/?q=' + lat + ',' + long + '" target="_blank">' + lat + ', ' + long + '</a>');
}
function noLocation() {
$("#current-location").text('Could not find location');
}
$("#get-location").click(getLocation);
Disclaimer: I’ve tested this in Firefox 3.5 on my Mac, and my iPhone mobile Safari.
Coordinates: Check location by clicking the button.
