I have an empty template with just a safecracker form consists of 2 custom field. When i try to load it up in the browser, it takes about 2-3 seconds to load. Looking in firebug i see the following GET
http://localhost/ee1/?ACT=7&ui=core,widget,mouse,position,draggable,resizable,button,dialog,datepicker&plugin=scrollable,scrollable.navigator,ee_filebrowser,ee_fileuploader,markitup,thickbox,toolbox.expose,overlay,tmpl&v=1308711156&use_live_url=y&include_jquery=y
I don't need to load most of the things showing in the url above. How can i control what is loaded with safecracker form. I will be loading jQuery/UI directly from google so i don't need safecracker to load it. I'm able to remove jQuery and datepicker from safecracker form by doing datepicker="no" include_jquery="no", but what about removing other things mentioned in the url such as scrollable, draggable, thickbox and other things.
The Short Answer:
Sadly, there's no way to disable many of the included SafeCracker JavaScripts.
The Long Answer:
SafeCracker is designed to be as general purpose as possible and to suit the needs of the largest audience.
With this tradeoff, SafeCracker bundles jQuery, jQuery UI Widgets, jQuery Tools and various other jQuery Plugins and functions to facilitate client-side form validation and presentation of custom fieldtypes.
As you've shown, you can disable jQuery from automatically being output by SafeCracker — say, if you want to use a newer version that what's available from EE's Control Panel — and can you disable the DatePicker, but as far as I know you can't prevent the rest of the JavaScripts from being output without hacking the core SafeCracker library.
Understandbly, I'm not a big fan of this "include everything and the kitchen sink approach" and hate seeing extraneous and bloated scripts being added to the page — especially ones that I would never use in the first place.
Nevertheless, it's clearly a design decision that SafeCracker was built to include all of the JavaScripts it outputs since there isn't an approved way to remove them. So we're essentially stuck dealing with them for the unforeseen future.
If you feel strongly about this, I would suggest submitting a Feature Request to EllisLab to allow more configurability to SafeCracker's sloppy way of outputting more JavaScripts that what's really necessary.
For the curious, take a peak around Line 887 in the following file to see just how many jQuery UI Widgets are bundled in the SafeCracker tag pair.
/system/expressionengine/modules/safecracker/libraries/safecracker_lib.php
Note: If you want to take matters into your own hands, you can comment out some of the items in the $js_defaults and $ui array, which will remove the JavaScripts from being output. However, in doing so you assume all responsibility and risk for SafeCracker's operation.
I'm assuming this has changed since rjb's answer, but SafeCracker provides two parameters I found helpful in drastically reducing page load time:
include_jquery="no" safecracker_head="no"
Relevant documentation
Related
I'm managing a PHP-built site that uses a multi-tier Smarty templating system, with a main template including sub-templates, etc. The site itself has dynamic features of its own, including user profile displayed in the header, footer sitemap and menu dropdowns dependent on user access levels, etc.
I now need to put a vBulletin forum in the middle of it all.
One of my options is, of course, making vBulletin "look like" the site, with a plugin for a header and footer - but that is pretty much out of the question, as some of the site's features should override forum access entirely (maintenance periods, user access restrictions, occasional "splash page" redirections), we have JavaScripts and header bits, and then there's the part about whole-site templates I mentioned. Large bits of page code would need to be duplicated and that's something I'd really rather avoid.
So I went the other way and started including the forum's files through a "wrapper" PHP script, hoping to capture its output entirely in an output buffer, and put it into my template proper. I even simulated REQUEST_URIs and other $_SERVER fields, to make the forum think it's being run standalone. It fought me back fiercely, breaking out of ob_start()s and die()ing instead of returning at certain points, so much that I went back to the drawing board.
My other option is to hack my own site in a gruesome way, to provide a severed header and footer the forum would use - but then there'd be the bits and scripts to combine. Also I'd lose the ability to produce one page in one run, and having one-time generated content synchronized between the header and footer would become a nightmare.
What other options do I have? Do all the sites using vBulletin stick to simple headers and footers, or is there something obvious I'm missing?
Update: What would completely solve my problem would be if vB supported a "template wrapper" plugin, called with all of the forum's generated HTML buffered as a parameter; "here's the output, go ahead and do whatever the hell you want with it". But is there support for that? Or is it feasible to hack it in?
After some searching, I found that vBulletin 5 happens to have a hookFrontendBeforeOutput hook, which can operate on the entirety of the output produced by vBulletin's template rendering. I can thus create a plugin which will capture vB's output, correct it where needed, and feed it into my own template system for a final presentation - as well as fire the site's login and other logic mechanisms.
This forum thread has an example, demonstrating that very hook, albeit in a much simpler case.
I would really appreciate if anybody could help me with this question :)
I want to know whether it's possible to create your own semantic markup in PHP, just like BB Codes, but I want to be able to use it within my template engine system, so I could use it to call custom modules like voting system, adding comments, login form, registration form and so on...
Let me make it clearer for you guys of how I mean;
I'm working on my own CMS not to use it for production purposes but to learn PHP in a better way;
So I had this idea to call specific modules in a page based on their position and in order to be able to do;
For instance we're having a login module which is simply a login form, nothing too crazy, however you want to be able to include that module dynamically in any page you want using the backend and not touching any code;
So all you do in the template page is using my bb codes that I told you earlier;
Something like this;
Remember this is only an idea;
<zone name="left_sidebar"></zone>
And you add this zone markup on your sidebar and if any of your module supposed to be displayed on your left sidebar, it will just by having this markup and nothing more...
And you gone have loads of these semantic markups based on how many editable blocks you have on your page; so you could have one for the right sidebar, one for footer and one for header... etc.
So I now need to know how to could lookup for opening and closing tags, in this case it would be <zone></zone> , then it need to lookup for its attribute and its value, in this case name="right_sidevar"
....
Anybody have any idea of how I could possibly do this kind of thing...
Thanks in advance :)
You could check out TWIG; while it doesn't directly support this kind of feature (because it uses a special syntax for its own elements) it does have very good support for making your own elements, tags, sub-applications and other funky things in the backend.
http://twig.sensiolabs.org/
There are also a number of systems that perform this kind of task in the front-end; this would mean that the substitution is done by Javascript in the browser. In addition to the already mentioned Polymer, there's also Google's framework, Angular.
https://angularjs.org/
Maybe you can use php's libxml module to parse your xml file.
I have a very large site and it takes pretty long time to load. It takes around 120 seconds. What I'm trying to do is loads 1st half of the site loads 1st. Then user can surf while others parts are being loaded.
What I'm trying to do is below.
1st of all is this possible ?
According to my knowledge Yes since Google PageSpeed does that. But the problem is if I use PageSpeed I would have to change my DNS server settings and etc. I would like to do this myself.
How can I get it done ?
What type of technology should I use ?
Given that pages have the .php extension and written in PHP language.
You can use the concept of lazy loading.
You can load only content that is necessary during the load then using jquery and ajax you can load the remaining content.
In this way user can surf and interact easily with the the part already loaded while the other part will be loading asynchronously.
jQuery ajax or post method can help you on this.
A simple example could be,
If There are 5 parts of contents in your page, 2 needs to be loaded immediately
The page will be loaded with 2 parts loaded, so it will take quite less time than 5 parts loading
After document is loaded you will use ajax to load the remaining 3 parts.
Ajax will send request to the specific page of your website(can be possibly named AjaxRequestHandler.php) with some parameters, and this page will process your request and generate html for this and will send it back to your main page which will just show this returned html and this all be happening asynchronously, so the user will be able to communicate with the initially loaded 2 parts
And even if you are new to web technologies, I suppose you have to have the knowledge of atleast ajax and asynchronous calls etc. to achieve lazy loading.
Edit :
For your this question
Except AJAX Is there way around for this?
I think you can try iframes if they can help.
Loading the main content in the page load without iframe while loading other contents in the iframes after pages is loaded.
This jsFiddle
jsfiddle.net/cGDuV/
can help you understand lazy loading with iframe, mentioned in this post of stackoverflow.
You can use javascript for the same if you want to avoid jquery.
You can manipulate the output buffer such that it flushes early thus achieving what your after in the screenshot you posted in your question.
http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/
You can lazyload all your images. Here's a jquery plugin that does it easily
http://www.appelsiini.net/projects/lazyload
You can combine all your js in one file. Same with your css files. This will help the speed.
You can incorporate caching, expires headers and gzip/deflate compression
https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
I would suggest you load your 3rd party javascript widget garbage (Google+ buttons, fabebook like buttons, social, twitter stuff) in a non blocking asynchronous way so it does not slow down the page in the beginning.
http://css-tricks.com/thinking-async/
Optimize your images as much as possible.
http://kraken.io/
Use a CDN
http://www.maxcdn.com/
Finally test your site and see where is the big bottleneck and where you can improve the site for speed optimization. Use the waterfall chart feature
http://www.webpagetest.org/
One of the things you can do is to load all the essential (top half) of the page normally, then use javascript/ajax to load the second half of the page. This is a very common technique (and is often used to load images).
Here is an excellent tutorial from jQuery for Designers, walking through how to use jQuery to load images asynchronously after the page loads. http://jqueryfordesigners.com/image-loading/
Having said that, a two minute load time seems very excessive. Maybe you should check if there is anything that could be slowing down your server.
You need to determine why the site is loading slow. What is the size of the data you are sending? Google and Firefox have web developer tools to help you determine which elements are taking the longest too load. Once you've determined the culprit, try to load the worst offenders asynchronously.
Check out this article on aync requests: https://segment.io/blog/how-to-make-async-requests-in-php/
in my opinion you need an endless scrolling solution. That is, have a fixed amount of content per "page" (could be an estimated 1500px worth of height). Use jQuery to load another "page" when user scrolls down by a set amount.
If you really want to unconditionally load all the content, just use the same approach, and on document ready trigger the next page to load. The loop the page loader until the whole thing is loaded. That way, you load the first "page", and defer the content "below the fold" to subsequent requests.
What you want is what Facebook does Bigpipe and here is a relevant SO post: Facebook Bigpipe Technique Algorithm
There are other solutions involving all sorts of Javascript but since you want PHP and Facebook uses PHP you should read up on Bigpipe. Juho even has an example written in PHP so that should meet your PHP requirements (but yes it still requires js but not AJAX).
Prefetching Resources the web page require large files for loading can often benefited from changing the order that those files are requested from the server. Sometimes, it makes sense to download files before they are necessary, so that they are instantly available once requested. When the resources required for a page can be loaded in advance, the user-perceived network latency for that page can be significantly reduced or even eliminated. When you run Google pagespeed insights and see the result, you will see how the fix the problems in your website.
Some tips to load site faster:
Make fewer HTTP requests
Add a far-future expires header
Gzip your page's components
Minify your JavaScript, CSS and HTML
One more thing when loading a webpage and if you are using php with smarty you can use this plugin which reduces the number of http requests to you server and makes the site load faster by combining all the js and css resource's request into one single HTTP request.
Alternatively you might be looking for these plugins.
http://masonry.desandro.com/
http://isotope.metafizzy.co/
http://www.wookmark.com/jquery-plugin
Does all this stuff have to be on the same page? Does it make sense to split the content over multiple pages? Can some of it be delayed until the person requests it? Can it be grouped into tabs? Hidden tabs could be lazy loaded for instance.
Give serious thought to restructuring the content in other ways. You might be able to come up with an alternate arrangement that simplifies the problem.
Having in mind all that was mentioned above you may think of caching parts of your data/html code with memcache or in any other way possible so you skip its generation every time. Of course this depends pretty much on how often the data changes.
Don't browsers render the document as it comes in? Whatever you put at the top of the file will be received by the client first, and therefore will be displayed first. For example, when you try to view a very large image file online, it loads from top to bottom. The same is true for web pages. Just put the content you want to load first at the top of the page!
Answer to question one: yes
Answer to question two: above
Answer to question three: Nothing, just put the page in the correct order.
Well the idea is more or less the same as described by Pawan Nogariya above. You will need to fetch views and data asynchronously and then display these. But this means that you will never redirect or post back to any other page rather will get every view via ajaz. This will make you application SPA (Single Page Application) like Gmail. And, this will also mean you need to keep track of what has been renedered and what not, leaving you in a mess. So, instead of doing everything your way there are already developed and popular frameworks available that let you do that but they also make it SPA. Which means that your application doesnt "posts" to the server as in redirection but everything is doen using Ajax.
You can use Backbone (Backbone.js), Knockout (Knockout.js) and may others to achieve this. These are javascript based frameworks that help achieving what you have just asked and may expample and tutorials are also easily available. You can use it with any language as we are using it with C# (MVC) for a relatively large applicaiton.
this is going to be ugly! You should definitely consider using ajax calls to load page fragments AFTER a first content stage is loaded!
This is going to break almost all known web standards, but it might render the website in parts....
this being said: here's the ugly stuff
First: get rid of the <html> tag of your website, start with the <head> DO NOT use a <body> tag either.
Now send your html-code in the order you want it to be loaded (top first) using echo ...
after each closing tag of a group (say </table> or </div>) use flush(); ob_flush(); this will send all known content to the browser immediately.
The browser now decides if it can render the known content or not and if it will (based on the browser specifics and user settings) but with few exceptions it will.
some browsers like to wait for the closing body-tag that's why we dropped it, others even wait for the closing html tag (safari afair) that's why we dropped that too.
If you use the echo-flush scenario wisely you should be able to split the page into renderable parts which most browsers will display without an error.
Again... don't do it this way.. it's bad, ugly and not even near any web standards
But you asked for it.
For your this question
Except AJAX Is there way around for this?
I think you can try iframes if they can help.
Loading the main content in the page load without iframe while loading other contents in the iframes after pages is loaded.
This jsFiddle
jsfiddle.net/cGDuV/
can help you understand lazy loading with iframe, mentioned in this post of stackoverflow.
You can use javascript for the same if you want to avoid jquery.
With pure PHP? Not smart.
$(function() {
$('#body').delay(1).fadeOut();
});
Fiddle example: http://jsfiddle.net/r7MgY/
I am building a web application in which the user may add a page, edit the layout, drag drop element, resize element, format the text, edit the element attribute etc.
In the page the user may include (retrieve) dynamic data, like maybe data from database, data generated by php code, etc.
I have played around with cakephp and jquery lately and tried to build this app. But I stumbled upon on how to appropriately display the php code. I tried to look into the cakephp core code and find about output buffering and tried to utilize output buffering to parse the php code and use regex to display it but it is more likely to reinvent the wheel if I write the parser my self
What I am asking is:
Ok, to be more simple and specific I just want to ask, how to save and load the page that was created by the user especially if the page contains php code. I just want to know is there any other method than write my own parser or maybe a library to parse a php code?
Ok that's all for now, does anyone have any idea how to implement it? Or maybe any page / website that could be useful to take some reference from? Maybe a sample code from which I can take some reference
Thanks
I'm not sure you'll find any good answer here about that.
Whoa I don't know where to start. I'll start by the number 3. You want widgets. Then that means you have to create widget class or objects that possesses a template or something that makes them drawable "well, kinda". If I were you it would be loaded from javascript and not really from php. Each widget would be in some way individual applications loaded in a div using javascript.
Point 2, You wanted widgets. When you add widgets to your page, you have to save some informations, like Position, Title, dimensions and so on. You may even save creation parameters. For exemple a ListWidget may be started with different ItemProvider. That way you don't have to write 1000 widgets but only one that shows different content. That said you have widgets, dimension and position. Now that lead us to point 1.
Point 1. Once you have your widgets, position and dimensions, you send the data you used to create them associated with the page to the server. That lead us two point 2 again.
Once you have saved a page. You can see it by retrieving all widgets with parameters and so on. That leaves you 2 options.
Generate Javascript that will recreate the saved widgets.
Generate Html will all the widgets.
Option 1 is simpler since option 2 won't bind html to javascript by itself. Solution 2 on the other hand is better since there is only 1 request to the server.
Oh and a last thing, You should set yourself some limits. That kind of thing can get very complicated and unfortunately not that great. See drupal for example. It does lots of cool stuff but as soon as you install lots of module. Drupal transform itself in some sort of memory eating monster. And almost all the time you don't really need that much of dynamic content. Fixed layouts will do work nice almost 99% of the time.
I'm also forced to say that but if you try to create an application that give users as much power as a scientist that could raise a 7 legged cat. I think you're going to play with really obscure forces!
I have a medium size legacy php application with almost no javascript integration. I've recently been learning javascript (yes actually learning it) using Douglas Crockfords excellent book and taken YUI as my library of choice. I've tried out a few things and got a few things working but now I want to integrate the various components etc into my application properly, my question is how to go about doing this for ease of maintenance and code reuse.
Currently the application consists of
php pages
smarty templates (html templates with some special template markup) for each section of a page so multiple templates may be used for a single page.
single css file.
I have the following ideas about how to integrate my javascript into the pages.
Write inline javascript in each smarty template with the code required for that section.
Write a seperate .js file to go with each smarty template that is linked in and then a single inline script to run it.
a seperate .js file for each php page which would have all the functionality required for the entire .php page. A small inline function would call whatever functions were required.
Something I havent though of?
Does this make any sense? Does anyone have a good suggestion for this?
Update:
One extra bit of info is that its an internal application, so its not so important to restrict everything to a single file.
Two other options:
A single JS file that contains all the JS for your entire site. Depending on your caching settings, you should be able to get the user to download just one file for the entire site and use a cached version for every other page.
Divide your JS up according to function, rather than page, and include whatever functionality each page requires. E.g. one page may require tabs, form validation and animation, while another may only require tabs.
Or you can have a hybrid of these: one JS file that contains the vast majority of your code and an extra file if needed for particular pages or templates.
None of the approaches mentioned are wrong (though I'd skip the inline JS one as much as possible); which one is best will depend on your precise situation and your personal preferences.
Firstly, most setups allow a master layout template in which you can place a common page opening or, alternatively, each template includes some global header.
That being said, you should do a combination of 1, 2 and 3:
Have a .js that is included in all templates that contains global functionality. Each template may also optionally have it's own .js specific to that page or section of pages. Finally, if there's tiny amounts of code specific to a page (or must be dynamically generated each time), it won't make sense to initiate another http connection for it so have that source be right in the template.
if you don't have a ton of javascript then create an external js file and include it in the header of the webpages and be done with it.