Recommended Posts

For some reason I never really thought about the fact that, with client-side rendering, you are basically sending your entire application over the wire. It's like having to install an app each time you visit a website. Makes me feel more confident in the componentized server-side approach I've been pursuing, which seems to achieve 90% of what the fully client-side approach aims to achieve, without the complexity and overhead. And it still leaves room for plugging in a more progressive framework like Vue for the cases when you need that extra 10% of interactivity.

  • Like 1

Share this post


Link to post
Share on other sites

I've read that one a few weeks ago and while I like the gist of it I find it horrible that the javascript community just seems to replace complexity with even more complexity. Also such blog posts always seem to be about the technical side of keeping js in check, while I feel the biggest gains can be archived by actually doing less in javascript. I'd like to see some practical advice on how to not blow through kb's of npm packages and still having a reasonable interactive website. Yesterday I tried out shopifys draggable library and even that one alone is like a third of the max. size of bundle mentioned in the article – just for drag and drop

  • Like 3

Share this post


Link to post
Share on other sites

I find it ironic that a product called "webpack" is now touting the advantages "code-splitting"🤔

It's like we're adding layer on top of layer of complexity just to get back to where we started.

  • Like 6

Share this post


Link to post
Share on other sites

20+ year of web dev and we still on this bs. Best thing that happened is: box-sizing: border-box;  Jees, we fly to the mars...

  • Like 5
  • Haha 3

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Sabrina
      Hi,  
      I would like to start tracking my website visitors with Leady software. Searched the forum for similar discussion yet did not find the right answer. Could you please tell me how can I add their javascript to my website? Is there any step by step guide available?
      Any help appreciated. 
    • By louisstephens
      So I have a fairly unusual project, and I am still trying to wrap my head around it (so excuse me if this doesnt make much sense). A user will create parent page (in the backend) with a modal (piece of cake), but then have a custom js file for each parent page. I wouldn't have an issue with creating a new file everytime, but this instance calls for it pretty much to be an automated process as the users are not tech savy.
      I was thinking that I could create the template for the modal (which will be iframed elsewhere), and using an approach found here, automatically create a "js" child page that I could then somehow output to a custom js file.
      I guess I have several questions regarding this since the modal is iframed in:
      1. Since the init script for the modal has to be outside of the iframe (and placed elsewhere), what is the best way to render the custom script (which will be generated from options on the page in the backend.
      2. Would it even be safe/secure to even attempt this since the js file would be referenced elsewhere (though still in a file on the pw install)
    • By sodesign
      Hello,
      One of our sites is suffering from very slow boot times, and I'm not sure how to diagnose the problem.
      Here's a grab of the debug panel in Tracy debugger after loading the homepage.

      A have a couple of questions -
      Are all of the times listed separate items, or are some of them a breakdown? I ask because the number shown in the tracy debug bar is the total of all of the items but the wording suggests boot.load.modules, boot.load.fields etc are a breakdown of the boot.load. How do I find out what these times consist of? Currently, when using the site, and when running page speed tools, the server load time is consistently upwards of 1s often above 1.5s. This is before the browser even starts downloading resources - a quick grab from my firefox dev tools was even worse:

      I would appreciate any advice on finding the cause here.
      A few details:
      Server is a digital ocean droplet (2GB memory + 2CPUs) running nginx and php7.0 - neither memory or cpu seem particularly taxed Site has 8 locales Using template cache and wirecache for heavy pieces of markup We're on the latest dev branch - the speed issue has been present for the last couple of versions. The speed is similar on when running locally (similar but stripped back nginx config)  
      Thanks,
      Tom

    • By louisstephens
      So, I am not even sure if this is possible, but I thought I would ask anyway. I was building a "system" that would make some modals (izimodal) using a few fields. A user would select the color combo they want, enter a title, fill out the body, and then I was going to pass this (in the template) to fill in the modal. I have this all working pretty flawlessly.
      <div id="example-modal" class="model" data-izimodal-autoopen data-izimodal-transitionin="fadeInDown" data-izimodal-iframeURL="<?php echo $page->example->url; ?>"></div> <script type="text/javascript"> $("#ca-entrance-modal").iziModal({ title: 'Custom Title Here', subtitle: '', headerColor: 'Custom Color Here', history: false, iframe : true, fullscreen: false, loop: false, width: 350, iframeHeight: 350, top: null, bottom: null, borderBottom: false, closeButton: true, }); </script> However, I have hit a road block. The modals are using iframes to pull in the corresponding modal page, but the javascript options are not being iframed (so the modal will actually launch etc). My thought was the user can just copy the page link to the modal, and insert it into the iframe and simply adding the js code, the modal would work (which it does).
      I guess here is my actually problem. Since the user is selecting several options to "customize" the modal, the javascript is custom and differs between each modal. Is there a way to "disable" a textarea, and output the "custom" javascript inside the textarea so they can copy it for inclusion on their actual pages?
       
      Or, is this something that I should just output in the frontend view for users.
    • 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 ?>