1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Looking for some reviews of my website

Discussion in 'Websites' started by macstux, Dec 10, 2019.

Thread Status:
Not open for further replies.
  1. #1
    Hey guys,

    I recently started up and old gaming for and rebranded it now called WeChinima. The forum is a gaming machinima community. The forum is based off of an old forum back in 2010 called WeGame.com I really hope to provide people to showcase their work on the forum and talk about gaming.

    wechinima.com

    What do you guys think? Did you ever go to wegame.com back in the day?
     
    macstux, Dec 10, 2019 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    The menu bar is too bright for such a dark theme, with that white on blue dancing the razor's edge of accessibility minimums. The way the dates are offset into the margin looks more like a rendering error than intentional design. The blue on grey text is outright illegible, as is the smaller font used in quotes. (like that steam text section). I'm also not a fan of the alternating column layout as it's confusing to even tell what's what. It all just kind of feels "tossed into the page any-old-way" because of that. Don't even get me started about the font-size and colour contrasts in the footer.

    In terms of the colours, might I suggest you try the webaim colour contrast checker, and remember that thanks to font-smoothing and webfonts -- which didn't exist mainstream when the WCAG was created -- you should treat AAA "normal" as your minimum for any font under 1.5REM (aka 24px for "16px/normal" users)

    https://webaim.org/resources/contrastchecker/

    Alternative navigation is utterly banjaxed, likely from gibberish non-semantic markup. This is borne out if you throw the main page at a structural analysis tool. The H3 preceeding the H1 just plain breaks things since as always that's nonsensical code.

    Popping the bonnet to look at the markup it's the typical train wreck laundry list of how NOT to write HTML, CSS, or JavaScript I've come to expect from trash like Xenforo. The manually including the FA files regardless of browser detection, the endless pointless DIV with classes for things that should be leveraging semantics, the general lack of proper semantics, the endless scripttard data-hooks for things that shouldn't even warrant the PRESENCE of JavaScript, the X-UA rubbish bespeaking a complete lack of understanding what that META is even for, anchors just blindly slopped into a DIV pretending to be a menu with no block-level separators (the reason menus are supposed to be nested UL), etc, etc, etc.

    Hardly a shock it's vomiting up 44k of markup for 4k of plaintext and not even three content media elements -- aka not even a quarter that much code's flipping job! /FAIL/ at basic HTML and CSS.

    But that's typical for most off the shelf answers, see my own ongoing struggle with SMF and trying to drag it kicking and screaming into the light. The difference is I'm only dealing with 2x the bloat to sift through, not 5 to 10x.

    See mental midgetry like this:

    
    <body data-template="EWRporta_articles_index">
    
    <div class="p-pageWrapper" id="top">
    
    
    
    <header class="p-header" id="header">
    	<div class="p-header-inner">
    		<div class="p-header-content">
    
    			<div class="p-header-logo p-header-logo--image">
    				<a href="https://www.wechinima.com">
    					<img src="https://wechinima.com/styles/wechinima/logo.png"
    						alt="WeChinima.com Machinima Gaming  Community"
    						 />
    				</a>
    			</div>
    
    			
    		</div>
    	</div>
    </header>
    
    
    
    
    
    	<div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header">
    		
    	<nav class="p-nav">
    		<div class="p-nav-inner">
    			<a class="p-nav-menuTrigger" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0">
    				<i aria-hidden="true"></i>
    				<span class="p-nav-menuText">Menu</span>
    			</a>
    
    			<div class="p-nav-smallLogo">
    				<a href="https://www.wechinima.com">
    					<img src="https://wechinima.com/styles/wechinima/logo.png"
    						alt="WeChinima.com Machinima Gaming  Community"
    					 />
    				</a>
    			</div>
    
    			<div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
    				<div class="hScroller-scroll">
    					<ul class="p-nav-list js-offCanvasNavSource">
    					
    						<li>
    							
    	<div class="p-navEl is-selected" >
    		
    
    			
    	
    	<a href="/"
    		class="p-navEl-link "
    		
    		data-xf-key="1"
    		data-nav-id="EWRporta">Home</a>
    
    
    			
    
    		
    		
    	</div>
    
    						</li>
    					
    						<li>
    							
    	<div class="p-navEl " data-has-children="true">
    		
    
    			
    	
    	<a href="/forums/"
    		class="p-navEl-link p-navEl-link--splitMenu "
    		
    		
    		data-nav-id="forums">Forums</a>
    
    
    			<a data-xf-key="2"
    				data-xf-click="menu"
    				data-menu-pos-ref="< .p-navEl"
    				class="p-navEl-splitTrigger"
    				role="button"
    				tabindex="0"
    				aria-label="Toggle expanded"
    				aria-expanded="false"
    				aria-haspopup="true"></a>
    
    		
    		
    			<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
    				<div class="menu-content">
    Code (markup):
    Doing the job of something more like this:

    
    <body>
    
    <h1><a href="/">WeChinema</a></h1>
    
    <input type="checkbox" id="toggle_mainMenu" class="toggle" hidden>
    <label for="toggle_mainMenu"></label>
    <ul id="mainMenu">
    	<li><a href="/">Home</a></li>
    	<li>
    		<input type="checkbox" id="toggle_forums" class="toggle" hidden>
    		<label for="toggle_forums">Forums</label>
    		<ul>
    
    Code (markup):
    You asked "why not Xenforo?" on mine? That's why. REALLY sad part being if they just used the proper semantics they wouldn't need the aria-bloat BS ... since Aria seems to mostly exist for correcting when you use the wrong markup. You want stupid? THAT'S stupid.
     
    deathshadow, Dec 12, 2019 IP
    macstux likes this.
  3. macstux

    macstux Well-Known Member

    Messages:
    336
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    155
    #3
    Thank you, for you post, yeah I completely forgot to change the footer color to match the same dark gray.

    I like the dark grey blue and white, I suppose the nav bar needs to be a little darker blue. As for the code I'm more just learning how to edit the theme before I start digging into XF code and screwing everything up.
     
    macstux, Dec 12, 2019 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    I realize for a gaming forum a black background and a white font is almost a must, but boy my eyes get tired real fast from it.
     
    qwikad.com, Dec 12, 2019 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Why I've become a fan of day/night toggle options on sites... particularly given how ridiculously easy it is to implement... just a checkbox, a label, an extra DIV you might have anyways, and adjacent sibling selectors. The most one might have JS do is set a cookie or local storage of if the checkbox is on or off.
     
    deathshadow, Dec 12, 2019 IP
  6. macstux

    macstux Well-Known Member

    Messages:
    336
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    155
    #6
    I'd like to implement this... can it be separate from XF or do I have to make it an addon
     
    macstux, Dec 12, 2019 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Since it would literally be entirely client-side driven, there's no real reason to even get the server-side involved, meaning terms like addon/plugin/extension/mod/whateverIsTrendyThisWeel shouldn't even need to get involved.

    But to be fair, I feel that way about a lot of things people do.

    I mean LITERALLY you just put:

    
    <input type="checkbox" id="toggle_dayNight" class="toggle remember" hidden>
    <div id="top">
    
    Code (markup):
    Or whatever your main content wrapping DIV is. We need a content wrapping 100% min-height DIV since input can't go before <body>. Technically validation will bitch about the INPUT being direct child of BODY, ignore that noise.

    Now first we want to bring the checkbox back into functionality with display:block, but still hidden so we apo it off the screen. This lets it be focused for keyboard navigation and makes IE and Edge let it work.

    
    .toggle {
      display:block;
      position:absolute;
      left:-999em;
    }
    
    Code (markup):
    Might look stupid, but it works.

    
    #top {
      background:#EEE;
    }
    
    h1 {
      background:rgba(0,0,0.0.1);
    }
    
    Code (markup):
    To make the toggle trigger night mode, you'd just:

    
    #toggle_dayNight:checked + #top {
      background:#222;
    }
    
    #toggle_dayNight:checked + #top h1 {
      background:rgba(255,255,255,0.1);
    }
    
    Code (markup):
    The trick is how to trigger the checkbox on and off whilst hiding it.

    
    <label for="toggle_dayNight" class="control_dayNight"></label>
    
    Code (markup):
    
    .control_dayNight:before {
      content:"Click for Night Mode";
    }
    
    #toggle_dayNight:checked + #top .control_dayNight:before {
      content:"Click for Day Mode";
    }
    
    Code (markup):
    We want that label empty since CSS off it does nothing, so we use generated content not only to make the text but also to change the text when it is checked.

    More complex layouts you may need to use :checked + element + element, or even :checked ~ element, or some such.

    But that's really the functionality side of implementing it. You could get fancier with fade in/out animations or slide in/out changes of day/night icons to take it even further.

    It might seem like having to say ":checked + #top Element" over and over again would be painful in terms of reskinning, but so long as you didn't piss on it with a framework and have proper separation of presentation from content, the average site shouldn't need more than 4k of code, at worst 6k... basically bupkis.

    Now, that makes it toggle on/off, but then we need to store the state. This is where that "remember" class comes into play. I often have a LOT of checkboxes I want to remember the state of, and this is where the ONLY scripting comes into play.

    
    (function(d) {
    
    	var rememberInput = d.getElementsByClassName('remember');
    	
    	/* believe it or not, fastest way to iterate a nodeList */
    	for (var i = 0, input; input = rememberInput[i]; i++) {
    	
    		/* first let's see if any are to be remembered as set */
    		if (localStorage.getItem(input.id) === '1') input.checked = true;
    			
    		/* then add event handler to save their state */
    		input.addEventListener('change', rememberChange, false);
    	}
    	
    	function rememberChange(e) {
    	
    		/* we'll use local storage, but cookie can be used too */
    		localStorage.setItem(
    			e.currentTarget.id,
    			e.currentTarget.checked ? '1' : ''
    		);
    		console.log(
    			e.currentTarget.checked,
    			localStorage.getItem(e.currentTarget.id)
    		);
    		
    	} // rememberChange
    
    })(document);
    Code (markup):
    Which I'd include right before </body> so the script runs before CSS is applied. This way the "check the local storage and set the value if present" will set day/night before the render starts. Yes, some tools will bitch about a "blocking script" but in this case we're blocking on purpose in a place where it doesn't matter!

    Another reason not to blindly trust the advice coming out of a lot of "tools" of late. It's just getting worse.
     
    Last edited: Dec 12, 2019
    deathshadow, Dec 12, 2019 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    deathshadow, Dec 12, 2019 IP
    macstux and qwikad.com like this.
  9. macstux

    macstux Well-Known Member

    Messages:
    336
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    155
    #9
    oh wow thank you for that!
     
    macstux, Dec 12, 2019 IP
Thread Status:
Not open for further replies.