Recommended Posts

I just relaunched my portfolio website. It's my first ajax driven website using ProcessWire as a CMS.
Its a showcase of some of my work as well as a digital playground to improve my coding skills.

If you encounter any bugs or have feedback, feel free to share :) 

janploch.de

  • Like 10

Share this post


Link to post
Share on other sites

Nice site. Really like the minimalism. :)

  • Like 3

Share this post


Link to post
Share on other sites

Very nice!! Loved your work, specially Fabricius logo and website. Great job!!

The only criticism I can make is that sometime a click on an item took more time than expected and I had no visual clue to see if it was loading or not. :)

  • Like 2

Share this post


Link to post
Share on other sites
Posted (edited)

Now that I've looked at the Network inspector, I know why: it took 22 seconds to load all the 25.4MB of images here in Brazil in a 60 Mb/s connection.  :o

Edited by Sergio
grammar
  • Like 1

Share this post


Link to post
Share on other sites
21 minutes ago, Sergio said:

Now that I looked the Network inspector I know why, it took 22 seconds do load all the 25.4MB of images here in Brazil in a 60 Mb/s connection.  :o

Hi Sergio, thats unfortunate.
Iam still optimizing the page. Intentionally it should lazyload/preload some of the assets (this is needed for the scroll sequences used on some pages).
But that should not stop the rest of the page from showing up. What browser did you testet this on?
Maybe I have to add a loading icon just in case..
I added a loading icon if the page is not ready..
Thx for testing!

Share this post


Link to post
Share on other sites

Great!

I'm using Opera v52 on Windows 10.

  • Like 1

Share this post


Link to post
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


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Guy Incognito
      I'm trying to make an AJAX call from within a template to a php script within my templates folder, but I'm getting a 404 from all URLs. Is there a proper way to directly address scripts within PW templates? I've read it will work in the site root, but I'd rather keep all the code together if possible.
    • By Jim Bailie
      Hello,
      After doing a deep dive into Processwire over the weekend (better late than never), I'm starting to layout an app to receive a migration of an existing app. I'm sure I'll have several questions, but here's my first:
      Question: I'm using the _main.php/regions template approach. However, I need to do some ajax calls for some html. How would I tell a page just to include only the needed template/fields?
      I can probably figure this out, but in the interest of time...Thanks!
    • By marcus
      Hi there,
      I ran into a problem posting form data via AJAX. Of course I did some research on the topic via Google, this forum and looking into ProcessWire's core code and found the following steps...
      Setting headers to 'X-Requested-With', 'XMLHttpRequest' Using a trailing slash ...but to no avail. As you can see in the following code I log the response, in this case just a var_dump() of wire("input")->post, but i just get
      response: object(ProcessWire\WireInputData)#240 (0) {
      }
      Here's my code in total. It's simplified, but should work, but for some reason does not. Could any of you point me towards the solution/my fallcy? Thanks in advance!
      <?php if (wire("config")->ajax) { if (wire("input")->post) { var_dump(wire("input")->post); } } else { ?> <div id="app"> <form action="./" method="post" v-on:submit.prevent="getFormValues"> <label><input type="radio" name="yes_no" id="yes" <?= ($page->yes_no == "1") ? "checked" : "" ?> value="1"/>Ja</label> <label><input type="radio" name="yes_no" id="no" <?= ($page->yes_no == "2") ? "checked" : "" ?> value="2"/>Nein</label> <button type="submit">Go</button> <p>{{ yes_no }}</p> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ el: '#app', data: { yes_no: '(unbeantwortet)' }, methods: { getFormValues: function (e) { this.yes_no = e.target.elements.yes_no.value; axios.post('./', { yes_no: this.yes_no }, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json' } }) .then(function (response) { console.log("response:", response.data); }) .catch(function (error) { console.log("error:", error); }); } } }); </script> <?php } ?> // edit:

      I forgot to mention that the POST request is sent (I can track it in developer tools) and it includes the data I'm intending to send. So I really assume it is a reception problem.


    • By Matze
      Hi there,
      I'm trying to get to work some AJAX call with vanilla Javascript, not jQuery.
      Anything seems to work so far, but the !$config->ajax seems to be ignored.
      To find out whats the problem by comparing both, jquery and plain javascipt, i built this template. commenting out //loadJquery(''); or loadVanilla(''); switches the two variants. (empty url variable means that the same pages will be loaded.)
      The problem: the pure Javascript function ("loadVanilla") is loading the full page content into the dc-container, which is wrong. The jQuery function  ("loadJquery") only loads the part outside of the if(!$config->ajax): - which is as it should be. 
      So - any help with this, what am i doing wrong?

      Thanks a lot - Matze
      <?php namespace ProcessWire; if(!$config->ajax): ?> (some static content)<br> <a id="loadlink" href="#">load</a><br> <?php endif; // end if not ajax ?> <span id="dc-container">(dynamic content)</span> <?php if(!$config->ajax): ?> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var loadlink = document.getElementById('loadlink'); loadlink.addEventListener('click', function(event) {   //loadJquery('');   loadVanilla('');   event.preventDefault() }); function loadVanilla(url) {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       document.getElementById("dc-container").innerHTML = 'loaded: ' + this.responseText + (' (by vanilla javascript)');     }   };   xhttp.open("POST", "", true);   xhttp.send(); }   function loadJquery(url){ // Load content   $.ajax({       type: "POST",       url: url,       data: { ajax: true },       success: function(data,status){         pageData = data;       }   }).done(function(){ // when finished and successful     document.getElementById("dc-container").innerHTML = 'loaded: ' + pageData + ' (by jquery ajax)';   }); } </script> <?php endif; // end if not ajax ?>  
    • By jploch
      Hi folks!
      For a website Iam working on I need to (pre)load a huge amount of images (100-500) from a folder in assets (wich I upload via FTP).
      To preload them I want to add them to the DOM inside a container, that I hide with css.
      This images will be use for a frame by frame animation (that animates with scrolling) so they should be loaded parallel and if the user clicks a cancel button, the loading should be canceled. (My website is using ajax to load pages with different animations, and the loading of the second animation waits till the loading of the first animation is loaded completly, wich I want to prevent). 

      I want to use ajax to do this, so I can cancel the loading with xhr.abort();
      Here is my code:
      var folder = '{$config->urls->assets}sequenzen/test/'; xhr = $.ajax({ url : folder, success: function (data) { $(data).find("a").attr("href", function (i, val) { if( val.match(/\.(jpe?g|png|gif)$/) ) { $(".preloader").append( "<img src='"+ folder + val +"'>" ); } }); } }); this will give me a 403 forbidden error.
      After some research I found out that I have to put a .htaccess in my assets folder.
      I also tried putting it in the sub folder "test", where the files are, but Iam still getting the error.

      Is there anything else Iam missing? Is there a configuration in PW i have to change to do that?