There are three relative minor updates. I have fleshed out the text styling by adding list styles. I have adding extra white space between content and comments which causes the comments to move off my laptop screen. I added a comment form.
Now, there is one major update. Scroll all the way down to the bottom. I have started to work out the rethought and improved advanced browse/search (if you think of a better name tell me). The current design has a browse and search which you can toggle open. Shortly after creating it, I saw many issues with it—oh well. This is a second take on it. It is a mashup of a search and browse by category. The x-axis is for search relevancy and the y-axis is how many categories the result is in.
I am really happy for the CSS display inline-block. It does so many little things I need. For instant, I used it for the post links in the search/browse at the bottom of the page. I can have the links be compact so two can be on one line but it also prevents the links from creating a messing line wrapping which breaks the bubble feeling.
]]>But I just keep coming back to one single idea. It is centered around what the user is looking at on the page. Since reading the users mind is even more out of the question, it would be awesome if the webpage knew what the user was currently looking at. If it knew you were reading the main content it would dim the chrome of the page. Or if your eyes were darting around looking for something, it could start highlighting useful items based upon what your eyes have already looked at. Lots of ideas, but a lot less on how to actually do them.
]]>From my snooping, Wordpress 2.2.x has a new hook and has changed a hook. Before 2.2, the delete_post hook was called after the post was deleted. With 2.2, delete_post hook is call before the post is deleted whereas a new hook deleted_post is called after the post is deleted. In all the cases, the hook function is passed the post ID.
This is very good because originally you would be out of luck if you needed information (date, slug, etc) about the deleted post. Now you can grab the information, based upon the ID, before the post is deleted from the database.
]]>It really seems that most of us are of the same opinion in that MySpace should not be used for designer networking or portfolio display.
I believe in keeping the design standards as high as possible, for myself, and the industry. There are so many great, professional, resources available to us for these purposes. Oh yeah, like AIGA!
This and the entire conversation irked me. I responded. The following is based upon my response.
I kept thinking and dwelling about the utilizing MySpace all that night. Blank, blank, blank were the first several dozen ideas I had as to why to do it. Then I realized I was wrong, and perhaps most of us, in my approach. Think MySpacing—not MySpace. What action—what emotionally connected action—what addictive action—what MySpacing will they do to your profile? How will they be MySpacing with you?
This is not really my idea and regrettable I do not remember who, out there in the wild, suggested this idea. But the idea finally sunk in with me: “MySpace is about the action and interaction. It is the activities that keep coming back for more.”
Let us put this to mental use; what could our MySpacing page be? Instead of making it our portfolio, we will make it a portfolio piece of MySpacing.
Our MySpace page will be the home to the Dancing Baby II—Da Bay Deuce as the wanna be cool kids call it. Get people to come and come again because they it is a weird bad pop culture addictive quality. Make it something that people will not admit to liking to their friends until that one brave friend admits it and then its ok to fancy it (heck even the emo kids will like it, they just will not admit it). But, there is more to this. People then want to befriend Da Bay Deuce so that a cheesy animated GIF or Da Bay Deuce shows up in there friends list. Then we kick it up a notch; we create a full persona and start commenting on their profiles to tease them back to our profile. In addition, people leave comments on our profile where they can shout out what they want to see Da Bay Deuce do next. Then let’s say, Da Bay Deuce visits your company, for some contrived reason, and an awkward yet funny situation occurs.
Maybe that is not the best example; but, hopefully you can see my point.
MySpace may not be suited to display your portfolio; but, instead it is suited to be a
portfolio piece, in itself, of designing MySpacing.
Although WordPress has a built-in import feature for TypePad/Movable Type, it does not import the slugs. (The slug is the post name formated for the URL for example a post titled “I Love Cheese” has a slug of “i-love-cheese” in WordPress.) The slugs are not export by TypePad nor import by WordPress. So WordPress creates new slugs for each post in the WordPress style. The three issues with this are:
The first and second can be easily be fixed with a little bit of SQL on the database. But since the last one requires that you know explicitly the slug in TypePad, a modified import process needs to be done.
(These steps require that you do not have any post in your WordPress installation.)
The first step is to get an export from TypePad with the slugs included. Adam Stiles has created a Movable Type template for this purpose . I did have to modify it to get all (actually about the last five years which all the post are within) the posts instead of the last 100.
Original:
<MTEntries lastn="100">
Modified:
<MTEntries days="1780">
Please note that this will only export posts which are published. Drafts will not be exported.
Save and publish the template as an Index Template. Then view the generate published file and save it to your computer.
The second step is to import the exported posts into WordPress. The default WordPress import will not import the slugs. In order to also bring in slugs, you will need to use Adam Stiles Movable Type importer.
define('MTEXPORT', 'export.txt');”.define('MTEXPORT', '');” before moving to the next step.)(This part of the process assumes that no posts existed in your WordPress installation before you imported the TypePad post into WordPress. Although, I am sure you can still trim the desired posts with SQL code which targets the desired posts.)
The imported slugs are not the actually slugs; instead, they are the relative URL paths which happen to include the slugs. To get the proper slugs we will trim the excess. For this case, the format is ”/YYYY/MM/SLUG.html”. A simple MySQL query can trim this (I did this in phpMyAdmin):
UPDATE <WORDPRESS TABLE PREPEND>_posts SET post_name = INSERT( INSERT(post_name, LOCATE('.html', post_name), 5, ''), 1, 9, '' ) WHERE 1
The break down of the query
<WORDPRESS TABLE PREPEND> is the value you prefixed your database tables with during the configuration (the default is “wp”).WHERE 1. post_name is the post slug field.( str, pos, length, repstr) is a MySQL function we are using to “erase” part of the string we do not want.('.html', post_name) returns the starting position of ”.html” is post_name.INSERT(post_name, LOCATE('.html', post_name) returns a string of ”/YYYY/MM/SLUG” which means we erased ”.html”.INSERT( INSERT(post_name, LOCATE('.html', post_name), 5, ''), 1, 9, '' ) returns a string “SLUG” which means we erased ”/YYYY/MM/”.Finally, the imported post have their respected original slugs. Which will make it far easier to mimic the URL structure of the TypePad individual archives with WordPress.
]]>Since you are reading now, allow me to illustrate why you must play and not just read:
“How do I make my text red and uppercase with style sheets?”
“Simple,color: redandtext-transform: uppercase.”
“Wow, that sure is simple to grasp,” said with a smile.
“Sure is simple to explain,” happily accented with a thumbs-up.
Ahh, such a dandy conversation. Which leads to a conversation about positioning, will this be as dandy as fruit pie?
“How do I position my content to be up 26 pixels underneath my navigation?”
“Try this: First, set your navigation toposition: relativeandz-index: 2. Next, set your content toposition: relativeandtop: -26px”
“Umm, that is not quite what I want… …Ok now it does what I want, but why?… …My head hurts,” said after forking the last bite of fruit pie.
“Yeah. Understandably,” while looking regrettable at the now vanished fruit pie.
As illustrated (in an over simplified manner), I find myself unable to explain all the nuances of CSS positioning to friends. Understandable, it is hard to absorb float, clear, position ,margin, padding, top, bottom, right, left, z-index, height, width, etc. I happened through the years to teach myself CSS by doing and then (a) achieving the desire results, (b) failing absolutely and then searching for information, or (c) noticing a behavior unbeknown to me and then reading up on it.
To incubate something of a similar learning environment, I created Playfully Positioning. It is an individual-exploration of how six important CSS positioning rules behave and interact with each other: position, z-index, top, right, bottom, and left.
If you want a little guidance, below I give a brief run-down of the basics of the rules.
Most people do not use position: static explicitly because it is the default when no position rule is provided. The rules top, right, bottom, and left have no effect.
If you want to adjust the position of a box based on its original position in the layout flow, position: relative is your piece of pie. The rules top, right, bottom, and left move the box from it’s original place in the layout flow and its original displacement in the flow still exist. For example, top: 40px will move the box 40 pixels down from its original place and overlap anything in the 40 pixels below the original position of the box and still leave a 40px gap above the box.
Want to disregard the layout flow, position: absolute could be your ticket. It will take the box out of the layout flow which means no big hole (displacement) in the flow. Watch out for the double personality of the rules top, right, bottom, and left. The rules say how far the edge (lets say top) of a box is from the same edge (again top edge) of the box’s containing box. Now this leads to the double personality. If the box has an ancestor (a box with which it is inside of) that is positioned relative, absolute, or fixed, the ancestor is the containing box. But if no ancestor is positioned relative, absolute, or fixed, then the containing box is the top-left corner of the page with the same dimensions of the view-port—not the page. Just try it out because it is much simpler than it sounds.
Ooo’s and awww’s come from position: fixed. It will take the box out of the layout flow (just like absolute) and then do a neat trick—not move when you scroll. As with the absolute, the rules top, right, bottom, and left are from the edge of the box to the edge of the box’s containing box. But, the difference is the containing box is the view-port. (I am not positive about containing box always being the view-port in regard to the specs, “[t]he box’s position is calculated according to the ‘absolute’ model[… ]”.) For example, top: 30px places the 30 pixels from the top of the view-port (the area of the page you can actually see in the window).
Yes, z-index gives you layers but not Photoshop layers. A layer belongs to a stacking-context. A layer is above other layers (in a stacking-context) if it has a higher z-index or the later one if the two have the same z-index. A stacking-context is either the body or any box that is positioned absolute, relative, or fixed. Which means, a layer in a stacking-context can be another stacking-context. To go along with it, seperate stacking-contexts cannot be in between each other’s layers. Huh? For example, lets say you have a stacking context X with layers A and B and you have a stacking context Y with layers M and N. Either all the layers in X have to be below the layers in Y or vice versa. Remember, X and Y are just layers inside another stacking-context. Lets give them all z-index value: (X, 5), (Y, 1), (A, 0), (B, 10), (M, 1), (N, 100). The result order of layers from bottom to top: M, N, A, B. I suggest you play around with this and read through the specs slowly.
Now if you haven’t played with Playfully Positioning, do so.
<script src="jquery.js"></script>
<script src="AddAClassNameAtRandomToAnElement.js"><script>
var setOfRandomClassNames = new Array("aa", "bb", "cc"); // three classes with the names: aa, bb, and cc
//var queryForElementsToAddRandomClassTo = "body"; // adds the class name to the body
var queryForElementsToAddRandomClassTo = "#cow"; // adds the class name to an element with the id of cow
……
$(document).ready(function(){
$(queryForElementsToAddRandomClassTo).addRandomClass(setOfRandomClassNames);}
});
…</script>I changed it from an independent function to a method (JQuery Plugin) of the $ as John Resig suggested. Keep up the good work on JQuery John!
]]>