Sunday, April 24, 2011

From tables to an better understanding of CSS - The 'Minima II Blogger Baesball Scorecard'

Simultaneously posted at Michael Holloway's FilterBlogs - a culmination of three articles at The Blogger Baseball Scorecard

It's been a good week.

Monday, April 18, 2011

The 'Minima' Blogger Baseball Scorecard

Introducing an important milestone in the development of this html baseball scorecard

I began this html scorecard project to score baseball games in a blog about a year ago. I started with very little experience in coding - just a basic understanding of blog writing production coding; like how to write code to make a link, how to code for italics, bold, make a headline sized font - basically stuff I learned producing the style I wanted and fixing problems while blogging over seven years.

Last spring I hacked a table out of an ESPN page that had 10 columns; I figured I could create a 9 inning wide by nine batter deep table with it - and score a baseball game using notations I would invent on the keyboard. (See Michael Holloway's Baseball Blogs - Thursday, May 6, 2010: "My HTML Baseball Score Card Hack".)

It worked fine, but it was pretty sprase looking - and the more data I added to each at-bat 'box' the more distorted the scorecard graph became ... so sometimes one couldn't quite follow what inning or what batter you were looking at. In the first go around I didn't know what 'cascading style sheets' were (they were those scary looking squiggly lines at the top that I never touched for fear of blowing up my computer), and I quickly threw out the CSS notation as they didn't do anything (I hadn't imported the style sheet). So I began by making boxes with html style tags - using width and height in almost every line of code. (Interestingly my development path followed the same path - ten years later - that led programmers to develop CSS.)

My learning curve in table making was all about stabilizing the scorecard graph while at the same time inventing a scoring notation that one could create with a keyboard, and creating a card that had enough room to score 'everything'.

The result is the table below which is made entirely of CSS boxes - 80% of them hidden from view now (thus the "Minima"). Those boxes are the 'skeleton' that keeps the thing stable. Below in the first player row of at-bat boxes, I've input some scoring notations that test every parameter of the scorecard and show some extreme scoring situations that test the size of the text areas - thanks to, for example, the Blue Jays vs. Mariners - April 11th, bottom of the 8th inning - 3 bases loaded walks. (See the 8th inning - April 11)

The places where text is input give you a clue to where the invisible or 'transparent' boxes are - the four quadrants around the diamond shape are the four - of Twenty boxes that make up One at-bat box - that can receive text; the rest hold the diamond shape in place, 'pressing' against the table that holds them, all the tables of all the rows constructed exactly the same so that when a reader zooms in and out, or resets their screen resolution - nothing moves relative to the rest. So anyone can learn to read it with out a jumble of distorting x, y axis making it difficult.

The next step in this project is to set up a web address, turn a computer into a server and rebuild the scorecard with position attributes, and use server-side includes (SSI) to lay in the tables (there are 333 of them in all - but only 13 different tables in all.)

Soon I'll need some programming help (and some financial backing - hint, hint), to produce a web site where people an come and score baseball games - a whole social networking thing with-in a baseball scorekeepers meme - anally retentive people like myself scorekeeping, saving scorecards to their personal accounts, printing copies, sharing them electronically, talking about scoring techniques in forums, developing the craft and the scorecard in wikis... .

Later still, and on the 'drawing board' (in my head) is an idea for a program that can 'lay in' data into these scorecards in real time, taking advantage of the work done at Retrosheet, to produce scorecards that update as the game progresses. Conversely a similar 'scraper' could extract data from html scorecards - written according to Project Scoresheet notations guidelines - to build an digital archive of baseball from across the culture - woman's leagues, children's leagues and even co-ed softball bar leagues.

If information is power then this much baseball information would be... well, confusing - and that ain't all bad.

Much thanks to:

* Kathryn Barrett, Sr. Publicist at O'Reilly Media, Inc who prized me Head First HTML, just for responding to a questionaire after an O'Reilly Web Cast.
* Also kudos to W3C school's CSS Tutorial pages and especially their neat-o "Try It Yourself" widget which I will continue to use extensively as I move forward.
* And thanks to Robert Brodrecht of "Robertdot" for being so clear and concise about "Triangles in CSS".
* And last but not least, my friend Chris F.A. Johnson who's timely tips and regular cues in direction have sped my learning - and who's vast knowledge of coding has helped make me aware of some of the best practices in this sub-culture of coding crafts-people.

Please note: I am self taught and don't follow the paths of teachers - rather the path of necessity (the mother of). Some may find my seemingly gargantuan gaps in knowledge unfathomable - and my blithe ignorance of well known CSS solutions worrisome ... so for those who's materials I have used as reference or who's advice I have sought, it should be noted that they are not to blame for the way I learn - I am. :)


