htmLawed is a PHP lib that:
Take a look here
While building plugins for WordPress is fun, it often means repeating tasks over and over again. I love clean and organized code! For my last internal project, a Visual Composer addon bundle, I decided to build a modular system.
So I have one central plugin, handling multiple modules that access methods from the plugin. This allows me to reuse public and admin routines. In combination with _autoload and traits, this makes the codebase lean and mean.
I also decided to use TWIG fully for the presentation layer. Each module can be activated, deactivated, registers their own public and admin views, admin menus, ajax calls, dashboard widgets and additional context.
I am currently in the process of cleaning this up and will share some more details soon.
Cheers
Alex
“WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.” – Wikipedia
As the WebP is not widely supported, you need to use polyfills or workarounds to actually use it. But it makes a lot of sense when you are building image heavy applications for the web. It decreases file-sizes immensely and supports transparency as PNG does.
To allow WebP upload in WordPress, add this to your functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 |
add_filter('upload_mimes','webp_mime_type'); function webp_mime_type($mimes){ return array_merge($mimes,array ( 'webp' => 'image/webp' )); } |
Browsers with native support will show WebP images natively, for browsers without support deploy WebPJS developed by Google. Download and add it to your theme functions.php
|
1 2 3 4 5 6 7 8 9 |
function webp_script() { // Loads JavaScript file for webp image support in all browsers wp_enqueue_script( 'webpjs-script', get_template_directory_uri() . '/js/webpjs-0.0.2.min.js'); } add_action( 'wp_enqueue_scripts', 'webp_script' ); |
This should do the trick and enable WebP for all modern browsers, see browser support on the WebPJS development page.
Here another little nice trick to check for WebP using Javascript and replace webp with png images.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
window.testWebP = function(callback) { var webP = new Image(); webP.onload = webP.onerror = function () { callback(webP.height == 2); }; webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'; }; window.testWebP(function(support) { if(!support){ $('img[src$=".webp"]').each(function(index,element) { element.src = element.src.replace('.webp','.png'); }); } }); |
Enjoy
Alex
Easily reveal elements as they enter the viewport. No dependancies.
Usage examples:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <!-- All your stuff up here... --> <script src='/js/scrollReveal.min.js'></script> <script> window.sr = new scrollReveal(); </script> </body> </html> |
|
1 2 3 4 |
<div data-sr="enter left, hustle 20px"> Foo </div> <div data-sr="wait 2.5s, ease-in-out 100px"> Bar </div> <div data-sr="move 16px scale up 20%, over 2s"> Baz </div> <div data-sr="enter bottom, roll 45deg, over 2s"> Bun </div> |
Github: scrollReveal
Pure CSS
|
1 2 3 4 5 |
.svg{ background-image: url('image.png'); background-image: none,url('image.svg'), url('image.png'); background-size: 100% 100%; } |
Using Modernizer + jQuery
|
1 2 3 4 5 |
if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg', '.png'); }); } |
Custom detection of SVG
|
1 2 3 4 5 6 7 |
var supportsSVG = function() { return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1"); } if (!supportsSVG()) { // work your magic } |
|
1 2 3 4 5 |
function cc_mime_types( $mimes ){ $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter( 'upload_mimes', 'cc_mime_types' ); |
Just add that to your themes functions.php.
The SVG converter is a web frontend to a jQuery Plugin, that allows you to include those line drawings on your webpage.
Single inheritance has often been the limitation for PHP. This means that a class can only inherit from one other class. Often classes share the same methods and it would be beneficial to allow reuse and prevent duplication.
In PHP 5.4 a new feature was added, known as Traits. A Trait is like a Mixin, allowing to use / mix classes into existing classes. This means code reduction and less duplication.
Example of a Trait
|
1 2 3 4 5 6 7 8 |
trait Sharable { public function share($item) { return 'share this item'; } } |
This trait can than be used in other classes:
|
1 2 3 4 5 6 7 8 9 10 11 |
class Post { use Sharable; } class Comment { use Sharable; } |
Both classes can now use the Shareable trait.
|
1 2 3 4 5 |
$post = new Post; echo $post->share(''); // 'share this item' $comment = new Comment; echo $comment->share(''); // 'share this item' |
The benefit is less code duplication. The drawback is, that not all used methods are visible within the source-code of the class. So before moving a method to a trait, make sure that you will actually reuse it ;)
I have been restructuring huge amounts of code over the past months and traits are helping to keep things far more organized.
In combination with __autoload its a real nice way to cleanup your code toolbox.
Happy coding
Alex
When projects are getting bigger, its always nice to split things up and prepare parts of your code for general reuse.
PHP Traits (PHP 5.4+) are a nice way to do this. Adding multiple Traits or classes, requires you to make sure all are being included.
Here is a nice way to register both with the __autoload function
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
spl_autoload_register(function($className) { $fileName = __DIR__.'/class/class.' . $className . '.php'; if (file_exists($fileName)) { include $fileName; } }); spl_autoload_register(function($traitName) { $fileName = __DIR__.'/trait/trait.' . $traitName . '.php'; if (file_exists($fileName)) { include $fileName; } }); |
Traits are loaded when you specify their use in a class.
|
1 2 3 |
class{ use traitOne, traitTwo; } |
