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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2017
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    New developer. Take a look at my website.

    This is my first effort. be gentle!
    http://darkmattermma.com

    If you see anything I can do better!
    Last edited by VIPStephan; 05-19-2017 at 06:08 PM. Reason: removed link

  2. #2
    Supreme Master coder!
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    10,206
    Thanks
    10
    Thanked 1,166 Times in 1,157 Posts
    What is it supposed to be about?
    If it's just a personal website, nobody except yourself will really care about how it looks.

  3. #3
    New to the CF scene
    Join Date
    May 2017
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mlseim View Post
    What is it supposed to be about?
    If it's just a personal website, nobody except yourself will really care about how it looks.
    its just a vlog. and im not really looking for feedback on appearance or color scheme but rather the coding.
    This is just a pet project to get to a place where I can complete commercial websites.

    ???

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,253
    Thanks
    2
    Thanked 327 Times in 317 Posts
    I don't do gentle, but I'll try.

    More consistency in your font sizes would help a good deal, things just kind of feel all-over the place on that count. Likewise the dark textured background on the "next fight" area and the red countdown text are very hard to read -- WAY below WCAG minimums. I would brighten up the background on the former's edges to at LEAST #777777.... in the latter's case RED is a VERY hard color to use over dark colors... I would suggest you have a good look at the webaim's tool for figuring out the WCAG math on that, since it's a pain in the arse to do by hand:

    WebAIM: Color Contrast Checker

    VERY handy tool to make sure you're not alienating users with illegible combinations. As it sits that dark red on dark grey is probably invisible to at least 30% of the population at large, so be aware of limitations like that. If that tool I just linked to says NO, it means no.

    MIND you, a pixel or two of text-shadow can be used to adjust the problem on modern browsers, but visually the 'glow' is unappealing to some users, so that's a roll of the dice.

    It is somewhat hard to navigate from an accessibility standpoint, I would suspect a lack of proper semantics in the HTML to be the cause -- improper semantics on the accessibility front INCLUDES HTML 5's pointlessly redundant and ultimately useless NAV, HEADER, FOOTER, ARTICLE, SECTION, MAIN, and ASIDE tags... all of which would serve no purpose if people just used H1..H6 and HR for what they MEAN.

    Looking at the HTML side... yeah, that doesn't make any sense... you're using "mark" to do numbered heading's job. This isn't text being edited in realtime where you're MARKing what's been changed. That's not what the MARK tag is for. Your pairing of H4 to H2 are gibberish too since you're not starting a new subsection that's part of a H3 section before it, so how can you even be dropping to a H4 or even using a new heading tag in the first place? If that's subtext of a heading, it belongs in <small> inside the heading it is part of (the H2), not as a new heading saying "this is the start of a new subsection of the page".

    Of course, you're using bootcrap -- the LAUNDRY LIST of how not to build a website. You're a beginner, you're already being conned by the presentational use of classes defeating the entire reason HTML is separate from CSS in the first place. That explains a lot of your classes for nothing, DIV for nothing, and general "how not to code a website" -- NOT your fault, a LOT of people get suckered in by the CLAIMS that bootstrap is somehow magically easier than knowing what you are doing, even if it leaves broken and battered every website it's used on like -- lets use a relevant simile here -- War Machine does his pornstar brides.

    Likewise as a beginner, you've been suckered in by jQuery... how to take something that should be barely any code (your counter) and turn it into 100k+ of bloated nonsense.

    In the case of both of these "frameworks" I REALLY recommend that you take the time to learn to use HTML, CSS, and JavaScript properly WITHOUT them, before you even THINK about looking at them for use. Only then are you qualified to say if they are in fact worth using, and generally speaking anyone who takes the time to do so quickly finds out that the people promoting systems like jQuery and Bootcrap are talking out their arse. Nothing more than ignorant fools either deluding themselves and others, or outright just scamming people who don't know any better.

    You're starting out -- ignorant isn't an insult; you don't know yet. Be wary when people tell you something massive you have to add to the load time is going to be "easier". More often than not it will rip around and bite you in the arse.

    THAT SAID, it is surprisingly clean given the piss poor choice of tools used to build the site. NORMALLY when someone slops out a page in bootcrap it's a bloated mess with two to ten times the HTML it should have -- that's just expected! Really you've got only around 25% more HTML than you should actually have, that's FAR leaner than most people using bootstrap manage to toss in there. It means you've got good instincts, we just need to get you on the right tools.

    I do think getting you thinking more about document structure than appearance would help with your appearance and layout -- that might sound odd, but things like numbered headings (h1..h6) and horizontal rules (hr) exist for a reason to help grammatically create your structure (they don't mean text in different sizes or 'draw a line across the screen' -- that's just what they do by default), and that semantic grammatical structure and layout translates into basically telling you how the layout should be in order to 'make sense'.

    I've seen a lot worse -- I usually go crackers full on harsh on people using bootcrap, and I've seen worse from people who know better using it. Again, good instincts, good start given the tools; just need to teach you a bit about accessibility, document structure, and how NOT to use bootcrap to do this.
    Last edited by deathshadow; 05-19-2017 at 11:59 PM.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  5. #5
    New to the CF scene
    Join Date
    May 2017
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by deathshadow View Post
    I don't do gentle, but I'll try.

    More consistency in your font sizes would help a good deal, things just kind of feel all-over the place on that count. Likewise the dark textured background on the "next fight" area and the red countdown text are very hard to read -- WAY below WCAG minimums. I would brighten up the background on the former's edges to at LEAST #777777.... in the latter's case RED is a VERY hard color to use over dark colors... I would suggest you have a good look at the webaim's tool for figuring out the WCAG math on that, since it's a pain in the arse to do by hand:

    WebAIM: Color Contrast Checker

    VERY handy tool to make sure you're not alienating users with illegible combinations. As it sits that dark red on dark grey is probably invisible to at least 30% of the population at large, so be aware of limitations like that. If that tool I just linked to says NO, it means no.

    MIND you, a pixel or two of text-shadow can be used to adjust the problem on modern browsers, but visually the 'glow' is unappealing to some users, so that's a roll of the dice.

    It is somewhat hard to navigate from an accessibility standpoint, I would suspect a lack of proper semantics in the HTML to be the cause -- improper semantics on the accessibility front INCLUDES HTML 5's pointlessly redundant and ultimately useless NAV, HEADER, FOOTER, ARTICLE, SECTION, MAIN, and ASIDE tags... all of which would serve no purpose if people just used H1..H6 and HR for what they MEAN.

    Looking at the HTML side... yeah, that doesn't make any sense... you're using "mark" to do numbered heading's job. This isn't text being edited in realtime where you're MARKing what's been changed. That's not what the MARK tag is for. Your pairing of H4 to H2 are gibberish too since you're not starting a new subsection that's part of a H3 section before it, so how can you even be dropping to a H4 or even using a new heading tag in the first place? If that's subtext of a heading, it belongs in <small> inside the heading it is part of (the H2), not as a new heading saying "this is the start of a new subsection of the page".

    Of course, you're using bootcrap -- the LAUNDRY LIST of how not to build a website. You're a beginner, you're already being conned by the presentational use of classes defeating the entire reason HTML is separate from CSS in the first place. That explains a lot of your classes for nothing, DIV for nothing, and general "how not to code a website" -- NOT your fault, a LOT of people get suckered in by the CLAIMS that bootstrap is somehow magically easier than knowing what you are doing, even if it leaves broken and battered every website it's used on like -- lets use a relevant simile here -- War Machine does his pornstar brides.

    Likewise as a beginner, you've been suckered in by jQuery... how to take something that should be barely any code (your counter) and turn it into 100k+ of bloated nonsense.

    In the case of both of these "frameworks" I REALLY recommend that you take the time to learn to use HTML, CSS, and JavaScript properly WITHOUT them, before you even THINK about looking at them for use. Only then are you qualified to say if they are in fact worth using, and generally speaking anyone who takes the time to do so quickly finds out that the people promoting systems like jQuery and Bootcrap are talking out their arse. Nothing more than ignorant fools either deluding themselves and others, or outright just scamming people who don't know any better.

    You're starting out -- ignorant isn't an insult; you don't know yet. Be wary when people tell you something massive you have to add to the load time is going to be "easier". More often than not it will rip around and bite you in the arse.

    THAT SAID, it is surprisingly clean given the piss poor choice of tools used to build the site. NORMALLY when someone slops out a page in bootcrap it's a bloated mess with two to ten times the HTML it should have -- that's just expected! Really you've got only around 25% more HTML than you should actually have, that's FAR leaner than most people using bootstrap manage to toss in there. It means you've got good instincts, we just need to get you on the right tools.

    I do think getting you thinking more about document structure than appearance would help with your appearance and layout -- that might sound odd, but things like numbered headings (h1..h6) and horizontal rules (hr) exist for a reason to help grammatically create your structure (they don't mean text in different sizes or 'draw a line across the screen' -- that's just what they do by default), and that semantic grammatical structure and layout translates into basically telling you how the layout should be in order to 'make sense'.

    I've seen a lot worse -- I usually go crackers full on harsh on people using bootcrap, and I've seen worse from people who know better using it. Again, good instincts, good start given the tools; just need to teach you a bit about accessibility, document structure, and how NOT to use bootcrap to do this.
    Not very gentle, but still very helpful, so I'll take the hit.
    And I appreciate your feedback, I know there's a lot I don't know, but that's why I'm here.
    It may not seem like it but I am actually fluent in html and css. I could create that entire website again using just that. And before I got started using bootstrap or "bootcrap" I read all the commentary about separating presentation and mark up or the ease of creating a full page in minutes. "literally" in minutes. Like most things, I decided to try it myself instead of relying on others' opinions. And I found both sides to be true. Bootstrap allows me to create a whole website in an hour as opposed to many more hours without it but I also quickly saw how classes got out of control and manipulating the styles of pre-made classes became increasingly troublesome. But just fyi, I learned html/css before fooling around with bootstrap.

    I am a stone cold beginner on jQuery. Are you saying that frameworks like bootstrap and jquery will slow load time, no matter the approach?
    I've gotten past the beginner steps of programming, now I want to get more precise, considering load times and bloating as well as other things you mentioned.
    How else could I accomplish the counter?

    I'm not familiar with the contrast checker, but I'll check on it and look at some different options. I was trying to stick with a "dark" scheme but....... I dunno.
    I also totally agree with your comment about HTML5's redundant Nav, Section etc. I never understood the reason for this when they are just div's/

    Thanks for the feedback.

  6. #6
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,253
    Thanks
    2
    Thanked 327 Times in 317 Posts
    Quote Originally Posted by jasonrest View Post
    I am a stone cold beginner on jQuery. Are you saying that frameworks like bootstrap and jquery will slow load time, no matter the approach?
    There are ways to minimize the damage, but in the case of both, they encourage you to write more code than you need ON TOP OF starting out with more code than the majority of websites should even HAVE.

    One of the biggest problems you can face as a page grows is that every file requires a "handshake" to the server -- this means that the more separate files you have, the longer it can take for a page to load REGARDLESS of connection speed at EITHER end. It depends on those AND every switch along the way between the server and the user. "Real world" the average is 200ms. Browsers CAN request multiple files at once, but typically the limit on that is six to eight, depending on client and server load. This is even more limited on mobile where multiple simultaneous connections are even further restricted and/or simply not available given the number of people using the same tower.

    The real world average for desktop is considered to be that the first eight are "free" and then you add 200ms for each file past that first eight. That's AVERAGE, worst case you take two seconds, and add one second for each file past the first six.

    So if you had a file built from 68 files, that's twelve seconds of overhead "average" on a cache empty first-load and over a minute worst case! REGARDLESS OF FILE SIZES OR CONNECTION THROUGHPUT SPEED!!!

    Ever notice that if you upload a hundred 10k files, it's several magnitudes of order slower than uploading a single megabyte file? Yeah, that.

    That's why when you see code like:

    <script src="jquery-latest.js"></script>
    <script src="countdown.js"></script>
    <script src="someotherscript.js"></script>
    <script src="yetanotherbloodyscript.js"></script>
    <script src="keepsloppingtheminhere.js"></script>
    <script src="howmanydoyouneed.js"></script>

    That's just developer ineptitude and/or ignorance. That's WORSE with CSS. Good rule of thumb, if you are deploying more than four files total in scripting on your page and two stylesheets per media="" target, you're doing something wrong!

    I mean you're already up to three, and all you have that warrants the presence of JavaScript is that counter?!? Between bootcraps idiotic halfwit JavaScript for NOTHING (bootstrap.min.js) that shouldn't even EXIST for a bloody layout framework (you need JS for layout, you have no business making layouts), and the bloated train wreck that is jQuery, you're already up to over 330k of JavaScript in three files... for a counter... Think on that.

    Bandwidth is a concern too, even served gzipped that jQuery wreck is sucking down 100k. BY ITSELF jQuery minified and gzipped is larger than I would generally allow ALL of my HTML+CSS+SCRIPTS combined (not counting adverts and social plugins) to reach. That's BEFORE you even start using it! Between jQuery and Bootstrap combined, you've got 490k of HTML, CSS, and JavaScript spanning six files, doing the job of around 16k or less in 3 files!

    ... and really it didn't save you anything on time or coding, if you think it did then you don't have as firm a grasp on HTML or CSS as you might think. This is because you've got 8k of HTML doing 3k's job, and 3k of CSS doing 8k's, job. All you've done by adding the bloated wreck that is bootcrap is swap how much CSS you wrote for how much HTML you wrote.

    .. and the jQuery really didn't save you anything either with that shoddy countdown.js script. You've got 870 bytes of markup for the countdown (or even less if it were generated properly from the script) with 2.77k of scripting that requires the fat bloated 100k gzipped/minified jQuery library doing the job of around a quarter that in HTML and 1.2k of JavaScript WITHOUT getting jQuery involved!

    Or if done properly not slopping scripting only all over the markup, closer to 1.9k of Scripting and one DIV with a NOSCRIPT tag inside it to tell people what's going on.

    Done "improperly" with the scripting only slop in the markup -- fixing the markup so it's not a "list for **** knows what" with "paragraphs around single words because derp":

    Code:
    <div id="countdown" data-eventStart="28 May 2017 13:00:00">
    	<div><span id="countdown_days"></span> Days</div>
    	<div><span id="countdown_hours"></span> Hours</div>
    	<div><span id="countdown_minutes"></span> Minutes</div>
    	<div><span id="countdown_seconds"></span> Seconds</div>
    <!-- .countdown --></div>
    With scripting like this, no jQuery needed:

    Code:
    (function(d){
    
    	function nodeAdd(e, newNode) {
    		e.appendChild(
    			typeof newNode == 'object' ? newNode : d.createTextNode(newNode)
    		);
    	}
    	
    	function nodeFlush(e) {
    		while (e.firstChild) e.removeChild(e.firstChild);
    	}
    	
    	function nodeReplace(e, newNode) {
    		nodeFlush(e);
    		nodeAdd(e, newNode);
    	}
    	
    	var
    		target = document.getElementById('countdown'),
    		eventStart = Date.parse(target.getAttribute('data-eventStart')),
    		days = d.getElementById('countdown_days'),
    		hours = d.getElementById('countdown_hours'),
    		minutes = d.getElementById('countdown_minutes'),
    		seconds = d.getElementById('countdown_seconds');
    		
    	console.log(eventStart);
    		
    	function fillField(field, value, rate) {
    		var show = value % rate;
    		if (show < 10) show = '0' + show;
    		nodeReplace(field, show);
    		return Math.floor(value / rate);
    	}
    		
    	function updateTimer() {
    		var
    			now = new Date(),
    			until = Math.floor((eventStart - now.getTime()) / 1000);
    		if (until > 0) setTimeout(updateTimer, 1000);
    		else until = 0;
    		until = fillField(seconds, until, 60);
    		until = fillField(minutes, until, 60);
    		until = fillField(hours, until, 24);
    		nodeReplace(days, until);
    	}
    	
    	updateTimer();
    	
    })(document);
    the nodexxx functions being some handy helpers for DOM manipulation. If I were to do the same thing what I consider to be 'properly', the markup would be:

    Code:
    <div id="countdown" data-eventStart="28 May 2017 13:00:00">
    	<noscript>
    		<p>
    			Event starts 28 May 2017 13:00:00
    		</p>
    	</noscript>
    <!-- .countdown --></div>
    Because scripting only elements don't belong in the markup, they should be built BY the script.

    Code:
    (function(d){
    
    	function make(tagName, attr) {
    		var e = d.createElement('tagName');
    		for (var i in attr) {
    			switch (i) {
    				case 'after':
    					attr[i].parentNode.insertBefore(e, attr[i].nextSibling);
    					break;
    				case 'before':
    					attr[i].parentNode.insertBefore(e, attr[i]);
    					break;
    				case 'first':
    					attr[i].insertBefore(e, attr[i].firstChild);
    					break;
    				case 'last':
    					attr[i].appendChild(e);
    					break;
    				case 'style':
    					for (var j in attr.style) e.style = attr.style[j];
    					break;
    				case 'content':
    					nodeAdd(e, attr[i]);
    					break;
    				default:
    					e[i] = attr[i];
    			}
    		}
    		return e;
    	}
    	
    	function nodeAdd(e, newNode) {
    		e.appendChild(
    			typeof newNode == 'object' ? newNode : d.createTextNode(newNode)
    		);
    	}
    	
    	function nodeFlush(e) {
    		while (e.firstChild) e.removeChild(e.firstChild);
    	}
    	
    	function nodeReplace(e, newNode) {
    		nodeFlush(e);
    		nodeAdd(e, newNode);
    	}
    	
    	var
    		target = document.getElementById('countdown'),
    		eventStart = Date.parse(target.getAttribute('data-eventStart')),
    		days = make('span', { first : make('div', {
    			last : target, content : ' days '
    		})}),
    		hours = make('span', { first : make('div', {
    			last : target, content : ' hours '
    		})}),
    		minutes = make('span', { first : make('div', {
    			last : target, content : ' minutes '
    		})}),
    		seconds = make('span', { first  : make('div', {
    			last : target, content : ' seconds'
    		})});
    		
    	function fillField(field, value, rate) {
    		var show = value % rate;
    		if (show < 10) show = '0' + show;
    		nodeReplace(field, show);
    		return Math.floor(value / rate);
    	}
    		
    	function updateTimer() {
    		var
    			now = new Date(),
    			until = Math.floor((eventStart - now.getTime()) / 1000);
    		if (until > 0) setTimeout(updateTimer, 1000);
    		else until = 0;
    		until = fillField(seconds, until, 60);
    		until = fillField(minutes, until, 60);
    		until = fillField(hours, until, 24);
    		nodeReplace(days, until);
    	}
    	
    	updateTimer();
    	
    })(document);
    Pretty much the same idea. Added my stock handy little 'make' function to create the elements on the DOM which is faster and cleaner than dicking around with innerHTML, and also means since we create them they don't need ID's. Plenty of hooks in there too for styling them as desired. Even with generating from the JavaScript and that big *** make function we're not even using the full capacity of it's only 2k of JavaScript, almost a third the size of the one you're using that requires jQuery!

    Also, notice the nice pretty easy way we're passing the value on the element using a data- attribute? Yeah, that. Rather than placing a blocking script in your <head> which is the LAST place a <script> tag even belongs. (no joke). When possible, ALL of your <script> should be placed right before you do </body>. They load faster there, have full access to the complete DOM letting you skip the onload rubbish in most cases, it's just all 'round better.

    1:1 comparison:

    Using jQuery:
    870 bytes gibberish HTML + 2846 bytes JavaScript == 3,716 bytes.... or 103 megabytes by the time you load jQuery with it.

    My non-jQ method (with noscript):
    278 bytes HTML + 2058 bytes JavaScript == 2,336 bytes with no library needed.

    Explain to me again how writing 3.62k of code that requires learning some other library ON TOP of JavaScript is magically easier than writing 2.28k of code again?

    Everything I've ever seen done in jQuery falls into one of three categories -- and I've been saying this for closing on a decade now.

    1) Stuff that would be less code without jQuery, NOT counting the size of jQuery against it!

    2) Stuff that HTML and CSS can already do WITHOUT even getting JavaScript involved.

    3) Stuff that has ZERO damned business on a website in the first huffing place.

    I've never seen anything done with jQuery that didn't fit at least one of those descriptions.

    The same type of comparisons can be made when using bootstrap. Your 3.13k darkmattera.css might seem clean and simple, but not when you used 8.87k of markup to do around half the HTML's job. Basically, if I were writing that same page, it is HIGHLY unlikely my HTML would need to be much more than this:

    Code:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <link
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    ><!-- HTML 5 validation kvetches about projection and TV, **** 'em! -->
    <title>DarK maTTeR/title>
    </head><body>
    
    <div id="top">
    
    	<h1><a href="/">DarK maTTeR</a></h1>
    
    	<div id="mainMenu">
    		<input type="checkbox" id="mainMenuShowHide">
    		<label for="mainMenuShowHide"></label>
    		<ul>
    			<li><a href="/">Home</a></li>
    			<li><a href="/about.html">About</a></li>
    			<li><a href="/gallery.html">Gallery</a></li>
    			<li><a href="/contact.html">Contact</a></li>
    		</ul>
    	<!-- #mainMenu --></div>
    
    	<div id="countdown" data-eventStart="28 May 2017 13:00:00 EST">
    		<noscript>
    			<p>
    				Event starts 28 May 2017 13:00:00 EST
    			</p>
    		</noscript>
    	<!-- .countdown --></div>
    
    	<div class="nextFight">
    		<h2>UFC FIGHT NIGHT</h2>
    		Gustaffson vs. Texiera
    	<!-- .nextFight --></div>
    
    <!-- #top --></div>
    
    <div id="content">
    
    	<div class="subsection">
    		<div class="videoSection">
    			<h2><span>#211</span> POST FIGHT REACTION</h2>
    			<div class="videoAspect_16_9">
    				<iframe
    					src="https://player.vimeo.com/video/217437934"
    					frameborder="0"
    					webkitallowfullscreen
    					mozallowfullscreen
    					allowfullscreen
    				></iframe>
    			<!-- .videoAspect_16_9 --></div>
    		<!-- .videoSection --></div>
    		<div class="resultsAndPredictions">
    			<h3>UFC 211: MIOCIC VS DOS SANTOS 2</h3>
    			<ul>
    				<li><em>S. MIOCIC +107</em> <span>VS</span> JUNIOR DOS SANTOS -127</li>
    				<li><em>J. JEDRZEJCZYK(C) -170</em> <span>VS</span> J. ANDRADE +145</li>
    				<li><em>D. MAIA +108</em> <span>VS</span> J. MASVIDAL -128</li>
    				<li><em>F. EDGAR -145</em> <span>VS</span> Y. RODRIGUEZ +125</li>
    				<li><em>D. Branch</em> <span>VS</span> K. Jotko</li>
    			</ul>
    			<table>
    				<caption>Predictions</caption>
    				<thead>
    					<tr>
    						<th scope="col">Jason</th>
    						<th scope="col">Van</th>
    					</tr>
    				</thead><tbody>
    					<tr>
    						<td>Miocic(C)</td>
    						<td>Miocic(C)</td>
    					</tr><tr>
    						<td>Joanna J.(C)</td>
    						<td>Joanna J.(C)</td>
    					</tr><tr>
    						<td>Maia</td>
    						<td>Maia</td>
    					</tr><tr>
    						<td>Edgar</td>
    						<td>Edgar</td>
    					</tr><tr>
    						<td><strong>Pettis</strong></td>
    						<td><strong>Cejudo</strong></td>
    					</tr>
    				</tbody>
    			</table>
    		<!-- .resultsAndPredictions --></div>
    	<!-- .subsection --></div>
    
    	<div class="subsection">
    		<div class="videoSection">
    			<h2><span>#211</span> PRE FIGHT ANALYSIS</h2>
    			<div class="videoAspect_16_9">
    				<iframe
    					src="https://player.vimeo.com/video/217259310"
    					frameborder="0"
    					webkitallowfullscreen
    					mozallowfullscreen
    					allowfullscreen
    				></iframe>
    			<!-- .videoAspect_16_9 --></div>
    		<!-- .videoSection --></div>
    		<div class="resultsAndPredictions">
    			<h3>UFC 211: MIOCIC VS DOS SANTOS 2</h3>
    			<ul>
    				<li>S. MIOCIC(C) +107  <span>VS</span> JUNIOR DOS SANTOS -127</li>
    				<li>J. Jedrzejczyk(C) -170  <span>VS</span> J. Andrade +145</li>
    				<li>D. Maia +108  <span>VS</span> J. Masvidal -128</li>
    				<li>F. Edgar -145  <span>VS</span> Y. Rodriquez +125</li>
    				<li>H. Cejudo -350  <span>VS</span> S. Pettis +285</li>
    			</ul>
    			<table>
    				<caption>Predictions</caption>
    				<thead>
    					<tr>
    						<th scope="col">Jason</th>
    						<th scope="col">Van</th>
    					</tr>
    				</thead><tbody>
    					<tr>
    						<td>Miocic(C)</td>
    						<td>Miocic(C)</td>
    					</tr><tr>
    						<td>Joanna J.(C)</td>
    						<td>Joanna J.(C)</td>
    					</tr><tr>
    						<td>Maia</td>
    						<td>Maia</td>
    					</tr><tr>
    						<td>Edgar</td>
    						<td>Edgar</td>
    					</tr><tr>
    						<td><strong>Pettis</strong></td>
    						<td><strong>Cejudo</strong></td>
    					</tr>
    				</tbody>
    			</table>
    		<!-- .resultsAndPredictions --></div>
    	<!-- .subsection --></div>
    
    <!-- #content --></div>
    
    <div id="footer">
    	<hr>
    	<q>"I've got fresh guys coming on me every five minutes."</q> – <cite>GSP</cite>
    <!-- #footer --></div>
    
    <script src="counter.js"></script>
    
    </body></html>
    Proper numbered heading orders/usage, HR to cause the footer break since HTML 5's <footer> is pointless, table around what appears to be tabular data (since you have headings for the columns), and at 4.08k it would be less than half the markup you currently have.

    I very much doubt given the simplicity so far of the site that my CSS would break 8k... So it's the bootstrap approach of 8k of HTML + 3k of CSS + 147k of bootstrap CSS + 46k of bootcrap JavaScript vs. 4k of markup and maybe 8k of CSS.

    I'll never understand any of the claims on how Bootcrap makes anything easier, faster, simpler... be it collaboration with others, development time, development methodology -- EVERY wild claim made by its proponants holds water like a steel sieve. It makes LESS SENSE than creationism, flat earth theories, homeopathy, the organic food craze, or any of the other pseudo-science quackery that's making the rounds these days.
    Last edited by deathshadow; 05-21-2017 at 11:29 AM.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  7. #7
    New to the CF scene
    Join Date
    May 2017
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by deathshadow View Post
    I'll never understand any of the claims on how Bootcrap makes anything easier, faster, simpler... be it collaboration with others, development time, development methodology -- EVERY wild claim made by its proponants holds water like a steel sieve. It makes LESS SENSE than creationism, flat earth theories, homeopathy, the organic food craze, or any of the other pseudo-science quackery that's making the rounds these days.
    The handshakes makes sense, all your points make sense.
    I've been doing some research online including these links and the consesus among professionals definitely agrees with you.
    This particular article really made the point clear that learning frameworks takes up extra space in your head instead of mastering the foundation of those very frameworks. javascript etc.

    Frameworks don&#39;t make any sense - good coders code, great coders reuse

    My ignorance thus far is not willful and I'm definitely starting to see through the smoke and mirrors.
    While learning bootcrap, I was thinking the whole time "OMG I already know html css, and now I have to learn this whole new discipline" when really NO. I don't.
    Not to mention the change between bootstrap3 and bootstrap 4 was dramatic, was like learning all over again and to be honest, its mostly copy and paste. :/

    and it seems you're right when I read comments from the more experienced coders, they all say avoid frameworks like the plague, they say it makes you dumb and limits your creativity. And if these frameworks died today, or the online engine went down, my website is worthless not to mention if I have customers' websites built on bootstrap, jquery etc.

    I have to say though, I am a network admin, looking to make a switch into professional web design, that most of the time when I am looking for a junior web developer position, they are looking for experience in the foundations....being html/css/javascript but ive also seen a good portion of them, requesting bootstrap, jquery, angular2 experience. So...... I can't avoid what professional programmers say in staying away from them but it seems these companies aren't aware of best practice, and they actually want you to know that "new cool and hip framework". So maybe I need to stay focused on the foundations but also know just enough of these frameworks, just to be able to talk intelligently about them. And this last question, if you could answer will solidify my sticking to the foundation and get started on re-coding the site without bootstrap.

    Is it so, that everything that can be accomplished with jquery, angular2 etc as far as front end is concerned, can be accomplished with only the foundational languages? html/css/javascript. (Bootstrap aside. I already know you can accomplish the same with just html and css)
    I think this gravitation towards bootstrap and the like is mostly from beginners or casual programmers, "which I am" but Im trying to transition into a career developer and im learning some hard lessons but as with most things comes with time and mixing it up with the more experienced. I appreciate the in depth responses.

    Also, I used this tool to measure website load time.
    https://tools.pingdom.com/#!/cBq690/www.darkmatter.com
    Did you know of a better tool?
    These were my results...
    -capture-jpg

    I am very interested to see, if I rebuild the site using just html css, javascript and move the "script" to the bottom and also use an external.js how that will alter the results.


 

Tags for this Thread

Posting Permissions

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