Jump to content

main.css?ts=<?= time() ?> Has me confused.


Greg Lumley
 Share

Recommended Posts

Hi! In busy learning to know PW better I'm looking at existing code.

I have Bitpoets Editorial Responsive Blog as example. While looking through the code I've just found this line in the blog-head.php 

<link rel="stylesheet" href="<?= $config->urls->templates ?>assets/css/main.css?ts=<?= time() ?>" />

I hope it's not a stupid question but I've never seen this before...

main.css?ts=<?= time() ?>

I notice the main template is empty but of course renders on the front end.

Using a timestamp really has me totally confused. Can someone explain it to me please. 

Thank you! 

Greg

Link to comment
Share on other sites

The idea is that the link to the css-file will change every second, and the browser will be tricked into thinking this is a new stylesheet and loading it fresh every time (and not cached copy).

  • Like 1
Link to comment
Share on other sites

There's gotta be some CSS file loading (if the site has any actual styles), check your Network tab on chrome to check what's loaded, also if you inspect any element it should indicate the style's source. Otherwise, it might have been output right into the html body. 

Link to comment
Share on other sites

9 hours ago, Greg Lumley said:

In other words if I wanted to modify any styling where would I do it? 

I don't really know that site profile, but looking at the repository there's a SASS folder, you're probably supposed to compile the CSS from that. You can do that with sass or node-sass.

10 hours ago, eydun said:

The idea is that the link to the css-file will change every second, and the browser will be tricked into thinking this is a new stylesheet and loading it fresh every time (and not cached copy).

Just for the sake of completion: This is horrible for a live site. You usually want to have something like this during development so you don't have to do a full reload every time, but on a live site this will prevent all your visitors from ever caching your site's CSS. This will have a bad impact on page speed, so make sure to remove that on the live site!

Link to comment
Share on other sites

15 minutes ago, MoritzLost said:

Just for the sake of completion: This is horrible for a live site. You usually want to have something like this during development so you don't have to do a full reload every time, but on a live site this will prevent all your visitors from ever caching your site's CSS. This will have a bad impact on page speed, so make sure to remove that on the live site!

That. The main.css under site/templates/assets/css is meant as a convenient place to add custom styling (no sass/less magic involved here). I had meant to change that time() call to an mtime() call as an example of how to bust the cache whenver the file is changed, but I apparently never got around to it. Brushing up my site templates is another point on my growing todo list.

The default styling is done in site/templates/assets/css/blog.css, but you won't see that filename in the developer console because the site template uses the AOIM module to combinde and minimize the js and css files.

  • Like 1
Link to comment
Share on other sites

1 hour ago, MoritzLost said:

You usually want to have something like this during development so you don't have to do a full reload every time

Nowadays open dev tools and disable the cache in there. No need for hacky cache busting on each request.

  • Like 1
Link to comment
Share on other sites

5 hours ago, BitPoet said:

That. The main.css under site/templates/assets/css is meant as a convenient place to add custom styling (no sass/less magic involved here). I had meant to change that time() call to an mtime() call as an example of how to bust the cache whenver the file is changed, but I apparently never got around to it. Brushing up my site templates is another point on my growing todo list.

The default styling is done in site/templates/assets/css/blog.css, but you won't see that filename in the developer console because the site template uses the AOIM module to combinde and minimize the js and css files.

Thank you BitPoet!

I hadn't thought of that. 🤪

Link to comment
Share on other sites

1 hour ago, LostKobrakai said:

Sure, but this is imo best done by appending e.g. the md5 hash of the file contents for cache busting. This one will actually only change if the css file itself changed.

As an alternative to this approach, my new Cache Control module also includes an optional feature for browser cache busting. You retrieve a version string (by default, a timestamp) through the module that is stored inside the cache. As soon as you clear the cache through the module, this version string gets cleared as well, and a new version string is generated during the next request. This ensures that any assets cached by the browser are cleared alongside all server-side caches. Just throwing it out there 🙂

  • Like 2
Link to comment
Share on other sites

2 hours ago, LostKobrakai said:

Sure, but this is imo best done by appending e.g. the md5 hash of the file contents for cache busting. This one will actually only change if the css file itself changed.

