QB Express Celebrates One Year: Issue #12 Released

[Pete]

QB Express Issue #12 has been released, which marks the magazine's one year anniversary!

In this special issue, we look back over the past year of QB Express and give special recognition to QB Express's contributors. Adigun A. Polack brings us two retrospective articles on QB Express's first twelve issues, and I also share my thoughts on QB Express's first year.

Other articles include reviews of The Griffon Legend, Pixel Snake Gem Hunt and Trek, "The Evolution of GUIs" by MystikShadows, QB GUI news by Jacob Palm, two articles about the QBasic.com forum community and an interview with Nekrophidius. Tutorials include Part 6 of Na_th_an's I.F. series, Music Composition Pt. 3 by Matt2Jones, dumbledore's second FB WX-C tutorial, "Useful QB Algorithms" by Moneo, a tutorial on Database Design by MystikShadows, and "Coding a Parallax Scrolling Platformer Chapter #2" by Na_th_an. This is the largest issue of QB Express ever, weighing in at nearly 150 pages!

Check it out: QB Express Issue #12

[Rattrapmax6]

Great job again, Pete! I just skimmed thru, but I will be back for some more..  :wink:

[Zero_Divide]

Sorry maybe it is only my problem. but i've got some large gray bars on the page right upon the text so i can't read most of information.
I use  Firefox
P.S.  after saving  page on my HDD everything went good (but without images also) so i think there is a problem with your css table

[Z!re]

The grey boxes are a known problem.. they haunt QBE

[Antoni Gual]

I almost never have grey boxes (I use a56K modem) and they  disappear when I hit reload. It's not a problem with QBE's css, as they can appear or not depending on no one knows what.

Is a thing you have to live with.. Firefox gives grey boxes, and IE6  freezes...

[Deleter]

I use firefox...and I just have to refresh/reload the page a couple of times and it works. And one time, I pressed the middle mouse button to scroll, and the boxes all disappeared and the code appeared....

[Pete]

A middle mouse button click works almost 100% of the time for me.  Just scroll-wheel-click in the margin on either side of the gray box and it almost always disappears.

Anyway, Antoni's right about it not being a CSS error.  The gray boxes appear at random.  Sometimes they appear, sometimes they don't.  I've been told the problem is a documented bug in the Gecko rendering engine of FireFox.  

Of course, if someone figures out an alternate method of making pre-formatted code boxes that don't screw up the layout, we'll all be eternally grateful.  A lot of people have tried, but nobody's come up with a better solution yet.

[Adigun A. Polack]

To Pete and all contibutors of QB Express:

Up front, I want to *truly* congratulate all of you for making the first 12 issues of QB Express the absolute best there ever is in FreeBASIC/QuickBASIC magazine publication history, and for that, my hats are totally off to all of you!!!  d==b !

One concern though, Pete: in the QB/FB Site of the Year announcement, there was a problem in the way that I wrote it when it was published for this 12th issue of your mag.  It is not your fault, however.  Rather, the little clickable text problem was in the way that I tried setting up the linked text and bolding it simultaneously!  Silly me there ( :oops: ! ).  Other than that though, man, a lot of the articles and text styles within them ran perfectly!!  :cool:

All in all, congrats on the first  phenomenally successful year of QB Express, and be seeing you all real soon!!!  :king:



MY BEST AND WONDERFUL THREE CHEERS TONIGHT,


Adigun Azikiwe Polack
One of the Founders of “Aura Flow” ::: Continuing Developer of “Frantic Journey”
Current Developer of “Star Angelic Slugger” ::: Webmaster of the “AAP Official Projects Squad”
Original Creator of the “The New FreeBASIC 8-Bit Palette Machine”



P.S.  I *sincerely* hope all of you have enjoyed such wonderful retrospectives that I have just presented about this mag as you were reading this very issue, too.  

[rpgfan3233]

Opening up the sidebar works for me, whether it is as small or large as it can get. The ColorZilla Firefox extension doesn't pick up on the grey color, so this further proves that it isn't the CSS (for those who were still in doubt).

Edit: I should've checked out the entire page. . . I'm not sure why this happens, but I'll experiment with it. . .

Edit (deja-vu?): It's the #bigcode. . . The "overflow: auto" is causing the problem. I don't know why it's even in there. In IE6 (WinME), no overflow is being rendered because there is no height set, thus there is no need for it.

[Agamemnus]

Woot, I got mentioned in it, although I have completely forgotten talking to Nek about it. (the second mention of me, that is. This must have been way more than 2 years ago in an "offhand" statement.. imagine what politicians must deal with)

[na_th_an]

There's no indentation in IE.

I would do this, which could work in all browsers: Create a style for div which uses a monospaced font, and the overflow = auto and stuff, and then write a little parser in fB which turns spaces into &nbsp;'s and that adds a <br> at the end of each line. That way you won't need <pre> and it will get rendered correctly in both IE and FF (gray boxes aside, which are after all a bug which will be fixed anytime soon).

