Jump to content

More About Markup Regions: A Mixed Proposal

Pixrael

By Pixrael
in API & Templates

 Share

Recommended Posts

Pixrael Sr. Member

Pixrael

Posted
Posted

As a graphic designer I like the new options to output markup with the templates (region function and regions markup strategy) but testing them I think they could adapt a little more for ease of use. In this proposal I modify the syntax and the way of assigning the values, while I try to maintain the concept.

Next the common example, in "_main.php" 

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--[pw headseo]-->
        <!--[/pw]-->

        <!--[pw headstyles]-->
        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <!--[/pw]-->

        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <!--[pw headscripts]-->
        <!--[/pw]-->
    </head>
    <body>
        <!--[pw header]-->
        <h1><?php echo $page->title(); ?></h1>
        <!--[/pw]-->
        
        <!--[pw body]-->
        <?php echo $page->body(); ?>
        <!--[/pw]-->
        
        <!--[pw footer]-->
        <!--[/pw]-->

        <!--[pw footerscripts]-->
        <script src="js/jquery.min.js"></script>
        <!--[/pw]-->
    </body>
</html>

then in the template file "home.php" 

<!--[pw headstyles+]-->
<link rel="stylesheet" href="css/home.css">
<style>
    body {
        padding-top: 50px;
        padding-bottom: 20px;
    }
</style>
<!--[/pw]-->

<!--[pw head+]-->
<h2><?php echo $page->headline(); ?></h2>
<!--[/pw]-->

<!--[pw footer]-->
<h3>About Homepage</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur dignissim nisi nec consequat.</p>
<!--[/pw]-->

Well I'm not a programmer, I hope you understand the above. But the idea is:

  • Using html comments for regions definition, this is a standard in html, and not interfere with the DOM or with the page structure, allowing using it in document areas that are not visual. The current option basically is to use DIV but this is not correct in areas like the head tag.
  • Using the open/close tag system allow the use of IDE features for html as auto-completion, code coloring, code validation, visual previews and more. Allowing populate the initial values for regions without variables concatenation and with the previous advantage (auto-completion, code coloring, etc)
  • The pages can be render without additional Ids and class, maybe useful for debugging and can be cleaned in production with something like $config->cleanRegions = true;

It can support the current prepend, append, before, after etc regions strategy, I think its a mix of the current Region Markup. As I said I am not programmer but I think it can be implemented using Output Buffering ob_start (); ob_end_clean (); capturing the code between open/close comments tag and assigning them to the corresponding region ... If someone likes and have time to analyze and improve this idea, are welcome because I don't know how to implementing it .. sorry :-) 

  • Like 1
Robin S Hero Member

Robin S

Posted
Posted
5 hours ago, Pixrael said:

Using html comments for regions definition, this is a standard in html, and not interfere with the DOM or with the page structure, allowing using it in document areas that are not visual. The current option basically is to use DIV but this is not correct in areas like the head tag.

I think @ryan is unlikely to switch from region attributes in tags to a different system where regions are defined using HTML comments, considering that the Markup Regions feature is already published and currently being used in its existing form.

But I do agree with your request to support a region tag that is stripped out of the final output. As you noted, that would be particularly useful for defining multiple regions inside the <head> element.

There is a GitHub feature request that covers some of this stuff: https://github.com/processwire/processwire-requests/issues/78

  • Like 1
szabesz Hero Member

szabesz

Posted
Posted
8 hours ago, Robin S said:

But I do agree with your request to support a region tag that is stripped out of the final output.

+1 for this :) Personally I'm not a fan of turning comments into interpreted code. It is hacky and can be hard to read when you have other comments for actual note taking purposes. But maybe it's just me who feels this way :)

Pixrael Sr. Member

Pixrael

Posted
  • Author
Posted

I do not see the problem of using comments, especially during production. I usually use comments to identify parts of my code in the nesting nature of the DOM tree, in a format similar to:

<! -- here start the header - ->

<! -- end of the header - ->

I only propose a nomenclature to be able to easily identify the regions using a parsing code. Not in conflict with other comments used in the code.

Pixrael Sr. Member

Pixrael

Posted
  • Author
Posted

Continuing with the idea, to include some functionality of the current implementation:

Having in _main.php 

<!---[pw foo]-->
<p>Lorem ipsum dolor sit amet</p>
<!---[/pw]-->

in template files to replace 

<!---[pw foo]-->
<h2>Curabitur nec odio et elit iaculis posuere. Aenean finibus felis justo, vel porttitor tortor malesuada et.</h2>
<!---[/pw]-->

Output 

<h2>Curabitur nec odio et elit iaculis posuere. Aenean finibus felis justo, vel porttitor tortor malesuada et.</h2>

in template files to prepend 

<!---[pw +foo]-->
<h1>consectetur adipiscing elit</h1>
<!---[/pw]-->

Output 

<h1>consectetur adipiscing elit</h1>
<p>Lorem ipsum dolor sit amet</p>

in template files to append 

<!---[pw foo+]-->
<ul>
  <li>Proin iaculis feugiat tortor</li>
  <li>Vestibulum vestibulum ultricies semper</li>
</ul>
<!---[/pw]-->

Output 

<p>Lorem ipsum dolor sit amet</p>
<ul>
  <li>Proin iaculis feugiat tortor</li>
  <li>Vestibulum vestibulum ultricies semper</li>
</ul>

in template files to inherit 

<!---[pw foo]-->
<h1>consectetur adipiscing elit</h1>
<!---[pw ++]-->
<ul>
  <li>Proin iaculis feugiat tortor</li>
  <li>Vestibulum vestibulum ultricies semper</li>
</ul>
<!---[/pw]-->

Ouput 

<h1>consectetur adipiscing elit</h1>
<p>Lorem ipsum dolor sit amet</p>
<ul>
  <li>Proin iaculis feugiat tortor</li>
  <li>Vestibulum vestibulum ultricies semper</li>
</ul>

in template files to remove 

<!---[pw foo]-->
<!---[/pw]-->

And finally if the region is not declared in the template file, output the initial content.

Yannick Albert Full Member

Yannick Albert

Posted
Posted

One has to parse those comments blocks out of the html, recursively, identify/skip real comments, follow inheritance tree, protect against vuln xss foo etc... The parsing is currently done in WireMarkupRegions.php which has a lot hardcoded and html specific stuff, so it's hard to wrap around.

If you really want this syntax, you should stick with an existing template engine like twig or mustache and replace the template tags with your custom comment-tag. Also consider FileCompilerModule...

I personally use plates...

  • Like 1
Pixrael Sr. Member

Pixrael

Posted
  • Author
Posted

Thanks for your comments, I also reviewed how Ryan implemented it, from there come my idea. I currently use a Latte Engine Module, but for 90% of the web pages my clients need is too much of the view/controller model, it's a lot of work for simple things. That's why I like what Ryan did, but I need regions that be more versatile in defining where to place it in the document, that not use the classes/ids directly and be less complicated in terms of the number of directives and tags variants. Just do it simple. An illustration example: https://processwire.com/talk/topic/15582-markup-regionsidea-for-another-placement-attribute/

  • Like 2
Pixrael Sr. Member

Pixrael

Posted
  • Author
Posted

I do not mention it but part of my idea is because I use a lot of the code completion of my IDE, it makes me work faster and with less errors, so I hate the concatenation of variables when I write a mix of html tags with php Code .. yes I'm lazy but I love it O0

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...