Doesn't that need to generate the md5 hash of the file on every request (if not cached)? I guess filemtime() is a lot faster than md5_file()?

Link to comment
Share on other sites

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Zendex
      Hi,
      I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.
       
      HTML:
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Zendex</title>
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="preconnect" href="https://fonts.gstatic.com"> 
      <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
      </head>
      <body>
          <div id="nav_bar">
              <div id="Zendex">ZENDEX</div>
      <ul>
          <a href="contact.html"><li>CONTACT</li></a>
          <a href="films.html"><li>FILMS</li></a>
          <a href="about.html"><li>ABOUT</li></a>
          <a href="home.html"><li>HOME</li></a>
              </ul>
          </div>
          <div class="main"></div>
      </body>
      </html>
      CSS:
      @charset "UTF-8";
      /* CSS Document */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      }
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section {
          display: block;
      }
      body {
          line-height: 1;
          background-color: #6A6969;
      }
      ol, ul {
          list-style: none;
      }
      blockquote, q {
          quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      }
      table {
          border-collapse: collapse;
          border-spacing: 0;
      }
      /*-------------------------------------------------------------------------------------------------------------------------------------------------*/
      #nav_bar{
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100vw;
          height: 125px;
          background-color: #484848;
          border: solid 1px black;
      }
      li{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: right;
          margin: 45px 50px 0px 0px;
          height: 125px;
      }
      #Zendex{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: left;
          margin: 45px 0px 0px 100px;
          color: azure;
      }
      #home{
          
      }
      #about{
          
      }
      #films{
          
      }
      #contact{
          
      }
      ul{
          margin: 0px 50px 0px 0px;
          color: azure;
          height: 125px;
      }
      a:link{
          color: white;
      }
      li:hover{
          height: 125px;
          background-color: #6A6969;
          color: white;
      }
       

    • By milo695
      Hello,
      I've added a class in ProcessPageEditLink but when I call it from Editor (attributes > class) nothing happens.
      Also, I've created the class in my custom.css, is there any other css file this class needs to be in?
      thanks
    • By wwwouter
      Some context: I want to use PHP variables in my CSS (more info below) and found a solution on CSS-tricks that looks fairly elegant and somewhat solid to me. It's pretty simple, I created a file style.css.php inside the site/templates/ directory and load that in my page head. In style.css.php is the following:
      <?php header("Content-type: text/css; charset: UTF-8"); header("Charset:utf-8"); if ($homepage->hero_image) { echo <<<CSS .hero { background: url($homepage->hero_image->url) no-repeat; } CSS; } ?> Because of the following RewriteCond (line 373) in the htaccess file the server sends a 403 error back when the file is requested:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))($|/) [NC,OR] (My htaccess file is @version 3.0 and @htaccessVersion 301)
      This is how I thought I could fix that (based on these answers on stack overflow) but it does not work:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/((?!style\.css).)*\.(php|html?|tpl|inc))($|/) [NC,OR] I tested the rule with htacess tester and htaccess check and both worked for me, but on my site I still get a 403 instead of the file.
      I'm working on localhost, using MAMP (not sure if that's relevant).
      A bit more about what I want to do achieve specifically:
      I want to use an image as a background-image for an element, not place it as an image. This image is provided by the user via a field and can therefore change.
      I know I can achieve this like this:
      echo "<section class='hero' style='background-image: url($page->hero_image->url)'></section>"; But I would prefer a method other than inlining because of scalability and cleanliness. (I admit the extra link in the page head is not ideal either)
       
      P.s. this is my first post here, I hope it's submitted in the right forum and my explanation is clear.
    • By Greg Lumley
      Hi! I'm busy building a blog into my first test/learning/free/clients/project 😁

      I've had a look at all the blog examples and there seem to be different ways of doing it. (the point of Processwire, I know)

      It seems this is generally how it's done:
      Master Blog Page
        - Blog Post Child Page
        - Blog Post Child Page
        - Blog Post Child Page What I'm particularly interested in is the Categories. What would you advise?
      Repeater Field?
      Tags?

      I think I've even seen Categories set up as Children of a master Category page too. The pages were hidden containing no 

      What would you recommend? 

      Thank you! 
      Greg. 

      Bare with me, I'm bashing my way through while I learn. 
    • By hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
×
×
  • Create New...