Web Analytics Made Easy -
StatCounter Skyhook Utility requires reviews - CodingForum

Announcement

Collapse
No announcement yet.

Skyhook Utility requires reviews

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Skyhook Utility requires reviews

    I have just created a an online utility for my own benefit because Google's Keep and a couple of other utilities did not satisfy my requirements.

    The utility created with PHP, MySql and AJAX to store text information and for rapid retrieval. The search techniques are already used to retrieve title, authors, price, etc on a couple of Thai book stores that have about 20,000 books.

    There is a test account that allows testing and necessary to login with a username of test and a password of test before records can be added, deleted and searched.

    The utility is purely for my own personal use but you are able to register a new user and to add your own data. Please note that passwords are encrypted but all data can be viewed by yours truly. I have no intention to use other people's data just remember not to store any sensitive information.

    I would be grateful for all feedback, more friendly user experience and especially any aesthetic improvements.

    https://this-is-a-test-to-see-if-it-works.tk/pw/

    enjoy

  • #2
    Layout is broken almost immediately as the menu text is half chopped off by the bottom of the red container. This is likely from either screwing around with PX, or mixing and matching PX with a dynamic value like EM or REM.

    The "user" text in the top right looks like a rendering error not intentional design, being flush against the edges like that. Both the menu and that text are painfully and agonizingly undersized, again likely a result of using the derpy PX measurement that tells users with accessibility needs to sod off.

    Your -- what should be an H2 -- background is pushing over the rounded corners... again, looks like a rendering error, and the lack of padding on said heading compromises legibility. The oddball padding on the login/register buttons look like mistakes too. ... and indeed the rest of the text also reeks of absurdly undersized PX metric trash. Popping the bonnet the markup is non-semantic gibberish.

    With a lack of media targets, phrase level anchors lacking any hooks to tell UA's what things are masquerading as a menu, non-breaking spaces for Christmas only knows what, abuse of a definition list for things that are NOT terms and definitions, paragraphs and non-breaking spaces again for no fathomable reason, and of course gibberish poiintlessly cryptic nonsensical presentational classes. You've also got text INSIDE one of your font-awesome , which is NOT how that works.

    That's not how any of this works. It's a wreck. Don't take this the wrong way, but seriously "learn HTML". There is likely little reason for that to be much more than:

    -- edit -- since it's now impossible to even post HTML code, here's a link:

    https://cutcodedown.com/for_others/j..._home.html.txt

    The CSS isn't much better, particularly the fixed height on the header, use of position:fixed pissing on accessibility to do flex's job, etc, etc.
    Last edited by deathshadow; Mar 29, 2020, 06:40 AM. Reason: bbCode CODE on these forums is broken now.
    I'll kill you and your dreams tonight, begin new life.
    Bleed your death upon me, let your bloodline feed my youth.
    https://cutcodedown.com

    Comment


    • #3
      Gah, why won't this blasted site let me post formatted code anymore? Even worse now than it was before, it's actually running the code as if it were markup!
      I'll kill you and your dreams tonight, begin new life.
      Bleed your death upon me, let your bloodline feed my youth.
      https://cutcodedown.com

      Comment


      • #4
        Since bbCode CODE tags seem to be broken on these forums now thanks to the broken scripted editor garbage (that we can no longer use properly scripting disabled) I edited my initial post to have a link to how I'd write that. Since I was in there, I wrote CSS for it too, and dropped a copy in as .txt for those gun-shy of "view source"

        https://cutcodedown.com/for_others/john_betong/skyhook/

        Figured whilst I'm at it I'd explain the big differences, we'll do the markup first. (laugh is these explanations will likely take longer than the markup and CSS did)

        First thing you'll find is just a good practice, you don't HAVE to do this, but I like to put the DOCTYPE through charset META all on one line as a reminder these elements MUST appear in that order and that nothing should go between them. I do the same for closing HEAD and opening BODY, and closing BODY + HTML. It's just a gentle reminder "Don't paste here".

        I do however put full formatting on my other META and LINK for clarity. Note that I'm using MEDIA targets. Yes, HTML 5 validation throws a conniption fit about "projection" and "TV", this is an example of why HTML 5 validation and much of the specification is BS since 1) media targete should be NONE of the HTML spec's business, and 2) there are plenty of devices that still need those other two properties in circulation. Kiosks and some consoles (DS, Wii, WiiU) will apply their own rules over our layout if we don't say those latter two devices!

        Now, I'm well known for NOT liking the HTML 5 structural tags, and I don't use them on my own sites... but given they're hot, trendy, and what most people now seem to want, I went ahead and used them. Unlike most people, I used them how they're supposed to be used though I did omit NAV since we've got a perfectly good MAIN.

        The header I gave an ID of #top just so we can "back to top" -- with the full rendered version shrink the window and scroll down to see what I did with that.

        I gave the smaller subsections their own classed DIV. You had something hidden there which I just axed. NOTE, no text in the FA italic tags.

        With the menu as they were mostly circles I ditched the empty I and used generated content instead, only using a class on one of them to swap the character. If in production they are all different I would weigh the bandwidth cost of putting the italic FA tags back in the markup against ease of modification if the menu items change a lot, and use whichever technique is more appropriate.

        Side note, if the content of a title tag is identical to the TITLE attribute, don't use the TITLE attribute as it's then a pointless redundancy.

        Notice how the H1 is FIRST in the header? Yeah, that. We can use flex to re-arrange them on modern browsers. Oh noes, IE10/earlier gets them in the wrong order, nots thatz. Your H1 should WHENEVER possible be your FIRST content-bearing element in the page, as it declares what everything else on the page is a subsection of.

        MAIN declares that this is where the actual content of the page starts, which can then be borken into SECTION

        What you had was NOT a "term" (dt) with multiple definitions (dd) so a definition list (dl) was utterly and completely the WRONG markup. You have a heading and the first heading after a h1 should be a h2, then a sub-heading with that all being paragraphs.

        The two action links are like the main menu a list of choices, so that's UL/LI's job. Simple class on the parent means we don't need to piss all over the markup throwing classes at everything.

        With the footer I put an HR in for non screen-media UA's that don't know what a FOOTER tag is, (which is to basically say all of them), killed off the validation links since that's stuff normal visitors won't care about and reeks of the old "Best viewed in Netscape" or "Best viewed in Internet Explorer" nonsense of the late '90's. Aka the thing I parody on my site with "best viewed with eyeballs". (that some people are apparently too stupid to get the joke of)

        Last is the back to top anchor, which also gets a class to say what things are, not what they look like!

        Classes like "bgr" or "mg8" aren't just hard to work with due to being painfully and pointlessly cryptic, they also defeat the entire reason CSS is separate from HTML as you're basically putting presentation in the markup. As I've said many MANY the time, at that point you might as well go back to using HTML 3.2 with tables for layout and FONT tags pretending CSS doesn't even exist.

        Again why HTML/CSS frameworks like bootcrap, tailwind, or w3.css are ignorant incompetent ineptly built trash, CREATED by people who aren't qualfiied to write a single blasted line of HTML, much less tell others how to do so.

        The span is there as a hook for the text to "swing out", and whilst yes an anchor directly under BODY used to be invalid, it was suddenly valid, then it wasn't, then it was again thanks to HTML 5's idiotic "living document" BS that removed versioning from the spec. Since it works, again screw "validation".

        End result is a cleaner smaller HTML with proper accessible semantics. That most of the presentation work ends up unloaded on the stylesheet instead of taking a dump on the markup with classes, it also means it better leverages caching models since if you have multiple pages sharing the same style, you pre-cached the appearance, just as revisits will similarly do better in caching.

        Even with the larger CSS that uses a reset, it's smaller if we omit that "Back to top" link I added.

        Gimme time to have my morning Wheaties, and I'll whip up a summary of the how/what/why of the CSS.

        Oh, and if I'm coming across as harsh with you, it's because you do have some good ideas, but you're killing yourself on implementation. You're making yourself work harder, making inaccessible broken pages, and all because you seem to want to refuse to use HTML and CSS even remotely close to properly. I honestly believe you can do better, you obviously have the syntax of HTML down, but your HTML grammar is some serious "me love you long time" territory.

        Though it's funny, all these times I'm saying to ignore the validation whilst talking about using HTML properly. Thanks W3C for being schizophrenic


        I'll kill you and your dreams tonight, begin new life.
        Bleed your death upon me, let your bloodline feed my youth.
        https://cutcodedown.com

        Comment


        • #5
          Ok, let's talk about the stylesheet. Follow the bouncing ball at:

          https://cutcodedown.com/for_others/j...ook/screen.css

          First up as always with my code is a reset. As I've said thousands of times across dozens of forums the past decade and a half, there are smaller resets like the so-called "universal" one of "* { margin:0; padding:0;}" but that can wreak havoc with form elements. There are larger resets liek Eric Meyer's "Reset Reloaded" but that bloated wreck is damned near a framework unto itself. The one I use is a nice safe happy middle-ground that at around a quatrter of a K isn't big enough for there to be any legitimate complaints. Again, we use resets to have a nice safe starting point across all browsers.

          I've switched recently to setting everything to the border-box model, as have most developers. Despite the years of people saying the IE box model was "broken" it really was superior to the specification. Now we can use it with impunity.

          Horizontal rules exist as a semantic break, and can be conveyed stylistically in many different ways. THEY DO NOT MEAN DRAW A LINE ACROSS THE SCREEN!!! We want them for non-screen media, but don't need them for our screen media layout, so hide them...

          Next is a media query for a bugfix for the old mobile devices that don't know what a viewport META is.

          Setting HTML and BODY to 100% lets us do a 100% min-height layout.

          From here out I'll document by selector.

          body, button, input, table, textarea, select -- the BODy tag is obvious, but the rest here do not default to "inherit" and it's just easier to set them all at once rather than screw with them later. I use taller line-heights than normal as it aids in legibility.

          body -- setting this to a flex container lets us make a 100% min-height layout with out the accessibility or unreliability headaches of position:fixed.

          body > header,
          body > footer
          -- we don't want these to expand to fill space, or to shrink, so we set their flex to that.

          main -- pad the main content, but also allow it to expand to fill available space. Boom, 100% min-height layout with no positioning trickery.

          #top -- I set this to flex so that we can change the sub-element order. The high z-indes is to depth sort #top over the "back to top" link, giving is a cute little "reveal" when you scroll down without the need for JavaScript.

          From there the padding and style aren't anything too fancy.

          #top a -- inline-block lets us pad top/bottom where/as needed, and we want all of them white.

          h1 -- setting order:2 makes it render as the second item inside the flex #top. Padding to push the menu away a bit, alignment, nothing too fancy.

          .userBar -- order:1 moves it to the top, pad the top to make it purty.

          @mainMenu,
          .userActions
          -- these share our want for no bullets and centering, so group their selectors.

          #mainMenu -- order:3, if we omit order at this point it renders BEFORE the ordered elements. (stupid, but that's how it works).

          #mainMenu li,
          .userActions li
          -- Again these both get set to inline to be on the same line, so just declare it together.

          #mainMenu a -- padding, round the corners for our hover. set up transitions.

          #mainMenu a:focus,
          #mainMenu a:hover
          -- don't forget on hover states to set focus as well, since that's what non-mouse navigation uses. I just made a brighter red as the white on grey you had was illegible. WCAG colour contrast minimums, learn it, use it.

          #mainMenu a:before -- adds the FA circles.

          #mainMenu .search a:before -- swap out for the different FA icon.

          #top .fileLink -- again we have to say order to put it last, the rest is pretty obvious.

          .section -- overflow:hidden chops off the inner H2 background so the grey doesn't bleed out of the corners like your layout did. Max-width prevents long lines from being a pain in the *** whilst still maintaining elastic layout, again nothing too fancy otherwise though I tossed a box-shadow on just to make it a hair nicer looking.

          .section h2 -- background, border, smaller font-size, again nothing to write home about.

          .section p I pad the sides but not the top, so we can dodge issues like "margin-collapse". Just margin after the H2 and it's good to go.

          .userActions -- just pad the bottom to make it pretty.

          .userActions a -- relative position + top:0 so we can slide it a hair on hover, inline-block so we can pad top and bottom, side margins to push them apart (that is NOT a non-breaking space's flipping job!), strip off the text decoration, round the corners, blah blah blah. Not the top and border transitions.

          .userActions a:focus,
          .userActions a:hover
          -- slide down the top, shrink the outer shadow, and we get a cute animation.

          body > footer -- I use this selector style to target the footer since SECTIONS can also heave HEADER and FOOTER of their own. Padding, alignment, background, border, you know what that stuff is.

          .backToTop -- fix it on the screen but z-index it so it is hidden behind #top. Setting perspective makes the 3d flip-in using transforms look better. (side note, remember with perspective smaller == bigger 3d effect)

          .backToTop i -- the FA icon, the top margin decrease adjusts for a bug in how FA icons align. Again, a transition to animate it.

          .backToTop:focus i,
          .backToTop:hover i
          -- make it bigger on hover.

          .backToTop span -- absolute position it to look good next to the icon and so that we can do a swing-out animation. Even though absolute positioned items are SUPPOSED to get block behaviors, in FF and Edge you cannot rotateY something that's display:inline regardless of the position value, so we have to set this to inline-block. (stupid, but workS). I set it to transparent and rotated out of view on it's right edge. Rest is just normal style.

          .backToTop span:after -- sneaky trick. I create a box with a visible border on two sides and transparent on the others, which I then rotate 45 degrees and slide into position with a negative margin. Boom, you get that little triangle poking out of the side of our container.

          .backToTop:focus span,
          .backToTop:hover span
          -- set it to opaque, rotate it into view.

          Awesome looking animation for little effort.

          Last but not least...

          @media (max-width:62em) -- I decrease the padding on MAIN for smaller displays.

          ... and again if we omit where I went nuts with the "back to top" link, we not only fix the layout and accessibility issues, it's smaller than the original with better use of caching models.

          Since as I keep saying, if you use classes that say what you want things to look like, you've utterly and completely failed to divine the intent of HTML and CSS.


          I'll kill you and your dreams tonight, begin new life.
          Bleed your death upon me, let your bloodline feed my youth.
          https://cutcodedown.com

          Comment


          • #6
            deathshadow
            Many thanks for the rewritten page and also the detailed explanations, very helpful.

            I have used all the CSS file and added quite a few of my CSS TLAs (three letter acronyms) so I could get the other functionality to work as desired. There is still quite a bit of tidying up to do but site now works and does what it says on the tin!

            I have copied and pasted one of your post to the test test account and the search works a treat. Editing and adding also work.

            Classes like "bgr" or "mg8" aren't just hard to work with due to being painfully and pointlessly cryptic, they also defeat the entire reason CSS is separate from HTML as you're basically putting presentation in the markup. As I've said many MANY the time, at that point you might as well go back to using HTML 3.2 with tables for layout and FONT tags pretending CSS doesn't even exist.
            There are quite a few reasons for using the TLAs as CSS class names, here are a couple which will help explain the reasoning or method in my madness for the usage:

            1. bgr is an abbreviation for "background-color: red;" this saves repeating "background-color: red;" umpteen times in the CSS file thus dramatically reducing the file size because it is only declared once.

            2. In the html script it is easy to set XXXbgr and to add bgy which is the yellow background, etc. Similar to "fss" and "fsn" font size normal without having to flip backwards and forwards to the stylesheet or to add temporary styles.

            3. There are quite a few other TLAs float: left, right, text-align: right, left center, display: inline-block, .hhh {display: none;} which is far easier than hiding with remarks.

            Try a couple of TLAs on your own style sheets because they are addictive

            To easily see what parameters are repeated there are quite a few free text online word-count sites that are helpful in deciding which TLAs to up use.
            Last edited by JOhn_Betong; Mar 30, 2020, 07:12 AM.

            Comment


            • #7

              Originally posted by JOhn_Betong View Post
              Try a couple of TLAs on your own style sheets because they are addictive
              Come on John, there' s no need to "wave a red rag to a bull".

              I am sure you know that, he will tell you to " stick them up your arse",
              or with some similar terminology in US English.

              coothead

              ~ the original bald headed old fart ~

              Comment


              • #8
                Originally posted by JOhn_Betong View Post
                There are quite a few reasons for using the TLAs as CSS class names, here are a couple which will help explain the reasoning or method in my madness for the usage:
                Said reasons again defeating the entire reason HTML and CSS are separate, why attributes like bgcolor and tags like FONT were deprecated, etc, etc, etc.

                Originally posted by JOhn_Betong View Post
                1. bgr is an abbreviation for "background-color: red;" this saves repeating "background-color: red;" umpteen times in the CSS file thus dramatically reducing the file size because it is only declared once.
                Again, painfully and needlessly cryptic -- but worse you're putting presentation in the markup that only applies to ONE possible media target. Much more, what you've done instead of repeating yourself in the CSS is repeat yourself in the MARKUP where it's not CACHED! -- /FAIL/ at understanding why CSS exists and what it's even for!

                Originally posted by JOhn_Betong View Post
                2. In the html script it is easy to set XXXbgr and to add bgy which is the yellow background, etc. Similar to "fss" and "fsn" font size normal without having to flip backwards and forwards to the stylesheet or to add temporary styles.
                No styles should be "temporary", much less style has zero huffing business in the markup! Again you're thinking like you're still working with HTML 3.2 at which point you might as well go back to using tables for layout, FONT and CENTER tags, and attributes like ALIGN, BGCOLOR, BORDER, and LINK. You are merely replicating a functionality and mindset we've been told since the end of the browser wars to stop doing!

                Originally posted by JOhn_Betong View Post
                3. There are quite a few other TLAs float: left, right, text-align: right, left center, display: inline-block, .hhh {display: none;} which is far easier than hiding with remarks.
                "Hiding with remarks"?!? Again though, none of those things have ANY business being declared from the markup because presentation doesn't belong in the markup, particularly when things like floats and alignment might not only be different on different media targets like print or speech/aural, it might also be different in the same media target because of media queries. (aka responsive layout). What are you gonna do, have a class that says something is left aligned that is actually showing centered on mobile? That's gonna be easy to work with -- NOT!

                Originally posted by JOhn_Betong View Post
                Try a couple of TLAs on your own style sheets because they are addictive
                No, they really aren't if you understand separation of presentation from content, and the idea of saying what things ARE instead of what they look like. What you are doing has ZERO business in the HTML EVER. You've got pointlessly cryptic classes declaring what things look like and that's NOT how this stuff is supposed to be used.

                You're basically taking a leak on your markup from so on-high you'd think the almighty just got back from a kegger! This is the same reason I consider HTML/CSS frameworks to be monuments to the 3i of web development; ignorance, incompetence, and ineptitude.

                I don't care if it's an aggravatingly cryptic "bgr" or a full spelt out "BackgroundColorRed", it doesn't belong in the HTML.

                Much less if you REALLY don't want to repeat yourself in the CSS (aka where you SHOULD be repeating yourself so you don't repeat yourself in the markup) group your selectors.

                The whole POINT of CSS is to not repeat yourself in the markup, to leverage selectors so multiple elements receiving the same style only need be declared once in the stylesheet, and to allow HTML to say what things ARE so that you can have multiple different appearances off of one markup. You've pitched that all in the trash with this goofy cryptic nonsense that reeks of the bleeding edge of a 1990's browser-wars era mindset.

                Oh, and if you're having "trouble" flipping back and forth between HTML and CSS, don't use garbage tabbed editors. Open the files in separate windows so you can view them side by side. It's part of why larger 4k displays or going multi-display can provide heavy duty utlitly, as it gives you the real estate to divide the screen into thirds -- a testing browser, HTML, and CSS. Multi-display you can go thirds for HTML/CSS/JS and then multiple browsers in the other.
                Last edited by deathshadow; Mar 30, 2020, 01:40 PM.
                I'll kill you and your dreams tonight, begin new life.
                Bleed your death upon me, let your bloodline feed my youth.
                https://cutcodedown.com

                Comment


                • #9
                  deathshadow

                  Said reasons again defeating the entire reason HTML and CSS are separate, why attributes like bgcolor and tags like FONT were deprecated, etc, etc, etc.
                  I appreciate the effort involved in replying to my posts. Another reason for using TLAs is that virtually all my web pages are created using PHP which is never mentioned? The following link manages to render 243 different DIVs using just 16 CSS tags.

                  https://this-is-a-test-to-see-if-it-...m/deathshadow/

                  Source also shown online:
                  Code:
                  <?php declare(strict_types=1);
                  
                  $title1 = 'Demo for the benefit of DeathShadow ';
                  $title2 = 'Render 243 different DIVs with 16 lines of CSS';
                  $link = 'https://www.codingforum.net/forum/client-side-development/general-web-building/site-reviews/2424419-skyhook-utility-requires-reviews';
                  $title3 = "<a href='$link'> CodingForum </a>";
                  
                  $src = highlight_file( __file__, TRUE);
                  
                  ?><!DOCTYPE html><html lang="en">
                  <head>
                  <title> <?= $title1 .$title2 ?> </title>
                  <style>
                  .dib {display: inline-block; margin: 0.42em 0.42em 0;}
                  
                  .bd0 {border: dotted 0.21em #000;}
                  .bd1 {border: solid 0.21em #000;}
                  .bd2 {border: inset 0.21em #000;}
                  
                  .bg0 {background-color: #fdd;}
                  .bg1 {background-color: #ff9;}
                  .bg2 {background-color: #cfc;}
                  
                  .fg0 {color: #000;}
                  .fg1 {color: green;}
                  .fg2 {color: blue;}
                  
                  .fs0 {font-size: large;}
                  .fs1 {font-size: normal;}
                  .fs2 {font-size: small;}
                  
                  .wd0 {width: 19em}
                  .wd1 {width: 28em;}
                  .wd2 {width: 38em;}
                  </style>
                  </head>
                  <body>
                  <h1> <?= $title1 ?> <sup class="fs0 fg1"> Source below </sup> </h1>
                  <h2> <?= $title2 ?> </h2>
                  <h3> <?= $title3 ?> </h3>
                  
                  <?php
                  $cntr = 0;
                  for($i2 = 0; $i2<3; $i2++):
                  for($i3 = 0; $i3<3; $i3++):
                  for($i4 = 0; $i4<3; $i4++):
                  for($i5 = 0; $i5<3; $i5++):
                  for($i6 = 0; $i6<3; $i6++):
                  $cntr++;
                  echo "<div class='dib bg$i5 fg$i3 wd$i5 bd$i4 fs$i6'>"
                  .'$cntr: ' . $cntr .'<br>ITERATORS: '
                  .$i2 .' ==> '
                  .$i3 .' ==> '
                  .$i4 .' ==> '
                  .$i5 .' ==> '
                  .$i6
                  .'</div>'
                  ;
                  endfor;
                  echo '<hr>';
                  endfor;
                  endfor;
                  endfor;
                  endfor;
                  
                  echo "
                  <dl><dt> Source: </dt>
                  <dd> $src </dd>
                  </dl>
                  ";
                  ?>
                  
                  </body>
                  </html>
                  Last edited by JOhn_Betong; Jun 20, 2020, 01:17 AM.

                  Comment


                  • #10
                    If your PHP is vomiting up a style tag, or you have static STYLE in the markup, YOU'RE DOING IT ALL WRONG!PHP or no. If anything you're making your PHP work harder by vomiting up more code than you need. JUST like you're making your PHP work harder by doing string additions, dropping in and our of PHP willy-nilly, and using the confusing "endfor" nonsense. (that really needs to be ripped out of PHP entirely alongside "Shorttags")

                    It's almost comedy you using that strict_types nonsense and then going so bizzarro PHP 2/3 style on the logic.

                    Much less the gibberish use of H1, H2, and H3, gibberish use of the TITLE tag,.. not sure what makes source a term and definition...

                    Don't even get me started on how if that's actually how you have real data and real style being applied to ANYTHING, then it's utter and total trash. One of those pesky "card stacked" examples that is only making your code work harder, not smarter. These don't even look like structurally they should be kin to each-other, but again that's where "DIV when it should have semantics" is an equal measure of trash.

                    WHAT is the content? WHY is it receiving style? HOW is anyone but you supposed to even know what any of these painfully and agonizingly crytpic "TLA" are even for or mean?

                    Honestly if I had a project or data structure that warranted code like that, I'd take a shotgun to the whole thing and start over from scratch. If your PHP is outputting visual styling information and not an explanation of WHY that style is, the code is garbage.
                    Last edited by deathshadow; Jun 20, 2020, 04:42 PM.
                    I'll kill you and your dreams tonight, begin new life.
                    Bleed your death upon me, let your bloodline feed my youth.
                    https://cutcodedown.com

                    Comment


                    • #11
                      Just to revisit this now that I have a moment (whilst waiting to find out if I need a passport or not, long story)

                      If I had to deal with data that jacked up... Gah, I can't even huffing post it here without the damned formatting being stripped!

                      Fine, I'll just put it together proper on my site. Guess on a forum about coding we're just not supposed to post code anymore.

                      https://cutcodedown.com/for_others/j...nestedJunk.php

                      As always the directory is unlocked for easy access:

                      https://cutcodedown.com/for_others/j...ng/nestedJunk/

                      By simply nesting our DIV and leveraging the (otherwise pointless) SECTION tag, we can remove ALL those classes and instead let CSS do the heavy lifting. Without pissing all over the markup and by adding a logical structure that could be leveraged for other purposes and groupings as well...

                      Like how I ditched the semi-confusing (structurally/grammatically) use of HR in favor of styling the parent DIV.

                      BTW, there's no such thing as font-size:normal; I think you meant "medium". It only "worked" because of your pointless direct assignments. In an actual override scenario it would have failed. I also switched it to "double" instead of "inset", since inset, groove, edge, and so forth are indistinguishable from solid in Blink based browsers.

                      Don't make your server-side code work so hard, let CSS do the heavy lifting. You end up with less code and not violating separation of presentation from content...

                      Because again, if you're going to use classes that way you might as well go back to writing HTML 3.2 as if CSS doesn't exist. You're using the same mindset we were supposed to stop using 22 years ago. This isn't the 1990's and you're not writing code for IE 5 and Netscape 4.


                      Last edited by deathshadow; Jun 24, 2020, 12:48 PM.
                      I'll kill you and your dreams tonight, begin new life.
                      Bleed your death upon me, let your bloodline feed my youth.
                      https://cutcodedown.com

                      Comment


                      • #12
                        Your server and app is chock full of all kinds of vulnerabilities


                        This is fun.....

                        https://this-is-a-test-to-see-if-it-works.tk/pw/adduser

                        This is fun too..


                        Code:
                        <b>Notice</b>: Undefined index: password in <b>/var/www/this-is-a-test-to-see-if-it-works.tk/public_html/pw/class/Class-pw.php</b> on line <b>454</b><br />
                        <br />
                        <b>Notice</b>: Undefined index: password in <b>/var/www/this-is-a-test-to-see-if-it-works.tk/public_html/pw/pages/adduser.php</b> on line <b>18</b><br />
                        <br />
                        <b>Fatal error</b>: Uncaught TypeError: substr() expects parameter 1 to be string, null given in /var/www/this-is-a-test-to-see-if-it-works.tk/public_html/pw/pages/adduser.php:19
                        Stack trace:
                        #0 /var/www/this-is-a-test-to-see-if-it-works.tk/public_html/pw/pages/adduser.php(19): substr(NULL, 11, 15)
                        #1 /var/www/this-is-a-test-to-see-if-it-works.tk/public_html/pw/index.php(124): require('/var/www/this-i...')
                        #2 {main}
                        thrown in <b>/var/www/this-is-a-test-to-see-if-it-works.tk/public_html/pw/pages/adduser.php</b> on line <b>19</b><br />
                        I especially like the Remote OS Command Injection, Sql Injection and the Cross Site Scripting Vulnerabilities. Fun times.
                        Attached Files
                        Last edited by benanamen; Jun 24, 2020, 11:14 PM.
                        To save time, lets just assume I am almost never wrong.

                        The XY Problem
                        The XY problem is asking about your attempted solution (X) rather than your actual problem (Y). This leads to enormous amounts of wasted time and energy, both on the part of people asking for help, and on the part of those providing help.

                        Make A Donation https://www.paypal.me/KevinRubio

                        Comment


                        • #13
                          Originally posted by benanamen View Post
                          Your server and app is chock full of all kinds of vulnerabilities
                          This is fun.....
                          https://this-is-a-test-to-see-if-it-works.tk/pw/adduser

                          This is fun too..

                          Code:
                          REMOVED
                          Many thanks for spotting the errors it was due to the changing servers and blindly copying script for the benefit of a friend who found the errors helpful while testing.

                          Some bright spark took advantage of being able to ZAP every single test record which were added to show typical data and to show the search facility. The mind boggles - I would have thought whoever took delight in deleting all the records would have found more pleasure in adding some abusive test.


                          I especially like the Remote OS Command Injection, Sql Injection and the Cross Site Scripting Vulnerabilities. Fun times.
                          I would be grateful for information on how to prevent these vulnerabilities especially a quick fix because I am currently struggling trying to setup a shopping cart.
                          Last edited by JOhn_Betong; Jun 25, 2020, 11:09 AM.

                          Comment


                          • #14
                            I just cleaned the XSS injections and tested with this Free scanning tool and quite a few vulnerabilities were found.

                            https://pentest-tools.com/website-vu...bsite-scanner#

                            Foolishly I thought it was adequate to leave the cleaning of the user input up to PDO?

                            Anyway added htmlspecialchars(...) to the user input, scanned again and managed a good report.

                            Comment


                            • #15
                              Originally posted by JOhn_Betong View Post
                              Foolishly I thought it was adequate to leave the cleaning of the user input up to PDO?
                              Depends on how you're using it.

                              The basics of site security haven't REALLY changed since PHP 5.2 dropped.

                              1) Never perform ANY action that requires a user to be logged in via method="get". POST or GTFO.

                              2) Add a secondary random hash you track in the session that you also put in a hidden input. This prevents bots from blindly spamming your forms without requesting a new form first -- which is often enough for them to give up and walk away. (strange that) If you invalidate them after use you can also prevent form re-use.

                              3) regenerate your session ID on every page load.

                              4) Use a single index.php for ALL user interactions, so you only have one gate to guard. NONE of your sub php files should be allowed to output anything directly without a function or class call. That way should other security measures fail, they still don't do anything if a user is able to call them.

                              5) keep your database connection isolated to a single function or object scope. Do NOT allow just any old running code to have access to it, only passing it to where it is actually needed.

                              6) don't leave security information in memory, destroy it once you use it. See one of turdpress' biggest and easiest exploits; everything at every point of the code can get hold of the database, and they even go so far as to serp the host, dbname, username, and pass into DEFINE, the polar opposite of secure.

                              7) IF you're going to use PDO, USE IT! By "USE IT!" I mean use static table names so you aren't slopping variables into there, and if a query involves variables AT ALL, prepare/execute. DO NOT SLOP YOUR VARIABLES INTO THE QUERY STRING!!!. This isn't 2003.

                              8) Nothing performed client side can be trusted, ESPECIALLY JavaScript. Write everything you possibly can to work without scripting FIRST, then use scripting as an enhancement / supplement, NOT for your actual functionality.

                              Now, all that said, it might also help if you learned to write HTML... because this page ALONE:

                              https://this-is-a-test-to-see-if-it-works.tk/pw/login

                              Ain't it. No fieldset, placeholder for nothing, pointless DIV, main inside the form instead of wrapping it, input doing button's job, endless pointless cryptic classes for NOTHING... The form ALONE:

                              Code:
                              <div class="tac bg0"><p> <br><br><br> </p>
                              <form action="search" method="post">
                                <main><section class="dib">
                                  <h2> Login </h2>
                                  <div class="w88 mga XXXdib XXXtal">
                              
                                    <label class="fll" for="username">
                                      <i class="fll fas fa-user"> &nbsp; </i>
                                      <i class="fll"> User </i>
                                    </label>
                                    <input
                                      type  = "text"
                                      id    = "username"
                                      name  = "username"
                                      value = "test"
                                      required=""
                                      placeholder = "Username">
                                    <br><br>
                              
                                    <label class="fll" for="password">
                                      <i class="fas fa-lock">&nbsp;</i>
                                      Password
                                    </label>
                                    <input
                                      type  = "password"
                                      id    = "password"
                                      name  = "password"
                                      value = "test"
                                      placeholder = "Password"
                                      required=""
                                    >
                                    <br>
                                  </div>
                                  <br>
                              
                                  <p class="tac fsl">
                                    <input class="bdr bgn fgs" type="submit" name="login" value="Login">
                                  </p>  
                              
                                  <p class="hhh tac XXXbdr fsl XXXfgs">
                                            <!--
                                      <input class="bdr bgn fgs" type="submit" name="search" value="Search">
                                      &nbsp; &nbsp;
                                    -->
                              
                              
                                    <input  class="bdr bgn fgs" type="submit" value="Login">
                                  </p>  
                                </section></main>
                              </form>
                              </div>
                                  <p> <br> <br> <br> </p>
                              Is gibberish bloated trash. I mean hell, for the love of Christmas THOSE ARE NOT GRAMMATICAL PARAGRAPHS!!! No excuse for that to be much more than:

                              [code]
                              Code:
                              <main>
                              
                                  <form action="search" method="post" id="login">
                                      <h2>Login</h2>
                                      <fieldset>
                                          <label>
                                              <i class="fas fa-user"></i>
                                              User<br>
                                              <input
                                                  type="text"
                                                  name="username"
                                                  value="test"
                                                  required
                                              ><br>
                                          </label><label>
                                              <i class="fas fa-lock"></i>
                                              Password<br>
                                              <input
                                                  type="password"
                                                  name="password"
                                                  value="test"
                                                  required
                                              ><br>
                                          </label>
                                      </fieldset>
                                      <div class="submitsAndHiddens">
                                          <button>Login</button>
                                          <input
                                              type="hidden"
                                              name="loginHash"
                                              value="placeRandomHashHere"
                                          >
                                      </div>
                                  </form>
                              
                              </main>
                              WHY are you wrapping P around non-paragraph content? WHY are you slopping non-breaking spaces and text inside font-awesome italics? WHY are you using P and BR to do padding or margin's job? Why are you skipping FIELDSET? This isn't XML why are you slopping ="" onto REQUIRED where you basically are saying that it's NOT required? And again those derpy incompetent nonsensical "TLA" of yours just pissing all over the markup for NOTHING of value.

                              With your front end code looking like this, I shudder at the horrors your back-end has to be... given you can't even use the simplest of HTML tags correctly or maintain proper good practices like separation of presentation from content, you likely REALLY shouldn't be playing around with PHP or databases yet.
                              I'll kill you and your dreams tonight, begin new life.
                              Bleed your death upon me, let your bloodline feed my youth.
                              https://cutcodedown.com

                              Comment

                              Working...
                              X