child's play – java script

Home Forums Using Thematic Child Themes Free and Premium Child Themes child's play – java script

This topic is: not resolved

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  silas 4 years, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #3607

    silas
    Participant

    Scott,

    I have a few ChildsPlay related questions that I have been thinking about for a while and I would appreciate your thoughts…

    1. 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?
    2. 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?
    3. 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?
    4. 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.

    #3611

    Scott Nix
    Moderator

    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. 🙂

    #3613

    silas
    Participant

    A couple of follow-on’s

    1. 🙂
    2. 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?
    3. OK – I’ll wait for the stable release and your update.
    4. 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?

    #3615

    silas
    Participant

    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.

    #3617

    Scott Nix
    Moderator

    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.

    #3619

    silas
    Participant

    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 …

    svg
    audio
    video
    rgba
    canvas

    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.

     

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘child's play – java script’ is closed to new replies.