August 19, 2013 at 3:11 pm #3607
I have a few ChildsPlay related questions that I have been thinking about for a while and I would appreciate your thoughts…
- I don’t need fitvids and flexslider so I have simply commented out the wp_register_script and wp_enqueue calls and edited / commented out the flexslider related functions. While I have done that successfully (no errors) I was wondering is that the “correct” way to eliminate those functions in a child theme?
- I want to minimize the amount of java script called to improve my page speed (I am already using autoptimize to compress the code and I am caching) and I noticed on the modernizr dev page that it’s possible to generate and minify the script using just the specific functions that are used in the end application. Is this something that you have considered or done already? If not how would you suggest I easily determine those function?
- I notice that there have been several updates to the dev branch of thematic. Do you see any issues in using that with the current version of Childs Play?
- Do you plan on updating Childs Play if Thematic is updated?
Sorry, it seems a longer list if questions than I had first imagined. 🙂
Thanks.August 19, 2013 at 11:27 pm #3611
1. Yes, you did it correctly by commenting them out. You could just delete the lines also, no biggie. The key with that script_manager section is the way it is done, there are a lot of bad practices and half ass snippets floating around out there. 😉
2. With Modernizr, I just included the basic Dev version since anytime I build a site, I go and customize a new script and rename/replace it, most of the time I only use the Shim/Shiv (makes IE understand HTML5 tags) and a few CSS classes to provide graceful fallbacks for older browsers, so you should always create a build with only what you need, even if it is just the Shim/Shiv for old IE’s. When you do a production version (for live sites) always minify it. I do not however combine all my JS into one file, I leave modernizr as a stand alone file (minimized) where it sits in the header, Jquery is it’s own file in the header (standard way to load jQuery with WP), then I compress everything else usually in the footer, like all the custom scripts.
One of the most important things with site speed is to make sure your assets are Gzipped, and optimizing images, both can make a huge difference.
3. In the dev branch, there are some things being added that overlap with my themes, I will support/fix/update the themes for use with the Stable (not dev) release of Thematic, mostly because the dev branch will can change on a whim (which is good). I do put in my two cents on Github to hopefully provide my thoughts, but anything that will crop up is usually cake to deal with. Currently the theme does work with the latest dev branch… but in the theme options you have to enable “Restore the legacy XHTML Doctype and xhtml compatible markup.” which has the hook I use to add the no-js class for Modernizr.
4. Yeah, I will. I try not to do anything too crazy with my themes so they won’t break and Thematic is good about providing backwards compatibility when new things are added/changed. I just want to mention that Child’s Play and my other themes aren’t meant to be updated, they are just starting points to build on top of and make your own, but when I do change something, I update all the themes.
If you were using the themes for development of responsive sites, I have an awesome one that I haven’t written a post about, however it is super complex in that it is optimized for my workflow, Sass/Compass, Susy Grids and has media queries mixed in the CSS using Sass (instead of a chunk at the bottom) so I dunno how useful it will be to others. All the other themes though I keep pretty simple. 🙂August 20, 2013 at 5:54 am #3613
A couple of follow-on’s
- a) How do you figure out which modernizr elements need to be enabled in the build options when you are production ready? It doesn’t seem reliable to just do that from memory – not for me at least. b) Do you use modernizr.load?
- OK – I’ll wait for the stable release and your update.
- Thanks – I appreciate the effort it must take to support themes that you may not be using much any more.
You didn’t mention the name of your awesome responsive theme – is it Titanic?August 20, 2013 at 9:50 am #3615
I also wonder is there such a thing as a css / js “compiler”, by that I mean a program that generates files which include the only code that is actually used / needed. Approx 50% of my sytle sheet css is superfluous and AFAIK minify type programmes eliminate unused css.August 20, 2013 at 3:50 pm #3617
2. Generally I only use a couple CSS feature detection features with Modernizr on most sites, so it is easy to remember. However now that you mention it, I may start adding a comment with the name Modernizr in it so it can be searched quickly, which would also add as a flag to easily find the stuff later (or for someone else working on the site).
I do not currently use modernizr load, mostly because I don’t work on any sites that are worthy of that kind of optimization, most sites I do are for other designers who don’t really code, so I never really get into JS fallbacks, but I do the CSS fallbacks since they are cake to do. I have a post on an example at my site called Thematic and Modernizr.
3. I forgot to mention in my previous post, but there is a WordPress Plugin for Thematic called the Thematic HTML5 Plugin, which is awesome. I use it on all sites just to make them look more modern, my themes do work with that. I imagine it will be a while before the dev branch gets any traction, so definitely use the plugin. 🙂
4. The theme I am using now is actively being developed, but you can look (or download) the code from Github, or view a the Responsive Start demo, to see how it looks. It isn’t anything fancy (design wise), it is after all just a starting point for coding new sites I build. I might write up a post about it to inspire me to finish, I am just having some organization issues.. super trivial stuff, but I am OCD about some things.August 20, 2013 at 5:58 pm #3619
I used a macro in a text editor to find all the modernizr functions (tests[‘…’]) in the modernizr.js included with childsplay and then searched for them in my childsplay style.css. I excluded the modernizr.xxx functions as they are easy to find anyway (none used in childsplay).
I only found …
I can comment out the audio and video items as I don’t need them. Altogether I will get a huge reduction in the size of the final modernizr script used on my site, once compressed it will be < 10% of the uncompressed full script.
In case this of use to someone else the full list of modernizr functions I used to search from was
inlinesvg svgclippaths smil inlinesvg svg applicationcache webworkers sessionstorage localstorage audio video generatedcontent fontface csstransitions csstransforms3d csstransforms cssreflections cssgradients csscolumns cssanimations opacity textshadow boxshadow borderradius borderimage backgroundsize multiplebgs hsla rgba websockets draganddrop history hashchange indexedDB websqldatabase postmessage geolocation touch webgl canvastext canvas flexboxlegacy flexbox smil
Thanks for the tip on the html5 plugin – I had already noticed and I plan to try it out shortly.
The topic ‘child's play – java script’ is closed to new replies.