Getting initial to work at the top of the code?

Paul_Wilkins · December 16, 2017, 2:03am

It is entirely possible for the page load to be:

initial shown
links shown
play shown
pause hidden

With the initial image covering up everything else.

That way, clicking on the initial one can just hide initial, leaving everything else ready to be used.

asasass · December 16, 2017, 2:12am

That would be the same as how it’s working here, or no?

Mittineague · December 16, 2017, 2:12am

I would be tempted to rename initial to something like player-wrapper, but I would still have the HTML be
image - links - buttons
only so that even at its ugliest everything would still be there for visitors. Then I would write CSS so they all looked OK - but not have any hiding or covering up done with the CSS. Then I would write JavaScript to modify the DOM / CSS to hide elements.

IIRC, there was talk of the image being decorative, but if it is to be a click target I wouldn’t consider that to be decorative. Of course if it was wrapped in an element instead of an img tag it could be a background image and the element would be the click target.

Paul_Wilkins · December 16, 2017, 2:13am

Yep, that has the same behaviour. The main idea is to structure everything so that it’s more efficient, and easier to work with.

Paul_Wilkins · December 16, 2017, 2:16am

Ahh yes, good point. Because the ultimate goal here is to code the HTML and CSS so that everything works even when CSS or JavaScript isn’t there.

            HTML   CSS   JavaScript
HTML only    ✅    ❌      ❌
With CSS     ✅    ✅      ❌
With JS      ✅    ❌      ✅
With Both    ✅    ✅      ✅

Is that your main goal @Mittineague ?

Paul_Wilkins · December 16, 2017, 2:20am

I know that the availability of JavaScript is a frequent problem, as is well demonstrated at Everyone has JavaScript, right?

But CSS also has problems where it sometimes doesn’t load.

Having the HTML page be capable of working with CSS or JavaScript, becomes a big bonus.

Paul_Wilkins · December 16, 2017, 2:30am

To understand what needs to be done, would it be useful to go through the current problems when it comes to the different situations that should be handled? Such as CSS only, none, JavaScript only, etc?

asasass · December 16, 2017, 2:31am

Are you asking me?

Paul_Wilkins · December 16, 2017, 2:33am

Do you think that it would be a benefit for you to learn about such things?

asasass · December 16, 2017, 2:35am

I think it would benefit me, or someone else who comes to this thread.

Mittineague · December 16, 2017, 2:44am

There are a lot of things that can be absent for some visitors. eg. low bandwidth users might have images turned off, a visitor may not have a certain font or have their browser set to use their own choice of font and font size, CSS / JavaScript may be broken, resources may fail to load for some other reason.

I know some go by “everybody” or “most everybody” has ____, and I guess as long as you know your target audience or are willing to alienate some visitors you could get away with having broken pages. But I prefer to have even utt bulgy pages that work for everyone and get better for those able to take advantage of the improvements. i.e. progressive enhancement

If a page were to be reduced to only its main purpose, it would be to have links that open media files?

Paul_Wilkins · December 16, 2017, 2:49am

Because the web pages are being served over the internet, sometimes requested parts of the page don’t make it. It could be for reasons of business firewalls, security programs, the browser being used, or a wide range of other issues that you can’t plan for.

HTML

What you can plan for is that the HTML page is the fundamental part from which everything is accessed. If the HTML page doesn’t load, then you’re stuffed because the CSS or the JavaScript can’t help you when there’s no HTML.

Because of that, you can make sure that your page works only as HTML, even when there is no CSS or JavaScript.
That’s why some people here have been saying that they would put the links as a list, because that works better when there’s no CSS, and the list is more flexibly manipulated by CSS to fit a wide range of situations.

CSS

Once the HTML page is working without CSS or JavaScript. you can then add on CSS to make it look better, and adjust the layout of the page. That way, even if the CSS doesn’t manage to get loaded, the HTML page will still continue to work as best as it possibly can.

JavaScript

When the HTML and CSS have been dealt with, JavaScript is the last thing that gets added. Why is it last? Because HTML and CSS make up the content and the styling of the page, but JavaScript only gets to have an effect on them after the page has loaded. JavaScript is best used to change the behaviour of the page, which is why events are often used to trigger what JavaScript does.

Progressive Enhancement vs Graceful Degredation

As has been said before, and will continue to be said again, progressive enhancement where you start from the ground up with HTML, then add on CSS, then add on JavaScript, is an improvement on an older technique called graceful degredation.

How graceful degredation worked is that the entire page was made using all of HTML+CSS+JavaScript, and only after all of that did you make changes to all of the combined code so that it can handle some situations where parts of it may not be available. That technique was very tricky to do successfully.

It was only when the idea of progressive enhancement came along, that people realised that there is a much easier and more reliable way to get everything working in a wide variety of situations.

There’s a good piece about progressive enhancement at What is Progressive Enhancement and Why Should You Care?

asasass · December 16, 2017, 3:17am

Where do we go from here?

Paul_Wilkins · December 16, 2017, 3:20am

That’s a good question. Experiencing the problem is I think the next thing to do from here.

Does anyone here have good advice about how that might be done?

asasass · December 16, 2017, 3:24am

If this is how it’s done on this one,

Wouldn’t that give some clues on what would need to be done next?

Paul_Wilkins · December 16, 2017, 3:27am

I don’t know enough about the proper ways to structure HTML and CSS, so I’ll wait for someone more expert on the matter to provide advice about how to best experience the no-CSS and no-JS situation, and use progressive enhancement from there.

asasass · December 16, 2017, 3:31am

@PaulOB was who helped with the html of this version of the code.

asasass · December 16, 2017, 3:34am

Here: His post on the markup of the html
#29

Mittineague · December 16, 2017, 3:41am

If this is a correct assumption, I would start with that.

<ul class="media"> 
   <li>
      <a href="http://somemediafile">Some Media File<\a> 
   </li> 
   <li>
      <a href="http://othermediafile">Other Media File<\a> 
   </li> 
   <li>
      <a href="http://anothermediafile">Another Media File<\a> 
   </li>
.....
</ul>

OK, it will look like a list of links, but CSS can be added to make it look different and then JavaScript can be added to change the default link behavior. The point is that everyone that visits the page will be able to use the page for its most basic purpose.

A list so it will look like

Some Media File
Other Media File
Another Media File

instead of
Some Media File Other Media File Another Media File

asasass · December 16, 2017, 3:44am

What’s the reason why this can’t be used?

<div class="linkse">
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank"></a>