The code is still usable as copying from the browser then pasting to notepad or whatever gives spaces and line feeds correctly.

I'm checking it out with FF right now from a Linux box and the code boxes look ugly 'cause it's using 8 spaces per tab and I used 4, for example, thus the indentation gets garbled. A simple program which substitutes spaces by &nbsp;'s and tabs by &nbsp;&nbsp;&nbsp;&nbsp; would work nice, I think. Most people use 3 or 4 spaces for indenting. Also, using this smaller tab jumps would solve the issue of hyper-horizontal code snippets

This seems to work. The CSS bit is something in the lines of:

Code:

#codebox {
overflow: auto;
font-family: monospace, courier;
font-size: 12px;
background-color: #ccccff;
color: black;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
width: 600px;
}

And the <div> containing the code snippet looks something like this:

Code:

<div id='codebox'>For&nbsp;i&nbsp;=&nbsp;0&nbsp;To&nbsp;255<br>
&nbsp;&nbsp;&nbsp;&nbsp;Get&nbsp;#1,&nbsp;,&nbsp;myDatum<br>
&nbsp;&nbsp;&nbsp;&nbsp;myDatum&nbsp;=&nbsp;myDatum&nbsp;*&nbsp;2<br>
&nbsp;&nbsp;&nbsp;&nbsp;For&nbsp;j&nbsp;=&nbsp;0&nbsp;To&nbsp;127<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Print&nbsp;averageData&nbsp;(myDatum,&nbsp;j)<br>
Next&nbsp;j&nbsp;</div>

It's ugly but it works. And the fB program to "translate" spaces to &nbsp;'s, tabs to 4*&nbsp;'s and linefeeds as <br>'s is quite easy to code

[Pete]

Adigun: I fixed the formatting problem.  Thanks for letting me know!


rpgfan: The overflow: auto is so that code boxes can scroll to the right if the width of the code exceeds the box.  This is necessary because otherwise the layout would get messed up.


Na_th_an: I appreciate your suggestion, man.  You're right, it would fix the problem.  However, I'm not sure I want to implement it because of how much manual labor it would entail... copying and pasting dozens of code blocks every issue.  I think there's got to be an easier way.

I actually tried using this solution in the past, before I started using the overflow: auto method.  (I quit doing it because it took way too long.)

Look at this code box from some of the earlier issues... DarkDread's tutorial from Issue #3 is a good example:

Code:

<blockquote class="code"><font face="Courier" size="-1">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF PlayerDir$ = "E" THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IF Map%(PlayerX% + 3, PlayerY% - 1) > 9 AND Map%(PlayerX% + 2, PlayerY% - 1) < 10 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "T3.BSG", Cell3LeftX, CellY, 0<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF Map%(PlayerX% + 2, PlayerY% - 1) > 9 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "LW3.BSG", Cell3LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;END IF<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IF Map%(PlayerX% + 2, PlayerY% - 1) > 9 AND Map%(PlayerX% + 1, PlayerY% - 1) < 10 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "T2.BSG", Cell2LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF Map%(PlayerX% + 1, PlayerY% - 1) > 9 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "LW2.BSG", Cell2LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;END IF<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IF Map%(PlayerX% + 1, PlayerY% - 1) > 9 AND Map%(PlayerX%, PlayerY% - 1) < 10 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "T1.BSG", Cell1LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF Map%(PlayerX%, PlayerY% - 1) > 9 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "LW1.BSG", Cell1LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;END IF<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IF Map%(PlayerX% + 3, PlayerY% + 1) > 9 AND Map%(PlayerX% + 2, PlayerY% + 1) < 10 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "T3.BSG", Cell3RightX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF Map%(PlayerX% + 2, PlayerY% + 1) > 9 THEN<br>


...and so on.

I'm not trying to blow off your solution, I just can't justify all the time it would take.  (Call me lazy. )

My theory at the moment is that FireFox has some kind of conflict with having a <div> tag (with overflow: auto) within a <pre> tag... but when I reverse the order of these tags, vertical scroll bars begin to appear (and we don't want those, only horizontal ones).

There's got to be some simple CSS fix that will alleviate all of our problems, but I haven't found it yet.

[DrV]

I've noticed that www.ubuntuguide.org has the same problems (gray boxes)... we should get together a group of angry people with pitchforks and march on the Firefox headquarters.    I think we have enough reproducible examples to show that there is a bug in the rendering engine.

[dumbledore]

i noticed another bug too  :evil:
you never closed the <a> at <a name="fbprinting">, meaning that for the first part of my article, the text background changes color when you hover your cursor over it  

[na_th_an]

To me the #1 problem is that code boxes don't have indentation in IE. Problem #2 that in FF the tab size is too big (8 chars).

The gray boxes isn't your fault, so I'd rather wait unti the bug is fixed. After all, you can always press the middle button.