Hell is Wordpress: Part 1
","lang":"javascript"}],["code",{"code":"do_action(\"component_has_carousel\");","lang":"html"}],["code",{"code":"function component_has_carousel($args) {\n flickity_load();\n}\n\nadd_action('component_has_carousel', 'component_has_carousel');","lang":"html"}],["code",{"code":"do_action(\"component_has_carousel\", \narray('element' =\> 'my-carousel', \n'name' =\> 'myCarousel', \n'options' =\> 'wrapAround: true,\nsetGallerySize: false,\npageDots: false,'));\n","lang":"html"}],["code",{"code":"function component_has_carousel($args) {\n flickity_load();\n wp_register_script($args['name'],'',);\n wp_enqueue_script($args['name'], '',[], false, true);\n}","lang":"html"}],["code",{"code":"function component_has_carousel($args) {\n flickity_load();\n wp_register_script($args['name'],'',);\n wp_enqueue_script($args['name'], '',[], false, true);\n wp_add_inline_script($args['name'], '\n const '. $args['name'] .' = new Flickity( \".' . $args['element'] . '\", {'.\n $args['options']\n .'});\n ');","lang":"html"}],["code",{"code":"\\n\n\","lang":"javascript"}]],"markups":[["strong"],["em"],["a",["href","https://flickity.metafizzy.co/"]],["i"]],"sections":[[1,"p",[[0,[],0,"Every dev has to do it. We all have to do one site with wordpress because that's what the client wants, and in all fairness it can be good for the portfolio because the dev that can beat a reasonable website out of the infinitely recursive birdsnest that is a 20 year old blogging cms can probably find their feet in any situation, thus follows my many Sisyphean experiences of trying to square the circle and build a responsive, modern website out of twigs and bits of wire. "]]],[1,"h2",[[0,[],0,"Javascript? That's that thing you use for hilarious alert boxes right?"]]],[1,"p",[[0,[0],1,"Javascript is more core to web dev than ever."],[0,[],0," If you're not building a whole site off of the back of it, you're breaking your page into components and several of them will be javascript based. Js is now modular, package managed, asynchronus, cellular, modular, interactiveodular. "]]],[1,"p",[[0,[],0,"Yet Wordpress has been on the snooze while doing this. You don't integrate javascript into Wordpress, you sort of... hot glue it onto the side and hope it doesn't slide off. If you were to look at the oblique and monumental plugin industry that clings to the underside of wordpress like some sort of "],[0,[1],1,"\"open source but not really\" "],[0,[],0,"remora fish the word javascript is interchangeable with jQuery. I mean, why would you need anything else right? jQuery still sitting pretty on such an ancient piece of software seems strangely fitting, but pragmatically it's bad. It's fat, slow and all the other bad things you've heard about jQuery. Get it away from me. "]]],[1,"p",[[0,[],0,"So lets start using modern packages. Lets get some good libs in. How uhhh.. How do you do that?"]]],[1,"p",[[0,[],0,"Well that's just easy!"]]],[1,"p",[[0,[],0,"Wordpress employs a hooks system. For this process I'm integrating a delightfully lightweight and mobile friendly carrousel system called "],[0,[2],1,"flickety"],[0,[],0,". Ok. So we have to register the script, then enqueue the script in the loading stack and it all gets stuffed in a big messy file for everything in the site called "],[0,[3],1,"functions.php "],[0,[],0,"which will inevitably become a huge multiline goliath full of duct tape and patch code. Woe betide anybody who needs to work with a functions.php of an older site."]]],[10,0],[1,"p",[[0,[],0,"Ok so it's registered, what next. Ok now I enqueue it."]]],[10,1],[1,"p",[[0,[],0,"That's definitely code. With some nice empty parameters and some other crap. Still won't do anything though. Those aren't the hooks they're like.. hooks for the hooks. We'll get there."]]],[1,"p",[[0,[3],1,"Note: That last true is to place the script tag in the footer. It defaults to false. Why?"]]],[1,"p",[[0,[],0,"Ok now I need to instantiate the library. I'm going to instantiate the library off of multiple components but long story short I'm going to want something like this:"]]],[10,2],[1,"p",[[0,[],0,"Just a nice simple instantiation, we give it an element class to query and an object of options. But I want to be able to define what element it globs onto, I want to set what it calls the variable in case I have more than one carousel on one page and I want to be able to set the options. Which means passing variables from the server side theme layer to the browser side JS engine. Which means inline JS which means..."]]],[1,"h2",[[0,[],0,"Inline JS. Hell Level 2."]]],[1,"p",[[0,[],0,"Whenever I load a component which needs "],[0,[0],1,"Flickity"],[0,[],0,", I guess I'll add the code to trigger it. Which means actions. Actions are how hooks get.. hooked? So I build a template component and the first line of it is "]]],[10,3],[1,"p",[[0,[],0,"And now we give it the hook in the functions file. "]]],[10,4],[1,"p",[[0,[],0,"Ok. So I load the library whenever the component is present. That's it right? "]]],[1,"blockquote",[[0,[],0,"right?"]]],[1,"p",[[0,[],0,"No. So now I need to pass the parameters to this ever growing piece of code scattered around the file base. I can pass an argument variable with "],[0,[3],1,"do_action. "],[0,[],0,"So I guess I need to slap it all in an array and hope for the best. "]]],[10,5],[1,"p",[[0,[],0,"Ew. Ok now we have to take those arguments and put it into javascript. Wait inline javascript? How do we do that? Oh you can't. First, we register a new piece of javascript, because inline javascript HAS to be attached to a registered piece of javascript. So we enqueue a dummy script just so we can pin the inline code to it. "]]],[10,6],[1,"p",[[0,[],0,"And then we write the inline code and commit code blasphemy. It's so ugly, it's so unwieldy, it's so.. Wordpress. "]]],[10,7],[1,"p",[[0,[],0,"And to those of you who are still reading. What do we have to show for our efforts?"]]],[10,8],[1,"p",[[0,[],0,"Did you get all that? All that for two freaking script tags? This should not be difficult, this should not be so labyrinthine. This should not be so... "],[0,[0],1,"Wordpress"]]],[1,"p",[[0,[],0,"Pray for me dear reader. I have a long road to go before I'm done. "]]]]});