Dea ea Ce DA emmy) eM a mM CMe mole ed cs ed tty WordPress can saved pers weeks of effort. It's difficult o justify writing your own CMS when itoffers so many features, That said, there are times when you want to inject your own PHP co pethaps a custom form or a repo erated by another system, cdPreas pag ‘or post, you can simply add a PHP include( function to page php or singlephp accorcinaly, eg Snclude(‘aycode.php")5 ‘Assuming myoode php resides in your theme falder (wp-content/themes/theme-name) willbe included and executed at that pont. But what if you need to include a file ona specific post/page or within the middle of a content block? We need a WordPress plugin Creating the Plugin <4 php-Includephp in your plugins folder (wp-content/pluains) an add 3 he by WordPress: fer soit canbe iden Description: Include PAP files using a shortcode Duthor UAT hetp: /eptineluorks.net/ “ This is followed by our primary function, PHP_Inc fi 0, Itexpects an array of parameters although were just using one 's not passed, fle set to ‘defaultOoce 11 include Pre file function Pa_anelue(parans = a62y0) { extrect(shorteode tts (array ), Saran) ob starts neluo( got thane eoot() - °/° «got sonplate() . “/8Fi2e.phy return ob. get elean(); “The function assumes you're requesting a fle which resides inthe theme folder. The last three lines include the file and retum its executed contents using PHP's output buffering functions, warning Win ges poe. ‘comes great responsibilty. This plugin may be srmall bu it allows anyone to execute arbitrary cde. That's not be a problem if youre the sole editor of your own blog, but you should be wary of other users, ‘Optionally, you could modify the include statement’ location or only permit files with 2 specific name pattem, eg. “includermycode-Sfile php" This should safeguard against users including any PHP file Finally, wail register our function as a shortcode handler: U1 cegister shortsode (98d shorteode(phpineloe’, PH Inelude") 3 ‘Save the fle and activate the plugin in your WordPress control panel Including a PHP File ‘The following shortcode can now be added to any page or post ‘Assuming mycode php exists in your theme folder, t willbe inserted at that pont inthe content. hope you find it useful Craig Buckler ¥ fin Q Craig feetanoe UX nab constant whol hs fet ape oe20 1995. Sncs tht ns been stvcstig sana acess, na best- practce HTMLStecanques. Hes created rps specications, webstes ndcne appcatns fr companes ard erganisatons cng te UK Parmar neSucpeen Patan the Osparmant ot Err & imate Change Meso, and mate Hes ten moethan 3.000 roi or ‘StePait and youcanfeanen Geractucierre UI Code Challenge #1 — Heartbeats Do you ever find thatthe UI screens that we see in blockbuster movies, television, {and games are so much more fun than the Uls we might build at work? Here's your ‘chance to code something fun and maybe even win a $100 Amazon Gift Card. Challenge #1: Create an ECG/EKG* Heart Rate UI Animationg these FUIs 7 j The Task as long as you ‘can present your solution as a CodePen. " eaThings to keep in mind... Humans are NOT perfect clockwork machines ~ we need your ne to show authentio organi, rander coking variation, 2 Typically the ines written to screen sharp but then fates to black before being overwritten onthe next pass. 3. No GIF animation, video or After Effects ~ were looking fora code solution 4 Solutions shouldbe a fork the CodePen above (so we can Keep track of solutions) Feel fre toadd/change/remove whatever you Ike fom the fork How do | enter? Easy. Just posta link to your CodePen io fork in the comments below with a short ‘explanation of what you did and why. If youve got more than one idea, you can enter more than once, For simplicity, dart enter more than one vatiation on the same idea. How will you pick the winner? Well be picking the winner based on three criteria 1 Gode elegance and effectiveness: Fer es is beter Fevier characters s bet Simplicity and code readability is rated high 2 Look and feet: The more movie authentic your U looks the better {3 Clevernessiinventiveness: This is pure factor stutf we haven't thought of, ‘Seriptabilty, audio, 30, whatever ‘Theres no pure mathematical formula for picking the v what Kishen, Joel and l agree on. nner, soit will come down to When will you judge it? Challenge opens for entries on Wednesday Sth June at 9:00 am PST an closes 8 ook ater Wednesday 12th June 9:00 am PST) Best of luck. We'e looking forward to what you can come up with Post your entry here (ECGIEKG, cesoeasoneohy) Alex Walker ¥ @ Q ing cand ising t0S nce 201, He wel ten des ner {er Sto and oetene Stunts Dag and Xe wh ow 1a itn Now xis rated ne larva, deep raced so cane roauet ana eae Replies eeeoo8 @ rmrlagmer Ck this all otitis a ve track of my heartbeat hitps://codepen.io/mrlagmer/pen/eaavJVUses react and takes a prop of BPM fo set the starting heart rate. twill then randomly {90 Up down or stay the same each second, It should also be real speed in that f you put in BPM of 1201t should beat 120 times a min Let me know how good/bad you tink tis = alexwalker 009) 2009 Okay. weve gt bout day let for competion entries but no contenders yt Ve bull @ Pure GSS solution that Im going to post here as inspiration. 'm going to refine title more, but | thought Fd get something live frst. ‘See the Pen Pure CSS ‘organic-looking' EKG Animation by Alex (@alexmwalker) on codePen, Notes ‘The EKG unt only uses one external SVG and two separate animation loops, “There are 6 different EKG heartbeats’ provided by the SVG graphic. Im switching ther positions to make them look randomized (ve added tiny numbers at the bottom to make the ‘order switching more obvious). (One CSS animation laos the green gradient from left to right An overlaying mask creates the EKG line. ‘A second animation treats each ‘heartbeat’ a spite and switches them ~ but only in the dark section of the loop when it cant be seen. Even though each heartbeat uses exactly the same CSS animation, we can make them all appear different by offsetting ther timings with negative andmation-delays. All animation is controlled by a single Sass variable atthe top of the CSS window: Sanination-time: 525. Changing that number wil alter the big eadout number and the EKG speed It's butt for Chome but should work anywhere. ’ nickwatton = une) 2018 Hey, nice challenge, thank yout So here is my attempt hitps://codepen.io/2Mogs/pen/MMWsyX Uses particle systems, because Ilike them @® Also, ou can get a very cheap tail effect mith canvas by filing the drawing context with a nearly transparent black, which ‘makes the fading tail for my'ping' ine RAF keeps the whole animation running smoothly with the heartbeat animations controlled with a recursive setTimeout). | am using the setTimeoua) to drive effects ‘that are not perframe, and it also means | can fre this at slightly random intervals, for an organic fee! ‘The heartBeat() method controls and lightly randomizes the pulse rate, sean inthe heart and pulse line eS PauloB © Juss) 2019 Halex, Only just seen tis today otherwise | would have had a proper gobut Im away on holiday and donit have the time ora decent computer to work on. However | couldrit resist just making a basic start so knocked this up in about 30 mins whieh is why its very ough around all the edges.hitps://codepen.io/paulobrien/per/iEaVay It just an svg forthe graph and an animated linear gradient to provide the motion effect. If had time would draw It propery and make it responsive and not just repeat the same svg each time to make it look ate bit random. Must get back to the swimming pooinow @ 8 davidomarteh - Hil Im glad tried this, | dirt know how much | wanted to (k, this is what | got to: https:/codepen jo/davidomart/fulliydyzaa To see the heart rate accelerate or decelerate, mave the mouse across the soreen.It will change acc dingy to the X coordinates of your mouse. Unfortunately, | capped the bpm at 200, Otherwise, it mis-behaves. Edit: Forgot to say that, even if you leave the mouse ata fed position, the bpm wll sill oslate. Ifnot activated by defaut, click on page toallow sound to reproduce The generation of values was desig after looking at this image in Wikipedia ang ‘his video on YouTube watchv=LEaRyzud)w4, (Sorry, as new user, I cant post more ‘than 2 links ina post) licates 8) the PR interval withthe positive pat of the sin function, and the rests 100, ») the ORS complex by generating 3 different magnitudes, one around -10, one around 80, and one around-20, and then interpotating, and the ST +7 segments tke | dd withthe PR interval, ut translating the function by half arotation The rest ofthe va oscillate around what is expected to norma in a healthy person, They dorit change accordingly tothe bpm, which had been idea: ifyou s time with your heart beating at 0 bpm, you wont have the vital signs ofa healthy person, of course. Heft the textshadow, and video interlace af hat alexwalker posted inhis CSS example, Ifneeded, comment the nes 6-17 ofthe CSS. ‘The project is done using p5Js. included the core library, and pS sound to produce the soundwave, The main part oft is done in JavaScriot, HTML and OSS were used just to achieve the general layout. ‘Theve are some things I don fel very comfortable, ike some hatd coded values | used and never mocified, but Im very happy with what | got to. Reply To This Discussion SmorerepliesSe Corey Coron HONG