Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts

    Javascript tutorial site

    I just went live with a Javascript tutorial site I was working on for the past two weeks, and I'd love to hear some opinions.

    Here's the link: http://reallifejs.com/

    I'll gladly hear everything you have to say, but what I'm especially interested in is ...

    1. Whether everything is working for you (there's a lot of client side stuff going on for both the general user interface, and for gimmicks like editable and executable example code)
    2. How you like the content that's already up (if you're interested in Javascript at all)


    Thanks for your time, I'm waiting for your feedback.

  2. Users who have thanked venegal for this post:

    alykins (10-10-2011)

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Well, well, nice idea, man. At first I like the JS error message at the top. (Am I such a paranoid geek? ) Nice fonts, too, and an interesting user interaction concept (although it has a slight “mystery meat” feel to it). I also like the use of explicit language although some parents won’t like their children taking this site as primary source.

    I’m so glad you mentioned the “bad practice” kind of issues because that’s what also bothers me the most and I’m happy that I’m not the only one and someone sets out to at least add some explanations on how to do it better.

    One thing that confused me a little was the scrolling behavior. I’m used to hit the spacebar and the content scrolls down one viewport height. On your site, however, it just scrolls down a little (don’t even know if there’s a system to it?), and with my eyes expecting to continue reading at the top and not finding what I expect there, I’m a little confused and have to search the last phrase I read in the middle of the page.

    I also like the way you explained things with analogies but I find it a little much to read at times which could turn off some people that are willing to learn but are less patient. And the average attention span has sunken even more compared to the time before the internet became widely available.

  • #3
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Thanks for taking the time.

    As for the mystery meat: True enough, you have to hover those hidden pages to get to their menus, but I hope it's not too bad — at least you don't have to hover every single menu item to see what's actually hiding behind. Also, I'm not really mentioning that anywhere, but the site is fully navigable with cursor keys and tab, and that should get you around fast enough to take away some of that mystery. I was kind of hoping that those context-sensitive buttons to the left of the pages, which show some of the available keyboard shortcuts, might get users to try around a bit to see what else is possible using their keyboards.

    As for the spacebar behavior: You're right, and I've changed it. There's a bit of a system to the scrolling, in that mousewheel or cursor up/down will scroll for an amount of pixels that's supposed to make sure that the fixed-position buttons and the menu, which can be fetched down to the current scroll position, will stay within the baseline grid. I implemented the behavior you were expecting from the spacebar for the page-down key, and to be honest, I wasn't aware that the spacebar does the same thing, so I used a rather arbitrary multiple of the mousewheel amount. This whole taking-the-scrolling-away-from-the-browser-business is a bit dubious in the first place, but I wanted to see if I could do it right. It definitely shouldn't mess with people's expectations of how scrolling is supposed to work.

    As for the TL;DR: I do hope that there are people who enjoy the read enough to push through a whole article. I don't really know, though, and this will be interesting. I haven't written up that much content yet, so I can't really say whether the style of the articles will actually stay that way. This will be interesting from an SEO perspective, too, since with the way I'm currently writing these things I have practically no titles or headings with any meaningful keywords.

    Oh, and if you liked that JS error message, you might also enjoy having a look at the site with your choice of Internet Explorer.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,930
    Thanks
    46
    Thanked 203 Times in 202 Posts
    so far I'm enthralled... I am not very good at javascript and I am perusing your site as of now to further myself thanks

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Just in case you don't know, apparently your site is blacklisted by Websense. It says it has been identified as potentially dangerous. You might want to pop over to the Websense website and run your site through their URL checker to confirm and if necessary submit a ticket to have your site re-evaluated.
    OracleGuy

  • #6
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    alykins: I'm glad you like it.

    oracleguy: Thanks for the heads-up. I don't have any personal experience with Websense, but it seems there are different categories a site can be listed in, which will cause it to be blocked. Apparently only paying customers have access to the URL checker, though. Would you happen to have access to that information which category the site is listed in?
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    By the way, you have a typo in the timeout/interval link in your signature.

  • #8
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Oh, thanks! I had that typo on the site itself, which I noticed and changed yesterday, but it seems I forgot to change the sig too.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #9
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Quote Originally Posted by venegal View Post
    oracleguy: Thanks for the heads-up. I don't have any personal experience with Websense, but it seems there are different categories a site can be listed in, which will cause it to be blocked. Apparently only paying customers have access to the URL checker, though. Would you happen to have access to that information which category the site is listed in?
    Oh I thought you just had to register for a free account on their website to use that tool. It isn't in a specific category, it is blocked because it has been identified as potentially dangerous. I don't know the details of how it reaches that conclusion but if you are on shared hosting perhaps it is the server IP that is blacklisted.
    OracleGuy

  • #10
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Looks like a free account worked a while ago for this, but it doesn't anymore. I'm on shared hosting alright, so there probably isn't much I can do except moving the site, but I'll just go ahead and try to contact Websense anyway. Thanks.

    Edit: I just got word from Websense that the site has been unblocked and assigned a category, which should be reflected in the next database update.
    Last edited by venegal; 10-12-2011 at 01:27 AM.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Interesting layout. I like the colors and the fonts. Your code blocks look very nice. The content (when you narrow it down from the static ) is good. I agree that the entries are a bit...long-winded. I like the writing style in general but in a few instances I found myself getting irritated by the volume of irrelevant text that I had to trudge through. You might just need to tighten it up a bit. If we're being really picky, you have some minor grammar issues in a few places. It's not to a level that would distract people, though.

    It seems as though the use of profanity is a bit unnecessary. I've seen, heard, and read worse so don't get me wrong. I am not offended by it but it's like listening to a perfectly good song that suddenly tosses the "F" bomb in without any strong contextual reason to have it in there. If not for that then it would be fun for all ages but as it is, it seems a bit juvenile. It's like you're trying too hard to be "hip" and it just seems forced. You can be casual and fun (which I imagine is your reason for it, given the rest of your writing style) without it.

    Your side navigation tabs ([MOU] and [HOM]) overrun the screen width on 1280px display. You can see a vestige of the tabs, but you can't read them and without any scrolling ability you can't ever get them into the window. They're technically functional, but it's a crap shoot to 1) notice them; and 2) know what they do before you give up and just try them. Granted, I have a 1920px display so I can expand the window to get at the tabs but not everyone will have that flexibility to work with.

    I don't know why, but the black bar that peeks out when you mouseover a code block bugs me. I totally get why you did it, but it's distracting when I am just scrolling down the page with the mouse wheel while my cursor hovers in limbo over the page passing beneath it. I would rather not see the black panel until I actually call for it.

    There is a lot of "dead space" under the content on most of the pages. It's not a really big problem, but people might expect to see something else down there. I presume this would be due to all pages having the same height as the longest pane, but I wonder if you could do something to tighten that up to keep the scroll bar relevant to the actual contents available on screen.

    Hopefully I don't come across as mean-spirited. I mean only to be concise and honest. Given that the above is the best I can come up with for things that I DON'T like about the site that means it's pretty good on the whole.
    Last edited by Rowsdower!; 10-11-2011 at 11:13 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Thanks for the comments. You're not coming across as mean-sprited at all — I appreciate your feedback.

    Regarding the grammar issues: English is not my first language, so writing English texts is a constant learning experience for me. If you remember any of those issues, it would be great if you could send me a PM.

    As for the profanity, I can see how this can come across a bit juvenile and unneeded. My reason for this is probably that most of the time I'm doing client work, so I enjoy doing whatever I want (and usually can't do) in those rare moments when I have a project of my own going. This might very well change, once I'm accustomed to that new-found freedom (and that long-winded style might very well vanish in the process, too).

    Those cut-off buttons on smaller screens is also part of that — I enjoyed not caring about a smaller screen size, especially since those buttons are just shortcuts for things you can easily do without. But thanks for pointing that out, because I just realized that for editable code boxes I deactivated click-to-close (so changes won't be lost by mistake), and with the back button hidden on smaller screens, that's not great. I'm going to have to make a change there.

    To be honest, at times that black bar got on my nerves too, so I'm going to have to do something there. Maybe deactivate it during scrolling, or delay it when hovering.

    As for the "dead space": Originally, I had the document height adjust itself to the content height of the currently active page, but then it messed with the smooth-scrolling thing I implemented — if you go from page A to page B, and B's content is smaller than A's, it would just jump up, instead of animating the scroll. I just remembered, though, that I've already written some functionality to delay the document height adjustment until the scrolling is finished, because I needed that for the black code page. I activated that for all pages now, so the problem should be gone.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #13
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,280
    Thanks
    4
    Thanked 83 Times in 82 Posts
    I stopped looking at your site at this point:

    In order to view this site the way it was intended, please upgrade to a more modern browser. Yours is about 2 years old, which is just silly. You wouldn't watch your Blu-rays on Granny's old black-and-white now, would you? I recommend you use Google Chrome. Also, there's no button to remove this message. If you're at work right now, where you are not allowed to use a more modern browser, I do feel sorry for you, but it doesn't change a thing.
    You don't support IE8? I find that as silly you find it silly to use a browser about 2 years old.
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #14
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by Spookster View Post
    You don't support IE8? I find that as silly you find it silly to use a browser about 2 years old.
    When I wrote this, I just dropped a few IE release dates in there and let some code do the rest, but you're right, this does sound strange for the relatively young IE8.

    "Don't support" is a bit harsh, since all the content is there, and it should look pretty enough — it's only the code boxes that are not executable, and the navigation is non-AJAX.

    Anyway, I removed the message and made the site fully functional (I hope!) for IE8. Thanks for pointing that out.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •