// the old way :/ | |
$.ajax({ | |
url: "http://codepen.io/chriscoyier/pen/b2ad8b9a336845dd7b11d4bed34f4256.html", | |
complete: function(resp) { | |
// This HTML needs to be there first | |
$("body").append(resp.responseText); | |
// Because this script is going to do something with it. |
/* | |
Sass - Line On Side Headers | |
Reference Link: http://css-tricks.com/line-on-sides-headers/ | |
Implementation Example: <h1 class="fancy"><span>Title</span></h1> | |
*/ |
/*************************** | |
NOT MAINTAINED! from ~2014 | |
****************************/ | |
// cs4+ script for resizing objects proportionally to fit inside artboard | |
// based on: https://forums.adobe.com/message/4164590 | |
// usage: create a new document with desired artboard size, paste object, select it, run this script | |
// bugs: centering does not work after changing artboard size | |
var activeDoc = app.activeDocument |
<figure> | |
<?php | |
$image = get_field('your_image_field_name'); | |
$atts = array( | |
'imageid' => $image, | |
'size1' => '0', | |
'size2' =>'600', | |
'size3' =>'1000' | |
); | |
echo tevkori_responsive_shortcode($atts) ; ?> |
<script type="text/javascript"> | |
(function () { | |
"use strict"; | |
// once cached, the css file is stored on the client forever unless | |
// the URL below is changed. Any change will invalidate the cache | |
var css_href = './index_files/web-fonts.css'; | |
// a simple event handler wrapper | |
function on(el, ev, callback) { | |
if (el.addEventListener) { | |
el.addEventListener(ev, callback, false); |
@mixin center-align($dir: false) { | |
$map: ( | |
top: ( Y ), | |
left: ( X ) | |
); | |
@if map_get($map, $dir) != null { | |
#{$dir}: 50%; | |
transform: #{"translate#{map_get($map,$dir)}(-50%)"}; | |
} @else { |
// Liked what Chris Coyier showed off in this blog post: | |
// http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like | |
// Decided to make LESS versions really quickly. | |
.coverer() { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; |
<!-- | |
Image is a 87px height & 200px width long. | |
I'm calling an image from DB, but if it fails to load, im listening to the Error event, and than call an image from DB. | |
Big thing here is this guy: `onerror="this.href.baseVal='pathTo_placeholder_fallback_image'"` | |
`this.href.baseVal` | |
This guy enables you to overright the SVG image source, with the fallbacl one. | |
--> |
This is a WORK IN PROGRESS intended for fleshing out and feedback
It's very common for people to be unhappy with how a WordPress plugin adds front end resources to their site. If a plugin needs CSS, the plugin will add a <link>
element to that CSS. If the plugin needs JavaScript, it will add a <script>
to that JavaScript.
Plugins do this because it works. It's damn important for a WordPress plugin to work, even in adverse conditions. They rightfully want good ratings and little customer support.
But this comes at the cost of additional HTTP requests. In optimizing front end performance of a site, reducing the number of HTTP requests is a huge thing. Front end developers want to decide and control how front end resources are being handled, and WordPress plugins don't typically make this easy on them.