So far, Leslie Franke's CSS Cheat Sheet is nice and compact. What I need, though, is something that's a little more best practice / philosophical. I'll use his cheat sheet as a jumping-off point.
Hell if I know what the best way is. The CSS Box Model makes it more difficult to tweak the spacing and dimensions of nested box designs on the fly without forethought. Since CSS does not support constants either, which would have been incredibly useful, it means that creating a CSS-based layout is incredibly finicky compared to how a graphics programmer might have approached a flexible definition language. There must be some advantage
Some rules of thumb that I'm aware of:
Avoid the use of extraneous block-level elements, and use DIVs sparingly.
Create a clear cascade of elements, which helps specificity of applying styles broadly and individually.
Separate content from presentation. Presentational elements can be handled through CSS styling. Content elements are inline. Master the use of selectors.
Use HTML in a semantic manner. That means content-oriented, not presentation oriented, which allows the chunks of text and imagery to be properly scoped within the conventions of paragraphs, headers, sidebars, and so on. Also applies to using names for styles and classes.
While searching for "justifying the CSS Box Model", found this neat link off Dave Shea's site: CSS Cribsheet, which is a concise best practice checklist. Sweet.
Neat RESET code from Eric Meyer
A bunch of css frameworks to oggle!
It occurs to me that one thing that I've overlooked is that HTML, despite me thinking it's a kind of static layout language, is still highly order-dependent when it comes to writing markup. The concept of "in the document flow" and "out of the document flow" figures in heavily; since HTML is designed to flow endlessly in a document of undetermined width, each HTML element is designed to stand alone, not together. So the reason the element dimensions do not contain margin and padding within width is because the content is considered atomic; spacing is really considered as an optional attribute. It still seems a bit dumb to me because it makes flowing content predictably an act in constant arithmetic. This leads to making mistakes in addition, which leads to lots of tedious arithmetic bugs in coding, which I think is something preferably contained and should not be propagated.
Anyway, a visual designer is interested in combining elements so they seem to fit together, but this is not the prime concern of HTML. CSS is what was developed to tweak the flow into something, so the art of CSS design is less defining bins and boxes with self-contained elements than it is about artfully squirting content into boxes and hoping it all fits together neatly. However, there are real-world problems with browsers not quite working the same way, so this creates a world of pain if you want your page to look right. It's sort of like playing COMPETITION TETRIS, with each weirdly-shaped HTML element coming down the stream, and you hoping that you placed your previous blocks in a way that doesn't SCREW ya.
Which is why I have avoided HTML and CSS for so long and stuck with Flash. I tend to do screen-based stuff anyway. But it's inevitable that I need to define one bulletproof subset of HTML/CSS for just getting my stuff out there and looking relatively decent.
So one of the major clashes with my design sense and CSS is that I think in terms of screens, boxes, overlaid infographics, animation, event chains, and rasterops on framebuffers. This is an old-school computer graphic mindset. Now that I think about it, my video game screen architecture is a little underdeveloped in terms of content management.
The W3C Visual Formatting Model is the source of all. It suffers from introducing the concepts in an isolated piece-meal fashion. This is part of the overall CSS2 specification, which I guess I should read.
Essentially there are two kinds of boxes. The block boxes are full-width and stack on top of each other. The inline boxes stack left-to-right, unless you mess with that ordering and width with CSS properties.
Boxes can contain other boxes, providing context.
There are also boxes that are created on-the-fly by other tags. They inherit their properties from parent containing boxes.
Uncontrolled width is what screws up flow. Since width (and height) are sometimes not known until the element is fully rendered, this creates additional problems. So pre-calculating widths properly is important in defining tightly-controlled layouts. Also, the understanding of flow and out-of-flow elements is critical to create minimal CSS. There are also automatic calculations (e.g. 'auto') that help.
Width seems to be more constrained than height. The HTML doc is assumed to flow endlessly without length but with bounded width. This is important to know for attributes like overflow.
So what kind of properties do I care about in the layout?
Changing the type of box using display as block or inline or none to hide it.
Setting dimensions using width and height, keeping in mind that margin, border, and padding add to it.
Boxes expand unless width is applied. If you use height then overflow becomes a consideration.
Floats applied to an element will tell content after it to flow around it. You can float: left or right. So order is important. And floats will pile up, as much as they can, relative to the containing box. Use clear: left, or right or all so the element will ignore it. Here's a pretty comprehensive article.
The float properties can interact in weird ways. Need to know containing box, active floats before and after, and ensure width is set to predict it. Then there are the damn browser bugs...fortunately these seem to be diminishing with current browsers in use.
Positioning via the position: static, relative, absolute, which sets the type of positioning relative to document flow. Static is the normal behavior. Relative allows you to use left, top, bottom, right attributes to nudge it. However, this is more of an offset of the drawing code for that element; other elements are not shifted based on the position! Absolute is exactly where you want ON THE PAGE.
To use relative positioning inside a containing box, set position: relative on the containing box and then position: absolute on the inner box.
Automatic values can be applied to margin-left:auto and margin-right:auto, which tells the browser to automatically calculate. Works only with width. Expressed usually as margin: 0 auto
Can specify pixels as px, percentages as %, and ems as em suffixes. Percentages need to have a parent containing size to work. Ems are relative to the font-size property or its parent depending on use. So ems are useful for text-related matters, and pixels probably for more layout-related styling. % might be OK too for that too. Hmm.
One annoying thing about HTML and CSS is that the browsers themselves don't render entirely the same. Since HTML was invented primarily as a document description language, niceties such as consistent pixel rendering aren't important. And the original idea was that people could format their text in a way that was most convenient for their own viewing. CSS is the means by which to hack-on presentational control, but it's a fight between user advocates and designer control.
So the reality is that all the browsers start out with different default spacings, which Meyer's RESET code handles. There are other reset css in use, such as Yahoo's Font Reset, which is part of Yahoo's YUI Library.
Therefore, it's desirable to use this reset code to establish a nice baseline. I have my own preferred text styling, for example, so I can customize this code to conform to my expectations. An inspection of which elements are reset is instructive in knowing what the problem elements in the layout will be, and starting from a base will mean less finicking around later.
Note to self: that IE6 double-margin bug that apparently affects floated elements goes away when display: inline is added. Hmm!
There's a few websites where this annoying stuff is all cataloged:
When you inline list elements, you'd think you could adjust their padding at the top and bottom so the background effect you're applying will be the right height. Nope! Certain properties are disabled for inline elements. A solution suggested is to retain the block-level but just float them left.
Or set the line-height property and use background graphics for the highlighting...I'll have to try that next. Page 13 of Cederholm's "Web Standards Solutions"...
I'm becoming aware of some Internet Explorer 7 weirdnesses, like this idea of hasLayout, which is an rendering-specific flag that IE seems to set to trigger different behaviors, which is the indirect source of many IE7 rendering bugs. Pretty annoying.
I also am learning that I shouldn't work on CSS on my laptop, because I will go blind.
Grid systems appeal to me. There are two aesthetic elements that come to mind when working with grids:
Given a page width, one needs to divide it into equal chunks so you can lay things out nicely and evenly. With print it's easy to do, but on a bitmapped display you need to think in pixels. Nathan Smith's 960gs system is a nice introduction to this idea. In that article is a nice link to Setting Type on the Web, which goes through the fun pixel-based calculations to get a nice vertical grid.
Once you have a grid system, one decides how much to let the columns breathe. This is kind of a whitespace-to-content-ratio decision. I tend to like compact groupings and whitespace that clarifies the boundaries between groups, but I don't have a layout principle. Maybe it's time to develop one.
As I've been farting around more with HTML/CSS, I'm coming to see how DOCTYPE + RESET are two of the main things that you should do right away. There's a really nice comparison of CSS reset approaches on Perishable Press, which itself has some beautiful web typography.
I've also read some arguments about whether CSS Reset code is good or bad practice. I like how the CSS Reset "fixes" browser inconsistencies in spacing, making it mandatory to rebuild them. Some argue that breaking down and then rebuilding spacing rules is wasteful of processing time and efficient coding. Some argue that it's lazy. Personally, I think it saves me time in an environment that is already notoriously awash in interpreted, weirdly-specified standards that shares little common sense with regards to the historical development of computer graphics systems. Complaining about resetting CSS is kind of like complaining about having a cup of water poured on you in a thunderstorm. But that's just what I think.
For a while I have been belaboring under the assumption that the overflow property had something to do with the way block elements expanded. NOPE! This article on Devito Design explains overflow and how to expand DIVs. The basics: overflow controls when scrollbars appears. That's it. It doesn't have anything to do with whether a DIV gets bigger. You can see how this works in this post that shows examples of overflow.
What I really want to do is have my DIVs expand to contain whatever content is in it. Seems like a reasonable request, right? The author on Devito Design says he spent hours researching this tip, and he is a good guy in my book for providing this solution (if it works...I'm about to try it):
div
height: auto;
overflow: visible;
This worked in one situation, but not another.
It's that weird issue where the containing DIV doesn't seem to want to contain any floating elements...annoying! It's explained, with a nice "history of the solution" approach, on Quirksmode in this article describing the collapsing float workaround for Internet Explorer. And there's a good alternate description at CSS Tricks All About Floats, which quick solutions that work around IE. It all sounds maddening to me. So I fixed my problem by applying the time-tested `<div style="clear:both" > which fixes the height calculation...I guess the browser rendered suspends or is unable to calculate heights while everything is floating.
After you do a big margin:0 padding:0 reset on the UL, OL, and LI, you've got to build 'em back up. For just the regular bulleted lists, Eric Meyer notes that different browsers pad differently. The default behavior, with the bullets outside the left margin, is actually the traditionally correct way to do it. However, I prefer the indented margins myself...sorry. Anyway, here's the code I use (assume margins and padding are set to zero):
UL
margin-left: 2em; margin-bottom: 1em;
I'd forgotten how to fix the "columns are equal height" dilemma. There are two sources of info that I find promising: Dan Cederholm's Faux Columns approach and this pure CSS approach by Matthew James Taylor. What's nice about both these writeups is that they identify the working principle pretty clearly.
Cederholm's approach is probably the easiest with my fixed-width layouts. Taylor's approach requires extra DIVs to contain the background. The basic premise is that a floated parent DIV will stretch to the height of its largest child. You can set the background color of the parent, then. To make columns, you wrap the parent with MORE floated parents (each which will be the same height), then nudge all the divs into place so they lay on top of each other using relative positioning. A little tricky to grasp, but once you work out the math it makes sense. Each containing parent DIV also needs to be 100% width, otherwise the stacking doesn't seem to happen correctly.
Many of these positioning tricks appear to be based on activating the float or position properties of DIVs. Then, attributes such as width and height come into play. There is probably some kind of logic behind this. In some cases, the float property makes containers behave more the way we'd expect them to work:
A floated div contains in entirety everything that is inside of it. If it's not floated, the DIV does not contain everything and things are allowed to stick out of it. This article has a concise rundown of techniques.
On a similar note, a non-floated div that contains nothing but other divs is considered to have no content. That is why you stick a "br style=clear:both" just before the closing tag; this forces the div to have content, and then it has to stretch to contain the very bottom of any contained divs.
The "position:relative" property fixes some bugs with IE6-7 related to the overflow property. Snook has a quick note on this Good to know.
Using the position property on a div also disables the margin/padding collapsing "feature", if you're wondering where your extra padding and spacing has disappeared to, or if you're seeing mysterious gaps between DIVs. Andy Buddy explains this clearly (no pun intended).
The trick of using an outer div with "position:relative" in conjunction with an inner div with "position:absolute" opens up all kinds of easy static layouts.
Width and height calculations with the box model are pretty damn essential. It's an annoying model, to be sure, but it's what you have to deal with.
These are older notes and don't necessarily cover the newest versions of Wordpress and Media Temple's (dv) offerings.
I'm no longer running WordPress on my (dv), but here are the notes I wrote when I was moving my old wordpress blog. The optimization notes are probably still useful. I'm currently running Expression Engine, if anyone is curious.
I was doing some internal server optimization, and noticed a lot of error messages in /etc/httpd/logs/error_log coming from localhost (127.0.0.1) trying to hit the root directory of httpdocs. That's totally weird, so I Googled it and came up with this explanatory post. The solution to avoid errors was to create a dummy index file in the DocumentRoot. Apache still logs the access, though.
There are a couple of mysql optimization scripts available. I just downloaded the current version of MySqlTuner, and it reports some things I should do. Here's the output:
MySQLTuner 1.0.1 - Major Hayden [major@mhtx.net]
Bug reports, feature requests, and downloads at http://mysqltuner.com/
Run with '--help' for additional options and output filtering
-------- General Statistics --------------------------------------------------
[--] Skipped version check for MySQLTuner script
[OK] Currently running supported MySQL version 5.0.45
[OK] Operating on 32-bit architecture with less than 2GB RAM
-------- Storage Engine Statistics -------------------------------------------
[--] Status: -Archive -BDB -Federated +InnoDB -ISAM -NDBCluster
[--] Data in MyISAM tables: 2G (Tables: 348)
[--] Data in InnoDB tables: 6M (Tables: 382)
[!!] Total fragmented tables: 43
-------- Performance Metrics -------------------------------------------------
[--] Up for: 132d 17h 56m 59s (132M q [11.572 qps], 6M conn, TX: 3B, RX: 2B)
[--] Reads / Writes: 75% / 25%
[--] Total buffers: 35.0M global + 2.7M per thread (100 max threads)
[OK] Maximum possible memory usage: 303.7M (17% of installed RAM)
[OK] Slow queries: 0% (594/132M)
[OK] Highest usage of available connections: 62% (62/100)
[OK] Key buffer size / total MyISAM indexes: 8.0M/191.8M
[OK] Key buffer hit rate: 98.3% (4B cached / 76M reads)
[OK] Query cache efficiency: 60.8% (62M cached / 103M selects)
[!!] Query cache prunes per day: 72678
[OK] Sorts requiring temporary tables: 1% (91K temp sorts / 7M sorts)
[!!] Joins performed without indexes: 35870
[OK] Temporary tables created on disk: 19% (1M on disk / 5M total)
[!!] Thread cache is disabled
[!!] Table cache hit rate: 0% (64 open / 837K opened)
[OK] Open file limit used: 12% (124/1K)
[OK] Table locks acquired immediately: 99% (77M immediate / 77M locks)
[!!] InnoDB data size / buffer pool: 6.4M/2.0M
-------- Recommendations -----------------------------------------------------
General recommendations:
Run OPTIMIZE TABLE to defragment tables for better performance
Enable the slow query log to troubleshoot bad queries
Adjust your join queries to always utilize indexes
Set thread_cache_size to 4 as a starting value
Increase table_cache gradually to avoid file descriptor limits
Variables to adjust:
query_cache_size (set more than 8M)
join_buffer_size (set more than 128.0K, or always use indexes with joins)
thread_cache_size (start at 4)
table_cache (set more than 64)
innodb_buffer_pool_size (set more than/equal 6M)
In the recommendations section, I can see that there are some settings that can clearly be optimized. I had actually optimized these on my old dv, but the settings didn't migrate over. So let's look at my /etc/my.cnf configuration file; I have these relevant values set:
query-cache-type = 1
query-cache-size = 8M
set-variable = innodb_buffer_pool_size=2M
set-variable = innodb_additional_mem_pool_size=500K
set-variable = innodb_log_buffer_size=500K
set-variable = innodb_thread_concurrency=2
The query cache is a section of memory that is used to cache queries that always return the same data set. So, it's the sort of thing that is useful for simple read operations.
Here are the changed values...you'll see I bumped up the query-cache-size by a factor of 3!
query-cache-size = 24M
set-variable = innodb_buffer_pool_size=8M
And here are values I added:
set-variable = join_buffer_size=512K
set-variable = thread_cache_size=4
set-variable = table_cache=1024
Now I need to let this run for a bit and see if there's any improvement. Timestamp: 3/11/2010.
After running for about a day, I'm seeing an improvement, but I am still seeing a lot of Query Cache Prunes (45000 over a period of 16 hours). Otherwise, things look pretty good. There's a variable called query_cache_limit that sets the maximum size of a saved query. It defaults to 1MB. I'm thinking that most of the query results returned for a blog are text, certainly no more than 30K of text for even a long post, so 1MB seems way too high. I set it to 256K for now starting at 8:00PM, to see what kind of impact it has. My reasoning is that anything that returns a result greater than 256K is likely to be a pretty rare operation, and so it shouldn't be cached anyway. I can't even imagine what would return a dataset that large on my blog. I'm hosting a site for a friend, though, that uses Phorum; it uses the database to store files (ugh). The filesize limit on that is about 500K, so perhaps this will cut down on the problem. I should probably set it even lower, but we'll see if 256K helps. Currently, I'm seeing these values with a cache limit of 1M:
[OK] Query cache efficiency: 60.7% (321K cached / 529K selects)
[!!] Query cache prunes per day: 45002
An interesting thing is that I'm actually seeing the prunes-per-day metric DROPPING already after setting the limit to 256K. Here are the values 15 minutes later:
[OK] Query cache efficiency: 60.7% (324K cached / 533K selects)
[!!] Query cache prunes per day: 44503
After running for a couple of hours, the value stopped dropping. For the heck of it, I set the limit to a mere 64K at 9:50PM. Will check in again. I have noticed that the website does seem to be more responsive overall than even yesterday, when I first expanded the size of the cache from 8M to 24M.
]]>These companies all have slightly different models in hooking clients with prospects. Some are outright "competitions" for a fixed cash prize. Others are more like marketplaces.
Informational Posts
While there are a lot of larger camera bags available, most of them are designed to carry only camera gear. I'm looking for a bag that is designed for the person who wants to carry a DSLR with additional work gear. For me, that's several paper notebooks, some electronic gadgetry, power supplies, and compact external keyboard/mouse.
While the ThinkTank UD60 can carry it all in one package, I am now leaning toward a two-bag system for better weight distribution and modularity. For laptops, I tend to prefer vertical briefcases that have detachable backpack straps as a carry option.
Bags in bold are the ones I've been personally using. This list favors bags that I believe are obsessive or unique in their approach to style, ruggedness, and use in the field.
Reviews follow after the list. If you are a bag manufacturer that would like your bag reviewed, contact me! We'll put it through the wringer and figure out what we would use it for.
NOTE: If you follow any of the ThinkTank product links and decide to purchase, you'll get an additional gift from them because of the referral program that they are offering through this site (apparently, this page sends them quite a few referrals). The gifts are: Cable Management 20, Pixel Pocket Rocket, Modular Pouch, or Security Tag, and appear when you are checking out of their online store.
It's 16L x 11.25H x 4.25D in internal dimensions, and it fits my 40D carried lens-down. This leaves a 10 x 11.25 x 4.25 in volume next to it for carrying papers and books. The laptop compartment is 16 x 11.25 x 1.5 in, which is plenty of room. Overall dimensions: 16.5 x 12 x 6 in.
This is currently my favorite larger bag. You can see some photos of the bag to see how I configured the internal compartment for the Canon EOS40D. I've taken this bag to South by SouthWest (SXSW), carrying around about 25 pounds worth of gear, and have shlepped it between the east and west coasts as carry-on luggage.
With the optional backpack strap accessory, walking to and from the convention center (about an 8 minute walk) was not bad at all. Even better: when it rained, I could drape my light windbreaker over the bag to shield it from rain. I could have optionally used the included Rain Shield, which is a waterproof covering you can put around the bag. I'm not sure how it would work with the shoulder strap though. The back pack attachment is definitely worth it for hands-free carrying of heavy gear.
I've brought the bag with me to San Jose. It fits nicely under the airplane seat, has plenty of pockets. The build of the bag is a little lighter than what I'm used to, but I'm pretty happy with it. No tears, no problems, no signs of wear or impending collapse. I've mostly been hauling it around by the shoulder strap (no sign of fraying) in the back of my Volkswagen GTI.
A few observations with the bag:
Otherwise, I'm pretty happy with it. The one functional drawback, though, is that with my camera loaded in the bag I don't have much room for magazines or regular notebooks. There is one inner pocket that can take a notebook and a few magazines, and the outer pouch can take another one, which I'm finding merely adequate. I sometimes use the UD60 primarily as a gear bag, and use a Briggs and Riley Vertical Brief for paper + a netbook. Or, I use the LEvertigo 17 for the notebook + accessories, and use the laptop compartment of the UD60 for additional folder storage.
One other note: the shoulder strap that this bag comes with is just AWESOME. I have thought of ordering extra ones for my Briggs and Riley 17" Computer Brief, which I used to think had a decent shoulder strap but it's horrible by comparison.
LINK: ThinkTank Urban Disguise Site
I picked up one of these bags when I was at the Mac-Pro store in San Jose, California, which happens to be the only North American distributor for Be.ez. My Think Tank UD60 was getting awfully full of stuff, and the way I have my bag packed with the Canon EOS 40D makes it difficult to carry larger paper notebooks.
The construction of the bag is sleek and stylish, and it does hold a MacBook Pro 17 very nicely. The fit is snug, to the point where my Speck-encased laptop makes it a little difficult to lock down. There are no external pockets at all, so you need to lift the front flap to access the inner pockets. While the bag doesn't hold an incredible amount, you can certainly carry pens, a couple of notebooks, and a fair number of accessories (iPod, charger, small digital camera, cables, etc). The bag is actually wedge shaped, the bottom wider than the top, which allows one to pack in more stuff in the bottom pockets without unsightly bulges.
Functionally speaking, one drawback of this bag is that it has a tendency to lean forward (toward the front flap) when you set it on the ground. It falls over fairly readily. To compensate for this, you just turn it around, but it makes accessing the pockets while at Starbucks slightly awkward. There is no top handle on the bag either, which helps keep the lines clean but makes repositioning slightly awkward because you need to grab the long seatbelt-style shoulder strap. However, on my shoulder the bag is very comfortable and close-fitting because of the vertical briefcase style.
The form factor of this bag is more well suited for traveling light to a meeting. When I need to carry a ton of gear, I use the Think Tank UD60 with backpack straps. I may use the LEvertigo as my permanent day-to-day laptop transportation solution, and keep the UD60 for the digital camera and supplies, but that sort of defeats the purpose of having a single bag that can carry both.
This bag is aging fairly well, though the soft pocket material seems to have developed some very slight wear. I'm not sure how well the zippers will hold up over time, but they are not under a lot of stress. When I'm just carrying my laptop, it holds everything I need plus a couple of notebooks for writing in. I think this bag has been replaced by something newer last time I was visiting the sole North American distributor in San Jose, but I haven't yet really had a good look at it.
CON: I walked around Campbell, Northern Cal in February 2009, loaded with the 17" MacBookPro encased in a Speck clear case (it still fits!). The bag's fasteners were squeaking very loudly and annoyingly. I am going to try to put some graphite on it to reduce the noise. It appears to be coming from where the loops meet each other; they are a kind of textured metal that are rubbing against each other.
AESTHETIC WEAR: The striping around the edge of the bag is getting worn and ratty-looking. I think it used to be white, but now it's gray. In patches.
LINK: Be.ez LEVertigo 17
]]>I don't really know what it is and what it does, other than you can build dynamic websites with it. Expression Engine 2.0 was "built on it", so that is automatically cool.
Rather than read the documentation and be confused, let me write out first what I think it is...
Well, it's supposed to make dynamic websites, which essentially are web-based applications. That means it should help me do the following:
That is not a very helpful description. So let me try again: when I go to a certain URL:
That's still not very helpful. At this point, I want to see what the CodeIgniter main system components are. The Library Functions Reference Sheet lists each library, in typical alphabetical order. I am going to reorder them by concept.
HTML OUTPUT
BROWSER <-> SERVER
FANCY SESSION MANAGEMENT
APP FRAMEWORK
TESTING
DATABASE
INTERNET SERVICES
DATA TRANSFORMATION
WEB SERVICES
However, as I am striving to be a good content creator on the Internet, there's a certain amount of web development that I need. And also, I find myself offering to help build people's websites because this is a necessary component of The Mission of connecting people with motivating ideas.
So, say you need to develop a website...how can you do it with the least amount of pain and suffering, with the most features, an incremental path toward improvement, and retention of control over its visual appearance?
A TALL ORDER.
I'm familiar with three ways of developing websites: custom static HTML, modified WordPress Themes, and modified Expression Engine Themes. WordPress and Expression Engine are content management systems (CMS) that use databases (MySQL) and server-side scripting languages (in this case PHP). The advantages of a CMS is that they incorporate a lot of useful functionality that people tend to expect in a full-blown website.
Well, for now I'm going to go with ModX. Here are my ModX Integration Notes. And here are my CodeIgniter Integration Notes.
]]>Rough Notes follow:
256MB machine.
Two network adapters. Set the first one to SHARED, which allows the VM to bridge through the host PC's network connection (albeit mapped to the 192.168.136.* range). However, this makes the machine unreachable. So I make sure the second adapter is set to my wireless interface (this is being installed on a laptop), which runs primarily over wireless network. Localhost is also configured.
The first network adapter uses DHCP. The second uses an assigned IP for my local network at home, so other machines on my network can see it. This includes the laptop itself, as the VM is not technically "localhost" as far as Windows 7 is concerned.
(Note: Because I guffed up the initial settings before installing CENTOS, I had to re-edit the system configuration, by running system-config-network from the command line.)
Insert the DVD, and then boot the virtual machine. It automatically sees the DVD and installs normally. Since I have only 256M allocated to this VM, I am running it in server mode with no GUI. 256MB is about the same size as the minimum Media Temple virtual server, and it's capable of handling thousands of hits per hour...if you've tuned it right.
Menus menus menus. If you've set up the VM right, you won't have to go back and redit the file.
After installing, I did have to edit /boot/grub/menu.lst and add the line clock=pit. See this knowledge base article on Microsoft regarding this issue. You'll see the error "TSC appears to be running slowly. Marking as unstable." if you don't.
I need to assign a local HOSTS entry. This knowledebase article shows how to edit hosts in Windows 7 but my system doesn't appear to have it. It's supposed to live in %systemroot%\system32\drivers\etc\, but I don't see it. I suppose I could just create a new hosts file, but I'd like to know why it's missing. I ran the Microsoft Reset Hosts File FixIt App, and tried again...DOH, NotePad was defaulting to showing just .TXT files, which of course the HOSTS file doesn't have. Duh duh duh.
Well, apparently this still doesn't work, because right now I'm at Starbucks and the local network setup is different. Re-reading the networking options for Virtual PC, I see that I can install something called the Microsoft Loopback Adapter, and make all the VMs use this instead, as described here for Windows XP.
Starting up the VM again to see what happens. Do I need to re-run the system networking config?
Note I installed the Microsoft Loopback Adapter: http://blogs.msdn.com/virtual_pc_guy/archive/2005/10/04/477195.aspx
Checking Windows 7 Network and Sharing Center: Unidentified Network is set to the "Microsoft Loopback Connection". But I'm not sure if the host OS knows how to see thinks on it. Clicking on it and seeing properties... .. it's got TCP/IPv4
I probably need to redetect the CENTOS network adapter to configure it. How do I do that?
system-config-network at the command line!
I set manual DNS to 10.20.10.100 / 255.255.255.0
/etc/init.d/network restart
In Windows 7, I set "Microsoft Loopback" adapter properties to 10.20.10.1 / 255.255.255.0 both in "configure" and "ipv4". Make sure that the Virtual PC Network Filter is still checked.
It works! I can SSH in and ping from the Windows command line to 10.20.10.100, no problem. However, I can't hit the web server. The web logs in /var/httpd/logs show no activity either. However, I can do a wget of localhost, and this works.
Let's see if APACHE is running. Where is it on CentOS? According to /etc/init.d/httpd,
/etc/httpd/conf/httpd.conf
/etc/sysocnfig/httpd
Where is DocumentRoot according to httpd.conf file?
DocumentRoot "/var/www/html"
Apparently, the CentOS machine isn't responding to requests but it's detected. I wasted some time looking at the old tcpd setup (hosts.allow, hosts.deny) and xinet.d, but these weren't the culprit. I also made sure the services were running with ps and these commands:
.. service start httpd .. chkconfig httpd on
Snooping on the internet more, found this reference to iptables, which is the redhat firewall: http://www.xenocafe.com/tutorials/linux/redhat/iptables/iptables_linux_redhat-part1.php
in /etc/sysconfig there's a ton of stuff, including an iptables entry. The easy way to do this is to use: system-config-securitylevel and enable web... does it work? IT DOES!!!
Incidentally, to fix the garbled character issue, go to Putty and set the Terminal Translation to UTF-8. You can figure out what's going on by doing echo $LANG and echo $TERM on the Centos side to see what's up.
Now, there's the tricky part of actually being able to install packages on the VPC, which means it needs internet access. My Loopback Adapter.
To get rid of undefined network, set the loopback adapter gateay to the the host VPC http://blogs.microsoft.co.il/blogs/baruchf/archive/2009/07/09/windows-7-amp-network-loopback-adapter-settings.aspx
I could set up internet sharing with the Loopback Adapter, or bridge them. With Internet Connection Sharing (designed for sharing computer internet access with other people), I have to have the loopback adapter using DHCP and being on the same ip network as the internet connection. No thanks.
Bridging looks promising. Pull up Network Connections, select both connections (choosing Microsoft Loopback and Wireless Network Connection), then right-click and choose BRIDGE CONNECTIONS. Dialog pops up, and then I see a "connection status" thingy. However, this creates a NEW adapter, I think, that messes up authentication with ATT at SBUX. In fact, it all stopped working until I removed the bridge adapter.
The local network setup is 10.20.10.1 for the loopback adapter. The server is set up as 10.20.10.100. The Loopback Adapter has to have the VirtualPC filter enabled.
I want to set the HOSTS file on Windows 7 to redirect a hostname (twentycentos.local) to 10.20.10.100.
Open Notepad.EXE with adminstrator prvilleges. %systemroot%\system32\drivers\etc\hosts
We can use this to create various VHOSTS for the local setup now as well. The contents of /etc/httpd/conf.d are automatically included in /etc/httpd/conf, so I created a vhosts.conf file, which now points a <VirtualHost> declaration that points to /var/www/vhosts/twentycentos.local/httpdocs
Before I had a single network adapter defined in VPC adapter 1, set to the Microsoft Loopback. I actually need to allow CentOS network access, so I am going to set adapter 1 to Shared (NAT), and then set the Loopback to Adapter 2. So I set that in VPC. Now I have to reconfigure the CentOS setup. system-config-network
eth0 is set tp 10.20.10.100, but it fails eth1 is doing dynamic, but it is also failing
I believe the issue is that eth0 is now associated with different hardware, so I change it to be DHCP (for the shared NAT on adapter 1), and then changed eth1 to use static IP.
Rebooting...did it work? This time the boot was clean! Now test if we can actually still reach 10.20.10.100 from the host OS...NOPE.
We can ping the 10.20.10.x network. We can't hit anything outside, though. Let's check iptables.
system-config-securitylevel and set eth1 to be trusted (it's the local 10.20.10.x network). eth0 is the internet at large, so we don't allow incoming.