Monday, April 18, 2011 - The 'Minima' Blogger Baseball Scorecard

Wednesday, April 20, 2011

CSS Position at-bat Box - another milestone

Yesterday's milestone, the Minima Blogger Baseball Scorecard, sucks compared with today's milestone.

Below is a new AB box that is made with CSS position elements; the diamonds are where they are because of top and left absolute position elements with-in a relative parent element - rather than a series of boxes that are packed together so none of them move - as in the 'Minima' scorecard I finished yesterday. Yesterday I scored the New York Yankees at Toronto Blue Jays game with the Minima scorecard and I had a great deal of difficulty keeping up, every time I changed the position of the cursor in the graph, the blogger-create-interface would pause for about 2 or 3 seconds as the spider finished crawling the 604 KB file. I guess that might have something to do with my processor speed.

This is how CSS really shines - the code for this is only 64 four lines long as opposed to the Minima scorecard's AB box which took 130 lines to create - that's 66 lines saved X 162 AB boxes in a two team scorecard = 10,692 lines of code!



#9 1,2
#9 2,3

That's good because before I erased all the spacing tabs that make code easier to read, the Minima was at 1.15 MB and Blogger's per-page limit is 1MB - trimming all the indent tabs saved about 300,000 bytes! Like in the Shampoo commercial - wash rinse, repeat - coding is a lot of cut and paste and repeat, and repeat and repeat. I was astonished the other day when I looked at the size of the Minima scorecard; a million bytes?!? How did I create a million keystrokes?

Saturday, April 23, 2011

Minima II Blogger Baseball Scorecard - styling with position

In case you haven't been here before, or haven't been back in a while - the Blogger Baseball Scorecard Project is a ongoing development of an interactive baseball scoring form that you can use in a Blogger blog to score baseball games.

The 'Minima II' is the latest model in the project and I'm very excited about it! Today, April 23, 2011 at 1:00 PM EST I'm going to score my first game with it at this address.

In testing the 'Minima II' I am shocked at how fast and responsive it is - there's no delay from the moment one clicks in a particular text area to the time the blinking prompt is ready for keystrokes - this is surprising to me because although the previous incarnation in this project, the 'Minima I' has twice as many bytes, it was infinitely slower (a function not of size, but architecture).

The difference between the two scorecards in coding is qualitatively different. The first, the 'Minima I' represents the old way that websites were contructed in the 1980's and early 90's - the New Minima II is constructed with Cascading Style Sheet coding the way modern web pages are made today - the two scorecards represent two points on a learning curve which is me teaching myself to write code. Oddly, my epiphany from one style of coding to the other happened with out any thinking - as soon as the older card was done I started writing Minima II - and had it ready for scoring in 2 days.

Yesterday I was going to score Game 1 of the Tampa/Jays series (that's Game 2 that I'm scoring today) but blogger kept discarding the bottom pitching table - so last night I added an relative position outer wrapper CSS element and added absolute position wraps around the five tables, and gave them all top and left positions - now Blogger reads the whole scorecard correctly (and dosn't mistake repeating data for an error).

So below is a first attempt at adding some style with position - it looks at little less like a brick wall now I think. :)

Next, maybe some images here and there.


Saturday, April 23, 2011 - Minima II Blogger Baseball Scorecard - styling with position

(All Images 'Rebigulate' on click)


1 comment:

  1. Finally a break through in creating some flexibility in the amount of text you can add in the AB boxes - towards a Notepad capability that is essential in baseball scorekeeping.

    I finally found some 'real' coding that changes the look of scrollbars. I can't believe the number of pages on the web that purport to present coding for scrollbar style. CSS code like "scrollbar-width: 10px;" - which is not supported by any browsers and hasn't even been discussed at W3C, the global web standards body.

    The solution I found doesn't actually change the style of the scroll tab - it just hides it. If you position your cursor over the South East, or first base quarter (bottom right) of the AB box below, and then scroll with your mouse (or click on the text and press the down arrow in the number keypad on the far right of your keyboard) the text there will scroll down and show all the text that is hidden below the border of the AB box.

    The coding for these scrolling-text-areas-without-a-scroll-tab is accomplished by wrapping a 'div' window around another 'div' box that has a "overflow: scroll;" attribute on it. The top 'window' hides the scrollbars of the box behind. The rear box is coded 18 pixels wider than the box in front; you see the text in the rear box, though a 'keyhole' that is the narrower, front box.

    Today [14Aug: updated coding rendered below] I perfected the technique for this application, and I am currently building the next incarnation of the Minima II series of scorecards. The newest version will have scrolling on the 'x' axis as well as the 'y' axis (as in the example) so the user can do as they like. The new scorecard will be 25% smaller as well - making it not only easier create a concise record of a game, but easier to read as well.
    make barcode in